: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)}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--paper);scroll-padding-top:96px}
body{margin:0;min-height:100svh;background:var(--paper);color:var(--ink);
  font:500 16px/1.55 var(--f);letter-spacing:-.006em;font-kerning:normal;font-feature-settings:"kern";text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;overflow-x:clip}
a{color:inherit}
img,svg,video,canvas{display:block}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sig-t)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.num{font-variant-numeric:tabular-nums lining-nums}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}
.wrap-wide{width:min(var(--wrap-wide),calc(100% - 40px));margin-inline:auto}
.ds-beat{display:flex;flex-direction:column;justify-content:center;padding-block:var(--sec)}
@media (min-width:901px) and (min-height:600px){.ds-beat{min-height:min(100svh,880px)}}
.ds-top{padding-top:var(--top)}
.ds-sec{padding-block:var(--sec)}
/* stacked sections share one gap, not two; the last one before the footer hands the gap to it */
:where(.ds-sec) + :where(.ds-sec){padding-top:0}
.ds-sec + .pg-band{margin-top:0}
main> .ds-sec:last-child{padding-bottom:0}
.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;text-decoration:none}
.ds-skip:focus{top:12px}
.ds-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes ds-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ds-live{70%{box-shadow:0 0 0 8px rgba(19,132,79,0)}100%{box-shadow:0 0 0 0 rgba(19,132,79,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media (max-width:900px){html{scroll-padding-top:84px}.wrap,.wrap-wide{width:calc(100% - 32px)}}
@media (min-width:901px){html{scrollbar-gutter:stable}}

.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)}}

/* ---- reveals: state lives in attributes (data-rv-in / data-rv-done), never classes ---- */
.rv-w{display:inline-block}
.mo [data-rv]:not([data-rv-in]),.mo [data-rv-stagger]:not([data-rv-in])>*{opacity:0;transform:translate3d(0,var(--rv-y),0)}
@media (min-width:901px){.mo [data-rv-desk]:not([data-rv-in]){opacity:0;transform:translate3d(0,var(--rv-y),0)}}
[data-rv],[data-rv-desk]{--rv-dd:var(--rv-d,0s)}
/* stagger: --stg per child, the whole run capped at 300ms so a list never trails behind the reader */
[data-rv-stagger]>*{--rv-dd:calc(min(var(--rv-i,0)*var(--stg),300ms) + var(--rv-d,0s))}
[data-rv-stagger]>:nth-child(2){--rv-i:1}[data-rv-stagger]>:nth-child(3){--rv-i:2}[data-rv-stagger]>:nth-child(4){--rv-i:3}
[data-rv-stagger]>:nth-child(5){--rv-i:4}[data-rv-stagger]>:nth-child(6){--rv-i:5}[data-rv-stagger]>:nth-child(n+7){--rv-i:6}
:is([data-rv],[data-rv-desk])[data-rv-in]:not([data-rv-done]),[data-rv-stagger][data-rv-in]:not([data-rv-done])>*{
  transition:opacity .9s var(--e-out) var(--rv-dd),transform var(--t-enter) var(--e-out) var(--rv-dd)}
.mo [data-rv-split]:not([data-rv-ready]){visibility:hidden}
.mo [data-rv-split]:not([data-rv-in]) .rv-w{opacity:0;transform:translate3d(0,.55em,0)}
[data-rv-split][data-rv-in]:not([data-rv-done]) .rv-w{transition:opacity .8s var(--e-out) calc(var(--l,0)*90ms + var(--rv-d,0s)),transform 1.05s var(--e-out) calc(var(--l,0)*90ms + var(--rv-d,0s))}

/* ---- keyboard (html.kb is set by core.ts on coarse pointers while a text field has focus) ---- */
html.kb .ds-nav{transform:translate3d(0,calc(-100% - 24px),0)}
.dock{position:fixed;z-index:40;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--dock-bg);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 -1px 0 var(--line);
  transform:translate3d(0,calc(-1 * var(--kb,0px)),0);transition:transform .25s var(--e-out)}
html.kb .dock{padding-bottom:10px}
.dock .btn{width:100%;height:52px;border-radius:16px;font-size:16.5px}
.has-dock{padding-bottom:calc(76px + env(safe-area-inset-bottom) + 24px);scroll-padding-bottom:calc(76px + 24px)}
:root{--dock-bg:rgba(245,245,242,.86)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--dock-bg:rgba(12,13,15,.86);}}:root[data-theme=dark]{--dock-bg:rgba(12,13,15,.86);}
@media (min-width:901px){
  .dock{position:static;transform:none;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .dock .btn{width:auto}
  .has-dock{padding-bottom:0}
}
.kb-hide{transition:opacity .25s var(--e-std),transform .25s var(--e-std)}
html.kb .kb-hide{opacity:0;transform:translateY(8px);pointer-events:none}
.kb-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--e-std),opacity .25s var(--e-std)}
.kb-collapse>*{overflow:hidden;min-height:0}
@media (max-width:900px){html.kb .kb-collapse{grid-template-rows:0fr;opacity:0}}

/* ---- Lenis (desktop smooth wheel, src/motion/client.ts) ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

@view-transition{navigation:auto}
.ds-nav{view-transition-name:nav}
::view-transition-old(root){animation:var(--t-exit) var(--e-in) both vt-out}
::view-transition-new(root){animation:var(--t-page) var(--e-out) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}