/* site.css — AccessCore marketing-site surface adapter on top of tokens.css (Instrument tokens v2.2.0).
   Rules honoured: zero new hex outside tokens.css; breakpoints
   390/768/1440 (mobile-first, min-width); 44px touch targets; focus ring = --focus-ring; motion is
   feedback only and loses nothing under prefers-reduced-motion; at most one T5 signature object per page. */

/* Exact-weight copies of the same accepted hero faces. Their tiny normal-path downloads win face matching;
   the committed inline 100-900/italic faces remain the no-network fallback and first-paint provenance fence. */
@font-face{font-family:'Inter Hero';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hero-inter-700.woff') format('woff')}
@font-face{font-family:'Instrument Serif Hero';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/hero-instrument-serif-italic-400.woff') format('woff')}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:var(--lh-base);font-feature-settings:"tnum" 1,"cv11" 1}
body.home{--mono:Inter,'Inter Fallback','Inter Fallback Android',monospace}
body.auth{background:var(--surface-2)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--brand-deep)}
h1,h2,h3,h4{margin:0 0 var(--s-3);line-height:var(--lh-tight);letter-spacing:var(--num-track);font-weight:var(--fw-bold)}
h1{font-size:var(--t-display-2)}
h2{font-size:var(--t-display)}
h3{font-size:var(--t-h1)}
h4{font-size:var(--t-h2)}
p{margin:0 0 var(--s-4)}
.mono{font-family:var(--mono)}
.lede{font-size:var(--t-h2);color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-2)}
.small{font-size:var(--t-sm)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.aux-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* honeypot field: off-screen, never a target */

/* ---------- focus (contract  ---------- */
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--r-3)}
.on-dark :focus-visible,.on-dark:focus-visible,.site-footer :focus-visible{outline:var(--focus-on-dark)}
/* .skip-link is defined by the shared public-accessibility.css (the accepted four-surface entry point); this only lifts it to the 44px target */
.skip-link{padding-block:0;min-height:var(--touch-target-console);display:inline-flex;align-items:center;z-index:var(--z-toast)}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2*var(--s-4),1180px);margin-inline:auto}
@media (min-width:768px){.wrap{width:min(100% - 2*var(--s-8),1180px)}}
.section{padding-block:var(--s-12)}
@media (min-width:768px){.section{padding-block:var(--s-16)}}
.section-head{max-width:70ch;margin-bottom:var(--s-8)}
html{scroll-padding-top:calc(var(--topbar-h) + var(--s-4))}
.kicker{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);font-weight:var(--fw-semi);color:var(--brand);margin-bottom:var(--s-3)}
.kicker::before{content:"";width:18px;height:2px;background:var(--brand);border-radius:2px}
.kicker .sn{font-family:var(--mono);font-weight:var(--fw-semi);font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-2)}
.on-dark .kicker,.band-dark .kicker{color:var(--brand-rose-on-dark)}.on-dark .kicker::before,.band-dark .kicker::before{background:var(--brand-rose-on-dark)}
.on-dark .kicker .sn,.band-dark .kicker .sn{color:var(--band-ink-2)}
.grid{display:grid;gap:var(--s-4)}
/* text zoom resilience: long words may break rather than force horizontal scroll (only bites at large text sizes) */
main,.site-footer{overflow-wrap:anywhere}
[hidden]{display:none!important}
.grid > *{min-width:0}
@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1440px){.grid-3{gap:var(--s-6)}}

