:root{--ink:#14213D;--ground:#FAF7F2;--muted:#46506A;--accent:#F2A541;--accent-text:#8A4B00;--stage:#0B1222;--stage-ink:#F4F1EA;--stage-muted:#AEB6C6;--line:#E3DDD2}@media (prefers-color-scheme:dark){:root{--ink:#F4F1EA;--ground:#131C30;--muted:#A9B1C1;--accent:#F2A541;--accent-text:#F2A541;--stage:#060B17;--stage-ink:#F4F1EA;--stage-muted:#AEB6C6;--line:#4A5880}}
/* One family, four sizes: display, title, lede, body (and small for labels). Amber is a fill, and text only on
   the dark stage (--accent-text on light grounds passes AA). The stage stays dark in both colour schemes. */
:root{color-scheme:light dark;--display:clamp(2.75rem,7.6vw,6.5rem);--title:clamp(2.1rem,5.2vw,4.25rem);
  --lede:clamp(1.15rem,1.9vw,1.45rem);--body:1.0625rem;--small:.9375rem;--r:18px;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--body)/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
h1,h2{font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h1{font-size:var(--display)}
h2{font-size:var(--title)}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.stage :focus-visible{outline-color:var(--accent)}.more :focus-visible{outline-color:#14213D}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#14213D;padding:8px 14px;border-radius:8px;z-index:9}
.skip:focus{left:12px}
.inner{width:min(1100px,100% - 32px);margin-inline:auto}
.narrow{width:min(680px,100% - 32px)}
/* header and footer */
.top{background:var(--ground);border-bottom:1px solid var(--line)}
.top .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:-.01em}
.brand-pod{width:36px;height:auto}
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:var(--small)}
.foot .inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:32px 0}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
/* the mark */
.pod .pod-shell{fill:none;stroke:var(--accent-text);stroke-width:4.5}
.pod .seat{fill:var(--accent-text)}
.stage .pod .pod-shell{stroke:var(--accent)}.stage .pod .seat{fill:var(--accent)}
.pod .seat-open{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:3.2 2.25}
/* buttons */
.btn{display:inline-block;background:var(--accent);color:#14213D;font:700 1.0625rem/1 var(--font);text-decoration:none;
  padding:17px 30px;border-radius:999px;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.small{padding:11px 18px;font-size:var(--small)}
/* blocks */
.block{padding:clamp(72px,14vh,150px) 0;text-align:center}
.lede{font-size:var(--lede);color:var(--muted);max-width:34ch;margin:24px auto 0;line-height:1.5}
.eyebrow{font-weight:700;font-size:var(--small);letter-spacing:.02em;color:var(--accent-text);margin-bottom:18px}
.stage{background:var(--stage);color:var(--stage-ink)}
.stage .lede{color:var(--stage-muted)}
.stage .eyebrow,.stage .accent{color:var(--accent)}
.hero{min-height:calc(100svh - 65px);display:grid;align-items:center}
.hero h1{max-width:20ch;margin-inline:auto}
.hero .accent{display:block}
.hero .btn{margin-top:40px}
.hero-pod{width:clamp(96px,14vw,124px);height:auto;margin:0 auto 36px;display:block}
.statement h2{max-width:15ch;margin-inline:auto}
/* step one's picture: the visitor's own site, unchanged, with a sign-in button in its header */
.win.site-fig{max-width:620px;margin:56px auto 0;text-align:left}
.site-nav{display:flex;align-items:center;gap:10px}
.site-logo{width:28px;height:28px;border-radius:8px;background:var(--line)}
.site-links{display:flex;gap:8px;flex:1}.site-links i{width:44px;height:9px;border-radius:5px;background:var(--line)}
.site-signin{display:flex;align-items:center;gap:6px;font-size:var(--small);font-weight:700;border:1.5px solid var(--accent-text);
  color:var(--accent-text);border-radius:999px;padding:6px 12px}
.site-signin .pod{width:24px;height:auto}
.site-fig .bar{height:12px;border-radius:6px;background:var(--line)}.site-fig .bar.short{width:62%}.site-fig .bar.hero-bar{height:22px;width:78%;margin-top:14px}
.visitor h2{max-width:15ch;margin-inline:auto}
/* the demo: two windows side by side by default (no JS, reduced motion) */
.demo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:56px auto 0;text-align:left}
.win{margin:0;display:flex;flex-direction:column;background:color-mix(in srgb,var(--ground) 90%,#fff);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 70px -45px rgba(11,18,34,.55)}
.win-bar{display:flex;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.win-body{padding:24px;display:grid;gap:12px;min-height:224px;align-content:start;flex:1}
.win-title{font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.win-label{font-size:var(--small);font-weight:700;color:var(--muted);padding:0 24px 18px}
.gate{border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:9px;text-align:center}
.opt{display:block;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:var(--small)}
.js .demo.reset *{transition:none!important;animation:none!important}
.payoff{font-weight:700;color:var(--accent-text)}
.replay{margin:8px auto 0;grid-column:1/-1;font:600 var(--small) var(--font);background:none;border:1px solid var(--line);
  color:var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer}
/* with JS and motion allowed: one window that opens */
@media (prefers-reduced-motion:no-preference){
  .js .demo{grid-template-columns:1fr;max-width:620px}
  .js .demo .win{grid-area:1/1}
  .js .demo .win-label{display:none}
  .js .demo .win:last-of-type{opacity:0;transform:translateY(10px) scale(.985);transition:opacity .7s ease,transform .7s ease}
  .js .demo .win:first-of-type{transition:opacity .5s ease}
  .js .demo.play .win:first-of-type{opacity:0;transition-delay:.9s}
  .js .demo.play .win:last-of-type{opacity:1;transform:none;transition-delay:1.2s}
  .js .demo.play .opt:first-of-type{animation:press .9s ease both}
  .hero-pod .seat{animation:seat .7s cubic-bezier(.2,.8,.2,1) both}
  .hero-pod .seat:nth-of-type(2){animation-delay:.15s}.hero-pod .seat:nth-of-type(3){animation-delay:.3s}
}
@keyframes press{0%{transform:none}35%,70%{transform:scale(.97);background:var(--accent);border-color:var(--accent);color:#14213D}100%{background:var(--accent);border-color:var(--accent);color:#14213D}}
@keyframes seat{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.more{background:var(--accent);color:#14213D}
.more .eyebrow,.more .lede{color:#14213D}
.more h2{max-width:16ch;margin-inline:auto}
.more-pod{width:150px;height:auto;margin:0 auto 28px;display:block;color:#14213D}
.more-pod .pod-shell{stroke:#14213D}.more-pod .seat{fill:#14213D}.more-pod .seat-open{fill:none;stroke:#14213D}
.badge{display:inline-block;margin-top:28px;border:2px solid #14213D;border-radius:999px;padding:7px 16px;font-weight:700;font-size:var(--small)}
.cta .btn{margin-top:36px}
.cta h2{max-width:14ch;margin-inline:auto}
.prose,.questions,.waitlist{text-align:left}
.prose h1,.questions h1,.waitlist h1{font-size:var(--title)}
.prose p{margin-top:18px;color:var(--muted);font-size:1.15rem}
.prose + .cta{padding-top:0}
.questions details{border-top:1px solid var(--line);padding:18px 0}
.questions details:last-child{border-bottom:1px solid var(--line)}
.questions summary{cursor:pointer;font-weight:700;font-size:1.15rem;list-style-position:inside}
.questions details p{margin-top:10px;color:var(--muted)}
.questions h1{margin-bottom:32px}
.waitlist .lede{margin:20px 0 0;max-width:none}
.waitlist form{display:grid;gap:18px;margin-top:32px;max-width:30rem}
.waitlist label,#check-label{display:block;font-weight:700;margin-bottom:6px}
.waitlist input[type=email],.waitlist input[type=url]{width:100%;padding:13px 14px;font:inherit;color:var(--ink);background:var(--ground);
  border:2px solid var(--muted);border-radius:10px}
.waitlist .note{color:var(--muted);font-size:var(--small)}
.waitlist .cf-turnstile{min-height:65px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-left:4px solid #B42318;background:#FDECEA;color:#5C1A1A;margin-top:18px;border-radius:6px}
.form-error[hidden]{display:none}
.form-error-icon{flex:none;margin-top:1px}
.prose-icon{display:block;color:var(--ink);margin-bottom:20px}
@media (max-width:720px){
  .demo{grid-template-columns:1fr}
  .top .btn.small{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}