:root{
  --paper:#ffffff;--ink:#111111;
  --raised:#fff;--pane:#f4f4f6;--chip:#fff;--hover:#ececf0;--fill:rgba(17,17,17,.06);--fill-h:rgba(17,17,17,.1);--on-ink:#fff;--ink-h:#2a2a2a;
  --lead:rgba(17,17,17,.68);--mute:#6f6b67;--paper-rgb:255,255,255;--grn:#13844f;--grn-s:#e3f5ec;--red:#c4372b;--scrim:rgba(17,17,17,.36);--ink2:#55524f;--ink3:#8e8a86;
  --line:rgba(17,17,17,.1);--line2:rgba(17,17,17,.18);--card:#ffffff;--soft:#f5f5f7;
  --sig:#111111;--sig-d:#2a2a2a;--sig-t:rgba(17,17,17,.12);--sig-s:#f2f2f4;
  --d:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--f:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --w-display:800;--w-head:760;--w-title:700;--w-ui:600;--w-body:450;--w-btn:700;--dw:var(--w-head);
  --ink-dim:rgba(17,17,17,.42);--bg:#f6f5f1;--w:#fff;--e:cubic-bezier(.2,.8,.2,1);--pad:clamp(20px,4.2vw,56px);
  --sh:0 1px 0 rgba(17,17,17,.04),0 18px 40px -18px rgba(17,17,17,.22);
  /* the old colour glows are one neutral ink tone now (rgba(var(--g),a) still works; the rules keep them to a 1px line) */
  --ink-rgb:17,17,17;--glow-b:var(--ink-rgb);--glow-g:var(--ink-rgb);--glow-l:var(--ink-rgb);
  /* letter tiles (business monogram, numbered tiles): a flat ink tile with the paper's letter; --grad is the old name */
  --mono:var(--ink);--on-mono:var(--on-ink);--grad:var(--mono);
  /* handle / claim fields (home hero, page bands, 404, contact): a filled field, a faint 1px line, no ring; focus = a
     slightly stronger line + a soft 4px halo; error = a red line + a soft red halo */
  --fld:#fff;--fld-sh:0 0 0 1px rgba(17,17,17,.08),0 18px 40px -22px rgba(17,17,17,.22);
  --fld-sh-f:0 0 0 1px rgba(17,17,17,.26),0 0 0 5px rgba(17,17,17,.06),0 18px 40px -22px rgba(17,17,17,.22);
  --fld-sh-e:0 0 0 1.5px var(--red),0 0 0 5px rgba(196,55,43,.12),0 18px 40px -22px rgba(17,17,17,.22);
  --ink-dim-d:rgba(255,255,255,.48);
  --e-out:cubic-bezier(.16,1,.3,1);--e-std:cubic-bezier(.22,.8,.2,1);--e-io:cubic-bezier(.65,0,.35,1);--e-in:cubic-bezier(.55,0,1,.45);
  --ease:var(--e-std);--out:var(--e-out);
  --t-press:.12s;--t-hover:.35s;--t-state:.45s;--t-enter:1.1s;--t-exit:.28s;--t-page:.42s;
  --rv-y:34px;--stg:55ms;
  --r-s:14px;--r:20px;--r-l:32px;
  --sh-1:0 0 0 1px var(--line),0 1px 2px rgba(13,15,20,.04);
  --sh-2:0 1px 0 rgba(17,17,17,.04),0 18px 40px -18px rgba(17,17,17,.22);
  --sh-3:0 1px 0 rgba(17,17,17,.04),0 34px 70px -30px rgba(17,17,17,.35);
  --wrap:1180px;--wrap-wide:1300px;--nav-h:76px;--top:150px;
  --sec:clamp(72px,12vh,128px);--hd-gap:clamp(24px,5.5vh,56px);--fn-gap:24px;
  interpolate-size:allow-keywords;
  /* display scale (docs/REVISION.md 1.3): hero H1> page H1> H2, each step>= 15% at every viewport.
     The three share one shape (vw for width, vh for short laptops) so the ratios hold everywhere. */
  --fs-hero:clamp(48px,6.3vw,92px);--fs-h1:clamp(44px,5.6vw,84px);--fs-h2:clamp(38px,4.8vw,70px);
}
@media (max-width:900px){:root{--nav-h:64px;--top:104px;--rv-y:22px;--fs-hero:clamp(40px,11.6vw,56px);--fs-h1:clamp(34px,10vw,48px);--fs-h2:clamp(29px,8.6vw,41px)}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#0c0d0f;--bg:#0c0d0f;--w:#141518;--card:#141518;--raised:#1b1c20;--soft:#1b1c20;--pane:#1b1c20;
  --chip:#333;--hover:#24252a;--ink:#ededed;--ink2:#a3a3a3;--ink3:#737373;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.16);
  --sig:#ededed;--sig-d:#ededed;--sig-t:rgba(255,255,255,.2);--sig-s:#1b1c20;
  --fill:rgba(255,255,255,.08);--fill-h:rgba(255,255,255,.13);--on-ink:#0c0d0f;--ink-h:#d4d4d4;
  --lead:rgba(237,237,237,.72);--mute:#949494;--paper-rgb:12,13,15;--bz-mute:#949494;--grn:#3ecf8e;--grn-s:rgba(62,207,142,.14);--red:#ff6b5e;--scrim:rgba(0,0,0,.6);
  --ink-dim:rgba(237,237,237,.42);--ink-rgb:237,237,237;
  --fld:#1b1c20;--fld-sh:0 0 0 1px rgba(255,255,255,.08);--fld-sh-f:0 0 0 1px rgba(255,255,255,.22),0 0 0 5px rgba(255,255,255,.06);
  --fld-sh-e:0 0 0 1.5px var(--red),0 0 0 5px rgba(255,107,94,.16);
  --sh:0 0 0 1px rgba(255,255,255,.10);--sh-1:0 0 0 1px rgba(255,255,255,.10);--sh-2:0 0 0 1px rgba(255,255,255,.10);--sh-3:0 0 0 1px rgba(255,255,255,.16);
}}:root[data-theme=dark]{
  --paper:#0c0d0f;--bg:#0c0d0f;--w:#141518;--card:#141518;--raised:#1b1c20;--soft:#1b1c20;--pane:#1b1c20;
  --chip:#333;--hover:#24252a;--ink:#ededed;--ink2:#a3a3a3;--ink3:#737373;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.16);
  --sig:#ededed;--sig-d:#ededed;--sig-t:rgba(255,255,255,.2);--sig-s:#1b1c20;
  --fill:rgba(255,255,255,.08);--fill-h:rgba(255,255,255,.13);--on-ink:#0c0d0f;--ink-h:#d4d4d4;
  --lead:rgba(237,237,237,.72);--mute:#949494;--paper-rgb:12,13,15;--bz-mute:#949494;--grn:#3ecf8e;--grn-s:rgba(62,207,142,.14);--red:#ff6b5e;--scrim:rgba(0,0,0,.6);
  --ink-dim:rgba(237,237,237,.42);--ink-rgb:237,237,237;
  --fld:#1b1c20;--fld-sh:0 0 0 1px rgba(255,255,255,.08);--fld-sh-f:0 0 0 1px rgba(255,255,255,.22),0 0 0 5px rgba(255,255,255,.06);
  --fld-sh-e:0 0 0 1.5px var(--red),0 0 0 5px rgba(255,107,94,.16);
  --sh:0 0 0 1px rgba(255,255,255,.10);--sh-1:0 0 0 1px rgba(255,255,255,.10);--sh-2:0 0 0 1px rgba(255,255,255,.10);--sh-3:0 0 0 1px rgba(255,255,255,.16);
}
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){&{color-scheme:dark}}}:root[data-theme=dark]{&{color-scheme:dark}}
/* a theme change cross-fades colours briefly (class set by THEME_SCRIPT only on a change, never under reduced motion) */
html.om-tx,html.om-tx *,html.om-tx *::before,html.om-tx *::after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,fill .3s ease,stroke .3s ease!important}
.om-thm{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--fill);flex:none}
.om-thm button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink2);cursor:pointer;
  transition:background-color var(--t-hover,.3s) ease,color var(--t-hover,.3s) ease}
.om-thm button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(13,15,20,.14),0 0 0 1px rgba(13,15,20,.04)}
.om-thm button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
@media (hover:hover){.om-thm button:hover{color:var(--ink)}}
/* small: business pages and their guides (a quiet control next to "Made with onmap") */
.om-thm-sm button{width:30px;height:30px}
.om-thm-sm svg{width:14px;height:14px}
@media (pointer:coarse){.om-thm:not(.ds-foot-thm) button,.om-thm-sm button{width:44px;height:44px}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.om-thm:not(.ds-foot-thm) button[aria-pressed=true]{background:var(--hover);box-shadow:0 0 0 1px var(--line)}}}:root[data-theme=dark]{.om-thm:not(.ds-foot-thm) button[aria-pressed=true]{background:var(--hover);box-shadow:0 0 0 1px var(--line)}}