/* ---------- buttons (one primary per screen) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--touch-target-console);padding:0 var(--s-5);border-radius:var(--btn-radius,var(--r-2));border:1px solid transparent;font:var(--fw-semi) var(--t-body)/1 var(--font);text-decoration:none;cursor:pointer;transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);white-space:normal;text-align:center;line-height:1.25;padding-block:var(--s-2)}
.btn:hover{transform:var(--lift)}
.btn:active{transform:none}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{background:var(--brand-deep);color:var(--brand-ink)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--input-line);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent}
.btn-ghost:hover{background:var(--brand-soft);color:var(--brand-deep)}
.on-dark .btn-secondary{background:transparent;color:var(--side-ink);border-color:var(--on-dark-line-strong)}
.on-dark .btn-secondary:hover{background:var(--on-dark-wash-07);color:var(--side-ink)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn .spin{display:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin var(--dur-draw) linear infinite}
.btn.is-busy .spin{display:inline-block}
.btn.is-busy .label-idle{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}.btn .spin{animation:none;border-right-color:currentColor;opacity:.6}}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);min-height:var(--topbar-h)}
.brand-link{display:inline-flex;align-items:center;min-height:var(--touch-target-console);text-decoration:none;color:inherit}
.brand-link img{height:28px;width:auto}
.nav-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--touch-target-console);height:var(--touch-target-console);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);cursor:pointer}
.nav-toggle svg{width:20px;height:20px}
.site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--e3);padding:var(--s-3) var(--s-4) var(--s-4)}
.site-nav.is-open{display:block}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}
.site-nav a{display:flex;align-items:center;min-height:var(--touch-target-console);padding:0 var(--s-3);border-radius:var(--r-3);color:var(--ink);text-decoration:none;font-weight:var(--fw-medium)}
.site-nav a:hover{background:var(--brand-soft);color:var(--brand-deep)}
.site-nav a[aria-current="page"]{color:var(--brand);font-weight:var(--fw-semi);box-shadow:inset 3px 0 0 var(--brand)}
.nav-cta{display:flex;gap:var(--s-2);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.nav-cta .btn{flex:1}
.site-nav .nav-cta .btn-primary{color:var(--brand-ink);background:var(--brand)}
.site-nav .nav-cta .btn-primary:hover{background:var(--brand-deep);color:var(--brand-ink)}
.site-nav .nav-cta .btn-secondary{color:var(--ink);background:var(--surface)}
@media (min-width:1440px){
  .nav-toggle{display:none}
  .site-nav{display:flex;position:static;background:transparent;border:0;box-shadow:none;padding:0;margin-left:auto;align-items:center;gap:var(--s-4)}
  .site-nav ul{flex-direction:row;flex-wrap:wrap;gap:var(--s-1)}
  .site-nav{flex-wrap:wrap;min-width:0}
  .site-nav a{min-height:var(--touch-target-console)}
  .site-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand)}
  .nav-cta{margin:0;padding:0;border:0}
  .nav-cta .btn{flex:none}
}

/* ---------- hero (the page's single T5 object) ---------- */
.hero{background:var(--ink-band);color:var(--band-ink);position:relative;overflow:hidden}
.hero .wrap{position:relative;display:grid;gap:var(--s-8);padding-block:var(--s-12)}
.hero h1{font-size:var(--t-display-2);color:var(--band-ink);max-width:16ch}
.hero .lede{color:var(--band-ink-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2)}
.hero-facts{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-6);font-size:var(--t-sm);color:var(--band-ink-2)}
.hero-facts span::before{content:"✓";margin-right:6px;color:var(--brand-rose-on-dark)}
@media (min-width:768px){.hero h1{font-size:var(--t-display-3)}.hero .wrap{padding-block:var(--s-16)}}
@media (min-width:1440px){.hero h1{font-size:var(--t-display-xl,3.5rem)}}

