/* Studio design system tokens. Source of truth: design/studio.html (approved 17 Oct 2026).
   Components read these names only, never raw values. Dark mode swaps values, not names.
   Theme: data-t="light" | "dark" on <html> (set from the OS preference, overridable). Reduce motion: data-rm="on" or the OS setting. */
:root{
  /* type */
  --f-ui:"Bricolage Grotesque Variable","Bricolage Grotesque",ui-rounded,system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
  --t-display:600 40px/1.05 var(--f-ui);  --tr-display:-.035em;
  --t-h1:600 30px/1.12 var(--f-ui);       --tr-h1:-.03em;
  --t-h2:600 22px/1.2 var(--f-ui);        --tr-h2:-.025em;
  --t-h3:600 17px/1.3 var(--f-ui);        --tr-h3:-.015em;
  --t-body:400 14px/1.55 var(--f-ui);
  --t-sm:400 13px/1.5 var(--f-ui);
  --t-cap:400 12px/1.45 var(--f-ui);
  --t-micro:500 10.5px/1.3 var(--f-mono); --tr-micro:.07em;
  /* space (4-pt) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:40px;--s-9:56px;
  /* radii */
  --r-xs:6px;--r-sm:11px;--r-md:16px;--r-lg:22px;--r-pill:999px;
  /* control heights */
  --h-sm:28px;--h-md:34px;--h-lg:42px;
  /* motion */
  --d-1:120ms;--d-2:200ms;--d-3:320ms;--d-4:600ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --blur:18px;
}
:root,:root[data-t=light]{
  --bg:#f3eee7;
  --s1:rgba(255,255,255,.74);    /* glass card */
  --s1-solid:#fbf8f4;            /* when glass is not possible (menus over text) */
  --s2:rgba(255,255,255,.5);     /* inset, hover */
  --s3:rgba(60,35,10,.055);      /* pressed, track */
  --line:rgba(60,35,10,.085);--line2:rgba(60,35,10,.16);
  --tx:#1e1712;--tx2:#6e6155;--tx3:#8a7d70;           /* tx3 = meta only, never the only carrier of meaning */
  --ac:#ff5b37;                  /* accent: dots, meters, glows, focus */
  --ac-fill:#d23c18;--ac-fill-hi:#e4491f;--ac-ink:#fff;  /* primary button (white text 4.7:1) */
  --ac-tx:#b8321a;--ac-soft:rgba(255,91,55,.11);
  --ok:#1a7a50;--ok-soft:rgba(34,160,107,.12);
  --warn:#9a5c00;--warn-soft:rgba(217,138,0,.14);
  --bad:#c2343a;--bad-soft:rgba(229,72,77,.11);
  --ring:0 0 0 3px rgba(255,91,55,.28);
  --glow:inset 0 1px 0 rgba(255,255,255,.9);
  --e-1:0 1px 2px rgba(80,40,0,.05),0 24px 48px -28px rgba(120,60,10,.25);
  --e-2:0 2px 6px rgba(80,40,0,.08),0 24px 60px -20px rgba(120,60,10,.35);
  --e-3:0 4px 12px rgba(80,40,0,.1),0 40px 100px -30px rgba(80,40,0,.45);
  --scrim:rgba(40,25,10,.28);
  --og:rgba(251,248,244,.86);--og-line:rgba(60,35,10,.12);   /* glass over the 3D office: a bit more opaque than page cards */
  --app-bg:radial-gradient(700px 420px at 12% 0%,#ffd9c4 0,transparent 60%),radial-gradient(800px 500px at 95% 10%,#e4dcff 0,transparent 60%),radial-gradient(900px 600px at 50% 110%,#d8f0e4 0,transparent 60%),var(--bg);
  --floor:#e9d8c3;--wall:#f6ece0;
}
:root[data-t=dark]{
  --bg:#120f0d;
  --s1:rgba(40,32,27,.68);--s1-solid:#221c18;--s2:rgba(255,255,255,.045);--s3:rgba(255,255,255,.07);
  --line:rgba(255,235,215,.08);--line2:rgba(255,235,215,.15);
  --tx:#f6ede4;--tx2:#b3a596;--tx3:#8f8274;
  --ac:#ff7550;--ac-fill:#ff7550;--ac-fill-hi:#ff8a68;--ac-ink:#1c0904;--ac-tx:#ff8a68;--ac-soft:rgba(255,117,80,.14);
  --ok:#4fd197;--ok-soft:rgba(79,209,151,.13);--warn:#f2b54b;--warn-soft:rgba(242,181,75,.13);--bad:#ff7a7f;--bad-soft:rgba(255,122,127,.13);
  --ring:0 0 0 3px rgba(255,117,80,.35);
  --glow:inset 0 1px 0 rgba(255,255,255,.06);
  --e-1:0 24px 48px -28px rgba(0,0,0,.6);--e-2:0 24px 60px -20px rgba(0,0,0,.7);--e-3:0 40px 100px -30px rgba(0,0,0,.85);
  --scrim:rgba(0,0,0,.5);
  --og:rgba(30,24,20,.8);--og-line:rgba(255,235,215,.13);
  --app-bg:radial-gradient(700px 420px at 12% 0%,rgba(255,120,70,.16) 0,transparent 60%),radial-gradient(800px 500px at 95% 10%,rgba(140,110,255,.14) 0,transparent 60%),radial-gradient(900px 600px at 50% 110%,rgba(60,180,130,.08) 0,transparent 60%),var(--bg);
  --floor:#2a211a;--wall:#1d1814;
}
/* No explicit choice: follow the OS. */
@media (prefers-color-scheme:dark){:root:not([data-t=light]){
  --bg:#120f0d;
  --s1:rgba(40,32,27,.68);--s1-solid:#221c18;--s2:rgba(255,255,255,.045);--s3:rgba(255,255,255,.07);
  --line:rgba(255,235,215,.08);--line2:rgba(255,235,215,.15);
  --tx:#f6ede4;--tx2:#b3a596;--tx3:#8f8274;
  --ac:#ff7550;--ac-fill:#ff7550;--ac-fill-hi:#ff8a68;--ac-ink:#1c0904;--ac-tx:#ff8a68;--ac-soft:rgba(255,117,80,.14);
  --ok:#4fd197;--ok-soft:rgba(79,209,151,.13);--warn:#f2b54b;--warn-soft:rgba(242,181,75,.13);--bad:#ff7a7f;--bad-soft:rgba(255,122,127,.13);
  --ring:0 0 0 3px rgba(255,117,80,.35);
  --glow:inset 0 1px 0 rgba(255,255,255,.06);
  --e-1:0 24px 48px -28px rgba(0,0,0,.6);--e-2:0 24px 60px -20px rgba(0,0,0,.7);--e-3:0 40px 100px -30px rgba(0,0,0,.85);
  --scrim:rgba(0,0,0,.5);
  --og:rgba(30,24,20,.8);--og-line:rgba(255,235,215,.13);
  --app-bg:radial-gradient(700px 420px at 12% 0%,rgba(255,120,70,.16) 0,transparent 60%),radial-gradient(800px 500px at 95% 10%,rgba(140,110,255,.14) 0,transparent 60%),radial-gradient(900px 600px at 50% 110%,rgba(60,180,130,.08) 0,transparent 60%),var(--bg);
  --floor:#2a211a;--wall:#1d1814;
}}
:root[data-rm=on]{--d-1:0ms;--d-2:0ms;--d-3:0ms;--d-4:0ms}
@media (prefers-reduced-motion:reduce){:root{--d-1:0ms;--d-2:0ms;--d-3:0ms;--d-4:0ms}}

/* Public home page (/ for signed-out visitors, design/home.html). Served as /welcome/home.css after a copy of the Studio tokens
   (web/src/lib/styles/tokens.css, prepended by home.py), so it reads token names only. Layout follows the width of .lp-wrap (container
   queries), which lets the board show the real phone layout in a frame. No JavaScript on this page. */
@font-face{font-family:"Bricolage Grotesque Variable";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/welcome/bricolage.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0}
body{background:var(--app-bg);background-attachment:fixed;color:var(--tx);-webkit-font-smoothing:antialiased;overflow-x:clip}
.lp-wrap{container-type:inline-size}
.lp{--w:1160px;--gap:clamp(56px,9cqi,112px);color:var(--tx);font:var(--t-body);display:grid;gap:var(--gap);padding:0 16px 40px;overflow-x:clip}
.lp>*{width:100%;max-width:var(--w);margin:0 auto;min-width:0}
.lp h1,.lp h2,.lp h3,.lp p,.lp ol,.lp ul{margin:0}
.lp a{color:inherit}
.lp-nav{display:flex;align-items:center;gap:var(--s-4);padding:14px 0;position:sticky;top:0;z-index:5}
.lp-nav::before{content:"";position:absolute;inset:0 -100vw;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-bottom:1px solid var(--line);z-index:-1}
.lp-brand{display:flex;align-items:center;gap:10px;font:600 18px/1 var(--f-ui);letter-spacing:-.02em;text-decoration:none}
.lp-wordmark{display:block;width:auto;height:31px}
.lp-logo{display:inline-block;width:auto;height:30px}
.lp-logo.sm{height:20px;vertical-align:-4px;margin-right:4px}
.lp-links{display:flex;gap:var(--s-5);margin-left:auto;font:500 14px var(--f-ui)}
.lp-links a{text-decoration:none;color:var(--tx2)}
.lp-links a:hover{color:var(--tx)}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-md);padding:0 16px;border-radius:var(--r-pill);font:600 14px/1 var(--f-ui);text-decoration:none;white-space:nowrap;background:var(--s1);border:1px solid var(--line2);color:var(--tx);box-shadow:var(--glow);transition:background var(--d-1),transform var(--d-1) var(--ease-out)}
.lp-btn:hover{background:var(--s2)}
.lp-btn:active{transform:translateY(1px)}
.lp-btn:focus-visible,.lp-links a:focus-visible,.lp-brand:focus-visible{outline:none;box-shadow:var(--ring)}
.lp-btn.primary{background:var(--ac-fill);border-color:transparent;color:var(--ac-ink);box-shadow:0 10px 24px -12px var(--ac)}
.lp-btn.primary:hover{background:var(--ac-fill-hi)}
.lp-btn.ghost{background:transparent;border-color:transparent;color:var(--tx2)}
.lp-btn.ghost:hover{color:var(--tx);background:var(--s3)}
.lp-btn.sm{height:var(--h-sm);padding:0 14px;font-size:13px}
.lp-btn.lg{height:var(--h-lg);padding:0 22px;font-size:15px}
.lp-btn.xs{height:24px;padding:0 10px;font-size:11.5px;box-shadow:none}
.lp-nav .lp-btn{margin-left:var(--s-2)}