.ds-logo{display:inline-flex;align-items:center;gap:.4em;height:44px;text-decoration:none;font:800 25px/1 var(--d);letter-spacing:-.05em;color:var(--ink)}
.ds-wm{flex:none;display:block;height:.76em;width:auto}.ds-ico{flex:none;display:block;height:1.3em;width:auto;overflow:visible;transform-origin:50% 96%;transition:transform .2s}
.ds-ico-g{transform-box:fill-box;transform-origin:50% 100%}
.ds-ico-sg,.ds-ico-s{transform-box:fill-box;transform-origin:center}
.ds-ico-r{transform-box:fill-box;transform-origin:center;opacity:0}
.ds-ico-k{fill:#2f8fff;opacity:0;transform-box:fill-box;transform-origin:center}
.ds-wm{overflow:visible}.ds-wm path{transform-box:fill-box;transform-origin:50% 100%}
.ds-wm path:nth-child(2){--l:0}.ds-wm path:nth-child(1){--l:1}.ds-wm path:nth-child(5){--l:2}.ds-wm path:nth-child(6){--l:3}.ds-wm path:nth-child(4){--l:4}.ds-wm path:nth-child(3){--l:5}
/* The logo arrives: the pin falls, lands with a squash and a ring on the ground, bounces once; the spark spins open
   and throws three small sparks; the letters stand up one after another. Under the pointer the pin winds up and
   jumps, the spark makes a full turn, sparks fly again and a wave runs through the name. */
@media (prefers-reduced-motion:no-preference){
  .ds-ico{animation:ds-ico-in 1.15s linear .1s backwards}
  .ds-ico-r{animation:ds-ring .8s cubic-bezier(.2,.7,.2,1) .52s backwards}
  .ds-ico-s{animation:ds-star-in 1.1s cubic-bezier(.2,1.6,.3,1) .58s backwards}
  .ds-ico-k{animation:ds-spark .9s cubic-bezier(.15,.8,.3,1) calc(.78s + var(--k)*70ms) backwards}
  .ds-wm path{animation:ds-wm-in .75s cubic-bezier(.2,1.5,.35,1) calc(.62s + var(--l)*65ms) backwards}
  .ds-wm path:nth-child(6){animation:ds-wm-dot .75s cubic-bezier(.2,1.5,.35,1) calc(.62s + var(--l)*65ms) backwards}
  @media (hover:hover){
    .ds-logo:hover .ds-ico-g{animation:ds-jump 1s linear}
    .ds-logo:hover .ds-ico-sg{animation:ds-turn 1s cubic-bezier(.45,0,.2,1)}
    .ds-logo:hover .ds-ico-r{animation:ds-ring .8s cubic-bezier(.2,.7,.2,1) .52s backwards,ds-ring2 .7s cubic-bezier(.2,.7,.2,1) .62s}
    .ds-logo:hover .ds-ico-k{animation:ds-spark .9s cubic-bezier(.15,.8,.3,1) calc(.78s + var(--k)*70ms) backwards,ds-spark2 .85s cubic-bezier(.15,.8,.3,1) calc(.3s + var(--k)*80ms)}
    .ds-logo:hover .ds-wm path{animation:ds-wm-in .75s cubic-bezier(.2,1.5,.35,1) calc(.62s + var(--l)*65ms) backwards,ds-wave .7s cubic-bezier(.3,0,.3,1) calc(.12s + var(--l)*55ms)}
  }
}
.ds-logo:active .ds-ico{transform:scale(.9)}
@keyframes ds-ico-in{0%{opacity:0;transform:translateY(-190%) scale(.92,1.12);animation-timing-function:cubic-bezier(.55,0,.9,.6)}18%{opacity:1}
  42%{transform:translateY(0) scale(1.22,.74);animation-timing-function:cubic-bezier(.2,.7,.4,1)}60%{transform:translateY(-34%) scale(.94,1.08);animation-timing-function:cubic-bezier(.5,0,.8,.5)}
  78%{transform:translateY(0) scale(1.1,.9);animation-timing-function:ease-out}90%{transform:translateY(-6%) scale(.98,1.02)}100%{transform:none}}
@keyframes ds-ring{from{opacity:.7;transform:scale(.2)}to{opacity:0;transform:scale(1.7)}}
@keyframes ds-ring2{from{opacity:.7;transform:scale(.2)}to{opacity:0;transform:scale(1.7)}}
@keyframes ds-star-in{from{transform:rotate(-360deg) scale(0)}}
@keyframes ds-spark{0%{opacity:0;transform:translate(calc(var(--x)*-.9),calc(var(--y)*-.9)) scale(0) rotate(-90deg)}35%{opacity:1;transform:translate(0,0) scale(1.25) rotate(0deg)}100%{opacity:0;transform:translate(calc(var(--x)*.5),calc(var(--y)*.5)) scale(0) rotate(120deg)}}
@keyframes ds-spark2{0%{opacity:0;transform:translate(calc(var(--x)*-.9),calc(var(--y)*-.9)) scale(0) rotate(-90deg)}35%{opacity:1;transform:translate(0,0) scale(1.25) rotate(0deg)}100%{opacity:0;transform:translate(calc(var(--x)*.5),calc(var(--y)*.5)) scale(0) rotate(120deg)}}
@keyframes ds-wm-in{from{opacity:0;transform:translateY(70%) scaleY(.4)}}
@keyframes ds-wm-dot{from{opacity:0;transform:scale(0) rotate(-270deg)}}
@keyframes ds-jump{0%{transform:none;animation-timing-function:ease-out}16%{transform:scale(1.2,.76);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  42%{transform:translateY(-46%) scale(.9,1.14) rotate(-10deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}62%{transform:translateY(0) scale(1.18,.8);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  78%{transform:translateY(-12%) scale(.97,1.04) rotate(3deg);animation-timing-function:ease-in}90%{transform:scale(1.05,.95)}100%{transform:none}}
@keyframes ds-turn{0%{transform:none}45%{transform:rotate(200deg) scale(1.45)}100%{transform:rotate(360deg)}}
@keyframes ds-wave{40%{transform:translateY(-32%) scaleY(1.12)}70%{transform:translateY(4%) scaleY(.94)}}
.ds-pin{flex:none;display:block;width:11px;height:11px;margin-top:2px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:currentColor}
.ds-mark{flex:none}

/* ---- type scale (docs/REVISION.md 1.3) ---- */
/* .t-xl is a stage title (final CTA, 404): hero scale, never louder than the hero */
.t-xl{font:800 var(--fs-hero)/.94 var(--d);letter-spacing:-.052em;text-wrap:balance}
.ds-h1{font:800 var(--fs-h1)/.95 var(--d);letter-spacing:-.052em;max-width:16ch;text-wrap:balance}
.ds-h2{font:800 var(--fs-h2)/.96 var(--d);letter-spacing:-.05em;max-width:16ch;text-wrap:balance}
.t-title{font:var(--w-title) clamp(20px,17.8px + .57vw,26px)/1.15 var(--d);letter-spacing:-.02em}
.t-lead{font:560 clamp(17px,15.5px + .3vw,19px)/1.5 var(--f);letter-spacing:-.01em;color:var(--lead)}
.t-body{font:var(--w-body) clamp(16px,15.6px + .1vw,17px)/1.55 var(--f);letter-spacing:-.006em}
.t-prose{font:var(--w-body) 17px/1.65 var(--f);letter-spacing:-.004em;max-width:64ch}
.t-meta{font:500 14px/1.45 var(--f);letter-spacing:0;color:var(--ink3)}
.t-label{font:700 12px/1.2 var(--f);letter-spacing:.07em;text-transform:uppercase}
.t-price{font:var(--w-display) clamp(44px,36.6px + 1.9vw,64px)/1 var(--d);letter-spacing:-.045em;font-variant-numeric:tabular-nums lining-nums}
.t-stat{font:var(--w-display) clamp(28px,25px + .76vw,36px)/1 var(--d);letter-spacing:-.035em;font-variant-numeric:tabular-nums lining-nums}
.t-num{font:var(--w-display) clamp(96px,70px + 6.7vw,168px)/.85 var(--d);letter-spacing:-.06em;font-variant-numeric:tabular-nums lining-nums}
.ds-dim{display:block;color:var(--ink-dim)}
.hm-s[data-theme=dark] .ds-dim{color:var(--ink-dim-d)}
.ds-meta{font:500 14.5px/1.45 var(--f);letter-spacing:0;color:var(--ink2)}
.ds-fn{margin-top:var(--fn-gap);font:500 14px/1.45 var(--f);letter-spacing:0;color:var(--ink3)}
.ds-h1 em,.ds-h2 em,.t-xl em,.hm-h2 em,.ap-big em{color:inherit;font-style:normal}
@media (max-width:900px){.ds-h1{line-height:1.02}.ds-h2{line-height:1.06;letter-spacing:-.032em}.t-prose{font-size:16.5px}}
@media (max-width:600px){:is(.t-xl,.ds-h1,.ds-h2){max-width:none}}

/* ---- headings: sectionHead() ---- */
.ds-head{display:block;margin-bottom:var(--hd-gap)}
.ds-head-c{text-align:center}
.ds-head-c > :is(h1,h2){margin-inline:auto}
.ds-head-m{display:flex;align-items:last baseline;justify-content:space-between;gap:24px}
.ds-head-m .ds-meta{flex:none}
/* the meta link waits for its heading: hidden until the title's words start rising, then fades in behind them */
.ds-head > .ds-meta{transition:opacity .9s var(--e-out) .25s}
.mo .ds-head:not(:has(> [data-rv-in])) > .ds-meta{opacity:0;transition:none}
@media (max-width:900px){.ds-head-m{flex-direction:column;align-items:flex-start;gap:10px}.ds-head-c.ds-head-m{align-items:center}}
/* retired (kept until every area has removed its kickers and subs) */
.ds-kick{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--ink2)}
.ds-kick i{width:7px;height:7px;border-radius:50%;background:var(--sig)}
.ds-sub{font-size:clamp(17px,1.5vw,19px);line-height:1.45;color:var(--ink2);max-width:46ch}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;height:46px;padding:0 20px;border-radius:999px;
  font:var(--w-btn) 15.5px/1 var(--f);letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:transform .45s var(--e-out),background-color var(--t-hover) var(--e-std),box-shadow var(--t-hover) var(--e-std),color var(--t-hover) var(--e-std)}
.btn:active{transform:scale(.97);transition-duration:var(--t-press)}
.btn svg:last-child{transition:transform .55s var(--e-std)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-sig,.btn-ink{background:var(--ink);color:var(--on-ink);box-shadow:none}
.btn-soft{background:var(--fill);color:var(--ink)}
.btn-line{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.btn-sm{height:38px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:700;gap:6px}
.btn-lg{height:60px;padding:0 28px;border-radius:999px;font-size:18px;gap:10px}
@media (hover:hover){
  .btn:hover svg:last-child{transform:translateX(3px)}
  .btn-sig:hover,.btn-ink:hover{background:var(--ink-h);box-shadow:none}
  .btn-soft:hover{background:var(--fill-h)}
  .btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink3)}
}
@media (pointer:coarse){.btn-sm{height:44px}}
@media (max-width:900px){.btn-lg{height:52px;padding:0 20px}}

/* ---- arrow link: lnk() ---- */
.lnk{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:var(--w-ui) 15px/1 var(--f);letter-spacing:-.008em;color:var(--ink);text-decoration:none;
  transition:transform .45s var(--e-out)}
.lnk-i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--fill);color:var(--ink);
  transition:background-color var(--t-state) var(--e-std),color var(--t-state) var(--e-std)}
.lnk-i svg{transition:transform .55s var(--e-std)}
.lnk:active{transform:scale(.97);transition-duration:var(--t-press)}
.hm-s[data-theme=dark] .lnk{color:#fff}
.hm-s[data-theme=dark] .lnk-i{background:rgba(255,255,255,.12);color:#fff}
@media (hover:hover){
  .lnk:hover .lnk-i{background:var(--ink);color:var(--on-ink)}
  .lnk:hover .lnk-i svg{transform:translateX(2px)}
  .hm-s[data-theme=dark] .lnk:hover .lnk-i{background:#fff;color:#111}
}

/* ---- linked rows / cards ---- */
.tap{transition:transform .6s var(--e-out),background-color .6s var(--e-out)}
.tap:active{transform:scale(.985);transition-duration:var(--t-press)}
@media (hover:hover){.tap:hover{background-color:var(--fill);transform:translateY(-2px)}}

/* ---- accordion: <details class="acc"><summary>Q<i class="acc-i">+</i></summary><div class="acc-b"><div>A</div></div></details>
   core.ts animates open and close via data-acc (o|c); without JS the [open] state shows the answer. ---- */
.acc > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.acc > summary::-webkit-details-marker{display:none}
.acc-i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--fill);font:500 18px/1 var(--f);font-style:normal;color:var(--ink);
  transition:transform var(--t-state) var(--e-out),background-color var(--t-hover) var(--e-std)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-out)}
.acc-b > *{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s var(--e-std)}
.acc[open]:not([data-acc]) .acc-b,.acc[data-acc=o] .acc-b{grid-template-rows:1fr}
.acc[open]:not([data-acc]) .acc-b > *,.acc[data-acc=o] .acc-b > *{opacity:1;transition-delay:.08s}
.acc[open]:not([data-acc]) .acc-i,.acc[data-acc=o] .acc-i{transform:rotate(45deg)}
@media (hover:hover){.acc > summary:hover .acc-i{background:var(--fill-h)}}
.hm-s[data-theme=dark] .acc-i{background:rgba(255,255,255,.12);color:#fff}

/* ---- inputs: focus ring for standalone fields ---- */
.ds-field{transition:box-shadow .25s var(--e-std)}
.ds-field:focus,.ds-field:focus-within{outline:0;box-shadow:0 0 0 2px var(--sig)}

/* ---- segmented control: add data-seg to the container; core.ts draws and slides the thumb ---- */
[data-seg]{position:relative;isolation:isolate}
[data-seg]>button{position:relative;z-index:1;background:transparent!important;box-shadow:none!important;transition:color var(--t-hover) var(--e-std)}
.seg-thumb{position:absolute;z-index:0;left:0;top:var(--seg-p,4px);bottom:var(--seg-p,4px);width:var(--w,0);transform:translate3d(var(--x,0),0,0);
  border-radius:var(--seg-r,11px);background:var(--seg-bg,var(--card));box-shadow:0 1px 3px rgba(13,15,20,.14),0 0 0 1px rgba(13,15,20,.04);
  transition:transform .5s var(--e-out),width .5s var(--e-out),opacity .2s;pointer-events:none}
.seg-thumb.seg-now{transition:none}
@media (pointer:coarse){[data-seg]>button{min-height:44px}}

/* dark: the segmented thumb is a raised pane with a hairline (no shadow) */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.seg-thumb{background:var(--seg-bg,var(--hover));box-shadow:0 0 0 1px var(--line)}}}:root[data-theme=dark]{.seg-thumb{background:var(--seg-bg,var(--hover));box-shadow:0 0 0 1px var(--line)}}
/* the /email notice pages (worker/mail/routes.ts, light-only CSS there): their lead text follows the theme */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.em p{color:var(--lead)}}}:root[data-theme=dark]{.em p{color:var(--lead)}}
.ds-draft{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--sig-s);color:var(--sig-d);font-weight:700;font-size:14.5px}

