@font-face{font-family:Inter;src:url('/fonts/inter-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-400i.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-600.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-700.ttf') format('truetype');font-weight:700;font-display:swap}

:root{--bg:#100e0f;--surface:#191517;--raised:#211c1e;--ink:#f3eee6;--muted:#b4aaa9;--line:#393033;--soft:#2b2226;--wine:#6e1028;--accent:#b89a68;--wash:#221419;--button:#f1e9da;--button-ink:#23171b;--shadow:0 28px 100px #0006;--scene:#151012;--glass:#21181de8;--radius:20px;color-scheme:dark}
:root[data-theme=light]{--bg:#f8f5ef;--surface:#f0eae3;--raised:#fffdf8;--ink:#241b20;--muted:#524749;--line:#d9cec7;--soft:#e8ded7;--accent:#79572c;--wash:#eee2df;--button:#6e1028;--button-ink:#fff7ee;--shadow:0 28px 100px #582b281c;--scene:#e9e0d9;--glass:#fffcf4ed;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,sans-serif;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button{color:inherit}a,button{touch-action:manipulation}img,svg{max-width:100%;display:block}p{color:var(--muted);margin:0 0 24px}h1,h2,h3,h4{font-weight:400;line-height:1.12;margin:0 0 24px}h1,h2{font-family:'Playfair Display',serif;letter-spacing:-.045em}h1{font-size:clamp(54px,6.8vw,100px)}h2{font-size:clamp(36px,4.3vw,64px)}h3{font-size:23px;letter-spacing:-.035em;line-height:1.28}h4{font-size:16px;margin-bottom:8px}em{font-weight:400;color:var(--accent)}strong,b{font-weight:500}::selection{background:#6e1028;color:#fff7ef}:focus-visible{outline:2px solid var(--accent);outline-offset:6px}section[id]{scroll-margin-top:100px}
.wrap{max-width:1280px;width:calc(100% - 112px);margin-inline:auto}.section{padding-block:110px}.section+.section{border-top:1px solid var(--line)}.two-col{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}.two-col>*,.three-col>*{min-width:0}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.section-head{max-width:800px;margin-bottom:48px}.section-head>p:last-child{max-width:580px}.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--accent);display:block;margin-bottom:20px;line-height:1.5}.lede{font-size:20px;line-height:1.6;letter-spacing:-.025em;max-width:670px}.muted{color:var(--muted)}.fine-print,.proof-label{font-size:11px;line-height:1.65;color:var(--muted)}.fine-print a{text-decoration:underline}.proof-label{display:inline-block}.tag{font-size:10px;border:1px solid var(--line);border-radius:30px;padding:5px 10px;color:var(--accent);white-space:nowrap}.status-dot,.mini-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:7px;vertical-align:middle}.button{display:inline-flex;gap:18px;align-items:center;justify-content:center;min-height:49px;padding:13px 22px;background:var(--button);color:var(--button-ink);border:1px solid transparent;border-radius:7px;font-size:12px;font-weight:500;line-height:1.5;transition:background .2s,transform .2s,box-shadow .2s;text-align:center}.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 25px #6e102830}.button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}.button.secondary:hover{background:var(--soft)}.button.text{background:transparent;color:var(--muted);border-color:transparent}.button.compact{min-height:39px;font-size:11px;padding:9px 14px}.text-link{font-size:12px;display:inline-flex;align-items:center;gap:16px;min-height:44px;border-bottom:1px solid var(--line)}.text-link:hover{color:var(--accent)}.hero-actions,.closing-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin:28px 0 18px}.skip-link{position:fixed;top:-100px;left:16px;padding:12px 20px;z-index:200;background:var(--button);color:var(--button-ink)}.skip-link:focus{top:16px}.review-banner{height:26px;display:flex;justify-content:space-between;align-items:center;padding:0 32px;background:var(--wine);color:#f9e9df;font-size:8px;letter-spacing:.15em}.review-banner span{letter-spacing:.03em}

/* Navigation is deliberately quiet; both theme and menu remain visible at 375px. */
.site-header{height:83px;max-width:1500px;margin:auto;padding:0 40px;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--line);position:relative;z-index:30;background:var(--bg)}.wordmark{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;letter-spacing:.3em;text-indent:.3em;display:inline-flex;align-items:center;line-height:1;white-space:nowrap;color:var(--ink)}.wordmark img{width:29px;height:33px;margin-right:12px;object-fit:contain}.wordmark-dot{color:var(--accent)}.desktop-nav{display:flex;gap:25px;margin-left:15px}.desktop-nav a{font-size:12px;color:var(--muted)}.desktop-nav a:hover,.desktop-nav a[aria-current]{color:var(--ink)}.header-actions{display:flex;align-items:center;gap:21px;margin-left:auto}.nav-invite{font-size:12.5px;font-weight:500}.theme-toggle{border:0;background:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--muted);font-size:10px}.theme-glyph{font-size:20px}.menu-toggle{display:none;width:40px;height:44px;border:0;background:none;padding:10px}.menu-toggle span{display:block;height:1px;background:var(--ink);margin:6px 0}.mobile-menu{padding:18px 24px 26px;background:var(--surface);border-bottom:1px solid var(--line);position:absolute;top:109px;left:0;right:0;z-index:25;box-shadow:var(--shadow)}.mobile-menu a{display:block;padding:12px 5px;font-size:15px}.mobile-menu a[aria-current]{color:var(--accent)}