.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;font:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--ac-tx)}
.lp-dot{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 4px var(--ac-soft)}
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4cqi,56px);align-items:center;margin-top:calc(var(--gap) * -1 + clamp(24px,5cqi,64px))}
.lp-copy{display:grid;gap:var(--s-5);justify-items:start}
.lp h1{font:600 clamp(34px,4cqi,52px)/1.04 var(--f-ui);letter-spacing:-.04em;text-wrap:balance}
.lp-lead{font:400 17px/1.55 var(--f-ui);color:var(--tx2);max-width:46ch}
.lp-ctas{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.lp-fine{font:var(--t-cap);color:var(--tx3)}
.lp-shot{position:relative;margin:0;border-radius:var(--r-lg);padding:6px;background:var(--s1);border:1px solid var(--line);box-shadow:var(--e-3)}
.lp-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--r-lg) - 6px);background:#0b0d16}
.lp-float{position:absolute;display:grid;gap:6px;padding:10px 12px;border-radius:var(--r-md);background:var(--og);border:1px solid var(--og-line);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));box-shadow:var(--e-2);font:var(--t-cap);color:var(--tx);max-width:230px}
.lp-float b{font:600 13px/1.3 var(--f-ui)}
.lp-float small{color:var(--tx2);font:var(--t-cap)}
.lp-float .lp-k{font:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--ac-tx)}
.f1{top:18px;left:-18px;grid-template-columns:auto 1fr;align-items:center;gap:10px}
.f1 div{display:grid}
.f2{right:-14px;bottom:26%;min-width:200px}
.f3{left:22px;bottom:-22px;min-width:220px}
.lp-pres{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.lp-mini{display:flex;gap:6px;margin-top:2px}
.lp-meter{height:6px;border-radius:var(--r-pill);background:var(--s3);overflow:hidden}
.lp-meter i{display:block;height:100%;border-radius:inherit;background:var(--ac)}

.lp-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.lp-pillars>div,.lp-feats>article{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-6);border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);box-shadow:var(--glow),var(--e-1);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.lp-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ac-soft);color:var(--ac-tx);font:600 18px/1 var(--f-ui);margin-bottom:var(--s-2)}
.lp h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.lp-pillars p,.lp-feats p,.lp-steps p{color:var(--tx2);font:var(--t-body)}