/* proof block: "verified on the wire" is claim + evidence, never a decorative dashboard (Annex C) */
.proof{background:var(--side);border:1px solid var(--side-line);border-radius:var(--r);padding:var(--s-5);color:var(--side-ink);box-shadow:var(--e4)}
.proof-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);font-size:var(--t-sm);font-weight:var(--fw-semi);color:var(--side-ink-2)}
.proof-head b{color:var(--brand-rose-on-dark);font-weight:var(--fw-semi);letter-spacing:0;text-transform:none;font-family:var(--mono);font-size:var(--t-xs)}
.proof ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.proof li{display:grid;grid-template-columns:22px 1fr;gap:var(--s-2);align-items:start;padding:var(--s-2) 0;border-top:1px solid var(--side-line);font-size:var(--t-sm)}
.proof li:first-child{border-top:0}
.proof .st{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:var(--t-xs);font-weight:var(--fw-bold)}
.proof .st::before{content:none}
.proof .ev{display:block;font-family:var(--mono);font-size:var(--t-2xs);color:var(--side-ink-2);margin-top:2px}
.proof-foot{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--side-ink-2)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-6);box-shadow:var(--e1)}
.card h3{font-size:var(--t-h2)}
.card .icon,.tile .icon{width:40px;height:40px;border-radius:var(--r-2);background:var(--brand-soft);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--s-4)}
.card .icon svg,.tile .icon svg{width:20px;height:20px}
.card ul{margin:0;padding-left:1.1em;color:var(--ink-2)}
.card li{margin-bottom:var(--s-2)}
.card li b{color:var(--ink);font-weight:var(--fw-semi)}
.feature-shot{border:1px solid var(--line-2);border-radius:var(--r-2);overflow:hidden;background:var(--surface-2);margin:var(--s-4) 0 0}.feature-shot .figcap{padding:var(--s-2) var(--s-3) var(--s-3);margin:0}
.feature-shot img{width:100%}
.figcap{font-size:var(--t-xs);color:var(--ink-2);margin-top:var(--s-2)}
.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-dark{background:var(--ink-band);color:var(--band-ink)}
.band-dark h2,.band-dark h3{color:var(--band-ink)}
.band-dark .lede,.band-dark p{color:var(--band-ink-2)}
.stat{display:grid;gap:2px;min-width:0}
.stat b{font-size:var(--t-display);font-weight:var(--fw-black);letter-spacing:var(--num-track);line-height:1}
.stat span{font-size:var(--t-sm);color:var(--ink-2)}
.band-dark .stat span{color:var(--band-ink-2)}

/* ---------- status / semantic states (tokens.json semantic-states) ---------- */
.state{display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-1) var(--s-2);border-radius:999px;font-size:var(--t-xs);font-weight:var(--fw-semi);border:1px solid transparent}
.state::before{font-weight:var(--fw-bold)}
.state-pending{background:var(--blue-soft);color:var(--blue-ink)}.state-pending::before{content:"◔"}
.state-unknown{background:var(--gray-soft);color:var(--ink-2);border:1px dashed var(--input-line)}.state-unknown::before{content:"?"}
.state-cannot-tell{background:var(--gray-soft);color:var(--ink-2);border:1px dashed var(--input-line)}.state-cannot-tell::before{content:"⌀"}
.state-refused{background:var(--amber-soft);color:var(--amber-ink);border-color:var(--amber-line)}.state-refused::before{content:"⛔"}
.state-failed{background:var(--red-soft);color:var(--red-ink)}.state-failed::before{content:"✕"}
.state-stale{background:var(--amber-soft);color:var(--amber-ink);border-color:var(--amber-line)}.state-stale::before{content:"◑"}
.state-recovered{background:var(--green-soft);color:var(--green-ink);border-color:var(--green-line)}.state-recovered::before{content:"↻"}
.state-successful{background:var(--green-soft);color:var(--green-ink);border-color:var(--green-line)}.state-successful::before{content:"✓"}

/* alerts / notices */
.notice{display:grid;grid-template-columns:24px 1fr;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);font-size:var(--t-sm);margin-bottom:var(--s-4)}
.notice .glyph{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-sm);font-weight:var(--fw-bold)}
.notice-error{border-color:var(--red-ink);background:var(--red-soft)}.notice-error .glyph{background:var(--red-ink);color:var(--surface)}
.notice-success{border-color:var(--green-line);background:var(--green-soft)}.notice-success .glyph{background:var(--green-ink);color:var(--surface)}
.notice-info{border-color:var(--blue-ink);background:var(--blue-soft)}.notice-info .glyph{background:var(--blue-ink);color:var(--surface)}
.notice-warn{border-color:var(--amber-line);background:var(--amber-soft)}.notice-warn .glyph{background:var(--amber-ink);color:var(--surface)}
.notice p{margin:0}
.notice a{color:inherit;font-weight:var(--fw-semi)}