/* ---- nav: one floating glass capsule (logo, links in the middle, the pill on the right) ---- */
.ds-nav{position:fixed;z-index:50;top:calc(12px + env(safe-area-inset-top));left:50%;translate:-50% 0;width:min(1120px,calc(100% - 28px));height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px 0 22px;border-radius:999px;
  transition:background-color .3s var(--e-std),box-shadow .3s var(--e-std)}
/* bare at the top of the page; once it has scrolled the bar turns to plain frosted glass (no line around it) so it stays readable over the content */
.ds-nav.sc,.ds-nav.open{background:rgba(var(--paper-rgb),.7);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8)}
.ds-nav.open{background:var(--paper)}
.ds-links a svg{flex:none;margin-right:7px;opacity:.7}
/* claim fields: a point of light circles the edge under the pointer and while typing */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ds-edge{to{--ang:360deg}}
form.claim,form.pg-claim{position:relative}
form.claim::before,form.pg-claim::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .5s var(--e-std);
  background:conic-gradient(from var(--ang),transparent 0 58%,var(--ink) 80%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ds-edge 2.2s linear infinite paused}
form.claim:focus-within::before,form.pg-claim:focus-within::before{opacity:1;animation-play-state:running}
@media (hover:hover){form.claim:hover::before,form.pg-claim:hover::before{opacity:1;animation-play-state:running}}
form.claim.err::before{opacity:0}
/* the Claim button under the pointer: it turns a deep blue that drifts slowly, one pass of shine as the pointer arrives, a soft glow */
@media (hover:hover){
  form.claim .cl-b,form.pg-claim button{position:relative;isolation:isolate;overflow:hidden;transition:transform .18s var(--e-std),background-color .35s var(--e-std),color .3s,box-shadow .5s var(--e-std)}
  form.claim .cl-b::before,form.pg-claim button::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;opacity:0;transition:opacity .5s var(--e-std);
    background:linear-gradient(100deg,#1247e6,#1f6dff 45%,#3d9bff 70%,#1f6dff) 0 0/220% 100%;animation:ds-drift 5s ease-in-out infinite alternate paused}
  form.claim .cl-b::after,form.pg-claim button::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transform:translateX(-110%);
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%)}
  form.claim .cl-b:hover,form.pg-claim button:hover{color:#fff;background:#1f6dff;box-shadow:0 8px 26px -10px rgba(31,109,255,.75)}
  form.claim .cl-b:hover::before,form.pg-claim button:hover::before{opacity:1;animation-play-state:running}
  form.claim .cl-b:hover::after,form.pg-claim button:hover::after{animation:ds-shine .9s cubic-bezier(.3,0,.2,1) .05s}
}
@keyframes ds-drift{to{background-position:100% 0}}
@keyframes ds-shine{0%{opacity:1;transform:translateX(-110%)}100%{opacity:1;transform:translateX(110%)}}
/* typing a handle: the page goes behind frosted glass, only the field (and its message) stays sharp */
.ds-veil{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;visibility:hidden;background:rgba(var(--paper-rgb),.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:opacity .45s var(--e-std),visibility 0s .45s}
.ds-veil.on{opacity:1;visibility:visible;transition:opacity .45s var(--e-std)}
.ds-up{z-index:61!important}.ds-rel{position:relative}
.mo.nav-in .ds-nav{opacity:0;animation:ds-nav-fs .01s 2.6s forwards}
@keyframes ds-nav-fs{to{opacity:1}}
.ds-links{position:absolute;left:50%;translate:-50% 0;display:flex;align-items:center;gap:2px}
.ds-links a,.ds-in{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;font:650 15px/1 var(--f);letter-spacing:-.01em;color:var(--ink);text-decoration:none;transition:background-color .2s}
/* the pill behind a link is its own layer that only fades (opacity, on the compositor): it stays smooth even while the page below is busy drawing */
.ds-links a{position:relative;isolation:isolate}
.ds-links a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill);opacity:0;will-change:opacity;transition:opacity .18s linear}
.ds-links a[aria-current]::before{opacity:1}
@media (hover:hover){.ds-links a:hover::before{opacity:1}.ds-in:hover{background:var(--hover,var(--fill))}}
.ds-acts{display:flex;align-items:center;gap:6px}
.ds-in{width:44px;height:44px;padding:0;justify-content:center;background:var(--fill)}
.ds-dash{display:none}.ds-signed .ds-dash{display:inline-flex}
/* signed in: the way back to the dashboard is a labelled pill (phones keep just the icon) */
.ds-dash{width:auto;gap:8px;padding:0 17px 0 14px}
@media (max-width:600px){.ds-dash{width:44px;padding:0}.ds-dash span{display:none}}
.ds-burger{display:none;place-items:center;align-content:center;gap:5px;width:44px;height:44px;border:0;border-radius:50%;background:var(--fill);cursor:pointer;padding:0;transition:background-color .25s var(--e-std),transform .45s var(--e-out)}
.ds-burger:active{transform:scale(.94);transition-duration:var(--t-press)}
.ds-burger:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:50%}
.ds-burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);translate:0 0;rotate:0deg;transition:rotate .26s var(--e-out),translate .14s var(--e-std) .14s}
.ds-nav.open .ds-burger i{transition:translate .14s var(--e-std),rotate .3s var(--e-out) .1s}
.ds-nav.open .ds-burger i:first-child{translate:0 3.5px;rotate:45deg}
.ds-nav.open .ds-burger i:last-child{translate:0 -3.5px;rotate:-45deg}
.ds-menu{display:none}
@media (max-width:900px){
  .ds-links{display:none}
  .ds-nav{height:56px;top:calc(8px + env(safe-area-inset-top));width:calc(100% - 20px);padding:0 6px 0 18px}
  .ds-burger{display:grid}
  .ds-menu{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:calc(var(--vvh,100svh) - var(--nav-h) - 30px);overflow-y:auto;overscroll-behavior:contain;
    padding:12px;border-radius:28px;background:var(--raised);box-shadow:0 30px 60px -24px rgba(17,17,17,.45),0 0 0 1px var(--line);
    visibility:hidden;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .2s var(--e-std),transform .3s var(--e-out),visibility 0s .3s}
  .ds-nav.open .ds-menu{visibility:visible;opacity:1;transform:none;transition:opacity .2s var(--e-std),transform .4s var(--e-out),visibility 0s}
  .ds-menu > :is(a,.ds-menu-thm){opacity:0;transform:translate3d(0,8px,0);transition:opacity .12s var(--e-std),transform 0s .3s,background-color var(--t-hover) var(--e-std)}
  .ds-nav.open .ds-menu > :is(a,.ds-menu-thm){opacity:1;transform:none;transition:opacity .3s var(--e-out) calc(var(--i,0)*40ms + 60ms),transform .42s var(--e-out) calc(var(--i,0)*40ms + 60ms)}
  .ds-menu a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 16px;border-radius:20px;font:800 26px/1.1 var(--d);letter-spacing:-.04em;text-decoration:none}
  .ds-menu a:not(.btn) svg{color:var(--ink3)}
  .ds-menu a:not(.btn):active{background:var(--fill)}
  .ds-menu a[aria-current]{background:var(--fill)}
  .ds-menu-cta{margin-top:10px;width:100%}
  .ds-menu-thm{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:6px 6px 0 16px;font:650 15px/1 var(--f);color:var(--ink2)}
}
@media (prefers-reduced-motion:reduce){.ds-menu,.ds-menu > :is(a,.ds-menu-thm){transition-delay:0s!important}}
html.ds-lock,html.ds-lock body{overflow:hidden}
body::after{content:"";position:fixed;inset:0;z-index:49;background:rgba(17,17,17,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--e-std),visibility 0s .4s}
html.ds-lock body::after{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--e-std)}

/* ---- footer: logo and one line, link columns, a quiet last row ---- */
.ds-foot{margin-top:clamp(48px,10vh,96px);padding:clamp(40px,7vh,64px) var(--pad) calc(26px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font:600 15px/1.3 var(--f);color:var(--ink2)}
.ds-foot-i{max-width:1300px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px 64px}
.ds-foot-b{max-width:330px}
.ds-foot-b .ds-logo{font-size:27px}
.ds-foot-b p{margin-top:14px;font:560 15.5px/1.5 var(--f);color:var(--ink2);text-wrap:pretty}
/* columns size to their words and keep one gap, so a fourth or fifth column simply lines up next to these */
.ds-foot nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,max-content);gap:28px clamp(36px,5vw,72px)}
.ds-foot nav .ds-foot-g{margin:0 0 6px;font:650 13px/1.3 var(--f);letter-spacing:0;color:var(--mute)}
.ds-foot nav a{display:flex;align-items:center;min-height:36px;text-decoration:none;color:var(--ink);transition:color .2s}
@media (hover:hover){.ds-foot nav a:hover{color:var(--ink2)}}
@media (pointer:coarse){.ds-foot nav a{min-height:44px}}
.ds-foot-e > span{text-align:right;text-wrap:balance}
@media (max-width:900px){.ds-foot-e > span{text-align:left}}
.ds-foot-e{max-width:1300px;margin:clamp(32px,6vh,52px) auto 0;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;font:600 13px/1.3 var(--f);color:var(--mute)}
/* the appearance switch here is a fine outline with small icons, not a filled pill */
.om-thm.ds-foot-thm{gap:1px;padding:2px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.om-thm.ds-foot-thm button{width:28px;height:28px;color:var(--mute)}
.om-thm.ds-foot-thm svg{width:14px;height:14px}
.om-thm.ds-foot-thm button[aria-pressed=true]{background:var(--fill);color:var(--ink);box-shadow:none}
/* small type: a darker tertiary than --ink3 (5.3:1 on paper, AA at 13px) */
.ds-foot-m{display:inline-block;margin-top:12px;font:650 15px/1.4 var(--f);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ds-foot-m:hover{text-decoration-color:currentColor}
/* phones: logo and line, the columns two across, the year. No appearance switch (the menu has it). */
@media (max-width:900px){
  .ds-foot-i{flex-direction:column;gap:28px}
  .ds-foot-b .ds-logo{font-size:24px}
  .ds-foot nav{grid-auto-flow:row;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:24px 16px}
  @media (max-width:340px){.ds-foot nav{grid-template-columns:1fr 1fr}}
  .ds-foot-e{margin-top:28px}
  .ds-foot-thm{display:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.ds-menu{box-shadow:0 0 0 1px var(--line2),0 30px 60px -24px rgba(0,0,0,.6)}
body::after{background:rgba(0,0,0,.5)}}}:root[data-theme=dark]{.ds-menu{box-shadow:0 0 0 1px var(--line2),0 30px 60px -24px rgba(0,0,0,.6)}
body::after{background:rgba(0,0,0,.5)}}

:root{--bg:#f6f5f1;--bg-rgb:246,245,241;--ink:#111;--ink-2:#55524f;--ink-3:#8e8a86;--w:#fff;--line:rgba(17,17,17,.1);
  --f:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;--e:cubic-bezier(.2,.8,.2,1);--pad:clamp(20px,4.2vw,56px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper);scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--paper);color:var(--ink);font:500 17px/1.5 var(--f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}

/* ---------- top bar: the shared ds chrome (nav + menu + footer); home-only: hides with the keyboard ---------- */
.ds-skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--on-ink);font-weight:700}
.ds-skip:focus{top:12px}
.ds-nav{transition:background-color .3s var(--e-std),box-shadow .3s var(--e-std),transform .5s var(--e)}
html.kb .ds-nav{transform:translate3d(0,calc(-100% - 24px),0)}
html.ds-lock,html.ds-lock body{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1100px;background:var(--bg);overflow:hidden;isolation:isolate}
/* no stacking context of its own: the tag and the chips (labels, not scenery) sit above the paper fade */
.map{position:absolute;inset:0}
/* the scene arrives slowly and evenly (a long ease in and out, with a small settle), on the compositor only */
.map canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transform:scale(1.035);transform-origin:50% 62%;
  transition:opacity 2.4s cubic-bezier(.45,.05,.25,1),transform 3.2s cubic-bezier(.22,.7,.2,1);will-change:opacity,transform}
