/* bonsai site system. shared by every page. see SYSTEM.md */
/* ---------- tokens ----------
role tokens are jesse's (tokens.json). light values on :root, dark values for the
dark theme, and .invert flips a band to the other theme. components read tokens only. */
:root{
color-scheme:light;
--navy-900:#233D4D;--navy-950:#13222C;--sage-300:#A1C181;--sage-600:#567A3E;
--tangerine-500:#FF8536;--tangerine-400:#FF9A57;--cream-50:#FAF6EE;--stone-100:#F4F3EF;
--teal-500:#619B8A;--yellow-400:#FCCA46;
--surface:#FAF6EE;--surface-raised:#FFFFFF;--surface-photo:#F4F3EF;--chrome:#E7EDE1;
--ink:#233D4D;--ink-muted:#5A6B74;--border:#C9D3C2;--brand-mark:#567A3E;
--accent:#FF8536;--accent-hover:#FF9A57;--on-accent:#233D4D;--focus:#567A3E;
/* site roles built on the tokens above */
--ink-hover:#30566C;
--line-soft:rgba(35,61,77,.09);
--field-line:#7D8E97;
--nav-bg:rgba(250,246,238,.82);
--shade:35,61,77;
--stage:#E7EDE1;
--slot:#E7E5DF;--slot-line:#C3BFB5;
--glow-1:rgba(161,193,129,.30);--glow-2:rgba(231,237,225,.95);
--ring-o:.44;
--err:#B4441B;
--show-lt:block;--show-dk:none;
--head:"Plus Jakarta Sans","Hanken Grotesk",system-ui,-apple-system,sans-serif;
--text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
--wrap:1200px;
--gut:clamp(16px,4vw,48px);
--sec:clamp(96px,11vw,160px);
--gap-vis:clamp(48px,6vw,80px);
--r-photo:6px;--r-card:10px;--r-panel:16px;
--nav-h:64px;
--ease:cubic-bezier(.2,.7,.2,1);
}
:root .invert{
color-scheme:dark;
--surface:#13222C;--surface-raised:#1C3240;--surface-photo:#1F2124;--chrome:#1C3240;
--ink:#F3EEE4;--ink-muted:#A3B2BA;--border:#33505F;--brand-mark:#A1C181;--focus:#A1C181;
--ink-hover:#FFFFFF;--line-soft:rgba(243,238,228,.09);--field-line:#6A8796;--nav-bg:rgba(19,34,44,.8);
--shade:0,0,0;--stage:#1C3240;--slot:#2A2D31;--slot-line:#4A4F55;
--glow-1:rgba(76,140,146,.34);--glow-2:rgba(44,94,108,.22);--ring-o:.34;
--err:#FFB38A;--show-lt:none;--show-dk:block;
--sun-o:1;--sun-r:0deg;--sun-s:1;--moon-o:0;--moon-r:90deg;--moon-s:.6;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--surface:#13222C;--surface-raised:#1C3240;--surface-photo:#1F2124;--chrome:#1C3240;
--ink:#F3EEE4;--ink-muted:#A3B2BA;--border:#33505F;--brand-mark:#A1C181;--focus:#A1C181;
--ink-hover:#FFFFFF;--line-soft:rgba(243,238,228,.09);--field-line:#6A8796;--nav-bg:rgba(19,34,44,.8);
--shade:0,0,0;--stage:#1C3240;--slot:#2A2D31;--slot-line:#4A4F55;
--glow-1:rgba(76,140,146,.34);--glow-2:rgba(44,94,108,.22);--ring-o:.34;
--err:#FFB38A;--show-lt:none;--show-dk:block;
--sun-o:1;--sun-r:0deg;--sun-s:1;--moon-o:0;--moon-r:90deg;--moon-s:.6;
}
:root:not([data-theme="light"]) .invert{
color-scheme:light;
--surface:#FAF6EE;--surface-raised:#FFFFFF;--surface-photo:#F4F3EF;--chrome:#E7EDE1;
--ink:#233D4D;--ink-muted:#5A6B74;--border:#C9D3C2;--brand-mark:#567A3E;--focus:#567A3E;
--ink-hover:#30566C;--line-soft:rgba(35,61,77,.09);--field-line:#7D8E97;--nav-bg:rgba(250,246,238,.82);
--shade:35,61,77;--stage:#E7EDE1;--slot:#E7E5DF;--slot-line:#C3BFB5;
--glow-1:rgba(161,193,129,.30);--glow-2:rgba(231,237,225,.95);--ring-o:.44;
--err:#B4441B;--show-lt:block;--show-dk:none;
}
}
:root[data-theme="dark"]{
color-scheme:dark;
--surface:#13222C;--surface-raised:#1C3240;--surface-photo:#1F2124;--chrome:#1C3240;
--ink:#F3EEE4;--ink-muted:#A3B2BA;--border:#33505F;--brand-mark:#A1C181;--focus:#A1C181;
--ink-hover:#FFFFFF;--line-soft:rgba(243,238,228,.09);--field-line:#6A8796;--nav-bg:rgba(19,34,44,.8);
--shade:0,0,0;--stage:#1C3240;--slot:#2A2D31;--slot-line:#4A4F55;
--glow-1:rgba(76,140,146,.34);--glow-2:rgba(44,94,108,.22);--ring-o:.34;
--err:#FFB38A;--show-lt:none;--show-dk:block;
--sun-o:1;--sun-r:0deg;--sun-s:1;--moon-o:0;--moon-r:90deg;--moon-s:.6;
}
:root[data-theme="dark"] .invert{
color-scheme:light;
--surface:#FAF6EE;--surface-raised:#FFFFFF;--surface-photo:#F4F3EF;--chrome:#E7EDE1;
--ink:#233D4D;--ink-muted:#5A6B74;--border:#C9D3C2;--brand-mark:#567A3E;--focus:#567A3E;
--ink-hover:#30566C;--line-soft:rgba(35,61,77,.09);--field-line:#7D8E97;--nav-bg:rgba(250,246,238,.82);
--shade:35,61,77;--stage:#E7EDE1;--slot:#E7E5DF;--slot-line:#C3BFB5;
--glow-1:rgba(161,193,129,.30);--glow-2:rgba(231,237,225,.95);--ring-o:.44;
--err:#B4441B;--show-lt:block;--show-dk:none;
}
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface);-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* the page color is painted on body too: hosts may override html's background */
body{
position:relative;isolation:isolate;margin:0;min-height:100vh;color:var(--ink);background:var(--surface);
font-family:var(--text);font-size:17px;line-height:1.55;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
body::before{content:"";position:fixed;z-index:60;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--surface)}
main{display:block;overflow-x:clip}
img,svg{display:block;max-width:100%}
p,h1,h2,h3,h4,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--brand-mark);text-decoration:none}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
/* artwork that has a light and a dark version (logo files) */
.lt:not(.bar){display:var(--show-lt)!important}
.dk:not(.bar){display:var(--show-dk)!important}
/* theme switch: a short color crossfade, set by site.js for 260ms */
@media (prefers-reduced-motion:no-preference){
.theme-fade,.theme-fade *,.theme-fade *::before,.theme-fade *::after{
transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,fill .18s ease,stroke .18s ease!important;
}
}
/* ---------- type ---------- */
h1,.h1,h2,.h2{font-family:var(--head);font-weight:800;text-wrap:balance;color:var(--ink)}
h1,.h1{font-size:clamp(44px,6.7vw,96px);line-height:.98;letter-spacing:-.04em}
h2,.h2{font-size:clamp(36px,4.9vw,68px);line-height:1.03;letter-spacing:-.035em}
h3,.h3{font-family:var(--head);font-weight:700;font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.h3-sm{font-size:clamp(26px,2.3vw,32px);line-height:1.12;letter-spacing:-.025em}
/* tighten the loose period, comma and apostrophe in plus jakarta */
.pn{margin-left:-.09em}
.ap{margin:0 -.04em 0 -.06em}
/* forced headline line. each line still balances on its own if it has to wrap */
.ln{display:block}
.kicker,.name{font-weight:600;font-size:clamp(17px,1.4vw,20px);line-height:1.3;color:var(--brand-mark);letter-spacing:-.005em}
.name b{font-weight:700}
.lede{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:var(--ink-muted);text-wrap:pretty}
.body{font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--ink-muted);text-wrap:pretty}
.fine{font-size:14px;line-height:1.55;color:var(--ink-muted);text-wrap:pretty}
/* ---------- layout ---------- */
.wrap{
max-width:calc(var(--wrap) + 2 * var(--gut));margin:0 auto;
padding-left:max(var(--gut),env(safe-area-inset-left,0px));
padding-right:max(var(--gut),env(safe-area-inset-right,0px));
}
.band{position:relative;padding-block:calc(var(--sec) / 2)}
.band:last-of-type{padding-bottom:var(--sec)}
/* the contrast band: full bleed, the other theme's colors */
.band.invert{background:var(--surface);color:var(--ink);padding-block:calc(var(--sec) * .8)}
.band.invert + .band{padding-top:calc(var(--sec) * .8)}
/* centered section opener: kicker, headline, one paragraph, a button */
.opener{text-align:center;max-width:880px;margin:0 auto}
.opener > .kicker,.opener > .name{margin-bottom:14px}
.opener > p:not(.kicker):not(.name){max-width:640px;margin:22px auto 0;text-wrap:balance}
.opener > .btn{margin-top:32px}
.visual{margin-top:var(--gap-vis)}
/* split: text beside a visual. add .flip to put the visual first */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.split.flip > .split-vis{order:-1}
.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split + .split{margin-top:clamp(96px,10vw,144px)}
.split-text{max-width:500px}
.split-text > .name{margin-bottom:16px}
.split-text h2{font-size:clamp(34px,3.9vw,54px);line-height:1.05}
.split-text > p:not(.name){margin-top:20px}
.split-text > .btn{margin-top:30px}
.opener + .split{margin-top:var(--gap-vis)}
@media (max-width:899px){
.split,.split.flip{grid-template-columns:minmax(0,1fr);gap:40px}
.split.flip > .split-vis{order:0}
.split-text{max-width:600px}
}
/* two-up: two tiles side by side */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tile{position:relative;display:flex;flex-direction:column;background:var(--surface-raised);border-radius:var(--r-panel);overflow:hidden;box-shadow:0 0 0 1px var(--line-soft),0 24px 48px -32px rgba(var(--shade),.22)}
.tile-text{padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,48px) 0}
.tile-text p{margin-top:14px;max-width:30em}
.tile-vis{margin-top:auto;padding:clamp(32px,3.4vw,48px) clamp(24px,3.4vw,48px) clamp(24px,3.4vw,48px)}
@media (max-width:819px){.duo{grid-template-columns:minmax(0,1fr)}}
/* small facts row under a visual */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:clamp(40px,5vw,64px)}
.facts > li{padding-top:20px;border-top:1px solid var(--border);font-size:clamp(17px,1.35vw,19px);font-weight:600;line-height:1.4;color:var(--ink);text-wrap:pretty}
.facts .tag{margin-left:6px;vertical-align:1px}
@media (max-width:719px){.facts{grid-template-columns:minmax(0,1fr)}.facts > li{padding:16px 0}}
/* big facts: number over a short line */
.bigfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin:clamp(48px,6vw,80px) auto 0;text-align:center}
.bigfacts > li{padding:8px 24px}
.bigfacts > li + li{border-left:1px solid var(--border)}
.bigfacts b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(52px,5.6vw,84px);line-height:1;letter-spacing:-.045em;white-space:nowrap;color:var(--ink)}
.bigfacts span{display:block;margin-top:14px;font-size:clamp(17px,1.35vw,19px);line-height:1.45;color:var(--ink-muted)}
@media (max-width:599px){
.bigfacts{grid-template-columns:minmax(0,1fr)}
.bigfacts > li{padding:24px 0}
.bigfacts > li + li{border-left:0;border-top:1px solid var(--border)}
}
/* people: two equal profile cards with a hairline between (the contrast band).
the portrait is a square box; a monogram fills it until a photo goes in.
to add a photo, put 
inside .portrait */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin:clamp(56px,6.5vw,88px) auto 0;text-align:center}
.person{display:flex;flex-direction:column;align-items:center;padding:8px clamp(20px,3vw,40px)}
.person + .person{border-left:1px solid var(--border)}
.portrait{position:relative;display:grid;place-items:center;width:clamp(120px,12vw,168px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--brand-mark) 22%,var(--surface)),color-mix(in srgb,var(--brand-mark) 9%,var(--surface)) 72%);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-mark) 45%,transparent)}
/* two fine rings around the portrait, a nod to the growth rings */
.portrait::before,.portrait::after{content:"";position:absolute;border-radius:50%;pointer-events:none;border:1px solid color-mix(in srgb,var(--brand-mark) 30%,transparent)}
.portrait::before{inset:-10px}
.portrait::after{inset:-20px;border-color:color-mix(in srgb,var(--brand-mark) 15%,transparent)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.mono-gram{font-family:var(--head);font-weight:800;font-size:clamp(40px,4.2vw,58px);line-height:1;letter-spacing:-.04em;color:var(--brand-mark)}
.person-name{margin-top:clamp(36px,3.6vw,48px);font-weight:800;font-size:clamp(30px,3.2vw,46px);line-height:1.05;letter-spacing:-.035em}
.person-role{margin-top:12px;max-width:20em;font-size:clamp(17px,1.35vw,19px);line-height:1.45;color:var(--ink-muted);text-wrap:balance}
@media (max-width:599px){
.people{grid-template-columns:minmax(0,1fr)}
.person{padding:48px 0}
.person + .person{border-left:0;border-top:1px solid var(--border)}
}
/* spec list: a few plain lines with hairlines */
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.specs > li{padding-top:18px;border-top:1px solid var(--border);font-size:16px;line-height:1.5;color:var(--ink-muted);text-wrap:pretty}
@media (max-width:719px){.specs{grid-template-columns:minmax(0,1fr)}.specs > li{padding:14px 0}}
/* small pill, eg "Coming soon" */
.tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-family:var(--text);font-size:13px;font-weight:600;line-height:1;letter-spacing:0;color:var(--brand-mark);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-mark) 50%,transparent);white-space:nowrap}
/* ---------- buttons ----------
.btn-primary: tangerine, the one main action per view (the waitlist).
.btn-ink: solid ink, for "Learn more" and the nav. .btn-line: outline, beside a primary. */
.btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:0 28px;border:0;border-radius:999px;cursor:pointer;
font-family:var(--text);font-weight:600;font-size:17px;line-height:1;letter-spacing:-.005em;white-space:nowrap;
-webkit-tap-highlight-color:transparent;
transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .14s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:999px}
.btn svg{flex:none;width:8px;height:13px;margin-right:-4px;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn.sm{min-height:40px;padding:0 18px;font-size:15px;gap:8px}
.btn.sm::after{content:"";position:absolute;inset:-2px 0}
.btn-primary{
isolation:isolate;overflow:hidden;background:var(--accent);color:var(--on-accent);font-weight:700;
box-shadow:inset 0 1px 0 rgba(255,232,208,.6),inset 0 -1px 0 rgba(150,60,10,.18),0 10px 24px -14px rgba(255,120,40,.9);
}
.btn-primary:hover{background:var(--accent-hover)}
/* specular: a highlight that follows the pointer, never lighter than pale tangerine */
.btn-primary::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;opacity:0;transition:opacity .25s ease;
background:radial-gradient(110px circle at var(--mx,50%) var(--my,0),rgba(255,186,136,.95),rgba(255,162,102,.35) 45%,rgba(255,154,87,0) 72%)}
.btn-primary::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(rgba(255,228,200,.3),rgba(255,228,200,0) 55%)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover::before{opacity:1}}
.btn-ink{background:var(--ink);color:var(--surface);box-shadow:0 10px 22px -16px rgba(var(--shade),.9)}
.btn-ink:hover{background:var(--ink-hover)}
.btn-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--chrome)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px}
@media (max-width:419px){.hero .cta-row .btn{padding:0 20px;font-size:16px}.hero .cta-row{gap:10px}}
.cta-note{margin-top:16px;font-size:15px;color:var(--ink-muted)}
/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nav-bg);box-shadow:0 1px 0 var(--line-soft)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.nav{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"logo seg act";align-items:center;height:var(--nav-h);column-gap:16px}
.logo{grid-area:logo;justify-self:start;display:flex;align-items:center;min-height:44px}
.logo img{height:24px;width:auto}
.nav-act{grid-area:act;justify-self:end;display:flex;align-items:center;gap:6px}
/* theme toggle: sun in dark, moon in light */
.theme-btn{position:relative;display:none;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .18s ease}
.js .theme-btn{display:grid}
.theme-btn:hover{background:var(--chrome)}
.theme-btn:focus-visible{border-radius:50%}
.theme-btn svg{grid-area:1/1;width:20px;height:20px;transition:transform .35s var(--ease),opacity .2s ease}
.theme-btn .sun{opacity:var(--sun-o,0);transform:rotate(var(--sun-r,-90deg)) scale(var(--sun-s,.6))}
.theme-btn .moon{opacity:var(--moon-o,1);transform:rotate(var(--moon-r,0deg)) scale(var(--moon-s,1))}
/* rubber segment: the app links. the thumb sits on the current page and, on hover or
focus, stretches across to the item and squashes into place (site.js). three parts,
two round caps and a middle, so it only ever moves with transform */
.seg{grid-area:seg;position:relative;display:flex;padding:4px;border-radius:999px;background:var(--chrome);isolation:isolate}
.seg a{
position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:36px;padding:0 17px;border-radius:999px;
color:var(--ink-muted);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.seg a:hover{color:var(--ink)}
.seg a.on{color:var(--surface)}
.seg a:focus-visible{outline-offset:2px;border-radius:999px}
.seg-thumb{position:absolute;z-index:0;left:4px;top:4px;height:36px;width:0;pointer-events:none;opacity:0;transition:opacity .16s ease}
.seg-thumb.show{opacity:1}
.seg-thumb i{position:absolute;top:0;left:0;height:36px;background:var(--ink);transform-origin:0 0}
.seg-thumb .cl,.seg-thumb .cr{width:36px;border-radius:50%}
.seg-thumb .cm{width:100px}
/* before site.js runs (or without it) the current page is marked plainly */
.seg:not(.live) a[aria-current="page"]{background:var(--ink);color:var(--surface)}
@media (max-width:959px){
/* phones: the header scrolls away; the segment drops to its own centered row */
:root{--nav-h:56px}
.nav{position:relative;top:0}
.nav .wrap{grid-template-columns:1fr auto;grid-template-areas:"logo act" "seg seg";height:auto;padding-top:6px;padding-bottom:12px;row-gap:6px}
.logo img{height:22px}
.seg{justify-self:center}
.seg a{padding:0 10px}
}
@media (max-width:359px){.seg a{padding:0 8px;font-size:14px}}
/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;text-align:center;padding-top:clamp(56px,7vw,104px);padding-bottom:calc(var(--sec) / 2)}
.hero .kicker{margin-bottom:16px}
.hero h1{max-width:11.2em;margin:0 auto}
.hero .lede{max-width:640px;margin:26px auto 0}
.hero .cta-row{margin-top:36px}
.hero-vis{position:relative;margin-top:clamp(48px,5.5vw,80px)}
/* soft light behind the devices: mint on cream, teal on navy. static */
.hero-glow{position:absolute;left:50%;bottom:-8%;width:max(1400px,120vw);height:78%;transform:translateX(-50%);pointer-events:none;
background:radial-gradient(closest-side,var(--glow-1),transparent 70%),radial-gradient(50% 60% at 50% 70%,var(--glow-2),transparent)}
/* one quiet load moment. css only, so it is visible without js */
@media (prefers-reduced-motion:no-preference){
.rise{animation:rise .9s cubic-bezier(.2,.75,.25,1) .1s both}
.rise.d1{animation-delay:.24s}
}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* ---------- stage: the panel that holds an illustration ---------- */
.stage{position:relative;container-type:inline-size;background:var(--stage);border-radius:var(--r-panel);overflow:hidden}
.stage.photo{background:var(--surface-photo);box-shadow:inset 0 0 0 1px var(--line-soft)}
/* the illustration canvas. 1em = stage width / --ew. children are placed in em */
.ill{position:relative;z-index:1;font-size:calc(100cqw / var(--ew,40));aspect-ratio:var(--ar,5/4);width:100%}
.ill > .at{position:absolute}
/* ---------- device frames ----------
outer element sizes the device and is the container.
inner frame is drawn in cqw. the screen's font-size is set so the
screen is a fixed number of em wide (laptop 60, phone 20, tablet 44,
window 64; override with --lap-ew, --ph-ew, --tab-ew, --win-ew),
so everything inside scales like a picture. */
.laptop,.phone,.tablet,.win{position:relative;container-type:inline-size}
.laptop .lid{
position:relative;margin:0 6.5%;padding:1.7cqw 1.7cqw 1.9cqw;
background:#0B1015;border-radius:2.2cqw 2.2cqw .5cqw .5cqw;
box-shadow:inset 0 0 0 .12cqw #4A5660,inset 0 0 0 .4cqw #05080A;
}
.laptop .lid::before{content:"";position:absolute;top:.62cqw;left:50%;width:.55cqw;height:.55cqw;margin-left:-.275cqw;border-radius:50%;background:#1E2A33}
.laptop .scr{aspect-ratio:3/2;overflow:hidden;border-radius:.45cqw;font-size:calc(83.6cqw / var(--lap-ew,60))}
.laptop .base{
position:relative;height:2.2cqw;
background:linear-gradient(#8A949B,#4A555D 40%,#20272D);
border-radius:.2cqw .2cqw 2.4cqw 2.4cqw / .2cqw .2cqw 1.7cqw 1.7cqw;
box-shadow:0 2.4cqw 4.8cqw -1.4cqw rgba(var(--shade),.55);
}
.laptop .base::before{content:"";position:absolute;top:0;left:50%;width:15%;height:.85cqw;transform:translateX(-50%);border-radius:0 0 1cqw 1cqw;background:#3A454D}
.phone .shell{
position:relative;aspect-ratio:71.5/147;padding:3.3cqw;background:#0B1015;border-radius:15.5cqw;
box-shadow:inset 0 0 0 .55cqw #5B666F,inset 0 0 0 1.35cqw #05080A,0 6cqw 12cqw -4cqw rgba(var(--shade),.6);
}
.phone .scr{position:relative;height:100%;overflow:hidden;border-radius:12.4cqw;font-size:calc(93.4cqw / var(--ph-ew,20))}
.phone .island{position:absolute;z-index:3;top:.65em;left:50%;width:5.4em;height:1.6em;margin-left:-2.7em;border-radius:1em;background:#05080A}
.tablet .shell{
position:relative;padding:2.8cqw;background:#0B1015;border-radius:4.6cqw;
box-shadow:inset 0 0 0 .3cqw #5B666F,inset 0 0 0 .8cqw #05080A,0 5cqw 10cqw -3cqw rgba(var(--shade),.5);
}
.tablet .scr{aspect-ratio:4/3;overflow:hidden;border-radius:2cqw;font-size:calc(94.4cqw / var(--tab-ew,44))}
.win .frame{
font-size:calc(100cqw / var(--win-ew,64));border-radius:.9em;overflow:hidden;
box-shadow:0 0 0 1px rgba(var(--shade),.14),0 3em 6em -2.4em rgba(var(--shade),.42),0 1.2em 2.4em -1.2em rgba(var(--shade),.25);
}
.win .wbar{display:flex;align-items:center;gap:.42em;height:2.1em;padding:0 .85em;background:#ECE8DF;border-bottom:1px solid #DCD5C8}
.win .wbar i{width:.68em;height:.68em;border-radius:50%;background:#CFC8BB}
.win.dark .wbar{background:#1A2E3B;border-bottom-color:#2A4554}
.win.dark .wbar i{background:#3A5666}
/* ---------- illustration vocabulary ----------
.ui sets the light app tokens. .ui.dark switches to the dark ones.
every .scr is a .ui. sizes are in em so they scale with the screen. */
.ui,.scr{
--s-bg:#FAF6EE;--s-card:#FFFFFF;--s-ink:#233D4D;--s-muted:#5A6B74;--s-line:#E6E0D4;
--s-bar:#E6E0D5;--s-bar-2:#CFC7B8;--s-bar-ink:#33505F;
--s-sage:#567A3E;--s-sage-fg:#40592C;--s-sage-bg:#E7EDE1;--s-sage-mid:#A1C181;
--s-teal:#2F6B5A;--s-teal-bg:#DDEDE7;--s-teal-mid:#619B8A;
--s-yel:#735800;--s-yel-bg:#FFF1C4;--s-yel-mid:#FCCA46;
--s-neu:#5A6B74;--s-neu-bg:#ECE8E0;
--s-chrome:#E7EDE1;--s-photo:#F4F3EF;
color:var(--s-ink);font-family:var(--text);line-height:1.3;text-align:left;letter-spacing:0;
}
.scr{background:var(--s-bg)}
.ui.dark,.scr.dark{
--s-bg:#13222C;--s-card:#1C3240;--s-ink:#F3EEE4;--s-muted:#A3B2BA;--s-line:#2C4756;
--s-bar:#2B4656;--s-bar-2:#3F5D6D;--s-bar-ink:#C9D2D6;
--s-sage:#A1C181;--s-sage-fg:#A1C181;--s-sage-bg:rgba(161,193,129,.16);
--s-teal:#8CC3B2;--s-teal-bg:rgba(97,155,138,.2);
--s-yel:#FCCA46;--s-yel-bg:rgba(252,202,70,.15);
--s-neu:#A3B2BA;--s-neu-bg:rgba(163,178,186,.14);
--s-chrome:#1C3240;--s-photo:#1F2124;
}
/* cards and text inside a screen */
.card{background:var(--s-card);border-radius:.8em;box-shadow:0 0 0 1px var(--s-line)}
.card.float{box-shadow:0 0 0 1px rgba(35,61,77,.06),0 1.6em 3.2em -1.2em rgba(var(--shade),.4),0 .5em 1em -.5em rgba(var(--shade),.2)}
.u-title{font-weight:700;font-size:1.15em;letter-spacing:-.01em;line-height:1.2}
.u-label{font-size:.72em;font-weight:600;color:var(--s-muted)}
.u-row{display:flex;align-items:center;gap:.6em}
.u-row.u-wrap{flex-wrap:wrap;gap:.45em}
.u-sp{flex:1}
.u-title.xl{font-size:1.5em}
.u-title.sm{font-size:1em}
.u-date{font-size:.66em;color:var(--s-muted)}
.u-scr-pad{padding:1.6em 1.8em}
.mt-s{margin-top:.6em}.mt-m{margin-top:1em}.mt-l{margin-top:1.4em}
.u-btn{display:flex;align-items:center;justify-content:center;height:2.9em;border-radius:.75em;background:var(--s-ink);color:var(--s-bg);font-weight:700;font-size:1em}
.u-btn.sage{background:#A1C181;color:#13222C}
/* placeholder bars stand in for body text and names */
.bar{display:block;flex:none;width:var(--w,100%);height:.5em;border-radius:99em;background:var(--s-bar)}
.bar.t{height:.78em;background:var(--s-bar-2)}
.bar.ink{background:var(--s-bar-ink)}
.bar.sm{height:.38em}
.bar.sage{background:var(--s-sage-mid,#A1C181)}
.bar.teal{background:var(--s-teal-mid,#619B8A)}
.bar.lt{background:rgba(243,238,228,.26)}
.bar.lt.t{background:rgba(243,238,228,.62)}
.w10{--w:10%}.w15{--w:15%}.w20{--w:20%}.w25{--w:25%}.w30{--w:30%}.w35{--w:35%}.w40{--w:40%}.w45{--w:45%}
.w50{--w:50%}.w55{--w:55%}.w60{--w:60%}.w65{--w:65%}.w70{--w:70%}.w75{--w:75%}.w80{--w:80%}.w85{--w:85%}
.w90{--w:90%}.w95{--w:95%}.w100{--w:100%}
.lines{display:grid;gap:.62em}
.lines.tight{gap:.45em}
/* avatar dots */
.av{flex:none;width:1.6em;height:1.6em;border-radius:50%;background:var(--av,#C5D7B2)}
.av.sm{width:1.2em;height:1.2em}
.av.lg{width:2.2em;height:2.2em}
.av.a1{--av:#C5D7B2}.av.a2{--av:#B9D7CC}.av.a3{--av:#EAD7A4}.av.a4{--av:#C7D1D7}.av.a5{--av:#DCCDBE}
.av.sq{border-radius:.4em}
/* chips: a word or a bar on a tinted pill */
.chip{display:inline-flex;flex:none;align-items:center;gap:.4em;height:2em;padding:0 .8em;border-radius:99em;font-size:.72em;font-weight:600;line-height:1;white-space:nowrap;background:var(--s-neu-bg);color:var(--s-neu)}
.chip .bar{height:.55em;width:3.2em;background:currentColor;opacity:.4}
.chip.sage{background:var(--s-sage-bg);color:var(--s-sage-fg)}
.chip.teal{background:var(--s-teal-bg);color:var(--s-teal)}
.chip.yellow{background:var(--s-yel-bg);color:var(--s-yel)}
.chip.neutral{background:var(--s-neu-bg);color:var(--s-neu)}
.chip.solid{background:var(--s-sage);color:#fff}
/* status dot */
.dot{flex:none;display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--s-sage)}
.dot.teal{background:var(--s-teal-mid)}
.dot.yellow{background:var(--s-yel-mid)}
.dot.muted{background:var(--s-bar-2)}
.dot.sage-lt{background:#A1C181}
/* stamp */
.stamp{
display:inline-flex;flex-direction:column;align-items:center;gap:.25em;padding:.45em .9em .5em;
border:.14em solid var(--s-sage);border-radius:.45em;color:var(--s-sage);
box-shadow:inset 0 0 0 .16em var(--s-card),inset 0 0 0 .26em var(--s-sage);
transform:rotate(-7deg);line-height:1;
}
.stamp b{font-weight:800;font-size:1.05em;letter-spacing:.08em;text-transform:uppercase}
.stamp .mono{font-size:.58em}
/* static waveform. heights repeat every 30 bars */
.wave{display:flex;align-items:center;gap:.2em;height:2.4em}
.wave i{flex:1;min-width:.14em;border-radius:99em;background:var(--s-sage);height:40%}
.wave i:nth-child(30n+1){height:22%}.wave i:nth-child(30n+2){height:38%}.wave i:nth-child(30n+3){height:30%}
.wave i:nth-child(30n+4){height:54%}.wave i:nth-child(30n+5){height:72%}.wave i:nth-child(30n+6){height:46%}
.wave i:nth-child(30n+7){height:88%}.wave i:nth-child(30n+8){height:62%}.wave i:nth-child(30n+9){height:40%}
.wave i:nth-child(30n+10){height:28%}.wave i:nth-child(30n+11){height:50%}.wave i:nth-child(30n+12){height:76%}
.wave i:nth-child(30n+13){height:100%}.wave i:nth-child(30n+14){height:70%}.wave i:nth-child(30n+15){height:44%}
.wave i:nth-child(30n+16){height:58%}.wave i:nth-child(30n+17){height:84%}.wave i:nth-child(30n+18){height:64%}
.wave i:nth-child(30n+19){height:36%}.wave i:nth-child(30n+20){height:24%}.wave i:nth-child(30n+21){height:42%}
.wave i:nth-child(30n+22){height:66%}.wave i:nth-child(30n+23){height:92%}.wave i:nth-child(30n+24){height:60%}
.wave i:nth-child(30n+25){height:34%}.wave i:nth-child(30n+26){height:48%}.wave i:nth-child(30n+27){height:74%}
.wave i:nth-child(30n+28){height:52%}.wave i:nth-child(30n+29){height:30%}.wave i:nth-child(30n+30){height:20%}
/* phone status bar and tab bar */
.u-status{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:2.9em;padding:0 1.7em 0 2em;font-size:.78em;font-weight:700}
.u-status .batt{width:1.9em;height:.9em;border-radius:.28em;box-shadow:inset 0 0 0 .1em currentColor;position:relative;opacity:.9}
.u-status .batt::after{content:"";position:absolute;inset:.22em .5em .22em .22em;border-radius:.12em;background:currentColor}
.u-tabs{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:.8em 1.2em 1.9em;background:var(--s-card);box-shadow:0 -1px 0 var(--s-line)}
.u-tabs i{width:1.4em;height:1.4em;border-radius:.42em;box-shadow:inset 0 0 0 .12em var(--s-bar-2)}
.u-tabs i.on{background:var(--s-ink);box-shadow:none}
.u-pad{padding:3.5em 1.2em 0}
/* ---------- imaging app (record sheet) ---------- */
.ia{display:flex;flex-direction:column;height:100%;background:var(--s-bg);color:var(--s-ink);text-align:left}
.ia-head{display:flex;align-items:center;gap:.8em;min-height:3.2em;padding:.5em 1em;background:var(--s-card);border-bottom:1px solid var(--s-line);flex:none;white-space:nowrap}
.ia-head .wm{height:.95em;width:auto}
.ia-location{display:flex;align-items:center;gap:1.3em;font-size:.7em;font-weight:600;margin-left:.6em}
.ia-chevron{font-size:1.2em;color:var(--s-muted)}
.ia-patient{display:flex;flex-direction:column;gap:.12em;margin:0 .4em}
.ia-patient b{font-size:.85em;font-weight:700;line-height:1.25}
.ia-patient>span{font-size:.62em;color:var(--s-muted)}
.ia-patient .chev{margin-left:.8em}
.ia-seg{display:flex;padding:.18em;border-radius:.55em;background:var(--s-photo);box-shadow:inset 0 0 0 1px var(--s-line)}
.ia-seg>span{display:flex;align-items:center;gap:.7em;padding:.45em .7em;border-radius:.4em;font-size:.72em;font-weight:600;color:var(--s-muted)}
.ia-seg>span.on{background:var(--s-ink);color:var(--s-bg)}
.ia-seg kbd{font:inherit;font-family:var(--mono);font-size:.85em;line-height:1;padding:.12em .25em;border:1px solid currentColor;border-radius:.2em;opacity:.75}
.ia-actions{display:flex;align-items:center;gap:.5em;margin-left:auto}
.ia-icon{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.5em}
.ia-icon svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ia-add{background:var(--accent);color:var(--on-accent)}
.ia-timeline{display:flex;align-items:center;gap:1.2em;background:var(--s-chrome);padding:.5em 1em;border-bottom:1px solid var(--s-line)}
.ia-next{margin-left:auto}
.rec{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.15em .6em;min-width:9em;padding:.35em .8em;border-radius:.55em}
.rec b{font-size:.72em;font-weight:600;line-height:1.2}
.rec .mono{grid-column:1;font-size:.6em;color:var(--s-muted)}
.rec .dot{grid-row:1 / span 2;grid-column:2;width:.35em;height:.35em}
.rec.on{background:var(--s-card);box-shadow:inset 0 0 0 1px var(--s-sage)}
.rec .t0{display:inline-block;margin-right:.3em;padding:.1em .3em;border-radius:.2em;background:var(--s-sage);color:var(--s-card);font-size:.78em;font-weight:700;vertical-align:.08em}
.ia-board{padding:.7em 1em 1em;display:flex;flex-direction:column;gap:.55em;min-width:0}
.ia-title b{font-size:1.3em;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ia-meta{display:flex;gap:1.2em;color:var(--s-muted);font-size:.67em;margin-bottom:.4em}
.imaging-laptop .scr{aspect-ratio:auto}
/* the sheet: face, intraoral, detail panels. works inside the app or on its own */
.sheet{display:flex;flex-direction:column;gap:var(--sg,.85em)}
.sheet-lower{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sg,.85em)}
.sheet-lower>.panel{min-width:0}
.panel{background:var(--s-photo,var(--surface-photo));border-radius:.9em;padding:.65em}
.panel-label{display:flex;align-items:baseline;gap:.5em;margin:0 .15em .5em;font-size:.56em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--s-muted)}
.panel-label .mono{letter-spacing:0;font-weight:500}
.g5,.g4,.g3,.g2{display:grid;gap:var(--pg,.36em)}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ph{position:relative;margin:0;overflow:hidden;border-radius:var(--r-photo);background:#D9D6CE;aspect-ratio:3/2}
.ph.face{aspect-ratio:4/5}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.prof img{object-position:50% 22%}
/* Saved mouth edits have their own crop ratios. Keep the entire saved crop visible. */
.sheet-lower .ph{background:var(--s-photo,var(--surface-photo))}
.sheet-lower .ph img{object-fit:contain}
.sheet-lower .add-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;background:transparent;border:1px dashed var(--s-line,var(--border));color:var(--s-muted,var(--ink-muted));font-size:.65em}
.add-photo-mark{font-size:1.8em;line-height:1}
/* large standalone sheet on the neutral photo surround */
.sheet-big{background:var(--surface-photo);border-radius:var(--r-panel);padding:clamp(10px,1.6vw,22px);box-shadow:inset 0 0 0 1px var(--line-soft),0 40px 80px -48px rgba(var(--shade),.45)}
.sheet-big .sheet{--sg:clamp(8px,1.3vw,20px)}
.sheet-big .panel-label{font-size:clamp(8px,.8vw,11px);color:var(--ink-muted)}
.sheet-big .add-photo{font-size:clamp(7px,1.1vw,14px)}
.sheet-big .g5,.sheet-big .g3,.sheet-big .g2{--pg:clamp(6px,.7vw,10px)}
.sheet-big .ph{background:var(--slot)}
/* photo settle: the record sheet's entrance. the empty slots are there first, then the
photos resolve into them in a quick diagonal wave from the top left. no tilt, no travel.
markup per slot: ![]()
,
N = row + column. site.js adds .arm only when the sheet starts below the fold, then .play
when it is seen. without js, or with reduced motion, the photos are simply in place */
.sheet-in .ph::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px dashed var(--slot-line);opacity:0}
.sheet-in .pic{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.sheet-in.arm .ph::before,.sheet-in.play .ph::before{opacity:1}
.sheet-in.done .ph::before{opacity:0}
.sheet-in.arm .pic{opacity:0;transform:scale(1.02)}
.sheet-in.play .pic{animation:settle .52s cubic-bezier(.25,.6,.3,1) both;animation-delay:calc(var(--k,0) * 45ms)}
@keyframes settle{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
/* ---------- chart: draft document + recording pill ---------- */
.doc{overflow:hidden}
.doc-tabs{display:flex;gap:1.4em;padding:0 1.6em;box-shadow:inset 0 -1px 0 var(--s-line)}
.doc-tabs span{padding:1.15em 0 .95em;font-size:.74em;font-weight:600;color:var(--s-muted);white-space:nowrap;border-bottom:.18em solid transparent}
.doc-tabs span.on{color:var(--s-ink);border-bottom-color:var(--s-ink)}
.doc-body{padding:1.6em 1.6em 1.8em;display:grid;gap:1.25em}
.doc-sec{display:grid;gap:.6em}
.doc-sec > .bar.t{--w:5.5em;height:.62em}
.recpill{display:flex;align-items:center;gap:.7em;height:3.2em;padding:0 1.1em 0 1em;border-radius:99em}
.recpill .dot{width:.62em;height:.62em;box-shadow:0 0 0 .28em var(--s-sage-bg)}
.recpill > span{font-size:.8em;font-weight:600}
.recpill .mono{font-size:.74em;color:var(--s-muted)}
.recpill .wave{flex:1;height:1.7em;margin-left:.3em}
/* ---------- behere: clock-in, who's here, week grid ---------- */
.clockcard{border-radius:1.1em;background:#233D4D;color:#F3EEE4;padding:1.15em 1.1em 1.1em;display:grid;gap:.55em}
.clockcard .u-btn{margin-top:.6em;font-size:1.06em;height:3em}
.here{padding:.95em 1em 1em;display:grid;gap:.75em}
.here .u-row .bar{flex:1 1 auto;width:auto;max-width:var(--w)}
.wk{padding:.95em 1em 1em}
.wk-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35em;margin-top:.7em}
.wk-days .sh{min-height:2.4em;padding:0}
.week{display:grid;grid-template-columns:6.4em repeat(5,minmax(0,1fr));gap:.38em;align-items:stretch}
.week .dh{font-size:.66em;font-weight:600;color:var(--s-muted);padding:0 .4em .2em}
.week .rl{display:flex;align-items:center;gap:.45em;min-height:3em}
.week .rl .bar{flex:1}
.sh{border-radius:.5em;min-height:3em;padding:.55em .55em;display:flex;flex-direction:column;justify-content:center;gap:.35em}
.sh .bar{height:.4em;background:currentColor;opacity:.35}
.sh.sage{background:var(--s-sage-bg);color:var(--s-sage);box-shadow:inset .2em 0 0 var(--s-sage)}
.sh.teal{background:var(--s-teal-bg);color:var(--s-teal);box-shadow:inset .2em 0 0 var(--s-teal-mid)}
.sh.yellow{background:var(--s-yel-bg);color:var(--s-yel);box-shadow:inset .2em 0 0 var(--s-yel-mid)}
.sh.off{background:repeating-linear-gradient(135deg,var(--s-neu-bg) 0 .32em,transparent .32em .64em)}
.sh.none{background:transparent}
/* ---------- refer: slip, tooth strip, sent log ---------- */
.slip{padding:1.5em 1.6em 1.6em;display:grid;gap:1.15em}
.teeth{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:.2em}
.teeth i{aspect-ratio:.72;border-radius:.3em .3em .5em .5em;background:var(--s-neu-bg);box-shadow:inset 0 0 0 1px var(--s-line)}
.teeth.lo i{border-radius:.5em .5em .3em .3em}
.teeth i.on{background:var(--s-sage);box-shadow:none}
.teeth + .teeth{margin-top:.3em}
.sign{align-items:flex-end;gap:0}
.sign .stamp{margin:0 0 .3em -1.2em}
.sig-line{width:9.5em;display:grid;gap:.25em}
.sig{width:8.5em;height:2.4em;color:var(--s-ink)}
.log{padding:1.25em 1.3em 1.3em}
.log-row{display:flex;align-items:center;gap:.7em;padding:.8em 0;box-shadow:0 -1px 0 var(--s-line)}
.log-row:first-of-type{box-shadow:none}
.log-row .lines{flex:1;gap:.42em}
/* ---------- waitlist ---------- */
.waitlist{isolation:isolate;overflow:clip}
.waitlist .opener{max-width:720px}
.wl-card{position:relative;max-width:600px;margin:clamp(40px,5vw,56px) auto 0;padding:clamp(24px,3.4vw,40px);background:var(--surface-raised);border-radius:var(--r-panel);text-align:left;
box-shadow:0 0 0 1px var(--line-soft),0 40px 80px -40px rgba(var(--shade),.35)}
.wl-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.wl-form .full{grid-column:1 / -1}
.wl-form label{display:block;margin-bottom:8px;font-size:15px;font-weight:600;color:var(--ink)}
.wl-form label .opt{font-weight:400;color:var(--ink-muted)}
.wl-form input{
display:block;width:100%;height:50px;padding:0 14px;border-radius:var(--r-card);
background:var(--surface);border:1px solid var(--field-line);color:var(--ink);font-size:17px;
transition:border-color .15s ease,box-shadow .15s ease;
}
.wl-form input:hover{border-color:var(--ink-muted)}
.wl-form input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
.wl-form .btn{width:100%;margin-top:4px}
.wl-err{color:var(--err);font-size:15px}
.wl-ok{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 0;text-align:center;font-size:19px;font-weight:600;color:var(--ink)}
.wl-ok img{width:44px;height:auto}
.wl-ok:focus{outline:none}
@media (max-width:519px){.wl-form{grid-template-columns:minmax(0,1fr)}}
/* ---------- footer ---------- */
.foot{padding-block:48px max(48px,calc(env(safe-area-inset-bottom,0px) + 24px));box-shadow:0 -1px 0 var(--border)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 4px;margin-right:-12px}
.foot-links a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink-muted);font-size:15px;font-weight:500;transition:color .15s ease}
.foot-links a:hover,.foot-links a[aria-current="page"]{color:var(--ink)}
.foot-line{margin-top:32px;font-weight:600;color:var(--ink);font-size:16px}
.foot-note{margin-top:8px;max-width:44em;font-size:14px;color:var(--ink-muted)}
.foot-copy{margin-top:20px;font-size:14px;color:var(--ink-muted)}
@media (max-width:599px){.foot-links{margin-left:-12px;margin-right:0}}
/* =====================================================================
effects. see SYSTEM.md "Effects". each has one job. only transform and
opacity animate (plus stroke-dashoffset for the ring draw); everything
stops with reduced motion and shows its final state.
===================================================================== */
/* growth rings, ported from the september site. site.js draws the seeded rings into