/* ---------- forms (contract 04: password-manager-friendly, 16px inputs, labels always) ---------- */
.field{display:grid;gap:6px;margin-bottom:var(--s-4)}
.field label{font-size:var(--t-sm);font-weight:var(--fw-semi);color:var(--ink)}
.field .hint{font-size:var(--t-xs);color:var(--ink-2)}
.input,.select,.textarea{width:100%;min-height:var(--touch-target-console);padding:var(--s-2) var(--s-3);border:1px solid var(--input-line);border-radius:var(--r-3);background:var(--surface);color:var(--ink);font:400 var(--input-font-size,16px)/1.3 var(--font);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.textarea{min-height:120px;resize:vertical}
.input::placeholder{color:var(--ink-3)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-color:var(--brand)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--red-ink);background:var(--red-soft)}
.field-error{display:none;font-size:var(--t-xs);color:var(--red-ink);font-weight:var(--fw-semi)}
.field.is-invalid .field-error{display:block}
.input-group{position:relative}
.input-group .input{padding-right:88px}
.toggle-pw{position:absolute;right:4px;top:4px;bottom:4px;min-height:36px;min-width:var(--touch-target-console);padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-3);background:var(--surface);color:var(--ink-2);font:var(--fw-semi) var(--t-xs)/1 var(--font);cursor:pointer}
.check{display:flex;align-items:flex-start;gap:var(--s-3);font-size:var(--t-sm);color:var(--ink-2);min-height:var(--touch-target-console)}
.check input{width:24px;height:24px;margin:0;accent-color:var(--brand);flex:none}
.check label{cursor:pointer}
.form-actions{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.form-links{display:flex;flex-wrap:wrap;gap:0 var(--s-4);margin-top:var(--s-3);font-size:var(--t-sm)}
.form-links a{display:inline-flex;align-items:center;min-height:var(--touch-target-console)}
.caps-hint{display:none;font-size:var(--t-xs);color:var(--amber-ink);font-weight:var(--fw-semi)}
.caps-hint.is-on{display:block}
.code-input{font-family:var(--mono);font-size:var(--t-h1);letter-spacing:.35em;text-align:center}

/* ---------- pricing ---------- */
.bands{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bands th,.bands td{text-align:left;padding:10px var(--s-3);border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.bands th{font-size:var(--t-xs);font-weight:var(--fw-semi);color:var(--ink-2)}
.bands td.num{text-align:right;font-family:var(--mono)}
.rates-state{padding:var(--s-4);border:1px dashed var(--line-2);border-radius:var(--r-2);background:var(--surface-2);font-size:var(--t-sm);color:var(--ink-2)}
.rates-state[data-rates-state="loading"]{color:var(--ink-2)}
.rates-state[data-rates-state="error"]{border-style:solid;border-color:var(--amber-line);background:var(--amber-soft);color:var(--amber-ink)}
.rates-state[hidden]{display:none}
.calc{display:grid;gap:var(--s-4)}
.calc .out{background:var(--side);color:var(--side-ink);border-radius:var(--r);padding:var(--s-5)}
.calc .out b{font-size:var(--t-display);display:block;font-family:var(--mono);letter-spacing:var(--num-track)}
input[type=range]{width:100%;accent-color:var(--brand);min-height:var(--touch-target-console)}
.promise{border-left:3px solid var(--brand);padding-left:var(--s-4)}

/* ---------- FAQ ---------- */
.faq details{border-top:1px solid var(--line);padding:var(--s-2) 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--touch-target-console);font-weight:var(--fw-semi);font-size:var(--t-h3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--t-h1);color:var(--brand);font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);padding-bottom:var(--s-3)}

/* ---------- compare ---------- */
/* ---------- framed explainer (accepted explainer video, lazy-loaded) ---------- */
.vframe{margin-top:var(--s-6);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--e2)}
.vframe .frame-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-3)}
.vframe .frame-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.vframe .frame-url{margin-left:var(--s-2);font-family:var(--mono)}
.vframe iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:var(--ink-band)}
.vcap{margin-top:var(--s-3)}
.vframe-noscript{margin:0;padding:var(--s-4);background:var(--ink-band)}.vframe-noscript a{color:var(--band-ink)}
/* ---------- pricing: currency helper ---------- */
.curs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0}
.curbtn{min-height:var(--touch-target-console);padding:0 var(--s-4);border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font:var(--fw-semi) var(--t-sm)/1 var(--font);cursor:pointer}
.curbtn[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.curbtn:hover{border-color:var(--ink-3)}
.cmp{width:100%;min-width:720px;border-collapse:collapse}
.cmp th,.cmp td{padding:var(--s-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:var(--t-sm);overflow-wrap:normal;min-width:9rem}
.cmp th{background:var(--surface-2);font-size:var(--t-xs);font-weight:var(--fw-semi)}
.cmp tbody th{font-weight:var(--fw-semi);background:transparent;font-size:var(--t-sm)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}

/* ---------- footer ---------- */
.site-footer{background:var(--side);color:var(--side-ink-2);padding-block:var(--s-12) var(--s-8);margin-top:var(--s-16)}
.site-footer .cols{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
@media (min-width:1024px){.site-footer .cols{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.site-footer .foot-h{color:var(--side-ink);font-size:var(--t-sm);font-weight:var(--fw-semi);margin:0 0 var(--s-3)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.site-footer a{color:var(--side-ink-nav);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--touch-target-console);min-width:var(--touch-target-console);overflow-wrap:anywhere}
.site-footer a:hover{color:var(--side-ink);text-decoration:underline}
.site-footer .brand-link img{height:26px}
.site-footer .legal{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--side-line);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);font-size:var(--t-xs);color:var(--side-ink-2)}
.site-footer .legal-links{display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
@media (max-width:767px){.site-footer .legal-copy{flex-basis:100%}}

/* ---------- auth surfaces (adapter auth) ---------- */
.auth-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr}
.auth-band{background:var(--side);color:var(--side-ink);padding:var(--s-4)}
.auth-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.auth-band .brand-link img{height:26px}
.auth-main{display:grid;place-items:start center;padding:var(--s-6) var(--s-4) var(--s-12)}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-6);box-shadow:var(--e2)}
.auth-card h1{font-size:var(--t-h1);margin-bottom:var(--s-2)}
.auth-card .lede{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s-5);max-width:none}
.auth-foot{margin-top:var(--s-6);font-size:var(--t-xs);color:var(--ink-3);text-align:center}
.auth-foot a{color:var(--ink-2)}
.steps{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:var(--s-3)}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:var(--s-3);align-items:start}
.steps .sdot{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-xs);font-weight:var(--fw-bold);background:var(--gray-soft);color:var(--ink-2)}
.steps .sdot.done{background:var(--green-ink);color:var(--surface)}
.steps .sdot.now{background:var(--brand);color:var(--brand-ink)}
.steps .step-t{font-weight:var(--fw-semi);font-size:var(--t-sm)}
.steps .step-s{font-size:var(--t-xs);color:var(--ink-2)}
.ref{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-3);padding:var(--s-1) var(--s-2);display:inline-block;font-size:var(--t-sm)}
.pick{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.pick button{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:var(--s-3) var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font:500 var(--t-body)/1.3 var(--font);cursor:pointer}
.pick button:hover{border-color:var(--brand);background:var(--brand-soft)}
.pick small{display:block;color:var(--ink-2);font-size:var(--t-xs)}
.pick .role{font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap}
@media (min-width:768px){.auth-shell{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.auth-band{padding:var(--s-8)}.auth-band .wrap{flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;width:auto;margin:0}.auth-main{place-items:center;padding:var(--s-10)}}
@media (min-width:1440px){.auth-shell{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.auth-card{max-width:480px;padding:var(--s-8)}}
.auth-band .wire{margin-top:var(--s-8);display:none;font-family:var(--mono);font-size:var(--t-xs);color:var(--side-ink-2);border-top:1px solid var(--side-line);padding-top:var(--s-4)}
@media (min-width:768px){.auth-band .wire{display:block}}
.auth-band .wire b{color:var(--brand-rose-on-dark);font-weight:var(--fw-semi)}

/* ---------- 404 ---------- */
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center;padding:var(--s-12) var(--s-4)}
.notfound img{height:64px;margin:0 auto var(--s-6)}
.notfound h1{font-size:var(--t-display)}
.notfound .actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-5)}