.map.ready canvas{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.map canvas{transform:none;transition:opacity .6s linear}}

/* soft hand-off into the white #answer section below (no hard cut through the roofs) */
.hero::before{content:"";position:absolute;inset:auto 0 0;height:120px;z-index:2;pointer-events:none;background:linear-gradient(rgba(var(--bg-rgb),0),var(--paper))}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.94) 26%,rgba(var(--bg-rgb),.6) 44%,rgba(var(--bg-rgb),0) 62%),linear-gradient(var(--bg) 0%,rgba(var(--bg-rgb),0) 28%)}
.chip em{font-style:normal}
.chip{position:absolute;z-index:2;left:0;top:0;transform:translate(-50%,-100%) scale(.9);opacity:0;pointer-events:none;
  background:var(--w);color:var(--ink);font-weight:700;font-size:14.5px;letter-spacing:-.01em;height:34px;padding:0 14px;border-radius:999px;display:flex;align-items:center;gap:7px;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(17,17,17,.08),0 10px 24px -12px rgba(0,0,0,.3);transition:opacity .45s var(--e),transform .45s var(--e)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)}
.chip.on{opacity:1;transform:translate(-50%,-100%) scale(1)}
.chip.x{opacity:0!important}
/* the chips are city scenery: they step back while someone types a handle */
.hero:has(#hd:focus,#hd:not(:placeholder-shown)) .chip{opacity:0}
.tag{position:absolute;z-index:3;left:0;top:0;transform:translate(-50%,calc(-100% - 10px));opacity:0;pointer-events:none;transition:opacity .5s var(--e)}
.tag.on{opacity:1}
.tag span{display:block;background:var(--ink);color:var(--w);font-weight:600;font-size:14.5px;letter-spacing:-.01em;height:40px;line-height:40px;padding:0 16px;border-radius:12px;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.tag span b{font-weight:800;transition:opacity .2s}
.tag.dim span b{opacity:.5}
.tag span::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--ink);transform:translateX(-50%) rotate(45deg);border-radius:2px}

.hc{position:relative;z-index:4;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(112px,17vh,168px) var(--pad) 40px;pointer-events:none}
.hc>*{pointer-events:auto}
/* pulled left by the capital's side bearing, so its ink starts on the field's edge */
.h1{font-weight:800;font-size:clamp(44px,6.3vw,92px);line-height:.94;letter-spacing:-.052em;max-width:12ch;margin-left:-.04em}
/* each line is its own mask for the intro; the mask reaches .24em below the line box so descenders (g, y, p) are never cut */
.h1 .ln{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.h1 .ln>span{display:block}
/* the intro runs from the first paint (no script): the headline rises out of its line, the field and the lead follow */
@media (prefers-reduced-motion:no-preference){
  .h1 .ln>span{animation:h-up 1s cubic-bezier(.2,.8,.2,1) .12s backwards}
  .h1 .ln:nth-child(2)>span{animation-delay:.21s}
  .h1 .ln:nth-child(3)>span{animation-delay:.3s}
  .hero .claim{animation:h-in .9s cubic-bezier(.2,.8,.2,1) .46s backwards}
  .hero .note{animation:h-in .9s cubic-bezier(.2,.8,.2,1) .6s backwards}
}
@keyframes h-up{from{transform:translateY(135%)}}
@keyframes h-in{from{opacity:0;transform:translateY(26px)}}
.claim{margin-top:clamp(28px,4.6vh,44px);display:flex;align-items:center;gap:10px;width:min(100%,800px);height:96px;padding:0 10px 0 32px;border-radius:999px;
  background:var(--fld);box-shadow:var(--fld-sh);transition:box-shadow .3s var(--e),transform .3s var(--e)}
/* calm field: a faint line, no ring; focus = a slightly stronger line + soft halo; a refused handle = a red line */
.claim:focus-within{box-shadow:var(--fld-sh-f)}
/* the hero field is glass over the city; a point of light circles its edge under the pointer and while you type */
@media (min-width:761px){
.hero .claim{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(17,17,17,.06),0 22px 48px -24px rgba(17,17,17,.3)}
.hero .claim:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 1px 0 #fff,0 0 0 1px rgba(17,17,17,.14),0 26px 60px -24px rgba(17,17,17,.4)}
}
/* typing: only the field stays sharp, the rest of the hero sits behind frosted glass */
.hveil{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:rgba(var(--bg-rgb),.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:opacity .45s var(--e)}
html.claiming .hveil{opacity:1}
html.claiming .hc{z-index:6}
.h1,.hero .note,.ds-nav{transition:filter .45s var(--e),opacity .45s var(--e)}
html.claiming .h1,html.claiming .ds-nav{filter:blur(7px);opacity:.45}
html.claiming .ds-nav{pointer-events:none}
.claim.err,.claim.err:focus-within{box-shadow:var(--fld-sh-e)}
.cl-f{flex:1;min-width:0;display:flex;align-items:baseline;height:100%;align-items:center;cursor:text;font-size:clamp(24px,3vw,40px);letter-spacing:-.035em}
.cl-pre{font-weight:500;color:var(--ink-3);white-space:nowrap}
.cl-f input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:none;font:800 1em/1 var(--f);letter-spacing:-.035em;color:var(--ink);padding:0;margin:0;caret-color:var(--ink)}
.cl-f input::placeholder{color:var(--ink);opacity:.18;font-weight:800}
.cl-b{flex:none;height:76px;padding:0 30px 0 34px;border-radius:999px;background:var(--ink);color:var(--w);font-weight:750;font-size:21px;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:10px;transition:transform .18s var(--e),background .2s}
.cl-b:hover{background:var(--ink-h)}
.cl-b:active{transform:scale(.96)}
.cl-b svg{transition:transform .25s var(--e)}
.cl-b:hover svg{transform:translateX(3px)}
.claim.bad{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.cl-msg{margin-top:10px;font-weight:650;font-size:16px;min-height:24px;color:var(--ink-2);text-wrap:pretty}
.cl-msg.bad{color:var(--red)}
/* one slot under the field: the product sentence lives there, and the field's message takes its place while it
   shows (same height, so nothing below moves). Headline, field and note share one left edge (the field's outer edge). */
.h-slot{display:grid;align-items:start;justify-items:start;margin-top:22px}
.h-slot>*{grid-area:1/1}
.hero .cl-msg{margin:0;min-height:0;text-align:left}
.hero .cl-msg:not(:empty){background:rgba(255,255,255,.92);padding:6px 12px;border-radius:999px;box-shadow:var(--sh)}
.note .nw{white-space:nowrap}
.note{max-width:36ch;font-weight:600;font-size:17px;line-height:1.4;letter-spacing:-.01em;text-wrap:balance;transition:opacity .2s var(--e)}
.h-slot:has(.cl-msg:not(:empty)) .note{opacity:0}

/* laptops: solid paper up to the headline's right edge + 24px (--hr, measured by the client), then the city */
@media (min-width:1000px){
  .hero::after{background:linear-gradient(90deg,var(--bg) 0,var(--bg) calc(var(--hr,44%) + 24px),rgba(var(--bg-rgb),.6) calc(var(--hr,44%) + 110px),rgba(var(--bg-rgb),0) calc(var(--hr,44%) + 210px)),linear-gradient(var(--bg) 0,var(--bg) 84px,rgba(var(--bg-rgb),0) 190px)}
}

.ds-foot{margin-top:0}
/* scrolling away: the whole hero dissolves fast, the type lifting a little and the scene easing back (--hs: 0 to 1) */
.hero .map,.hero .hc,.hero .hchat{will-change:opacity,transform}
.hero .map{opacity:calc(1 - var(--hs,0));transform:scale(calc(1 + var(--hs,0) * .035));transform-origin:50% 60%}
.hero .hc{opacity:calc(1 - var(--hs,0) * 1.35);transform:translateY(calc(var(--hs,0) * -34px))}
.hero .hchat{opacity:calc(1 - var(--hs,0) * 1.6);translate:0 calc(var(--hs,0) * -22px)}
/* ---------- the answer, floating over the square: what a local sees when they ask (not part of the 3D scene) ---------- */
.hchat{position:absolute;z-index:4;left:50%;bottom:clamp(18px,4vh,40px);width:min(470px,calc(100% - 40px));transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;pointer-events:none;text-align:left}
.hq{align-self:flex-end;max-width:84%;background:var(--ink);color:var(--w);padding:11px 16px;border-radius:20px 20px 6px 20px;font-weight:650;font-size:15px;line-height:1.35;box-shadow:0 14px 34px -14px rgba(0,0,0,.45)}
.ha{background:var(--w);border-radius:22px 22px 22px 8px;padding:14px 16px 16px;box-shadow:0 0 0 1px rgba(17,17,17,.06),0 26px 60px -22px rgba(0,0,0,.5)}
.ha-l{display:flex;align-items:center;gap:8px;font-weight:750;font-size:14px;letter-spacing:-.01em}
.ha-l i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.ha-l svg{width:15px;height:15px}
.ha-t{margin-top:8px;font-size:15px;line-height:1.42;font-weight:500;color:var(--ink)}
.ha-card{margin-top:10px;display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:stretch;padding:8px;border-radius:16px;background:var(--fill)}
.ha-map{border-radius:11px;overflow:hidden;min-height:92px;background:#e7ecdf}
.ha-map svg{display:block;width:100%;height:100%}
.ha-i{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding-right:4px}
.ha-i b{font-weight:800;font-size:16px;letter-spacing:-.02em}
.ha-i span{font-size:13px;font-weight:550;color:var(--ink-2)}
.ha-i .op{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:650}
.ha-i .op i{width:7px;height:7px;border-radius:50%;background:#2e9e5b}
.ha-b{display:flex;gap:6px;margin-top:5px}
.ha-b span{height:28px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;background:var(--w);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.ha-b span:first-child{background:var(--ink);color:var(--w);box-shadow:none}
.ha-s{margin-top:10px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.ha-s .fav{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--ink)}.ha-s .fav svg{width:18px;height:20px;display:block}
.ha-s b{color:var(--ink);font-weight:800}
/* the conversation is staged by src/n/client.ts: question in, the assistant thinks, the answer streams, the place
   card opens (pin drops, rows arrive one by one), it rests long enough to read, then both leave upwards */
.hq,.ha{opacity:0;transform:translateY(16px) scale(.965);transform-origin:50% 100%;transition:opacity .45s var(--e),transform .6s var(--e);will-change:transform,opacity}
.hq.in,.ha.in{opacity:1;transform:none}
.hq.out,.ha.out{opacity:0;transform:translateY(-12px) scale(.985);transition:opacity .32s ease-in,transform .38s ease-in}
.ha-d{display:inline-flex;gap:4px;margin-left:6px;opacity:0;transition:opacity .25s}
.ha-d i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:ha-dot 1.1s infinite}
.ha-d i:nth-child(2){animation-delay:.16s}.ha-d i:nth-child(3){animation-delay:.32s}
@keyframes ha-dot{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-3px);opacity:1}}
.ha.think .ha-d{opacity:1}
/* the answer text and the place card open by growing (grid rows), so the bubble above glides instead of jumping */
.ha-g{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.ha-g>div{overflow:hidden;min-height:0}
.ha.text .ha-g.t,.ha.card .ha-g.c{grid-template-rows:1fr}
.ha-t .w{opacity:0;transition:opacity .28s ease-out}
.ha-t .w.on{opacity:1}
.ha-map,.ha-i>*,.ha-s{opacity:0;transform:translateY(8px);transition:opacity .4s var(--e),transform .5s var(--e);transition-delay:calc(var(--k,0) * 80ms + 160ms)}
.ha.card .ha-map,.ha.card .ha-i>*,.ha.card .ha-s{opacity:1;transform:none}
.ha-map .pin{transform:translateY(-26px);opacity:0;transition:transform .55s cubic-bezier(.3,1.7,.5,1) .5s,opacity .2s .5s;transform-box:fill-box;transform-origin:50% 100%}
.ha.card .ha-map .pin{transform:none;opacity:1}
.ha-map .rd{transform-origin:59px 46px}
@media (prefers-reduced-motion:reduce){.hq,.ha{opacity:1;transform:none}.ha-g{grid-template-rows:1fr}.ha-map,.ha-i>*,.ha-s,.ha-t .w,.ha-map .pin{opacity:1;transform:none}}
/* ---------- centered hero (2026-11-12): a small headline and field in the middle; the city is the hero's background,
   framing them on the left, the right and along the bottom (src/n/diorama.ts) ---------- */
.hero{height:100vh;height:100svh;min-height:640px;max-height:1040px}
.hero::after{content:"";inset:0;z-index:1;background:linear-gradient(rgba(var(--bg-rgb),.9) 0,rgba(var(--bg-rgb),.55) 56px,rgba(var(--bg-rgb),0) 120px)}
.hero::before{height:90px}
.hc{height:100%;align-items:center;justify-content:flex-start;text-align:center;padding:calc(var(--nav-h) + clamp(14px,4.5vh,56px)) var(--pad) 0}
.h1{font-size:clamp(40px,5vw,72px);line-height:.98;max-width:none;margin-left:0}
.claim{width:min(100%,560px);height:72px;padding:0 8px 0 26px;margin-top:clamp(22px,3.6vh,34px)}
.cl-f{font-size:clamp(19px,1.9vw,25px)}
.cl-b{height:56px;padding:0 22px 0 24px;font-size:17px}
.h-slot{justify-items:center;margin-top:16px}
.hero .cl-msg{text-align:center}
.note{max-width:46ch;font-size:16px;color:var(--ink-2)}
.note-f{margin-top:8px;font-size:14px;font-weight:650;color:var(--ink-3s)}
/* tablets: the city comes close under the field, so the sentence sits on frosted paper (as the field does) and no roof runs through it */
@media (min-width:761px) and (max-width:1100px){.hero .note{padding:12px 18px 13px;border-radius:22px;background:rgba(var(--bg-rgb),.72);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}.h-slot{margin-top:12px}}
@media (min-width:761px){.note-f{white-space:nowrap}}
/* short laptops (1290x680): the sentence takes two lines and the type starts higher, so it ends above the conversation */
@media (min-width:1101px) and (max-height:760px){.hc{padding-top:calc(var(--nav-h) + 8px)}.claim{margin-top:20px}.h-slot{margin-top:12px}.note{max-width:66ch;font-size:15.5px}.note-f{margin-top:4px}}
.map.over{cursor:pointer}
@media (min-width:761px) and (max-height:620px){.hchat{display:none}}


/* reveal */
[data-r]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e),transform .9s var(--e)}
[data-r].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}[data-r]{opacity:1;transform:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-rgb:12,13,15;--ink-2:#a3a3a3;--ink-3:#737373;
  .hero .cl-msg:not(:empty){background:rgba(20,21,24,.92)}
  @media (min-width:761px){
  .hero .claim{background:rgba(22,23,27,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.14),0 22px 48px -24px rgba(0,0,0,.7)}
  .hero .claim:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.2),0 26px 60px -24px rgba(0,0,0,.8)}
  }
  .chip{box-shadow:0 0 0 1px var(--line2),0 10px 24px -12px rgba(0,0,0,.6)}
  .tag span{box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}}}:root[data-theme=dark]{--bg-rgb:12,13,15;--ink-2:#a3a3a3;--ink-3:#737373;
  .hero .cl-msg:not(:empty){background:rgba(20,21,24,.92)}
  @media (min-width:761px){
  .hero .claim{background:rgba(22,23,27,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.14),0 22px 48px -24px rgba(0,0,0,.7)}
  .hero .claim:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.2),0 26px 60px -24px rgba(0,0,0,.8)}
  }
  .chip{box-shadow:0 0 0 1px var(--line2),0 10px 24px -12px rgba(0,0,0,.6)}
  .tag span{box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}}


