/* Landing page styles — extracted from index.html inline <style> (cleanup 0354daa4).
   Design tokens/components live in hollie.css; this file is page-specific layout. */
  body{background:var(--surface)}
  .wrap{max-width:1140px;margin:0 auto;padding:0 28px}

  /* nav */
  .nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:11px}
  .brand .nm{font-family:Fraunces;font-weight:600;font-size:23px;letter-spacing:-.02em;color:var(--ink)}
  .brand .by{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);padding-left:11px;margin-left:4px;border-left:1px solid var(--line)}
  .brand .by img{height:15px;width:auto;opacity:.9}
  .nav .right{display:flex;align-items:center;gap:18px}
  .nav .signin{font-size:14.5px;color:var(--ink-soft);font-weight:500}

  /* hero */
  .hero{position:relative;overflow:hidden;padding:42px 0 52px}
  .hero .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;z-index:0}
  .hero .b1{width:560px;height:560px;background:radial-gradient(circle,#BBD2FF,transparent 70%);top:-240px;right:-140px}
  .hero .b2{width:420px;height:420px;background:radial-gradient(circle,#FCE6AE,transparent 70%);top:160px;left:-200px;opacity:.42}
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center}

  /* LEFT — avatar centerpiece + CTA */
  .hero-left{text-align:center}
  .hero-av{position:relative;width:208px;height:208px;margin:0 auto 30px}
  .hero-av img{width:208px;height:208px;border-radius:50%;border:6px solid #fff;box-shadow:var(--shadow-lg);position:relative;z-index:1;display:block}
  .hero-av .ring{position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle,#BCD4FF,transparent 68%);filter:blur(10px);z-index:0}
  .hero-av.speaking img{animation:spk 1s infinite ease-in-out}
  @keyframes spk{0%,100%{box-shadow:var(--shadow-lg)}50%{box-shadow:0 0 0 10px rgba(37,99,235,.16),var(--shadow-lg)}}
  .hname{font-family:Fraunces;font-weight:600;font-size:38px;letter-spacing:-.02em;color:var(--ink)}
  .hquote{font-family:Fraunces;font-style:italic;font-weight:500;font-size:31px;line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin-top:6px}
  .hstatus{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--brand-2);background:var(--mint);border:1px solid var(--mint-2);padding:5px 14px;border-radius:999px}
  .hstatus .d{width:8px;height:8px;border-radius:50%;background:#2ea36a;box-shadow:0 0 0 0 rgba(46,163,106,.5);animation:ping 1.7s infinite}
  @keyframes ping{70%{box-shadow:0 0 0 8px rgba(46,163,106,0)}100%{box-shadow:0 0 0 0 rgba(46,163,106,0)}}
  .htag{font-size:18.5px;line-height:1.45;color:var(--ink-soft);margin:32px auto 0;max-width:430px}
  .htag b{color:var(--ink)}
  /* map-first funnel C1: widen the hero-left CTA so the business map can span the column
     (lifts the old 440px cap); the ≤920px media query below still collapses to 1 column. */
  .try{max-width:520px;margin:38px auto 0}
  .start{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:7px;box-shadow:var(--shadow-lg)}
  .start .pin{display:grid;place-items:center;padding:0 2px 0 10px;flex:none}
  .start input{flex:1;min-width:0;border:none;outline:none;font-family:Inter;font-size:16px;color:var(--ink);padding:0 12px;background:transparent}
  .start input::placeholder{color:#9aa4b0}
  .start .btn{flex:none;font-size:15px;padding:12px 20px}
  /* Flatten the primary inside BOTH .start pills (find form + call-me form) — the
     7px-padded pill clips the glow and it reads as broken; same call as the
     InfoWindow .bc-yes flatten (#814). */
  .start .btn,.start .btn:hover{box-shadow:none}
  /* --- hero map (grouped: frame, placeholder overlay, note, caption) ------------- */
  .lmap-wrap{margin-top:14px}
  .lmap-frame{position:relative}
  /* map-first funnel C1: a bigger, business-biased, clickable-pin hero map (188 → 380 → 480px
     tall; widened with the .getstarted-inner container below to a 4:3 hero). */
  .lmap{height:480px;border-radius:15px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#E9F0FB}
  /* Consent overlay INSIDE the frame: self-hosted Zürich preview under a white scrim
     (scrim keeps --ink text ≥4.5:1 over any part of the image; the color layer is the
     no-image fallback). */
  .lmap-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;border-radius:15px;overflow:hidden;background:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),url(/assets/map-preview-zurich.png) center/cover,#E9F0FB}
  /* display:flex would defeat the hidden attribute requestMap/_hollieMapsReady rely on. */
  .lmap-placeholder[hidden]{display:none}
  .lmap-consent{max-width:46ch;font-size:13px;line-height:1.45;color:var(--ink);margin:0}
  /* Opaque over imagery; --muted border ≈4.8:1 (non-text contrast ≥3:1). */
  .lmap-placeholder .btn-ghost{background:#fff;border-color:var(--muted)}
  .lmap-placeholder .btn-ghost[aria-busy="true"]{opacity:.7;cursor:progress}
  .lmap-attrib{position:absolute;right:8px;bottom:6px;font-size:10.5px;background:rgba(255,255,255,.92);border-radius:6px;padding:2px 7px}
  .lmap-attrib a{color:var(--muted);text-decoration:none}
  .lmap-cap{margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.4}
  .called{display:flex;align-items:center;gap:10px;justify-content:center;background:#EAF7EE;border:1px solid #C5E8D2;border-radius:15px;padding:15px;color:var(--brand)}
  .chatlink{display:inline-block;margin-top:14px;font-size:14.5px;color:var(--brand-2);font-weight:600}
  .chatlink:hover{text-decoration:underline}
  /* twin CTA cards (chat-in-browser / have-Hollie-call-you) — same visual family as
     .callcard so all three demo paths read first-class (landing-callme-affordances) */
  .cta-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
  .cta-card{appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%;color:var(--ink);display:flex;flex-direction:column;gap:8px;padding:15px 16px;min-height:112px;background:linear-gradient(135deg,#F3F7FF,#E8EFFD);border:1px solid var(--mint-2);border-left:4px solid var(--brand);border-radius:16px;box-shadow:var(--shadow-lg);transition:box-shadow .15s}
  /* calm hover (app-wide pattern, #1290): shadow only, no translate */
  .cta-card:hover{box-shadow:0 12px 26px rgba(37,99,235,.22)}
  .cta-card .cta-icon{width:22px;height:22px;flex:none}
  .cta-card .cta-title{font-family:Fraunces;font-size:17px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
  .cta-card .cta-sub{font-size:13px;line-height:1.5;color:var(--muted)}
  .cta-card.is-active{border-color:var(--brand);background:linear-gradient(135deg,#F6F9FF,#E8EFFD);box-shadow:0 12px 26px rgba(37,99,235,.14),inset 0 0 0 3px rgba(37,99,235,.08)}
  @media(max-width:680px){.cta-duo{grid-template-columns:1fr}}
  .tiny{margin-top:20px;font-size:13px;color:var(--muted)}

  /* PRIMARY demo CTA — dial the live demo line (hollie-demo-line T07). Brand-forward card so it
     reads as the primary action; the WebRTC + call-me links sit below as secondary alternatives.
     Reuses the `ping` keyframe from .hstatus .d for the live dot. */
  .callcard{display:block;text-align:left;text-decoration:none;background:linear-gradient(135deg,#F3F7FF,#E8EFFD);border:1px solid var(--mint-2);border-left:4px solid var(--brand);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow-lg);margin-bottom:16px;transition:transform .12s,box-shadow .15s}
  .callcard:hover{box-shadow:0 12px 26px rgba(37,99,235,.22)}
  .callcard .cc-eyebrow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--brand-2)}
  .callcard .cc-live{width:8px;height:8px;border-radius:50%;background:#2ea36a;flex:none;box-shadow:0 0 0 0 rgba(46,163,106,.5);animation:ping 1.7s infinite}
  .callcard .cc-num{display:block;margin-top:6px;font-family:Fraunces;font-weight:600;font-size:32px;letter-spacing:-.01em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
  .callcard .cc-sub{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--ink-soft)}
  @media(max-width:560px){.callcard .cc-num{font-size:27px}}
  @media(prefers-reduced-motion:reduce){.callcard .cc-live{animation:none}}

  /* RIGHT — example call card */
  .card-call{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden}
  .cc-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}
  .cc-t{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .cc-t b{color:var(--ink-soft);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px;margin-left:4px}
  .listen{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:108px;background:var(--brand);color:#fff;border:none;border-radius:999px;padding:9px 16px;font-family:Inter;font-weight:600;font-size:13.5px;cursor:pointer;box-shadow:0 6px 16px rgba(37,99,235,.3);transition:transform .12s,box-shadow .15s}
  .listen:hover{box-shadow:0 10px 22px rgba(37,99,235,.4)}
  .listen .lcontent{display:inline-flex;align-items:center;gap:7px}
  .listen .lwave{display:none;align-items:center;gap:2.5px;height:15px}
  .listen .lwave i{width:3px;height:5px;border-radius:3px;background:#fff;animation:lw .8s infinite ease-in-out}
  .listen .lwave i:nth-child(2){animation-delay:.12s}.listen .lwave i:nth-child(3){animation-delay:.24s}.listen .lwave i:nth-child(4){animation-delay:.08s}.listen .lwave i:nth-child(5){animation-delay:.18s}
  @keyframes lw{0%,100%{height:5px}50%{height:13px}}
  .listen.playing .lcontent{display:none}.listen.playing .lwave{display:inline-flex}
  .tscript{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
  .bub{max-width:86%;padding:10px 14px;border-radius:15px;font-size:14px;line-height:1.45;opacity:.92;transition:opacity .25s,transform .25s,box-shadow .25s}
  .bub.c{align-self:flex-start;background:var(--bg-2);color:var(--ink-soft);border-bottom-left-radius:5px}
  .bub.h{align-self:flex-end;background:var(--mint);color:var(--brand);border-bottom-right-radius:5px}
  .bub.active{opacity:1;transform:scale(1.02);box-shadow:0 5px 16px rgba(37,99,235,.16)}
  .booked{margin:0 20px 18px;display:flex;align-items:center;gap:12px;background:#EAF7EE;border:1px solid #C5E8D2;border-radius:14px;padding:12px 15px}
  .booked .ck{width:30px;height:30px;border-radius:9px;background:#2ea36a;color:#fff;display:grid;place-items:center;flex:none}
  .booked b{font-size:14px}.booked small{display:block;color:var(--muted);font-size:12.5px}

  /* sections */
  section{padding:84px 0}
  .sec-h{text-align:center;max-width:680px;margin:0 auto 56px}
  .sec-h .k{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
  .sec-h h2{font-family:Fraunces;font-weight:600;font-size:44px;letter-spacing:-.02em;margin-top:14px;color:var(--ink)}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .step{text-align:center}
  .step .n{width:54px;height:54px;margin:0 auto;border-radius:16px;background:var(--mint);color:var(--brand);display:grid;place-items:center;font-family:Fraunces;font-weight:600;font-size:23px}
  .step h3{font-family:Fraunces;font-weight:600;font-size:21px;margin-top:18px}
  .step p{color:var(--ink-soft);font-size:15.5px;margin-top:8px;max-width:280px;margin-left:auto;margin-right:auto}

  .band{background:var(--ink);border-radius:28px;padding:64px 40px;text-align:center;color:#fff;max-width:1140px;margin:0 auto}
  .band .big{font-family:Fraunces;font-weight:600;font-size:40px;letter-spacing:-.02em;line-height:1.15}
  .band .big em{font-style:normal;color:#FBBF52}
  .band p{color:#C5CBD6;font-size:17px;margin-top:16px}

  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;align-items:stretch}
  .tier{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
  .tier.pop{border:2px solid var(--brand);box-shadow:var(--shadow-lg);position:relative}
  .tier.pop .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:5px 13px;border-radius:999px}
  .tier h3{font-family:Fraunces;font-weight:600;font-size:21px}
  .tier .amt{font-family:Fraunces;font-weight:600;font-size:40px;letter-spacing:-.02em;margin:12px 0 2px}
  .tier .amt span{font-size:15px;color:var(--muted);font-weight:400;font-family:Inter}
  .tier .mins{font-size:13px;color:var(--brand-2);font-weight:600;margin-bottom:18px}
  .tier ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
  .tier li{font-size:14px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}
  .tier li::before{content:"✓";color:var(--brand-2);font-weight:700;flex:none}
  .price-note{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}

  .final{text-align:center;max-width:640px;margin:0 auto}
  .final h2{font-family:Fraunces;font-weight:600;font-size:46px;letter-spacing:-.02em}
  .final p{color:var(--ink-soft);font-size:18px;margin-top:16px}
  .final .btn{margin-top:28px}

  footer{border-top:1px solid var(--line);padding:44px 0 30px;margin-top:30px}
  .foot{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:14px 28px}
  .foot .b{display:flex;align-items:baseline;gap:9px;font-family:Fraunces;font-weight:600;font-size:18px}
  .foot .by{color:var(--muted);font-size:13.5px;font-family:Inter;font-weight:400}
  .foot .lk{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14px}
  .foot .lk a{color:var(--ink-soft)}
  .foot .lk a:hover{color:var(--brand-2)}
  .foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);font-size:13px}
  .foot-legal a{color:var(--muted)}
  .foot-legal a:hover{color:var(--brand-2)}
  .foot-base{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 22px;margin-top:14px}
  .foot-base .cc{color:var(--muted);font-size:12.5px}
  @media(max-width:560px){
    .foot,.foot-base{flex-direction:column;align-items:flex-start}
  }

  /* Scroll-reveal is gated on the js-anim root class (added by the same inline <script>
     as js-nav-pending): no JS -> class never lands -> content stays visible. The
     reduced-motion override carries the SAME .js-anim scope — unscoped (0,1,0) it would
     lose the specificity war to .js-anim .reveal (0,2,0) and hide content from
     reduced-motion visitors WITH JS on. */
  .js-anim .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
  @media(prefers-reduced-motion:reduce){.js-anim .reveal{opacity:1;transform:none;transition:none}}

  @media(max-width:920px){
    .hero-grid{grid-template-columns:1fr;gap:44px}
    .steps,.tiers{grid-template-columns:1fr}.sec-h h2{font-size:34px}
    .hero-av{width:170px;height:170px}.hero-av img{width:170px;height:170px}
  }

  /* Phones: the nav (Sign in + "Try Hollie free" + brand tag) overran the viewport
     and forced a horizontal scroll that clipped the whole page. Tighten it to fit. */
  @media(max-width:560px){
    html,body{overflow-x:clip}         /* safety net against any stray overflow */
    .wrap{padding:0 16px}
    .nav-in{height:60px;gap:10px}
    .nav .signin{display:none}          /* declutter — the hero CTA covers sign-up */
    .brand .by{display:none}            /* drop "by mentiora" tag to save nav width */
    .nav .right .btn{padding:9px 15px;font-size:14px}
    .hquote{font-size:26px}
  }

  /* landing-page-deploy additions (additive — keep mock rules untouched) */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 9px 0;font-weight:600}
  .skip:focus{left:0}
  a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
  /* Non-interactive elements are given tabindex="-1" so setup.js can .focus() them for a
     screen-reader step announcement (#buildHeading/#fbHeading/#accountHeading, the #interest
     section, the click-to-load map). That programmatic focus must NOT paint a ring — the UA
     default outline is the "ugly blue border that vanishes on click". TAG-SCOPED on purpose:
     never a bare [tabindex="-1"], which would also strip legitimate keyboard rings from any
     interactive element that keeps tabindex="-1" (WCAG 2.4.7). */
  h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus,p[tabindex="-1"]:focus,span[tabindex="-1"]:focus,section[tabindex="-1"]:focus,div[tabindex="-1"]:focus{outline:none}
  .soon-note{display:none;align-items:center;gap:9px;justify-content:center;background:var(--gold-soft);border:1px solid #F3D68A;border-radius:12px;padding:11px 15px;margin-top:12px;font-size:14px;color:var(--gold-ink)}
  .soon-note.show{display:flex}
  .audio-note{display:none;margin:0 20px 14px;font-size:13px;color:var(--gold-ink)}
  .audio-note.show{display:block}

  /* live demo call panel */
  .callp{display:none;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:18px;text-align:left}
  .callp.open{display:block}
  .callp h3{font-family:Fraunces;font-size:18px;margin-bottom:6px}
  .callp .note{font-size:13px;color:var(--muted);line-height:1.5}
  .callp .note a{color:var(--brand-2);font-weight:600}
  .callp .row{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
  .callp .status{font-size:14px;font-weight:600;color:var(--ink-soft)}
  .callp .timer{font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--muted)}
  .callp .meter{width:88px;height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden;flex:none}
  .callp .meter i{display:block;height:100%;width:0;background:var(--good);transition:width .12s linear}
  .callp .err{color:#B4540A;font-size:13.5px;margin-top:10px;line-height:1.5}
  .callp[data-state="idle"] .live-only,.callp[data-state="idle"] .status{display:none}
  .callp[data-state="connecting"] .start-only,.callp[data-state="connecting"] .live-only{display:none}
  .callp[data-state="live"] .start-only{display:none}
  .callp .btn-sm{padding:9px 16px;font-size:14px}

  @media(prefers-reduced-motion:reduce){
    .hero-av.speaking img,.hstatus .d,.listen .lwave i{animation:none}
    .btn,.listen{transition:none}
    html{scroll-behavior:auto}
  }

  /* have Hollie call you (real outbound) */
  .callme{margin-top:14px;position:relative}
  .callme-note{margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.4}
  .callme-note.ok{color:var(--good-ink)}
  .callme-note.err{color:var(--gold-ink)}
  /* static sibling of the live-region note — survives every status rewrite (FND-0005) */
  .callme-privacy{margin-top:4px;font-size:12.5px}
  .callme-privacy a{color:var(--brand-2);font-weight:600}

  /* Country selector (landing-callme-affordances): trigger inside the pill + floating
     listbox. Flags reference the template's <symbol> sprite; always decorative. */
  .ctry{appearance:none;border:0;cursor:pointer;font:inherit;display:flex;align-items:center;gap:7px;background:#F3F4F6;border-radius:10px;padding:9px 10px;flex:none;margin-left:3px}
  .ctry:hover{background:#ECEEF2}
  .ctry .dial{font-size:14px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .ctry .chev{font-size:9px;color:var(--muted);margin-top:1px}
  .flag{width:20px;height:14px;border-radius:3px;overflow:hidden;flex:none;display:block;box-shadow:inset 0 0 0 1px rgba(17,24,39,.10)}
  .flag use,.flag svg{display:block;width:100%;height:100%}
  .callme .start{position:relative}
  .cc-list{position:absolute;left:0;top:calc(100% + 8px);z-index:31;width:252px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(17,24,39,.16),0 2px 6px rgba(17,24,39,.06);text-align:left}
  .cc-list[hidden]{display:none}
  .cc-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink-soft);cursor:pointer}
  .cc-opt .cc-name{flex:1}
  .cc-opt .cc-dial{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
  .cc-opt:hover,.cc-opt.is-active{background:var(--mint);color:var(--brand-2)}
  .cc-opt[aria-selected="true"]{background:#EFF4FE;color:var(--ink);font-weight:600}

  /* Softened focus treatment for BOTH input pills (user-pinned "both"): the pill border
     flips grey→brand + a soft translucent ring (hollie.css .input:focus idiom) instead of
     the global 3px outline on the inner input — a ≥3:1 focused↔unfocused state change
     (WCAG 2.4.7/2.4.11, tracks 2.4.13). The GLOBAL rule below stays for every other
     control; interactive siblings inside the pill carry their own per-control ring so
     the pill ring is never ambiguous about which control has focus. */
  .start{transition:border-color .15s,box-shadow .15s}
  .start:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.14),var(--shadow-lg)}
  .start input:focus-visible{outline:none}
  .start .ctry:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--brand);background:#EEF3FE}
  .start .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  @media (forced-colors: active){
    /* box-shadow rings vanish in Windows High Contrast — fall back to real outlines */
    .start:focus-within{outline:2px solid Highlight;outline-offset:2px}
    .start .ctry:focus-visible{outline:2px solid Highlight;outline-offset:-2px}
  }

/* Business search + Save-your-Hollie funnel (landing-map-google-search) */
/* landing-setup-section-map-polish: the funnel now lives in its own #getstarted section.
   Re-establish the width cap + centering the cluster used to inherit from .try / .hero-left
   (a bare .wrap is 1140px and left-aligned). */
/* Widened 520 → 640 so the hero map reads at a full 4:3 (640×480); the search pill,
   its autocomplete, and the status notes all scale within it and stay aligned/centered. */
.getstarted-inner{max-width:640px;margin:0 auto;text-align:center}
/* #more (section-4 landmark, style=padding:0) has no padding of its own — the intro lead
   carries the section top gap so how-it-works sits flush beneath it (padding-top:0). The lead
   is a LIGHT section-4 divider: a smaller heading than the 44px subsection headers below it, so
   it reads as an intro label, not a redundant twin title next to "How it works" (plan+ship
   council FND-0018/0001). */
#more .more-lead{padding-top:84px}
#more .more-lead .sec-h{margin-bottom:36px}
#more .more-lead .sec-h h2{font-size:30px}
@media(max-width:920px){ #more .more-lead{padding-top:56px} #more .more-lead .sec-h h2{font-size:24px} }
.find-wrap{position:relative}
.lbiz-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow-lg);max-height:264px;overflow-y:auto;text-align:left}
.lbiz-list li{padding:10px 12px;border-radius:10px;font-size:14.5px;color:var(--ink);cursor:pointer;line-height:1.35}
.lbiz-list li:hover,.lbiz-list li[aria-selected="true"]{background:var(--mint);color:var(--brand-2)}
/* funnel-no-maps-fallback: the scan-note is now a LIVE advertisement (a pasted website is a
   real, supported entry — not "coming soon"), so it reads GO in the mint/brand family rather
   than as a gold warning. */
.scan-note{display:flex;align-items:flex-start;gap:9px;text-align:left;background:var(--mint);border:1px solid var(--mint-2);border-left:3px solid var(--brand);border-radius:12px;padding:11px 15px;margin-top:12px;font-size:14px;color:var(--ink-soft);line-height:1.45}
.scan-note[hidden]{display:none}
/* funnel-no-maps-fallback: the SECONDARY "No Google listing?" affordance beneath the primary
   map/search — a compact divider + link, deliberately subordinate to the map path above. */
.sec-divider{display:flex;align-items:center;gap:14px;margin:30px 0 12px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sec-divider::before,.sec-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.fb-row{text-align:center}
.fb-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--brand-2);text-decoration:none;line-height:1.5}
.fb-link:hover{text-decoration:underline}
.fb-link svg{flex:none}
body[data-signup="off"] .sec-divider,
body[data-signup="off"] .fb-row{display:none !important}
/* Form-anchored status line for the find funnel (replaces the old #lmapNote under the
   map, which sat out of view — and was hidden entirely with .lmap-wrap in the 503 /
   signup-off states). Stays RENDERED at all times: a live region toggled via
   display:none can be skipped by screen readers, so only the text changes. */
.find-note{display:block;text-align:left;margin-top:8px;font-size:13px;color:var(--gold-ink);line-height:1.4}
.find-note:empty{margin-top:0}
/* Map confirmation popup ("Is <name> your business?") — rendered inside a Google InfoWindow. */
.biz-confirm{min-width:190px;max-width:240px;padding:2px 2px 4px;text-align:left}
.biz-confirm .bc-name{font-family:Fraunces;font-size:16px;font-weight:600;color:var(--ink);line-height:1.25}
.biz-confirm .bc-q{margin-top:2px;font-size:13px;color:var(--muted)}
.biz-confirm .bc-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
/* Flatten the primary button's big drop-shadow inside the InfoWindow — the bubble clips it and it
   reads as broken; a flat button sits cleanly in the small popup. */
.biz-confirm .bc-yes,.biz-confirm .bc-yes:hover{box-shadow:none;font-size:13.5px;padding:8px 14px}
.biz-confirm .bc-no{background:none;border:none;padding:6px 4px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.biz-confirm .bc-no:hover{color:var(--ink)}

/* Language switcher (landing-page-localization B4): header shows compact codes,
   footer shows native names; both stay visible on mobile (FND-0037). */
.lang-switch{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lang-switch a{color:var(--muted,#5b6472);text-decoration:none;font-size:13px;padding:2px 4px;border-radius:6px}
.lang-switch a:hover{color:var(--brand-2,#2563EB)}
.lang-switch a[aria-current="true"]{color:var(--brand-2,#2563EB);font-weight:700}
.nav .lang-codes{margin-right:10px}
footer .lang-native{justify-content:flex-end;margin:0}
@media(max-width:560px){footer .lang-native{justify-content:flex-start}}
.cc-lang{font-weight:400;color:var(--muted,#5b6472);font-size:12px}

/* Bot-defense honeypot (spec 2026-08-03-landing-bot-defense): off-screen, not
   display:none — invisible to humans/AT (aria-hidden + tabindex=-1 on the input),
   still present for naive form-filling bots. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Consent banner (injected at serve time by server._ads_snippet only when Google Ads is
   configured without GTM). Shared by the landing + /setup pages (dedup: selfserve-landing-merge
   cleanup). */
.consent-bar{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:60rem;margin:0 auto;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:1rem 1.15rem;font-size:.9rem;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;gap:1rem;align-items:center;flex-wrap:wrap;z-index:50}
.consent-bar p{margin:0;flex:1 1 20rem}.consent-bar a{color:#93c5fd}
.consent-bar .acts{display:flex;gap:.5rem}
.consent-bar button{padding:.5rem 1rem;border-radius:8px;border:1px solid #334155;font-weight:600;font-size:.85rem;cursor:pointer;font-family:inherit}
.consent-bar .accept{background:#2563eb;color:#fff;border-color:#2563eb}
.consent-bar .reject{background:transparent;color:#e2e8f0}

/* ── CookieYes banner + preference centre, skinned to the Hollie design system ──────
     CookieYes injects its own stylesheet (<style id="cky-style">) at RUNTIME, i.e. after
     everything in our <head>, and writes the dashboard's colours as INLINE styles on its
     own elements. Same-specificity rules therefore lose twice over, so this block is
     deliberately !important throughout — that is what makes it order-proof, not laziness.
     Tokens come from hollie.css (:root); the banner is appended to <body>, so they resolve. */

  /* ---- notice box -------------------------------------------------------------------
     Three sizes, because a consent choice is a different kind of interruption on each:
     a near-full-width sheet on phones, a roomy centred card on tablets, a centred bar on
     desktop. All of them are anchored bottom-centre — never tucked into a corner.
     NB: the size selectors are .cky-consent-container.cky-box-bottom-right, matching the
     position class CookieYes puts on the container, so they out-rank its own placement
     rules and each other consistently. */
  .cky-consent-container{border-radius:var(--radius) !important}

  /* phones — a bottom sheet inset far enough to still read as a card, not a slab */
  .cky-consent-container.cky-box-bottom-right{
    width:auto !important;
    left:16px !important;right:16px !important;bottom:16px !important;
  }
  /* tablets and small laptops — a centred card */
  @media (min-width:600px){
    .cky-consent-container.cky-box-bottom-right{
      width:min(560px,calc(100vw - 48px)) !important;
      left:50% !important;right:auto !important;bottom:24px !important;
      transform:translateX(-50%) !important;
    }
  }
  /* desktop — the same card, given room. Deliberately NOT a full-width slab across the
     viewport: it is a consent notice, not a takeover. The internal alignment lives at the
     bottom of this file, after the button rules it has to out-order. */
  @media (min-width:1000px){
    .cky-consent-container.cky-box-bottom-right{
      width:min(720px,calc(100vw - 64px)) !important;bottom:28px !important;
    }
  }
  .cky-consent-container .cky-consent-bar{
    /* the dashboard's pasted custom CSS caps this at 300px — see the PR description */
    max-width:none !important;
    background:var(--surface) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius) !important;
    box-shadow:var(--shadow-lg) !important;
  }
  .cky-consent-bar .cky-notice-content-wrapper{padding:22px 22px 12px !important}
  .cky-custom-brand-logo-wrapper,
  .cky-notice .cky-title,
  .cky-notice-des,
  .cky-notice-btn-wrapper{padding:0 !important}

  .cky-notice .cky-title{
    font-family:Fraunces,Georgia,serif !important;
    font-size:20px !important;font-weight:600 !important;line-height:1.2 !important;
    letter-spacing:-.01em !important;color:var(--ink) !important;margin:0 0 8px !important;
  }
  .cky-notice-des,.cky-notice-des *{
    font-family:Inter,system-ui,-apple-system,sans-serif !important;
    font-size:13.5px !important;line-height:1.55 !important;color:var(--ink-soft) !important;
  }
  .cky-notice-des a.cky-policy,.cky-notice-des button.cky-policy{
    color:var(--brand-2) !important;font-weight:600 !important;border:0 !important;
    white-space:normal !important;
  }

  /* ---- buttons ---------------------------------------------------------------------
     Pills on the site's button scale. Reject keeps the SAME size, weight and fill
     strength as Accept: equal prominence is a legal requirement here, not a style choice.
     Only "Customise" is quieter — it is the granular path, not the refusal path. */
  .cky-notice-btn-wrapper{gap:8px !important;margin-top:18px !important;width:100% !important}
  .cky-btn{
    font-family:Inter,system-ui,-apple-system,sans-serif !important;
    font-size:13px !important;font-weight:600 !important;line-height:1.25 !important;
    border-radius:999px !important;border-width:1px !important;border-style:solid !important;
    padding:9px 13px !important;min-height:38px !important;flex:1 1 auto !important;
    transition:transform .12s ease,box-shadow .12s ease,background .15s ease !important;
  }
  .cky-btn:hover{filter:none !important;transform:none !important}
  .cky-btn-accept{
    background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important;
    box-shadow:0 8px 20px rgba(37,99,235,.28) !important;
  }
  .cky-btn-accept:hover{background:var(--brand-2) !important;box-shadow:0 8px 20px rgba(37,99,235,.34) !important}
  .cky-btn-reject{background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important}
  .cky-btn-reject:hover{background:#000 !important}
  .cky-btn-customize,.cky-btn-preferences{
    background:var(--surface) !important;border-color:var(--line) !important;color:var(--ink-soft) !important;
  }
  .cky-btn-customize:hover,.cky-btn-preferences:hover{background:var(--bg-2) !important}

  /* On phones CookieYes stacks the buttons AND reorders them so Accept lands on top and
     Reject at the bottom. Undo the reorder — the two decisions stay side by side and
     equally weighted, with Customise on its own full-width row above them. */
  @media (max-width:599px){
    .cky-consent-bar .cky-notice-content-wrapper{padding:20px 18px 10px !important}
    .cky-notice-btn-wrapper{flex-direction:row !important;flex-wrap:wrap !important;gap:8px !important;margin-top:16px !important}
    .cky-notice-btn-wrapper .cky-btn{order:0 !important;margin-top:0 !important}
    .cky-notice-btn-wrapper .cky-btn-customize{flex:1 1 100% !important}
    .cky-notice-btn-wrapper .cky-btn-reject,
    .cky-notice-btn-wrapper .cky-btn-accept{flex:1 1 0 !important}
  }

  /* At card sizes the actions sit on one right-aligned row at their natural width, so the
     card reads as copy-then-choice rather than three stretched slabs. Must come after the
     button rules above — same specificity, so source order decides. */
  @media (min-width:600px){
    .cky-notice-btn-wrapper{justify-content:flex-end !important;flex-wrap:nowrap !important}
    .cky-notice-btn-wrapper .cky-btn{flex:0 0 auto !important}
    .cky-notice-des{max-width:62ch !important}
  }
  @media (min-width:1000px){
    .cky-consent-bar .cky-notice-content-wrapper{padding:26px 28px 14px !important}
    .cky-notice-btn-wrapper{margin-top:20px !important;gap:10px !important}
    .cky-notice-btn-wrapper .cky-btn{padding:11px 22px !important;font-size:14px !important}
  }

  /* ---- CookieYes attribution: kept (free-plan terms), quiet but still readable -------
     NOT dimmed with opacity: at .45 the 11px label rendered ~#9B9B9B on white = 2.78:1,
     failing WCAG 1.4.3 (4.5:1 for text this size). A muted token gets the same "quiet"
     without putting the words below the legibility floor. */
  [data-cky-tag="powered-by"],[data-cky-tag="detail-powered-by"]{color:var(--muted) !important}
  [data-cky-tag="powered-by"] div,[data-cky-tag="detail-powered-by"] div{font-size:11px !important}

  /* ---- preference centre ------------------------------------------------------------ */
  .cky-modal{border-radius:var(--radius) !important;box-shadow:var(--shadow-lg) !important}
  .cky-preference-center{border-radius:var(--radius) !important;border-color:var(--line) !important}
  .cky-preference-header{padding:22px 24px !important;border-color:var(--line) !important}
  .cky-preference-header .cky-preference-title{
    font-family:Fraunces,Georgia,serif !important;font-size:20px !important;font-weight:600 !important;
    line-height:1.25 !important;letter-spacing:-.01em !important;color:var(--ink) !important;
  }
  .cky-preference-content-wrapper,.cky-preference-content-wrapper *,
  .cky-accordion-header-des,.cky-accordion-header-des *{
    font-family:Inter,system-ui,-apple-system,sans-serif !important;
    font-size:13.5px !important;line-height:1.6 !important;color:var(--ink-soft) !important;
  }
  .cky-preference-content-wrapper .cky-show-desc-btn{color:var(--brand-2) !important;font-weight:600 !important}
  .cky-accordion-header .cky-accordion-btn{
    font-family:Inter,system-ui,-apple-system,sans-serif !important;
    font-size:14.5px !important;font-weight:600 !important;color:var(--ink) !important;
  }
  /* --good (#16A34A) is the site's success token, tuned for chips on a tinted surface;
     as 14px text on the white preference card it is 3.30:1 and fails 1.4.3. --good-ink is
     the same family's text token and clears it. */
  .cky-accordion-header .cky-always-active{color:var(--good-ink) !important;font-weight:600 !important}
  .cky-accordion,.cky-preference-center .cky-prefrence-btn-wrapper{border-color:var(--line) !important}
  /* The category toggles carry NO text — the track IS the control, so WCAG 1.4.11 wants
     3:1 against both the white card behind it and the white knob inside it. The old
     #D5DAE2 was 1.40:1: an "off" switch was nearly invisible, which on a consent screen
     means a visitor cannot see what they have refused. One value serves both boundaries. */
  .cky-switch input[type="checkbox"]{background:#87909F !important}
  .cky-switch input[type="checkbox"]:checked{background:var(--brand) !important}

/* disable-self-service-signup: when self-service is toggled OFF the SSR stamps
   body[data-signup="off"]. The whole funnel (search, map, notes) lives in #getstarted —
   hide the WHOLE section (header included) so no-JS visitors and crawlers see the interest
   form as the primary path (JS additionally moves focus to it) and no empty "ghost"
   header is left behind. */
body[data-signup="off"] #getstarted{display:none !important}
body[data-signup="off"] #interest{scroll-margin-top:1rem}

/* ---- COMPARE (named-competitor comparison, #compare) ----------------------------
   Copy is legally load-bearing: every cell maps to a row in
   docs/legal/competitor-comparison-substantiation.md. Layout per approved mockup
   (specs/2026-08-24-landing-competitor-comparison/mockups/compare-section.html),
   built from the page's existing tokens (D13). */
.sec-h .cmp-lead{margin:14px auto 0;color:var(--ink-soft);font-size:17px}
.cmp-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden}
.cmp-card::before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--brand),var(--mint-2) 60%,var(--mint))}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-wrap:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.cmp-sr{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden;white-space:nowrap}
table.cmp{width:100%;border-collapse:collapse;min-width:680px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-2);font-size:15px;vertical-align:middle}
.cmp thead th{font-size:13px;letter-spacing:.04em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody th[scope=row]{font-weight:600;color:var(--ink);width:27%;line-height:1.35}
.cmp tbody th[scope=row],.cmp thead tr th:first-child{position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:8px 0 8px -8px rgba(17,24,39,.10)}
.cmp .why{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.cmp .hol{background:var(--mint)}
.cmp td.hol{border-left:2px solid var(--mint-2);border-right:2px solid var(--mint-2);font-weight:600}
.cmp thead .hol .cmp-name{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:700;color:var(--brand-2)}
.cmp thead .hol .tag{display:inline-block;margin-top:3px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:4px 11px;border-radius:999px}
.cmp .ok{display:inline-flex;align-items:center;gap:6px;background:#DCFCE7;color:var(--good-ink);border-radius:999px;padding:4px 12px;font-size:13.5px;font-weight:700;line-height:1.2}
.cmp .na{color:var(--muted);font-style:italic;font-size:13.5px}
.cmp .sub{display:block;font-weight:400;color:var(--ink-soft);font-size:13px;margin-top:3px}
.cmp .det{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:var(--bg)}
.cmp tbody tr:hover .hol{background:var(--mint-2)}
.cmp-verdict{background:linear-gradient(135deg,var(--mint),var(--bg) 70%);border-top:1px solid var(--mint-2);padding:24px 30px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.cmp-verdict p{font-family:Fraunces,Georgia,serif;font-size:18.5px;line-height:1.45;max-width:700px;margin:0}
.cmp-verdict strong{color:var(--brand-2)}
.cmp-cta2{display:block;text-align:center;margin-top:8px;font-size:13px;color:var(--brand-2);text-decoration:none;font-weight:600}
.cmp-asof{color:var(--muted);font-size:12.5px;text-align:center;margin-top:16px}
@media(max-width:920px){
  .cmp-verdict{flex-direction:column;align-items:flex-start}
}