/* LP pass 18.10.2026: the room settles into the app, a handoff board, a real
   Freeforms/widget workspace, more CTAs. App chrome mirrors Ambient-Harri
   /preview/app (AppRail, Agents Kopf/Leiste/Inspector, Freeforms, Zentrale). */

/* ---------- shared ---------- */
.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:32px; }
.cta-center { justify-content:center; }
.cta-link { color:inherit; font-size:15px; font-weight:750; text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px; opacity:.8; transition:opacity .2s; }
.cta-link:hover,.cta-link:focus-visible { opacity:1; }
.brain-beat .cta-row { margin-top:26px; }

/* ---------- hero + Agent World panorama (A+C): the room sits under the hero,
   full width and uncut; a short caption sits bottom left on a soft fade ---------- */
/* The room only shows desks, names and logos here: no live status. */
.stage .aw-mode-hero :is(.aw-pill,.aw-task,.aw-statuspunkt) { display:none; }
.stage[data-sc-act="flow"] .stage-pin { padding-bottom:0; grid-template-areas:"copy" "world"; }
.stage[data-sc-act="flow"] .aw-stage { grid-area:world; width:100%; height:clamp(320px,64vw,960px); margin-top:clamp(24px,5vh,56px); }
.stage[data-sc-act="flow"] .aw-stage::after { content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:34%; pointer-events:none; background:linear-gradient(to bottom,rgb(241 249 244 / 0),#eef6f2 85%); }
.aw-side { grid-area:world; align-self:end; justify-self:start; position:relative; z-index:4; max-width:780px; margin:0 0 clamp(40px,6vw,72px) max(var(--gutter),calc((100vw - 1380px) / 2)); }
.aw-side h2 { font-size:clamp(34px,3.7vw,58px); line-height:1; }
.aw-side h2 span { color:#668692; }
.aw-roles { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:20px 0 0; padding:0; }
.aw-roles li { display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 7px; border:1px solid rgb(255 255 255 / 90%); border-radius:999px; background:rgb(255 255 255 / 75%); box-shadow:0 1px 2px rgb(13 42 62 / 6%); font-size:13.5px; font-weight:650; }
.aw-roles img { width:20px; height:20px; padding:2px; border-radius:50%; background:#fff; object-fit:contain; }
.aw-side .cta-row { margin-top:24px; }
@media (min-width:821px) { .stage[data-sc-act="flow"] .aw-mode-hero .aw-cam { transform:translateX(7vw); } }
@media (max-width:820px) {
  .stage[data-sc-act="flow"] .stage-pin { grid-template-areas:"copy" "world" "caption"; }
  .stage[data-sc-act="flow"] .aw-stage::after { height:22%; }
  .aw-side { grid-area:caption; align-self:start; justify-self:stretch; margin:0 var(--gutter) 56px; }
}

/* ---------- handoffs: the app's Strom chat, nothing around it ---------- */
.relay { background:linear-gradient(180deg,#f2f8f6,#e8f2f1); overflow:hidden; }
.relay-inner { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:clamp(40px,6vw,96px); max-width:1440px; margin:auto; padding:clamp(100px,14vh,150px) var(--gutter); }
.relay-copy h2 { font-size:clamp(46px,5.4vw,84px); }
.relay-copy h2 span { color:#668692; }
.relay-copy > p { max-width:30em; margin-top:24px; color:var(--muted); font-size:clamp(17px,1.35vw,19px); }
.chat-shot { position:relative; display:flex; flex-direction:column; gap:14px; padding:18px 22px 20px; border:1px solid rgb(255 255 255 / 90%); border-radius:28px; color:#101820; font-size:14px;
  background:radial-gradient(55% 55% at 0% 0%,rgb(220 248 180 / 90%),transparent 70%),radial-gradient(60% 70% at 100% 70%,rgb(170 220 240 / 85%),transparent 72%),linear-gradient(160deg,#f1f8f3,#e3f1f3);
  box-shadow:0 1px 2px rgb(13 42 62 / 5%),0 40px 90px -55px rgb(16 60 72 / 45%); }
.chat-shot svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chat-top { display:flex; justify-content:flex-end; gap:10px; }
.chat-pill,.chat-agent { display:flex; align-items:center; gap:8px; border-radius:999px; background:rgb(255 255 255 / 80%); box-shadow:0 1px 2px rgb(13 42 62 / 6%),0 8px 20px -14px rgb(13 42 62 / 30%); }
.chat-pill { padding:8px 14px; font-size:13px; font-weight:650; }
.chat-agent { padding:5px 12px 5px 5px; }
.chat-agent b { display:block; font-size:13.5px; line-height:1.1; }
.chat-agent small { display:block; color:#7a8d96; font-size:11px; }
.chat-agent > svg { color:#7a8d96; }
.chat-feed { display:flex; flex-direction:column; gap:12px; }
.cm-day { display:flex; align-items:center; gap:14px; margin:0; color:#8a9ca4; font-size:11px; }
.cm-day::before,.cm-day::after { content:""; flex:1; height:1px; background:rgb(13 42 62 / 8%); }
.cm { transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1); }
.chat-shot.is-waiting .cm { opacity:0; transform:translateY(12px); }
.chat-feed .cm:nth-child(2) { transition-delay:0s; } .chat-feed .cm:nth-child(3) { transition-delay:.4s; } .chat-feed .cm:nth-child(4) { transition-delay:.8s; } .chat-feed .cm:nth-child(5) { transition-delay:1.2s; } .chat-feed .cm:nth-child(6) { transition-delay:1.6s; }
.cm-you { align-self:flex-end; max-width:72%; margin:0; padding:11px 16px; border-radius:16px; background:#34474f; color:#fff; line-height:1.45; }
.cm-card { align-self:flex-start; max-width:86%; padding:14px 18px 12px; border-radius:18px; background:#fff; box-shadow:0 1px 2px rgb(13 42 62 / 5%),0 12px 30px -24px rgb(13 42 62 / 35%); }
.cm-card header { display:flex; align-items:center; gap:9px; color:#4f646d; font-size:13px; }
.cm-av { position:relative; display:inline-grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgb(13 42 62 / 12%); }
.cm-av img { width:72%; height:72%; object-fit:contain; border-radius:50%; }
.cm-av img[src*="maskottchen"] { width:100%; height:100%; }
.cm-av i { position:absolute; right:-1px; bottom:-1px; width:8px; height:8px; border:1.5px solid #fff; border-radius:50%; background:#3fbf6f; }
.chat-agent .cm-av { flex-basis:32px; width:32px; height:32px; }
.cm-from { display:flex; align-items:center; gap:6px; margin:8px 0 0; color:#6b7f88; font-size:11.5px; }
.cm-from svg { width:12px; height:12px; }
.cm-card > p:not(.cm-from) { margin:9px 0 0; font-size:14.5px; line-height:1.5; }
.cm-card footer { display:flex; align-items:center; gap:14px; margin-top:10px; color:#9aabb2; font-size:11px; }
.cm-card footer span { display:flex; align-items:center; gap:4px; }
.cm-card footer svg { width:12px; height:12px; }
.chat-compose { padding:14px 14px 10px 18px; border-radius:24px; background:rgb(255 255 255 / 88%); box-shadow:0 1px 2px rgb(13 42 62 / 5%),0 16px 36px -24px rgb(13 42 62 / 40%); }
.cc-ph { color:#9aabb2; font-size:14px; }
.cc-row { display:flex; align-items:center; gap:18px; margin-top:16px; color:#4f646d; }
.cc-model { margin-left:auto; color:#6b7f88; font-size:12.5px; }
.cc-voice { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#101820; color:#fff; }

/* ---------- Voice Teams: a live team call, sharp, taking turns ---------- */
.teams-flip .teams-inner { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }
.teams-flip .vt-call { order:-1; }
.vt-call { position:relative; display:flex; flex-direction:column; align-items:center; margin:0; padding:26px 28px 24px; border:1px solid rgb(255 255 255 / 92%); border-radius:30px;
  background:radial-gradient(45% 55% at 18% 25%,rgb(220 248 180 / 75%),transparent 70%),radial-gradient(45% 55% at 88% 85%,rgb(170 222 242 / 75%),transparent 70%),#eef7f6;
  box-shadow:0 35px 70px -45px rgb(20 66 78 / 35%),0 0 0 1px rgb(32 73 81 / 7%); }
.vt-top { display:flex; justify-content:space-between; width:100%; color:#101820; font-size:15px; font-weight:700; }
.vt-top span:last-child { color:#7a8d96; font-weight:600; }
.vt-top i { display:inline-block; width:10px; height:10px; margin-right:9px; border-radius:50%; background:#8be04e; }
.vt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,150px)); gap:22px 34px; margin-top:18px; }
.vt-tile { display:flex; flex-direction:column; align-items:center; gap:8px; }
.vt-av { position:relative; display:grid; place-items:center; width:clamp(92px,8.4vw,120px); aspect-ratio:1; border-radius:26px; background:#fbfdfc; box-shadow:0 14px 30px -20px rgb(13 42 62 / 40%),0 0 0 2px transparent; transition:box-shadow .35s ease,transform .35s ease; }
.vt-av img { width:78%; height:78%; object-fit:contain; }
.vt-av img.vt-codex,.vt-tile[data-vt="claude"] .vt-av img { width:58%; height:58%; }
.vt-av img.vt-codex { filter:invert(37%) sepia(84%) saturate(470%) hue-rotate(137deg) brightness(88%); }
.vt-tile b { font-size:15px; }
.vt-tile em { padding:4px 12px; border-radius:999px; background:rgb(13 42 62 / 7%); color:#7a8d96; font-size:12.5px; font-style:normal; font-weight:650; transition:background .3s,color .3s; }
.vt-tile.is-speaking .vt-av { box-shadow:0 14px 30px -20px rgb(13 42 62 / 40%),0 0 0 3px #c6ff4d,0 0 30px 2px rgb(198 255 77 / 45%); transform:translateY(-3px); }
.vt-tile.is-speaking em { background:#c6ff4d; color:#101820; }
.vt-tile.is-speaking .vt-av::after { content:""; position:absolute; right:-24px; top:50%; width:16px; height:22px; translate:0 -50%;
  background:linear-gradient(#a6e83a,#a6e83a) 0 50%/3px 40% no-repeat,linear-gradient(#a6e83a,#a6e83a) 50% 50%/3px 100% no-repeat,linear-gradient(#a6e83a,#a6e83a) 100% 50%/3px 55% no-repeat;
  animation:vt-talk .7s ease-in-out infinite alternate; }
@keyframes vt-talk { from { transform:scaleY(.55); } to { transform:scaleY(1.1); } }
.vt-caption { display:flex; gap:8px; align-items:baseline; max-width:100%; min-height:44px; margin:20px 0 0; padding:10px 16px; border-radius:14px; background:rgb(255 255 255 / 75%); color:#3c5560; font-size:14px; transition:opacity .22s ease,transform .22s ease; }
.vt-caption b { color:#101820; white-space:nowrap; }
.vt-caption.is-swapping { opacity:0; transform:translateY(4px); }
.vt-controls { display:flex; gap:14px; margin-top:16px; padding:10px 14px; border-radius:999px; background:rgb(255 255 255 / 65%); }
.vt-controls > span { position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; color:#101820; box-shadow:0 6px 14px -10px rgb(13 42 62 / 40%); }
.vt-controls svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vt-controls .vt-end { background:#e5483d; color:#fff; }
.vt-controls .vt-end svg { fill:#fff; stroke:none; }
.vt-bars { position:absolute; right:-4px; top:-4px; display:none; gap:2px; align-items:flex-end; height:12px; padding:3px 4px; border-radius:8px; background:#c6ff4d; }
.vt-bars b { width:2px; height:100%; border-radius:2px; background:#101820; animation:vt-talk .5s ease-in-out infinite alternate; }
.vt-bars b:nth-child(2) { animation-delay:.15s; } .vt-bars b:nth-child(3) { animation-delay:.3s; }
.vt-mic.is-live { box-shadow:0 0 0 3px #c6ff4d; }
.vt-mic.is-live .vt-bars { display:flex; }

/* ---------- eyebrows: the hero chip, everywhere ---------- */
main section:not(.stage) .kicker { display:inline-flex; align-items:center; gap:8px; width:fit-content; margin:0 0 22px; padding:6px 13px; border:1px solid rgb(255 255 255 / 90%); border-radius:999px; background:rgb(255 255 255 / 66%); box-shadow:0 1px 2px rgb(13 42 62 / 6%); color:var(--muted); font-size:13px; font-weight:650; letter-spacing:0; text-transform:none; }
main section:not(.stage) .kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:#7ab800; }
.waitlist .kicker { border-color:rgb(255 255 255 / 14%); background:rgb(255 255 255 / 8%); color:#dce8ea; box-shadow:none; }
.waitlist .kicker::before { background:#c6ff4d; }
.runs-head .kicker,.ws-copy .kicker,.close-inner .kicker { margin-inline:auto; }

/* ---------- workspace: Freeforms + widgets ---------- */
.ws { background:linear-gradient(150deg,#eef6f3,#e4eff1); overflow:hidden; }
.ws-inner { display:grid; justify-items:center; gap:clamp(44px,6vh,64px); max-width:1240px; margin:auto; padding:clamp(100px,14vh,140px) var(--gutter); }
.ws-copy { max-width:860px; text-align:center; }
.ws-copy .cta-row { justify-content:center; }
.ws-copy h2 { font-size:clamp(46px,5.2vw,82px); }
.ws-copy h2 span { color:#668692; }
.ws-copy > p { max-width:36em; margin:24px auto 0; color:var(--muted); font-size:clamp(17px,1.35vw,19px); }
.ws-app { position:relative; display:flex; width:100%; aspect-ratio:1.7; min-width:0; padding:8px; border:1px solid rgb(255 255 255 / 92%); border-radius:26px; color:#101820; font-size:13px;
  background:radial-gradient(55% 65% at 6% 0%,rgb(214 245 160 / 70%),transparent 70%),radial-gradient(60% 70% at 100% 100%,rgb(176 222 240 / 75%),transparent 70%),#f3f7f6;
  box-shadow:0 50px 100px -55px rgb(16 60 72 / 50%),0 0 0 1px rgb(32 73 81 / 7%); }
.ws-app svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ws-rail { flex:0 0 58px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0; border-radius:18px; background:linear-gradient(180deg,#22383f,#18292f); color:rgb(255 255 255 / 70%); }
.ws-rail span { display:flex; flex-direction:column; align-items:center; gap:3px; width:48px; padding:6px 0; border-radius:11px; font-size:8.5px; font-weight:650; }
.ws-rail span.on { background:rgb(255 255 255 / 12%); color:#fff; box-shadow:-6px 0 0 -3px #c6ff4d; }
.ws-rail i { width:26px; height:1px; margin:3px 0; background:rgb(255 255 255 / 14%); }
.ws-rail b { margin-top:auto; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#fff; }
.ws-canvas { position:relative; flex:1; min-width:0; margin-left:8px; border-radius:18px; background-image:radial-gradient(circle,rgb(13 42 62 / 14%) 1px,transparent 1.2px); background-size:18px 18px; overflow:hidden; }
.ws-toolbar { position:absolute; left:12px; top:12px; z-index:5; display:flex; align-items:center; gap:8px; padding:5px 6px 5px 12px; border:1px solid rgb(255 255 255 / 90%); border-radius:999px; background:rgb(255 255 255 / 80%); font-size:12.5px; font-weight:700; box-shadow:0 8px 20px -14px rgb(13 42 62 / 40%); }
.ws-tb-title { display:flex; align-items:center; gap:6px; }
.ws-tb-new { padding:5px 11px; border-radius:999px; background:#c6ff4d; }
.ws-tb-x { padding:0 6px; color:#7a8d96; }
.ws-win { position:absolute; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgb(255 255 255 / 94%); border-radius:16px; background:rgb(255 255 255 / 84%); backdrop-filter:blur(16px); box-shadow:0 1px 2px rgb(13 42 62 / 6%),0 24px 50px -28px rgb(13 42 62 / 40%); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.ws-win-dash { left:3%; top:13%; width:55%; height:83%; z-index:1; }
.ws-win-chat { left:56%; top:6%; width:41%; height:50%; z-index:3; }
.ws-win-brain { left:60%; top:60%; width:37%; height:36%; z-index:2; }
@media (hover:hover) { .ws-app:hover .ws-win-chat { transform:translate(-6px,-4px); } .ws-app:hover .ws-win-brain { transform:translate(4px,6px); } }
.ws-bar { display:flex; align-items:center; gap:7px; flex:0 0 34px; padding:0 10px; border-bottom:1px solid rgb(13 42 62 / 7%); font-size:12px; font-weight:700; }
.ws-grip { width:10px; height:12px; background-image:radial-gradient(circle,#9fb1b8 1.1px,transparent 1.3px); background-size:5px 4px; }
.ws-bar-sel { margin-left:auto; padding:3px 8px; border-radius:7px; background:#edf3f4; color:#5d7480; font-size:11px; font-weight:650; }
.ws-bar-icons { display:flex; align-items:center; gap:7px; margin-left:auto; }
.ws-bar-sel + .ws-bar-icons { margin-left:6px; }
.ws-bar-icons i { width:11px; height:10px; border:1.5px solid #9fb1b8; border-radius:3px; }
.ws-bar-icons b { color:#7a8d96; font-weight:600; }
.ws-dash { flex:1; min-height:0; padding:14px; overflow:hidden; }
.ws-dash-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ws-dash-head h4 { font-size:clamp(17px,1.5vw,22px); font-weight:800; letter-spacing:-.03em; }
.ws-dash-head small { color:#7a8d96; font-size:11px; }
.ws-dash-tools { display:flex; gap:4px; padding:4px; border-radius:999px; background:rgb(255 255 255 / 80%); box-shadow:inset 0 0 0 1px rgb(13 42 62 / 8%); font-size:11px; font-weight:700; white-space:nowrap; }
.ws-dash-tools span { display:flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; }
.ws-dash-tools .is-on { background:#101820; color:#fff; }
.ws-toggle { width:20px; height:11px; border-radius:999px; background:#101820; position:relative; }
.ws-toggle::after { content:""; position:absolute; right:2px; top:2px; width:7px; height:7px; border-radius:50%; background:#fff; }
.ws-widgets { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.ws-widget { --accent:#e7eef2; min-width:0; border-radius:12px; background:#fff; box-shadow:0 1px 2px rgb(13 42 62 / 6%),0 8px 20px -14px rgb(13 42 62 / 30%); outline:1.5px dashed rgb(13 42 62 / 18%); outline-offset:3px; overflow:hidden; }
.ws-widget header { display:flex; align-items:center; gap:7px; padding:9px 10px 7px; border-bottom:1px solid rgb(13 42 62 / 7%); font-size:11.5px; font-weight:700; }
.ws-w-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--accent); font-size:11px; font-weight:800; }
.ws-w-icon svg { width:12px; height:12px; }
.ws-dots { display:flex; gap:3px; margin-left:auto; }
.ws-dots i { width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px #9fb1b8; }
.ws-dots i:nth-child(2) { background:#0d2a3e; box-shadow:none; }
.ws-dots i:nth-child(3) { background:#c6ff4d; box-shadow:none; }
.ws-widget header b { color:#9fb1b8; font-weight:600; }
.ws-w-body { padding:9px 10px 11px; }
.ws-w-body small { display:flex; align-items:center; gap:5px; color:#6b7f88; font-size:10.5px; font-weight:650; }
.ws-w-body p { margin-top:4px; font-size:12.5px; font-weight:700; line-height:1.3; }
.ws-w-btn { display:inline-block; margin-top:8px; padding:3px 9px; border-radius:7px; background:#e7eef2; font-size:10.5px; font-weight:750; }
.ws-progress { display:block; height:5px; margin-top:9px; border-radius:99px; background:#e7eef2; overflow:hidden; }
.ws-progress i { display:block; width:66%; height:100%; border-radius:inherit; background:#c6ff4d; }
.ws-w-needs { --accent:#ffeadd; }
.ws-w-run { --accent:#f2fbe0; animation:ws-lift 6s ease-in-out infinite; }
.ws-w-credit { background:linear-gradient(150deg,#22424d,#0d2a3e); color:#fff; }
.ws-w-credit header { border-color:rgb(255 255 255 / 10%); }
.ws-w-credit .ws-w-icon { background:rgb(255 255 255 / 14%); }
.ws-w-credit .ws-w-body small { color:#a7bdc2; text-transform:uppercase; letter-spacing:.06em; }
.ws-w-credit strong { display:block; margin-top:2px; font-size:clamp(18px,1.6vw,24px); letter-spacing:-.03em; }
.ws-w-credit .ws-w-body p { color:#c4d6da; font-weight:600; font-size:11px; }
.ws-w-add { display:flex; align-items:center; justify-content:center; gap:7px; min-height:72px; background:rgb(255 255 255 / 45%); box-shadow:none; color:#5d7480; font-size:12px; font-weight:700; outline-color:rgb(13 42 62 / 28%); }
.ws-w-add span { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:#fff; color:#101820; }
@keyframes ws-lift { 0%,55%,100% { transform:none; box-shadow:0 1px 2px rgb(13 42 62 / 6%),0 8px 20px -14px rgb(13 42 62 / 30%); } 65%,90% { transform:translate(3px,-4px) rotate(-1deg); box-shadow:0 22px 34px -18px rgb(13 42 62 / 45%); } }
.ws-chat { position:relative; display:flex; flex-direction:column; gap:8px; flex:1; padding:12px; }
.ws-msg { max-width:86%; padding:8px 11px; border-radius:12px 12px 12px 4px; background:#fff; box-shadow:0 1px 2px rgb(13 42 62 / 8%); font-size:12px; line-height:1.4; }
.ws-msg-you { align-self:flex-end; border-radius:12px 12px 4px 12px; background:#e7eef2; box-shadow:none; }
.ws-file { display:inline-flex; align-items:center; gap:6px; width:fit-content; padding:6px 10px; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px rgb(13 42 62 / 10%); font-size:11px; font-weight:700; }
.ws-compose { margin-top:auto; padding:9px 12px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgb(13 42 62 / 10%); color:#9fb1b8; font-size:11.5px; }
.ws-brain { position:relative; flex:1; overflow:hidden; background:#0f2a3a; }
.ws-brain canvas { position:absolute; inset:0; width:100%; height:100%; }
.ws-brain-tag { position:absolute; left:50%; bottom:10px; translate:-50% 0; padding:4px 10px; border-radius:999px; background:rgb(13 42 62 / 80%); box-shadow:inset 0 0 0 1px rgb(255 255 255 / 14%); color:#dce8ea; font-size:10.5px; font-weight:700; }

/* ---------- integrations, closing ---------- */
.runs > .cta-row { margin-top:46px; }
.how { padding-bottom:clamp(90px,12vh,130px); }
/* Light "How it works" runs into the dark close; its bottom matches the FAQ so both read as one dark area. */
.waitlist { background:radial-gradient(55% 60% at 50% 0%,rgb(198 255 77 / 16%),transparent 65%),radial-gradient(50% 50% at 92% 18%,rgb(96 154 163 / 22%),transparent 60%),linear-gradient(180deg,#10304a,var(--ink) 72%); }
.waitlist + .faq-sec { border-top:0; }

/* ---------- responsive ---------- */
@media (max-width:1100px) {
  .relay-inner,.teams-flip .teams-inner { grid-template-columns:1fr; }
  .teams-flip .vt-call { order:0; }
}
@media (max-width:820px) {
  .cm-card { max-width:94%; }
  .cm-you { max-width:92%; }
  .ws-app { aspect-ratio:auto; height:560px; }
  .ws-rail { display:none; }
  .ws-canvas { margin-left:0; }
  .ws-win-dash { left:3%; top:11%; width:94%; height:54%; }
  .ws-win-chat { left:3%; top:68%; width:94%; height:29%; }
  .ws-win-chat .ws-file { display:none; }
  .ws-win-brain { display:none; }
}
@media (max-width:520px) { .vt-grid { gap:16px 20px; } .vt-call { padding:20px 16px; } .vt-caption { font-size:13px; } }
@media (max-width:420px) { .ws-widgets { grid-template-columns:1fr; } .ws-w-credit,.ws-w-add { display:none; } }
@media (prefers-reduced-motion:reduce) {
  .ws-w-run { animation:none; }
}
/* hermes.svg carries its own framed tile; crop to the portrait inside ours. */
.vt-tile[data-vt="hermes"] .vt-av { overflow:hidden; }
.vt-tile[data-vt="hermes"] .vt-av img { width:100%; height:100%; transform:scale(1.14); }

/* CTA variety */
.cta-link-lime { color:#c6ff4d; opacity:1; }
.btn-ink:hover { background:#22323b; }

/* ============================================================================
   Review pass 18.10.2026 (evening): eyebrows instead of pills, one CTA style,
   a calmer hero, a Brain without a visible frame, an orbit of integrations,
   an illustrated "How it works" and a footer with something in it.
   ========================================================================= */

/* ---------- hero: air under the nav, a bigger form, no chip ---------- */
.stage[data-sc-act="flow"] { height:auto; min-height:0; }
.stage[data-sc-act="flow"] .stage-pin { height:auto; min-height:0; padding:clamp(150px,19vh,205px) 0 clamp(70px,9vh,110px); }
.st-copy .lede { margin-top:26px; }
.join-form { width:min(640px,100%); margin-top:38px; }
.join { max-width:none; padding:8px; }
.join input { padding:0 22px; font-size:17px; }
.join .btn { height:56px; padding:0 28px; font-size:16px; }
.consent { max-width:600px; margin-top:18px; font-size:12.5px; }
.consent-note { max-width:600px; margin:7px auto 0; color:#6b828c; font-size:12.5px; text-align:left; }
.consent-note a { color:inherit; font-weight:700; text-underline-offset:3px; }
.close-inner .consent,.close-inner .consent-note { margin-inline:auto; text-align:center; }
.close-inner .consent { justify-content:center; }
.close-inner .consent-note { color:var(--on-dark-2); }
.close-inner .consent-note a { color:var(--lime); }
.close-inner .join { max-width:620px; }
@media (max-width:520px) { .join .btn { height:52px; } }

/* ---------- eyebrows: plain, no pill, no dot (everywhere) ---------- */
main section:not(.stage) .kicker,.brain-beat .kicker {
  display:block; width:auto; margin:0 0 20px; padding:0; border:0; background:none; box-shadow:none;
  color:#5b7c8a; font-size:12.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
}
main section:not(.stage) .kicker::before { content:none; }
.waitlist .kicker,.brain-beat .kicker { color:var(--lime); }

/* ---------- Agent World: a smaller room, its headline on its own line ---------- */
.stage[data-sc-act="flow"] .stage-pin { grid-template-areas:"copy" "side" "world"; }
.stage[data-sc-act="flow"] .aw-stage { grid-area:world; height:clamp(280px,46vw,660px); margin-top:clamp(18px,3vh,36px); }
.aw-side { grid-area:side; justify-self:center; align-self:start; max-width:860px; margin:clamp(56px,9vh,110px) auto 0; padding:0 var(--gutter); text-align:center; }
.aw-side h2 { font-size:clamp(38px,4.4vw,66px); }
.aw-roles { justify-content:center; }
.aw-side .cta-row { justify-content:center; margin-top:28px; }
@media (max-width:820px) {
  .stage[data-sc-act="flow"] .stage-pin { grid-template-areas:"copy" "side" "world"; }
  .aw-side { margin:48px auto 0; }
}

/* ---------- Brain: the dark field runs edge to edge, no frame ---------- */
.brain-feature { background:#041421; }
.brain-stage::before,.brain-stage::after { content:none; }
.brain-beat-recall { left:max(var(--gutter),calc((100vw - 1350px)/2)); right:auto; }
.brain-beat-mcp { left:max(var(--gutter),calc((100vw - 1350px)/2)); top:27%; width:min(620px,46vw); }
.brain-mcp-list { display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 0; padding:0; list-style:none; }
.brain-mcp-list li { display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 8px; border:1px solid rgb(188 221 233 / 22%); border-radius:999px; background:rgb(10 33 47 / 55%); color:#d4e8ec; font-size:13px; font-weight:650; }
.brain-mcp-list li:last-child { padding-left:13px; color:#c6ff4d; }
.brain-mcp-list img { width:20px; height:20px; padding:2px; border-radius:50%; background:#f1f6f6; }
@media (max-width:820px) {
  .brain-beat-mcp { left:var(--gutter); right:var(--gutter); top:auto; bottom:14%; width:auto; }
  .brain-mcp-list li { font-size:12px; }
}

/* ---------- integrations: agents and tools orbiting the Brain ---------- */
.orbit { display:flex; flex-direction:column; align-items:center; gap:clamp(24px,4vh,40px); padding:0 var(--gutter); }
.orbit-art { position:relative; width:min(720px,92vw); aspect-ratio:1; }
.orbit-art::before,.orbit-art::after { content:""; position:absolute; border:1px dashed rgb(13 42 62 / 13%); border-radius:50%; }
.orbit-art::before { inset:20%; }
.orbit-art::after { inset:4%; }
.orbit-core { position:absolute; left:50%; top:50%; z-index:2; display:grid; justify-items:center; gap:8px; translate:-50% -50%; padding:22px 26px; border:1px solid rgb(255 255 255 / 92%); border-radius:26px; background:rgb(255 255 255 / 86%); box-shadow:var(--glass-shadow); font-size:14px; font-weight:800; letter-spacing:-.02em; }
.orbit-core img { border-radius:14px; }
/* Each ring carries its own radius as its inset, so an item simply rides its
   top edge: rotate the item, counter-rotate the label so it stays upright. */
.orbit-ring { position:absolute; animation:orbit-spin var(--dur) linear infinite; }
.orbit-ring-in { inset:20%; }
.orbit-ring-out { inset:4%; }
.orbit-item { position:absolute; inset:0; transform:rotate(calc(var(--i) * 1turn / var(--n))); }
.orbit-item > i { position:absolute; left:50%; top:0; display:grid; justify-items:center; gap:7px; translate:-50% -50%; transform:rotate(calc(var(--i) * -1turn / var(--n))); animation:orbit-spin var(--dur) linear infinite reverse; }
.orbit-item img { width:clamp(30px,3.4vw,42px); height:clamp(30px,3.4vw,42px); padding:9px; border:1px solid rgb(255 255 255 / 92%); border-radius:18px; background:rgb(255 255 255 / 92%); box-shadow:var(--glass-shadow); box-sizing:content-box; object-fit:contain; }
.orbit-item em { color:#4e6974; font-size:12.5px; font-style:normal; font-weight:700; white-space:nowrap; }
.orbit-note { max-width:46em; color:var(--muted); font-size:clamp(15px,1.2vw,17px); text-align:center; }
@keyframes orbit-spin { to { rotate:1turn; } }
@media (max-width:560px) { .orbit-item em { display:none; } .orbit-art { width:96vw; } }
@media (prefers-reduced-motion:reduce) { .orbit-ring,.orbit-item > i { animation:none; } }

/* ---------- how it works: one weight for all three, art on alternating sides ---------- */
.how-step { display:block; margin-bottom:14px; color:#7ab800; font-size:12.5px; font-weight:800; letter-spacing:.14em; }
.how-art { position:relative; aspect-ratio:11/8; margin:0; border:1px solid rgb(255 255 255 / 85%); border-radius:26px; background:linear-gradient(150deg,#f6faf8,#e7f1f1); box-shadow:var(--glass-shadow); overflow:hidden; }
.how-art svg { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgb(13 42 62 / 18%); stroke-width:1.5; stroke-dasharray:5 6; }
.how-art img { object-fit:contain; }
.how-hub { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:62px; height:62px; translate:-50% -50%; border-radius:20px; background:#fff; box-shadow:0 14px 30px -18px rgb(13 42 62 / 45%); }
.how-plug { position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:#fff; box-shadow:0 10px 24px -16px rgb(13 42 62 / 45%); }
.how-plug img { width:24px; height:24px; }
.how-plug-1 { left:12%; top:18%; } .how-plug-2 { left:12%; top:64%; } .how-plug-3 { right:10%; top:41%; }
.how-art-chat { display:flex; flex-direction:column; justify-content:center; gap:10px; padding:clamp(18px,3vw,30px); }
.how-bubble { display:inline-flex; align-items:center; gap:8px; width:fit-content; max-width:88%; padding:10px 14px; border-radius:14px 14px 14px 4px; background:#fff; box-shadow:0 1px 2px rgb(13 42 62 / 8%); font-size:13.5px; font-weight:650; }
.how-bubble img { width:18px; height:18px; }
.how-bubble-you { align-self:flex-end; border-radius:14px 14px 4px 14px; background:#34474f; color:#fff; }
.how-node { position:absolute; padding:8px 13px; border-radius:999px; background:#fff; box-shadow:0 10px 24px -18px rgb(13 42 62 / 45%); font-size:12.5px; font-weight:700; }
.how-node-1 { left:9%; top:18%; } .how-node-2 { left:7%; top:66%; } .how-node-3 { right:8%; top:27%; }
@media (max-width:820px) {
  .how-rows li { grid-template-columns:1fr; }
  .how-rows li:nth-child(even) .how-text { order:0; }
  .how-art { aspect-ratio:3/2; }
}

/* ---------- questions: open with a slide, not a jump ---------- */
.faq details p { margin:0; }
@supports (interpolate-size:allow-keywords) {
  :root { interpolate-size:allow-keywords; }
  .faq details::details-content { block-size:0; overflow:hidden; opacity:0; transition:block-size .36s var(--ease),content-visibility .36s allow-discrete,opacity .3s ease; }
  .faq details[open]::details-content { block-size:auto; opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .faq details::details-content { transition:none; } }

/* ---------- footer: a darker band, three columns, a last CTA ---------- */
.foot { padding-top:clamp(56px,8vh,84px); background:linear-gradient(180deg,#0b1d2a,#071420); border-top:1px solid rgb(198 255 77 / 22%); }
.foot .foot-brand p { max-width:26em; }
.foot-brand .btn { margin-top:4px; }
.foot-columns a { color:#9fb6bf; text-decoration:none; transition:color .16s; }
.foot-columns a:hover { color:#fff; }
.foot-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:clamp(48px,7vh,74px); color:#7f99a3; }
@media (max-width:820px) {
  .foot-main { grid-template-columns:1fr; gap:38px; }
  .foot-columns { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================================
   Review pass 2 (18.10.2026): headlines in one ink with a lime marker, a
   bigger room that fades into the copy, a calmer Brain, more air around the
   orbit, real artwork in "How it works".
   ========================================================================= */

/* ---------- headlines: no washed-out second line; key words get the marker ---------- */
.st-copy .h-2,.aw-side h2 span,.relay-copy h2 span,.ws-copy h2 span,.teams-copy h2 span,.handoff-copy h2 span { color:inherit; }
.hl { padding-inline:.06em; background:linear-gradient(transparent 56%,rgb(198 255 77 / 70%) 56%,rgb(198 255 77 / 70%) 93%,transparent 93%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.brain-beat .hl,.close-inner .hl,.waitlist .hl { background:none; color:var(--lime); }

/* ---------- the room: bigger again, and whatever reaches the copy fades out ---------- */
.stage[data-sc-act="flow"] .aw-stage { height:clamp(320px,58vw,860px); margin-top:clamp(8px,2vh,24px); }
/* The room itself fades out at the top: a coloured overlay left the white
   floor corner showing through wherever the hero gradient was a shade off. */
.stage[data-sc-act="flow"] .aw-stage { -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 17%); mask-image:linear-gradient(to bottom,transparent 0,#000 17%); }
.aw-side { margin-top:clamp(48px,7vh,90px); }

/* ---------- Brain: section and stage share one ground colour, no seam ---------- */
.brain-feature { background:radial-gradient(ellipse at 63% 43%,#0c3042 0%,#082435 46%,#041421 100%) #041421; }
.brain-stage { background:radial-gradient(ellipse at 63% 43%,#103647 0%,#082435 46%,#041421 100%) #041421; }

/* ---------- integrations: air around the orbit, the line above it ---------- */
.runs { padding-bottom:clamp(80px,10vh,120px); }
.orbit { gap:clamp(30px,5vh,52px); }
.orbit-note { order:-1; max-width:40em; margin-bottom:clamp(4px,1vh,12px); }
.orbit-art { width:min(620px,86vw); margin:clamp(10px,2vh,26px) auto clamp(26px,4vh,46px); }
.orbit-item img { width:clamp(28px,3vw,38px); height:clamp(28px,3vw,38px); }
.mq { margin-top:clamp(18px,3vh,34px); }

/* ---------- how it works: a small orbit, a fuller chat, the Brain itself ---------- */
.how-art-orbit { display:grid; place-items:center; }
/* Sized off the figure's height: the figure is wider than tall, so a width
   based circle would push the outer ring's logos past the top and bottom. */
.orbit-art-sm { position:relative; width:auto; height:82%; aspect-ratio:1; }
.orbit-art-sm::before,.orbit-art-sm::after { content:""; position:absolute; border:1px dashed rgb(13 42 62 / 14%); border-radius:50%; }
.orbit-art-sm::before { inset:26%; }
.orbit-art-sm::after { inset:8%; }
.orbit-art-sm .orbit-ring-in { inset:26%; }
.orbit-art-sm .orbit-ring-out { inset:8%; }
.orbit-art-sm .orbit-core { padding:12px; border-radius:18px; }
.orbit-art-sm .orbit-item img { width:22px; height:22px; padding:7px; border-radius:13px; }

.how-art-chat { gap:8px; }
.how-bubble { position:relative; flex-direction:column; align-items:flex-start; gap:2px; padding:9px 13px; font-weight:600; }
.how-bubble b { position:absolute; left:-13px; top:9px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgb(13 42 62 / 10%); }
.how-bubble b img { width:15px; height:15px; border-radius:50%; }
.how-bubble b img[src*="maskottchen"] { width:100%; height:100%; }
.how-bubble em { color:#6b7f88; font-size:11px; font-style:normal; font-weight:750; }
.how-bubble:not(.how-bubble-you) { margin-left:20px; }
.how-compose { margin-top:6px; display:flex; align-items:center; justify-content:space-between; padding:9px 10px 9px 14px; border-radius:999px; background:rgb(255 255 255 / 80%); box-shadow:inset 0 0 0 1px rgb(13 42 62 / 8%); color:#9aabb2; font-size:12px; }
.how-compose i { width:26px; height:26px; border-radius:9px; background:#101820; }

.how-art-brain { background:#071d2a; }
.how-shot { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.how-art-brain .how-node { background:rgb(10 33 47 / 86%); box-shadow:inset 0 0 0 1px rgb(188 221 233 / 20%); color:#d4e8ec; }

/* ---------- closing form and footer: a little more air ---------- */
.close-inner .join-form { margin-top:clamp(44px,6vh,72px); }
.foot-brand .btn { margin-top:14px; }
/* Trademark notice above the footer bottom line. */
.foot-marks { max-width:var(--max); margin:clamp(40px,6vh,60px) auto 0; padding:0 var(--gutter); color:#7f99a3; font-size:12px; line-height:1.5; }
.foot-marks + .foot-bottom { margin-top:16px; }