/* The hero is a spatial product scene, not an image pretending to be a live application. */
.hero{padding-top:82px;padding-bottom:70px;position:relative;background:radial-gradient(72% 92% at 86% -18%,var(--wash),transparent 60%)}.hero-heading{display:grid;grid-template-columns:1.35fr 1fr;gap:0 68px;align-items:start}.hero-lead{grid-column:1;grid-row:1}.hero-cta{grid-column:1;grid-row:2;align-self:end}.hero-aside{grid-column:2;grid-row:1/3;align-self:start;margin-top:37px}.hero h1{font-size:clamp(50px,5.55vw,82px);line-height:1.1;margin:0}.hero-aside{padding-bottom:5px}.hero-heading .lede{font-size:19px;line-height:1.6;color:var(--ink);margin:20px 0 15px}.hero-aside>p:not(.lede){font-size:13px;max-width:370px;margin-bottom:18px}.hero-heading .hero-actions{gap:22px;margin-top:22px}.hero-heading .button{font-size:11px;padding-inline:17px}.hero-heading .text-link{font-size:12px;gap:8px;border:0;font-weight:500}.hero-heading .fine-print{font-size:10px}.showroom .section-head{margin-bottom:40px}.showroom{padding-block:8px 4px}.scene-toolbar{height:49px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:var(--muted);font-size:10px}.tiny-v{font-weight:600;color:var(--ink);margin-right:8px}.operating-canvas{height:535px;position:relative;overflow:hidden;perspective:1400px;background:radial-gradient(ellipse at 28% 55%,#6e102855,transparent 56%),linear-gradient(110deg,transparent,var(--surface))}.operating-canvas:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 90%,var(--scene));z-index:8}.orbital-field{position:absolute;left:5%;top:13%;height:400px;width:450px;transform:rotateX(45deg) rotateZ(-25deg);transform-style:preserve-3d}.orbit{position:absolute;border:1px solid #c1a17055;border-radius:50%;inset:20px;box-shadow:inset 0 0 70px #6e10282b,0 0 20px #6e102816;animation:orbital 22s linear infinite}.orbit:after{content:"";position:absolute;left:21%;top:11%;width:6px;height:6px;border-radius:50%;background:#d3b98a;box-shadow:0 0 15px #d3b98a}.orbit-two{inset:66px;animation-direction:reverse;animation-duration:17s}.orbit-three{inset:112px;animation-duration:28s}.brand-core{position:absolute;top:151px;left:173px;transform:rotateZ(25deg) rotateX(-45deg);width:88px;height:88px;border-radius:24px;box-shadow:0 0 60px #a4164590}.brand-core img{border-radius:24px}.mission-window{position:absolute;width:490px;right:17%;top:50px;background:var(--glass);border:1px solid var(--line);border-radius:13px;box-shadow:0 35px 65px #0004;backdrop-filter:blur(20px);transform:rotateY(-7deg) rotateX(4deg);z-index:3;animation:float-window 8s ease-in-out infinite}.window-top{height:46px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 22px;border-bottom:1px solid var(--line);color:var(--muted);font-size:10px}.window-dots{display:flex;gap:5px}.window-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.4}.window-badge{font-size:8px;border:1px solid var(--line);padding:2px 6px;border-radius:4px}.mission-content{padding:24px}.mission-content .eyebrow{font-size:8px;margin-bottom:8px}.mission-brief{font-size:24px;line-height:1.45;color:var(--ink);letter-spacing:-.7px;margin-bottom:24px}.mission-response{display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.mission-response img{border-radius:6px}.mission-response strong{font-size:11px}.mission-response p{font-size:10px;line-height:1.7;max-width:330px;margin:4px 0 16px;min-height:35px}.mission-artifacts{display:grid;grid-template-columns:1fr;gap:6px}.mission-artifacts>div{display:flex;gap:11px;align-items:center;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:10px}.mission-artifacts small{display:block;font-size:8px;color:var(--muted)}.file-icon{font-size:16px;color:var(--accent)}.artifact-state{margin-left:auto;font-size:9px;color:var(--accent)}.mission-bottom{display:flex;align-items:center;height:37px;border-top:1px solid var(--line);padding:0 24px;font-size:9px;color:var(--accent)}.floating-card{position:absolute;z-index:4;border:1px solid var(--line);border-radius:10px;box-shadow:0 25px 40px #0003;background:var(--glass);backdrop-filter:blur(16px)}.research-card{left:4%;top:30px;width:220px;padding:16px;transform:rotate(-4deg);animation:float-card 7s ease-in-out infinite}.artifact-label{display:flex;align-items:center;gap:6px;font-size:8px;color:var(--muted)}.artifact-label .mini-dot{margin-left:auto}.artifact-symbol{font-size:17px;color:var(--accent)}.research-card p{font-size:14px;color:var(--ink);margin:10px 0}.market-bars{height:50px;display:flex;align-items:end;gap:9px;border-bottom:1px solid var(--line);margin-bottom:8px}.market-bars i{display:block;width:16px;height:40%;background:linear-gradient(#aa6471,#6e1028);border-radius:2px 2px 0 0;animation:bar-grow 4s ease-in-out infinite alternate;transform-origin:bottom}.market-bars i:nth-child(2n){height:68%;animation-delay:.5s}.market-bars i:nth-child(3n){height:50%;animation-delay:1s}.market-bars i:nth-child(4n){height:90%;animation-delay:1.5s}.research-card .fine-print{font-size:8px}.creative-card{left:11%;bottom:27px;width:205px;transform:rotate(5deg);animation:float-card 9s ease-in-out infinite reverse}.creative-art{height:155px;background:radial-gradient(ellipse at 65% 15%,#b06959,#6e1028 52%,#2a1019);position:relative;overflow:hidden;border-radius:9px 9px 0 0;color:#fff4e7}.creative-art>span{position:absolute;left:17px;top:25px;font-family:'Playfair Display',serif;font-size:24px;line-height:1.2;letter-spacing:-.6px}.creative-ring{position:absolute;width:200px;height:200px;border:30px solid #e5c19244;border-radius:50%;bottom:-100px;right:-15px;box-shadow:0 0 40px #d4b9944d,inset 0 0 40px #d4b9944d}.creative-caption{display:flex;justify-content:space-between;padding:11px 16px;font-size:9px}.approval-float{right:3%;bottom:56px;width:230px;padding:18px;transform:rotate(4deg);z-index:6}.approval-float .eyebrow{font-size:7px;margin-bottom:12px}.approval-float>p{font-size:16px;color:var(--ink);margin-bottom:12px}.approval-preview{font-size:9px;color:var(--muted);margin-bottom:20px}.approval-chip{font-size:9px;display:flex;justify-content:space-between;border:1px solid var(--line);padding:9px;border-radius:4px;color:var(--accent)}[data-scene="2"] .approval-float{box-shadow:0 0 0 1px var(--accent),0 12px 60px #6e10285e;transform:rotate(0deg) translateY(-6px)}.scene-controls{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:0 22px;gap:20px}.scene-stages{display:flex;flex:1}.scene-stages button{padding:20px 24px;background:none;border:0;border-top:2px solid transparent;color:var(--muted);font-size:10px;min-height:52px}.scene-stages button span{font-size:9px;margin-right:8px;opacity:.6}.scene-stages button[aria-pressed=true]{color:var(--ink);border-top-color:var(--accent);background:linear-gradient(var(--soft),transparent)}.motion-control{background:transparent;border:0;color:var(--muted);font-size:9px;min-height:44px;white-space:nowrap}.motion-control span{margin-left:12px}.scene-disclosure{margin:0;padding:17px 20px;text-align:center;font-size:9px;border-top:1px solid var(--line)}.capability-strip{display:flex;justify-content:space-between;align-items:center;padding-block:38px;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.capability-strip>div{font-size:15px;color:var(--ink)}.capability-strip b{font-size:14px;color:var(--accent);padding:0 16px}

/* Mission selector, workbench and handoff. */
.scenario-layout{display:grid;grid-template-columns:390px 1fr;gap:65px}.scenario-tabs{display:flex;flex-direction:column;gap:5px}.scenario-tabs button{display:flex;align-items:center;gap:20px;text-align:left;background:none;color:var(--muted);border:0;border-bottom:1px solid var(--line);padding:27px 0}.scenario-tabs button>span{font-size:10px;color:var(--accent)}.scenario-tabs button>div{font-size:16px}.scenario-tabs small{display:block;font-size:11px;margin-top:7px}.scenario-tabs b{margin-left:auto;font-size:20px;font-weight:400}.scenario-tabs button[aria-selected=true]{color:var(--ink)}.scenario-tabs button[aria-selected=true] b{color:var(--accent)}.scenario-panel{padding:36px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.scenario-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:33px;gap:15px}.scenario-panel h3{font-family:'Playfair Display',serif;font-size:32px;letter-spacing:-.035em}.scenario-panel>p{font-size:13px;max-width:480px}.flow-map{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:30px 0}.flow-map span{font-size:9px;padding:11px 13px;border:1px solid var(--line);border-radius:5px;background:var(--bg)}.flow-map i{font-style:normal;color:var(--accent)}.decision-row{display:flex;gap:14px;align-items:center;padding-top:24px;border-top:1px solid var(--line)}.decision-icon{color:var(--accent);font-size:18px}.decision-row strong{font-size:11px}.decision-row p{font-size:10px;margin:0}.agent-teaser{background:var(--surface)}.agent-teaser .two-col{gap:100px}.agent-teaser .button{margin:10px 0 14px}.mini-workbench{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:var(--bg);transform:perspective(1100px) rotateY(-5deg) rotateX(3deg)}.rough-brief{font-size:14px;color:var(--muted);padding:26px 25px;border-bottom:1px solid var(--line)}.refined-brief{padding:26px}.refined-brief .eyebrow{font-size:8px;margin-bottom:12px}.refined-brief p{font-size:22px;line-height:1.5;color:var(--ink);margin-bottom:16px}.refined-brief>span{font-size:10px;color:var(--muted)}.code-preview{padding:25px;background:#121012;color:#eadfd8;font-family:monospace;font-size:12px;line-height:1.8;border-top:1px solid var(--line)}.code-muted{color:#a19799}.code-gold,.code-string{color:#d3b98a}.workbench-footer{display:flex;justify-content:space-between;padding:16px 25px;font-size:9px;color:var(--accent)}.guide-demo{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}.guide-browser{padding:20px}.browser-address{font-size:8px;background:var(--bg);padding:8px 12px;border-radius:5px;margin-bottom:10px;color:var(--muted)}.guide-page{background:var(--raised);min-height:345px;border:1px solid var(--line);border-radius:6px;padding:30px;position:relative}.guide-page .eyebrow{font-size:8px;margin-bottom:9px}.guide-page h3{font-family:'Playfair Display',serif;font-size:31px}.guide-lines{margin:20px 0}.guide-lines i{display:block;height:4px;width:95%;background:var(--line);margin:8px 0;border-radius:4px}.guide-lines i:nth-child(2){width:80%}.guide-lines i:nth-child(3){width:62%}.guide-target{font-size:10px;border:1px solid var(--accent);border-radius:5px;padding:12px;display:flex;justify-content:space-between;margin-top:24px;width:210px;box-shadow:0 0 0 5px var(--wash)}.guide-pointer{position:absolute;top:192px;left:175px;display:flex;align-items:flex-end;animation:pointer-move 5s ease-in-out infinite;z-index:2}.guide-pointer svg{width:25px;height:30px;fill:#6e1028;stroke:#f4e9d9;stroke-width:1.5;filter:drop-shadow(0 2px 5px #0005)}.guide-pointer span{background:#6e1028;color:#fff2e8;padding:2px 10px;font-size:8px;border-radius:3px;margin-left:-3px}.guide-tooltip{position:relative;margin-top:22px;border-left:2px solid var(--accent);padding-left:11px;max-width:290px}.guide-tooltip strong{font-size:10px}.guide-tooltip p{font-size:9px;line-height:1.65;margin:3px 0 0}.guide-switch{display:flex;padding:15px 20px;gap:12px;justify-content:center;border-top:1px solid var(--line)}.guide-switch button{min-height:41px;padding:8px 20px;border:1px solid var(--line);border-radius:5px;background:transparent;font-size:10px;color:var(--muted)}.guide-switch button[aria-pressed=true]{background:var(--button);color:var(--button-ink);border-color:transparent}[data-guide=take] .guide-pointer{animation:none;transform:translate(25px,-10px)}[data-guide=take] .guide-target{background:var(--wash)}.approval-section{background:var(--wash)}.approval-demo{border:1px solid var(--line);border-radius:12px;padding:30px;background:var(--bg);box-shadow:var(--shadow)}.approval-demo-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.approval-demo h3{font-size:21px;margin-bottom:12px}.approval-destination{font-size:10px}.approval-demo blockquote{margin:20px 0 28px;padding:18px;border-left:2px solid var(--accent);background:var(--surface);font-size:13px;line-height:1.8}.approval-actions{display:flex;gap:10px;flex-wrap:wrap}.approval-actions .button{font-size:11px;min-height:44px;padding:10px 18px}.approval-result{font-size:10px;margin:20px 0 0;color:var(--accent)}.approval-editor{margin-top:20px}.approval-editor label{font-size:11px}.approval-editor .button{margin-top:12px}.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.audience-grid>a{padding:28px 24px 0 0;border-right:1px solid var(--line);margin-right:24px;display:flex;flex-direction:column}.audience-grid>a:last-child{border:0;margin:0}.audience-grid>a>span:first-child{font-size:9px;color:var(--muted);margin-bottom:30px}.audience-grid h3{font-family:'Playfair Display',serif;font-size:25px;line-height:1.4}.card-arrow{margin-top:auto;font-size:22px;color:var(--accent)}.audience-grid>a:hover h3{color:var(--accent)}.closing{padding-block:110px;text-align:center;border-top:1px solid var(--line);background:radial-gradient(ellipse at 50% 100%,var(--wash),transparent 68%)}:root[data-theme=light] .closing{background:radial-gradient(ellipse at 50% 108%,#e9cfc8,#f3e6e2 42%,transparent 74%)}.closing .eyebrow{margin-bottom:23px}.closing h2{font-size:clamp(44px,5.5vw,82px)}.closing-actions{justify-content:center}.closing .button{margin:8px}.closing .two-col{text-align:left}.closing .two-col h2{font-size:52px}

/* Dedicated offer, review and invitation journeys. */
.access-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:110px;align-items:center}.access-hero h1{font-size:clamp(56px,6.6vw,91px)}.access-hero>div>p:not(.eyebrow){max-width:510px}.launch-pass{position:relative;overflow:hidden;border:1px solid #9b6c7150;border-radius:18px;background:radial-gradient(ellipse at 95% 25%,#a6656160,transparent 60%),linear-gradient(135deg,#32101e,#6e1028 63%,#270d17);color:#f5e9dc;padding:32px;box-shadow:0 40px 70px #0004;transform:perspective(1200px) rotateY(-8deg) rotateZ(2deg)}.pass-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.pass-top img{border-radius:12px}.pass-top>span{font-size:8px;letter-spacing:.13em;color:#d6bca8;line-height:1.8}.pass-content{position:relative;margin-top:95px;z-index:2}.pass-content .eyebrow{color:#d3b98a;font-size:9px}.pass-content h2{font-size:47px;margin-bottom:32px;color:#f5e9dc}.pass-line{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #dfb79b38;padding:14px 0;font-size:10px}.pass-line span:first-child{color:#d8bbb9}.pass-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;border-top:1px dashed #dfb79b55;margin-top:16px;padding-top:22px;font-size:7px;letter-spacing:.15em}.pass-orbit{position:absolute;inset:50px -160px auto auto;width:380px;height:380px;transform:rotateX(40deg) rotateZ(-25deg);pointer-events:none}.pass-orbit i{position:absolute;inset:0;border:1px solid #e8c49b55;border-radius:50%;box-shadow:0 0 20px #e8c49b10}.pass-orbit i:nth-child(2){inset:45px}.pass-orbit i:nth-child(3){inset:90px}.feature-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:32px}.feature-card p{font-size:13px;margin-bottom:20px}.feature-card p:last-child{margin-bottom:0}.feature-card h2{font-size:38px}.feature-card h3{font-size:23px;line-height:1.35;margin:20px 0 15px}.feature-card .tag{margin-bottom:15px;display:inline-block}.feature-number{font-family:'Playfair Display',serif;font-size:32px;color:var(--accent)}.access-story .fine-print{margin-top:26px}.offer-section{background:var(--surface)}.offer-steps{list-style:none;margin:0;padding:0}.offer-steps li{display:flex;gap:26px;border-bottom:1px solid var(--line);padding:26px 0}.offer-steps li>span{color:var(--accent);font-size:10px;padding-top:4px}.offer-steps h3{font-size:19px;margin:0 0 10px}.offer-steps p{font-size:13px;margin:0}.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}.plan-card{padding:28px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:linear-gradient(var(--surface),var(--bg))}.plan-card:last-child{border:0}.plan-card .eyebrow{margin-bottom:30px}.plan-amount{font-family:'Playfair Display',serif;letter-spacing:-.06em;font-size:40px;margin:0;white-space:nowrap}.plan-amount>span{font-family:Inter,sans-serif;font-size:9px;letter-spacing:0;margin-left:6px;color:var(--muted)}.plan-cadence{font-size:9px;margin:8px 0 25px}.plan-description{font-size:12px;min-height:63px;margin-bottom:25px}.plan-allowances{list-style:none;padding:23px 0 0;margin:0 0 25px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.plan-allowances li{margin-bottom:10px}.plan-allowances strong{color:var(--ink);margin-right:5px;font-size:14px}.plan-card .button{width:100%;font-size:11px;gap:10px;margin-top:auto;min-height:46px;padding-inline:8px}.plan-note{font-size:8px;color:var(--muted);text-align:center;margin-top:15px}.pricing-reference{font-size:10px;color:var(--accent);margin:0 0 18px}.credits-explainer{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;margin-top:40px;padding:32px;border:1px solid var(--line);border-radius:10px}.credits-explainer h3{font-size:21px;margin-bottom:0}.credits-explainer .eyebrow{font-size:8px;margin-bottom:10px}.credits-explainer p{font-size:12px;line-height:2;margin:0}.credits-explainer strong{color:var(--ink)}.enterprise-row{display:flex;align-items:center;justify-content:space-between;gap:50px;margin-top:40px;padding:25px 0}.enterprise-row h3{font-size:18px;margin-bottom:10px}.enterprise-row p{font-size:12px;margin:0}.enterprise-row .button{flex-shrink:0}.capacity-illustration{border:1px solid var(--line);background:var(--surface);padding:30px;border-radius:12px;box-shadow:var(--shadow)}.capacity-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line);font-size:13px}.capacity-line{padding-top:25px}.capacity-line span{font-size:11px;display:block;margin-bottom:12px}.capacity-line i{display:block;border-radius:5px;height:8px;width:90%;background:linear-gradient(90deg,#6e1028,#c2967b)}.capacity-line:nth-child(3) i{width:73%}.capacity-line:nth-child(4) i{width:55%}.capacity-bottom{margin-top:30px;padding-top:25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--accent)}.faq-section{display:grid;grid-template-columns:1fr 1.2fr;gap:100px}.faq-list details{border-bottom:1px solid var(--line);padding:22px 0}.faq-list summary{list-style:none;display:flex;justify-content:space-between;gap:25px;font-size:14px;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:var(--accent);font-size:20px;font-weight:400;line-height:1}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{font-size:12px;margin:20px 0 5px}.faq-list a{text-decoration:underline}.reservation-page .section-head{margin-top:50px}.reservation-page h1{font-size:68px}.order-grid{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden}.order-details{padding:40px}.order-details h2{font-size:47px}.order-details>p{font-size:13px;max-width:500px}.order-total{background:var(--surface);padding:40px;border-left:1px solid var(--line)}.total-amount{font-family:'Playfair Display',serif;font-size:58px;line-height:1.2;letter-spacing:-.055em;color:var(--ink);margin:25px 0}.total-amount span{font:10px Inter,sans-serif;letter-spacing:0;margin-left:12px;color:var(--muted)}.status-note{font-size:10px;color:var(--accent);margin:25px 0}.order-total>p:not(.total-amount){font-size:12px}.order-total .button{width:100%;margin:5px 0 12px}.order-total .fine-print{margin-top:20px}.order-lines{margin:28px 0}.order-lines>div{display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding:15px 0;font-size:11px}.order-lines dt{color:var(--muted)}.order-lines dd{margin:0;text-align:right}.plan-switch label{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.inline-field{display:flex;gap:12px}.inline-field select{min-width:0}.seller-line{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:10px;color:var(--muted);padding:35px 0}.seller-line a{color:var(--accent)}.empty-state{padding:40px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.empty-state h2{font-size:35px}.invitation-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:120px}.invitation-layout h1{font-size:70px}.contact-card{margin-top:60px;padding-top:28px;border-top:1px solid var(--line)}.contact-card p{font-size:12px}.invitation-form{border:1px solid var(--line);border-radius:12px;padding:35px;background:var(--surface);align-self:start}.field{margin-bottom:23px}label{font-size:11px;display:block;margin-bottom:9px}label>span{color:var(--muted)}input,select,textarea{width:100%;min-height:47px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);padding:12px 14px;font-size:13px;line-height:1.7}input::placeholder,textarea::placeholder{color:var(--muted)}textarea{resize:vertical}select{padding-right:35px}input[type=checkbox]{width:16px;min-height:16px;accent-color:var(--wine);margin:2px 0 0;flex-shrink:0}.consent{display:flex;gap:12px;font-size:10px;margin:25px 0;align-items:flex-start}.consent a{text-decoration:underline}.invitation-form>.button{width:100%}.invitation-form>.fine-print{font-size:10px;margin:20px 0 0}.form-status{font-size:12px;margin:20px 0 0;color:var(--accent)}.form-status:empty{margin:0}.form-status.is-error{color:var(--ink)}.request-fallback{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}.request-fallback .fine-print{font-size:10px;margin:0 0 10px}.request-fallback-text{width:100%;font-size:12px;line-height:1.65;resize:vertical;min-height:130px}.request-fallback .button{width:100%;margin-top:10px}

/* Agent, audience and trust pages share the same editorial system. */
.display{font-size:clamp(50px,5.5vw,82px)}.list-clean{list-style:none;margin:0;padding:0}.list-clean>li{padding:16px 0;border-top:1px solid var(--line)}.list-clean>li p{font-size:12px;margin:0}.section .wrap>nav{display:flex;gap:12px;flex-wrap:wrap;margin:35px 0 25px}.section .wrap>.proof-label{margin-top:20px}.section .wrap>.button{margin-top:35px}.agent-workbench{display:grid;grid-template-columns:310px 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}.agent-rail{padding:28px;border-right:1px solid var(--line);background:var(--bg)}.agent-rail .eyebrow{font-size:9px;margin-bottom:28px}.agent-step{display:flex;align-items:flex-start;gap:15px;opacity:.55;transition:opacity .4s,background .4s}.agent-step .tag{font-size:9px;padding:4px 8px}.agent-step h3{font-size:14px;margin:3px 0 4px}.agent-step p{font-size:10px!important;max-width:190px}.agent-step.is-active{opacity:1}.agent-step.is-active .tag{background:var(--button);color:var(--button-ink);border-color:transparent}.code-window{padding:30px;min-width:0}.code-window>.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.code-window .section-head .eyebrow{margin:0}.code-window .feature-card{padding:22px;background:var(--bg)}.code-window .feature-card h3{font-size:20px}.code-window .feature-card .eyebrow{font-size:8px;margin-bottom:10px}.code-window .feature-card p{font-size:12px}.code-lines{padding:22px 0;font-size:12px}.code-lines p{font-size:11px;margin-bottom:17px}.code-lines .muted{font-size:9px;color:var(--accent)}.code-lines pre{overflow:auto;max-width:100%;font-size:11px;line-height:1.85;padding:18px;background:#100e0f;border:1px solid #3b2c32;border-radius:7px}.code-add{color:#d3b98a}.agent-demo-controls{display:flex;align-items:center;justify-content:space-between;margin:20px 0;font-size:11px;color:var(--muted)}.agent-demo-controls button{border:1px solid var(--line);border-radius:5px;padding:10px 18px;background:none;font-size:11px;min-height:44px}.agent-demo-controls p{margin:0}.section:has(#founders-title),.section:has(#developers-title){background:var(--surface)}.section:has(#founders-title) .feature-card,.section:has(#developers-title) .feature-card{background:var(--bg)}.section .feature-card .list-clean h4{font-size:13px}.section .feature-card .list-clean li{padding-block:17px}

.site-footer{padding:70px 0 25px}.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1.4fr 1fr;gap:45px}.footer-top .wordmark{font-size:36px;margin-bottom:22px}.footer-top p{font-size:11px}.footer-top>div>a:not(.wordmark){display:block;font-size:11px;line-height:1.5;margin:16px 0}.footer-top .eyebrow{font-size:9px;margin-bottom:26px}.footer-top .fine-print{display:block;font-size:9px;margin-top:-8px;max-width:190px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:9px;color:var(--muted);border-top:1px solid var(--line);margin-top:55px;padding-top:25px}

@keyframes orbital{to{transform:rotate(360deg)}}@keyframes float-window{50%{transform:rotateY(-5deg) rotateX(3deg) translateY(-7px)}}@keyframes float-card{50%{translate:0 -10px}}@keyframes bar-grow{from{scale:1 .7}to{scale:1 1}}@keyframes pointer-move{0%,100%{translate:0 0}50%{translate:13px -8px}}
.motion-paused *{animation-play-state:paused!important}
/* Long sales-page anchors should arrive immediately, including in background previews. */
html{scroll-behavior:auto}
.founding-section{background:var(--wash)}.founding-section .feature-card{background:var(--bg)}.founding-section .section-head{max-width:780px}.founding-section .fine-print{margin-top:25px;max-width:930px}.plan-benefit{font-size:11px;color:var(--ink);line-height:1.8;border-top:1px solid var(--line);padding:20px 0;margin-bottom:15px;min-height:123px}.plan-benefit .eyebrow{font-size:8px;margin-bottom:10px}.order-benefit{padding:20px;border:1px solid var(--line);border-radius:8px;margin:25px 0;background:var(--surface)}.order-benefit p{font-size:12px;margin-bottom:10px}.order-benefit p:last-child{margin-bottom:0}.order-benefit .eyebrow{font-size:9px}
.comparison-board{border:1px solid var(--line);border-radius:12px;overflow:hidden}.comparison-row{display:grid;grid-template-columns:.6fr 1.2fr 1.3fr;gap:35px;padding:24px 30px;border-bottom:1px solid var(--line);font-size:13px}.comparison-row:last-child{border:0}.comparison-row>span{color:var(--muted)}.comparison-row>span:last-child{color:var(--ink)}.comparison-heading{background:var(--surface);font-size:10px;letter-spacing:.07em;text-transform:uppercase}.comparison-heading>span:last-child{color:var(--accent)}.comparison-note{margin-top:20px}.mobile-menu{top:100%}.site-header:has(+.mobile-menu:not([hidden])){position:relative}.site-header+.mobile-menu{top:83px}.review-banner~.mobile-menu{top:109px}
/* ===== THE FILM, REBUILT 2026-09-22 =================================================   "it looks very clustered, it's very busy ... remove whatever isn't of value"   "comes off looking like a computer or a device"   "a line should run under this ... I didn't see it before"   One visual per beat, no toolbar, no brief bar, and the stage sits inside a device. */.film-head{margin-bottom:34px;border-top:1px solid var(--line);padding-top:34px}.film-head h2{margin-bottom:18px}.film-head h2 em{color:var(--accent)}:root[data-theme=light] .film-head h2 em{color:#79572c}.film-sub{font-size:13.5px;color:var(--muted);margin:0;max-width:430px}.film{margin-top:8px;scroll-margin-top:92px}/* THE TWO OFFSETS STACK, and that is why this landed 180px down for a 70px header:   html carries scroll-padding-top:80px for the sticky header, and section[id] adds another   100px of scroll-margin on top of it. Nobody chose 180. Everywhere else the target is a   paragraph and the waste is invisible; here the target is a HEADING PLUS A DEVICE that has   to fit one screen, so the doubled offset is the difference between both landing and the   device being cut off on a short phone. Scoped to this section rather than fixing the global   rule, because every other anchor on the site is positioned against the pair as it stands. */section.showroom[id]{scroll-margin-top:8px}/* `section[id]` is (0,1,1) and a bare `.showroom` is (0,1,0), so the plain class LOST and the   offset never changed. Caught by measuring the landing in the running app, not by reading. *//* THE DEVICE. He asked for the film to read as a screen rather than as more page. */.film-device{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:11px;box-shadow:0 34px 70px rgba(0,0,0,.30)}.film-screen{border-radius:9px;background:var(--scene);overflow:hidden;position:relative;border:1px solid var(--line)}.film-stage{position:relative;height:318px;overflow:hidden}.film-scene{position:absolute;inset:0;padding:26px 28px 24px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease,visibility .4s;display:flex;flex-direction:column}.film-scene.is-live{opacity:1;visibility:visible;transform:none}.fs-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}.fs-n{font-size:9px;letter-spacing:.14em;color:var(--accent);font-variant-numeric:tabular-nums}.fs-head h3{font-size:20px;letter-spacing:-.012em;margin:0;color:var(--ink);line-height:1.22}.fs-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}/* THE LINE THAT RUNS UNDER THE STATUS. This is the attention device he asked for by name. */.fs-status{margin:0;padding:16px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink)}.fs-status span{position:relative;display:inline-block;padding-bottom:5px}.fs-status span:after{content:"";position:absolute;left:0;bottom:0;height:2.5px;width:0;background:var(--accent);border-radius:2px}.is-live .fs-status span:after{animation:fsRule 2.3s cubic-bezier(.22,.7,.3,1) .55s forwards,fsBeat 2.6s ease-in-out 2.9s infinite}/* 00 typing */.fb-prompt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:17px 19px}.fb-caret-line{flex:1;min-width:0;font-family:'Playfair Display',serif;font-size:27px;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}.fb-caret-line b{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;font-weight:400}.is-live [data-typewriter]{animation:fbType 1.25s steps(21,end) .25s forwards}.fb-caret{display:inline-block;width:2px;height:24px;background:var(--accent);vertical-align:middle;margin-left:3px;animation:fbBlink 1.05s step-end infinite}.fb-enter{font-size:15px;color:var(--muted);flex:0 0 auto}/* 01 */.fb-parse{display:flex;flex-wrap:wrap;gap:8px}.fb-chip{font-size:11.5px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px 13px;background:var(--surface);opacity:0;animation:filmIn .4s ease forwards}.is-live .fb-chip:nth-child(1){animation-delay:.12s}.is-live .fb-chip:nth-child(2){animation-delay:.34s}.is-live .fb-chip:nth-child(3){animation-delay:.56s}.is-live .fb-chip:nth-child(4){animation-delay:.78s}/* 02 */.fb-count{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}.fb-count b{font-family:'Playfair Display',serif;font-size:42px;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}.fb-count span{font-size:12px;color:var(--muted)}.fb-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}.fb-rows li{display:flex;align-items:center;gap:10px;font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:9px 12px;background:var(--surface);opacity:0;animation:filmSlide .4s ease forwards}.fb-rows span{color:var(--ink)}.fb-rows b{margin-left:auto;color:var(--accent)}.is-live .fb-rows li:nth-child(1){animation-delay:.45s}.is-live .fb-rows li:nth-child(2){animation-delay:.75s}/* 03 */.fb-mail{border:1px solid var(--line);border-radius:8px;background:var(--surface);margin-bottom:13px;overflow:hidden}.fb-typed{margin:0;padding:15px;font-size:12px;line-height:1.62;color:var(--ink)}.is-live .fb-typed span{animation:filmType 1.9s steps(50,end) .25s both;display:inline-block;overflow:hidden}.fb-tally{display:flex;gap:26px;font-size:11px;color:var(--muted)}.fb-tally b{color:var(--ink);font-size:19px;margin-right:6px;font-variant-numeric:tabular-nums}/* 04 */.fb-quote{margin:0;padding:19px 21px;border-left:2px solid var(--accent);background:var(--surface);font-family:'Playfair Display',serif;font-size:21px;line-height:1.38;color:var(--ink);border-radius:0 7px 7px 0}/* 05 */.fb-code{margin:0 0 14px;padding:15px 17px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}.fb-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.85;color:var(--muted);white-space:pre;display:block}.fb-code b{color:var(--accent);font-weight:600}.fb-build-bar{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}.fb-build-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}.is-live .fb-build-bar i{animation:filmFill 2.9s ease-out .2s forwards}/* 06 */.fb-spark{display:flex;align-items:flex-end;gap:8px;height:74px;margin-bottom:15px}.fb-spark i{flex:1;background:linear-gradient(var(--accent),transparent);border-radius:2px 2px 0 0;height:20%;transform-origin:bottom;opacity:.6}.is-live .fb-spark i{animation:filmRise .55s ease-out forwards}.is-live .fb-spark i:nth-child(1){animation-delay:.08s;height:26%}.is-live .fb-spark i:nth-child(2){animation-delay:.14s;height:34%}.is-live .fb-spark i:nth-child(3){animation-delay:.2s;height:31%}.is-live .fb-spark i:nth-child(4){animation-delay:.26s;height:46%}.is-live .fb-spark i:nth-child(5){animation-delay:.32s;height:52%}.is-live .fb-spark i:nth-child(6){animation-delay:.38s;height:63%}.is-live .fb-spark i:nth-child(7){animation-delay:.44s;height:75%}.is-live .fb-spark i:nth-child(8){animation-delay:.5s;height:88%}.is-live .fb-spark i:nth-child(9){animation-delay:.56s;height:100%}.fb-kpis{display:flex;gap:30px;font-size:10px;color:var(--muted)}.fb-kpis b{display:block;font-size:21px;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}/* 07 */.fb-ab{display:grid;gap:8px}.fb-ab-row{display:flex;align-items:center;gap:14px;font-size:11.5px;border:1px solid var(--line);border-radius:7px;padding:12px 14px;background:var(--surface);color:var(--muted)}.fb-ab-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-ab-row i{font-style:normal;flex:0 0 auto}.fb-ab-row.is-win{border-color:var(--accent);color:var(--ink)}.fb-ab-row.is-win i{color:var(--accent);font-weight:600}/* 08 */.fb-fix{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-size:12.5px}.fb-fix-old{color:var(--muted);text-decoration:line-through}.fb-fix-arrow{color:var(--accent);font-size:16px}.fb-fix-new{color:var(--ink);font-weight:600}/* 09 */.fb-offer{border:1px solid var(--accent);border-radius:9px;padding:18px 20px;background:linear-gradient(var(--soft),transparent)}.fb-offer p{font-size:13px;line-height:1.6;color:var(--ink);margin:0 0 15px}.fb-offer b{color:var(--accent)}.fb-offer-actions{display:flex;align-items:center;gap:10px}.fb-approve,.fb-hold{font-size:11px;border-radius:6px;padding:9px 17px;border:1px solid var(--line)}.fb-approve{background:var(--wine);color:#f5f3ee;border-color:var(--wine)}/* 10 */.fb-loop-next{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:16px 18px}.fb-loop-next i{font-style:normal;color:var(--muted);margin-left:7px}.fb-next-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;animation:filmPulse 1.7s ease-in-out infinite}/* rail */.film-rail{display:flex;align-items:center;gap:18px;padding:14px 4px 0}.film-chapters{list-style:none;display:flex;gap:5px;flex:1;margin:0;padding:0}.film-chapters li{flex:1}.film-chapters button{display:block;width:100%;height:26px;background:none;border:0;padding:0;position:relative;cursor:pointer}.film-chapters button:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line);border-radius:2px}.fc-fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:var(--accent);border-radius:2px;z-index:1}.film-chapters li.is-done .fc-fill{width:100%}.film-toggle{background:none;border:0;color:var(--muted);font-size:10px;min-height:40px;white-space:nowrap;cursor:pointer}.film-toggle span{margin-left:8px}.film-note{font-size:10px;color:var(--muted);margin:6px 0 0;text-align:right}@keyframes fsRule{from{width:0}to{width:100%}}@keyframes fsBeat{0%,100%{opacity:1}44%{opacity:.34}58%{opacity:1}72%{opacity:.5}}@keyframes fbType{to{max-width:100%}}@keyframes fbBlink{50%{opacity:0}}@keyframes filmPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}@keyframes filmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes filmSlide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}@keyframes filmType{from{max-height:0}to{max-height:90px}}@keyframes filmFill{from{width:0}to{width:100%}}@keyframes filmRise{from{transform:scaleY(.08);opacity:.2}to{transform:scaleY(1);opacity:.6}}
/* ===== FILM-FIRST COMPARISON LAYOUT (?layout=film) ================================   Founder asked to SEE both orders rather than decide from description. Same markup, same   copy, different order: the film leads, the hero follows. Flex order only, so nothing is   duplicated and the loser deletes in one commit. */[data-layout=film] main{display:flex;flex-direction:column}[data-layout=film] main>*{order:3}[data-layout=film] .showroom{order:1;padding-top:26px}[data-layout=film] .hero{order:2}[data-layout=film] .showroom .film-head{border-top:0;padding-top:0}[data-layout=film] .hero{padding-top:54px;border-top:1px solid var(--line)}/* THE FILM'S CLOSER. The only large statement inside the device, on purpose: the film has been   showing for ten beats and this is the one beat that tells rather than shows, so it gets the   serif and the size that earns the pause before the loop restarts. *//* THE CLOSER HAS TO LAND, and a statement lands by being given room, not by being made louder.   Founder: "that part should slow down a bit and that part should get more attention ... it's an   exceptional message". Every other beat SHOWS something and reads at a glance; this one ASSERTS   something. So the two halves are staged rather than shown together: the setup arrives, holds   alone for most of a second, and the answer lands into the silence at a size the setup does not   have. Saying both at once makes it a sentence; saying them apart makes it an answer. */.fb-never{font-family:'Playfair Display',serif;font-weight:400;line-height:1.14;letter-spacing:-.028em;color:var(--ink);margin:0 0 22px;display:grid;gap:4px}.fb-never-a{font-size:27px;opacity:0;color:var(--muted)}.fb-never-b{font-style:normal;font-size:38px;font-weight:700;color:var(--accent);opacity:0;display:block;justify-self:start}/* justify-self:start so the box HUGS the words. As a full-width grid item its underline drew   1071px across the stage and read as a section divider rather than as emphasis on a line. */.is-live .fb-never-a{animation:filmIn .5s cubic-bezier(.2,.7,.3,1) .15s forwards}.is-live .fb-never-b{animation:neverLand .8s cubic-bezier(.2,.8,.25,1) 1.05s forwards}@keyframes neverLand{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}.is-live .fb-never-b:after{content:'';display:block;height:2px;width:0;margin-top:11px;background:var(--accent);border-radius:2px;animation:neverRule 1.6s cubic-bezier(.4,0,.1,1) 1.5s forwards}@keyframes neverRule{to{width:100%}}.fb-never-row{display:flex;flex-wrap:wrap;gap:8px}.fb-never-row span{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:var(--surface);opacity:0;animation:filmIn .4s ease forwards}.is-live .fb-never-row span:nth-child(1){animation-delay:2.5s}.is-live .fb-never-row span:nth-child(2){animation-delay:2.78s}.is-live .fb-never-row span:nth-child(3){animation-delay:3.06s}.closing-line{font-size:15px;line-height:1.65;color:var(--muted);max-width:520px;margin:22px auto 0}
/* THE HANDOFF. The argument IS the length of one column against the other, so it has to be seen   rather than read. Left is deliberately longer and deliberately dull; right is short and every   line is a thing only a person can supply. */.handoff{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}.handoff-side{background:var(--surface);padding:26px 24px}.handoff-side.is-varren{background:linear-gradient(var(--soft),transparent)}.handoff-label{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:17px}.handoff-side.is-varren .handoff-label{color:var(--accent)}.handoff-side ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.handoff-side li{font-size:13px;line-height:1.5;color:var(--muted);padding-left:20px;position:relative}.handoff-side li:before{content:"";position:absolute;left:0;top:8px;width:9px;height:1.5px;background:var(--muted);border-radius:1px}.handoff-side.is-varren li{color:var(--ink)}.handoff-side.is-varren li:before{content:"\2713";background:none;width:auto;height:auto;top:0;color:var(--accent);font-size:11px}.handoff-note{font-size:11.5px;line-height:1.65;color:var(--muted);margin:17px 0 0;padding-top:15px;border-top:1px solid var(--line)}
/* THE SWITCH IS THE ARGUMENT, so it had to stop being a tab strip. Founder, on the old version:   "basic". It was: the only thing that moved was a fake mouse pointer, the panel it pointed at   swapped instantly with no transition at all, and the pointer was hidden on a phone, so on the   screen most people use there was no motion in this section whatsoever.   Now the SECTION'S OWN CLAIM plays on every switch: one rail travels to the mission you chose,   then the job runs left to right - each stage arrives, lights as the current one, and hands to   the next - and the approval lands last, because that is the order the work actually happens in.   Nothing here imitates a person using the page. */.scenario-tabs{position:relative;padding-left:20px}.scenario-rail{position:absolute;left:0;top:0;width:2px;height:0;background:var(--accent);border-radius:2px;transform:translateY(0);transition:transform .58s cubic-bezier(.5,0,.15,1),height .38s ease,width .38s ease}.scenario-tabs button[aria-selected=true]{color:var(--ink)}.scenario-tabs b{transition:transform .4s cubic-bezier(.5,0,.15,1),color .3s}.scenario-tabs button[aria-selected=true] b{transform:translateX(4px)}.scenario-panel.is-entering>*{opacity:0;animation:filmIn .52s cubic-bezier(.2,.7,.3,1) forwards}.scenario-panel.is-entering>*:nth-child(1){animation-delay:.02s}.scenario-panel.is-entering>*:nth-child(2){animation-delay:.10s}.scenario-panel.is-entering>*:nth-child(3){animation-delay:.17s}.scenario-panel.is-entering>*:nth-child(4){animation-delay:.23s}.scenario-panel.is-entering>*:nth-child(5){animation-delay:.72s}.scenario-panel.is-entering .flow-map span{opacity:0;animation:flowStage .62s cubic-bezier(.2,.7,.3,1) forwards}.scenario-panel.is-entering .flow-map i{opacity:0;animation:flowHand .4s ease forwards}.scenario-panel.is-entering .flow-map span:nth-of-type(1){animation-delay:.30s}.scenario-panel.is-entering .flow-map i:nth-of-type(1){animation-delay:.46s}.scenario-panel.is-entering .flow-map span:nth-of-type(2){animation-delay:.54s}.scenario-panel.is-entering .flow-map i:nth-of-type(2){animation-delay:.70s}.scenario-panel.is-entering .flow-map span:nth-of-type(3){animation-delay:.78s}@keyframes flowStage{0%{opacity:0;transform:translateY(9px)}45%{opacity:1;transform:none;border-color:var(--accent);color:var(--ink)}75%{border-color:var(--accent)}100%{opacity:1;transform:none}}@keyframes flowHand{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}.scenario-panel.is-entering .decision-icon{animation:decideIn .5s cubic-bezier(.2,1.4,.4,1) .86s backwards}@keyframes decideIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.scenario-rail{transition:none}.scenario-panel.is-entering>*,.scenario-panel.is-entering .flow-map span,.scenario-panel.is-entering .flow-map i{animation:none;opacity:1}.scenario-panel.is-entering .decision-icon{animation:none}.scenario-tabs button[aria-selected=true] b{transform:none}}
@media(max-width:700px){[data-layout=film] .hero{padding-top:40px}[data-layout=film] .showroom{padding-top:16px}}
@media(max-width:700px){.comparison-row{grid-template-columns:1fr 1fr;gap:13px 20px;padding:22px;font-size:11px}.comparison-row strong{grid-column:1/-1;color:var(--accent);font-size:13px}.comparison-heading{font-size:8px}.comparison-heading>span:first-child{display:none}.site-header+.mobile-menu{top:70px}.review-banner~.mobile-menu{top:94px}}
.routing-map{padding:30px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}.routing-input{text-align:center;padding:10px 0 24px}.routing-input h3{font-family:'Playfair Display',serif;font-size:26px}.routing-input .eyebrow{font-size:8px}.routing-brain{display:flex;align-items:center;gap:14px;padding:20px;background:var(--bg);border:1px solid var(--line);border-radius:8px;margin-bottom:30px;position:relative}.routing-brain:after{content:"";height:30px;border-left:1px solid var(--accent);position:absolute;top:100%;left:50%}.routing-brain img{border-radius:8px}.routing-brain strong{display:block;font-size:14px}.routing-brain span{display:block;font-size:10px;color:var(--muted)}.routing-tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.routing-tasks>div{padding:18px 10px;border:1px solid var(--line);border-radius:7px;text-align:center;background:var(--bg)}.routing-tasks span{font-size:8px;color:var(--accent);display:block}.routing-tasks strong{font-size:13px;display:block;margin:8px 0}.routing-tasks small{font-size:9px;color:var(--muted);display:block}.routing-result{font-size:11px;line-height:1.7;margin:25px 0 10px;text-align:center}.routing-map>.proof-label{font-size:9px;display:block;text-align:center}.agent-visual-state{min-height:500px}.budget-track{height:10px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(90deg,var(--wine) 0 48%,var(--soft) 48% 100%);margin:22px 0}
@media(min-width:1600px){.wrap{max-width:1400px}.operating-canvas{height:570px}.mission-window{right:20%;width:520px}.research-card{left:7%}.creative-card{left:14%}.approval-float{right:8%}}
@media(max-width:1200px){.site-header{padding-inline:25px;gap:20px}.desktop-nav{gap:20px;margin-left:5px}.header-actions{gap:15px}.nav-invite{display:none}.wrap{width:calc(100% - 72px)}.hero-heading{gap:40px;grid-template-columns:1.4fr 1fr}.hero h1{font-size:62px}.hero-heading .hero-actions{gap:10px}.two-col,.access-hero,.invitation-layout{gap:60px}.mission-window{right:15%;width:470px}.research-card{left:2%;width:185px}.creative-card{left:7%;width:185px}.approval-float{right:2%;width:210px;bottom:45px}.scenario-layout{grid-template-columns:320px 1fr;gap:40px}.scene-stages button{padding-inline:17px}.plan-card{padding:25px 18px}.plan-amount{font-size:33px}.plan-amount span{font-size:8px}.faq-section{gap:65px}.pass-content h2{font-size:42px}}
@media(max-width:960px){.desktop-nav{display:none}.menu-toggle{display:block}.wrap{width:calc(100% - 56px)}.section{padding-block:80px}.hero{padding-top:65px}.hero-heading{grid-template-columns:1fr;gap:30px}.hero h1{font-size:74px}.hero-lead,.hero-aside,.hero-cta{grid-column:auto;grid-row:auto}.hero-aside{margin-top:0}.hero-heading .hero-actions{margin-top:20px}.hero-heading .fine-print{display:block}.hero-heading .lede{font-size:17px}.hero-aside>p:not(.lede){margin:0}.operating-canvas{height:510px}.mission-window{width:430px;right:12%;top:45px}.research-card{width:155px;top:27px}.creative-card{width:165px;left:3%;bottom:30px}.creative-art{height:135px}.creative-art>span{font-size:22px}.approval-float{width:190px;right:2%;bottom:22px;padding:15px}.capability-strip{flex-direction:column;gap:17px;align-items:flex-start}.scenario-layout{grid-template-columns:1fr;gap:30px}.scenario-tabs{flex-direction:row;gap:25px}.scenario-tabs button{flex:1;align-items:flex-start;gap:12px;padding-block:15px}.scenario-tabs b{display:none}.scenario-tabs small{font-size:10px}.scenario-tabs button>div{font-size:13px}.two-col{gap:40px}.agent-teaser .two-col{gap:40px}.three-col{gap:14px}.feature-card{padding:24px}.feature-card h3{font-size:20px}.audience-grid{grid-template-columns:repeat(2,1fr);gap:40px 0}.audience-grid>a:nth-child(2){border:0;margin:0}.access-hero{gap:45px}.access-hero h1{font-size:65px}.launch-pass{padding:25px}.pass-content{margin-top:75px}.pass-content h2{font-size:37px}.pass-line{font-size:8px}.plans-grid{grid-template-columns:repeat(2,1fr)}.plan-card{padding:30px;border-bottom:1px solid var(--line)}.plan-card:nth-child(2){border-right:0}.plan-card:nth-child(3){border-bottom:0}.plan-amount{font-size:42px}.plan-description{min-height:40px}.credits-explainer{gap:30px}.enterprise-row{align-items:flex-start;gap:30px}.enterprise-row .button{max-width:230px;flex-shrink:1}.invitation-layout h1{font-size:55px}.invitation-layout{gap:45px}.invitation-form{padding:27px}.agent-workbench{grid-template-columns:250px 1fr}.agent-rail{padding:22px}.code-window{padding:23px}.order-details,.order-total{padding:30px}.footer-top{gap:30px}.footer-top .wordmark{font-size:30px}.guide-page{padding:22px}.guide-pointer{left:155px}}
@media(max-width:700px){html{scroll-padding-top:80px}.wrap{width:calc(100% - 40px)}.section{padding-block:67px}.review-banner{height:24px;padding:0 16px;font-size:6px}.review-banner span{font-size:7px;letter-spacing:0}.site-header{height:70px;padding:0 16px;gap:10px}.wordmark{font-size:27px}.wordmark img{width:28px;height:28px;margin-right:6px}.header-actions{gap:8px}.theme-toggle{padding-inline:4px}.theme-label{display:none}.theme-glyph{font-size:22px}.button.compact{min-height:36px;padding:8px 10px;font-size:9px;border-radius:5px}.menu-toggle{width:30px;padding:7px}.mobile-menu{top:94px}.hero{padding-top:48px;padding-bottom:32px}.hero-heading{gap:26px}.hero h1{font-size:clamp(40px,9.8vw,65px);letter-spacing:-.045em}.hero .eyebrow{font-size:8px;margin-bottom:22px}.hero-aside{display:block}.hero-heading .lede{font-size:16px;max-width:430px;margin-bottom:12px}.hero-aside>p:not(.lede){font-size:12px;max-width:410px;margin-bottom:21px}.hero-heading .hero-actions{margin:22px 0 12px;gap:16px}.hero-heading .button{font-size:10px;min-height:46px;padding-inline:17px}.hero-heading .text-link{font-size:10px}.hero-heading .fine-print{font-size:8px}.desktop-only{display:none}.showroom{padding-block:4px}.scene-toolbar{height:39px;padding:0 14px;font-size:8px}.scene-toolbar .proof-label{font-size:7px}.operating-canvas{height:475px;perspective:none}.orbital-field{left:-90px;top:75px;width:400px;height:350px;opacity:.75}.brand-core{display:none}.mission-window{width:calc(100% - 42px);right:21px;top:31px;transform:none!important;animation:none;border-radius:9px}.mission-window .window-top{padding:0 15px;height:36px;font-size:8px}.window-badge{font-size:6px}.mission-content{padding:18px}.mission-brief{font-size:21px;margin-bottom:20px}.mission-response p{font-size:9px;min-height:42px}.mission-response strong{font-size:10px}.mission-artifacts>div{padding:8px 9px;font-size:9px}.mission-artifacts small{font-size:7px}.mission-bottom{font-size:8px;padding:0 18px;height:32px}.research-card,.creative-card{display:none}.approval-float{bottom:11px;right:13px;width:215px;padding:12px 15px;transform:rotate(2deg);z-index:7}.approval-float .eyebrow{font-size:6px;margin-bottom:5px}.approval-float>p{font-size:12px;margin-bottom:5px}.approval-preview{display:none}.approval-chip{padding:5px 7px;font-size:7px}.scene-controls{padding:0 12px;display:block}.scene-stages{display:flex;justify-content:space-between}.scene-stages button{padding:15px 8px;min-height:45px;font-size:8px;flex:1}.scene-stages button span{display:none}.motion-control{display:block;min-height:34px;margin:auto;font-size:8px}.scene-disclosure{font-size:7px;line-height:1.65;padding:10px 16px}.capability-strip{padding-block:28px;gap:13px;font-size:9px}.capability-strip>div{font-size:11px}.capability-strip b{padding:0 8px}.section-head{margin-bottom:33px}h1,.display{font-size:48px}h2{font-size:38px}h3{font-size:23px}.lede{font-size:17px}p{font-size:13px}.section-head p:not(.eyebrow){font-size:13px;max-width:450px}.eyebrow{font-size:8px;margin-bottom:17px}.two-col,.three-col,.access-hero,.faq-section,.invitation-layout{grid-template-columns:1fr;gap:38px}.scenario-tabs{gap:0;overflow-x:auto}.scenario-tabs button{padding:13px 10px 16px 0;min-width:105px;gap:8px;border-bottom-width:2px}.scenario-tabs button[aria-selected=true]{border-bottom-color:var(--accent)}.scenario-tabs button>span{font-size:8px}.scenario-tabs button>div{font-size:11px;max-width:92px}.scenario-tabs small{display:none}.scenario-panel{padding:25px 21px}.scenario-panel h3{font-size:29px}.scenario-top{margin-bottom:26px}.scenario-top .proof-label{font-size:8px}.flow-map{gap:8px}.flow-map span{font-size:8px;padding:9px 8px}.decision-row p{font-size:9px}.mini-workbench{transform:none}.agent-teaser .two-col{gap:35px}.agent-teaser .button{font-size:11px}.mini-workbench .window-top{padding:0 18px}.rough-brief{font-size:12px;padding:20px}.refined-brief{padding:22px}.refined-brief p{font-size:22px}.code-preview{font-size:11px;padding:22px}.guide-section .two-col>div:first-child{order:2}.guide-section .two-col>div:last-child{order:1}.guide-page{padding:23px;min-height:335px}.guide-pointer{left:150px;top:183px}.guide-target{width:205px}.approval-demo{padding:23px}.approval-demo-top{gap:10px}.approval-demo-top .proof-label{font-size:8px}.approval-demo h3{font-size:20px}.approval-actions{gap:6px}.approval-actions .button{padding:10px 15px;font-size:10px}.audience-grid{gap:30px 0}.audience-grid>a{padding-right:15px;margin-right:15px}.audience-grid>a>span:first-child{font-size:7px;margin-bottom:20px}.audience-grid h3{font-size:21px}.closing{padding-block:72px}.closing h2{font-size:46px}.closing-actions{gap:12px;flex-direction:column}.closing .two-col h2{font-size:39px}.closing .button{margin:5px 0}.closing .two-col .button{margin-right:8px;font-size:11px}.access-hero h1{font-size:60px}.access-hero .hero-actions{gap:16px}.access-hero .hero-actions .button{font-size:11px}.launch-pass{max-width:430px;width:100%;padding:27px;transform:rotate(-2deg);margin:5px auto 0}.pass-content{margin-top:68px}.pass-content h2{font-size:42px}.pass-line{font-size:10px}.pass-top>span{font-size:7px}.offer-steps li{padding:20px 0;gap:20px}.offer-steps h3{font-size:17px}.plans-grid{grid-template-columns:1fr 1fr;border-radius:9px}.plan-card{padding:22px 16px}.plan-card .eyebrow{font-size:9px;margin-bottom:23px}.plan-amount{font-size:30px;white-space:normal}.plan-amount>span{display:block;margin:5px 0 0;font-size:8px}.plan-cadence{font-size:7px;margin:8px 0 18px}.plan-description{font-size:10px;min-height:61px;line-height:1.7;margin-bottom:16px}.plan-allowances{font-size:8px;padding-top:17px;margin-bottom:15px}.plan-allowances strong{font-size:12px;display:block}.plan-allowances li{margin-bottom:13px}.plan-card .button{font-size:9px;min-height:43px;padding:8px 5px}.plan-note{font-size:7px;line-height:1.8}.credits-explainer{grid-template-columns:1fr;gap:20px;padding:22px;margin-top:25px}.credits-explainer h3{font-size:20px}.credits-explainer p{font-size:11px}.enterprise-row{flex-direction:column;gap:18px;margin-top:25px;padding-block:15px}.enterprise-row .button{max-width:none;font-size:11px}.capacity-illustration{padding:25px}.faq-section{gap:8px}.faq-section .section-head{margin-bottom:10px}.faq-list summary{font-size:12px}.faq-list details p{font-size:12px}.reservation-page h1{font-size:49px}.reservation-page .section-head{margin-top:35px}.order-grid{grid-template-columns:1fr}.order-details,.order-total{padding:27px}.order-total{border-left:0;border-top:1px solid var(--line)}.order-details h2{font-size:40px}.order-lines>div{font-size:10px}.inline-field .button{padding:10px 15px;font-size:11px}.seller-line{flex-direction:column;gap:10px;font-size:9px}.invitation-layout h1{font-size:52px}.contact-card{margin-top:30px;padding-top:22px}.invitation-form{padding:24px}.invitation-form input,.invitation-form select,.invitation-form textarea{font-size:16px}.invitation-form label{font-size:10px}.invitation-form .consent{font-size:10px}.feature-card{padding:25px}.feature-card h2{font-size:34px}.feature-card h3{font-size:21px}.feature-card p{font-size:12px}.agent-workbench{grid-template-columns:1fr}.agent-rail{border:0;border-bottom:1px solid var(--line);padding:22px}.agent-rail .eyebrow{margin-bottom:20px}.agent-rail ol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.agent-step{display:block;padding:0!important;border:0!important}.agent-step h3{font-size:11px;margin:12px 0 0}.agent-step p{display:none}.agent-step .tag{font-size:8px}.code-window{padding:22px}.code-window>.section-head{gap:10px}.code-window .section-head .eyebrow{font-size:7px}.code-window .section-head .tag{font-size:8px}.code-lines pre{font-size:8px;padding:12px}.agent-demo-controls{gap:20px;font-size:10px}.agent-demo-controls button{font-size:10px;white-space:nowrap}.section .wrap>nav{gap:8px}.section .wrap>nav .button{font-size:10px;padding:10px 15px;min-height:42px}.footer-top{grid-template-columns:1fr 1fr;gap:40px 25px}.footer-top>div>a:not(.wordmark){font-size:10px}.footer-top>div:first-child{grid-column:1/-1}.footer-top .wordmark{font-size:35px;margin-bottom:15px}.footer-top p{margin:0}.footer-top .eyebrow{margin-bottom:20px}.footer-top .fine-print{font-size:8px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;font-size:8px;margin-top:40px;padding-top:22px}.site-footer{padding:55px 0 25px}.feature-card .text-link{font-size:11px}}
@media(max-width:370px){.site-header{padding-inline:12px}.wordmark{font-size:24px}.wordmark img{display:none}.hero h1{font-size:37px}.button.compact{font-size:8px;padding-inline:8px}.header-actions{gap:5px}.plan-amount{font-size:27px}.plan-card{padding:20px 12px}.scene-stages button{font-size:7px}.hero-heading .hero-actions{gap:10px}.hero-heading .button{padding-inline:13px}.flow-map{gap:5px}.flow-map span{font-size:7px;padding-inline:7px}.guide-page{padding:20px}.invitation-layout h1{font-size:46px}}
@media(max-width:480px){.plans-grid{grid-template-columns:1fr}.plan-card{border-right:0!important;border-bottom:1px solid var(--line)!important;padding:28px}.plan-card:last-child{border-bottom:0!important}.plan-card .eyebrow{font-size:11px;margin-bottom:20px}.plan-amount{font-size:44px}.plan-amount>span{display:inline;font-size:10px;margin-left:10px}.plan-cadence{font-size:11px;margin:10px 0 23px}.plan-description{font-size:14px;min-height:0;margin-bottom:23px}.plan-allowances{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:11px;margin-bottom:17px}.plan-allowances strong{font-size:20px;margin-bottom:4px}.plan-card .button{font-size:12px;min-height:47px}.plan-note{font-size:10px;margin-top:17px}.access-hero h1{font-size:48px}.hero-heading .fine-print{font-size:10px}.scene-disclosure{font-size:9px}.theme-toggle{min-width:34px}.menu-toggle{width:34px}.routing-map{padding:24px}.routing-tasks>div{padding:16px 8px}.routing-tasks small{font-size:8px}.agent-demo-controls{flex-direction:column;align-items:flex-start}.agent-visual-state{min-height:470px}.review-banner{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.mission-window,.creative-card,.research-card,.approval-float,.mini-workbench,.launch-pass{transform:none}.guide-pointer{translate:0 0}}
@media print{.site-header,.review-banner,.site-footer,.motion-control,.guide-switch,.hero-actions,.closing-actions,.menu-toggle{display:none!important}:root{--bg:#fff;--ink:#201b1d;--muted:#5c5255;--surface:#f3f0eb;--line:#ccc;--accent:#6e1028}.section{padding-block:35px}.wrap{width:100%;max-width:none}body{font-size:11px}.access-hero{gap:30px}.access-hero h1{font-size:54px}.launch-pass{transform:none;box-shadow:none}.plans-grid{grid-template-columns:repeat(4,1fr)}.plan-card{padding:18px 12px}.plan-amount{font-size:28px}.feature-card,.plan-card,.offer-steps li{break-inside:avoid}.closing{padding-block:35px}.faq-list details p{display:block}.section+.section{border:0}}
.scene-controls{position:relative}
.scene-cursor{position:absolute;left:0;top:0;width:25px;height:30px;margin:-3px 0 0 -5px;pointer-events:none;z-index:6;transition:left .55s cubic-bezier(.5,0,.15,1),top .55s cubic-bezier(.5,0,.15,1);filter:drop-shadow(0 3px 6px #0007)}
.scene-cursor svg{width:100%;height:100%;fill:var(--wine);stroke:#f4e9d9;stroke-width:1.6}
.scene-cursor.is-tapping{animation:scene-tap .5s ease}

.motion-paused .scene-cursor{opacity:0;transition:opacity .3s}
.founding-terms{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.founding-terms li{position:relative;padding-left:22px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.founding-terms li:before{content:"";position:absolute;left:1px;top:4px;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.founding-guarantee{margin:18px 0 0;font-size:11.5px;line-height:1.65;color:var(--muted);border-left:2px solid var(--accent);padding-left:12px;max-width:430px}
.founding-guarantee span{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
.founding-terms-link{display:inline-block;margin-top:15px;font-size:11px}
.compare-section .section-head{margin-bottom:44px}
.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare-grid article{background:var(--surface);padding:27px 24px;display:flex;flex-direction:column}
.compare-grid h3{font-family:'Playfair Display',serif;font-weight:600;font-size:21.5px;line-height:1.22;letter-spacing:-.022em;margin-bottom:12px;color:var(--ink)}
.compare-grid p{font-size:12.5px;line-height:1.7;color:var(--muted);margin:0}
.compare-section .scene-disclosure{margin-top:22px;padding:0}
@media(max-width:960px){.compare-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.compare-grid{grid-template-columns:1fr}.compare-grid h3{font-size:18px}.compare-grid article{padding:22px 20px}}
@media(max-width:700px){.site-header .wordmark{font-size:15px;letter-spacing:.2em;text-indent:.2em}.site-header .wordmark img{width:21px;height:24px;margin-right:8px}}
@media(max-width:430px){.site-header .wordmark{font-size:13px;letter-spacing:.14em;text-indent:.14em}.site-header .wordmark img{margin-right:6px}}
.packages-section .section-head{margin-bottom:34px}
.found-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.found-tier{display:flex;flex-direction:column;gap:13px;padding:28px 22px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.found-tier-name{font-family:'Playfair Display',serif;font-size:21px;color:var(--ink);line-height:1}
.found-tier-line{font-size:12.5px;line-height:1.55;color:var(--muted);margin:7px 0 0;min-height:54px}
.found-tier-price{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.found-amount{font-family:'Playfair Display',serif;font-size:42px;color:var(--ink);line-height:1}
.found-was{font-size:15px;color:var(--muted);text-decoration:line-through}
/* The saving badge sits beside the two prices it describes, never alone. Gold on a tinted well,
   so it reads as an offer rather than as an alert. */
.found-save{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink);background:rgba(110,16,40,.08);border:1px solid rgba(110,16,40,.18);
border-radius:999px;padding:3px 8px;white-space:nowrap}
.found-cadence{font-size:11px;color:var(--muted);margin-top:-6px}
.found-allowance{display:block;font-size:11.5px;line-height:1.45;color:var(--ink);font-weight:500;margin-top:4px}
.found-tier .button{margin-top:auto;justify-content:center;text-align:center}
.found-note{font-size:10.5px;line-height:1.5;color:var(--muted)}
@media(max-width:960px){.found-tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.found-tiers{grid-template-columns:1fr}.found-tier-line{min-height:0}}
.scenario-layout{position:relative}



.motion-paused 
@media(max-width:700px){}

/* ===== 2026-09-21 founder website pass: light-mode default + visibility ===== */
/* Logo: the real V shape (varren-v-t.png) filled with the exact brand burgundy, so it is
   bold and visible on BOTH themes (it was a faded transparent V, near-invisible on light). */
/* Clean burgundy V (extracted from the real varren-v.png, obsidian background removed): the exact
   mark, bold + fully visible, no dark chip, on BOTH themes - matching Varren Aegis. */
.brand-mark{flex:none;object-fit:contain}
.wordmark .brand-mark{display:inline-block!important;height:34px;width:auto;margin-right:11px}
.footer-top .wordmark .brand-mark{height:30px}
:root[data-theme=dark] .brand-mark{filter:brightness(1.2) saturate(1.05)}
@media(max-width:700px){.site-header .wordmark .brand-mark{height:30px;margin-right:9px}}
@media(max-width:430px){.site-header .wordmark .brand-mark{height:27px;margin-right:7px}}

/* Theme toggle: a sharp icon+text button (Aegis-style), always showing icon AND label,
   on mobile and desktop. */
.theme-toggle{border:1.5px solid var(--line)!important;border-radius:2px;background:var(--surface);
  display:inline-flex!important;align-items:center;gap:7px;min-height:0;padding:8px 12px;
  color:var(--ink)!important;font-size:11px;font-weight:600;white-space:nowrap}
.theme-toggle .theme-glyph{color:var(--wine);font-size:15px}
.theme-toggle .theme-label{display:inline!important;font-size:11px;font-weight:600}
@media(max-width:700px){.theme-toggle{padding:7px 10px;min-width:0}.theme-toggle .theme-label{display:inline!important}}

/* Sharp CTAs, matching the Aegis family. */
.button,.button.secondary,.button.compact,.nav-invite,.motion-control{border-radius:2px}

/* Eyebrows (incl. "Introducing Varren - pre-launch") readable on light; a touch larger. */
.eyebrow{font-size:11px;letter-spacing:.14em}
:root[data-theme=light] .eyebrow{color:#6e1028;font-weight:600}
@media(max-width:700px){.eyebrow{font-size:9.5px;letter-spacing:.12em}}

/* Theme toggle shows an icon AND a clear text label in both themes, at readable contrast. */
.theme-label{display:inline!important;font-size:11px;font-weight:600}
.theme-toggle{color:var(--ink);gap:7px}
.theme-toggle .theme-glyph{color:var(--wine)}

/* The 3D orbital field is visible on LIGHT mode (was a faint gold hairline on cream). */
:root[data-theme=light] .orbit{border-color:#6e102866;box-shadow:inset 0 0 70px #6e10281f,0 0 22px #6e102826}
:root[data-theme=light] .orbital-field{opacity:1}

/* Each phase brings a different card forward and dims the rest, so the WHOLE card switches
   with research -> create -> approve -> improve, not only the text. (scene 2 already emphasised.) */
.floating-card{transition:transform .5s ease,box-shadow .5s ease,opacity .5s ease}
[data-scene="0"] .research-card,[data-scene="3"] .research-card,
[data-scene="1"] .creative-card{box-shadow:0 0 0 1px var(--accent),0 16px 60px #6e10284e;transform:translateY(-7px) scale(1.03);opacity:1}
[data-scene="0"] .creative-card,[data-scene="0"] .approval-float,
[data-scene="1"] .research-card,[data-scene="1"] .approval-float,
[data-scene="2"] .research-card,[data-scene="2"] .creative-card,
[data-scene="3"] .creative-card,[data-scene="3"] .approval-float{opacity:.52}

/* A pause control for the "Don't just start the work" auto-walkthrough, visible on mobile too. */
.section-motion{display:flex;justify-content:center;margin:-6px 0 26px}
@media(max-width:700px){.section-motion .motion-control{display:inline-flex!important}}

/* ===== 2026-09-21 founder pass 2: footer icon, sharp CTAs everywhere, clearer light text ===== */
/* Footer mark BIGGER than the "VARREN" wordmark (footer wordmark is 36px). */
.footer-top .wordmark .brand-mark{height:48px!important;margin-right:14px}
@media(max-width:700px){.footer-top .wordmark .brand-mark{height:42px!important}}

/* Sharp CTAs consistently across the whole site (no curved buttons left anywhere). */
.button,.button.secondary,.button.compact,.button.text,.nav-invite,.motion-control,
.scene-stages button,.guide-switch button,.approval-actions button,.approval-editor button,
[data-approval],[data-agent-next],[data-guide-mode],[data-stage],.plan-switch button,
form button,button[type=submit],input,textarea,select{border-radius:2px!important}

/* Clearer light mode: blacker text, stronger secondary text, firmer lines - on every surface. */
:root[data-theme=light]{--ink:#191115;--muted:#463b3d;--line:#cfc4bd}
:root[data-theme=light] p,:root[data-theme=light] li,:root[data-theme=light] .lede{color:var(--ink)}
:root[data-theme=light] .fine-print,:root[data-theme=light] .proof-label,:root[data-theme=light] small{color:#584d4f}

/* ===== 2026-09-21 founder: per-phase CARD SWAP (each phase presents its own card) ===== */
.operating-canvas .floating-card{transition:opacity .55s ease,transform .55s ease,box-shadow .55s ease}
/* recede every floating card within a scene... */
[data-scene] .research-card,[data-scene] .creative-card,[data-scene] .approval-float{opacity:.06;transform:scale(.9);pointer-events:none}
/* ...then bring THIS phase's card fully forward: research / create / approve / improve. */
[data-scene="0"] .research-card,
[data-scene="1"] .creative-card,
[data-scene="2"] .approval-float,
[data-scene="3"] .research-card{opacity:1;transform:translateY(-6px) scale(1.06);
  box-shadow:0 0 0 1px var(--accent),0 22px 74px #6e102859;pointer-events:auto}
/* the mission window highlights the artifact for the active phase. */
[data-scene="0"] .mission-artifacts>div:nth-child(1),
[data-scene="1"] .mission-artifacts>div:nth-child(2),
[data-scene="2"] .mission-artifacts>div:nth-child(3),
[data-scene="3"] .mission-artifacts>div:nth-child(1){box-shadow:0 0 0 1px var(--accent);border-radius:2px}

/* ===== 2026-09-21 founder: toggle shows the target mode (JS); header CTA stays one line ===== */
.site-header .button.compact{white-space:nowrap}
.site-header .button.compact span{white-space:nowrap}
@media(max-width:700px){.site-header .button.compact{font-size:11px;padding:9px 12px}}
@media(max-width:430px){.site-header .button.compact{font-size:10px;padding:8px 10px;letter-spacing:0}}

/* ===== 2026-09-21 founder: mobile readability + distinct menu + equal-height header controls ===== */
/* Header: the mode toggle and the CTA are the SAME height. */
.site-header .theme-toggle,.site-header .button.compact{height:40px;min-height:40px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;box-sizing:border-box}
@media(max-width:430px){.site-header .theme-toggle,.site-header .button.compact{height:38px;min-height:38px}}

/* Mobile: larger, clearer text so the whole page reads easily on a phone. */
/* These repeat the exact selectors from the 700px block above so they win on specificity + source
   order (a low-specificity .lede/.hero-aside p was losing to .hero-heading .lede / .hero-aside>p).
   Body copy only; the demo-canvas micro-text (mission-window, decision-row, flow-map) is left as-is. */
@media(max-width:700px){
  p,li{font-size:15.5px;line-height:1.64}
  .lede{font-size:17px;line-height:1.52}
  .hero-heading .lede{font-size:17px;line-height:1.52;margin-top:16px}
  .hero-aside>p:not(.lede){font-size:15.5px}
  .hero-aside p,.section-head p,.compare-grid p,.scenario-panel p,.compare-grid article p{font-size:15.5px}
  .feature-card p{font-size:15px}
  .list-clean>li p{font-size:15px}
  .credits-explainer p{font-size:14.5px}
  .faq-list summary{font-size:15px}
  .faq-list details p{font-size:15px}
  .section-head p:not(.eyebrow){font-size:15px}
  .footer-top p{font-size:14px}
  .eyebrow{font-size:10.5px}
  .fine-print{font-size:12.5px;line-height:1.55}
  .scene-disclosure{font-size:12.5px;line-height:1.5}
  small{font-size:12px}
  .audience-grid h3,.compare-grid h3{font-size:19px}
  .capability-strip{font-size:13px}
}

/* Mobile menu: a clearly distinct, sharp panel that stands off the page. */
.mobile-menu{background:var(--raised)!important;border:1px solid var(--line);border-radius:2px;
  box-shadow:0 24px 60px #00000033;padding:10px 14px}
.mobile-menu a{display:block;padding:13px 8px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:0}

/* ===== 2026-09-21 founder: hero "act flow" - the moat as a compact 6-step flywheel ===== */
/* It acts end to end (research..ship), then compounds: brings back what works and improves itself. */
.act-flow{margin:26px 0 6px;max-width:600px}
/* POINTS, rather than reading as a paragraph (founder: "something pointing to, it acts, so point
   to end to end"). Sits UNDER the flywheel now: the rail shows what Varren does, this lands what
   it means, and the compounding cue follows. */
.act-lead{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;font-size:15.5px;font-weight:600;
  color:var(--ink);margin:18px 0 0;line-height:1.45;letter-spacing:-.005em}
.act-arrow{font-style:normal;margin:0 3px;color:var(--wine);opacity:.75;font-size:14px}
:root[data-theme=dark] .act-arrow{color:var(--accent)}
.act-lead em{font-style:normal;color:var(--wine)}
:root[data-theme=dark] .act-lead em{color:var(--accent)}
.act-rail{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:0;margin:0;counter-reset:act}
.act-rail li{position:relative;border:1px solid var(--line);border-radius:2px;background:var(--surface);
  padding:9px 11px 10px;overflow:hidden;--flow-glow:rgba(110,16,40,.18);--flow-edge:#6e1028;
  will-change:transform,opacity;--cycle:12s;animation:actFlow var(--cycle) ease-in-out infinite}
/* BURGUNDY ON DARK, NOT GOLD (founder, 2026-09-22, who asked me to check it was genuinely best).
   Light mode already draws this edge in brand burgundy #6E1028; dark mode was the only place
   still gold. Measured against the dark background #100e0f: #6E1028 is 1.62:1, far under the
   4.5:1 body text needs and the 3:1 a mark needs, so the literal brand colour would have made
   the flywheel almost invisible. #c85566 is the closest burgundy to it that still clears body
   text, at 4.53:1. Same family, same identity, actually legible. */
:root[data-theme=dark]{--burgundy-on-dark:#b6687b}
:root[data-theme=dark] .act-rail li{--flow-glow:transparent;--flow-edge:var(--burgundy-on-dark)}
.act-rail li:before{counter-increment:act;content:"0" counter(act);position:absolute;top:6px;right:9px;
  font-size:9px;letter-spacing:.1em;color:var(--muted)}
.act-head{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.act-ico{font-size:15px;color:var(--wine);line-height:1;flex:none}
:root[data-theme=dark] .act-ico{color:var(--burgundy-on-dark)}
.act-rail b{font-size:13.5px;color:var(--ink);letter-spacing:.01em}
.act-rail small{display:block;font-size:11.5px;color:var(--muted);line-height:1.34}
/* The spotlight FLOWS through the steps one at a time and loops 5->0 (compounds every cycle):
   each step rises as the previous fades, a continuous water-like current, never all at once. */
.act-rail li:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--flow-edge);
  transform:scaleX(0);transform-origin:left;animation:actUnderline 12s ease-in-out infinite}
/* Stagger by position (2s apart, negative so all start mid-flow with no dim wait) so the spotlight
   travels Research->Improve in order and loops. nth-child is robust; an inline --i did not resolve. */
.act-rail li:nth-child(1),.act-rail li:nth-child(1):after{animation-delay:calc(var(--cycle) * -1)}
.act-rail li:nth-child(2),.act-rail li:nth-child(2):after{animation-delay:calc(var(--cycle) * -.8333)}
.act-rail li:nth-child(3),.act-rail li:nth-child(3):after{animation-delay:calc(var(--cycle) * -.6667)}
.act-rail li:nth-child(4),.act-rail li:nth-child(4):after{animation-delay:calc(var(--cycle) * -.5)}
.act-rail li:nth-child(5),.act-rail li:nth-child(5):after{animation-delay:calc(var(--cycle) * -.3333)}
.act-rail li:nth-child(6),.act-rail li:nth-child(6):after{animation-delay:calc(var(--cycle) * -.1667)}
@keyframes actFlow{
  0%,100%{opacity:.55;transform:translateY(0) scale(1);border-color:var(--line);box-shadow:0 0 0 rgba(0,0,0,0)}
  7%,16%{opacity:1;transform:translateY(-4px) scale(1.035);border-color:var(--flow-edge);box-shadow:0 14px 32px var(--flow-glow)}
  30%{opacity:.55;transform:translateY(0) scale(1);border-color:var(--line);box-shadow:0 0 0 rgba(0,0,0,0)}
}
@keyframes actUnderline{0%{transform:scaleX(0);opacity:0}7%{transform:scaleX(1);opacity:1}16%{transform:scaleX(1);opacity:1}30%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
.act-loop{display:flex;align-items:center;gap:6px;margin:14px 0 0;font-size:12px;font-weight:600;
  letter-spacing:.02em;color:var(--accent)}
:root[data-theme=dark] .act-loop{color:var(--accent)}:root[data-theme=light] h1 em{color:var(--wine)}:root[data-theme=light] h2 em{color:var(--wine)}
/* beat the light-mode readability rule (:root[data-theme=light] p) so the loop cue stays on-brand */
:root[data-theme=light] .act-loop{color:var(--wine)}
.act-loop span{font-size:14px;display:inline-block;animation:actSpin 9s linear infinite}
/* COMPOUNDING IS FELT, NOT READ (founder, 2026-09-22): a beat after the line is readable the
   whole flywheel picks up, so the claim and the motion arrive together. Duration and the six
   stagger delays share --cycle, so speeding up keeps the spotlight in order instead of
   scattering it, which is what changing the duration alone would do. */
.act-flow.compounding .act-rail li{--cycle:6.5s}
.act-flow.compounding .act-loop span{animation-duration:3s}

@keyframes actSpin{to{transform:rotate(360deg)}}
body.motion-paused .act-rail li,body.motion-paused .act-rail li:after,body.motion-paused .act-loop span{animation:none}
body.motion-paused .act-rail li{opacity:1;transform:none;border-color:var(--line);box-shadow:none}
body.motion-paused .act-rail li:after{opacity:0;transform:scaleX(0)}
@media (prefers-reduced-motion: reduce){
  .act-rail li{animation:none;opacity:1;transform:none;border-color:var(--line);box-shadow:none}
  .act-rail li:after{animation:none;opacity:0}
  .act-loop span{animation:none}
}
@media(max-width:700px){.act-flow{margin:16px 0 2px}.act-rail{grid-template-columns:1fr 1fr}
  .act-lead{font-size:15px}.act-rail b{font-size:13px}.act-rail small{font-size:11px}}
@media(max-width:700px){.film-head{margin-bottom:24px;padding-top:26px}.film-sub{font-size:12.5px}.film-device{padding:7px;border-radius:12px}.film-stage{height:300px}.film-scene{padding:20px 18px 20px}.fs-head{margin-bottom:13px;gap:9px}.fs-head h3{font-size:17px}.fs-status{font-size:10.5px;padding:11px 0 14px}.fb-caret-line{font-size:21px}.fb-caret{height:19px}.fb-prompt{padding:14px 15px}.fb-chip{font-size:10.5px;padding:8px 10px}.fb-count b{font-size:34px}.fb-rows li,.fb-ab-row{font-size:10.5px}.fb-quote{font-size:17px;padding:15px 16px}.fb-code code{font-size:10px}.fb-typed{font-size:11px}.fb-tally{gap:18px}.fb-tally b{font-size:16px}.fb-spark{height:58px}.fb-kpis{gap:18px}.fb-kpis b{font-size:17px}.fb-fix{font-size:11px;gap:10px}.fb-offer{padding:15px 16px}.fb-offer p{font-size:11.5px}.fb-loop-next{font-size:11.5px;padding:13px 14px}.film-rail{padding:12px 2px 0;gap:11px}.film-chapters{gap:3px}.film-toggle{font-size:9px}.film-note{font-size:9px}}@media(max-width:370px){.fb-caret-line{font-size:18px}.film-stage{height:320px}}
@media(max-width:700px){.fb-never-row span{font-size:10px;padding:6px 11px}.closing-line{font-size:13.5px;margin-top:18px}}
@media(max-width:700px){.handoff{grid-template-columns:1fr}.handoff-side{padding:20px 17px}.handoff-side li{font-size:12px;gap:8px}.handoff-label{font-size:8px;margin-bottom:13px}.handoff-note{font-size:10.5px;margin-top:14px;padding-top:12px}}
/* 960 to MATCH the breakpoint that lays the tabs down. It was 940, which left a 20px band where
   the tabs were already a row and the list still carried the vertical rail's left padding. */
@media(max-width:960px){.scenario-tabs{padding-left:0;padding-bottom:2px}.scenario-rail{width:0;height:2px}}
@media(max-width:700px){.fb-never-a{font-size:21px}.fb-never-b{font-size:29px}.fb-never{margin-bottom:17px}}
/* SHORT SCREENS. He asked for the heading and the device to land together on mobile AND web,   and measured, a 375x667 phone missed it by FOUR PIXELS. The heading's own breathing room is   what does not fit, so it gives up 36px on short viewports and nothing else changes. Keyed on   HEIGHT, not width, because that is the dimension that ran out. */@media(max-height:720px){.film-head{margin-bottom:18px;padding-top:16px}.showroom{padding-block:4px 4px}}
/* A THUMB IS NOT A MOUSE POINTER. Measured in a real browser at 375x812, with the stylesheet
   proven to have applied: seven controls sat under the 44px floor, the smallest at 15px, and
   one of them was the header's own Get Founding Access, which is the primary call to action
   on this page. A missed tap on that button is a lost signup.
   Scoped to touch so the desktop density, which is a deliberate design choice and correct
   with a mouse, is untouched. 44px is the WCAG 2.5.8 target size. */
@media(pointer:coarse) and (max-width:900px){
  .button,.button.compact,.theme-toggle,.menu-toggle,.film-toggle,.motion-control,
  [data-beat-jump]{min-height:44px}
  .wordmark{min-height:44px}
  /* TWO CLASSES DEEP, AND IT SETS A FIXED height, SO min-height ALONE CANNOT WIN.
     `.site-header .theme-toggle,.site-header .button.compact` is {height:38px;
     min-height:38px}: it out-specifies a single class, and a fixed height caps the box
     whatever the minimum says. Matched here rather than reached for !important, which
     would win the argument and leave the next person unable to change it. */
  .site-header .theme-toggle,.site-header .button.compact{height:44px;min-height:44px}
  .site-nav a,.site-footer a,.text-link{display:inline-flex;align-items:center;min-height:44px}
}

/* ============================================================================================
   THE FILM IS A VARREN DEVICE, NOT A CARD.

   Founder, 2026-09-24: "I want us to build a Varren inside so it shows that this is Varren
   working, so it doesn't just look like a screen ... it has the Varren logo, it has the Varren
   wordmark ... anybody that sees it would realize that this is a Varren interface ... on web a web
   device of Varren, on mobile a mobile device of Varren."

   THE CHROME IS OBSIDIAN IN BOTH THEMES, DELIBERATELY. A real screen is lit and the surface around
   it is not. A dark bar sitting on the ivory page reads instantly as a device; the same bar in the
   page's own colours reads as one more panel, which is what was there before. It carries the REAL
   varren-v-clean.png mark, never a recreation (golden rule 9).

   No traffic lights. Three coloured dots would say "somebody's laptop"; the bar says Varren.
   ============================================================================================ */
.film-device{padding:0;border-radius:16px;background:#14100f;border:1px solid #2a2124;
  box-shadow:0 30px 70px #0000002e,0 2px 0 #ffffff14 inset;overflow:hidden}
.film-chrome{display:flex;align-items:center;gap:12px;padding:11px 16px;background:
  linear-gradient(180deg,#1d1719,#14100f);border-bottom:1px solid #2a2124;min-height:44px}
.fc-brand{display:inline-flex;align-items:center;gap:8px;flex:none}
/* THE REAL MARK, ON A TILE, BECAUSE THE REAL MARK IS BURGUNDY. `varren-v-clean.png` is
   #6E1028 on transparent, which all but vanishes on an obsidian bar: measured, not guessed.
   The answer is NOT a recreated light-coloured V (golden rule 9 forbids that); it is the
   actual asset on an ivory tile, which is what a Varren app icon looks like anyway. */
.fc-mark{display:block;width:14px;height:15px;object-fit:contain}
.fc-tile{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;background:#f3eee6;box-shadow:0 1px 0 #0003}
.fc-brand b{font-family:var(--font-display,inherit);font-size:12px;font-weight:600;
  letter-spacing:.2em;color:#f3eee6;line-height:1}
.fc-context{flex:1;min-width:0;text-align:center;font-size:11px;letter-spacing:.06em;
  color:#9b8f8c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-live{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#d9cfc4}
.fc-live i{width:6px;height:6px;border-radius:50%;background:#b89a68;
  box-shadow:0 0 0 3px #b89a6826;animation:fc-pulse 2.4s ease-in-out infinite}
@keyframes fc-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.film-screen{border-radius:0;border:0;border-top:0}
/* The base only exists in the phone form; on web it is a hairline that closes the window. */
.film-base{height:8px;background:linear-gradient(180deg,#14100f,#0e0b0b);border-top:1px solid #241d20}

/* ---- THE PHONE. Under 900px the same device becomes something held in a hand. ---- */
@media(max-width:900px){
  .film-device{border-radius:26px;padding:6px;background:#0e0b0b;border-color:#332a2d;
    max-width:420px;margin-inline:auto;box-shadow:0 22px 50px #00000038}
  .film-chrome{border-radius:20px 20px 0 0;padding:9px 14px;min-height:40px}
  .fc-context{display:none}            /* a phone bar shows who and what, not where */
  .film-screen{border-radius:0 0 20px 20px}
  .film-base{height:16px;background:#0e0b0b;border:0;border-radius:0 0 20px 20px;position:relative}
  .film-base:after{content:"";position:absolute;left:50%;bottom:5px;width:92px;height:4px;
    margin-left:-46px;border-radius:3px;background:#ffffff2e}
}

/* ---- IT HAS TO FIT ONE SCREEN ON WEB, which is the other half of what he asked for. ----
   Measured before touching it: the hero ended at 658px and this section was 756px tall on a
   900px viewport, so the film could not be seen without scrolling even though it fits on a
   phone. The head gives up its own breathing room first, then the stage. */
@media(min-width:901px){
  .showroom .section-head.film-head{margin-bottom:22px;max-width:1120px}
  .film-head h2{font-size:clamp(34px,3.6vw,52px);line-height:1.07}
  .film-stage{height:clamp(240px,34vh,318px)}
}

/* ============================================================================================
   THE TWO THINGS HE WANTS PRESSED, SIZED LIKE IT.

   Founder, 2026-09-24: "that get founding access and watch varren run a job should be both bold.
   Bolder and bigger so they catch attention. Both on mobile and web view."

   MEASURED BEFORE TOUCHING THEM, which is why this is a real change and not a nudge: the primary
   action was 11px at weight 500, and the second was a 12px text LINK rather than a button at all,
   on a page whose headline is 80px. The two things a visitor is meant to DO were the smallest type
   in the hero.

   The eyebrow ("Introducing Varren, pre-launch") is deleted from the markup, which was his own
   suggestion, and that is what pays for the extra height.

   SCOPED UNDER `.hero-heading`, matching the existing rules, because six separate rules already
   set `.hero-actions` gaps and a bare `.hero-actions .button` would be a specificity coin toss
   with whichever of them came last.
   ============================================================================================ */
.hero-heading .hero-actions{gap:14px;align-items:stretch}
.hero-heading .hero-actions .button{font-size:15px;font-weight:650;letter-spacing:.005em;
  min-height:58px;padding:17px 28px;border-radius:9px;gap:12px}
.hero-heading .hero-actions .button.secondary{border-color:var(--ink);border-width:1.5px;
  color:var(--ink)}
.hero-heading .hero-actions .button.secondary:hover:not(:disabled){background:var(--soft)}
@media(max-width:700px){
  .hero-heading .hero-actions{gap:11px}
  .hero-heading .hero-actions .button{font-size:14.5px;min-height:54px;padding:15px 18px;width:100%}
}

/* ============================================================================================
   THE LABELS A VISITOR READS, SIZED SO THEY CAN BE READ.  (Founder, 2026-09-24, items 10 to 16.)

   Measured first: .eyebrow was 10.5px/500, .handoff-label 8px/400, the audience card labels
   12px/400 and the scenario tab titles 16px/400, on a page with an 80px headline. His words were
   "not visible", "very small", "look blurry" and "unmistakably ... no one can mistake who they are
   for".

   Appended last on purpose. The base rules are defined once near the top of this file and then
   overridden a dozen times further down for particular blocks; matching each of those would be a
   specificity argument with no end. These sit at the end and win by order, EXCEPT where a more
   specific selector exists, which is exactly the mock-interface chrome that must stay small.
   ============================================================================================ */

/* The section labels: "Why an operator", "One instruction, start to finish", "Who it is for".
   THE LIGHT THEME HAS ITS OWN RULE, which is why this is written twice. A bare `.eyebrow`
   loses to `:root[data-theme="light"] .eyebrow{font-weight:600}`, an existing legibility
   tweak with one more class of specificity. Matched rather than forced with !important,
   which would win the argument and leave the next person unable to theme it. */
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.13em}
:root[data-theme="light"] .eyebrow{font-weight:700}

/* The comparison's two columns. 8px was the smallest type on the whole site. */
/* NO OPACITY HERE. My first version used `opacity:.72` to soften this and measured 3.82:1
   against the 4.5 floor: I made a label he called invisible bigger AND harder to read at
   the same time. A muted COLOUR is the honest way to de-emphasise text; opacity is a way
   to do it without the contrast showing up in review. */
.handoff-label{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.handoff-side.is-varren .handoff-label{color:var(--accent)}

/* "Every other tool hands the work back." wrapped onto a third line because the head is capped at
   800px while the line needs about 1050px at this size. He asked for two lines and the markup
   already splits it with a <br>; only the width was missing. */
@media(min-width:901px){
  .compare-section .section-head{max-width:1120px}
  .compare-section .section-head h2{font-size:clamp(38px,4.2vw,58px);line-height:1.08}
}

/* "Find your next market" / "From intelligence to a launch." */
.scenario-tabs button div{font-size:17.5px;font-weight:600;line-height:1.25}
.scenario-tabs button small{font-size:13px;font-weight:450;opacity:.85}

/* "01 / Founders & businesses" and its three siblings. He asked for these by name: it must be
   unmistakable who the product is for. */
.audience-grid a>span:first-child{font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.audience-grid a h3{font-weight:500}

@media(max-width:700px){
  .eyebrow{font-size:12px}
  .handoff-label{font-size:11.5px}
  .scenario-tabs button div{font-size:16px}
  .audience-grid a>span:first-child{font-size:12px}
}

/* ============================================================================================
   THE FOUNDING ACCESS PAGE OPENS ON ONE SCREEN.  (Founder, 2026-09-24, item 17.)

   "when you click on Get Founding Access, every single thing on that page should fit in one page
   ... I have to slide to see what is left, and I have to slide to see choose your starting
   capacity."

   MEASURED at 1440x900 before changing anything: the hero was 924px tall, so the action sat 24px
   below the fold. The headline ran to FOUR lines. It is the page we ask people to buy from, and
   the buy action was the part you could not see.

   The headline gives up the height, not the actions: it is the thing with the most to give, and a
   four-line headline on a sales page is not helping anyway. Keyed to viewport HEIGHT as well as
   width, because the fold is a height problem and a wide short laptop is where it bit.
   ============================================================================================ */
@media(min-width:901px){
  .access-hero{padding-block:44px 40px}
  .access-hero h1{font-size:clamp(40px,4.4vw,64px);line-height:1.04;margin-bottom:18px}
  .access-hero .hero-actions{margin-top:22px}
}
@media(min-width:901px) and (max-height:940px){
  .access-hero{padding-block:30px 26px}
  .access-hero h1{font-size:clamp(36px,3.6vw,52px)}
  .access-hero>div>p{margin-bottom:10px}
}
/* The same promise on a phone: the first thing in view is what to do next. */
@media(max-width:700px){
  .access-hero{padding-block:26px 24px}
  .access-hero h1{font-size:clamp(32px,8.6vw,42px);line-height:1.06}
}

/* ============================================================================================
   THE ACTIONS ON THE PAGE WE ASK PEOPLE TO BUY FROM.

   Same reasoning as the home hero, same measurement: "Choose your starting capacity" and every
   tier's buy button were 12px at weight 500. On a sales page, the buy action being smaller than
   the body copy is not a style choice.

   Scoped to the two sales surfaces rather than raised on `.button` globally, because `.button` is
   also used for quiet, secondary things all over the site and making every one of them shout is
   how a page stops having a hierarchy at all.
   ============================================================================================ */
.access-hero .hero-actions .button,
.packages-section .plan-card .button,
.order-summary .button{font-size:14.5px;font-weight:650;min-height:54px;padding:16px 24px}
.access-hero .hero-actions .text-link{font-size:14px;font-weight:600}
@media(max-width:700px){
  .access-hero .hero-actions .button,
  .packages-section .plan-card .button,
  .order-summary .button{font-size:14px;min-height:52px;width:100%}
}

/* ============================================================================================
   FOUND BY SWEEPING EVERY PAGE IN BOTH THEMES AT BOTH SIZES, which is what he asked for.
   28 combinations: no overflow, no broken image, no dead link, no console error. These are the
   real defects it found, each verified by hand afterwards because a probe that reports something
   alarming has to be checked before it is acted on.
   ============================================================================================ */

/* THE MOON IS INVISIBLE IN DARK MODE, on every page, measured at 1.52:1 against a 4.5 floor.
   It is real brand burgundy #6E1028 on a near-black button. theme.js's own note already said
   this in as many words: "Dark mode cannot show the actual brand colour at all; it has to
   substitute a lighter tint." The tint already exists as a token and simply was not used here. */
:root[data-theme="dark"] .theme-glyph{color:var(--burgundy-on-dark,#b6687b)}

/* TAP TARGETS ON A PHONE. The earlier floor covered the controls that existed then; these four
   are what a sweep of every page turned up afterwards. A FAQ row you cannot open and a consent
   box you cannot tick are not small defects: they are the two places a buyer stops. */
@media(pointer:coarse) and (max-width:900px){
  .audience-grid a,.audience-grid a.button{min-height:44px}
  /* The in-page jump nav on /solutions. These are `.button.secondary`, which a rule further
     up shrinks on small screens; the base .button floor of 49px never reaches them. Found by
     sweeping every page rather than by looking at the one I had just changed. */
  a.button,a.button.secondary,button.button{min-height:44px}
  /* AND THE ONE THAT OUTRANKED THAT. `.section .wrap > nav .button` sets 42px under
     max-width:700px and is (0,3,1); a bare `a.button` is (0,2,1) and loses. Measured off
     the element's own matching rules rather than guessed at a second time. */
  .section .wrap > nav .button{min-height:44px;padding:11px 15px}
  summary{min-height:44px;display:flex;align-items:center}
  /* THE CLASS IS `consent`, NOT `consent-check`. I wrote the second from memory and the rule
     matched nothing; the sweep said so on the next run, which is why it is run again after a
     fix rather than assumed. This is the box a buyer must tick to reach him. */
  label.consent,.consent-check{min-height:44px;align-items:center}
  .site-footer a,.fine-print a,.seller-line a{display:inline-flex;align-items:center;min-height:44px}
}

/* THE PASS CARD'S OWN LABEL WAS BURGUNDY ON BURGUNDY, and I could read the defect off a
   screenshot before I could off a number: "VARREN FOUNDING ACCESS" is all but invisible on the
   card it names.

   IT IS A SPECIFICITY TIE, NOT A MISSING RULE. `.pass-content .eyebrow` sets the card's gold
   (#d3b98a) and `:root[data-theme="light"] .eyebrow` sets page burgundy; both are (0,2,0), so the
   one written LATER in the file wins, and it is the theme rule. The card has been losing that
   argument the whole time. Given one more class here so the card keeps its own colour, in both
   themes, rather than reordering a file a dozen other rules depend on. */
:root .pass-content .eyebrow,
:root[data-theme="light"] .pass-content .eyebrow,
:root[data-theme="dark"] .pass-content .eyebrow{color:#d3b98a;font-size:11px;font-weight:700}

/* ============================================================================================
   THE SECTION HEADINGS RUN TO THREE LINES BECAUSE THE BOX IS 800px WIDE, NOT BECAUSE THEY ARE
   LONG.  (Founder, 2026-09-24, item 14: "Varren does the job and brings it back can be also one
   line as well".)

   Measured at 1440x900: `.section-head` is capped at 800px while these headlines need roughly
   1050px at 62px. Three of them wrapped to three lines, with the last line carrying two or three
   words. The comparison head and the film head were widened individually earlier in this brief;
   doing it once, for all of them, is the same fix applied properly rather than three times.

   THE PARAGRAPHS DO NOT WIDEN WITH IT, which is the thing to check before touching a shared box:
   `.section-head p:not(.eyebrow)` carries its own 450px cap, so body copy keeps its measure and
   only the headline uses the extra room. Verified after, not assumed.
   ============================================================================================ */
@media(min-width:1200px){
  .section-head{max-width:1120px}
  .section-head h2{font-size:clamp(40px,4.3vw,58px);line-height:1.08}
}

/* ============================================================================================
   THE DEVICE IS BURGUNDY, IN BOTH THEMES, AND IT HAS NAVIGATION.  (Founder, 2026-09-24 (2).)

   HE ASKED FOR THE COLOUR TO BE DECIDED BY COMPARING, SO IT WAS. Three candidates rendered side
   by side and screenshotted in both themes:
     obsidian  dark: device #14100f on page #100e0f, near-identical, the device disappears. His
                     complaint, confirmed by measurement.   light: strong.
     burgundy  dark: reads immediately as a device, and as OURS.   light: equally strong.
     ivory     dark: reads as a DOCUMENT, not a device.   light: the chrome dissolves into the
                     page and the frame is lost entirely.
   Burgundy is the only one that works in both, it is the brand, and one colour for both themes
   means there is no second thing to keep in sync.

   AND A PRODUCT HAS NAVIGATION. That is what turns a panel into a device, and it is also what
   makes the film legible: the rail names Varren's five verbs and lights the one that is running,
   so "what is it doing right now" is answered without reading any prose. Left rail on desktop,
   where an application puts it; bottom tab bar under 900px, where a phone puts it.
   ============================================================================================ */
.film-device{background:#4a0d1c;border-color:#7d1a30;
  box-shadow:0 30px 70px #4a0d1c2e,0 2px 0 #ffffff1f inset}
.film-chrome{background:linear-gradient(180deg,#6e1028,#4a0d1c);border-bottom-color:#7d1a30;
  padding:12px 16px;min-height:46px}
.fc-brand b{color:#f7ece8}
.fc-context{color:#f7ece8;opacity:.6}
.fc-live{color:#f7ece8;opacity:.86}
.fc-live i{background:#e8c98f;box-shadow:0 0 0 3px #e8c98f2e}
/* Window dots. Three muted dots read as "a window" anywhere in the world, and unlike coloured
   traffic lights they do not say "somebody's laptop". Desktop only: a phone has no window. */
.fc-dots{display:none;gap:6px;margin-left:14px}
.fc-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff38;display:block}
@media(min-width:901px){.fc-dots{display:inline-flex}}

/* ---- the body: rail beside the screen ---- */
.film-body{display:flex;align-items:stretch;background:#4a0d1c}
.film-body .film-screen{flex:1;min-width:0}
.film-nav{display:flex;flex-direction:column;gap:2px;padding:12px 10px;width:132px;flex:none;
  border-right:1px solid #7d1a3055}
.fn-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;
  color:#f7ece8;opacity:.5;transition:opacity .3s ease,background .3s ease}
.fn-item i{font-style:normal;font-size:13px;width:16px;text-align:center;flex:none}
.fn-item b{font-size:12px;font-weight:600;letter-spacing:.02em}
.fn-item.is-on{opacity:1;background:#ffffff1a}
.fn-item.is-on i{color:#e8c98f}

/* MORE ROOM INSIDE, which he asked for. The scene was 26px/28px in a box that now has a rail
   beside it, so the content needed its own breathing space back. */
.film-body .film-screen .film-scene{padding:30px 32px 26px}
@media(min-width:901px){.film-stage{height:clamp(258px,35vh,330px)}}

/* ---- the phone: the rail becomes a tab bar, where a phone puts it ---- */
@media(max-width:900px){
  .film-device{border-color:#7d1a30;background:#4a0d1c}
  .film-body{flex-direction:column}
  .film-nav{flex-direction:row;width:auto;padding:7px 6px;gap:2px;border-right:0;
    border-top:1px solid #7d1a3055;order:2;justify-content:space-between}
  .fn-item{flex-direction:column;gap:3px;padding:6px 2px;flex:1;text-align:center}
  .fn-item i{width:auto;font-size:14px}
  .fn-item b{font-size:9.5px;letter-spacing:.01em}
  .film-body .film-screen{order:1}
  .film-body .film-screen .film-scene{padding:22px 18px 20px}
}

/* ============================================================================================
   "PEOPLE REST. VARREN DOES NOT."  (Founder, 2026-09-24 (3): "one of the most important parts",
   "so it doesn't get missed at all".)

   It was already the longest beat with a reveal on it, and it still went by, so a bigger font
   alone was never going to be the answer. Four things happen at once and none of them is
   decoration:

     THE MACHINE CHANGES STATE   the device's own status reads WORKING for ten beats and becomes
                                 NEVER STOPS here. A product saying something about itself lands
                                 harder than a page saying it.
     EVERYTHING GOES QUIET       the step number and the scene chrome fade out, so the only thing
                                 on the screen is the sentence.
     THE RAIL LIGHTS ALL FIVE    every other beat lights exactly one verb. Five at once says "the
                                 whole loop, and it does not stop". NONE would have said "it
                                 stopped", which is the opposite of the point.
     IT HOLDS                    6.2s to 9.4s, half again longer than any other beat.
   ============================================================================================ */

/* the sentence itself */
.film-scene.is-closer .fs-head{opacity:0;transform:translateY(-6px);
  transition:opacity .7s ease,transform .7s ease}
.film-scene.is-closer .fb-never{margin-top:6px}
.film-scene.is-closer .fb-never-a{font-size:clamp(20px,2.2vw,27px);opacity:.52}
.film-scene.is-closer .fb-never-b{font-size:clamp(34px,4.4vw,54px);letter-spacing:-.03em}
.film-scene.is-closer .fs-status{opacity:0;transition:opacity .6s ease .2s}
.film-scene.is-closer.is-live .fs-status{opacity:1;transition-delay:3.6s}

/* the rail, all five, with a slow sweep so it reads as a cycle rather than a stuck state */
.film-nav.is-all .fn-item{opacity:1;background:#ffffff14}
.film-nav.is-all .fn-item i{color:#e8c98f;animation:navSweep 2.6s ease-in-out infinite}
.film-nav.is-all .fn-item:nth-child(1) i{animation-delay:0s}
.film-nav.is-all .fn-item:nth-child(2) i{animation-delay:.16s}
.film-nav.is-all .fn-item:nth-child(3) i{animation-delay:.32s}
.film-nav.is-all .fn-item:nth-child(4) i{animation-delay:.48s}
.film-nav.is-all .fn-item:nth-child(5) i{animation-delay:.64s}
@keyframes navSweep{0%,100%{opacity:.45;transform:scale(1)}
  50%{opacity:1;transform:scale(1.22)}}

/* the status the device reports about itself */
.fc-live-text{letter-spacing:.14em}
.film:has(.is-closer.is-live) .fc-live i{animation-duration:1.1s}

/* REDUCED MOTION IS HONOURED, and the sentence still lands. The sweep and the pulse stop; the
   type, the quiet and the all-five state remain, because those carry the meaning and the motion
   only carries the drama. */
@media(prefers-reduced-motion:reduce){
  .film-nav.is-all .fn-item i{animation:none;opacity:1}
  .film:has(.is-closer.is-live) .fc-live i{animation:none}
  .film-scene.is-closer .fs-head{transition:none}
}

/* WHERE THE WATCH BUTTON LANDS, the no-JS half. The script centres the section; this makes even
   a plain anchor jump clear the sticky header instead of parking the heading underneath it. */
#showroom{scroll-margin-top:96px}
@media(max-width:900px){#showroom{scroll-margin-top:74px}}

/* the line, once more, at the end of the page */
.closing-never{display:block;font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(23px,2.5vw,31px);letter-spacing:-.02em;color:var(--accent);margin-bottom:10px}

/* ============================================================================================
   THE WHOLE FILM FITS A SHORT PHONE.  (Founder, 2026-09-24 (4): when it lands, the part under the
   rail "shouldn't be missing", and the heading should be centred with it.)

   HE WAS RIGHT AND MY TWO TEST SIZES WERE BOTH THE COMFORTABLE ONES. Measured across eight real
   viewports after a real click on the Watch button:

       laptop 1366x768    640 of 768   fits
       laptop 1440x800    651 of 800   fits
       iPhone 375x812     796 of 812   fits, by 8px
       iPhone Pro 390x844 796 of 844   fits
       Android 412x915    796 of 915   fits
       iPhone SE 375x667  786 of 667   DOES NOT FIT. The heading is cut off at the top and the
                                       chapter ticks and the note are cut off at the bottom.

   An iPhone SE is not an edge case, and "it fits on my phone" is exactly the shape of assumption
   this whole project keeps getting caught by. Keyed on HEIGHT, because height is what ran out; a
   tall phone keeps the roomier version and nothing below changes for it.

   THE HEADLINE AND THE STAGE GIVE UP THE SPACE, not the navigation and not the note. The rail is
   the thing that says what Varren is doing and the note is the honesty line ("Concept
   demonstration"); shrinking either to win 20px would be trading the point of the section for
   its packaging.
   ============================================================================================ */
@media(max-width:900px) and (max-height:760px){
  .showroom .section-head.film-head{margin-bottom:14px}
  .film-head h2{font-size:clamp(25px,6.6vw,31px);line-height:1.08}
  .film-sub{font-size:12px;margin-top:6px}
  .film-stage{height:clamp(196px,30vh,240px)}
  .film-body .film-screen .film-scene{padding:16px 15px 14px}
  .film-chrome{min-height:34px;padding:7px 12px}
  .film-nav{padding:5px 5px}
  .fn-item{padding:5px 2px}
  .fn-item b{font-size:9px}
  .film-base{height:12px}
  .film-rail{padding:8px 2px 0}
}
/* A very short phone, and a phone in landscape, give up the sub line as well. The heading and
   the device are the two things that have to survive. */
@media(max-width:900px) and (max-height:640px){
  .film-sub{display:none}
  .film-stage{height:clamp(170px,26vh,200px)}
  .film-head h2{font-size:clamp(22px,5.8vw,27px)}
}

/* ============================================================================================
   THE MISSIONS SCREEN IS THE SAME PRODUCT, A DIFFERENT SCREEN.  (Founder, 2026-09-24 (4).)

   He asked for this section to become a device too, "a different one but fancy", and for the
   whole site to look like a world-class product designer made it. The important decision is what
   DIFFERENT means: a designer would not put two unrelated gadgets on one page, they would show
   two SCREENS OF ONE PRODUCT. Two unrelated devices say "we made some mockups". Two screens of
   one product say "this is a real thing with more than one view".

   So it shares the burgundy chrome, the V tile and the wordmark, and differs exactly where a
   different screen differs: a TABLET rather than a desktop window (wider, shallower, flatter
   corners), a context that reads "Missions" rather than "Command Center", and a header that
   names the mission you are looking at instead of a live indicator.

   The content inside is the tab list and panel that were already on the page. That is the point:
   a real application screen is a list and a detail view, and this section already WAS one. It
   simply was not wearing the product.
   ============================================================================================ */
.mission-device{border-radius:20px;background:#4a0d1c;border:1px solid #7d1a30;overflow:hidden;
  box-shadow:0 26px 60px #4a0d1c24,0 2px 0 #ffffff1a inset;margin-top:26px}
.mission-chrome{display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:44px;
  background:linear-gradient(180deg,#6e1028,#4a0d1c);border-bottom:1px solid #7d1a30}
.mission-chrome .fc-context{flex:1;text-align:center;color:#f7ece8;opacity:.6}
.md-status{flex:none;font-size:11px;font-weight:600;letter-spacing:.04em;color:#f7ece8;
  padding:4px 11px;border-radius:20px;background:#ffffff1f;white-space:nowrap}
.mission-device .scenario-layout{background:var(--surface);margin:0;padding:22px}

/* A TABLET IS WIDER AND SHALLOWER THAN A WINDOW, and that is most of what makes it read as a
   different device rather than the same one twice. */
@media(min-width:901px){
  .mission-device{max-width:1180px;margin-inline:auto}
  .mission-device .scenario-layout{padding:26px 28px}
}
@media(max-width:900px){
  .mission-device{border-radius:22px;margin-top:18px}
  .mission-device .scenario-layout{padding:16px 14px}
  .mission-chrome{padding:9px 13px;min-height:40px}
  .mission-chrome .fc-context{display:none}
  .md-status{font-size:10px;padding:3px 9px}
}

/* THE RAIL IS MADE OF BUTTONS NOW, so it needs the things a button needs: a reset, a pointer, a
   focus ring somebody can see, and a touch-sized target. */
.fn-item{border:0;background:transparent;font:inherit;cursor:pointer;text-align:left;width:100%}
.fn-item:hover{opacity:.85;background:#ffffff12}
.fn-item.is-on:hover{opacity:1}
.fn-item:focus-visible{outline:2px solid #e8c98f;outline-offset:2px}
@media(pointer:coarse) and (max-width:900px){.fn-item{min-height:44px}}

/* ============================================================================================
   THE MISSION SELECTOR MOVES TO THE BOTTOM, WHERE A DEVICE PUTS ITS NAVIGATION.

   Founder, 2026-09-24: "no device has the buttons on the top, it's on the down ... and it should
   look pretty."

   He is right and it is the same principle the film device already follows: its rail is a bottom
   tab bar on a phone. A list running down the LEFT is a web page's sidebar; a row across the
   BOTTOM is a device's navigation. Once the section is wearing a device, the sidebar is the thing
   that gives the game away.

   THE BAR SITS ON THE DEVICE'S OWN BURGUNDY, NOT ON THE CONTENT SURFACE. That is what makes it
   read as part of the hardware rather than as three more buttons inside the screen, and it is why
   the content above it loses its card border: the device is already the frame, so a second frame
   inside it was a box in a box.

   REDUCED, AS HE ASKED: the descriptive line under each title is hidden HERE only. It is not
   deleted, because the panel above already says it at length, so in the bar it was the same
   sentence twice and it was what made the buttons tall.
   ============================================================================================ */
.mission-device .scenario-layout{display:flex;flex-direction:column;gap:0;padding:0}
.mission-device .scenario-panel{order:1;border:0;border-radius:0;background:transparent;
  padding:30px 32px 26px}

/* the bar */
.mission-device .scenario-tabs{order:2;flex-direction:row;gap:6px;padding:10px;
  background:linear-gradient(180deg,#4a0d1c,#3d0a17);border-top:1px solid #7d1a30;
  overflow:visible}
/* THREE SEGMENTS, NOT THREE FLOATING WORDS. Each carries a faint surface of its own so the bar
   reads as a control with three parts; without it they drift in the burgundy and the active one
   looks like a slab somebody dropped in. The selected one gets a gold hairline ABOVE it, which is
   the oldest and quietest way to say "you are here" and costs no extra height. */
.mission-device .scenario-tabs button{flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  padding:10px 13px;border:1px solid #ffffff14;border-radius:9px;background:#ffffff0a;
  color:#f7ece8;opacity:.66;position:relative;overflow:hidden;
  transition:opacity .25s ease,background .25s ease,border-color .25s ease}
/* THE INDICATOR SITS UNDER THE ACTIVE ITEM, NOT OVER IT. Founder, 2026-09-24: "move that gold
   to the bottom ... just one, only on the bottom. Not on the top." He is right and it is also
   the conventional place: an underline is what a selected tab has worn since tabs existed, so it
   needs no learning. ONE line, at the bottom, and nothing gold anywhere else on the control. */
.mission-device .scenario-tabs button:before{content:"";position:absolute;left:11px;right:11px;
  bottom:0;height:2px;border-radius:2px 2px 0 0;background:#e8c98f;
  transform:scaleX(0);transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.25,1)}
.mission-device .scenario-tabs button[aria-selected="true"]:before{transform:scaleX(1)}
.mission-device .scenario-tabs button:hover{opacity:.92;background:#ffffff16}
.mission-device .scenario-tabs button:focus-visible{outline:2px solid #e8c98f;outline-offset:2px}
.mission-device .scenario-tabs button>span{flex:none;font-size:10px;font-weight:700;
  letter-spacing:.1em;color:#e8c98f;opacity:.75}
.mission-device .scenario-tabs button>div{font-size:13px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
.mission-device .scenario-tabs small{display:none}   /* the panel above already says it */
.mission-device .scenario-tabs b{display:none}
/* border-bottom-color is named explicitly because an earlier rule further up this file sets it
   to the gold accent for the non-device tab list. Left alone it would put a SECOND gold line on
   the same edge as the indicator, which is exactly the doubling he asked not to have. */
.mission-device .scenario-tabs button[aria-selected="true"]{opacity:1;background:#ffffff1c;
  border-color:#ffffff33;color:#fff;border-bottom-color:#ffffff33}
.mission-device .scenario-tabs button[aria-selected="true"]>span{opacity:1;color:#f0d9a8}

@media(max-width:900px){
  .mission-device .scenario-panel{padding:20px 16px 18px}
  .mission-device .scenario-tabs{gap:4px;padding:7px}
  .mission-device .scenario-tabs button{flex-direction:column;gap:3px;padding:8px 4px;
    text-align:center;min-height:44px}
  .mission-device .scenario-tabs button>div{font-size:10.5px;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .mission-device .scenario-tabs button>span{font-size:9px}
}

/* ============================================================================================
   THE DEVICE BOOTS.  (Founder, 2026-09-24 (5): "design and implement a Varren splash screen ...
   so when a person comes there first, it loads and they have time to adjust, see the film begin
   and understand what is going on.")

   A real device shows you whose it is before it shows you anything else, and that half second is
   exactly the orientation he is describing. It plays ONCE, when the film first comes into view:
   replaying it on every scroll past turns a welcome into a nuisance, and playing it off screen
   wastes it on nobody.

   The real mark on its ivory tile, the wordmark in the display face, and a hairline that fills
   like something loading. Nothing else: a splash that explains itself is not a splash.
   ============================================================================================ */
.film-splash{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(120% 90% at 50% 0%,#5d1122,#3d0a17 70%);
  transition:opacity .75s ease,visibility .75s ease}
.film-splash.is-gone{opacity:0;visibility:hidden}
.fs-tile{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:14px;background:#f3eee6;box-shadow:0 8px 26px #00000038}
.fs-tile img{display:block;width:30px;height:32px;object-fit:contain}
.fs-word{font-family:'Playfair Display',serif;font-size:23px;font-weight:600;letter-spacing:.34em;
  color:#f7ece8;margin-left:.34em}
.fs-line{display:block;width:132px;height:2px;border-radius:2px;background:#ffffff26;overflow:hidden}
.fs-line i{display:block;height:100%;width:0;background:#e8c98f;border-radius:2px;
  animation:fsFill 2.3s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes fsFill{to{width:100%}}
.fs-sub{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#f7ece8;opacity:.5}

/* ---- A REAL LAPTOP ON WEB. A machine standing on a desk, not a rectangle floating on a page.
   The base is wider than the lid and sits under it, which is the whole read; the notch is the
   thumb recess every laptop has. ---- */
@media(min-width:901px){
  .film-laptop-base{display:block;position:relative;height:13px;width:112%;margin:0 auto;
    margin-left:-6%;border-radius:0 0 14px 14px;
    background:linear-gradient(180deg,#6e1028,#43101c 62%,#2c0a12);
    box-shadow:0 16px 30px #00000026}
  .film-laptop-base:after{content:"";position:absolute;left:50%;top:0;width:96px;height:5px;
    margin-left:-48px;border-radius:0 0 7px 7px;background:#00000038}
  .film-device{border-radius:14px 14px 4px 4px}
}
@media(max-width:900px){.film-laptop-base{display:none}}

/* ---- A REAL PHONE ON MOBILE. What makes a phone look like a phone is the ASPECT RATIO, not the
   corner radius, so the screen gets taller rather than rounder. Held under the height the whole
   section needs to keep fitting one screen, which is measured and guarded separately. ---- */
@media(max-width:900px){
  /* AS TALL AS A PHONE CAN BE WHILE THE WHOLE SECTION STILL FITS ONE SCREEN. My first
     attempt fixed the aspect ratio at 420px and broke two common phones: the section
     became 916px in an 812px viewport, so the heading was cut off the top and the chapter
     ticks off the bottom - the exact defect he reported two briefs ago, reintroduced by a
     change meant to make it look better. Tied to viewport HEIGHT instead, so the device
     takes every pixel available and not one more. */
  /* AS TALL AS A PHONE CAN BE WHILE THE WHOLE SECTION STILL FITS ONE SCREEN. My first
     attempt fixed the aspect at 420px and broke two common phones: the section became 916px
     in an 812px viewport, so the heading was cut off the top and the chapter ticks off the
     bottom, which is the exact defect he reported two briefs ago, reintroduced by a change
     meant to make it look BETTER.

     A vh FRACTION was the second wrong instrument, and it is worth saying why rather than
     just replacing it: everything around the stage - the heading, the device chrome, the
     rail, the note - is a FIXED pixel block, about 512px of it. So the stage should take
     the REMAINDER, not a percentage. 42vh still overflowed the 812px phone by 9px because
     a proportion of a small viewport is small, while the fixed block around it is not.

     svh, NOT vh: on a phone browser vh is the LARGE viewport, measured with the address bar
     hidden, so a layout built on it overflows for everybody who has not scrolled yet. svh is
     the small one, which is the conservative and correct measurement here. The vh line stays
     underneath as the fallback for anything that does not know svh. */
  .film-stage{height:clamp(240px,calc(100vh - 512px),400px)}
  @supports(height:100svh){.film-stage{height:clamp(240px,calc(100svh - 512px),400px)}}
  .film-device{border-radius:30px}
  .film-screen{border-radius:0}
}
/* SHORT PHONES GET THEIR SHARE TOO. A 667px handset had 55px spare and the tightest device on
   the site, which is backwards: the smallest screen is where the product has least room to
   make its case. 36vh -> 40vh, still inside the fit. */
@media(max-width:900px) and (max-height:760px){.film-stage{height:clamp(240px,41vh,320px)}}
/* ON THE SMALLEST HANDSET THE TWO ASKS GENUINELY CONFLICT, so it is written down rather
   than quietly split. A 375x667 screen cannot hold a device at phone proportions AND the
   heading AND the chapter ticks: reaching 1.45:1 there needs a 355px stage, which makes the
   section 731px in a 667px viewport. "Still fits in the mobile screen" is his binding
   clause and the one already broken once, so the device stays squatter on that size alone.
   44vh is the most it can take while keeping a real margin. */
@media(max-width:900px) and (max-height:640px){.film-stage{height:clamp(196px,30vh,240px)}}

/* ============================================================================================
   THE AGENT CHAPTER IS UNMISSABLE.  (Founder: "the beginning of Varren Agent doesn't catch
   attention, everyone will miss it. It should marvel, grab and hold attention, be unmissable and
   be aesthetically exceptional.")

   He is right about the cause: it was an eyebrow and a heading in the SAME ivory as the four
   sections around it, so nothing told a scrolling eye that a different PRODUCT had started. The
   oldest fix for that is a chapter break, and a full-bleed dark band is the strongest one that
   does not resort to a gimmick.

   DELIBERATELY OBSIDIAN, NOT BURGUNDY. The page already carries two burgundy devices meaning
   "this is Varren working". A third burgundy surface would blur that into "this is another
   device". Obsidian separates the chapter from the page AND from the devices.
   ============================================================================================ */
.agent-teaser.is-band{background:linear-gradient(180deg,#151113,#0f0c0d);color:#f3eee6;
  padding-block:clamp(56px,7vw,96px);margin-block:clamp(40px,5vw,72px);position:relative}
.agent-teaser.is-band:before,.agent-teaser.is-band:after{content:"";position:absolute;left:0;
  right:0;height:1px;background:linear-gradient(90deg,transparent,#e8c98f66,transparent)}
.agent-teaser.is-band:before{top:0}
.agent-teaser.is-band:after{bottom:0}
.agent-teaser.is-band .agent-eyebrow{display:flex;align-items:center;gap:12px;color:#e8c98f;
  font-size:12.5px;font-weight:700;letter-spacing:.22em}
.ae-rule{display:block;width:34px;height:1px;background:#e8c98f;flex:none}
.agent-teaser.is-band .agent-head{font-size:clamp(38px,5vw,70px);line-height:1.04;color:#f7f2ea}
.agent-teaser.is-band .agent-head em{color:#e8c98f}
.agent-teaser.is-band .lede{color:#f3eee6;opacity:.86}
.agent-teaser.is-band p{color:#ded4d2}
.agent-teaser.is-band .fine-print{color:#b4aaa9}
.agent-teaser.is-band .button{background:#f1e9da;color:#23171b;border-color:transparent;
  font-size:14.5px;font-weight:650;min-height:54px;padding:16px 26px}
/* The mock inside the band keeps its own light surface: it is a SCREEN, and a screen is lit. */
.agent-teaser.is-band .mini-workbench{box-shadow:0 30px 70px #00000052}

/* ============================================================================================
   2026-09-24 (7). Seven asks. Each one says what it is for, because the WHY is the half a
   newcomer needs and the half that stops somebody undoing it by accident.
   ============================================================================================ */

/* ---- (15) ONE GOLD LINE, SHORT, UNDER THE ACTIVE MISSION. ----------------------------------
   Founder: "it has two gold lines. One longer one, one shorter one. And they both don't look very
   good. Remove the long one. And the short one make it a little bit so it just fits ... but if it
   doesn't look good then just remove it."

   HE IS RIGHT AND I HAD ALREADY "FIXED" THIS ONCE, which is why it is measured here rather than
   argued about. There were genuinely TWO gold elements four pixels apart:

     .scenario-rail          226px, 1.2px thick   a LEGACY element from the old vertical tab list,
                                                  turned horizontal by a media query and never
                                                  removed when this became a device. Nothing in the
                                                  device design asks for it.
     button:before           358px, 2px thick     the indicator I added, spanning the full button.

   My earlier check reported ZERO gold lines here and I nearly said so. It read
   getComputedStyle(el), which does NOT see ::before or ::after, and the indicator is a pseudo
   element. An instrument that cannot see its subject, in the most literal form available.

   THE FIX SATISFIES EITHER READING OF "the long one", deliberately, because his words could mean
   either element and a wrong guess means another round trip: the legacy rail goes entirely, and
   the survivor shrinks to a short centred tick that "just fits" under the label rather than
   running the width of the button. One line, short, unmistakably intentional. */
.mission-device .scenario-rail{display:none}
.mission-device .scenario-tabs button:before{left:50%;right:auto;width:26px;margin-left:-13px;
  border-radius:2px}

/* ---- (13) A RING ROUND EACH OF THE THREE. --------------------------------------------------
   Founder: "when it says no salary, circle around it. The no holiday, circle around it. No this,
   circle around it. So it kind of like calls attention to each of them."

   They were three pills in a row, which reads as ONE list of three things. A ring drawn round each
   one, in sequence, makes them three separate assertions, which is what they are: no salary, no
   holiday, no handover are three different objections being answered one at a time.

   DRAWN IN SEQUENCE, NOT ALL AT ONCE, and each ring sits at a slightly different angle. Three
   identical rings appearing together would just be a border. Arriving one after another at
   imperfect angles reads as somebody circling them by hand while they talk, which is the gesture
   he is describing. */
.fb-never-row span{position:relative}
.fb-never-row span:after{content:"";position:absolute;inset:-6px -9px;border:2px solid #e8c98f;
  border-radius:999px;opacity:0;transform:scale(.86) rotate(-2deg);pointer-events:none}
.is-live .fb-never-row span:after{animation:neverRing .52s cubic-bezier(.2,1.5,.4,1) forwards}
.is-live .fb-never-row span:nth-child(1):after{animation-delay:2.55s}
.is-live .fb-never-row span:nth-child(2):after{animation-delay:2.95s}
.is-live .fb-never-row span:nth-child(3):after{animation-delay:3.35s}
.fb-never-row span:nth-child(2):after{transform:scale(.86) rotate(1.5deg)}
.fb-never-row span:nth-child(3):after{transform:scale(.86) rotate(-1deg)}
@keyframes neverRing{from{opacity:0;transform:scale(.86) rotate(-3deg)}
  to{opacity:.92;transform:scale(1) rotate(-1.5deg)}}
@media(prefers-reduced-motion:reduce){
  .fb-never-row span:after{animation:none!important;opacity:.9;transform:none}
}

/* ---- (11) "AUTONOMOUS GROWTH" IS LEGIBLE IN BOTH PLACES IT APPEARS. ------------------------
   Founder: "the autonomous growth infrastructure should be a bit more clear."

   The phrase appears TWICE and he did not say which, so both are fixed. Measured before touching:
     the splash subtitle   10.5px at opacity .5   "Autonomous growth operator"
     the footer line       11px                   "Autonomous growth infrastructure. Big ambition..."
   Half opacity on a ten-point uppercase label is the least legible text on the site, and it is on
   the first thing a visitor sees. */
.fs-sub{font-size:12px;opacity:.8;letter-spacing:.17em}
.footer-top>div:first-child p{font-size:13.5px;line-height:1.65;max-width:330px;opacity:.95}

/* ---- (14) THE INSTRUCTION SHOWS IN FULL. ---------------------------------------------------
   Founder: "the first page when it says ... seed round, it's not full. The seed round didn't show
   completely."

   Confirmed by measurement rather than taken on trust: on a 390px phone the line needed 262px in a
   241px box, with white-space:nowrap and overflow:hidden, so "round." was cut. It is correct on
   desktop, which is why nobody had seen it.

   SIZED IN vw SO IT CANNOT CLIP AGAIN AT ANY WIDTH, rather than picking a smaller fixed number
   that happens to fit the phone I tested. A fixed number would be right for one width and one
   string, and this string is the most important sentence in the film. */
@media(max-width:900px){
  .fb-prompt b[data-typewriter]{font-size:clamp(14px,4.8vw,21px)}
}

/* ---- (12) THE PHONE IS LONGER, AND THE SPACE COMES FROM THE HEADING. -----------------------
   Founder: "the mobile device on mobile should be a little bit longer so it looks like an actual
   mobile device. The top should ... have a little bit more space ... but the whole screen should
   be a little bit longer but still fits in the mobile screen."

   THE LAST CLAUSE IS THE BINDING ONE AND I HAVE BROKEN IT ONCE ALREADY. Two briefs ago a taller
   stage made this section 916px in an 812px viewport and cut the heading off the top, which was
   the exact defect he had reported before that.

   There is no room to take: measured, the section is 824px of an 844px viewport, so 20px of slack.
   A longer device therefore has to come FROM SOMETHING, and the honest candidate is the heading
   block, which was 222px on a screen where the product itself only had 481px. So the heading gives
   up about 40px and the screen takes it. The section total is unchanged, which is why the fit
   holds at every size. */
@media(max-width:900px){
  #showroom .section-head{margin-bottom:14px}
  #showroom .section-head h2{font-size:clamp(26px,7.2vw,34px);line-height:1.12}
  #showroom .section-head p:not(.eyebrow){font-size:12px;line-height:1.6;margin-top:8px}
  #showroom .section-head .eyebrow{margin-bottom:10px}
  /* the 512 constant is the FIXED furniture around the stage; the heading giving up 40px is what
     lets it fall to 472, and nothing else about the arithmetic changes. */
  /* 472 -> 436 and the cap 430 -> 460, after MEASURING what the heading actually gave up.
     Trimming the heading freed more than the stage took: 62px of the viewport was sitting
     unused on a 844px phone, and the device was 1.51:1 when a real handset is nearer 2:1.
     Spending that slack is the whole point of the ask.

     NOT SPENT TO THE LAST PIXEL, and that is deliberate. 422 fitted all eight sizes with 4px to
     spare on a 844px phone, and 4px is not a margin, it is a coincidence: a real handset varies
     with its address bar and its safe areas, and this measurement is taken in a browser told to
     be exactly 844. 436 keeps most of the gain and leaves ~18px, which survives being slightly
     wrong about the viewport. "Still fits in the mobile screen" is the binding half of his ask
     and it is the half I have already broken once. */
  .film-stage{height:clamp(240px,calc(100vh - 436px),460px)}
  @supports(height:100svh){.film-stage{height:clamp(240px,calc(100svh - 436px),460px)}}
  /* (12, second half) "the top should have a little bit more space where it has that in there" */
  .film-screen{padding-top:8px}
}

/* ---- SHORT PHONES, AND WHY THIS SITS AT THE END OF THE FILE. ------------------------------
   The max-height overrides further up were being BEATEN by the block above them, because CSS
   resolves a tie by document order and a media query carries no extra weight for being more
   specific about the device. So the 667px handset kept the floor value while a rule written
   for it sat forty lines higher, doing nothing. I only found it because the measurement did not
   move after a change that should have moved it.
   ---- */
@media(max-width:900px) and (max-height:760px){
  .film-stage{height:clamp(240px,41vh,320px)}
  @supports(height:100svh){.film-stage{height:clamp(240px,41svh,320px)}}
}
@media(max-width:900px) and (max-height:640px){
  .film-stage{height:clamp(196px,34vh,250px)}
  @supports(height:100svh){.film-stage{height:clamp(196px,34svh,250px)}}
}

/* ---- THE SENT CONFIRMATION -----------------------------------------------------------------
   Founder, 2026-09-24: "after i send form, it doesnt load and tell me its sent, it just writes
   request recieved with the texts in the form still there". This panel is what replaces the form,
   and it is deliberately the loudest thing on that column: the moment it appears is the moment a
   visitor decides whether this company is organised.

   EVERY COLOUR IS A TOKEN, so light and dark are one rule rather than two. The same mistake the
   app made was defining light-mode colours per component and then wondering why light mode looked
   unfinished; the site never did that, and this does not start.
   ---- */
.request-confirmed{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);padding:44px 38px 38px;align-self:start;outline:0}
.request-confirmed:focus-visible{border-color:var(--accent)}
.request-confirmed .eyebrow{color:var(--accent);margin-bottom:14px}
.request-confirmed h2{font-size:38px;line-height:1.18;margin:0 0 14px}
.confirmed-message{font-size:13px;line-height:1.75;margin:0 0 26px;max-width:30em;color:var(--muted)}
.request-confirmed .fine-print{font-size:10px;margin:24px 0 0;line-height:1.8}
/* The mark is drawn the same way .founding-terms draws its ticks, so the two read as one family.
   It is an icon and never the logo: golden rule 9 forbids a recreated LOGO, and the real lockup
   is already at the top of every page on this site. */
.confirmed-mark{display:block;width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);margin-bottom:22px}
.confirmed-mark:before{content:"";display:block;width:13px;height:7px;margin:11px auto 0;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.confirmed-lines{margin:0;padding:0;border-top:1px solid var(--line)}
.confirmed-lines>div{display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding:14px 0;font-size:11px}
.confirmed-lines dt{color:var(--muted);flex-shrink:0}
/* The address can be long and it is the one line a visitor rereads to check for a typo, so it
   wraps rather than being clipped or pushing the panel wide enough to scroll the page. */
.confirmed-lines dd{margin:0;text-align:right;color:var(--ink);overflow-wrap:anywhere}
/* 44px is the floor a thumb needs, and it is enforced elsewhere in this codebase by a test rather
   than by anyone remembering. A text-styled control still has to clear it. */
.request-confirmed [data-send-another]{margin-top:26px;background:none;border:0;padding:12px 0;min-height:44px;font:inherit;font-size:11px;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){
  .request-confirmed{padding:32px 24px 28px}
  .request-confirmed h2{font-size:31px;margin-bottom:12px}
  .confirmed-message{font-size:12px;margin-bottom:22px}
  .confirmed-lines>div{gap:16px}
}