/* The original Loop page is the foundation. Scrollcraft supplies flow progress. */
:root { --sc-canvas:#f4f7f7; --sc-ink:#101820; --sc-accent:#c6ff4d; --sc-accent-ink:#101820; --sc-font-display:"Manrope",system-ui,sans-serif; --sc-font-text:"Manrope",system-ui,sans-serif; }
html { scroll-behavior:smooth; }
body { overflow-x:clip; }
.nav { width:min(calc(100% - 24px),1010px); }
.nav-links a { white-space:nowrap; }

/* The first screen keeps the original graph and pointer depth, without windows. */
.stage { height:min(760px,100svh); min-height:650px; background:linear-gradient(120deg,#f7faf8,#eaf5f4 74%,#f1f9e4); }
.stage-pin { position:relative; display:grid; place-items:center; height:100%; min-height:650px; padding:110px 0 105px; isolation:isolate; }
.st-haze { position:absolute; inset:-15% -10% 0; pointer-events:none; background:radial-gradient(48% 48% at 50% 43%,rgb(255 255 255 / 57%),transparent 80%); }
.st-net { opacity:.52; }
.st-copy { position:relative; z-index:4; left:auto; top:auto; transform:none; width:min(970px,calc(100% - 32px)); margin:auto; }
.st-copy .chip { margin-bottom:24px; }
.st-copy h1 { font-size:clamp(62px,6.3vw,100px); line-height:1; }
.st-copy .lede { margin-top:24px; max-width:560px; font-size:clamp(16px,1.35vw,19px); }
.join-form { width:min(540px,100%); margin:28px auto 0; }
.join-form .join { max-width:none; margin-top:0; }
.join-form .join:focus-within { outline:2px solid #398f8d; outline-offset:2px; }
.join-form button:disabled { opacity:.64; cursor:not-allowed; transform:none; }
.join-form button[aria-busy="true"] { cursor:progress; }
.consent { display:flex; align-items:flex-start; gap:10px; max-width:520px; margin:14px auto 0; text-align:left; color:#566b73; font-size:12px; line-height:1.5; cursor:pointer; }
.consent input { flex:0 0 17px; width:17px; height:17px; margin:1px 0 0; accent-color:#77a92b; }
.form-status { min-height:17px; margin:5px 0 0; color:#af493d; font-size:12px; font-weight:650; }
.form-status.success { color:#276941; }
.join-form.invalid .join { box-shadow:0 0 0 2px #c54d3d,var(--glass-shadow); }
.st-ico { position:absolute; inset:0; z-index:2; }
.st-ico span { width:66px; height:66px; border-radius:21px; }
.st-ico .svg,.st-ico .av { width:34px; height:34px; }
.st-ico span:nth-child(1) { left:10%; top:35%; }
.st-ico span:nth-child(2) { left:16%; top:73%; }
.st-ico span:nth-child(3) { left:85%; top:31%; }
.st-ico span:nth-child(4) { left:89%; top:69%; }
.st-ico span:nth-child(5) { left:70%; top:80%; display:grid; }
.hero-links { position:absolute; z-index:4; left:50%; bottom:35px; display:flex; align-items:center; gap:8px; transform:translateX(-50%); white-space:nowrap; }
.hero-links a { padding:9px 13px; border:1px solid rgb(27 67 76 / 12%); border-radius:999px; background:rgb(255 255 255 / 60%); color:#4e6974; font-size:12px; font-weight:750; text-decoration:none; backdrop-filter:blur(12px); transition:background .25s cubic-bezier(.2,.7,.2,1),color .25s cubic-bezier(.2,.7,.2,1); }
.hero-links a:hover,.hero-links a:focus-visible { background:#101820; color:#fff; }
.hero-links span { padding-left:3px; }

/* Two original logo tracks, opposite directions and scroll-velocity boost in JS. */
.runs { padding:clamp(90px,12vh,130px) 0 clamp(105px,13vh,145px); background:linear-gradient(160deg,#f6faf8,#eaf4f0 68%,#e9f2f0); }
.runs-head { display:flex; flex-direction:column; align-items:center; gap:22px; margin-bottom:42px; text-align:center; }
.runs-head h2 { max-width:15ch; }
.runs-head .sub { max-width:43em; margin:0; }
.mq { padding:9px 0; }
.mq-track { transform:translate3d(0,0,0); }

/* Typographic illustration of a handoff. */
.handoff { display:grid; grid-template-columns:minmax(0,1fr) 60vw; align-items:center; gap:clamp(24px,3vw,48px); min-height:690px; padding:110px var(--gutter); background:#edf4f3; overflow:hidden; }
.handoff-copy h2 { font-size:clamp(48px,5.4vw,80px); }
.handoff-copy h2 span { color:#668692; }
.handoff-copy > p:last-child { margin-top:27px; max-width:29em; color:var(--muted); font-size:clamp(17px,1.4vw,20px); }
.handoff-visual { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:450px; padding:43px clamp(22px,4vw,56px); border-radius:30px; overflow:hidden; color:#f5faf8; background:radial-gradient(70% 70% at 88% 8%,rgb(198 255 77 / 12%),transparent 70%),linear-gradient(140deg,#183a4b,#0d1c27); box-shadow:0 45px 80px -55px rgb(13 42 62 / 65%); }
.handoff-overline { color:#a7bdc2; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.handoff-lines { display:flex; flex-direction:column; align-items:flex-start; margin-top:25px; font-size:clamp(39px,4.3vw,69px); font-weight:800; letter-spacing:-.065em; line-height:1.12; }
.handoff-lines span { display:block; }
.handoff-lines span:nth-child(1) { color:#f6faf8; transform:translateX(calc(var(--sc-p,.5) * -8px)); }
.handoff-lines span:nth-child(2) { color:#c6ff4d; transform:translateX(calc(var(--sc-p,.5) * 15px)); }
.handoff-lines span:nth-child(3) { color:#9cc6cb; transform:translateX(calc(var(--sc-p,.5) * -18px)); }
.handoff-lines span:nth-child(4) { color:#f6faf8; transform:translateX(calc(var(--sc-p,.5) * 10px)); }
.handoff-progress { width:100%; height:2px; margin-top:31px; background:rgb(255 255 255 / 18%); }
.handoff-progress span { display:block; width:100%; height:100%; background:#c6ff4d; transform-origin:0 50%; transform:scaleX(var(--sc-p,0)); }
.handoff-visual { perspective:1100px; }
.handoff-visual::before { content:""; position:absolute; inset:-30%; pointer-events:none; background:radial-gradient(circle at calc(50% + var(--hx,0px)) calc(50% + var(--hy,0px)),rgb(198 255 77 / 16%),transparent 36%); }
.handoff-plane { position:relative; z-index:1; transform:translate3d(calc(var(--hx,0px) * .12),calc(var(--hy,0px) * .12),0) rotateY(var(--hry,0deg)) rotateX(var(--hrx,0deg)); transition:transform .36s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d; }
.handoff-plane > p { margin-top:14px; color:#b8cbd0; font-size:14px; }

/* A single cinematic peak. ScrollCraft pins the stage and publishes --sc-p. */
.brain-feature { position:relative; overflow:visible; background:#071724; color:#f3f8f6; }
.brain-stage { isolation:isolate; overflow:clip; background:radial-gradient(ellipse at 57% 43%,#123f4e 0%,#0b2739 40%,#071724 76%); }
.brain-stage::before { content:""; position:absolute; z-index:2; inset:0 50% 0 0; pointer-events:none; background:linear-gradient(90deg,#071724 8%,rgb(7 23 36 / 75%) 38%,transparent); opacity:clamp(0,calc((var(--sc-p,0) - .63) * 4),1); }
.brain-stage::after { content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:12%; pointer-events:none; background:linear-gradient(transparent,#0b2631); }
.brain-atmosphere { position:absolute; inset:-15%; background:radial-gradient(ellipse at 45% 38%,rgb(77 190 203 / 20%),transparent 37%),radial-gradient(ellipse at 75% 73%,rgb(198 255 77 / 8%),transparent 33%); transform:scale(calc(.9 + var(--sc-p,0) * .22)); }
.brain-poster,.brain-canvas { position:absolute; inset:0; width:100%; height:100%; }
.brain-poster { display:grid; place-items:center; opacity:1; transition:opacity .5s cubic-bezier(.2,.7,.2,1); }
.brain-poster svg { width:min(69vw,820px); max-height:80vh; filter:drop-shadow(0 0 90px rgb(93 196 197 / 30%)); }
.brain-canvas { display:block; opacity:0; transition:opacity .5s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.brain-ready .brain-canvas { opacity:1; }
.brain-ready .brain-poster { opacity:0; }
.brain-intro { position:absolute; z-index:3; top:18%; left:max(var(--gutter),calc((100vw - var(--max))/2)); opacity:clamp(0,calc(1 - var(--sc-p,0) * 4),1); transform:translateY(calc(var(--sc-p,0) * -28px)); }
.brain-intro span { color:#c6ff4d; font-size:12px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.brain-intro p { margin-top:14px; font-size:clamp(26px,3vw,45px); font-weight:780; letter-spacing:-.05em; }
.brain-feature-copy { position:absolute; z-index:4; left:max(var(--gutter),calc((100vw - var(--max))/2)); top:48%; width:min(480px,42vw); transform:translateY(calc(-40% + (1 - var(--sc-p,0)) * 20px)); opacity:clamp(0,calc((var(--sc-p,0) - .65) * 5.8),1); }
.brain-feature .kicker { color:#c6ff4d; }
.brain-feature h2 { font-size:clamp(48px,5vw,76px); line-height:1.04; }
.brain-feature-copy > p:not(.kicker) { max-width:27em; margin-top:22px; color:#d3e3e4; font-size:clamp(16px,1.3vw,19px); }
.brain-feature-copy .brain-small { padding-top:18px; border-top:1px solid rgb(255 255 255 / 17%); color:#b8cdd0; font-size:14px; }
.brain-index { position:absolute; z-index:4; right:5%; bottom:6%; display:flex; align-items:center; gap:10px; color:#a5c6c8; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; opacity:clamp(0,calc((var(--sc-p,0) - .77) * 5),1); }
.brain-index i { width:32px; height:1px; background:#86abae; }
.voice-shot { position:relative; margin:0; }
.voice-shot figcaption { margin-top:14px; color:#6d8289; font-size:12px; font-weight:650; }
.voice-feature { overflow:hidden; background:linear-gradient(140deg,#f9fbf9,#e8f3f1 72%,#bddbd9 87%,#0b2631 100%); }
.voice-feature-inner { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:center; gap:clamp(35px,6vw,90px); width:min(100%,1450px); margin:auto; padding:130px var(--gutter); }
.voice-shot img { width:100%; height:clamp(300px,35vw,440px); object-fit:cover; object-position:50% 55%; border-radius:20px; box-shadow:0 45px 75px -47px rgb(13 42 62 / 55%),0 0 0 1px rgb(255 255 255 / 90%); }
.voice-feature h2 { font-size:clamp(47px,4.8vw,72px); }
.voice-feature h2 span { color:#668692; }
.voice-feature-copy > p:last-child { margin-top:27px; max-width:28em; color:var(--muted); font-size:clamp(17px,1.35vw,19px); }

/* The left desktop widgets get their own visual space after the Brain reveal. */
.widgets-feature { position:relative; overflow:hidden; background:linear-gradient(#0b2631 0,#d7ebea 170px,#f1f7f5 44%); }
.widgets-inner { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(42px,8vw,130px); max-width:1450px; min-height:830px; margin:auto; padding:190px var(--gutter) 120px; }
.widgets-copy h2 { font-size:clamp(50px,5.6vw,82px); }
.widgets-copy > p:last-child { max-width:30em; margin-top:26px; color:var(--muted); font-size:clamp(17px,1.4vw,20px); }
.widgets-stack { position:relative; min-height:490px; }
.widget-card { position:absolute; width:min(360px,100%); padding:18px; border:1px solid rgb(255 255 255 / 90%); border-radius:24px; background:linear-gradient(155deg,rgb(255 255 255 / 92%),rgb(244 252 249 / 86%)); box-shadow:0 34px 58px -38px rgb(11 36 49 / 30%),0 0 0 1px rgb(25 59 68 / 7%); backdrop-filter:blur(18px); transform:translateY(calc((1 - var(--sc-p,.5)) * 24px)); }
.widget-needs { top:0; left:4%; z-index:3; }
.widget-running { top:245px; left:19%; z-index:2; }
.widget-credit { top:353px; left:39%; z-index:1; }
.widget-heading { display:flex; align-items:center; gap:10px; font-size:14px; }
.widget-heading strong { flex:1; font-weight:800; }
.widget-symbol { display:grid; place-items:center; width:31px; height:31px; border:1px solid #d6e5e4; border-radius:11px; background:#f7fcfa; font-size:17px; font-weight:800; }
.widget-count { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#c6ff4d; color:#101820; font-size:11px; font-weight:800; }
.widget-row { display:flex; flex-direction:column; gap:4px; margin-top:15px; padding:14px 8px 0; border-top:1px solid #dfeae9; color:#162834; font-size:13px; }
.widget-row small { color:#63808b; font-size:10px; font-weight:800; letter-spacing:.05em; }
.widget-card > p { margin:14px 2px 1px; color:#657f89; font-size:13px; }

/* Current Voice Teams, captured from Loop's production components. */
.voice-teams { overflow:hidden; background:linear-gradient(150deg,#f0f7f3,#e5f1f0); }
.teams-inner { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center; gap:clamp(40px,7vw,100px); max-width:1450px; min-height:770px; margin:auto; padding:110px var(--gutter); }
.teams-copy h2 { font-size:clamp(50px,5.8vw,88px); }
.teams-copy > p:last-child { max-width:29em; margin-top:25px; color:var(--muted); font-size:clamp(17px,1.4vw,20px); }
.teams-app-shot { position:relative; display:block; width:100%; aspect-ratio:1.5; margin:0; overflow:hidden; border:1px solid rgb(255 255 255 / 90%); border-radius:30px; background:#edf7f4; box-shadow:0 35px 70px -45px rgb(20 66 78 / 35%),0 0 0 1px rgb(32 73 81 / 7%); }
.teams-app-shot img { display:block; width:100%; height:100%; object-fit:contain; }
.teams-app-shot figcaption { position:absolute; left:25px; bottom:25px; display:flex; align-items:center; gap:8px; color:#42616a; font-size:11px; font-weight:700; }
.teams-app-shot figcaption > span { width:6px; height:6px; border-radius:50%; background:#77a90b; box-shadow:0 0 0 4px rgb(170 219 80 / 15%); }
.teams-room { position:relative; min-height:540px; border-radius:40px; background:radial-gradient(ellipse at 50% 50%,#dbf5f0,#c8e6e9 58%,#e6f6ef 100%); box-shadow:inset 0 0 0 1px rgb(255 255 255 / 70%); }
.teams-room::before { content:""; position:absolute; inset:8%; border:1px solid rgb(34 96 108 / 15%); border-radius:50%; transform:rotate(-15deg) scaleY(.73); }
.teams-orbit { position:absolute; left:50%; top:50%; width:64%; aspect-ratio:1; border:1px solid rgb(39 122 132 / 22%); border-radius:50%; transform:translate(-50%,-50%) rotate(-18deg) scaleY(.65); }
.teams-orbit-two { width:90%; border-color:rgb(39 122 132 / 12%); transform:translate(-50%,-50%) rotate(24deg) scaleY(.68); }
.teams-core { position:absolute; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; gap:11px; transform:translate(-50%,-50%); color:#274c59; font-size:13px; font-weight:800; }
.teams-core img { width:92px; height:92px; padding:15px; border-radius:30px; background:#fff; box-shadow:0 25px 50px -28px rgb(28 88 102 / 60%); }
.teams-voice { position:absolute; display:flex; align-items:center; gap:7px; min-width:170px; padding:8px 12px 8px 8px; border:1px solid rgb(255 255 255 / 80%); border-radius:999px; background:rgb(255 255 255 / 85%); box-shadow:0 20px 36px -27px rgb(17 77 90 / 50%); color:#1b3947; font-size:12px; font-weight:800; transform:translate3d(calc(var(--sc-p,.5) * 9px),calc(var(--sc-p,.5) * -11px),0); }
.teams-voice img { width:34px; height:34px; padding:5px; border-radius:50%; background:#ecf5f4; object-fit:contain; }
.teams-voice span { margin-right:auto; }
.teams-voice i { width:2px; height:8px; border-radius:3px; background:#84c99b; }
.teams-voice i:nth-last-child(2) { height:13px; }
.teams-voice i:nth-last-child(3) { height:18px; }
.teams-voice-a { left:8%; top:19%; }
.teams-voice-b { right:5%; top:32%; }
.teams-voice-c { left:18%; bottom:16%; }

/* Original conversation, steps, close and FAQ composition. */
.why { padding-top:130px; }
.how { padding-top:150px; padding-bottom:145px; }
.waitlist { min-height:72vh; min-height:72svh; }
.close-inner { width:min(100%,760px); margin:auto; }
.waitlist .join-form { margin-top:28px; }
.waitlist .join-dark { max-width:none; }
.waitlist .consent { color:#bbced2; }
.waitlist .form-status { color:#ffc8bc; }
.waitlist .form-status.success { color:#c6ff4d; }
.faq-sec { min-height:420px; }
.foot { justify-content:space-between; }

@media (max-width:1050px) {
  .st-ico span:nth-child(1) { left:5%; } .st-ico span:nth-child(3) { left:89%; }
  .widgets-inner,.teams-inner { gap:40px; }
  .widget-credit { left:22%; }
}
@media (max-width:820px) {
  .stage { height:min(720px,100svh); min-height:650px; } .stage-pin { min-height:650px; padding:100px 0 130px; }
  .st-copy h1 { font-size:clamp(58px,9.5vw,82px); }
  .st-ico { display:block; }
  .handoff { grid-template-columns:1fr; min-height:0; padding-top:95px; padding-bottom:110px; }
  .handoff-visual { min-height:410px; }
  .voice-feature-inner { grid-template-columns:1fr; padding-top:110px; padding-bottom:110px; }
  .voice-feature-copy { order:-1; }
  .brain-feature-copy { width:min(450px,48vw); }
  .widgets-inner,.teams-inner { grid-template-columns:1fr; min-height:0; padding-top:130px; padding-bottom:110px; }
  .widgets-stack { width:min(540px,100%); margin:auto; }
  .teams-room { width:min(650px,100%); margin:auto; }
}
@media (max-width:600px) {
  .nav-links { display:none; }
  .stage { height:min(690px,100svh); min-height:620px; } .stage-pin { min-height:620px; padding:90px 0 190px; }
  .st-copy .chip { margin-bottom:18px; font-size:11px; }
  .st-copy h1 { font-size:clamp(53px,13vw,68px); }
  .st-copy .lede { max-width:340px; margin-top:18px; font-size:15px; line-height:1.5; }
  .join-form { margin-top:22px; }
  .join-form .join { flex-direction:row; border-radius:999px; padding:5px; gap:3px; }
  .join-form .join input { width:40%; height:44px; padding:0 10px; font-size:13px; }
  .join-form .join .btn { width:auto; min-width:150px; height:44px; padding:0 12px; font-size:12px; }
  .consent { max-width:350px; margin-top:10px; font-size:10px; }
  .consent input { flex-basis:16px; width:16px; height:16px; }
  .form-status { min-height:14px; margin-top:3px; font-size:11px; }
  .st-ico span { width:44px; height:44px; border-radius:14px; }
  .st-ico .svg,.st-ico .av { width:25px; height:25px; }
  .st-ico span:nth-child(1) { left:4%; top:64%; }
  .st-ico span:nth-child(2) { left:19%; top:78%; }
  .st-ico span:nth-child(3) { left:84%; top:62%; }
  .st-ico span:nth-child(4) { left:72%; top:78%; }
  .st-ico span:nth-child(5) { left:46%; top:83%; display:grid; }
  .hero-links { bottom:18px; gap:4px; }
  .hero-links a { padding:7px 8px; font-size:10px; }
  .runs { padding-top:95px; padding-bottom:108px; }
  .runs-head h2 { max-width:14ch; }
  .runs-head .sub { max-width:33em; }
  .handoff { padding-top:85px; padding-bottom:90px; }
  .handoff-visual { min-height:360px; padding:30px 27px; }
  .handoff-lines { font-size:clamp(43px,11vw,59px); }
  .voice-feature-inner { padding-top:90px; padding-bottom:105px; }
  .voice-feature h2 { font-size:clamp(43px,11vw,58px); }
  .voice-shot img { border-radius:12px; }
  .brain-poster svg { width:115vw; max-width:none; }
  .brain-intro { top:13%; left:var(--gutter); }
  .brain-intro p { max-width:11em; }
  .brain-stage::before { inset:47% 0 0; background:linear-gradient(transparent,#071724 53%); }
  .brain-feature-copy { left:var(--gutter); right:var(--gutter); top:auto; bottom:10%; width:auto; transform:translateY(calc((1 - var(--sc-p,0)) * 16px)); }
  .brain-feature h2 { font-size:clamp(43px,11vw,58px); }
  .brain-feature-copy > p:not(.kicker) { font-size:15px; }
  .brain-index { display:none; }
  .widgets-inner,.teams-inner { padding-top:120px; padding-bottom:90px; }
  .widgets-copy h2,.teams-copy h2 { font-size:clamp(44px,11vw,60px); }
  .widgets-stack { min-height:490px; }
  .widget-card { width:min(310px,83vw); }
  .widget-needs { left:0; }
  .widget-running { top:244px; left:11%; }
  .widget-credit { top:344px; left:16%; }
  .teams-room { min-height:430px; border-radius:28px; }
  .teams-core img { width:72px; height:72px; border-radius:22px; }
  .teams-voice { min-width:132px; font-size:10px; }
  .teams-voice img { width:28px; height:28px; }
  .teams-voice-a { left:3%; top:15%; }
  .teams-voice-b { right:2%; top:30%; }
  .teams-voice-c { left:9%; bottom:15%; }
  .why { padding-top:90px; } .how { padding-top:130px; padding-bottom:130px; }
  .waitlist { min-height:600px; padding-top:100px; padding-bottom:85px; }
  .waitlist .join-form .join { flex-direction:column; border-radius:24px; }
  .waitlist .join-form .join input { width:100%; }
  .waitlist .join-form .join .btn { width:100%; }
  .faq-sec { padding-top:85px; }
}
@media (max-width:360px) {
  .st-copy h1 { font-size:45px; }
  .hero-links a { padding:6px; font-size:9px; }
  .teams-voice { min-width:112px; }
  .qa-q { max-width:90%; }
  .qa-a { max-width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .dot { animation:none !important; }
  .handoff-lines span,.handoff-progress span { transform:none !important; }
  .handoff-plane { transform:none !important; }
  .mq-track { transition:none !important; }
  .brain-intro { display:none; }
  .brain-feature-copy { opacity:1; transform:translateY(-40%); }
  .brain-stage::before { opacity:1; }
  .brain-index { opacity:1; }
  .brain-poster { opacity:1 !important; }
  .brain-canvas { display:none; }
  .wipe { clip-path:none; transform:none; }
  .qa .wipe { opacity:1; transform:none; }
}

/* Package A: normal-flow hero until Package C enables the pinned world. */
.stage[data-sc-act="flow"] { height:auto; }
.stage[data-sc-act="flow"] .stage-pin { height:auto; grid-template-areas:"copy" "links" "caption"; padding-bottom:60px; }
.stage[data-sc-act="flow"] .st-copy { grid-area:copy; }
.stage[data-sc-act="flow"] .hero-links { grid-area:links; position:relative; left:auto; bottom:auto; transform:none; justify-content:center; margin:34px 0 70px; }
.stage[data-sc-act="flow"] .st-ico { bottom:190px; }
.aw-stage:empty { position:absolute; inset:0; pointer-events:none; }
.aw-caption { grid-area:caption; position:relative; z-index:4; width:min(900px,calc(100% - 32px)); text-align:center; }
.aw-caption h2 { font-size:clamp(28px,3.5vw,46px); }
.aw-caption p { margin-top:16px; color:var(--muted); font-size:clamp(15px,1.35vw,19px); }
.handoff-example { min-width:0; }
.example-flow { display:block; margin-top:18px; color:var(--muted); font-size:12px; }
.handoff-example .example-flow { text-align:center; }
.teams-copy > p { max-width:29em; margin-top:25px; color:var(--muted); font-size:clamp(17px,1.4vw,20px); }
.teams-copy > .teams-note { margin-top:18px; font-size:14px; }
.teams-app-shot { aspect-ratio:auto; overflow:visible; background:none; box-shadow:none; border:0; border-radius:0; }
.teams-app-shot img { height:auto; border:1px solid rgb(255 255 255 / 90%); border-radius:30px; box-shadow:0 35px 70px -45px rgb(20 66 78 / 35%),0 0 0 1px rgb(32 73 81 / 7%); }
.teams-app-shot figcaption { position:static; margin-top:14px; font-size:12px; }

/* Control replaces the horizontal workspace tour. */
.control { background:linear-gradient(150deg,#edf5f2,#e5f0f1); }
.control-inner { max-width:1440px; margin:auto; padding:110px var(--gutter); }
.control-copy { max-width:950px; }
.control-copy > p { max-width:35em; margin-top:25px; color:var(--muted); font-size:clamp(17px,1.4vw,20px); }
.control-widgets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:48px; }
.control-freeforms { display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
.control-freeforms h3 { font-size:20px; letter-spacing:-.02em; }
.control-freeforms p { max-width:32em; margin-top:10px; color:var(--muted); font-size:15px; }
.logo-row { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; max-width:var(--max); margin:18px auto; padding:0 var(--gutter); }
.logo-row .lg { height:64px; padding:0 22px; border-radius:20px; font-size:18px; }
.logo-row .lg img { width:28px; height:28px; }
.model-note { margin:42px var(--gutter) 18px; text-align:center; color:var(--muted); font-size:15px; }
.how > h2 { margin-bottom:42px; }
.waitlist .wl-note { margin-top:20px; }

/* Source: Ambient-Harri/src/app/globals.css, light brand tokens. */
.control,.brain-transfer-cards { --ui-ink:#101820; --ui-deep:#0d2a3e; --ui-tint:#e7eef2; --ui-tint-line:#cbdbe3; --ui-flaeche:#fff; --ui-lime:#c6ff4d; }

/* Source: Ambient-Harri/src/components/zentrale.tsx, renderKachel light shell. */
.ui-kachel { position:relative; display:flex; min-width:0; min-height:0; flex-direction:column; overflow:hidden; border:1px solid rgb(255 255 255 / 70%); border-radius:16px; background:rgb(255 255 255 / 80%); color:var(--ui-ink); box-shadow:0 1px 2px rgb(13 42 62 / 6%),0 10px 28px rgb(13 42 62 / 8%); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }
.ui-kachel-head { display:flex; flex-shrink:0; align-items:center; gap:10px; padding:14px 16px 8px; }
.ui-kachel-head h3,.brain-feature .ui-kachel-head h3 { min-width:0; flex:1; font-size:13px; font-weight:600; line-height:1.5; letter-spacing:-.025em; text-shadow:none; }
.ui-kachel-icon { display:grid; flex-shrink:0; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--ui-tint); }
.ui-kachel-icon svg { width:14px; height:14px; }
.ui-kachel-divider { margin:0 16px; border-top:1px solid rgb(13 42 62 / 10%); }
.ui-kachel-body { position:relative; min-height:0; flex:1; padding:12px 16px 16px; font-size:14px; line-height:1.5; text-shadow:none; }
.ui-meta { color:rgb(13 42 62 / 60%); font-size:12px; }
.ui-kachel-body > .ui-meta { margin-top:4px; }
.ui-card-label { margin-bottom:8px; font-size:12px; font-weight:600; }

/* Source: Ambient-Harri/src/components/zentrale.tsx, BubbleInhalt laeuft and ArbeitetZeichen. */
.ui-working-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; font-size:14px; }
.ui-agent { display:flex; align-items:center; gap:8px; font-weight:500; }
.ui-working-dot { width:8px; height:8px; flex-shrink:0; border-radius:50%; background:var(--ui-lime); }
.ui-working-task { margin-left:16px; color:rgb(13 42 62 / 60%); font-size:12px; }

/* Source: Ambient-Harri/src/components/braucht-dich.tsx, embedded entry utilities. */
.ui-needs-list { margin:0 -16px; padding:0; list-style:none; }
.ui-needs-entry { display:flex; width:100%; align-items:flex-start; gap:12px; padding:12px 16px; text-align:left; }
.ui-needs-icon { flex-shrink:0; margin-top:2px; color:var(--ui-deep); }
.ui-needs-icon svg { width:16px; height:16px; }
.ui-needs-copy { min-width:0; flex:1; }
.ui-needs-agent { display:block; color:#525252; font-size:10px; font-weight:600; line-height:1.5; letter-spacing:.025em; text-transform:uppercase; }
.ui-needs-question { display:block; color:var(--ui-ink); font-size:14px; font-weight:500; }
.ui-review { display:block; margin-top:2px; color:#525252; font-size:12px; line-height:20px; }

/* Source: Ambient-Harri/src/components/app-rail.tsx, AccountMenu mark and its light lime container. Static preview. */
.ui-rail-account { display:grid; width:36px; height:36px; flex-shrink:0; place-items:center; border-radius:8px; background:rgb(198 255 77 / 12%); }
.ui-rail-account img { width:32px; height:32px; object-fit:contain; }

/* Source: Ambient-Harri/src/app/preview/glas/glas.css, .glas-strom and .glas-bubble. */
.brain-transfer-cards { --ui-glas-bubble:rgb(255 255 255 / 62%); --ui-glas-rand:rgb(255 255 255 / 78%); --ui-glas-schatten:0 1px 1px rgb(13 42 62 / 5%),0 10px 30px rgb(13 42 62 / 9%); }
.ui-glas-bubble { background:var(--ui-glas-bubble); border:1px solid var(--ui-glas-rand); border-radius:20px; box-shadow:var(--ui-glas-schatten); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); color:var(--ui-ink); }

/* Brain transfer content is static in Package A; Package C supplies the card choreography. */
.brain-feature .brain-stage .brain-beat-transfer { left:var(--gutter); right:var(--gutter); top:30%; width:auto; max-width:1100px; margin-inline:auto; }
.brain-transfer-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.brain-transfer-cards .ui-glas-bubble { min-width:0; }
.brain-feature .brain-beat-transfer > p { max-width:none; font-size:16px; text-align:center; }
.brain-beat-transfer .example-flow { color:#b6d3d8; text-align:center; }
.brain-feature[data-sc-act="flow"] .brain-stage .brain-beat-transfer { inset:auto; width:auto; }

@media (min-width:640px) {
  /* Source: Ambient-Harri/src/components/braucht-dich.tsx, sm:px-5. */
  .ui-needs-entry { padding-inline:20px; }
}
@media (max-width:820px) {
  .control-widgets { grid-template-columns:1fr; max-width:480px; }
  .control-inner { padding-top:90px; padding-bottom:90px; }
  .brain-transfer-cards { grid-template-columns:1fr; gap:12px; }
  .brain-feature .brain-stage .brain-beat-transfer { top:auto; bottom:14%; }
  .brain-transfer-cards .ui-kachel-head { padding-top:10px; padding-bottom:4px; }
  .brain-transfer-cards .ui-kachel-body { padding-top:6px; padding-bottom:10px; font-size:12px; }
  .brain-transfer-cards .ui-meta { font-size:11px; }
  .control-freeforms { align-items:flex-start; }
}
@media (max-width:600px) {
  .control-copy h2 { font-size:clamp(40px,10.5vw,58px); }
  .control-freeforms { flex-direction:column; gap:20px; }
  .logo-row { gap:10px; }
  .logo-row .lg { height:52px; gap:10px; padding:0 14px; font-size:14px; }
  .logo-row .lg img { width:24px; height:24px; }
  .stage[data-sc-act="flow"] .stage-pin { padding-bottom:45px; }
  .stage[data-sc-act="flow"] .hero-links { margin-top:100px; margin-bottom:45px; }
  .teams-app-shot img { border-radius:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .brain-feature .brain-stage .brain-beat-transfer { inset:auto; width:auto; }
  .brain-transfer-cards { grid-template-columns:1fr; }
}

/* Source: zentrale.tsx renderKachel/BubbleInhalt, braucht-dich.tsx embedded list.
   Demo-Freigabe BUILD_SPEC §0.3: larger type and spacing, same App shell. */
.control-widgets > .ui-kachel { min-height:225px; border-radius:20px; }
.control .ui-kachel-head { gap:12px; padding:20px 24px 16px; }
.control .ui-kachel-head h3 { font-size:18px; }
.control .ui-kachel-icon { width:36px; height:36px; border-radius:10px; }
.control .ui-kachel-icon svg { width:18px; height:18px; }
.control .ui-kachel-divider { margin-inline:24px; }
.control .ui-kachel-body { padding:20px 24px 24px; font-size:17px; }
.control :is(.ui-meta,.ui-working-task,.ui-needs-agent,.ui-review) { font-size:15px; }
.control .ui-agent,.control .ui-needs-question { font-size:17px; }
.control .ui-working-task { margin-top:10px; }
.control .ui-needs-agent { text-transform:none; letter-spacing:0; }
.control .ui-needs-list { margin:0; }
.control .ui-needs-entry { padding:0; }
.control .ui-needs-question { margin-top:6px; }
.control .ui-review { width:fit-content; margin-top:12px; padding:6px 14px; border-radius:8px; background:var(--ui-tint); color:var(--ui-deep); }

/* Source: freeforms-workspace.tsx FreeformFrame/toolbar/canvas, loop-chat-glas.css.
   Static App windows use approved demo content from BUILD_SPEC §3.2/§3.5. */
.ui-freeforms { position:relative; isolation:isolate; flex:0 1 640px; width:100%; min-width:0; overflow:hidden; border:1px solid rgb(255 255 255 / 78%); border-radius:20px; color:var(--ui-ink); background:radial-gradient(circle at 18% 88%,rgb(255 255 255 / 85%) 0 10%,transparent 38%),linear-gradient(140deg,#e3f4ee 0%,#f2f8f5 42%,#e1edf7 100%); box-shadow:0 1px 1px rgb(13 42 62 / 5%),0 10px 30px rgb(13 42 62 / 9%); }
.ui-freeforms::before { content:""; position:absolute; z-index:-1; inset:-20%; background:radial-gradient(circle at 14% 16%,rgb(198 255 77 / 38%) 0 4%,transparent 26%),radial-gradient(circle at 86% 12%,rgb(120 196 236 / 34%) 0 6%,transparent 30%),radial-gradient(circle at 70% 78%,rgb(96 190 170 / 30%) 0 8%,transparent 36%); filter:blur(28px); }
.ui-freeforms-toolbar { width:fit-content; margin:12px; padding:8px 14px; border:1px solid rgb(255 255 255 / 78%); border-radius:999px; background:rgb(255 255 255 / 62%); font-size:15px; font-weight:600; }
.ui-freeforms-canvas { position:relative; display:grid; grid-template-columns:1.05fr 1fr; align-items:start; gap:16px; padding:8px 20px 24px; background-image:radial-gradient(circle,#d7d7d4 1px,transparent 1px); background-size:20px 20px; }
.ui-freeform-window { min-width:0; overflow:hidden; border:1px solid rgb(255 255 255 / 78%); border-radius:20px; background:rgb(255 255 255 / 82%); box-shadow:0 1px 1px rgb(13 42 62 / 5%),0 10px 30px rgb(13 42 62 / 9%); backdrop-filter:blur(22px) saturate(150%); }
.ui-freeform-window:last-child { margin-top:36px; }
.ui-freeform-head { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border-bottom:1px solid rgb(255 255 255 / 70%); font-size:15px; font-weight:600; }
.ui-freeform-head svg { width:16px; height:16px; flex-shrink:0; color:#a3a3a3; }
.control-freeforms .ui-freeform-window p { margin:0; max-width:none; font-size:15px; color:var(--ui-ink); }
.ui-freeform-content { display:grid; gap:12px; padding:18px; font-size:15px; }
.ui-freeform-content img { width:24px; height:24px; }
.ui-freeform-content .ui-agent { flex-wrap:wrap; }
@media (max-width:1000px) {
  .control-widgets { gap:16px; }
  .control .ui-kachel-head { padding-inline:18px; }
  .control .ui-kachel-body { padding-inline:18px; }
  .control-freeforms { flex-direction:column; align-items:stretch; }
  .ui-freeforms { flex-basis:auto; max-width:720px; }
}
@media (max-width:820px) {
  .control-widgets { max-width:none; }
  .control-widgets > .ui-kachel { min-height:200px; }
}
@media (max-width:480px) {
  .ui-freeforms-canvas { grid-template-columns:1fr; gap:16px; padding-inline:16px; }
  .ui-freeform-window:last-child { margin-top:0; }
}