@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}
/* A contact address inside a sentence (the cancel line): underlined so it reads as a link; site.js fills it in. */
.inline-contact{text-decoration:underline;text-underline-offset:3px}

/* Navigation is deliberately quiet; both theme and menu remain visible at 375px. */
.site-header{height:calc(83px + env(safe-area-inset-top, 0px));max-width:1500px;margin:auto;padding:env(safe-area-inset-top, 0px) 40px 0;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:calc(109px + env(safe-area-inset-top, 0px));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{font-weight:400}.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 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(34px,9.1vw,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:33px}.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)}
.found-trial{font-size:12px;line-height:1.5;color:var(--muted)}.found-trial a{color:inherit;text-decoration:underline}
@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}}
/* ===== AI EMPLOYEES, FOUNDER 2026-10-14 ==========================================================
   THE PART-TIME / FULL-TIME SWITCH IS CSS ONLY, and that is a decision rather than a shortcut. Both
   sizes are in the markup and the radio beside them decides which one is drawn, so a visitor whose
   bundle failed, or who reads with scripts off, still gets a price and a working Subscribe link.
   `:has()` is deliberately not used: it is the one part of this no-JavaScript path that is not
   available everywhere yet, and a price is the last thing on this page that may depend on the
   browser being new. The radios are ordered BEFORE the switch and the price blocks in the markup,
   because `~` only looks forward.
   THE SELECTED CHIP IS PAINTED WITH THE SITE'S OWN BUTTON TOKENS. They are the pair this stylesheet
   already ships and has measured in BOTH themes, so the chip cannot become the one surface that is
   unreadable in the other theme; a hand-picked fill here is exactly how that happens. */
.emp-tier{position:relative}
.emp-tiers{grid-template-columns:repeat(3,1fr)}
.emp-radio{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
.emp-switch{display:inline-flex;gap:4px;align-self:flex-start;border:1px solid var(--line);border-radius:999px;padding:3px}
.emp-chip{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--muted);border-radius:999px;padding:5px 13px;cursor:pointer;white-space:nowrap}
.emp-full:checked~.emp-switch .emp-chip-full,
.emp-part:checked~.emp-switch .emp-chip-part{background:var(--button);color:var(--button-ink)}
/* THE RADIO ITSELF IS INVISIBLE, so the focus ring has to be drawn on the CHIP the keyboard is on.
   Without this the control is reachable by Tab and nobody can see where they are. */
.emp-full:focus-visible~.emp-switch .emp-chip-full,
.emp-part:focus-visible~.emp-switch .emp-chip-part{outline:2px solid var(--accent);outline-offset:3px}
.emp-price{display:flex;flex-direction:column;gap:13px;flex:1}
.emp-full:checked~.emp-price-part,
.emp-part:checked~.emp-price-full{display:none}
@media(max-width:960px){.emp-tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.emp-tiers{grid-template-columns:1fr}}
/* THE EMPLOYEE CARD COULD NOT NARROW, AND THE FOUNDING BADGE IS WHAT STOPPED IT. Measured in the
   running app, 2026-10-14: at 375px the whole page scrolled sideways by 154px. A grid track sized
   `1fr` may not shrink below its content's min-content, and the Engineer's price row was a
   NON-WRAPPING flex row carrying a `white-space:nowrap` badge that reads "Founding price $5,000.00,
   held 12 months". That is 509px of min-content inside a 335px column, and because all seven cards
   share ONE grid, it dragged every card and every Subscribe button off the right edge with it.
   SCOPED to `.emp-tier` DELIBERATELY: `.found-tier-price` and `.found-save` are shared with the plan
   cards, and relaxing them globally would relayout a surface this lane does not own. */
.emp-tier .found-tier-price{flex-wrap:wrap}
.emp-tier .found-save{white-space:normal}
.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}
}

@media(min-width:901px) and (max-width:1280px){.film-laptop-base{width:100%;margin-left:0}}

/* THE HERO, the founder 2026-10-11: "too bold, too big, maximum two lines". The two sentences flow as one balanced
   headline instead of a forced break, so they fit two lines on a phone and on a desktop; last in the sheet so it
   settles every earlier breakpoint's size. */
.hero h1{font-size:clamp(26px,3.3vw,48px);line-height:1.16;letter-spacing:-.02em;text-wrap:balance;max-width:34ch}
.hero .lede{max-width:600px}
/* PHONE READABILITY FLOOR, the founder 2026-10-11: "mobile responsive ... looks good and clear". A phone block
   above scaled the desktop page down to 6 to 12px text (measured on staging at 390px). Same selectors, later in the
   sheet, so each wins: actions 14px, reading text 13px, labels 11.5px, the illustrations' inner text 10.5px. */
@media(max-width:700px){
.hero-heading .button,.hero-heading .text-link,.agent-teaser .button,.approval-actions .button,.closing .two-col .button,
.access-hero .hero-actions .button,.plan-card .button,.enterprise-row .button,.inline-field .button,
.section .wrap>nav .button,.agent-demo-controls,.agent-demo-controls button,.feature-card .text-link,.faq-list summary,
.scenario-tabs button>div{font-size:14px}
.button.compact,.site-header .button.compact{font-size:13px}
.hero-aside>p:not(.lede),.hero-heading .fine-print,.mission-response p,.decision-row p,.rough-brief,.plan-description,
.plan-allowances,.plan-note,.plan-cadence,.plan-amount>span,.credits-explainer p,.faq-list details p,.order-lines>div,
.seller-line,.invitation-form label,.invitation-form .consent,.feature-card p,.footer-top>div>a:not(.wordmark),
.footer-top .fine-print,.footer-bottom,.capability-strip>div,.scene-disclosure,.fine-print,small,.act-rail small,
.handoff-side li,.handoff-note,.film-sub,.film-note,.confirmed-message,.comparison-row,.fb-rows li,.fb-ab-row,
.fb-typed,.fb-fix,.fb-offer p,.fb-loop-next,.fb-never-row span,.routing-tasks small{font-size:13px}
.agent-step h3{font-size:16px}
.eyebrow,.hero .eyebrow,.plan-card .eyebrow,.agent-step .tag,.handoff-label,.comparison-heading,.scenario-top .proof-label,
.audience-grid>a>span:first-child,.scenario-tabs button>span,.flow-map span,.scene-stages button,.motion-control,
.film-toggle,.capability-strip,.fs-status,.fb-chip{font-size:11.5px}
.review-banner,.review-banner span,.window-badge,.mission-artifacts small,.mission-artifacts>div,.approval-chip,
.approval-float .eyebrow,.pass-top>span,.pass-line,.code-lines pre,.code-preview,.mission-bottom,.mission-window .window-top,
.scene-toolbar,.scene-toolbar .proof-label,.approval-demo-top .proof-label,.code-window .section-head .eyebrow,
.code-window .section-head .tag,.fb-code code{font-size:10.5px}
.eyebrow.eyebrow,.tag.tag,.feature-card .eyebrow,.agent-rail .eyebrow,.section-head .eyebrow,.routing-map .proof-label{font-size:11.5px}
.invitation-form .fine-print,.approval-demo p{font-size:13px}
}
/* THE SIGN-UP PAGE (founder, 2026-10-12: "not world-class", the "Create my workspace" button "looks poor (white block)").
   The submit button was class "btn btn-primary", which this stylesheet has no rule for, so it drew as the browser's own
   grey/white block, 31px tall and under the 44px thumb floor. It is a `.button` now, and on a DARK ground it takes the
   approved burgundy fill (#7E1631, ivory text, #B0284F edge); the light theme already gets #6e1028 from `.button`.
   "Already have an account? Log in" sits INSIDE the card under the button (the founder, 2026-10-12, could not find it when it was a separate block below the form), and a "Continue with Google" button sits above the fields wherever Google sign-in is offered. Labels and the
   consent line are 13px, not 10. Never #9B1B3D (rejected as "not burgundy"). */
.signup-fine{font-size:13px;color:var(--muted)}
.signup-have{margin:18px 0 0;text-align:center;font-size:14px;color:var(--muted)}.signup-have a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.invitation-form .ssos{display:grid;gap:10px;margin:0 0 4px}
.invitation-form .sso{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font-size:15px;font-weight:600;text-decoration:none}
.invitation-form .sso:hover{border-color:var(--text,currentColor)}
.invitation-form .or{display:flex;align-items:center;gap:14px;margin:18px 0 20px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.invitation-form .or:before,.invitation-form .or:after{content:"";flex:1;height:1px;background:var(--line)}
.invitation-form [data-signup-submit]{width:100%;min-height:52px;font-size:15px;font-weight:600;border-radius:10px;cursor:pointer}
.invitation-form .consent,.invitation-form label{font-size:13px}
:root[data-theme=dark] .invitation-form [data-signup-submit]{background:#7E1631;color:#f3eee6;border-color:#B0284F}
:root[data-theme=dark] .invitation-form [data-signup-submit]:hover{background:#8e1a38}

/* ===== THE HOME PAGE, 2026-10-16 (founder approved the spec in docs/design/HERO_CONSOLE_SPEC_2026-10-16.md).
   THE CONSOLE IS THE APP. Every .composer-card / .composer-bar / .composer-icon / .power-btn / .mp-chip /
   .varren-mode-* / .command-send-btn / .agent-working / .agent-turn / outcome-badge rule below is COPIED from
   src/marketing_ops/frontend/spa/styles.css and screens/01-chat-agent.css, and every colour token from the running
   app in each theme (read off staging on 2026-10-16). Scoped under .vc so nothing leaks into the rest of the site.
   Change the app, then change this; never redraw it. */
.hero-stage{position:relative;overflow:hidden;isolation:isolate}
.hero-field,.finale-field{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 64% at 50% 108%,rgba(126,22,49,.66),transparent 70%),
             radial-gradient(42% 36% at 50% 104%,rgba(184,154,104,.17),transparent 72%),
             radial-gradient(70% 60% at 50% -14%,#1c1317,transparent 72%)}
.hero-field{opacity:.84;transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}
.hero-stage[data-vc-state=working] .hero-field{opacity:1}
:root[data-theme=light] .hero-field,:root[data-theme=light] .finale-field{
  background:radial-gradient(ellipse at 50% 112%,#e9cfc8,#f3e6e2 44%,transparent 76%),
             radial-gradient(46% 38% at 82% -6%,rgba(184,154,104,.16),transparent 72%)}
.hero-v3{text-align:center;padding-top:clamp(36px,7vh,88px);padding-bottom:clamp(52px,9vh,104px)}
.hero-v3 h1{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(34px,4.5vw,62px);line-height:1.06;letter-spacing:-.024em;margin:0 auto;color:var(--ink)}
.hero-v3 .lede{font-size:clamp(15px,1.22vw,17.5px);line-height:1.55;color:var(--muted);max-width:46em;margin:18px auto 0}

.vc{--border:#312D33;--surface-raised:#1A191C;--surface-soft:#242227;--text:#FAF9F6;--text-2:#C9C4BE;--text-3:#8d8781;
  --brand-fill:#7E1631;--brand-fill-hover:#8A1533;--brand-ink:#e0899c;--gold:#B89A68;--gold-ink:#D9BE8E;--focus:#C9AD82;--tint-k:4.3;
  position:relative;max-width:760px;margin:clamp(26px,4.6vh,50px) auto 0;text-align:left;color:var(--text)}
:root[data-theme=light] .vc{--border:#BFB1B5;--surface-raised:#FFFFFF;--surface-soft:#F4F1EC;--text:#0E0C0D;--text-2:#3F393C;--text-3:#5a544c;
  --brand-fill:#6E1028;--brand-fill-hover:#8A1533;--brand-ink:#6e1028;--gold-ink:#7A5D2A;--focus:#8A1533;--tint-k:1}

/* the conversation, above the composer, as in the app */
.vc-thread{position:relative;height:272px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:0 6px 14px;overflow:hidden}
.vc-thread>*{flex:none;transform-origin:50% 100%;will-change:transform,opacity;backface-visibility:hidden;animation:vcLand .62s cubic-bezier(.2,.8,.25,1) both}
.vc-thread.is-leaving>*{animation:vcLeave .52s cubic-bezier(.4,0,.2,1) forwards}
.vc-you{align-self:flex-end;max-width:85%;background:var(--brand-fill);color:#fff;padding:9px 13px;border-radius:14px 14px 4px 14px;font-size:15px;line-height:1.5;box-shadow:0 10px 26px -16px rgba(110,16,40,.9)}
.vc .agent-working{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-size:13.5px;padding:6px 2px}
.vc .agent-working .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-ink);animation:icblink 1s infinite}
.vc .agent-working .dot:nth-child(2){animation-delay:.16s}
.vc .agent-working .dot:nth-child(3){animation-delay:.32s}
.vc .agent-turn{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:center;padding:4px 0}
.vc .agent-turn-ic{position:relative;width:24px;height:24px;border-radius:7px;background:var(--surface-soft);color:var(--brand-ink);display:grid;place-items:center;transition:background .4s,color .4s}
.vc .agent-turn-ic svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vc .agent-turn.is-active .agent-turn-ic:after{content:'';position:absolute;inset:-3px;border-radius:9px;border:1.5px solid transparent;border-top-color:var(--gold);border-right-color:var(--gold);animation:vcSpin .8s linear infinite}
.vc .agent-turn.is-done .agent-turn-ic{background:color-mix(in srgb,var(--gold) 24%,transparent);color:var(--gold-ink)}
.vc .agent-turn-tool{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--text)}
.vc .agent-turn:after{content:'';position:absolute;left:33px;right:38%;bottom:-3px;height:8px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.42),transparent);filter:blur(3px);opacity:0;animation:vcBloom .95s ease .08s;pointer-events:none}
:root[data-theme=light] .vc .agent-turn:after{background:radial-gradient(closest-side,rgba(110,16,40,.16),transparent)}
.vc .agent-outcome-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--gold) 24%,transparent);color:var(--gold-ink)}
.vc .agent-outcome-badge:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