/* ---------- the 3D phone ---------- */
.ph3{position:relative;width:100%;height:clamp(500px,74vh,700px)}
.ph3 canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--e-std);cursor:grab;touch-action:pan-y;outline:0}
.ph3 canvas.grabbing{cursor:grabbing}
.ph3.on canvas{opacity:1}
.ph3-flat{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden}
.ph3.flat .ph3-flat{opacity:1;visibility:visible}
.ph3-flat img.ld{opacity:1}
.ph3.flat canvas{display:none}
.ph3-flat img{opacity:0;transition:opacity .35s var(--e-std);position:absolute;top:8%;left:50%;height:84%;width:auto;max-width:none;aspect-ratio:390/855;transform:translateX(-50%);border-radius:34px;background:var(--card);box-shadow:0 0 0 7px #0b0b0c,0 0 0 9px #8d8f94,0 30px 60px -30px rgba(17,17,17,.45)}
.ph3-credit{margin-top:14px;font:550 12px/1.4 var(--f);color:var(--ink3)}
.ph3-credit a{color:inherit}
@media (max-width:900px){.ph3{height:min(470px,58svh)}.ph3-flat img{border-radius:28px}}

:root{--mint-2:#a8e2c4;--mint-3:#13844f;--mark:rgba(17,17,17,.1);
  --sh:0 1px 0 rgba(17,17,17,.04),0 18px 40px -18px rgba(17,17,17,.22);
  /* tertiary ink for type under 14px: 5.3:1 on white, 4.9:1 on the grey panes (ink-3 is 3.4:1) */
  --ink-3s:#6f6b67;--mint-ink:#0f7044}
/* clip sideways only: the flying question may spill below a section */
.blk{position:relative;overflow-x:clip}
.sec{max-width:1300px;margin:0 auto;padding:clamp(72px,11vh,120px) clamp(24px,4vw,64px)}
.h2{font-weight:800;font-size:clamp(40px,5.2vw,78px);line-height:.95;letter-spacing:-.052em}
.h2 .mute{opacity:.42;display:inline-block;text-wrap:balance;margin-top:.07em}
.lead{margin-top:20px;max-width:42ch;font-size:17px;font-weight:560;color:rgba(17,17,17,.68);line-height:1.5;text-wrap:pretty}
.card{background:var(--w);border-radius:28px;box-shadow:var(--sh)}

/* 1. the answer */
.ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.ask-x{margin-top:22px;font-size:13px;color:rgba(17,17,17,.64);font-weight:600;max-width:40ch}
.chat{position:relative;padding:24px 14px 14px;display:flex;flex-direction:column}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:#f4f4f6;margin-top:22px}
.ask-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:999px;font-weight:700;font-size:14.5px;color:rgba(17,17,17,.6);transition:background .3s var(--e),color .3s var(--e),box-shadow .3s}
.ask-tab .lg{flex:none;width:20px;height:20px;display:flex;filter:grayscale(1);opacity:.55;transition:filter .3s var(--e),opacity .3s var(--e),transform .3s var(--e)}
.ask-tab .lg svg{width:100%;height:100%}
.ask-tab:hover .lg{opacity:.85}
.ask-tab[aria-selected="true"] .lg{filter:none;opacity:1;transform:scale(1.06)}
.ask-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:999px}
.ask-tab[aria-selected="true"]{background:var(--w);color:var(--ink);box-shadow:0 2px 8px -2px rgba(17,17,17,.18)}
.chat-b{padding:0 10px;display:flex;flex-direction:column;justify-content:flex-start}
#ask-p:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:18px}
.ask-q{align-self:flex-end;max-width:86%;text-wrap:balance;background:var(--ink);color:var(--w);padding:14px 18px;border-radius:22px 22px 6px 22px;font-weight:650;font-size:17px;line-height:1.38}
/* the card keeps its tallest tab's height; on the shorter tabs the spare room opens above the link chip, so the chip
   always sits the same distance above the card's bottom edge */
.ask-r{margin-top:18px;flex:1 0 auto;display:flex;flex-direction:column;align-items:flex-start}
.ask-r>*{flex:none}
.ask-l{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:750}
/* the assistant's mark on a white disc; it changes with the tab, inside the same fade as the text */
.ask-l i{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:#0d0d0d;box-shadow:0 0 0 1px rgba(17,17,17,.1);display:flex;align-items:center;justify-content:center;font-style:normal}
.ask-l i svg{width:18px;height:18px}
.ask-a{margin-top:12px;margin-bottom:16px;max-width:44ch;font-size:17px;line-height:1.5;font-weight:560;color:#2a2a2e;text-wrap:balance}
/* the quote starts its own line, so it reads as one highlighted citation */
.ask-a .nw{white-space:nowrap}
.ask-a mark{background:var(--mark);color:var(--ink);font-weight:700;padding:2px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ask-c{margin-top:auto;display:inline-flex;align-items:center;gap:10px;max-width:100%;height:44px;padding:0 14px 0 8px;border-radius:14px;background:#f4f4f6;font-weight:650;font-size:14.5px}
.ask-c>span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-c .fav{flex:none;width:28px;height:28px;color:var(--ink);display:flex;align-items:center;justify-content:center}.ask-c .fav svg{width:24px;height:26px;display:block}
.ask-c b{font-weight:800}
.swap{transition:opacity .35s var(--e),transform .35s var(--e)}
.swap.out{opacity:0;transform:translateY(10px)}

/* 2. the page: a real phone showing a real page; the notes around it open one at a time, the phone follows */
.anat{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,48px)}
.an-ph{min-width:0}
.cns{display:grid;gap:10px;width:100%;max-width:344px}
.cns.l{justify-self:end}.cns.r{justify-self:start}
.cn{--g:var(--ink-rgb);border-radius:26px;cursor:pointer;isolation:isolate;opacity:0;transform:translateY(12px);transition:background-color .5s var(--e),box-shadow .5s var(--e),opacity .7s var(--e),transform .7s var(--e)}
.anat.in .cn{opacity:1;transform:none}
.cn.on{background:var(--w);box-shadow:var(--sh);cursor:default}
.cn-t{all:unset;box-sizing:border-box;display:block;width:100%;padding:16px 20px 8px;font-weight:800;font-size:18px;letter-spacing:-.025em;line-height:1.2;color:var(--ink-3s);cursor:inherit;transition:color .4s var(--e)}
.cn:hover .cn-t,.cn.on .cn-t{color:var(--ink)}
.cn-t:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:22px}
.cn-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e)}
.cn.on .cn-x{grid-template-rows:1fr}
.cn-in{min-height:0;overflow:hidden;padding:0 12px;opacity:0;transition:opacity .3s var(--e)}
.cn.on .cn-in{opacity:1;transition-delay:.18s}
.cn-in>p{margin:0 8px;font-size:15px;color:var(--ink-2);font-weight:550;line-height:1.42;text-wrap:pretty}
.cn-in>.mini,.cn-in>.m5w{margin:22px 0 12px}
/* the little scene at the top of each card */
.mini{position:relative;height:78px;border-radius:18px;background:#f4f4f6;display:flex;align-items:center;justify-content:center;padding:0 14px}
.pop{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;background:var(--ink);color:var(--w);font-size:11.5px;font-weight:750;white-space:nowrap;box-shadow:0 0 0 2px var(--w),0 10px 22px -10px rgba(17,17,17,.5);opacity:0;pointer-events:none}
/* every pop is an ink pill; only the "Checked" one is green (a status) */
.pop svg{width:12px;height:12px}
/* 1 the answer: the first line gets picked up */
.m1 .qt{font-size:13px;font-weight:750;letter-spacing:-.01em;padding:3px 5px;border-radius:6px;background:linear-gradient(var(--mark),var(--mark)) 0 0/0% 100% no-repeat}
.m1 .pop{top:-14px;right:-12px}
.on .m1 .qt{animation:m1-hl 4.2s var(--e) both}
.on .m1 .pop{animation:pop-up 4.2s var(--e) both}
@keyframes m1-hl{0%,8%{background-size:0% 100%}38%,88%{background-size:100% 100%}100%{background-size:0% 100%}}
@keyframes pop-up{0%,40%{opacity:0;transform:translateY(8px) scale(.8)}48%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-10px)}}
/* 2 call or text: a tap, then the call goes out of the card */
.m2{gap:6px}
.m2 span:not(.pop){position:relative;flex:1;height:38px;border-radius:12px;background:var(--w);display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:750;overflow:hidden}
.m2 span:first-child{flex:1.4;background:var(--ink);color:var(--w)}
.m2 span:first-child::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,255,255,.35);opacity:0}
.m2 .pop{top:-14px;right:-12px}
.on .m2 span:first-child{animation:press 4.2s var(--e) both}
.on .m2 span:first-child::after{animation:ripple 4.2s ease-out both}
.on .m2 .pop{animation:pop-up 4.2s var(--e) both}
/* 3 questions: they rise out of the card */
.m3{overflow:visible}
.m3 i{position:absolute;left:50%;top:50%;font-style:normal;height:30px;padding:0 12px;border-radius:999px;background:var(--w);box-shadow:0 8px 18px -10px rgba(17,17,40,.35);font-size:13px;font-weight:700;display:flex;align-items:center;white-space:nowrap;transform:translate(-50%,-50%);opacity:0}
.m3 i:first-child{opacity:1}
/* one question every 1.2s; the next one rises while the last one leaves, so the pane is never empty */
.on .m3 i{animation:rise 3.6s var(--e) infinite backwards}
.on .m3 i:nth-child(1){animation-delay:-.35s}.on .m3 i:nth-child(2){animation-delay:.85s}.on .m3 i:nth-child(3){animation-delay:2.05s}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-10%) scale(.94)}9%,33%{opacity:1;transform:translate(-50%,-50%)}43%,100%{opacity:0;transform:translate(-50%,-130%)}}
/* 4 hours: a change flips on, then it is checked. The switch leads the row, so the pop has the top-right corner to
   itself (same corner as the other cards) and never lands on the switch or the label, even in the short pane */