.lp-sec{display:grid;gap:var(--s-7)}
.lp-sec>header{display:grid;gap:var(--s-2)}
.lp h2{font:600 clamp(26px,3.2cqi,38px)/1.1 var(--f-ui);letter-spacing:-.03em;text-wrap:balance}
.lp-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);counter-reset:s}
.lp-steps li{display:grid;gap:var(--s-2);align-content:start;padding-top:var(--s-4);border-top:2px solid var(--line2)}
.lp-steps li:first-child{border-top-color:var(--ac)}
.lp-n{font:var(--t-micro);letter-spacing:var(--tr-micro);color:var(--ac-tx)}
.lp-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.lp-feats h3::before{content:"";display:block;width:22px;height:3px;border-radius:2px;background:var(--ac);margin-bottom:var(--s-3)}

.lp-safe{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start;padding:clamp(24px,4cqi,48px);border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);box-shadow:var(--glow),var(--e-1)}
.lp-checks{list-style:none;padding:0;display:grid;gap:var(--s-4)}
.lp-checks li{position:relative;padding-left:32px;color:var(--tx2)}
.lp-checks li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);font:600 12px/1 var(--f-ui)}
.lp-checks b{color:var(--tx);font-weight:600}

.lp-end{display:grid;justify-items:center;text-align:center;gap:var(--s-3);padding:clamp(32px,6cqi,72px) 0}
.lp-end p{color:var(--tx2)}
.lp-end .lp-btn{margin-top:var(--s-3)}
.lp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);padding-top:var(--s-5);border-top:1px solid var(--line);font:var(--t-cap);color:var(--tx3)}