/* ---------- print ---------- */
@media print{.site-header,.site-footer,.nav-toggle,.hero-mesh .mesh,.lightbox{display:none}}
/* ---------- brand lockups: the authentic raster kit (logo-h-2x.png on light, email-logo-white.png on dark) ---------- */
/* touch viewports (<768px run as genuine touch): portal-grade 48px inputs so inner controls reach 44px */
@media (max-width:767px){.input,.select{min-height:var(--touch-target-portal)}.toggle-pw{top:2px;bottom:2px;min-height:var(--touch-target-console)}.hint .btn{min-height:var(--touch-target-console)}}

/* ---------- utilities (replace inline styles in views) ---------- */
.ink{color:var(--ink)}
.m-0{margin:0}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.pb-0{padding-bottom:0}
.grid-center{align-items:center}
.wrap-narrow{max-width:760px}
.list-plain{padding-left:1.1em}.list-plain li+li{margin-top:var(--s-2)}
.out-lines{margin-top:var(--s-3);color:var(--side-ink-2)}
.foot-blurb{margin-top:var(--s-3);max-width:34ch}
.h-card{font-size:var(--t-h1)}
.textarea-sm{min-height:80px}
.btn-inline{padding:0 var(--s-2)}
.cta-band{text-align:center}.cta-band .lede{margin-inline:auto}.cta-band .hero-cta{justify-content:center}
/* auth: the mark + tagline band never crowds the card on tablet */
.steps .sdot.skip{background:transparent;border:1px dashed var(--input-line);color:var(--ink-3)}

