/* ── Startsidan på mobil (≤ 767 px, ägaren 2026-10-30; UX-packen) ─────────────────────────────────────────────
   Mörkgrön hero med ett val: "Ansök till betan" blir ett e-postfält på plats, "Se demo" öppnar filmen. Under den ett
   exempel på offerten, det som ingår, flödet som berättelse, frågorna och ansökan igen. Ingen intro, ingen WebGL, inget
   snäpp. Rörelsen (ägaren 2026-10-30: "Apple-känslan") är kritiskt dämpad och lägger aldrig något i vägen: det som syns
   vid start står still, det under skärmen stiger fram en gång, minskad rörelse får allt direkt. Desktop (public-home-desktop.css) ser inte
   det här: .phm är dolt där och desktopens hero/ansökan döljs bara här. */
.phm { display: none; }

/* Etikettens kromkant (mobilen): vinkeln på ljuset som löper runt pillen. */
@property --phm-chrome { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@media (max-width: 767px) {
  :root {
    --phm-deep: #123c2e;
    --phm-forest: #0f3a2c;
    --phm-mint: #8be7b5;
    --phm-card: #f6f5ef;
    --phm-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --phm-cream: #f7f8ed;
    --phm-on-deep: rgb(247 248 237 / 74%);
    --phm-gutter: 18px;
    --phm-serif: Newsreader, ui-serif, Georgia, serif;
    --phm-stick: calc(max(8px, env(safe-area-inset-top, 0px)) + 66px);  /* under glasmenyn */
    /* Rörelsen (UX-packen): kritiskt dämpad som iOS – ingen studs. In/upp med --phm-ease, ut med --phm-out. */
    --phm-ease: cubic-bezier(.22, 1, .36, 1);
    --phm-out: cubic-bezier(.4, 0, 1, 1);
    --phm-sheet: cubic-bezier(.32, .72, 0, 1);
  }

  /* Det gamla mobilflödet bort: desktopens hero, filmdockan, ansökan (mobilens ligger efter frågorna) och snäppet. */
  html:has(.public-home__hero) { scroll-snap-type: none !important; }
  .public-home :is(.public-home__hero, .ph-reel-dock, .public-home__beta-section, .public-home__gradual-blur) { display: none !important; }
  .public-home section { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
  /* Utan JS (eller på seg 3G) står loggan i menyn ändå – introt dansar inte på mobilen. */
  .public-home.is-awaiting-logo .public-home__header [data-header-brand] { opacity: 1 !important; visibility: visible !important; }
  .public-home .public-home__hero-intro { display: none !important; }
  /* Menyn som prissidans (.sp-head): mörkt glas över skogen, vit logga. "Logga in" i toppen – heron har redan
     ansökan; när heron scrollats förbi byts den mot den gröna knappen (public-home.js sätter .is-past-hero). */
  .public-home:has(.phm) > .public-home__header {
    border-color: rgb(255 255 255 / 10%); background: rgb(13 46 35 / 72%); box-shadow: 0 10px 30px -22px rgb(0 0 0 / 60%);
    -webkit-backdrop-filter: saturate(1.15) blur(14px); backdrop-filter: saturate(1.15) blur(14px);
  }
  .public-home:has(.phm) .public-home__header .public-home__brand { color: #fff; }
  .public-home:has(.phm) .public-home__header .public-home__brand-mark span { background: #fff; }
  .public-home:has(.phm) .public-home__header .public-home__brand-mark span:nth-child(even) { background: #2fb47a; }
  .public-home:has(.phm) .public-home__header .public-home__login { color: #eef4ef; }
  .public-home:has(.phm) .public-home__header .public-home__menu summary { color: #eef4ef; }
  .public-home:has(.phm) .public-home__header .public-home__button--small {
    display: inline-flex !important; min-height: 40px; height: 40px; padding: 0 16px; border-radius: 999px;
    background: #02854f; color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%); font-weight: 500;
  }
  .public-home:has(.phm) .public-home__header :is(.public-home__login, .public-home__button--small) { transition: opacity 180ms ease; }
  .public-home:has(.phm):not(.is-past-hero) .public-home__header .public-home__button--small,
  .public-home:has(.phm).is-past-hero .public-home__header .public-home__login { position: absolute; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; }

  .phm { display: block; color: var(--home-ink); }
  .phm .material-symbols-outlined { font-size: 1.15em; line-height: 1; }
  .phm h2 { margin: 0; font-family: var(--phm-serif); font-size: 30px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
  .phm h3 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; }

  /* ── Hero ── */
  /* Skogen (prissidans --forest-bg, public-seo.css): kant i kant och ända upp bakom glasmenyn (sticky, 59 px i flödet),
     bär heron och exemplet och går ner i halvtonsvågen. */
  .phm-forest {
    position: relative; isolation: isolate; overflow-x: clip;
    margin: calc(-1 * var(--ph-head, 3.65rem) - 2px) 0 0;  /* menyns ram är 1 px upptill och nertill */
    padding: calc(var(--ph-head, 3.65rem) + env(safe-area-inset-top, 0px) + 56px) var(--phm-gutter) 48px;
    background: var(--phm-grain), radial-gradient(ellipse 80% 40% at 85% 4%, rgb(47 143 108 / 30%), transparent 60%),
      radial-gradient(ellipse 70% 30% at 10% 60%, rgb(7 131 92 / 22%), transparent 60%), var(--phm-forest);
    background-size: 240px 240px, auto, auto, auto;
    color: var(--phm-cream);
  }
  .phm-hero { position: relative; }
  .phm-hero { text-align: center; }
  .phm-hero h1 { display: grid; justify-items: center; gap: 18px; margin: 0; }
  .phm-h1 { font-family: var(--phm-serif); font-size: clamp(34px, 10.5vw, 40px); font-weight: 400; line-height: 1.04; letter-spacing: -0.03em; color: var(--phm-cream); }
  .phm-lead { margin: 12px auto 0; color: var(--phm-mint); font-family: var(--phm-serif); font-size: 22px; font-style: italic; line-height: 1.2; }  /* en signatur, ingen ingress */

  .phm-actions { display: flex; justify-content: center; }
  /* Heron: Ansök och Demo på en rad; formulärets egna rader (notis, besked) bryts under. */
  .phm-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; }
  .phm-hero-actions .phm-apply__msg { text-align: center; }
  .phm-hero-actions .phm-apply { display: contents; }
  .phm-hero-actions .phm-apply .phm-actions, .phm-hero-actions > .phm-actions { order: 0; width: auto; }
  .phm-hero-actions .phm-cta { padding-left: 20px; gap: 10px; }
  .phm-hero-actions .phm-demo { order: 1; margin-top: 0; min-height: 52px; padding: 0 18px; }
  .phm-hero-actions :is(.phm-apply__note, .phm-apply__msg) { order: 2; flex: 1 1 100%; }
  .phm-hero-actions:has(.phm-apply.is-open) .phm-demo { display: none; }
  .phm-hero-actions:has(.phm-apply.is-open) .phm-apply .phm-actions { flex: 1 1 100%; width: 100%; }
  .phm-cta {
    display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 6px 0 22px;
    border: 0; border-radius: 999px; background: var(--phm-cream); color: var(--phm-deep);
    font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  }
  .phm-cta__arrow {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--phm-deep); color: var(--phm-cream); font-size: 20px !important;
  }
  .phm-demo {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; padding: 0 16px;
    border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; background: rgb(255 255 255 / 6%);
    color: var(--phm-cream); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .phm-demo__len { color: var(--phm-on-deep); font-size: 13px; font-weight: 400; }

  /* Ansökan: knappen blir ett fält på samma plats (public-home.js). */
  .phm-apply { display: grid; justify-items: center; gap: 8px; }
  .phm-apply .phm-actions { width: 100%; }
  /* Fältet är samma vita ruta i heron och i avslutet; knapparna runt omkring är piller. */
  .phm-apply__field {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px;
    width: 100%; min-height: 58px; padding: 5px 5px 5px 16px;
    border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
  }
  .phm-apply__field[hidden], .phm-cta[hidden] { display: none; }
  /* Knappen växer till fältet från mitten: pillret vidgas och hörnen blir rutans (samma objekt, nytt läge). Stängningen
     är samma rörelse baklänges, sedan kommer knapparna tillbaka (public-home.js: is-closing, is-returning). */
  .phm-apply.is-opening .phm-apply__field { animation: phm-grow 280ms var(--phm-sheet) both; }
  .phm-apply.is-closing .phm-apply__field { animation: phm-shrink 220ms var(--phm-out) both; pointer-events: none; }
  .phm-apply.is-returning .phm-cta,
  .phm-hero-actions:has(.phm-apply.is-returning) .phm-demo { animation: phm-return 320ms var(--phm-ease) both; }
  .phm-hero-actions:has(.phm-apply.is-returning) .phm-demo { animation-delay: 50ms; }
  .phm-apply__field input {
    min-width: 0; height: 44px; border: 0; background: none; color: var(--phm-deep);
    font: inherit; font-size: 16px; /* 16 px: iOS zoomar inte */ outline: none;
  }
  .phm-apply__field input::placeholder { color: rgb(18 60 46 / 72%); }
  .phm-apply__field button {
    min-height: 48px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--phm-deep);
    color: var(--phm-cream); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .phm-apply__field button:disabled { opacity: 0.6; cursor: wait; }
  .phm-apply__note { margin: 4px 0 0; color: var(--phm-on-deep); font-size: 13px; }
  .phm-apply__msg { margin: 0; font-size: 14px; line-height: 1.4; }
  .phm-apply__msg:empty { display: none; }
  .phm-apply__msg.is-gone { visibility: hidden; }  /* kvittot tonat: platsen står kvar, inget hopp */
  .phm-apply__msg.is-success { color: #bfe8cf; transition: opacity 400ms ease; }
  .phm-apply__msg.is-fading { opacity: 0; }
  .phm-cta:disabled { cursor: default; opacity: 0.92; }
  .phm-apply__msg.is-error { color: #ffd2d2; }
  .phm-apply.is-done .phm-apply__note { display: none; }
  .phm-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  /* Ansök och Demo på en rad ned till 360 px ("20 s" ryms inte); därunder staplade, lika höga. */
  @media (max-width: 389px) { .phm-demo__len { display: none; } }
  @media (max-width: 360px) {
    :root { --phm-gutter: 16px; }
    .phm-act { min-width: 0; padding: 0 18px; font-size: 14px; }
    .phm-hero-actions:not(:has(.phm-apply.is-open)) { flex-direction: column; }
    .phm-shot { padding-inline: 6px; }
  }
  @media (max-width: 359px) {
    .phm-apply__field { grid-template-columns: 1fr; padding: 6px; }
    .phm-apply__field input { padding: 0 10px; }
    .phm-apply__field button { width: 100%; }
  }
  @keyframes phm-grow { from { opacity: 0.4; clip-path: inset(0 22% 0 22% round 26px); } to { opacity: 1; clip-path: inset(0 round 12px); } }
  @keyframes phm-shrink { from { opacity: 1; clip-path: inset(0 round 12px); } to { opacity: 0; clip-path: inset(0 22% 0 22% round 26px); } }
  @keyframes phm-return { from { opacity: 0; transform: scale(0.94); } }

  /* Exemplet: byggt som kundens riktiga offert (public_review.html) – företagsraden, den gröna rutan, rummen – i ett
     krämvitt kort som prissidans. */
  .phm-shot {
    position: relative; margin: 44px 0 0; padding: 6px 10px 8px; border-radius: 24px; background: var(--phm-card); color: var(--home-ink);
    text-align: left;
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 65%), 0 0 0 1px rgb(139 231 181 / 8%), 0 30px 90px -30px rgb(139 231 181 / 35%);  /* skugga + en svag mintglöd */
  }
  /* Etiketten över kortets nederkant: flödets slut (kunden har svarat), där offerten slutar. Kommer efter kortet. */
  .phm-shot__chip {
    position: absolute; left: 50%; bottom: -16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 13px 0 11px; border: 2px solid transparent; border-radius: 999px; color: var(--phm-cream);
    /* Krom: ett metalliskt ljus som långsamt löper runt kanten (conic-gradient i kantlagret). */
    background: linear-gradient(var(--phm-deep), var(--phm-deep)) padding-box,
      conic-gradient(from var(--phm-chrome), #56625d, #f6f8f7 10%, #9aa6a1 22%, #3d4843 36%, #dfe5e2 50%, #7d8984 62%, #ffffff 74%, #59645f 87%, #56625d) border-box;
    box-shadow: 0 10px 24px -10px rgb(0 0 0 / 50%); font-size: 13px; font-weight: 500; white-space: nowrap; transform: translateX(-50%);
  }
  .phm-shot__chip .material-symbols-outlined { color: var(--phm-mint); font-size: 16px !important; }
  .phm-shot__company { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 6px; }
  /* Företagsmärket som i kundens offert (en mörk ruta med initialerna), i skogens grön med korn. */
  .phm-shot__mark {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--phm-cream); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
    background: var(--phm-grain), linear-gradient(160deg, #1f6a4f, #123c2e); background-size: 240px 240px, auto;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 6px 14px -8px rgb(15 58 44 / 70%);
  }
  .phm-shot__company > span:nth-child(2) { display: grid; line-height: 1.25; }
  .phm-shot__company b { font-size: 14px; font-weight: 500; }
  .phm-shot__company small { color: var(--home-muted); font-size: 12px; }
  /* "Exempel" som en stämpel: versaler, streckad kant – en markering, ingen knapp. */
  .phm-shot__company em {
    margin-left: auto; padding: 3px 7px; border: 1px dashed rgb(18 60 46 / 28%); border-radius: 6px; color: #5f6d64;
    font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase;
  }
  /* Den gröna rutan som offertrutan nedanför: korn, en ljus glöd och prissidans halvtonsprickar i hörnet. */
  .phm-shot__hero {
    position: relative; isolation: isolate; overflow: hidden; padding: 16px; border-radius: 12px; color: var(--phm-cream);
    background: var(--phm-grain), radial-gradient(ellipse 90% 80% at 85% 0%, rgb(139 231 181 / 18%), transparent 60%), #174c39;
    background-size: 240px 240px, auto, auto;
  }
  .phm-shot__hero::after {
    content: ""; position: absolute; right: -18px; bottom: -22px; z-index: -1; width: 170px; height: 140px; pointer-events: none; opacity: 0.26;
    background: url("../img/pricing-halftone.077db3ca101f.svg") no-repeat right bottom / contain;
  }
  .phm-shot__no { margin: 0; color: #8fe0b4; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .phm-shot__hello { margin: 8px 0 0; font-family: var(--phm-serif); font-size: 20px; line-height: 1.15; }
  .phm-shot__pay { display: grid; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 14%); }
  .phm-shot__pay small { color: var(--phm-on-deep); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
  .phm-shot__pay b { font-family: var(--phm-serif); font-size: 28px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .phm-shot__pay span { color: var(--phm-on-deep); font-size: 12px; }
  .phm-shot__spec { padding: 12px 6px 6px; }
  .phm-shot__spechead { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
  .phm-shot__spechead b { font-family: var(--phm-serif); font-size: 16px; font-weight: 400; }
  .phm-shot__spechead small { color: var(--home-muted); font-size: 12px; }
  .phm-room {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; min-height: 56px; margin: 0;
    border-top: 1px solid var(--home-line-soft);
  }
  .phm-room.is-small { grid-template-columns: 28px minmax(0, 1fr); min-height: 44px; }
  /* Rummens ikoner i samma gröna bricka som märket: egna vita linjeikoner (badkar, kastrull), ljus kant upptill. */
  .phm-room__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .phm-room__icon {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff;
    background: var(--phm-grain), linear-gradient(160deg, #1f6a4f, #123c2e); background-size: 240px 240px, auto;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 6px 14px -8px rgb(15 58 44 / 60%);
  }
  .phm-room__name { display: grid; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3; }
  .phm-room__name small { color: var(--home-muted); font-size: 11px; font-weight: 400; line-height: 1.35; }
  .phm-room > b { font-family: var(--phm-serif); font-size: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .phm-room__more { color: var(--home-muted); font-size: 18px !important; }

  /* Vågen ner i det ljusa (prissidans halftone-wave-560.svg, i naturlig storlek, beskuren i sidorna). */
  .phm-wave { display: block; width: 100%; height: 180px; margin-top: -1px; object-fit: none; object-position: center top; }

  /* ── Under vågen (ägaren 2026-10-30): ett band med bara loggorna ── Bandet: två lika kopior och
     -50 % ger en sömlös loop, kanterna tonas; står still utanför skärmen, när fliken är dold, när man trycker och
     håller och vid minskad rörelse (public-home.js sätter .is-moving). Ingen synlig paus (ägaren 2026-10-30). */
  .phm-proof { margin: -28px var(--phm-gutter) 0; }  /* vågens nedre del är luft */
  /* Siffrorna i det gröna, utan rutor: två stora tal i vit serif med ett litet ord under, på skogen ovanför vågen. */
  .phm-stats { display: flex; justify-content: center; gap: clamp(24px, 9vw, 44px); margin: 52px 0 0; padding: 0; list-style: none; color: var(--phm-cream); text-align: center; }
  .phm-stats li { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: start; }
  .phm-stats b { font-family: var(--phm-serif); font-size: clamp(44px, 13vw, 56px); font-weight: 400; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
  .phm-stats sup { margin: 2px 0 0 2px; color: var(--phm-mint); font-size: 22px; line-height: 1; }
  .phm-stats small { grid-column: 1 / -1; margin-top: 6px; color: var(--phm-on-deep); font-size: 13px; letter-spacing: .02em; }

  .phm-logos { margin: 20px calc(-1 * var(--phm-gutter)) 0; }
  .phm-band__view {
    overflow: hidden; touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
  .phm-band__track { display: flex; width: max-content; }
  .phm-logos.is-moving .phm-band__track { animation: phm-band var(--phm-band-s, 30s) linear infinite; }
  .phm-logos.is-moving:is(.is-off, .is-hidden, .is-held) .phm-band__track { animation-play-state: paused; }
  .phm-band__set { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
  .phm-band__set li { display: grid; flex: none; place-items: center; min-height: 56px; padding: 0 26px; }
  .phm-band__set img { height: 24px; width: auto; filter: brightness(0); opacity: 0.5; }  /* alla i samma ton, oavsett märkets färg */
  .phm-band__set img.is-bankid { height: 40px; }  /* symbolen med ordet under: nästan kvadratisk */
  .phm-band__set b { color: #3d4a43; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; opacity: 0.8; }
  .phm-logos:not(.is-moving) .phm-band__track { width: auto; }
  .phm-logos:not(.is-moving) .phm-band__view { -webkit-mask-image: none; mask-image: none; }
  .phm-logos:not(.is-moving) .phm-band__set { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; }
  .phm-logos:not(.is-moving) .phm-band__set:not(:first-child),
  .phm-logos:not(.is-moving) .phm-band__set li.is-again { display: none; }
  /* ── Så funkar det (ägaren 2026-10-30): fyra steg, en liten rörelse var på heron gröna, korniga yta ─────────────
     Grundläget (utan JS, minskad rörelse) är slutläget. public-home.js sätter .is-live på listan och .is-in på steget
     som syns: steg 1 går runt medan det syns, 2–4 spelas varje gång rutan kommer in i bild. */
  .phm-steps { margin: 40px var(--phm-gutter) 12px; }
  .phm .phm-steps h2 { margin: 0 0 20px; }
  .phm-steps ol { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
  .phm-step__art {
    position: relative; display: grid; place-items: center; min-height: 128px; padding: 18px 20px; overflow: hidden; border-radius: 24px; pointer-events: none;
    background: var(--phm-grain), radial-gradient(ellipse 80% 90% at 85% 0%, rgb(47 143 108 / 30%), transparent 60%), var(--phm-forest);
    background-size: 240px 240px, auto, auto; box-shadow: 0 18px 40px -26px rgb(15 58 44 / 70%); color: var(--phm-cream);
  }
  .phm-step__label { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 17px; font-weight: 500; }
  .phm-step__label span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8f3ec; color: #075f45; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .phm-step__text { margin: 2px 0 0 34px; color: var(--home-muted); font-size: 14px; line-height: 1.4; }
  .phm-step__text a { display: inline-block; color: #075f45; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

  /* 1 – Fältet: texten skrivs, skickas, fältet drar ihop sig mot mitten och en bock kommer in. */
  .phm-steps .phm-say { position: relative; display: grid; place-items: center; width: 100%; }
  .phm-say__field {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 50px; padding: 0 7px 0 16px; border-radius: 12px;
    background: #fff; color: var(--home-ink); font-size: 15px; box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
  }
  .phm-say__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
  .phm-say__send { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--phm-deep); color: var(--phm-cream); font-size: 20px !important; }
  .phm-say__done {
    position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; opacity: 0;
    background: var(--phm-mint); color: var(--phm-forest); font-size: 26px !important; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 50%);
  }
  /* Ett varv är 6 s: skrivs (1,1 s), skickas, drar ihop sig (0,26 s), bocken (en sekund), tillbaka, stilla (1,8 s).
     Tre varv, sedan står texten kvar; varven börjar om när rutan kommer in i bild igen. */
  .phm-steps.is-live .phm-step.is-in .phm-say__text { animation: phm-type 6s 3; }
  .phm-steps.is-live .phm-step.is-in .phm-say__send { animation: phm-send 6s 3; }
  .phm-steps.is-live .phm-step.is-in .phm-say__field { animation: phm-meet 6s 3; }
  .phm-steps.is-live .phm-step.is-in .phm-say__done { animation: phm-check 6s 3; }
  .phm-steps.is-hidden .phm-step * { animation-play-state: paused !important; }
  @keyframes phm-type { 0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(24, end); } 18%, 100% { clip-path: inset(0 0 0 0); } }
  @keyframes phm-send { 0%, 20% { transform: none; } 21% { transform: scale(0.94); } 23%, 100% { transform: none; } }
  @keyframes phm-meet {
    0%, 25% { clip-path: inset(0 0 0 0 round 12px); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
    29.5% { clip-path: inset(0 50% 0 50% round 12px); opacity: 0.4; }
    30%, 52% { clip-path: inset(0 0 0 0 round 12px); opacity: 0; }
    55.5%, 100% { opacity: 1; }
  }
  @keyframes phm-check {
    0%, 29.5% { opacity: 0; transform: scale(0.8); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    33%, 49% { opacity: 1; transform: none; }
    52.5%, 100% { opacity: 0; transform: none; }
  }

  /* 2 – Arbetsgrupperna poppar fram, sedan summan. */
  .phm-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .phm-groups > span { padding: 6px 12px; border: 1px solid rgb(139 231 181 / 26%); border-radius: 999px; background: rgb(139 231 181 / 12%); color: var(--phm-cream); font-size: 13px; }
  .phm-groups small { flex: 1 1 100%; margin-top: 4px; color: rgb(247 248 237 / 72%); font-size: 12.5px; text-align: center; }
  .phm-groups small span { white-space: nowrap; }
  .phm-steps.is-live .phm-step.is-in .phm-groups > * { animation: phm-pop 240ms var(--phm-ease) both; }
  .phm-steps.is-live .phm-step.is-in .phm-groups > :nth-child(2) { animation-delay: 60ms; }
  .phm-steps.is-live .phm-step.is-in .phm-groups > :nth-child(3) { animation-delay: 120ms; }
  .phm-steps.is-live .phm-step.is-in .phm-groups > :nth-child(4) { animation-delay: 180ms; }
  .phm-steps.is-live .phm-step.is-in .phm-groups > :nth-child(5) { animation-delay: 240ms; }
  .phm-steps.is-live .phm-step.is-in .phm-groups > small { animation: phm-fade 300ms ease-out 360ms both; }
  @keyframes phm-pop { from { opacity: 0; transform: scale(0.92); } }
  @keyframes phm-fade { from { opacity: 0; } }

  /* 3 och 4 – knappen trycks och blir ett besked (skickad, signerad). */
  .phm-act { display: grid; min-width: 220px; height: 50px; padding: 0 22px; border-radius: 999px; background: var(--phm-mint); color: var(--phm-forest); font-size: 15px; font-weight: 600; box-shadow: 0 12px 26px -14px rgb(0 0 0 / 55%); }
  .phm-act > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
  .phm-act .material-symbols-outlined { font-size: 19px !important; }
  .phm-act img { height: 26px; width: auto; }
  .phm-act__idle { opacity: 0; }  /* grundläget är beskedet */
  .phm-act--sign { color: var(--home-ink); }  /* vit knapp med BankID-loggan, sedan mint med beskedet (phm-signed) */
  .phm-act--sign .phm-act__done { color: var(--phm-forest); }
  .phm-steps.is-live .phm-step.is-in .phm-act { animation: phm-tap 1.7s both; }
  .phm-steps.is-live .phm-step.is-in .phm-act--sign { animation: phm-tap 1.7s both, phm-signed 1.7s both; }
  .phm-steps.is-live .phm-step.is-in .phm-act__idle { animation: phm-idle 1.7s both; }
  .phm-steps.is-live .phm-step.is-in .phm-act__done { animation: phm-done 1.7s both; }
  .phm-steps.is-live .phm-step.is-in .phm-act__fly { animation: phm-fly 1.7s both; }
  @keyframes phm-tap { 0%, 36% { transform: none; } 42% { transform: scale(0.95); } 50%, 100% { transform: none; } }
  @keyframes phm-idle { 0%, 44% { opacity: 1; } 51%, 100% { opacity: 0; } }  /* ut helt innan beskedet kommer in */
  @keyframes phm-done { 0%, 53% { opacity: 0; transform: translateY(6px); } 64%, 100% { opacity: 1; transform: none; } }
  @keyframes phm-fly { 0%, 42% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: translate(14px, -14px); } }
  @keyframes phm-signed { 0%, 48% { background: #fff; } 58%, 100% { background: var(--phm-mint); } }

  @keyframes phm-band { to { transform: translateX(-50%); } }
  .phm-wordmark { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

  /* ── Avslutet efter frågorna ── */
  /* Avslutet (ägaren 2026-10-30, efter referens): den gröna rutan går kant i kant, rundad bara upptill, och slutar
     mot en svart sidfot – två block, inte ett. Bara här – de andra publika sidornas sidfot är ljus. */
  .phm-end {
    position: relative; isolation: isolate; overflow: hidden;
    margin: 48px 0 0; padding: 52px var(--phm-gutter) 0; border-radius: 28px 28px 0 0;
    background: var(--phm-grain), radial-gradient(ellipse 80% 50% at 85% 0%, rgb(47 143 108 / 30%), transparent 60%), var(--phm-forest);
    background-size: 240px 240px, auto, auto; color: var(--phm-cream);
  }
  /* Ett svagt rutnät bakom bilden, inte under texten. */
  .phm-end::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 36px 36px,
                linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 36px 36px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 62%, transparent 96%);
            mask-image: linear-gradient(to bottom, transparent 30%, #000 62%, transparent 96%);
  }
  .phm-end h2 { color: var(--phm-cream); font-size: 38px; line-height: 1.04; text-wrap: balance; }
  .phm-end > p { max-width: 30ch; text-wrap: pretty; margin: 14px 0 26px; color: var(--phm-on-deep); font-size: 16px; line-height: 1.5; }
  .phm-end .phm-apply { justify-items: stretch; gap: 12px; }
  .phm-end .phm-actions { justify-content: flex-start; }
  /* Ansökt (även efter omladdning): samma vita ruta som fältet, inte heroknappens pille. */
  .phm-end .phm-cta { width: 100%; min-height: 58px; justify-content: space-between; padding: 0 6px 0 18px; border-radius: 12px; background: #fff; }
  .phm-end .phm-cta__arrow { width: 48px; height: 48px; border-radius: 8px; }
  .phm-apply__note { display: flex; align-items: center; gap: 8px; }
  .phm-apply__note .material-symbols-outlined { color: #8fe0b4; font-size: 18px; }
  .phm-end .phm-apply__note { margin: 0; color: var(--phm-cream); font-size: 14px; }
  /* Kalkylen, lutad och utanför kanten; underkanten tonar ut i det gröna. */
  .phm-end__shot {
    height: 290px; margin: 44px calc(-1 * var(--phm-gutter)) 0 0; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent);
  }
  .phm-kalk {
    width: 560px; padding: 14px; border-radius: 16px; background: #f3f4ee; color: var(--home-ink);
    transform-origin: 0 0; transform: translate(10px, 70px) rotate(-11deg) skewX(12deg) scaleY(0.9);
  }
  .phm-kalk p { margin: 0; }
  .phm-kalk__top { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 12px; }
  .phm-kalk__top small { color: var(--home-muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
  .phm-kalk__top b { font-family: var(--phm-serif); font-size: 18px; font-weight: 500; }
  .phm-kalk__top span { color: var(--home-muted); font-size: 11px; }
  .phm-kalk__rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .phm-kalk__room { padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgb(18 60 46 / 6%); }
  .phm-kalk__name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .phm-kalk__name b { font-size: 14px; font-weight: 600; }
  .phm-kalk__name em { font-family: var(--phm-serif); font-size: 17px; font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
  .phm-kalk__sub { color: var(--home-muted); font-size: 11px; }
  .phm-kalk__group { margin-top: 10px !important; padding-bottom: 4px; border-bottom: 1px solid var(--home-line); color: var(--home-muted); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .phm-kalk__room > p:not([class]) { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--home-line-soft); font-size: 11.5px; }
  .phm-kalk__room i { color: var(--home-muted); font-style: normal; white-space: nowrap; }

  .public-home:has(.phm) .zf {
    margin-top: 0; border-top: 0; background: #0b0b0b; color: rgb(255 255 255 / 72%);
  }
  .public-home:has(.phm) .zf .zf__logo { color: #fff; }
  .public-home:has(.phm) .zf .zf__mark i:last-child { background: #3fbf7f; }
  .public-home:has(.phm) .zf .zf__brand p { color: rgb(255 255 255 / 64%); }
  .public-home:has(.phm) .zf summary.zf__h { color: #fff; }
  .public-home:has(.phm) .zf details.zf__col,
  .public-home:has(.phm) .zf .zf__col a, .public-home:has(.phm) .zf .zf__col span[aria-current],
  .public-home:has(.phm) .zf .zf__bottom { border-color: rgb(255 255 255 / 12%); }
  .public-home:has(.phm) .zf .zf__col a, .public-home:has(.phm) .zf .zf__bottom a { color: rgb(255 255 255 / 76%); }
  .public-home:has(.phm) .zf .zf__all a, .public-home:has(.phm) .zf .zf__col span[aria-current] { color: #fff; }
  .public-home:has(.phm) .zf .zf__bottom { color: rgb(255 255 255 / 60%); }
  /* Bolagsraden (lades till efter den mörka sidfoten) hade sidfotens gråa på svart, 3,5:1 och länken 3,0:1. */
  .public-home:has(.phm) .zf .zf__company { border-color: rgb(255 255 255 / 12%); color: rgb(255 255 255 / 64%); }
  .public-home:has(.phm) .zf .zf__company a { color: rgb(255 255 255 / 76%); }
  .public-home:has(.phm) .zf .zf__bottom * { border-color: rgb(255 255 255 / 12%); }
  .public-home:has(.phm) .zf .zf__social { --zf-social-bg: #0b0b0b; }  /* symbolen i LinkedIn/YouTube: sidfotens bakgrund */
  .public-home:has(.phm) .zf .zf__social a { color: #fff; }
  .public-home:has(.phm) .zf .zf__social a:hover { background: rgb(255 255 255 / 10%); }


  /* ── Touch (UX-packen 2026-10-30): knappar trycks ner, rader tonas, inget blinkar när man börjar scrolla ── */
  .phm, .public-home:has(.phm) :is(.zf, .public-home__header, .public-home__faq-section) { -webkit-tap-highlight-color: transparent; }
  .phm :is(.phm-cta, .phm-demo, .phm-apply__field button),
  .public-home:has(.phm) .zf .zf__social a,
  .public-home:has(.phm) .public-home__header a { transition: transform 320ms var(--phm-ease), background-color 200ms ease; }
  .phm :is(.phm-cta, .phm-demo, .phm-apply__field button):active:not(:disabled),
  .public-home:has(.phm) .zf .zf__social a:active,
  .public-home:has(.phm) .public-home__header a:active { transform: scale(0.97); transition-duration: 80ms; transition-timing-function: ease-out; }
  .phm .phm-apply__field button:active:not(:disabled) { transform: scale(0.96); }
  /* Rader (frågor, sidfoten): en ton över hela raden som i iOS-listor – att skala en rad med linjer får dem att hoppa. */
  .public-home:has(.phm) :is(.public-pricing__faq-list summary, .zf summary.zf__h, .zf__col a, .zf__bottom a) {
    border-radius: 8px; transition: background-color 240ms ease;
  }
  .public-home:has(.phm) .public-pricing__faq-list summary:active { background-color: rgb(18 60 46 / 6%); transition: background-color 120ms ease 70ms; }
  .public-home:has(.phm) .zf :is(summary.zf__h, .zf__col a, .zf__bottom a):active { background-color: rgb(255 255 255 / 8%); transition: background-color 120ms ease 70ms; }

  /* Frågor och sidfotens grupper öppnas med höjden (public-home.js); frågornas kryss: public-home.css. */
  .public-home:has(.phm) .public-pricing__faq-list details[open] > p { animation: phm-word 280ms var(--phm-ease) both; }
  .public-home:has(.phm) .zf summary.zf__h::after { transition: transform 200ms var(--phm-ease); }
  .public-home:has(.phm) :is(.public-pricing__faq-list, .zf) details.is-moving { overflow: hidden; }

  /* Heron: exemplet stiger fram när sidan öppnas (ren CSS – väntar inte på skripten; rubriken och knapparna står still). */
  .phm-shot { animation: phm-rise 560ms var(--phm-ease) 80ms both; }
  @keyframes phm-rise { from { opacity: 0.001; translate: 0 24px; } }
  .phm-shot__chip { animation: phm-chip 280ms var(--phm-ease) 720ms both, phm-chrome 4.5s linear infinite; }  /* in när kortet stigit klart */
  @keyframes phm-chrome { to { --phm-chrome: 360deg; } }
  @keyframes phm-chip { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.96); } }

  /* Det som kommer in i bild (public-home.js sätter .phm-reveal bara på det som ligger under skärmen vid start). */
  .phm-reveal { opacity: 0; transform: translateY(12px); }
  .phm-reveal.is-in { opacity: 1; transform: none; transition: opacity 480ms var(--phm-ease), transform 480ms var(--phm-ease); transition-delay: calc(var(--phm-i, 0) * 40ms); }

  /* Frågorna direkt under vågen: vågen är kanten, ingen extra linje eller luft ovanför. */
  .public-home:has(.phm) .public-home__faq-section { padding-top: 44px; padding-bottom: 8px; }
  .public-home:has(.phm) .public-home__faq-section .public-pricing__faq { gap: 20px; padding-top: 0; border-top: 0; }
  /* Frågorna: ingressen (länkarna till guiderna) finns i sidfoten på telefonen; här bara rubriken. */
  .public-home__faq-intro p { display: none; }
  /* Frågorna: hela raden är träffytan. */
  .public-home__faq-section .public-pricing__faq-list summary { min-height: 44px; align-items: center; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .phm-apply.is-opening .phm-apply__field, .phm-shot, .phm-shot__chip { animation: none; }
  .phm-reveal { opacity: 1; transform: none; }
  .phm :is(.phm-cta, .phm-demo, .phm-apply__field button):active, .public-home:has(.phm) :is(.zf__social a, .public-home__header a):active { transform: none; }
  .public-home:has(.phm) :is(.public-pricing__faq-list summary, .zf summary.zf__h, .zf__col a, .zf__bottom a):active { transition-delay: 0ms; }
  .public-home:has(.phm) .zf summary.zf__h::after { transition: none; }
  .public-home:has(.phm) .public-pricing__faq-list details[open] > p { animation: none; }
  .phm-apply__msg { transition: none !important; }
}