.m4{justify-content:flex-start;gap:12px}
.m4 .r b{display:block;margin:0;font-size:13px;letter-spacing:-.01em}.m4 .r small{display:block;margin-top:2px;font-size:11.5px;font-weight:650;color:var(--ink-3s)}
/* the switch is the state: ON = closed that day. It flips on once, when the cards draw in (still frame: on) */
.tg{flex:none;position:relative;width:40px;height:24px;border-radius:999px;background:#dcdce2;transition:background .35s var(--e) 1.4s}
.tg::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--w);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .35s var(--e) 1.4s}
.anat.in .tg{background:rgb(var(--g))}
.anat.in .tg::after{transform:translateX(16px)}
.m4 .pop{top:-14px;right:-12px;background:#13844f;color:#fff}
.on .m4 .pop{animation:pop-up 4.2s var(--e) both}
/* 5 machines: the data gets read */
.m5{background:#1b1b1f;overflow:hidden;font:600 11.5px/1.5 ui-monospace,"SF Mono",Menlo,monospace;color:#cfcfd4;justify-content:flex-start}
.m5 b{color:var(--mint-2);font-weight:600}
.m5::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16),rgba(255,255,255,0));opacity:0}
.m5w{position:relative}
.m5w .pop{top:-14px;right:-12px}
.on .m5::after{animation:scan 4.2s ease-in-out both}
.on .m5w .pop{animation:pop-up 4.2s var(--e) both}
@keyframes scan{0%{opacity:0;left:-40%}8%{opacity:1}40%{opacity:1;left:100%}41%,100%{opacity:0;left:100%}}