/* the composer: the app's own rules */
.vc .composer-card{position:relative;border:1px solid var(--border);border-radius:22px;background:var(--surface-raised);padding:6px 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .16s,box-shadow .16s}
.vc .composer-card:focus-within{border-color:color-mix(in srgb,var(--brand-fill-hover) 50%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,#6E1028 calc(var(--tint-k) * 12%),transparent)}
.vc .composer-card:before{content:'';position:absolute;z-index:-1;inset:22px 7% -30px;border-radius:44px;background:radial-gradient(closest-side,rgba(184,154,104,.42),transparent);filter:blur(30px);opacity:.5;pointer-events:none}
:root[data-theme=light] .vc .composer-card:before{opacity:.28}
.vc .vc-input{display:block;width:100%;resize:none;min-height:30px;max-height:38vh;overflow:hidden;font:inherit;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.55;padding:9px 10px 4px;border:0;background:transparent;color:var(--text);outline:none;box-shadow:none}
.vc .vc-input::placeholder{color:var(--text-3);opacity:1}
.vc .composer-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px;flex-wrap:nowrap}
.vc .composer-bar-left{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto}
.vc .composer-bar-right{display:flex;align-items:center;gap:8px;flex:none}
.vc .composer-icon{width:34px;height:34px;flex:none;border-radius:50%;border:0;background:none;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
.vc .composer-icon svg{display:block;pointer-events:none;width:19px;height:19px;flex:0 0 auto}
.vc .composer-icon:hover{background:var(--surface-soft);color:var(--text)}
.vc .power-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border-radius:17px;border:0;background:none;color:var(--text-2);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.vc .power-btn:hover{background:var(--surface-soft);color:var(--text)}
.vc .power-btn svg{flex:0 0 auto}
.vc .mp-chip{position:relative;width:44px;min-width:44px;height:44px;padding:0;justify-content:center;flex:none}
.vc .mp-chip .mp-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vc .varren-mode-wrap{position:relative;width:44px;height:44px;padding:0;gap:0}
.vc .varren-mode-wrap>svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.vc .varren-mode-select{-webkit-appearance:none;appearance:none;width:100%;height:100%;min-width:0;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;color:transparent;font-size:16px;cursor:pointer}
.vc .varren-mode-select option{background:var(--surface-raised);color:var(--text)}
.vc .command-send-btn{width:44px;height:44px;min-width:44px;border-radius:15px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none;border:0;cursor:pointer;color:#F5F3EE;background:var(--brand-fill);box-shadow:0 2px 8px rgba(0,0,0,.22);transition:filter .16s,transform .12s}
.vc .command-send-btn:hover{filter:brightness(1.08)}
.vc .command-send-btn:active,.vc .command-send-btn.vc-press{transform:scale(.94)}
.vc .command-send-btn svg{transition:transform .15s ease}
.vc .command-send-btn:hover svg{transform:translateY(-2px)}
.vc .command-send-btn.vc-press svg{animation:vsend .6s ease-in-out}
.vc-bar{position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:99px;overflow:hidden;opacity:0;transition:opacity .45s;pointer-events:none}
.vc-bar i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,var(--brand-fill),var(--gold));transition:width .55s cubic-bezier(.4,0,.2,1)}
.hero-stage[data-vc-state=working] .vc-bar{opacity:1}
.vc .composer-card:after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(217,190,142,.95) 50%,transparent 62%) 200% 0/260% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.vc .composer-card.vc-sheen:after{animation:vcSheen .95s cubic-bezier(.4,0,.2,1)}

/* what sits under the box */
.vc-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:32px;flex-wrap:wrap}
.vc-cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px 0 28px;border-radius:999px;background:linear-gradient(180deg,#8A1533,#6E1028);color:#F5F3EE;
  font:600 15.5px/1 Inter,sans-serif;letter-spacing:.005em;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(110,16,40,.55),0 16px 36px -16px rgba(110,16,40,.95);
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s,filter .22s}
.vc-cta:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(138,21,51,.7),0 22px 44px -16px rgba(110,16,40,1)}
.vc-cta svg{transition:transform .22s cubic-bezier(.2,.8,.25,1)}
.vc-cta:hover svg{transform:translateX(3px)}
.vc-cta:focus-visible,.vc-watch:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.vc-cta-quiet{height:46px;padding:0 20px 0 22px;font-size:14.5px;margin-top:30px}
.vc-watch{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font:500 15px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap}
.vc-play{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink);background:color-mix(in srgb,var(--surface) 55%,transparent);transition:border-color .22s,transform .22s}
.vc-play svg{margin-left:2px}
.vc-watch:hover .vc-play{border-color:var(--accent);transform:scale(1.07)}

/* Varren speaks */
.voice-section .two-col{align-items:center;gap:clamp(40px,6vw,96px)}
.vs-turn{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start}
.vs-avatar{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff;border:1px solid #e6dcdf;box-shadow:0 12px 30px -16px rgba(110,16,40,.7)}
.vs-name{display:block;font:600 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:5px 0 16px}
.vs-big{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(32px,3.9vw,54px);line-height:1.07;letter-spacing:-.022em;margin:0;color:var(--ink)}
.vs-small{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--muted);margin:18px 0 0}

/* software, kept current */
.software-section .section-head{max-width:760px;margin-bottom:clamp(48px,6vw,76px)}
.software-scope{margin:clamp(36px,4vw,56px) auto 0;text-align:center;font-size:15px;color:var(--muted)}

/* the finale */
.finale{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding-block:clamp(100px,14vw,184px);border-top:1px solid var(--line)}
.finale-a{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(26px,3.2vw,42px);line-height:1.1;color:var(--muted);margin:0;letter-spacing:-.012em}
.finale-b{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-style:italic;font-size:clamp(56px,9.4vw,136px);line-height:.98;letter-spacing:-.036em;color:var(--accent);margin:10px 0 0}
.finale-b:after{content:'';display:block;width:min(360px,62%);height:2px;margin:30px auto 0;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.finale-cols{list-style:none;display:flex;justify-content:center;margin:42px auto 0;padding:0;max-width:640px}
.finale-cols li{flex:1;padding:12px 8px;font:500 12px/1.4 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-left:1px solid var(--line)}
.finale-cols li:first-child{border-left:0}
.finale-line{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--muted);margin:48px auto 0;max-width:36em}
.finale .vc-cta{margin-top:30px}