/* ---------- dark bands with the constellation mesh (owner reference 2026-09-02) ----------
   The mesh is a hairline texture in the band's own ink, masked to fade out of the headline's half.
   It is never a brand wash ("brand is signal, never a wash"): the band is --ink-band, the lines are --band-ink at 16%. */
.hero-mesh,.auth-band{position:relative;overflow:hidden}
.hero-mesh .mesh,.auth-band .mesh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:radial-gradient(78% 78% at 86% 14%,black 0%,black 30%,transparent 100%);mask-image:radial-gradient(78% 78% at 86% 14%,black 0%,black 30%,transparent 100%)}
.mesh-lines{stroke:var(--on-dark-hairline)}.mesh-dots{fill:var(--on-dark-line-strong)}
.hero-mesh .wrap,.auth-band .wrap{position:relative}
.hero-mesh h1{color:var(--band-ink);font-family:'Inter Hero',var(--font);font-size:clamp(2.6rem,7.2vw,var(--t-display-xl));line-height:var(--lh-tight);letter-spacing:var(--num-track);max-width:16ch;text-wrap:balance}
.hero-mesh .lede{color:var(--band-ink-2);max-width:640px}
.hero-mesh .hero-facts{color:var(--band-ink-2)}.hero-mesh .hero-facts span::before{color:var(--brand-rose-on-dark)}
/* centred composition (owner, 2026-09-02 — the live hero is centred too): type on clean ground, texture at the edges */
.hero-mesh .wrap{grid-template-columns:minmax(0,900px);justify-content:center;align-items:start;text-align:center}
.hero-mesh .hero-copy{margin-inline:auto}
.hero-mesh h1{margin-inline:auto}
.hero-mesh .lede{margin-inline:auto}
.hero-mesh .hero-cta,.hero-mesh .hero-facts{justify-content:center}
/* the live site's headline trait, kept by owner direction (owner direction): two lines from 1024px, the last clause in the serif italic */
.hero-mesh h1 br.lg{display:none}
.hero-accent{font-family:'Instrument Serif Hero',var(--serif);font-style:italic;font-weight:400;letter-spacing:0;background:linear-gradient(90deg,var(--band-ink),var(--brand-rose-on-dark));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:1024px){.hero-mesh .wrap{grid-template-columns:minmax(0,1120px)}.hero-mesh h1{max-width:none;text-wrap:initial}.hero-mesh h1 br.lg{display:inline}}
@media (forced-colors:active){.hero-accent{background:none;color:CanvasText}}
.hero-mesh .mesh{-webkit-mask-image:radial-gradient(62% 70% at 50% 42%,transparent 0%,transparent 38%,black 100%);mask-image:radial-gradient(62% 70% at 50% 42%,transparent 0%,transparent 38%,black 100%)}
@media (forced-colors:active){.hero-mesh .mesh,.auth-band .mesh{display:none}}
/* ---------- screenshot viewer: one native <dialog> per page ---------- */
.btn[hidden]{display:none}
/* the dialog is its own backdrop (full viewport, opaque --ink-band) so contrast holds with or without ::backdrop support */
.lightbox{border:0;margin:0;padding:var(--s-4);width:100%;height:100dvh;max-width:none;max-height:none;background:var(--ink-band);color:var(--band-ink);display:grid;align-content:safe center;justify-content:center;overflow:auto;box-sizing:border-box}
body.has-dialog{overflow:hidden}
.lightbox::backdrop{background:var(--ink-band)}
.lightbox[open]{display:grid}.lightbox:not([open]){display:none}
.lightbox figure{margin:0;max-width:min(96vw,1400px)}.lightbox img{display:block;max-width:100%;max-height:calc(100dvh - 180px);width:auto;height:auto;margin:0 auto;border-radius:var(--r-2);transition:opacity var(--dur-fast) var(--ease)}
.lightbox figure.is-loading img{opacity:.35}
.lightbox figcaption{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--band-ink-2);text-align:center}.lightbox-count{display:block;text-align:center;font-size:var(--t-xs);color:var(--band-ink-2);margin-top:var(--s-1)}
.lightbox-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-3);margin-top:var(--s-4)}
.release{border-top:1px solid var(--line);padding:var(--s-6) 0}
.release h2{font-size:var(--t-h1)}
.release time{font-family:var(--mono);font-weight:var(--fw-medium);color:var(--brand);font-size:var(--t-sm)}
.release ul{margin:0;padding-left:1.1em;color:var(--ink-2)}
.release li{margin-bottom:var(--s-2)}
.auth-alt{margin-top:var(--s-3);line-height:var(--lh-base)}
/* ---------- bento (home product section): 12-column asymmetric grid, varied spans; same copy as the feature cards ----------
   Swiss-grid discipline: one grid, mathematical spans (7/5, 4/4/4), no decoration; the capture sits flush at the tile's foot. */