/* 3. how it works: three plain cards, a small picture on top, one line underneath */
.how{margin-top:clamp(28px,4vw,52px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hw{padding:14px 14px 26px;border-radius:32px;display:flex;flex-direction:column}
.hw-v{height:214px;border-radius:22px;background:#f4f4f6;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px}
.hw h3{margin:22px 12px 0;font-weight:800;font-size:24px;letter-spacing:-.035em;line-height:1.1}
.hw>p{margin:8px 12px 0;font-size:16px;font-weight:560;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.hw-f{display:flex;align-items:center;justify-content:space-between;gap:10px;height:54px;padding:0 8px 0 18px;border-radius:999px;background:var(--w);box-shadow:var(--sh);font-size:16px;font-weight:650;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.hw-f b{color:var(--ink);font-weight:800}
.hw-f i{flex:none;width:38px;height:38px;border-radius:50%;background:var(--grn);color:#fff;display:grid;place-items:center}
.hw-f i svg{width:18px;height:18px}
.hw-ok{margin:0 0 0 18px;font-size:13.5px;font-weight:750;color:var(--mint-ink)}
.hw-r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--w);font-size:14px;font-weight:700;letter-spacing:-.01em}
.hw-r span:first-child{flex:none;color:var(--ink-2);font-weight:600}
.hw-r span:last-child{text-align:right}
.hw-a{padding:12px 14px;border-radius:14px;background:var(--w)}
.hw-a b{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:750;letter-spacing:-.01em}
.hw-a p{margin:3px 0 0;font-size:13.5px;font-weight:560;color:var(--ink-2)}
.hw-a em{flex:none;margin-left:auto;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:#e3f5ec;color:var(--mint-ink);font-style:normal;font-size:11.5px;font-weight:800;white-space:nowrap}
.cur-x{margin-top:22px;font-size:13px;color:rgba(17,17,17,.64);font-weight:600}
@media (max-width:1000px){.how{grid-template-columns:minmax(0,1fr);gap:14px}.hw-v{height:auto;min-height:150px}.hw h3{margin-top:18px;font-size:22px}}

/* 4. one link everywhere: three cards, a live picture on top, the line underneath */
.evs{margin-top:52px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.evc{position:relative;display:flex;flex-direction:column;padding:24px 24px 36px;border-radius:38px;background:var(--w);box-shadow:var(--sh);isolation:isolate;transition:box-shadow .9s var(--e)}
.evc.on{box-shadow:0 0 0 1px var(--line2),var(--sh)}
/* every card has the same stage: a grey pane 24px in from the card's top and sides, the same height in all three */
.evc-v{--st:340px;position:relative;flex:none;height:var(--st);border-radius:24px;background:#f4f4f6;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:22px}
.evc h3{margin:28px 8px 0;font-weight:800;font-size:clamp(28px,2.7vw,40px);letter-spacing:-.048em;line-height:1}
.evc>p{margin:12px 8px 0;font-size:17px;font-weight:550;color:var(--ink-2)}
.pane{width:100%;max-width:320px}
.sk{display:block;height:8px;border-radius:8px;background:#e2e2e8}
.grad{background:var(--mono);color:var(--on-mono);display:flex;align-items:center;justify-content:center;font-weight:800}
/* bio */
.bio-h{display:flex;align-items:center;gap:14px}
.bio-h .grad{flex:none;width:58px;height:58px;border-radius:50%;font-size:19px;box-shadow:0 0 0 3px #f4f4f6,0 0 0 4.5px var(--line2)}
.bio-h b{display:block;font-weight:800;font-size:16px;letter-spacing:-.02em}
.bio-h .sk{margin-top:8px;width:70%}
.bio-l{margin-top:16px;display:grid;gap:7px}
.bl-k{display:block;margin:18px 0 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3s)}
.bln{position:relative;margin-top:8px;height:46px;display:flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;background:var(--w);box-shadow:0 0 0 1px var(--line2),0 10px 24px -14px rgba(17,17,17,.3);font-weight:750;font-size:13px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden}
.bln svg{flex:none}
.bln span{overflow:hidden;text-overflow:ellipsis}
.bln::after{content:"";position:absolute;left:62%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(var(--ink-rgb),.14);opacity:0;transform:scale(.4)}
.tiles{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.tiles i{height:64px;border-radius:10px;background:#e7e7ec}
/* google map */
.evc-v.mapv{padding:0}
.v-map{position:relative;width:100%;height:100%}
.dots{position:absolute;inset:0;background:radial-gradient(circle,#c4c4ce 1.25px,transparent 1.7px) 0 0/12px 12px;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent)}
.v-map svg.riv{position:absolute;inset:0;width:100%;height:100%;-webkit-mask:radial-gradient(closest-side,#000 50%,transparent);mask:radial-gradient(closest-side,#000 50%,transparent)}
.pin{position:absolute;left:54%;top:34%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#13a463;box-shadow:0 0 0 4px var(--w),0 6px 14px rgba(19,132,79,.4)}
.pin::before,.pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(19,164,99,.5);opacity:0}
.gcard{position:absolute;left:50%;bottom:20px;width:min(290px,96%);transform:translateX(-50%);padding:14px 16px 16px;border-radius:20px;background:var(--w);box-shadow:0 18px 40px -18px rgba(17,17,40,.4)}
.gcard b{display:block;font-weight:800;font-size:16px;letter-spacing:-.02em}
.gcard small{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--ink-3s)}
.gcard small em{font-style:normal;color:#13844f}
.gbt{margin-top:12px;display:flex;gap:6px}
.gbt span{height:32px;padding:0 12px;border-radius:999px;background:#f1f1f4;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.gbt span.w{background:var(--ink);color:var(--w)}
/* text */
.v-txt{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.tb{max-width:84%;padding:10px 14px;border-radius:20px;font-size:14.5px;font-weight:580;line-height:1.35}
.tb.in,.tb.old{align-self:flex-start;background:#e5e5ea;border-bottom-left-radius:6px}
/* the earlier message of the same sender: same ink, no tail (it is not the last one in the group) */
.tb.old{border-bottom-left-radius:20px}
.t-day{align-self:center;margin-bottom:4px;font-size:11.5px;font-weight:700;color:var(--ink-3s)}
.tout{display:grid;justify-items:end}
.tout>*{grid-area:1/1}
.typing{align-self:end;display:flex;gap:4px;padding:13px 15px;border-radius:20px;border-bottom-right-radius:6px;background:var(--ink);opacity:0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--on-ink);opacity:.85}
.tb.out{max-width:88%;background:var(--ink);color:var(--on-ink);border-bottom-right-radius:6px;padding:8px}
.tb.out>span{display:block;padding:2px 6px 8px}
.lpv{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--w);color:var(--ink)}
.lpv .grad{flex:none;width:38px;height:38px;border-radius:10px;font-size:14.5px}
.lpv b{display:block;font-size:13px;font-weight:800;letter-spacing:-.015em}
.lpv>div{min-width:0}
.lpv small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* motion, only while the section is on screen */
.live .bln{animation:press 3.6s var(--e) infinite}
.live .bln::after{animation:ripple 3.6s ease-out infinite}
@keyframes press{0%,62%,78%,100%{transform:none}68%{transform:scale(.96)}}
@keyframes ripple{0%,64%{opacity:0;transform:scale(.4)}68%{opacity:1}92%,100%{opacity:0;transform:scale(5)}}
.live .pin::before{animation:ring 2.4s ease-out infinite}
.live .pin::after{animation:ring 2.4s ease-out 1.2s infinite}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.live .gbt span.w{animation:nudge 3.6s var(--e) infinite}
@keyframes nudge{0%,70%,86%,100%{transform:none;box-shadow:none}76%{transform:scale(1.06);box-shadow:0 0 0 5px rgba(17,17,17,.1)}}
.live .tb.in{animation:t-in 7s var(--e) infinite}
.live .typing{animation:t-typ 7s infinite}
.live .tb.out{animation:t-out 7s var(--e) infinite}
.live .typing i{animation:blink 1s infinite}
.live .typing i:nth-child(2){animation-delay:.15s}.live .typing i:nth-child(3){animation-delay:.3s}
@keyframes t-in{0%{opacity:0;transform:translateY(10px)}7%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes t-typ{0%,16%{opacity:0;transform:translateY(8px)}21%,37%{opacity:1;transform:none}40%,100%{opacity:0}}
@keyframes t-out{0%,38%{opacity:0;transform:translateY(10px) scale(.97)}45%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}

/* 5. the two plans, 6. the plain facts: white cards of words (same card, same type as "how it works") */
.pls{margin-top:clamp(28px,4vw,52px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pl{padding:30px 32px 34px;border-radius:32px}
.pl h3,.fx h3{font-weight:800;font-size:24px;letter-spacing:-.035em;line-height:1.1}
.pl-p{margin-top:14px;font-size:16px;font-weight:650;color:var(--ink-2)}
.pl-p b{margin-right:4px;font-weight:800;font-size:clamp(40px,4vw,56px);letter-spacing:-.05em;line-height:1;color:var(--ink)}
.pl>p:last-child,.fx>p{margin-top:14px;font-size:16px;font-weight:560;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.sec-x{margin-top:22px;font-size:15px;font-weight:600;color:var(--ink-2)}
.sec-x a,.fx a{color:var(--ink);font-weight:750;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;white-space:nowrap}
@media (hover:hover){.sec-x a:hover,.fx a:hover{text-decoration-color:var(--ink)}}
.fxs{margin-top:clamp(28px,4vw,52px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fx{padding:28px 28px 30px;border-radius:32px}
.fx>p{margin-top:10px}
@media (max-width:1100px){.fxs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.m-ph,.ev-i,.m-fab{display:none}
.fin-n{margin-top:14px;font-size:15px;font-weight:650;color:var(--ink-2)}

/* claim: the hero's claim form again (same field, same messages) */
.fin{text-align:center}
.fin .h2{margin:0 auto;max-width:14ch}
.fin .claim{margin:44px auto 0;width:min(100%,820px);text-align:left}
.fin .cl-msg{padding-left:0;text-align:center}

/* wide: the answer runs the width of the card, like the question above it */
/* plain wrapping here: with "Their page says:" kept whole, a long answer breaks at the sentence end, never in a place name */
@media (min-width:1000px){.ask-a{max-width:54ch;text-wrap:wrap}
  /* the lead-in is its own line in all three answers, so the block keeps one shape across tabs */
  .ask-a .nw{display:block}.ask-a .nw+br{display:none}}
/* large screens: the lead text steps up to the top of the scale */
@media (min-width:1400px){.lead,.evc>p{font-size:19px}}
@media (max-width:1100px){
  .ask{grid-template-columns:1fr}
  .anat{grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .an-ph{grid-column:1/-1;grid-row:1}
  .cns{max-width:none}
  .cn{background:var(--w);box-shadow:var(--sh)}
  .cn .cn-t{color:var(--ink)}
  .cn .cn-x{grid-template-rows:1fr}
  .cn .cn-in{opacity:1}
  .cn.on{box-shadow:0 0 0 1.5px var(--ink),var(--sh)}
  .evs{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}
/* below 1101px the arrows are gone and the cards sit under the sheet: the same number on a sheet part and on its card
   ties them together even when only one of them is on screen */
@media (max-width:1100px){
}
@media (max-width:760px){
  .ask-c{font-size:13px}
}
/* mid-width 3-column cards: a little less padding so the full bio link fits */
@media (min-width:1101px) and (max-width:1300px){
  .evs{gap:16px}
  .evc{padding:24px 22px 32px}
  .evc-v{padding:18px}
}
@media (min-width:1101px) and (max-width:1200px){.bln{font-size:12.5px;padding:0 12px}}
/* short laptops (1290x680): each section's key content in one screen */
@media (min-width:1101px) and (max-height:760px){
  /* every section: heading 36px under the bar, so heading to last card fits in the 604px left under it */
  .sec{padding-block:36px}
  .h2{font-size:clamp(40px,3.8vw,50px)}
  .anat{margin-top:14px}.an-ph .ph3{height:470px}.cn-t{padding:13px 20px 6px;font-size:17px}.cn-in>p{font-size:14px}.cn-in>.mini,.cn-in>.m5w{margin:20px 0 10px}
  .mini{height:44px}
  .lead{margin-top:16px}
  .evs{margin-top:18px}
  .evc-v{--st:290px}
  .evc-v.mapv .pin{top:30%}
  .evc h3{margin-top:20px}
  .tiles i{height:52px}
}
@media (max-width:760px){
  .sec{padding:64px 20px}
  .chat{padding:20px 10px 10px}
  .seg{margin-top:18px}
  .ask-tab{gap:6px;font-size:14px;height:46px}
  .ask-q{font-size:16px}
  .ask-a{font-size:16px}
  /* the lifts stay inside the 20px gutter: no tinted bands at the screen edges */
  .evs{margin-top:36px;gap:16px}
  .evc{padding:16px 16px 28px;border-radius:32px}
  /* each stage is as tall as what it shows (the map gets a fixed one), so the stacked cards carry no empty pane */
  .evc-v{height:auto;padding:18px}
  /* the pin sits high enough that its rings, at their widest, end above the business card */
  .evc-v.mapv{height:260px}
  .evc-v.mapv .pin{top:22%}
  .bio-l .sk+.sk,.evc .tiles{display:none}
  .v-txt{justify-content:flex-start}
}
/* narrow phones: the quoted line stays on one line inside its pane */
@media (max-width:400px){.m1 .qt{font-size:13px;white-space:nowrap}}
/* dark mode (ds/theme.ts): cards #1f1f1f, inner panes #262626, chips on panes #333; ink tiles and pills flip to light
   with dark letters; text on green stays white */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ink-3s:#949494;--mint-ink:#3ecf8e;--mint-3:#3ecf8e;--mark:rgba(255,255,255,.16);--sh:0 0 0 1px rgba(255,255,255,.1);
  .lead{color:var(--lead)}
  .ask-x,.cur-x{color:rgba(237,237,237,.62)}
  .seg,.ask-c,.mini,.gwk,.ga,.evc-v{background:var(--raised)}
  .ask-tab{color:rgba(237,237,237,.6)}
  .ask-tab[aria-selected="true"]{background:var(--hover);box-shadow:0 0 0 1px var(--line)}
  .ask-l i{box-shadow:none}
  .ask-a{color:#d4d4d4}
  .ask-a mark{color:#fff}
  .pop{color:var(--on-ink)}
  .m4 .pop{color:#fff}
  .anat.in .tg{background:var(--ink)}
  .anat.in .tg::after{background:var(--on-ink)}
  .m5{background:#121212;box-shadow:inset 0 0 0 1px var(--line)}
  .m2 span:not(.pop),.m3 i{background:var(--chip)}
  .m2 span:first-child{background:var(--ink);color:var(--on-ink)}
  .tg{background:#444}
  .tg::after{background:#ededed}
  .sk{background:#3a3a3a}
  .hw-v{background:var(--raised)}
  .hw-f,.hw-r,.hw-a{background:rgba(255,255,255,.07);box-shadow:none}
  .hw-a em{background:var(--grn-s);color:var(--grn)}
  .bio-h .grad{box-shadow:0 0 0 3px var(--raised),0 0 0 4.5px var(--line2)}
  .bln{background:var(--chip);color:var(--ink);box-shadow:0 0 0 1px var(--line2)}
  .tiles i{background:#333}
  .dots{background:radial-gradient(circle,#4a4a52 1.25px,transparent 1.7px) 0 0/12px 12px}
  .pin{box-shadow:0 0 0 4px var(--raised),0 6px 14px rgba(0,0,0,.5)}
  .gcard{box-shadow:0 0 0 1px var(--line2),0 18px 40px -18px rgba(0,0,0,.6)}
  .gcard small em{color:var(--grn)}
  .gbt span{background:var(--hover)}
  .gbt span.w{background:var(--ink);color:var(--on-ink)}
  .tb.in,.tb.old{background:#333;color:var(--ink)}
  .pop{box-shadow:0 0 0 2px var(--w),0 10px 22px -10px rgba(0,0,0,.6)}}}:root[data-theme=dark]{--ink-3s:#949494;--mint-ink:#3ecf8e;--mint-3:#3ecf8e;--mark:rgba(255,255,255,.16);--sh:0 0 0 1px rgba(255,255,255,.1);
  .lead{color:var(--lead)}
  .ask-x,.cur-x{color:rgba(237,237,237,.62)}
  .seg,.ask-c,.mini,.gwk,.ga,.evc-v{background:var(--raised)}
  .ask-tab{color:rgba(237,237,237,.6)}
  .ask-tab[aria-selected="true"]{background:var(--hover);box-shadow:0 0 0 1px var(--line)}
  .ask-l i{box-shadow:none}
  .ask-a{color:#d4d4d4}
  .ask-a mark{color:#fff}
  .pop{color:var(--on-ink)}
  .m4 .pop{color:#fff}
  .anat.in .tg{background:var(--ink)}
  .anat.in .tg::after{background:var(--on-ink)}
  .m5{background:#121212;box-shadow:inset 0 0 0 1px var(--line)}
  .m2 span:not(.pop),.m3 i{background:var(--chip)}
  .m2 span:first-child{background:var(--ink);color:var(--on-ink)}
  .tg{background:#444}
  .tg::after{background:#ededed}
  .sk{background:#3a3a3a}
  .hw-v{background:var(--raised)}
  .hw-f,.hw-r,.hw-a{background:rgba(255,255,255,.07);box-shadow:none}
  .hw-a em{background:var(--grn-s);color:var(--grn)}
  .bio-h .grad{box-shadow:0 0 0 3px var(--raised),0 0 0 4.5px var(--line2)}
  .bln{background:var(--chip);color:var(--ink);box-shadow:0 0 0 1px var(--line2)}
  .tiles i{background:#333}
  .dots{background:radial-gradient(circle,#4a4a52 1.25px,transparent 1.7px) 0 0/12px 12px}
  .pin{box-shadow:0 0 0 4px var(--raised),0 6px 14px rgba(0,0,0,.5)}
  .gcard{box-shadow:0 0 0 1px var(--line2),0 18px 40px -18px rgba(0,0,0,.6)}
  .gcard small em{color:var(--grn)}
  .gbt span{background:var(--hover)}
  .gbt span.w{background:var(--ink);color:var(--on-ink)}
  .tb.in,.tb.old{background:#333;color:var(--ink)}
  .pop{box-shadow:0 0 0 2px var(--w),0 10px 22px -10px rgba(0,0,0,.6)}}

/* the claim button that follows the reader between the hero and the last field (phones only) */
.m-fab{text-decoration:none;position:fixed;z-index:40;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));display:none;align-items:center;gap:8px;height:52px;padding:0 20px 0 24px;border:0;border-radius:999px;
  background:var(--ink);color:var(--on-ink);font:750 16px/1 var(--f);letter-spacing:-.01em;box-shadow:0 14px 34px -12px rgba(0,0,0,.5);
  opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .25s ease-out,transform .35s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.m-fab.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.m-fab:active{transform:translate(-50%,0) scale(.96)}
/* a picture of the real page on a phone: one still image, the dark one only in the dark theme */
.m-ph img{display:block;width:100%;height:auto;border-radius:36px;background:var(--fill);box-shadow:0 0 0 7px #0b0b0c,0 0 0 9px #8d8f94,0 28px 50px -28px rgba(17,17,17,.5)}
.m-ph .dk2{display:none}

@media (max-width:760px){
  .ds-veil{display:none}
  .m-fab{display:inline-flex}
  /* the sky of the picture runs up behind the status bar while the hero is on screen */
  html:not(.m-past){background:var(--m-sky)}
  :root{--m-sky:#fbfbf8;--m-sky-rgb:251,251,248}
  .mb{--mx:20px;color:var(--ink)}

  /* ---------- claim fields: one row, a round button with the arrow ---------- */
  .mb .claim{flex-direction:row;align-items:center;width:100%;height:60px;margin:0;padding:0 6px 0 18px;border-radius:999px;gap:6px;background:var(--fld);box-shadow:var(--fld-sh)}
  .mb .claim:focus-within{box-shadow:var(--fld-sh-f)}
  .mb .claim.err,.mb .claim.err:focus-within{box-shadow:var(--fld-sh-e)}
  .mb .cl-f{flex:1;height:100%;padding:0;font-size:19px}
  .mb .cl-pre{letter-spacing:-.04em}
  .mb .cl-f input{font-size:max(16px,1em)}
  .mb .cl-b{flex:none;width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;font-size:0;gap:0}
  .mb .cl-b svg{width:21px;height:21px}
  .mb .cl-msg{margin:0;min-height:0;font-size:14.5px;font-weight:650;text-align:center}

  /* ---------- hero: the city is a picture. Type and the field sit on the sky, the answer on the grass ---------- */
  .mb .hero{display:flex;flex-direction:column;justify-content:space-between;height:100svh;min-height:600px;max-height:920px;padding:calc(var(--nav-h) + 22px) 16px 22px;
    background:var(--m-sky) url(/n/hero-m-light.webp) 50% 50%/cover no-repeat}
  .mb .map,.mb .hveil{display:none}
  /* the sky carries on down behind the words, so no roof line runs through them */
  .mb .hero::after{inset:0 0 auto;height:450px;z-index:0;background:linear-gradient(rgb(var(--m-sky-rgb)) 0,rgba(var(--m-sky-rgb),.95) 74%,rgba(var(--m-sky-rgb),0))}
  .mb .hero::before{height:90px;z-index:0;background:linear-gradient(rgba(var(--paper-rgb),0),var(--paper))}
  .mb .hc{position:relative;z-index:1;display:block;height:auto;padding:0;text-align:center}
  .mb .h1{font:800 clamp(36px,10.6vw,46px)/1 var(--d);letter-spacing:-.055em;margin:0 0 18px}
  .mb .h-slot{justify-items:center;margin-top:12px}
  .mb .note{max-width:36ch;font:600 15px/1.4 var(--f);letter-spacing:-.01em;color:var(--lead);text-wrap:pretty}
  .mb .note-f{margin-top:6px;font-size:13px;font-weight:650;color:var(--mute)}
  .mb .hero .cl-msg:not(:empty){padding:6px 12px;border-radius:999px;background:rgba(var(--paper-rgb),.92)}
  /* the answer: a still card (the laptop page plays it as a conversation) */
  .mb .hchat{position:relative;z-index:1;left:auto;bottom:auto;width:100%;transform:none;gap:8px}
  .mb .hq{opacity:1;transform:none;max-width:80%;padding:11px 16px;border-radius:20px 20px 6px 20px;background:var(--ink);color:var(--on-ink);font:650 15px/1.3 var(--f);letter-spacing:-.01em;box-shadow:none}
  .mb .ha{opacity:1;transform:none;padding:14px 16px 15px;border-radius:22px;background:rgba(var(--paper-rgb),.86);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 0 0 1px var(--line),0 18px 40px -22px rgba(17,17,17,.4)}
  .mb .ha-l{font:750 14px/1 var(--f)}
  .mb .ha-d,.mb .ha-card{display:none}
  .mb .ha-g{grid-template-rows:1fr}
  .mb .ha-t{margin-top:9px;font:560 15.5px/1.4 var(--f);letter-spacing:-.01em}
  .mb .ha-t .w{opacity:1}
  .mb .ha-s{opacity:1;transform:none;margin-top:11px;font:650 13px/1 var(--f);color:var(--lead)}
  @media (max-height:640px){.mb .h1{margin-bottom:14px}.mb .ha-s{display:none}}

  /* ---------- sections: one column, generous type, cards with a hairline ---------- */
  .mb .sec{padding:56px var(--mx) 0}
  .mb .h2{font:800 36px/.98 var(--d);letter-spacing:-.052em}
  .mb .h2 br{display:none}
  .mb .h2 .mute{display:block;margin-top:.06em;opacity:.42;text-wrap:balance}
  .mb .lead{margin-top:16px;max-width:none;font:560 16.5px/1.5 var(--f);color:var(--lead);text-wrap:pretty}
  .mb .card{border-radius:26px;background:var(--card);box-shadow:0 0 0 1px var(--line)}

  /* the answer: the assistants on top, then the question and what it says */
  .mb .ask{display:block}
  .mb .chat{margin-top:22px;padding:8px 8px 20px}
  .mb .seg{order:-1;margin:0;gap:4px;padding:4px;background:var(--fill)}
  .mb .ask-tab{gap:7px;height:44px;font:700 14px/1 var(--f);color:var(--mute)}
  .mb .ask-tab .lg{width:15px;height:15px;filter:none;opacity:.7;transform:none}
  .mb .ask-tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(17,17,17,.14)}
  .mb .ask-tab[aria-selected="true"] .lg{opacity:1}
  .mb .chat-b{padding:18px 12px 0}
  .mb .ask-q{align-self:auto;margin:0 0 16px auto;width:fit-content;max-width:88%;padding:12px 16px;border-radius:20px 20px 6px 20px;color:var(--on-ink);font:650 15.5px/1.3 var(--f);letter-spacing:-.01em}
  .mb .ask-r{margin-top:0}
  .mb .ask-l{font:750 14px/1 var(--f)}
  .mb .ask-l i{width:26px;height:26px;background:none;color:inherit;box-shadow:0 0 0 1px var(--line)}
  .mb .ask-l i svg{width:15px;height:15px}
  .mb .ask-a{margin:10px 0 0;max-width:none;font:560 16px/1.45 var(--f);letter-spacing:-.01em;color:var(--ink);text-wrap:wrap}
  .mb .ask-a mark{background:var(--fill);color:inherit;padding:2px 6px;border-radius:7px}
  .mb .ask-c{margin-top:16px;height:auto;min-height:44px;padding:0 14px 0 10px;border-radius:14px;background:var(--fill);font:650 13px/1 var(--f);color:var(--lead)}
  .mb .ask-c b{color:var(--ink)}
  .mb .ask-c .fav{width:20px;height:20px}.mb .ask-c .fav svg{width:17px;height:19px}

  /* the page: the picture, then what is on it as a checked list (the laptop page's notes, all open) */
  .mb .anat{display:flex;flex-direction:column;gap:0;margin-top:0}
  .mb .an-ph{order:-1}
  .mb .ph3{display:none}
  .mb .m-ph{display:block;width:min(268px,74%);margin:8px auto 0;padding:9px}
  .mb .cns{display:grid;gap:16px;max-width:none}
  .mb .cns.l{margin-top:34px}
  .mb .cns.r{margin-top:16px}
  .mb .cn,.mb .cn.on{position:relative;padding-left:36px;border-radius:0;background:none;box-shadow:none;opacity:1;transform:none;cursor:default}
  .mb .cn::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--fill)}
  .mb .cn::after{content:"";position:absolute;left:5.5px;top:6.5px;width:13px;height:13px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat}
  .mb .cn-t{padding:0;font:800 17px/1.2 var(--d);letter-spacing:-.03em;color:var(--ink)}
  .mb .cn-x{display:block}
  .mb .cn-in{padding:0;overflow:visible;opacity:1}
  .mb .cn-in>p{margin:4px 0 0;font:560 15px/1.42 var(--f);color:var(--lead)}
  .mb .cn-in>.mini,.mb .cn-in>.m5w{display:none}

  /* how it works, one link everywhere, the plans, the facts: each a single card of rows */
  .mb :is(.how,.evs,.pls,.fxs){display:block;max-width:none;margin:22px 0 0;padding:4px 18px;border-radius:26px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
  .mb :is(.hw,.evc,.pl,.fx),.mb .evc.on{padding:18px 0;border-radius:0;background:none;box-shadow:none}
  .mb :is(.hw,.evc,.pl,.fx)+:is(.hw,.evc,.pl,.fx){box-shadow:0 -1px 0 var(--line)}
  .mb :is(.hw,.evc,.pl,.fx) h3{margin:0;font:800 17px/1.2 var(--d);letter-spacing:-.03em}
  .mb :is(.hw,.evc,.pl,.fx)>p{margin:4px 0 0;font:560 15px/1.42 var(--f);color:var(--lead)}
  /* how: the first and the last step keep a small chip of their picture */
  .mb .hw{display:flex;flex-direction:column}
  .mb .hw-v{order:2;display:block;height:auto;min-height:0;margin-top:12px;padding:0;border-radius:0;background:none}
  .mb .hw:nth-child(2) .hw-v,.mb .hw-ok,.mb .hw-a p,.mb .how .hw-a+.hw-a{display:none}
  .mb .how :is(.hw-f,.hw-a){display:inline-flex;align-items:center;gap:9px;max-width:100%;height:auto;min-height:38px;padding:0 12px;border-radius:12px;background:var(--fill);box-shadow:none;font:650 13.5px/1.2 var(--f);color:var(--lead)}
  .mb .hw-f b{color:var(--ink)}
  .mb .hw-f i{width:20px;height:20px}
  .mb .hw-f i svg{width:11px;height:11px}
  .mb .hw-a b{gap:9px;font:inherit;letter-spacing:0}
  .mb .how .hw-a em{order:-1;margin:0;height:auto;padding:0;background:none;color:var(--grn);font-size:12px;font-weight:750}
  /* everywhere: an icon, then the two lines */
  .mb .evc{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px}
  .mb .evc-v{display:none}
  .mb .ev-i{display:grid;place-items:center;grid-row:1/3;align-self:center;width:42px;height:42px;border-radius:13px;background:var(--fill)}
  .mb .evc h3{align-self:end}
  .mb .evc>p{grid-column:2;align-self:start}
  /* plans */
  .mb .pl h3{font-size:20px}
  .mb .pl-p{margin-top:8px;font:650 15px/1.2 var(--f);color:var(--lead)}
  .mb .pl-p b{font-size:34px}
  .mb .pl>p:last-child{margin-top:10px}
  .mb .sec-x{margin-top:14px;font-size:14px;line-height:1.5;color:var(--mute)}

  /* the last field */
  .mb .fin .sec{padding-top:72px;padding-bottom:64px}
  .mb .fin .claim{margin:26px 0 0;width:100%}
  .mb .fin .cl-msg{margin-top:10px}
  .mb .fin .cl-msg:empty{display:none}
  .mb .fin-n{margin-top:12px;font:650 14px/1.4 var(--f);color:var(--mute)}

  /* arriving: one short fade and rise per block, once (only when the script is running) */
  .mb [data-r]{transform:translateY(14px);transition:opacity .5s ease-out,transform .6s cubic-bezier(.2,.8,.2,1)}
  .mb [data-r].in,.mb:not(.js) [data-r]{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.mb [data-r]{opacity:1;transform:none;transition:none}.m-fab{transition:none}}
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.m-ph .lt{display:none}
.m-ph .dk2{display:block}
@media (max-width:760px){
  --m-sky:#073663;--m-sky-rgb:7,54,99;
  .mb .hero{background-image:url(/n/hero-m-dark.webp)}
  .mb .ha{box-shadow:0 0 0 1px var(--line),0 18px 40px -22px rgba(0,0,0,.8)}
  .mb .ask-tab[aria-selected="true"]{box-shadow:0 0 0 1px var(--line)}
}}}:root[data-theme=dark]{.m-ph .lt{display:none}
.m-ph .dk2{display:block}
@media (max-width:760px){
  --m-sky:#073663;--m-sky-rgb:7,54,99;
  .mb .hero{background-image:url(/n/hero-m-dark.webp)}
  .mb .ha{box-shadow:0 0 0 1px var(--line),0 18px 40px -22px rgba(0,0,0,.8)}
  .mb .ask-tab[aria-selected="true"]{box-shadow:0 0 0 1px var(--line)}
}}