.finale .finale-a{color:var(--muted)}
.finale .finale-b{color:#C9AD82}
:root[data-theme=light] .finale .finale-b{color:#6E1028}
.finale .finale-b:after{background:linear-gradient(90deg,transparent,#B89A68,transparent)}
.voice-section .vs-name{color:#C9AD82}
:root[data-theme=light] .voice-section .vs-name{color:#6E1028}
.voice-section .vs-big{color:var(--ink)}
.voice-section .vs-small,.hero-v3 .lede,.finale .finale-line{color:var(--muted)}
/* reveal on scroll: only when site.js has switched it on, so a page with no script still shows everything */
html.vc-reveal [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .95s cubic-bezier(.2,.8,.25,1),transform .95s cubic-bezier(.2,.8,.25,1)}
html.vc-reveal [data-reveal].is-in{opacity:1;transform:none}
html.vc-reveal .finale .finale-a,html.vc-reveal .finale .finale-b,html.vc-reveal .finale .finale-cols,html.vc-reveal .finale .finale-line,html.vc-reveal .finale .vc-cta{opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(.2,.8,.25,1),transform 1s cubic-bezier(.2,.8,.25,1)}
html.vc-reveal .finale.is-in .finale-a{opacity:1;transform:none;transition-delay:.1s}
html.vc-reveal .finale.is-in .finale-b{opacity:1;transform:none;transition-delay:.55s}
html.vc-reveal .finale.is-in .finale-cols{opacity:1;transform:none;transition-delay:1.05s}
html.vc-reveal .finale.is-in .finale-line{opacity:1;transform:none;transition-delay:1.35s}
html.vc-reveal .finale.is-in .vc-cta{opacity:1;transform:none;transition-delay:1.55s}
html.vc-reveal .finale .finale-b:after{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.4,0,.1,1) 1s}
html.vc-reveal .finale.is-in .finale-b:after{transform:scaleX(1)}

@keyframes vcLand{0%{opacity:0;transform:translateY(14px) scale(.985)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes vcLeave{to{opacity:0}}
@keyframes vcBloom{30%{opacity:.55}100%{opacity:0}}
@keyframes vcSpin{to{transform:rotate(360deg)}}
@keyframes vcSheen{0%{opacity:1;background-position:200% 0}100%{opacity:1;background-position:-70% 0}}
@keyframes icblink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes vsend{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

@media(max-width:640px){
  .hero-v3{padding-top:30px;padding-bottom:48px}
  .hero-v3 .lede{margin-top:14px}
  .vc{margin-top:22px}
  .vc-thread{height:296px;padding:0 2px 12px}
  .vc-you{font-size:14px}
  .vc .agent-turn-tool{font-size:13.5px}
  .vc .vc-input{min-height:52px}
  .vc-actions{gap:20px;margin-top:24px}
  .vc-cta{height:50px;padding:0 22px 0 24px;font-size:15px}
  .vs-turn{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .vs-avatar{width:40px;height:40px;border-radius:12px}
  .finale-cols li{letter-spacing:.1em;font-size:10.5px;padding:12px 4px}
  .finale-b{font-size:44px}
}
@media(prefers-reduced-motion:reduce){
  .vc-thread>*,.vc .agent-turn:after,.vc .composer-card:after{animation:none!important}
  html.vc-reveal [data-reveal],html.vc-reveal .finale *{opacity:1!important;transform:none!important;transition:none!important}
}
/* ===== polish round, 2026-10-17 */
.hero-v3 h1 em{font-style:italic;color:#C9AD82}
:root[data-theme=light] .hero-v3 h1 em{color:#6E1028}
@media(min-width:1280px){.hero-v3 h1{white-space:nowrap;font-size:min(3.3vw,54px)}}
@media(min-width:641px) and (max-width:1279px){.hero-v3 h1{font-size:clamp(34px,4.6vw,52px);max-width:22ch}}
@media(max-width:640px){.hero-v3 h1{font-size:25.5px;letter-spacing:-.018em;max-width:none}}
/* the sub-line steps aside while Varren works, and comes back when it stops; its space is held so nothing jumps */
.hero-v3 .lede{transition:opacity .7s cubic-bezier(.2,.8,.25,1),transform .7s cubic-bezier(.2,.8,.25,1)}
.hero-stage[data-vc-state=working] .hero-v3 .lede{opacity:0;transform:translateY(-7px)}
/* gloss */
.hero-stage:before{content:'';position:absolute;inset:0 0 auto 0;height:46%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
:root[data-theme=light] .hero-stage:before{background:linear-gradient(180deg,rgba(255,255,255,.6),transparent)}
.vc .composer-card{background-image:linear-gradient(180deg,rgba(255,255,255,.05),transparent 46%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.04),0 30px 60px -34px rgba(0,0,0,.9)}
:root[data-theme=light] .vc .composer-card{background-image:none;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.04),0 30px 60px -38px rgba(110,16,40,.5)}
.vc .agent-turn-ic{width:28px;height:28px;border-radius:9px;color:#E9CF9C;background:linear-gradient(150deg,#46351f,#1d160e);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 16px -5px rgba(201,173,130,.75)}
:root[data-theme=light] .vc .agent-turn-ic{color:#6E1028;background:linear-gradient(150deg,#fbf3e3,#ecdcc0);box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(110,16,40,.6)}
.vc .agent-turn{grid-template-columns:28px minmax(0,1fr);gap:11px}
.vc .agent-turn-ic svg{width:15px;height:15px}
.vc .agent-turn.is-active .agent-turn-ic:after{inset:-4px;border-radius:12px;border-width:2px;filter:drop-shadow(0 0 5px rgba(217,190,142,.9))}
.vc .agent-turn.is-done .agent-turn-ic{color:#241a0c;background:linear-gradient(150deg,#e8cf9f,#b89a68)}
.vc .agent-working .vc-say{background:linear-gradient(100deg,var(--text-2) 34%,#ffffff 50%,var(--text-2) 66%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vcShim 2.1s linear infinite}
:root[data-theme=light] .vc .agent-working .vc-say{background-image:linear-gradient(100deg,#3F393C 34%,#6E1028 50%,#3F393C 66%)}
.vc .agent-working .dot{box-shadow:0 0 8px rgba(217,190,142,.85)}
@keyframes vcShim{from{background-position:120% 0}to{background-position:-120% 0}}
/* the burgundy card: a light circles the rings */
.voice-section .pass-orbit i{animation:vcOrbit 11s linear infinite}
.voice-section .pass-orbit i:nth-child(2){animation-duration:8s;animation-direction:reverse}
.voice-section .pass-orbit i:nth-child(3){animation-duration:6s}
.voice-section .pass-orbit i:after{content:'';position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fbe2b6;box-shadow:0 0 14px 4px rgba(236,200,150,.85),0 0 40px 10px rgba(236,200,150,.35)}
@keyframes vcOrbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.voice-section .pass-orbit i,.vc .agent-working .vc-say{animation:none!important}}
/* footer: air between the family name and its line */
.footer-top .family-name{display:block;margin:0 0 14px}
.footer-top .fine-print{display:block;margin:0 0 22px}
/* sign-up: the Google button sits in its own band above the email form */
.signup-layout .ssos{position:relative;margin:0 0 30px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.signup-layout .ssos:after{content:'or use your email';position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:0 14px;background:var(--bg);color:var(--muted);font-size:12px;letter-spacing:.06em;white-space:nowrap}
.signup-layout .sso{min-height:56px;border-radius:14px;background:var(--raised);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .2s,transform .2s}
.signup-layout .sso:hover{border-color:var(--accent);transform:translateY(-1px)}
/* ===== the field, 2026-10-17: a living background in the brand's own colours, cheap on a phone (no filters, transforms only) */
.hero-field{background:#0e0c0e;overflow:hidden}
.hero-field:before,.hero-field:after{content:'';position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.hero-field:before{left:50%;top:-4%;width:150vmax;height:96vmax;margin:-48vmax 0 0 -75vmax;background:radial-gradient(closest-side,rgba(126,22,49,.82),rgba(110,16,40,.44) 38%,rgba(74,18,32,.18) 62%,transparent 74%);animation:vcDriftA 28s ease-in-out infinite alternate}
.hero-field:after{left:72%;top:12%;width:80vmax;height:60vmax;margin:-30vmax 0 0 -40vmax;background:radial-gradient(closest-side,rgba(184,154,104,.30),rgba(184,154,104,.10) 48%,transparent 72%);animation:vcDriftB 36s ease-in-out infinite alternate}
  background:radial-gradient(closest-side,rgba(126,22,49,.78),rgba(110,16,40,.42) 38%,rgba(74,18,32,.18) 62%,transparent 74%);animation:vcDriftA 28s ease-in-out infinite alternate}
  background:radial-gradient(closest-side,rgba(184,154,104,.30),rgba(184,154,104,.10) 48%,transparent 72%);animation:vcDriftB 36s ease-in-out infinite alternate}
.hero-stage:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.032;background-image:radial-gradient(rgba(255,255,255,.6) .5px,transparent .8px),radial-gradient(rgba(255,255,255,.4) .5px,transparent .8px);background-size:4px 4px,7px 7px;background-position:0 0,2px 3px}
.hero-stage{box-shadow:inset 0 -220px 200px -140px rgba(0,0,0,.9)}
:root[data-theme=light] .hero-field{background:#f8f5ef}
:root[data-theme=light] .hero-field:before{background:radial-gradient(closest-side,rgba(233,207,200,.95),rgba(243,230,226,.6) 42%,rgba(243,230,226,.2) 64%,transparent 74%)}
:root[data-theme=light] .hero-field:after{background:radial-gradient(closest-side,rgba(184,154,104,.26),rgba(184,154,104,.08) 50%,transparent 72%)}
:root[data-theme=light] .hero-field:after{background:radial-gradient(closest-side,rgba(184,154,104,.28),rgba(184,154,104,.08) 50%,transparent 72%)}
:root[data-theme=light] .hero-stage:after{opacity:.035}
:root[data-theme=light] .hero-stage{box-shadow:none}
.hero-stage[data-vc-state=working] .hero-field:before{animation-duration:14s}
@keyframes vcDriftA{0%{transform:translate(-6%,3%) scale(1)}100%{transform:translate(6%,-4%) scale(1.12)}}
@keyframes vcDriftB{0%{transform:translate(4%,0) scale(.94)}100%{transform:translate(-8%,-10%) scale(1.1)}}
/* the composer breathes while Varren works */
.vc .composer-card:before{transition:opacity 1.2s ease}
.hero-stage[data-vc-state=working] .vc .composer-card:before{animation:vcBreathe 2.6s ease-in-out infinite}
@keyframes vcBreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.04)}}
/* the call to action catches the light once in a while */
.vc-cta{position:relative;overflow:hidden}
.vc-cta:after{content:'';position:absolute;top:-40%;bottom:-40%;left:-30%;width:28%;transform:skewX(-20deg) translateX(-160%);background:linear-gradient(90deg,transparent,rgba(255,236,200,.42),transparent);animation:vcCtaSheen 7s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
@keyframes vcCtaSheen{0%,78%{transform:skewX(-20deg) translateX(-160%)}100%{transform:skewX(-20deg) translateX(620%)}}
/* the theme switch: a drawn sun and moon, not a text glyph */
.theme-glyph{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center}
.theme-glyph svg{width:17px;height:17px;display:block}
:root[data-theme=dark] .theme-glyph .tg-moon{display:none}
:root[data-theme=light] .theme-glyph .tg-sun{display:none}
@media(prefers-reduced-motion:reduce){.hero-field:before,.hero-field:after,.vc-cta:after,.vc .composer-card:before{animation:none!important}}
/* ===== 2026-10-17, later: the field is black with a ray of burgundy light from above, moving slowly; nothing strong */
.hero-field{background:#0b0a0b}
.hero-field:before{left:50%;top:-62vmax;width:120vmax;height:120vmax;margin:0 0 0 -60vmax;
  background:conic-gradient(from 168deg at 50% 50%,transparent 0deg,rgba(126,22,49,.0) 8deg,rgba(126,22,49,.34) 20deg,rgba(184,154,104,.10) 26deg,transparent 34deg);
  animation:vcRay 22s ease-in-out infinite alternate;transform-origin:50% 50%}
.hero-field:after{left:50%;top:0;width:90vmax;height:36vmax;margin:0 0 0 -45vmax;border-radius:0 0 50% 50%;
  background:radial-gradient(60% 100% at 50% 0%,rgba(126,22,49,.28),rgba(126,22,49,.08) 50%,transparent 76%);animation:vcGlow 9s ease-in-out infinite alternate}
.hero-stage[data-vc-state=working] .hero-field:before{animation-duration:12s}
@keyframes vcRay{0%{transform:rotate(-7deg)}100%{transform:rotate(7deg)}}
@keyframes vcGlow{0%{opacity:.75;transform:translateX(-3%)}100%{opacity:1;transform:translateX(3%)}}
.hero-stage{box-shadow:none}
:root[data-theme=light] .hero-field{background:#faf7f2}
:root[data-theme=light] .hero-field:before{background:conic-gradient(from 168deg at 50% 50%,transparent 0deg,rgba(110,16,40,.0) 8deg,rgba(110,16,40,.12) 20deg,rgba(184,154,104,.10) 26deg,transparent 34deg)}
:root[data-theme=light] .hero-field:after{background:radial-gradient(60% 100% at 50% 0%,rgba(233,207,200,.9),rgba(243,230,226,.5) 50%,transparent 76%)}
/* the bottom of the hero: one rich button, then a glass pill */
.vc-actions{gap:22px}
.vc-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(138,21,51,.6),0 18px 40px -14px rgba(126,22,49,1),0 0 44px -10px rgba(184,154,104,.35)}
.vc-watch{height:52px;padding:0 20px 0 8px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);gap:12px;transition:border-color .22s,transform .22s}
.vc-watch:hover{border-color:var(--accent);transform:translateY(-1px)}
.vc-play{width:36px;height:36px;border:0;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.vc-watch:hover .vc-play{transform:none}
@media(max-width:640px){
  .vc-actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
  .vc-cta{height:58px;justify-content:center;font-size:16.5px;padding:0 24px}
  .vc-watch{justify-content:center;height:54px}
}
/* the send button's curve must survive every generic button rule on the site */
/* `form button,button[type=submit]{border-radius:2px!important}` is the site's generic form rule; it squared the send
   button (measured 2px on 2026-10-17, which is what the founder saw). The console is the app, so the app's curve wins here. */
.vc .composer-card .command-send-btn,.vc .composer-card button.command-send-btn{border-radius:15px!important}
.vc .composer-card .vc-input{border-radius:0!important}
/* the ray: wider and softer, so on a phone it reads as light, not a beam */
.hero-field:before{background:conic-gradient(from 160deg at 50% 50%,transparent 0deg,rgba(126,22,49,0) 6deg,rgba(126,22,49,.26) 22deg,rgba(184,154,104,.09) 34deg,transparent 50deg)}
:root[data-theme=light] .hero-field:before{background:conic-gradient(from 160deg at 50% 50%,transparent 0deg,rgba(110,16,40,0) 6deg,rgba(110,16,40,.10) 22deg,rgba(184,154,104,.09) 34deg,transparent 50deg)}
@media(max-width:640px){.hero-v3 h1{font-size:min(25.5px,6.8vw)}.vc-thread{height:280px}.vc-actions{margin-top:18px}.hero-v3{padding-bottom:40px}}
/* ===== 2026-10-17 final: rows that glide, the previous buttons, the field that goes dark to focus, real device frames */
.vc-thread{height:304px;gap:0}
.vc-thread>.vc-row{display:grid;grid-template-rows:0fr;animation:none;transform:none;opacity:1;transition:grid-template-rows .5s cubic-bezier(.2,.8,.25,1)}
.vc-thread>.vc-row.is-shown{grid-template-rows:1fr}
.vc-row-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-bottom:8px;opacity:0;transform:translateY(8px);transition:opacity .45s ease .14s,transform .5s cubic-bezier(.2,.8,.25,1) .14s}
.vc-row.is-shown>.vc-row-in{opacity:1;transform:none}
.vc-row-in>.vc-you{align-self:flex-end}
.vc-row-in>.agent-outcome-badge{align-self:flex-start}
.vc-thread.is-leaving>.vc-row{animation:vcLeave .52s cubic-bezier(.4,0,.2,1) forwards}
.vc .agent-turn{padding:5px 0}
.vc .agent-turn:after{display:none}
/* the field goes dark while Varren works, so the console is the only light; it returns when the box is empty */
.hero-field:before,.hero-field:after{transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}
.hero-stage[data-vc-state=working] .hero-field:before{opacity:0}
.hero-stage[data-vc-state=working] .hero-field:after{animation:none;opacity:0}
/* the buttons under the box: the earlier pair, side by side on every screen */
.vc-actions{gap:26px;margin-top:30px}
.vc-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(110,16,40,.55),0 16px 36px -16px rgba(110,16,40,.95)}
.vc-watch{height:auto;padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:12px}
.vc-watch:hover{transform:none}
.vc-play{width:38px;height:38px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--ink);transition:border-color .22s,transform .22s}
.vc-watch:hover .vc-play{border-color:var(--accent);transform:scale(1.07)}
@media(max-width:640px){
  .vc-actions{flex-direction:row;align-items:center;justify-content:center;gap:18px;margin-top:22px}
  .vc-cta{height:50px;width:auto;justify-content:flex-start;font-size:15px;padding:0 20px 0 22px}
  .vc-watch{height:auto;justify-content:flex-start;font-size:14.5px}
  .vc .composer-icon{width:44px;height:44px}
  .vc-play{width:44px;height:44px}
  .vc-thread{height:318px}
}
/* the film's device: a laptop on web, a phone on a phone (no maker named, no maker's shape copied) */
.film-device{position:relative}
@media(min-width:901px){
  .film-device{border-radius:18px 18px 6px 6px;padding:12px 12px 12px;background:#121012;border:1px solid #2b2528;box-shadow:0 40px 90px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.04)}
  .film-device:before{content:'';position:absolute;top:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#0b0a0b;box-shadow:inset 0 0 0 1.5px #2f292c}
  .film-device{margin-inline:4%}
  .film-laptop-base{display:block;position:relative;height:14px;width:100%;margin:0;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#2b2528,#151214 70%,#0f0d0e);box-shadow:0 30px 60px -28px rgba(0,0,0,.95)}
  .film-laptop-base:before{content:'';position:absolute;left:50%;top:0;width:140px;height:5px;margin-left:-70px;border-radius:0 0 6px 6px;background:#0b0a0b}
}
@media(max-width:900px){
  .film-device{border-radius:40px;padding:10px;background:#0f0d0e;border:1px solid #2b2427;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 0 2px #191517}
  .film-device:before,.film-device:after{content:'';position:absolute;width:3px;border-radius:2px;background:#2b2427}
  .film-device:before{left:-4px;top:112px;height:58px}
  .film-device:after{right:-4px;top:140px;height:92px}
  .film-chrome{position:relative;border-radius:30px 30px 0 0;padding-top:38px}
  .film-chrome:after{content:'';position:absolute;top:9px;left:50%;width:86px;height:24px;margin-left:-43px;border-radius:14px;background:#0a0909}
  .film-base{border-radius:0 0 30px 30px}
}
@media(prefers-reduced-motion:reduce){.vc-thread>.vc-row,.vc-row-in{transition:none!important;opacity:1!important;transform:none!important;grid-template-rows:1fr!important}}
/* ===== 2026-10-17 (restore): the bottom of the hero, as it was before the field was reworked: a burgundy and gold pool under the buttons.
   It dims, not vanishes, while Varren works; the ray above it is what goes dark. */
.hero-field{background:radial-gradient(60% 40% at 50% 100%,rgba(217,190,142,.16),transparent 70%),radial-gradient(70% 54% at 50% 116%,rgba(126,22,49,.54),transparent 72%),radial-gradient(34% 22% at 50% 104%,rgba(184,154,104,.14),transparent 74%),#0b0a0b}
.hero-stage[data-vc-state=working] .hero-field{opacity:.62}
.hero-field{transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}
.vc-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(138,21,51,.6),0 18px 40px -14px rgba(126,22,49,1),0 0 56px -8px rgba(184,154,104,.42)}
/* light: the same pool in light's own colours, and a ray you can actually see */
:root[data-theme=light] .hero-field{background:radial-gradient(ellipse at 50% 112%,#e9cfc8,#f3e6e2 44%,transparent 76%),radial-gradient(46% 38% at 82% -6%,rgba(184,154,104,.16),transparent 72%),#faf7f2}
:root[data-theme=light] .hero-field:before{background:conic-gradient(from 160deg at 50% 50%,transparent 0deg,rgba(110,16,40,0) 5deg,rgba(110,16,40,.30) 21deg,rgba(184,120,90,.22) 33deg,transparent 50deg)}
:root[data-theme=light] .hero-field:after{background:radial-gradient(60% 100% at 50% 0%,rgba(170,60,86,.26),rgba(233,207,200,.55) 52%,transparent 78%)}
:root[data-theme=light] .hero-stage[data-vc-state=working] .hero-field{opacity:.9}
:root[data-theme=light] .hero-stage[data-vc-state=working] .hero-field:before{opacity:.6}
:root[data-theme=light] .hero-stage[data-vc-state=working] .hero-field:after{opacity:.7}
/* the film's phone: a real phone's proportions, the Varren screen filling it edge to edge */
@media(max-width:900px){
  .film-device{max-width:344px;margin-inline:auto;overflow:hidden;border-radius:46px;padding:9px}
  .film-chrome{border-radius:37px 37px 0 0;padding:40px 18px 12px;min-height:0}
  .film-body{border-radius:0}
  .film-stage{height:clamp(430px,118vw,520px)}
  .film-nav{padding-bottom:20px}
  .film-base{height:0;border:0;background:none;border-radius:0}
  .film-base:after{content:"";position:absolute;left:50%;bottom:8px;width:104px;height:4px;margin-left:-52px;border-radius:3px;background:#3a3236}
  .film-screen{border-radius:0}
}
/* light mode: the ray has no visible end; it fades into the box (founder-approved 2026-10-17). Same centre as the round version. */
:root[data-theme=light] .hero-field:before{border-radius:0;top:-117vmax;height:230vmax;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 72%);mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 72%)}
:root[data-theme=light] .hero-field:after{border-radius:0}
/* ===== 2026-10-17 stability: the thread's height is measured by the script (never clipped); this is only the floor before it runs */
.vc-thread{min-height:304px;overflow:hidden}
.vc-measure,.vc-measure *{transition:none!important;animation:none!important}
.vc-measure>.vc-row{grid-template-rows:1fr!important}
.vc-measure .vc-row-in{opacity:1!important;transform:none!important}
/* the phone: the app's tabs are a real TAB BAR at the bottom of the screen (founder, 2026-10-17): translucent bar, hairline above,
   icon over label, the active tab marked by a lit icon and a small gold bar, and the device's home indicator beneath it */
@media(max-width:900px){
  .film-body{flex-direction:column}
  .film-body .film-screen{order:1;padding-bottom:0}
  .film-nav{order:2;flex-direction:row;width:auto;gap:0;padding:7px 4px 30px;border-right:0;border-top:1px solid rgba(255,255,255,.09)!important;border-bottom:0!important;
    background:linear-gradient(180deg,rgba(40,10,20,.92),rgba(24,6,12,.98));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:relative;z-index:3}
  .film-nav .fn-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px 4px;background:none;border:0;border-radius:0;color:rgba(245,238,230,.5);min-width:0}
  .film-nav .fn-item i{display:grid;place-items:center;font-style:normal;color:inherit}
  .film-nav .fn-item b{font:500 10px/1.1 Inter,sans-serif;letter-spacing:.02em;color:inherit}
  .film-nav .fn-item.is-on{color:#f3e2bd;background:none}
  .film-nav .fn-item.is-on:before{content:'';position:absolute;top:-8px;left:30%;right:30%;height:2px;border-radius:0 0 3px 3px;background:#d9be8e;box-shadow:0 0 10px rgba(217,190,142,.8)}
  .film-nav .fn-item.is-on i svg{filter:drop-shadow(0 0 6px rgba(217,190,142,.55))}
  .film-nav.is-all .fn-item{color:#f3e2bd}
  .film-stage{height:clamp(420px,112vw,520px)}
  .film-base{height:0}
  .film-base:after{content:"";position:absolute;left:50%;bottom:9px;width:112px;height:4px;margin-left:-56px;border-radius:3px;background:rgba(245,238,230,.42);z-index:4}
}
}
/* WS-02 (2026-10-17): the sign-up page opens with a quieter heading on ONE line (it wrapped to two on a phone) and a single short
   line, no trial-credit small print. */
.signup-layout .signup-intro h1{font-size:clamp(22px,8.4vw,46px);letter-spacing:-.03em;line-height:1.1;margin:0 0 12px;white-space:nowrap}
.signup-layout .signup-line{margin:0 0 20px;font-size:15px;line-height:1.5;color:var(--muted)}
@media(min-width:701px){.signup-layout .signup-intro h1{font-size:46px}}

/* ===== THE CINEMA LAYER, 2026-10-26 ================================================================
   Founder: "it feels like old people stuff ... I want it to be as impressive as [the reference], or even more".
   The home page opens on the mark, then a film fills the whole screen with the sentence over it; the sections
   below are larger, darker and quieter. Everything here is scoped to classes that exist only on the home page
   (.cine-*), so no other page moves. The hero and the finale are FILM, so they stay dark in both themes. */

/* 1. THE OPENING TITLE. Pure CSS timing, so it can never get stuck: if the script never runs, it still leaves. */
.cine-intro{display:none}
html.intro-on .cine-intro{display:grid;place-items:center;position:fixed;inset:0;z-index:1000;background:#050304;color:#f7f2ea;
  clip-path:inset(0 0 0 0);animation:ciShut 1s cubic-bezier(.76,0,.24,1) 2.5s forwards}
html.intro-on.intro-skip .cine-intro{animation:ciShut .55s cubic-bezier(.76,0,.24,1) 0s forwards}
.ci-glow{position:absolute;left:50%;top:50%;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;border-radius:50%;
  background:radial-gradient(closest-side,rgba(110,16,40,.62),rgba(110,16,40,.16) 45%,transparent 70%);opacity:0;transform:scale(.4);
  animation:ciGlow 2.6s cubic-bezier(.2,.7,.2,1) .1s forwards}
.ci-core{position:relative;display:grid;justify-items:center;gap:26px;animation:ciCore 1s cubic-bezier(.7,0,.3,1) 2.35s forwards}
.ci-mark{position:relative;width:84px;height:88px;background:none}
.ci-mark:before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(closest-side,rgba(230,204,154,.32),transparent 70%);opacity:0;animation:cineFade 1.6s ease .5s forwards}
.ci-mark img{position:relative;display:block;width:100%;height:100%;object-fit:contain;clip-path:inset(100% 0 0 0);background:none;border:0;box-shadow:none;border-radius:0;
  filter:saturate(1.25) brightness(1.35);animation:ciMark 1.15s cubic-bezier(.65,0,.35,1) .2s forwards}
.ci-word{font:500 15px/1 Inter,sans-serif;color:#f7f2ea;opacity:0;letter-spacing:.95em;text-indent:.95em;filter:blur(8px);
  animation:ciWord 1.3s cubic-bezier(.2,.8,.2,1) .75s forwards}
.ci-line{display:block;width:190px;height:1px;background:rgba(255,255,255,.1);overflow:hidden}
.ci-line i{display:block;width:100%;height:100%;background:linear-gradient(90deg,transparent,#e6cc9a,transparent);transform:translateX(-100%);
  animation:ciSweep 1.4s cubic-bezier(.65,0,.35,1) 1.05s forwards}
@keyframes ciGlow{to{opacity:1;transform:scale(1)}}
@keyframes ciMark{to{clip-path:inset(0 0 0 0)}}
@keyframes ciWord{to{opacity:1;letter-spacing:.46em;text-indent:.46em;filter:blur(0)}}
@keyframes ciSweep{to{transform:translateX(100%)}}
@keyframes ciCore{to{opacity:0;transform:scale(1.14);filter:blur(10px)}}
@keyframes ciShut{to{clip-path:inset(50% 0 50% 0);visibility:hidden}}

/* The page's own entrances wait for the title, then run as one sequence. */
:root{--ci:0s}
html.intro-on{--ci:2.75s}
html.intro-on.intro-skip{--ci:.3s}

/* 2. THE HEADER floats over the film, then turns to glass once the page moves. */
body:has(.cine-hero) .site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom-color:transparent;transition:border-color .4s}
body:has(.cine-hero) main{overflow-x:clip}
body:has(.cine-hero) .site-header:before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:transparent;transition:background .45s,backdrop-filter .45s}
body:has(.cine-hero) .site-header.is-scrolled:before{background:color-mix(in srgb,var(--bg) 74%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
body:has(.cine-hero) .site-header.is-scrolled{border-bottom-color:var(--line)}
body:has(.cine-hero) .site-header:not(.is-scrolled){--ink:#f7f2ea;--muted:#e7ddd2;--line:rgba(255,255,255,.22);color:#f7f2ea}
body:has(.cine-hero) .site-header:not(.is-scrolled) .desktop-nav a,body:has(.cine-hero) .site-header:not(.is-scrolled) .nav-invite,
body:has(.cine-hero) .site-header:not(.is-scrolled) .wordmark,body:has(.cine-hero) .site-header:not(.is-scrolled) .theme-toggle{color:#f7f2ea}
body:has(.cine-hero) .site-header:not(.is-scrolled) .menu-toggle span{background:#f7f2ea}
body:has(.cine-hero) .site-header:not(.is-scrolled) .theme-switch{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body:has(.cine-hero) .site-header:not(.is-scrolled) .theme-switch svg{color:rgba(247,242,234,.6)}
html.intro-on body:has(.cine-hero) .site-header{opacity:0;animation:cineFade 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--ci) + .5s) forwards}

/* 3. THE FILM HERO. The video fills the screen; a veil keeps the sentence readable and melts into the page. */
.cine-hero{--ink:#f7f2ea;--muted:rgba(247,242,234,.8);--line:rgba(255,255,255,.18);--accent:#dcc293;--surface:rgba(20,14,17,.5);
  --surface-raised:rgba(16,11,13,.52);--surface-soft:rgba(255,255,255,.1);--border:rgba(255,255,255,.2);--text:#f7f2ea;--text-2:#e8ddd1;--text-3:rgba(247,242,234,.6);
  position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:#050304;color:var(--ink)}
.cine-media{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.cine-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 70%,transparent) 60%,var(--bg))}
.cine-hero .cine-media{transform:translate3d(0,calc(var(--cine-y,0) * 1px),0);will-change:transform}
.cine-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050304}
.cine-hero .cine-video{transform:scale(1.12);opacity:.001;animation:cineVideo 3.4s cubic-bezier(.16,.7,.2,1) var(--ci) forwards}
@keyframes cineVideo{to{transform:scale(1.02);opacity:1}}
.cine-veil{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 46% at 50% 46%,rgba(5,3,4,.5),rgba(5,3,4,.16) 62%,transparent 80%),
  linear-gradient(180deg,rgba(5,3,4,.62) 0,rgba(5,3,4,.1) 20%,rgba(5,3,4,.06) 58%,rgba(5,3,4,.6) 86%,var(--bg) 100%)}
.cine-hero .hero-field{display:none}
.cine-hero .hero-v3{position:relative;z-index:1;width:min(1180px,calc(100% - 48px));padding-top:calc(96px + env(safe-area-inset-top,0px));padding-bottom:96px;opacity:calc(1 - var(--cine-fade,0))}
.cine-hero .hero-v3 h1{font-size:clamp(40px,5.3vw,80px);line-height:1.02;letter-spacing:-.035em;color:#fbf7f0;max-width:13.5em;margin-inline:auto;text-wrap:balance;
  text-shadow:0 2px 50px rgba(0,0,0,.5)}
.cine-hero .hero-v3 h1 em,:root[data-theme=light] .cine-hero .hero-v3 h1 em{font-style:italic;color:transparent;background:linear-gradient(100deg,#f4e2bd 0%,#c9a46a 38%,#f8ebcf 52%,#c9a46a 70%,#f4e2bd 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:cineSheen 7s ease-in-out calc(var(--ci) + 2s) infinite;
  text-shadow:none;padding-right:.06em;filter:drop-shadow(0 2px 16px rgba(0,0,0,.75)) drop-shadow(0 0 2px rgba(0,0,0,.5))}
@keyframes cineSheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.cine-hero .hero-v3 .lede{color:rgba(247,242,234,.86);font-size:clamp(15.5px,1.35vw,19px);text-shadow:0 1px 20px rgba(0,0,0,.6)}
.cine-hero .vc{max-width:760px;margin-inline:auto}
/* THE HERO IS FILM IN BOTH THEMES, SO ITS MESSAGE BOX IS TOO. `.vc` declares its own palette and the light theme flips it to
   dark text, which on the film left the console lines and the box icons almost invisible on a phone. */
.cine-hero .vc,:root[data-theme=light] .cine-hero .vc{--border:#312D33;--surface-raised:#1A191C;--surface-soft:#242227;--text:#FAF9F6;--text-2:#C9C4BE;--text-3:#8d8781;--brand-fill:#7E1631;--brand-fill-hover:#8A1533;--brand-ink:#e0899c;--gold:#B89A68;--gold-ink:#D9BE8E;--focus:#C9AD82;--tint-k:4.3}
:root[data-theme=light] .cine-hero .vc .composer-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.85)}
:root[data-theme=light] .cine-hero .vc .agent-turn-ic{color:#f4e2bd;background:rgba(255,255,255,.1);box-shadow:none}
:root[data-theme=light] .cine-hero .vc .agent-working .vc-say{background-image:linear-gradient(100deg,#d8cfc6 34%,#f4e2bd 50%,#d8cfc6 66%)}
.cine-hero .composer-card{background:rgba(14,9,11,.5);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.85)}
.cine-hero .composer-card:before{opacity:.55}
.cine-hero .vc-watch{color:#f7f2ea}
.cine-hero .vc-play{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#f7f2ea;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* the entrance, word by word down the hero */
/* BACKWARDS, NOT BOTH: a fill that held the end frame kept the sub-line at full opacity for ever, so the rule that
   steps it aside while the console works (founder 2026-10-26: "vanishes away in a very smooth way, and comes back")
   could never apply. */
.cine-hero .hero-v3>*{animation:cineRise 1.3s cubic-bezier(.2,.8,.2,1) backwards}
.cine-hero .hero-v3 .lede{transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1),filter .9s cubic-bezier(.4,0,.2,1)}
.cine-hero[data-vc-state=working] .hero-v3 .lede{opacity:0;transform:translateY(-10px);filter:blur(6px)}
.cine-hero .hero-v3>h1{animation-delay:calc(var(--ci) + .35s)}
.cine-hero .hero-v3>.lede{animation-delay:calc(var(--ci) + .6s)}
.cine-hero .hero-v3>.vc{animation-delay:calc(var(--ci) + .8s)}
.cine-hero .hero-v3>.vc-actions{animation-delay:calc(var(--ci) + 1s)}
@keyframes cineRise{from{opacity:0;transform:translateY(28px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cineFade{to{opacity:1}}
.cine-cue{position:absolute;left:50%;bottom:26px;width:1px;height:54px;margin-left:-.5px;background:rgba(255,255,255,.16);overflow:hidden;z-index:1;
  opacity:0;animation:cineFade 1s ease calc(var(--ci) + 1.6s) forwards}
.cine-cue i{position:absolute;left:0;top:0;width:1px;height:18px;background:linear-gradient(transparent,#e6cc9a);animation:cineCue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cineCue{from{transform:translateY(-20px)}to{transform:translateY(58px)}}

/* 4. VARREN SPEAKS. One big line that lights up word by word as it is read. */
.cine-manifesto{padding-block:clamp(110px,14vw,190px)}
.cine-manifesto .vs-big{font-size:clamp(38px,5.2vw,78px);line-height:1.03;letter-spacing:-.034em}
.cine-manifesto .vs-small{font-size:clamp(17px,1.5vw,21px)}
.cine-manifesto .cw{opacity:.16;transition:opacity .5s ease}
.cine-manifesto .cw.is-lit{opacity:1}
.cine-manifesto .launch-pass{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 50px 120px -40px rgba(110,16,40,.9),0 0 0 1px rgba(217,190,142,.12)}

/* Rounded, not square (founder 2026-10-26 asked which): the header's two buttons now share the pill family of the
   composer, "Start now" and every card on the page, so nothing on screen reads as an older, sharper system. */
/* This deliberately overrides the 2026-09-21 "sharp CTAs everywhere" rule, for the header only: since then the hero
   composer, "Start now" and "Watch Me work" became the app's rounded family, so a square pair beside them was the one
   thing on the first screen still in the old system. */
.site-header .button.compact,.mobile-menu .button{border-radius:999px!important}
.site-header .button.compact{padding-inline:18px}
/* "Big ideas deserve more than answers." reads as two lines on a wide screen and three at most on a phone. */
.cine-manifesto .vs-big{text-wrap:balance}
.cine-manifesto .two-col{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:clamp(40px,5vw,90px)}
.cine-manifesto .vs-big{font-size:clamp(36px,4.2vw,68px)}
@media(max-width:1000px){.cine-manifesto .two-col{grid-template-columns:1fr}.cine-manifesto .vs-big{font-size:clamp(36px,7.2vw,64px)}.cine-manifesto .launch-pass{max-width:520px;width:100%;margin-inline:auto}}
/* 5. THE FILM SECTION sits in its own light. */
.cine-film{position:relative}
.cine-film .film{position:relative;isolation:isolate}
.cine-film .film:before{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;top:-12%;bottom:-6%;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(110,16,40,.5),transparent 70%);filter:blur(20px)}
:root[data-theme=light] .cine-film .film:before{background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(110,16,40,.16),transparent 70%)}
.cine-film .film-head h2{font-size:clamp(36px,4.6vw,68px);line-height:1.04;letter-spacing:-.03em}
.cine-film .film-device{box-shadow:0 60px 140px -50px rgba(0,0,0,.85),0 0 0 1px rgba(217,190,142,.08)}
/* THE TYPED INSTRUCTION, rebuilt 2026-10-26. The old reveal grew a box to "100%" of a line narrower than the
   sentence, so it cut the sentence off ("...more custo") and, wherever animation is paused or reduced, left the
   box at zero: an empty line. Now the full sentence always sits in the layout (a hidden copy holds the space,
   wrapping on a phone) and the script types a visible copy over it. With no script it simply reads in full. */
.fb-caret-line{white-space:normal}
.fb-prompt b[data-typewriter]{position:relative;display:block;max-width:none;max-height:none;overflow:visible;white-space:normal;animation:none;font-weight:400;line-height:1.25}
.tw-ghost{visibility:hidden}
.tw-live{position:absolute;left:0;top:0;right:0}
.tw-live .fb-caret{display:inline-block;margin-left:3px;vertical-align:-.12em;height:.92em}
.fb-caret-line>.fb-caret{display:none}
.fb-caret-line:not(:has(.tw-live))>.fb-caret{display:inline-block}

/* 6. EVERY OTHER TOOL HANDS THE WORK BACK. The chores are struck out one by one, then Varren's three asks glow. */
.cine-handoff{padding-block:clamp(110px,13vw,180px) clamp(80px,8vw,120px)}
.cine-handoff .section-head{text-align:center;max-width:1100px;margin:0 auto clamp(48px,6vw,80px)}
.cine-handoff .section-head .eyebrow{justify-content:center}
.cine-handoff .section-head h2{font-size:clamp(38px,5vw,78px);line-height:1.02;letter-spacing:-.036em;margin-inline:auto;max-width:15em;text-wrap:balance}
.cine-handoff .section-head h2 .ch-a{color:var(--muted)}
.cine-handoff .section-head h2 em{display:inline-block;margin-top:.12em;font-size:1.16em;color:var(--accent)}
.cine-handoff .section-head p{max-width:40em;margin-inline:auto}
.cine-handoff .handoff{grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);background:none;border:0;border-radius:0;overflow:visible;max-width:1120px;margin:0 auto 26px}
.cine-handoff .handoff-side{border-radius:24px;padding:clamp(24px,3vw,40px);position:relative}
.cine-handoff .handoff-side.is-them{background:var(--surface);border:1px solid var(--line)}
.cine-handoff .handoff-side.is-varren{border:1px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,rgba(220,194,147,.9),rgba(110,16,40,.9) 55%,rgba(220,194,147,.5)) border-box;
  box-shadow:0 40px 110px -40px rgba(110,16,40,.75)}
.cine-handoff .handoff-side.is-varren:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 85% 0,rgba(220,194,147,.14),transparent 60%)}
.cine-handoff .handoff-label{font-size:12px;letter-spacing:.16em;margin-bottom:22px}
.cine-handoff .handoff-side ul{gap:10px}
.cine-handoff .handoff-side li{font-size:clamp(14px,1.15vw,16px);line-height:1.45;padding:13px 16px 13px 46px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 55%,transparent);position:relative}
.cine-handoff .handoff-side li:before{left:16px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:5px;border:1.5px solid var(--muted);background:none}
.cine-handoff .handoff-side.is-them li span{background:linear-gradient(var(--accent),var(--accent)) 0 55%/0 1.5px no-repeat;transition:background-size .7s cubic-bezier(.65,0,.35,1)}
.cine-handoff .handoff-side.is-them li:before{transition:border-color .5s,background .5s}
.cine-handoff .handoff-side.is-them li{transition:color .7s ease,opacity .7s ease}
.cine-handoff.is-in .handoff-side.is-them li{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.cine-handoff.is-in .handoff-side.is-them li span{background-size:100% 1.5px}
.cine-handoff.is-in .handoff-side.is-them li:before{border-color:var(--accent)}
.cine-handoff.is-in .handoff-side.is-them li:nth-child(1),.cine-handoff.is-in .handoff-side.is-them li:nth-child(1) span,.cine-handoff.is-in .handoff-side.is-them li:nth-child(1):before{transition-delay:.5s}
.cine-handoff.is-in .handoff-side.is-them li:nth-child(2),.cine-handoff.is-in .handoff-side.is-them li:nth-child(2) span,.cine-handoff.is-in .handoff-side.is-them li:nth-child(2):before{transition-delay:.75s}
.cine-handoff.is-in .handoff-side.is-them li:nth-child(3),.cine-handoff.is-in .handoff-side.is-them li:nth-child(3) span,.cine-handoff.is-in .handoff-side.is-them li:nth-child(3):before{transition-delay:1s}
.cine-handoff.is-in .handoff-side.is-them li:nth-child(4),.cine-handoff.is-in .handoff-side.is-them li:nth-child(4) span,.cine-handoff.is-in .handoff-side.is-them li:nth-child(4):before{transition-delay:1.25s}
.cine-handoff.is-in .handoff-side.is-them li:nth-child(5),.cine-handoff.is-in .handoff-side.is-them li:nth-child(5) span,.cine-handoff.is-in .handoff-side.is-them li:nth-child(5):before{transition-delay:1.5s}
.cine-handoff.is-in .handoff-side.is-them li:nth-child(6),.cine-handoff.is-in .handoff-side.is-them li:nth-child(6) span,.cine-handoff.is-in .handoff-side.is-them li:nth-child(6):before{transition-delay:1.75s}
.cine-handoff .handoff-side.is-varren li{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
.cine-handoff .handoff-side.is-varren li:before{content:"";border:0;border-radius:50%;background:var(--accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 60%,transparent)}
.cine-handoff .handoff-side.is-varren li:after{content:"";position:absolute;left:21px;top:50%;width:4px;height:8px;margin-top:-6px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cine-handoff .handoff-side.is-varren li{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
html.vc-reveal .cine-handoff:not(.is-in) .handoff-side.is-varren li{opacity:0;transform:translateY(10px)}
.cine-handoff.is-in .handoff-side.is-varren li:nth-child(1){transition-delay:2.1s}
.cine-handoff.is-in .handoff-side.is-varren li:nth-child(2){transition-delay:2.3s}
.cine-handoff.is-in .handoff-side.is-varren li:nth-child(3){transition-delay:2.5s}
.cine-handoff .handoff-note{font-size:13px;margin-top:22px;padding-top:18px}
.cine-handoff .scene-disclosure{text-align:center;max-width:52em;margin-inline:auto}

/* 7. THE QUIETER SECTIONS get the same scale. */
.cine-approval h2,.cine-software .section-head h2{font-size:clamp(34px,4.4vw,64px);line-height:1.04;letter-spacing:-.032em}
.cine-approval .approval-demo{border-radius:24px;box-shadow:0 50px 120px -50px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
.cine-software .three-col{position:relative}
.cine-software .feature-card{border-radius:22px;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.cine-software .feature-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 40px 90px -45px rgba(110,16,40,.8)}
.cine-software .feature-number{font-family:'Playfair Display',Georgia,serif;font-size:44px;line-height:1;color:var(--accent);letter-spacing:-.02em}
.audience-grid a{transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.audience-grid a:hover{transform:translateY(-4px);box-shadow:0 36px 80px -46px rgba(110,16,40,.8)}

/* 8. THE FINALE plays the morning after: the door opens and the customers are already there. */
.cine-finale{--ink:#f7f2ea;--muted:rgba(247,242,234,.82);--line:rgba(255,255,255,.2);color:var(--ink);background:#050304;
  min-height:min(100svh,980px);display:flex;align-items:center;justify-content:center;border-top:0}
.cine-finale .cine-veil{background:radial-gradient(ellipse 62% 40% at 50% 48%,rgba(5,3,4,.5),rgba(5,3,4,.14) 70%,transparent 90%),
  linear-gradient(180deg,var(--bg) 0,rgba(5,3,4,.06) 18%,rgba(5,3,4,.06) 80%,var(--bg) 100%)}
.cine-finale .cine-video{transform:scale(1.04)}
.cine-finale .finale-field{display:none}
.cine-finale .finale-a{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 30px rgba(0,0,0,.7)}
.cine-finale .finale-b{color:transparent!important;background:linear-gradient(100deg,#f4e2bd,#c9a46a 45%,#f8ebcf 60%,#c9a46a);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 40px rgba(0,0,0,.55))}
.cine-finale .finale-cols li{color:#f7f2ea;border-left-color:rgba(255,255,255,.22)}
.cine-finale .finale-line{color:#fff!important;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 24px rgba(0,0,0,.7)}
.cine-finale .finale-cols li{text-shadow:0 1px 3px rgba(0,0,0,.7)}

@media(max-width:700px){
  .cine-hero .hero-v3{width:calc(100% - 32px);padding-top:calc(92px + env(safe-area-inset-top,0px));padding-bottom:84px}
  .cine-hero .hero-v3 h1{font-size:clamp(34px,10.4vw,46px);line-height:1.05}
  .cine-veil{background:radial-gradient(ellipse 90% 50% at 50% 48%,rgba(5,3,4,.6),rgba(5,3,4,.2) 70%,transparent 85%),
    linear-gradient(180deg,rgba(5,3,4,.8) 0,rgba(5,3,4,.2) 22%,rgba(5,3,4,.25) 60%,rgba(5,3,4,.75) 88%,var(--bg) 100%)}
  .cine-cue{bottom:16px;height:40px}
  .cine-handoff .handoff{grid-template-columns:1fr}
  .cine-handoff .section-head h2{font-size:clamp(34px,10vw,46px)}
  .cine-manifesto .vs-big{font-size:clamp(34px,10vw,46px)}
  .cine-finale{min-height:88svh}
  .ci-mark{width:56px;height:60px}
}
@media(prefers-reduced-motion:reduce){
  .cine-hero .hero-v3>*,.cine-hero .cine-video,.cine-cue,.cine-hero .hero-v3 h1 em{animation:none!important;opacity:1;transform:none;filter:none}
  .cine-manifesto .cw{opacity:1}
  .cine-handoff .handoff-side li,.cine-handoff .handoff-side li span,.cine-handoff .handoff-side li:before{transition:none!important}
}

/* THE PRICING PAGE, 2026-10-26. Founder: "make the pricing page better ... more mind-blowing". The same film opens it
   (a still of the hero city, darkened), the four plans become a lit tier row with Growth carried by the gradient border,
   and the AI employees sit in their own wine-lit band. No wording moves: every figure, term and cancellation line is
   rendered by prelaunch_site.py exactly as before; this is presentation only. */
main{overflow-x:clip}
.cine-pricing-hero{position:relative;isolation:isolate;padding-top:clamp(80px,9vw,140px);padding-bottom:clamp(80px,9vw,140px)}
.cp-backdrop{position:absolute;z-index:-1;top:calc(-83px - env(safe-area-inset-top,0px));bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);pointer-events:none;overflow:hidden;background:#050304}
.cp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.001;animation:cineFade 2.4s ease .2s forwards}
.cp-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,3,4,.82) 0,rgba(5,3,4,.5) 40%,rgba(5,3,4,.2) 70%,rgba(5,3,4,.35) 100%),linear-gradient(180deg,rgba(5,3,4,.6) 0,transparent 25%,transparent 70%,var(--bg) 100%)}
:root[data-theme=light] .cp-veil{background:linear-gradient(90deg,rgba(5,3,4,.82) 0,rgba(5,3,4,.5) 40%,rgba(5,3,4,.2) 70%,rgba(5,3,4,.35) 100%),linear-gradient(180deg,rgba(5,3,4,.6) 0,transparent 25%,transparent 70%,#050304 100%)}
@media(prefers-reduced-motion:reduce){.cp-video{animation:none;opacity:1}}

.cine-pricing-hero>div:first-of-type{--ink:#f7f2ea;--muted:rgba(247,242,234,.82);color:#f7f2ea}
.cine-pricing-hero h1{color:#fbf7f0;letter-spacing:-.035em;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.cine-pricing-hero h1 em,:root[data-theme=light] .cine-pricing-hero h1 em{color:transparent;background:linear-gradient(100deg,#f4e2bd,#c9a46a 45%,#f8ebcf 60%,#c9a46a);-webkit-background-clip:text;background-clip:text}
.cine-pricing-hero p,.cine-pricing-hero .text-link,:root[data-theme=light] .cine-pricing-hero>div>p,:root[data-theme=light] .cine-pricing-hero .text-link{color:rgba(247,242,234,.88)}
:root[data-theme=light] .cine-pricing-hero .text-link{border-color:rgba(247,242,234,.5)}
.cine-pricing-hero .launch-pass{box-shadow:0 60px 140px -40px rgba(0,0,0,.8),0 0 0 1px rgba(217,190,142,.14)}
.cine-pricing-hero .hero-actions .button,.found-tier .button{border-radius:999px!important}

.cine-plans .found-tiers{gap:clamp(14px,1.4vw,20px);align-items:stretch}
.found-tier{position:relative;border-radius:24px;padding:30px 26px 26px;gap:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 4%,transparent),transparent 42%),var(--surface);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}
.found-tier:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 50px 100px -50px rgba(110,16,40,.9)}
.found-tier-name{font-family:Inter,sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.found-tier-line{font-size:13.5px;line-height:1.55;color:var(--ink);opacity:.82;min-height:63px}
.found-amount{font-family:'Playfair Display',Georgia,serif;font-size:clamp(40px,3.3vw,52px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.found-cadence{font-size:12px;color:var(--muted);margin-top:-4px}
.found-tier .button{min-height:50px;font-size:13px;font-weight:600;margin-top:14px}
.found-tier .trial-line,.found-tier .found-note,.found-tier>p,.found-tier>span:last-child{font-size:11px;line-height:1.55;color:var(--muted)}
.found-tier .found-note{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.found-tiers:not(.emp-tiers)>.found-tier:nth-child(2){border:1px solid transparent;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface) 55%) padding-box,linear-gradient(150deg,#e6cc9a,#6e1028 55%,#b89a68) border-box;
  box-shadow:0 50px 110px -45px rgba(110,16,40,.95)}
.found-tiers:not(.emp-tiers)>.found-tier:nth-child(2) .button{background:linear-gradient(135deg,#8a1533,#6e1028);color:#f7f2ea;border-color:transparent;box-shadow:0 18px 40px -18px rgba(110,16,40,1)}
.found-tiers:not(.emp-tiers)>.found-tier:nth-child(2):before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 90% 50% at 50% 0,rgba(230,204,154,.16),transparent 70%)}
#employees{position:relative;isolation:isolate}
#employees:before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0,rgba(110,16,40,.35),transparent 70%),linear-gradient(180deg,color-mix(in srgb,#6e1028 12%,var(--bg)),var(--bg))}
:root[data-theme=light] #employees:before{background:radial-gradient(ellipse 70% 60% at 50% 0,rgba(110,16,40,.12),transparent 70%),linear-gradient(180deg,color-mix(in srgb,#6e1028 5%,var(--bg)),var(--bg))}
.emp-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent);align-self:flex-start}
.emp-chip{border-radius:999px!important;padding:7px 14px;font-size:11.5px;cursor:pointer;transition:background .3s,color .3s}
@media(max-width:700px){
  .cine-pricing-hero{padding-top:56px}
  .found-tier{padding:26px 22px 22px}
  .found-tier:hover{transform:none}
}

/* THE THEME SWITCH, 2026-10-26. Founder: the sun "looks like a shining bulb ... it doesn't look very nice", the moon
   looks nicer. So the button no longer shows ONE glyph that flips: it is a small two-position switch showing both,
   a crescent and a quiet dotted sun, and a lit knob slides to the mode you are in. The word stays for screen readers. */
.site-header .theme-toggle{background:none!important;border:0!important;padding:0 2px!important;min-height:38px!important;height:38px!important;cursor:pointer;display:inline-flex;align-items:center}
@media(pointer:coarse){.site-header .theme-toggle{min-height:44px!important;height:44px!important;min-width:44px}}
.theme-toggle .theme-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.theme-switch{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:62px;height:32px;padding:0 8px;box-sizing:border-box;
  border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .4s,border-color .4s}
.theme-switch svg{position:relative;z-index:1;width:15px;height:15px;color:var(--muted);transition:color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.ts-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;transition:transform .5s cubic-bezier(.5,0,.2,1.15),background .4s,box-shadow .4s;
  background:linear-gradient(140deg,#9a1d3c,#5c0c21);box-shadow:0 0 0 1px rgba(230,204,154,.35),0 4px 14px rgba(110,16,40,.7),0 0 18px rgba(230,204,154,.25)}
:root[data-theme=dark] .theme-switch .ts-moon{color:#f4e2bd!important}
:root[data-theme=light] .ts-knob{transform:translateX(28px);background:linear-gradient(140deg,#fffdf8,#f1e6d6);box-shadow:0 0 0 1px rgba(110,16,40,.18),0 4px 12px rgba(88,43,40,.25)}
:root[data-theme=light] .theme-switch .ts-sun{color:#6e1028!important;transform:rotate(45deg)}
.theme-toggle:hover .theme-switch{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.theme-toggle:focus-visible{outline:none}
.theme-toggle:focus-visible .theme-switch{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ts-knob,.theme-switch svg{transition:none}}

/* LIGHT MODE MEETS THE FILM ON A CLEAN EDGE (founder 2026-10-26: the light theme "looks a bit off"). A cream veil over a
   dark film is grey, so in light mode the hero and the finale keep their own black at the edges and the page's cream
   starts on a crisp line, the way a cinema screen sits in a lit room. */
:root[data-theme=light] .cine-hero:after{background:linear-gradient(180deg,transparent,rgba(5,3,4,.55) 60%,#050304)}
:root[data-theme=light] .cine-hero .cine-veil{background:radial-gradient(ellipse 60% 46% at 50% 46%,rgba(5,3,4,.5),rgba(5,3,4,.16) 62%,transparent 80%),
  linear-gradient(180deg,rgba(5,3,4,.62) 0,rgba(5,3,4,.1) 20%,rgba(5,3,4,.06) 58%,rgba(5,3,4,.62) 86%,#050304 100%)}
:root[data-theme=light] .cine-finale .cine-veil{background:radial-gradient(ellipse 62% 40% at 50% 48%,rgba(5,3,4,.5),rgba(5,3,4,.14) 70%,transparent 90%),
  linear-gradient(180deg,#050304 0,rgba(5,3,4,.06) 14%,rgba(5,3,4,.06) 84%,#050304 100%)}
@media(max-width:700px){:root[data-theme=light] .cine-hero .cine-veil{background:radial-gradient(ellipse 90% 50% at 50% 48%,rgba(5,3,4,.6),rgba(5,3,4,.2) 70%,transparent 85%),
  linear-gradient(180deg,rgba(5,3,4,.8) 0,rgba(5,3,4,.2) 22%,rgba(5,3,4,.25) 60%,rgba(5,3,4,.78) 88%,#050304 100%)}}

/* ROUND 3, 2026-10-26. Founder: "web has to be web. Not like a mobile view. Straight, two lines, one line if it fits", the
   message box full width and centred, and "no hiring, no managing" "should be bold and more visible". The film behind it is
   bright daylight and never stops (a montage, not one shot that ends). */
.cine-hero .hero-v3{width:min(1240px,calc(100% - 48px))}
.cine-hero .hero-v3 h1{max-width:none;font-size:clamp(40px,4.9vw,84px);text-wrap:balance}
.cine-hero .hero-v3 .lede{font-weight:600;color:#fff;font-size:clamp(17px,1.55vw,22px);letter-spacing:-.005em;max-width:none;margin-top:20px;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 26px rgba(0,0,0,.6)}
.cine-hero .vc{max-width:820px}
@media(max-width:700px){.cine-hero .hero-v3 .lede{font-size:16.5px;line-height:1.45}}

/* LIGHT MODE WAS BLURRY (founder 2026-10-26: "the light mode makes it look blurry"). The old cream hero's top-light,
   `:root[data-theme=light] .hero-stage:before`, is a 60% WHITE wash over the top half of the stage; over the film it read
   as fog. The film needs no top-light, in either theme. And the glass header goes nearly solid in light mode, because a
   pale glass over moving film is haze, not glass. */
.cine-hero:before,:root[data-theme=light] .cine-hero:before{display:none}
:root[data-theme=light] body:has(.cine-hero) .site-header.is-scrolled:before{background:color-mix(in srgb,var(--bg) 94%,transparent)}

/* THE HEADLINE, 2026-10-26. Founder: "crystal clear to see and well placed so its world class, and the right space between
   it and the no hiring text". A wide soft glow behind thin serif strokes reads as haze over moving film, so the words get a
   tight, crisp shadow and a focused scrim of their own (only behind the words, the film stays bright); the gold is lifted
   and its glow tightened; the gap to the sub-line is a fixed share of the headline's own size; and on a full-height screen
   the headline sits clear of the bar instead of under it. Short screens keep their own tighter rules, which come later. */
.cine-hero .hero-v3{position:relative}
.cine-hero .hero-v3:before{content:"";position:absolute;z-index:-1;left:50%;top:calc(86px + env(safe-area-inset-top,0px));width:min(1180px,96vw);height:clamp(190px,24vw,330px);
  transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(5,3,4,.52),rgba(5,3,4,.26) 55%,transparent 100%)}
.cine-hero .hero-v3 h1{color:#fff;line-height:1.04;font-weight:400;text-rendering:optimizeLegibility;
  text-shadow:0 1px 1px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35),0 8px 40px rgba(0,0,0,.28)}
.cine-hero .hero-v3 h1 em,:root[data-theme=light] .cine-hero .hero-v3 h1 em{
  background-image:linear-gradient(100deg,#fbecc9 0%,#e2bf84 38%,#fff3d9 52%,#e2bf84 70%,#fbecc9 100%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 3px 10px rgba(0,0,0,.35))}
.cine-hero .hero-v3 .lede{margin-top:calc(0.42 * clamp(40px,4.9vw,84px))}
@media(min-width:701px) and (min-height:821px){.cine-hero .hero-v3{padding-top:calc(128px + env(safe-area-inset-top,0px))}
  .cine-hero .hero-v3:before{top:calc(112px + env(safe-area-inset-top,0px))}}
@media(max-width:700px){.cine-hero .hero-v3 .lede{margin-top:16px}
  .cine-hero .hero-v3:before{top:calc(78px + env(safe-area-inset-top,0px));height:220px;width:110vw}}

/* THE FINALE, 2026-10-26. Founder: "Do the thing only you can do. / Varren does the rest." on two centred lines, and
   "make the text on that section clear as well and world class too". Every line over the film gets the headline's
   crisp treatment (tight shadow, a focused scrim behind the words, never a wide haze), and the closing line becomes two
   lines of serif: the human half in white, Varren's half in the same lifted gold as the hero. */
.cine-finale .wrap{position:relative}
.cine-finale .wrap:before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(1100px,104vw);height:118%;transform:translate(-50%,-50%);
  pointer-events:none;background:radial-gradient(closest-side,rgba(5,3,4,.5),rgba(5,3,4,.24) 60%,transparent 100%)}
.cine-finale .finale-a{color:#fff!important;font-size:clamp(30px,3.4vw,48px);text-shadow:0 1px 1px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4)!important}
.cine-finale .finale-b{background:linear-gradient(100deg,#fbecc9 0%,#e2bf84 38%,#fff3d9 52%,#e2bf84 70%,#fbecc9 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.cine-finale .finale-cols li{font-weight:600;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.75),0 2px 10px rgba(0,0,0,.45)!important}
.cine-finale .finale-line{font-family:'Playfair Display',Georgia,serif;font-weight:400!important;font-size:clamp(24px,2.4vw,36px)!important;line-height:1.22;
  letter-spacing:-.015em;text-align:center;max-width:none;margin:clamp(36px,4vw,56px) auto 0;color:#fff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4),0 8px 34px rgba(0,0,0,.3)!important}
.cine-finale .finale-line span{display:inline-block}
.cine-finale .finale-line em{display:inline-block;margin-top:.12em;font-style:italic;color:#f1d7a4;text-shadow:0 1px 1px rgba(0,0,0,.65),0 2px 10px rgba(0,0,0,.45)}
.cine-finale .vc-cta{margin-top:clamp(28px,3vw,40px)}
@media(max-width:700px){.cine-finale .finale-line{font-size:clamp(21px,6.2vw,26px)!important}}

/* THE HEADLINE ON A PHONE IS THREE LINES BY MEANING (founder 2026-10-26): "Varren runs your / marketing and sales, /
   start to finish." Each line is its own block, sized so the longest one fits the narrowest phone, and the gold close
   stands alone as the last line. Desktop is untouched: the spans are inline there and the sentence balances on two lines. */
@media(max-width:700px){
  .cine-hero .hero-v3 h1 .h1-a,.cine-hero .hero-v3 h1 .h1-b,.cine-hero .hero-v3 h1 em{display:block;white-space:nowrap}
  .cine-hero .hero-v3 h1{font-size:min(38px,9.4vw)}
}

/* FINAL RESPONSIVE PASS, 2026-10-26 (founder: "make it solidly web and mobile responsive"). Measured at 320x568, 360x740
   and 375x667: the box and "Start now" fell below the first screen, pushed down by the headline and the console. On a
   short phone everything in the hero tightens (the console's rows too, so its MEASURED height shrinks and it still never
   clips), and the audience cards stop squeezing into two columns on the narrowest phones. */
@media(max-width:700px) and (max-height:780px){
  .cine-hero .hero-v3{padding-top:calc(80px + env(safe-area-inset-top,0px));padding-bottom:36px}
  .cine-hero .hero-v3 h1{font-size:clamp(28px,8.4vw,36px)}
  .cine-hero .hero-v3 .lede{font-size:14.5px;margin-top:10px}
  .cine-hero .vc{margin-top:12px}
  .cine-hero .vc-thread{gap:3px;padding-bottom:6px;min-height:0}  /* the old 304px floor; site.js measures the tallest job */
  .cine-hero .vc-thread *{font-size:12.5px!important;line-height:1.3!important}
  .cine-hero .vc-thread .agent-turn{padding:2px 0}
  .cine-hero .vc-thread .agent-turn-ic{width:20px;height:20px}
  .cine-hero .vc-input{min-height:38px}
  .cine-hero .vc-actions{margin-top:12px;gap:16px}
  .cine-hero .vc-cta{height:46px}
  .cine-cue{display:none}
}
@media(max-width:700px) and (max-height:620px){
  .cine-hero .hero-v3 h1{font-size:clamp(26px,8vw,30px)}
  .cine-hero .hero-v3{padding-top:calc(74px + env(safe-area-inset-top,0px))}
}
@media(max-width:420px){.audience-section .audience-grid{grid-template-columns:1fr}}
/* The smallest, shortest phones keep what sells: the sentence, the box and the two buttons. The console is the demo,
   and on a 568px-tall screen it was pushing the box itself off the first screen. */
@media(max-width:700px) and (max-height:620px){.cine-hero .vc-thread{display:none}}
@media(max-width:700px) and (min-height:621px) and (max-height:700px){
  .cine-hero .hero-v3{padding-top:calc(68px + env(safe-area-inset-top,0px));padding-bottom:16px}
  .cine-hero .hero-v3 h1{font-size:clamp(24px,6.9vw,27px);line-height:1.02}
  .cine-hero .hero-v3 .lede{font-size:13.5px!important}
  .cine-hero .vc-cta{height:44px}
  .cine-hero .vc-thread{gap:2px;padding-bottom:4px}
  .cine-hero .hero-v3 .lede{font-size:14px;margin-top:8px}
  .cine-hero .vc{margin-top:6px}
  .cine-hero .vc-thread *{font-size:11.5px!important;line-height:1.22!important}
  .cine-hero .vc-thread .agent-turn{padding:1px 0}
  .cine-hero .vc-thread .agent-turn-ic{width:18px;height:18px}
  .cine-hero .vc-actions{margin-top:8px}
}
/* Short laptops (1366x768 is the most common): the whole hero, buttons included, on the first screen. */
@media(min-width:701px) and (max-height:820px){
  .cine-hero .hero-v3{padding-top:calc(86px + env(safe-area-inset-top,0px));padding-bottom:36px}
  .cine-hero .hero-v3 h1{font-size:clamp(36px,4.3vw,62px)}
  .cine-hero .hero-v3 .lede{margin-top:12px}
  .cine-hero .vc{margin-top:10px}
  .cine-hero .vc-thread{gap:4px;padding-bottom:6px}
  .cine-hero .vc-thread *{font-size:13px!important;line-height:1.3!important}
  .cine-hero .vc-thread .agent-turn{padding:2px 0}
  .cine-hero .vc-actions{margin-top:16px}
  .cine-cue{display:none}
}
@media(max-width:420px){
  .cine-hero .vc-actions{flex-wrap:nowrap;gap:12px}
  .cine-hero .vc-cta{padding:0 18px 0 20px;font-size:14.5px;white-space:nowrap}
  .cine-hero .vc-watch{font-size:14px;gap:8px;white-space:nowrap}
  .cine-hero .vc-play{width:34px;height:34px}
  .cine-hero .vc-watch{min-height:44px}
}

/* THE BUTTONS ON A REAL LAPTOP (founder 2026-10-27: "start now and watch me work are almost like not visible on the
   laptop ... almost cut off"). A laptop's browser bars take about 140px, so a 1366x768 screen shows 1366x625. Measured:
   the buttons ended 120px below the screen there, and 23 to 28px below at 1536x730 and 1280x650. On short desktop screens
   the console drops the old 304px floor (site.js measures its real height), and below 700px of height it steps aside so
   the sentence, the box and both buttons always fit; the box still types each instruction. */
@media(min-width:701px) and (max-height:820px){.cine-hero .vc-thread{min-height:0}}
@media(min-width:701px) and (max-height:700px){
  .cine-hero .hero-v3{padding-top:calc(78px + env(safe-area-inset-top,0px));padding-bottom:24px}
  .cine-hero .hero-v3 h1{font-size:clamp(32px,3.7vw,52px)}
  .cine-hero .vc{margin-top:14px}
}

/* THE SPLASH IS JUST THE ICON (founder 2026-10-27: "it should be just the icon without that light on it"). No halo behind
   the mark, no brightening of it, no wine glow behind the screen: the real mark, as it is, then the word and the line. */
.ci-glow,.ci-mark:before{display:none!important}
.ci-mark img{filter:none!important}

/* THE WEB HERO IS A CHAT (founder 2026-10-27: "the chat box is in the middle where it should be on the bottom. And the start
   now and the watch me work should be ... the bottom with it", and the typing with "the text goes up" must show). On a wide
   screen the sentence sits at the top and the console, the box and both buttons sit together at the bottom of the screen,
   the way a chat app holds its composer. The console keeps its rising rows on every laptop: on a short screen it is given
   the room that is left (max-height), so the newest rows stay in sight at the bottom and earlier ones rise out of the top. */
@media(min-width:701px){
  .cine-hero{justify-content:flex-start}
  .cine-hero .hero-v3{min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;
    padding-top:calc(104px + env(safe-area-inset-top,0px));padding-bottom:28px}
  .cine-hero .hero-v3>h1,.cine-hero .hero-v3>.lede{flex:none}
  .cine-hero .vc{margin-top:auto;width:100%}
  .cine-hero .vc-thread{display:flex;max-height:calc(100svh - 500px);min-height:0}
  .cine-hero .vc-actions{margin-top:18px}
  .cine-cue{display:none}
}
@media(min-width:701px) and (max-height:700px){
  .cine-hero .hero-v3{padding-top:calc(86px + env(safe-area-inset-top,0px));padding-bottom:18px}
  .cine-hero .vc-thread{max-height:calc(100svh - 440px)}
  .cine-hero .vc-actions{margin-top:12px}
}

/* THE HERO MUST BE LIGHT ENOUGH FOR ANY LAPTOP (founder 2026-10-27, on staging in his own Chrome: "it looks shaky ... The
   girl is stagnant"; his tab's renderer then stopped answering altogether). Frosted glass (backdrop-filter) over a moving
   full-HD film re-blurs the film on every frame, and the headline's gradient shimmer repainted the text for ever; a machine
   without spare graphics power chokes on both. So nothing over the film blurs it: panels are a solid tint instead, and
   the gold of "start to finish." is a flat colour that never repaints. */
.cine-hero .composer-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(16,11,13,.82)!important}
.cine-hero .vc-play,body:has(.cine-hero) .site-header .theme-switch,body:has(.cine-hero) .site-header:before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.cine-hero .vc-play{background:rgba(16,11,13,.55)!important}
body:has(.cine-hero) .site-header.is-scrolled:before{background:color-mix(in srgb,var(--bg) 95%,transparent)!important}
.cine-hero .hero-v3 h1 em,:root[data-theme=light] .cine-hero .hero-v3 h1 em{animation:none!important;filter:none!important;background:none!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;color:#f0d49c!important;-webkit-text-fill-color:#f0d49c;
  text-shadow:0 1px 1px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35)!important}

/* THE CONSOLE IS NEVER CUT (founder 2026-10-27: the red card "gets to a point and ... it cuts it off. That shouldn't happen").
   It had been capped to the room left on short laptops, so the top rows were clipped as they rose. Now nothing caps it:
   site.js sets its height to the tallest job, measured, and on short screens the rows and the headline are made compact
   enough that the whole job, red card included, fits above the box. */
@media(min-width:701px){.cine-hero .vc-thread{max-height:none!important}}
@media(min-width:701px) and (max-height:820px){
  .cine-hero .vc-thread{gap:3px;padding-bottom:4px}
  .cine-hero .vc-thread *{font-size:12.5px!important;line-height:1.28!important}
  .cine-hero .vc-thread .agent-turn{padding:1px 0}
  .cine-hero .vc-thread .agent-turn-ic{width:20px;height:20px}
  .cine-hero .hero-v3 h1{font-size:clamp(32px,3.6vw,52px)}
  .cine-hero .hero-v3{padding-top:calc(88px + env(safe-area-inset-top,0px));padding-bottom:16px}
  .cine-hero .vc-actions{margin-top:12px}
}
@media(min-width:701px) and (max-height:680px){
  .cine-hero .hero-v3 h1{font-size:clamp(28px,3vw,40px)}
  .cine-hero .hero-v3 .lede{margin-top:8px!important;font-size:15px}
  .cine-hero .vc-thread *{font-size:12px!important}
  .cine-hero .vc-input{min-height:34px}
}
/* On a phone the box and both buttons sit a little lower, close to the bottom edge (founder 2026-10-27). */
@media(max-width:700px) and (min-height:701px){.cine-hero .hero-v3{padding-bottom:30px}}

/* Safe-area geometry is last so every responsive header and menu offset keeps the inset. */
.site-header{height:calc(83px + env(safe-area-inset-top, 0px));padding-top:env(safe-area-inset-top, 0px)}
.mobile-menu{top:calc(100% + env(safe-area-inset-top, 0px))}
.site-header+.mobile-menu{top:calc(83px + env(safe-area-inset-top, 0px))}
.review-banner~.mobile-menu{top:calc(109px + env(safe-area-inset-top, 0px))}
@media(max-width:700px){
  .site-header{height:calc(70px + env(safe-area-inset-top, 0px));padding-top:env(safe-area-inset-top, 0px)}
  .mobile-menu{top:calc(94px + env(safe-area-inset-top, 0px))}
  .site-header+.mobile-menu{top:calc(70px + env(safe-area-inset-top, 0px))}
  .review-banner~.mobile-menu{top:calc(94px + env(safe-area-inset-top, 0px))}
}