.bento{display:grid;gap:var(--s-4);grid-template-columns:repeat(12,minmax(0,1fr));margin-top:var(--s-6)}
.tile{grid-column:span 12;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--e1);overflow:hidden}
.tile-body{padding:var(--s-6);flex:1 1 auto}
.tile h3{margin-top:0}
.tile ul{margin:var(--s-3) 0 0;padding-left:1.1em;color:var(--ink-2);font-size:var(--t-sm)}.tile li+li{margin-top:var(--s-2)}.tile li b{color:var(--ink)}
.tile-shot{margin:0;border-top:1px solid var(--line);background:var(--surface-2)}.tile-shot a,.feature-shot a{display:block;cursor:zoom-in}.tile-shot a:focus-visible,.feature-shot a:focus-visible{outline:var(--focus-ring);outline-offset:-3px}.tile-shot img{display:block;width:100%;height:auto}
.tile .figcap{padding:var(--s-2) var(--s-6) var(--s-4);margin:0}
.tile-ink ul{column-gap:var(--s-8)}
.tile-ink{background:var(--surface-2);border-color:var(--line)}
.tile-ink .icon{background:var(--surface);border:1px solid var(--line)}
@media (min-width:768px){.tile.span-7,.tile.span-5,.tile.span-6{grid-column:span 6}.tile.span-12{grid-column:span 12}.tile-ink ul{columns:2}}
@media (min-width:1440px){.tile.span-7{grid-column:span 7}.tile.span-5{grid-column:span 5}.tile.span-6{grid-column:span 6}.tile-ink ul{columns:3}}
/* ---------- motion: one short, interruptible entrance (hero copy on load; sections as they enter the viewport) ----------
   transform/opacity only; nothing continuous; everything below is removed under prefers-reduced-motion. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-mesh .hero-copy > :not(h1){animation:rise .32s var(--ease) both}
.hero-mesh .hero-copy > :nth-child(2){animation-delay:.04s}.hero-mesh .hero-copy > :nth-child(3){animation-delay:.08s}.hero-mesh .hero-copy > :nth-child(4){animation-delay:.12s}
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}
.tile-shot img,.feature-shot img{transition:transform var(--dur) var(--ease)}
.tile:hover .tile-shot img,.feature-shot:hover img{transform:scale(1.02)}
.tile{transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}.tile:hover{box-shadow:var(--e2)}
.btn:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.hero-mesh .hero-copy > :not(h1){animation:none}html.js .reveal{opacity:1;transform:none;transition:none}.tile:hover .tile-shot img,.feature-shot:hover img{transform:none}.btn:active{transform:none}}