@container (max-width:900px){
  .lp-hero{grid-template-columns:minmax(0,1fr)}
  .lp-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-6)}
  .lp-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-safe{grid-template-columns:minmax(0,1fr)}
  .f1{left:12px}.f2{right:12px}
}
@container (max-width:600px){
  .lp-links{display:none}
  .lp-nav .lp-btn{margin-left:auto}
  .lp-pillars,.lp-feats,.lp-steps{grid-template-columns:minmax(0,1fr)}
  .lp-pillars>div,.lp-feats>article{padding:var(--s-5)}
  .lp-lead{font-size:16px}
  .lp-ctas{display:grid;width:100%}
  .lp-shot{margin-bottom:var(--s-7)}
  .f1{display:none}
  .f2{right:10px;bottom:auto;top:10px;min-width:0;max-width:200px}
  .f3{left:10px;right:10px;bottom:-40px;min-width:0;max-width:none}
}
@media (prefers-reduced-motion:reduce){.lp-btn{transition:none}}

/* request access */
.w52{width:52%}
.lp-req{width:100%;max-width:560px;display:grid;gap:var(--s-3);text-align:left;margin-top:var(--s-6);padding:var(--s-6);border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);box-shadow:var(--glow),var(--e-1);scroll-margin-top:80px}
.lp-req h3{text-align:center}
.lp-req>p{color:var(--tx2);font:var(--t-sm);text-align:center}
.lp-field{display:grid;gap:6px;font:500 13px var(--f-ui)}
.lp-field small{color:var(--tx3);font:var(--t-cap)}
.lp-field input,.lp-field textarea{width:100%;min-width:0;font:var(--t-body);font-size:16px;color:var(--tx);background:var(--s2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:9px 12px}
.lp-field textarea{min-height:84px;resize:vertical}
.lp-field input:focus-visible,.lp-field textarea:focus-visible{outline:none;box-shadow:var(--ring);border-color:transparent}
.lp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3)}
.lp-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lp-req .lp-btn{justify-self:center;margin-top:var(--s-2)}
.lp-req button.lp-btn{cursor:pointer}
.lp-msg{margin:0;padding:10px 14px;border-radius:var(--r-md);font:var(--t-sm)}
.lp-msg.bad{background:var(--bad-soft);color:var(--bad)}
.lp-msg.ok{background:var(--ok-soft);color:var(--ok);text-align:center}
.lp-or{color:var(--tx3);font:var(--t-cap)}
.lp-fine a{color:var(--ac-tx)}
@container (max-width:600px){.lp-two{grid-template-columns:minmax(0,1fr)}.lp-req{padding:var(--s-5)}}
.lp-main{display:grid;gap:var(--gap)}