/* SurgeLab core styles: tokens, header, phone menu, sign-in, sections, footer, cookie bar.
   Shared by every page; page-specific styles live in assets/css/pages/. */
:root {
      --bg: #f4f0e9; --paper: #fbf9f5; --card: #fff; --ink: #151412; --body: #3f3a35; --mute: #6e675f;
      --line: #e3ddd3; --or: #f5502b; --or-ink: #d63f1c; --or-text: #b8361a; --or-soft: #fde8e0;
      --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
      --mono: "Geist Mono", ui-monospace, Menlo, monospace;
      --g: clamp(20px, 5vw, 80px);
    }
    * { box-sizing: border-box; }
    html, body { overflow-x: clip; }
    html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
    :focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

    /* header */
    .top { position: fixed; inset: 0 0 auto; z-index: 20; background: linear-gradient(rgba(244,240,233,.9), rgba(244,240,233,0)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: space-between; align-items: center; padding: 22px var(--g); }
    .wm { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
    .wm svg { width: 20px; height: 20px; }
    .top nav { display: flex; gap: 30px; align-items: center; font-size: 14px; color: var(--body); }
    .skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: #fff; padding: 14px 18px; border-radius: 999px; }
    .skip:focus { top: 12px; }
    .cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 560px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(60,40,20,.18); padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; font-size: 14px; color: var(--body); }
    .cookie-bar p { margin: 0; flex: 1 1 260px; }
    .cookie-bar a { text-decoration: underline; }
    .cookie-actions { display: flex; gap: 8px; }
    .cookie-actions button { all: unset; cursor: pointer; padding: 10px 16px; border-radius: 999px; font-weight: 500; border: 1px solid var(--line); }
    .cookie-actions .cookie-yes { background: var(--ink); color: #fff; border-color: var(--ink); }
    .cookie-actions button:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
    .top nav a { white-space: nowrap; }
    .signin { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.65); color: var(--ink); font-weight: 500; font-size: 14px; transition: border-color .3s, box-shadow .3s, background .3s; will-change: transform; }
    .signin:hover, .signin:focus-visible { background: #fff; border-color: rgba(245,80,43,.45); box-shadow: 0 10px 30px rgba(245,80,43,.18); outline: none; }
    .si-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90px circle at var(--x, 50%) var(--y, 50%), rgba(245,80,43,.22), transparent 70%); opacity: 0; transition: opacity .3s; }
    .signin:hover .si-glow { opacity: 1; }
    .si-stairs { width: 16px; height: 16px; flex: none; overflow: visible; }
    .si-dot { fill: var(--or); offset-path: path("M6 78H30V54H54V30H78V6"); offset-distance: 100%; offset-rotate: 0deg; transform: scale(0); transform-box: fill-box; transform-origin: center; }
    .signin:hover .si-dot, .signin:focus-visible .si-dot, .m-signin:hover .si-dot { animation: si-climb .9s cubic-bezier(.5,0,.3,1) forwards; }
    @keyframes si-climb { 0% { offset-distance: 0%; transform: scale(.6); } 20% { offset-distance: 18%; transform: scale(1); } 40% { offset-distance: 40%; } 60% { offset-distance: 62%; } 85%, 100% { offset-distance: 100%; transform: scale(1.35); } }
    .si-roll { display: inline-grid; height: 1.3em; line-height: 1.3em; overflow: hidden; }
    .si-roll span { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.7,0,.2,1), opacity .45s; }
    .si-roll span + span { transform: translateY(110%); opacity: 0; color: var(--or-text); text-align: center; }
    .signin:hover .si-roll span:first-child, .signin:focus-visible .si-roll span:first-child { transform: translateY(-110%); opacity: 0; }
    .signin:hover .si-roll span + span, .signin:focus-visible .si-roll span + span { transform: none; opacity: 1; }
    .si-spark { position: fixed; z-index: 100; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--or); pointer-events: none; }
    @media (prefers-reduced-motion: reduce) { .signin:hover .si-dot { animation: none; offset-distance: 100%; transform: scale(1.2); } .si-roll span { transition: none; } }
    .menu-btn { display: none; }
    .m-menu { display: none; }
    .pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: 15px; }

    /* hero: a pinned scene; scrolling plays the camera move frame by frame */
    .scrolly { position: relative; height: 340vh; background: #efe8de; }
    .scrolly .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
    .scrolly canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    .scrolly .shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244,240,233,.85) 0%, rgba(244,240,233,.45) 36%, rgba(244,240,233,0) 58%); opacity: 0; }
    .beat { position: absolute; left: 0; right: 0; padding: 0 var(--g); pointer-events: none; will-change: opacity, transform; }
    .beat.mid { top: 50%; transform: translateY(-50%); text-align: center; }
    .beat .big { margin: 0 auto; font-weight: 500; font-size: clamp(40px, 5.6vw, 88px); line-height: 1; letter-spacing: -.045em; max-width: 16ch; text-shadow: 0 2px 30px rgba(244,240,233,.7); }
    .hero-copy { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 0 var(--g); max-width: 1180px; opacity: 0; pointer-events: none; }
    .hero-copy .lede, .hero-copy .wl { max-width: 460px; }
    .hero-copy.live { pointer-events: auto; }
    .cue { display: none; }
    .cue i { width: 1px; height: 36px; background: linear-gradient(var(--ink), transparent); animation: cue 1.8s ease-in-out infinite; }
    @keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
    h1 span { display: block; white-space: nowrap; }
    h1 { margin: 0; font-weight: 500; font-size: clamp(48px, 6.4vw, 96px); line-height: .98; letter-spacing: -.045em; }
    .lede { margin: 22px 0 0; max-width: 40ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--body); }
    .wl { margin: 32px 0 0; display: flex; gap: 6px; max-width: 460px; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,.06); border-radius: 999px; padding: 6px; box-shadow: 0 10px 40px rgba(60,40,20,.08); }
    .wl input[type=email] { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; background: transparent; padding: 0 16px; font: 400 16px var(--sans); color: var(--ink); }
    .wl input[type=email]:focus { outline: none; }
    .wl button { border: 0; border-radius: 999px; background: var(--or-ink); color: #fff; font: 500 15px var(--sans); padding: 0 22px; min-height: 48px; cursor: pointer; white-space: nowrap; }
    .wl-msg { margin: 12px 0 0 6px; font-size: 14px; color: var(--body); min-height: 1.2em; }
    .note { margin-top: 10px; margin-left: 6px; }

    section[id] { scroll-margin-top: 72px; }
    section.blk { padding: clamp(80px, 11vw, 160px) var(--g); }
    .eyebrow { margin-bottom: 18px; }
    h2 { margin: 0; font-weight: 500; font-size: clamp(36px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -.04em; max-width: 18ch; }
    .sub { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--body); }

    /* how it works: steps beside a live demo */
    .how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
    .steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
    .steps li { border-bottom: 1px solid var(--line); position: relative; }
    .steps button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 4px; padding: 22px 0; }
    .steps .n { font: 500 13px var(--mono); color: var(--mute); }
    .steps .t { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
    .steps .pm { font-size: 20px; color: var(--mute); text-align: right; }
    .steps .body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
    .steps .body > p { overflow: hidden; margin: 0; padding-left: 38px; color: var(--body); line-height: 1.55; font-size: 16px; max-width: 44ch; }
    .steps li.on .body { grid-template-rows: 1fr; }
    .steps li.on .body > p { padding-bottom: 24px; }
    .steps li.on .n { color: var(--or-text); }
    .steps .bar { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--ink); }
    .steps li.on .bar { animation: fill var(--dur, 6s) linear forwards; }
    @keyframes fill { to { width: 100%; } }

    .stage { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; background: linear-gradient(160deg, #fbf8f3, #efe7dc); border: 1px solid var(--line); overflow: hidden; }
    .scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6%; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; pointer-events: none; }
    .scene.on { opacity: 1; transform: none; }
    .chat { width: min(100%, 520px); background: var(--card); border-radius: 18px; box-shadow: 0 24px 70px rgba(60,40,20,.12); padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
    .chat .hd { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 13px; }
    .chat .hd img { width: 16px; }
    .chat .hd .mono { margin-left: auto; font-size: 10.5px; }
    .q { align-self: flex-end; background: #f3eee6; border-radius: 16px 16px 4px 16px; padding: 10px 14px; max-width: 85%; }
    .a { line-height: 1.55; color: var(--body); }
    .a b { color: var(--ink); font-weight: 600; }
    .rival { background: #f1efec; padding: 1px 6px; border-radius: 6px; }
    .flag { display: flex; gap: 10px; align-items: flex-start; background: var(--or-soft); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: #6b2a17; }
    .flag i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--or); margin-top: 6px; }
    .fix { display: grid; gap: 8px; }
    .fix .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
    .fix s { color: var(--mute); }
    .fix .ok { font: 500 12px var(--mono); color: #1d7a4a; }
    .approve { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 500; }
    .tap { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--or); opacity: 0; }
    .scene.on .tap { animation: tap 2.4s 1.4s ease-out infinite; }
    @keyframes tap { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: .9; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.6); } }
    .monday { width: min(100%, 520px); background: var(--card); border-radius: 18px; box-shadow: 0 24px 70px rgba(60,40,20,.12); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
    .monday h4 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
    .bars { display: grid; gap: 12px; }
    .bars div { display: grid; gap: 6px; font-size: 13.5px; color: var(--body); }
    .bars span.track { height: 10px; border-radius: 99px; background: #f1ece4; overflow: hidden; }
    .bars span.track i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1.2s .3s cubic-bezier(.2,.8,.2,1); }
    .scene.on .bars span.track i { width: var(--w); }
    .orders { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; }
    .orders b { font-size: 22px; letter-spacing: -.02em; }
    .typing::after { content: "|"; animation: blink 1s steps(1) infinite; color: var(--mute); }
    @keyframes blink { 50% { opacity: 0; } }

    /* the team: three cards with live diagrams */
    .team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 72px); }
    .agent { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 420px; }
    .agent svg { width: 100%; height: auto; flex: 1; }
    .agent h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
    .agent p { margin: 0; color: var(--body); line-height: 1.55; font-size: 15px; }
    .agent ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--body); }
    .agent li::before { content: "→ "; color: var(--or); }
    .team-foot { margin-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--body); font-size: 15px; }

    /* statement: words light up as you scroll */
    .say { max-width: 1100px; margin: 0 auto; display: grid; gap: clamp(18px, 3vw, 36px); }
    .say p { margin: 0; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -.045em; font-weight: 500; opacity: .12; transform: translateY(24px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
    .say p:nth-child(2) { padding-left: clamp(0px, 8vw, 140px); }
    .say p:nth-child(3) { padding-left: clamp(0px, 16vw, 280px); }
    .say p.lit { opacity: 1; transform: none; }
    .say p em { font-style: normal; color: var(--or); }


    /* stats: each number has its own interactive picture */
    .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 72px); }
    .stat { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 14px; }
    .viz { height: 260px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 18px; }
    .stat .num { font-size: clamp(56px, 5.6vw, 88px); font-weight: 500; letter-spacing: -.05em; line-height: .9; margin-top: 6px; }
    .stat .num em { font-style: normal; color: var(--or); }
    .stat p { margin: 0; color: var(--body); line-height: 1.55; font-size: 16px; }
    .stat .src { margin-top: auto; font-size: 11px; line-height: 1.5; text-transform: none; letter-spacing: .02em; }
    .seg { display: inline-flex; background: #f1ece4; border-radius: 999px; padding: 3px; position: absolute; top: 12px; left: 12px; z-index: 2; }
    .seg button { all: unset; cursor: pointer; font: 500 12px var(--sans); padding: 6px 12px; border-radius: 999px; color: var(--body); }
    .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
    /* 45%: a crowd of 100 people */
    .crowd { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; width: min(100%, 190px); margin-top: 38px; }
    .crowd i { aspect-ratio: 1; border-radius: 50%; background: #e7e0d5; transform: scale(.7); transition: background .35s, transform .35s cubic-bezier(.34,1.56,.64,1); }
    .crowd i.on { background: var(--or); transform: scale(1); }
    /* +42%: purchases from two kinds of visitor */
    .race { width: 100%; display: grid; gap: 18px; }
    .race .lane { display: grid; gap: 7px; }
    .race .lab { display: flex; justify-content: space-between; font-size: 13px; color: var(--body); }
    .race .lab b { font-variant-numeric: tabular-nums; color: var(--ink); }
    .race .bags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 40px; align-content: flex-start; }
    .race .bags i { width: 11px; height: 13px; border-radius: 2px 2px 3px 3px; background: #cfc6ba; position: relative; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .3s; }
    .race .bags i::before { content: ""; position: absolute; left: 2px; right: 2px; top: -4px; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; color: inherit; }
    .race .ai .bags i { background: var(--or); color: var(--or); }
    .race .bags i { color: #cfc6ba; }
    .race .bags i.on { opacity: 1; transform: none; }
    .replay { all: unset; cursor: pointer; position: absolute; right: 12px; top: 12px; font: 500 12px var(--sans); color: var(--body); padding: 6px 10px; border-radius: 999px; background: #f1ece4; }
    /* 1 in 4: four AI answers, one names you */
    .answers { width: 100%; display: grid; gap: 8px; margin-top: 18px; }
    .ans { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #f6f2ec; font-size: 13.5px; transition: background .35s, transform .35s; }
    .ans .dot { width: 22px; height: 22px; border-radius: 50%; background: #e2dacd; flex: none; display: grid; place-items: center; font: 600 10px var(--mono); color: #8a8278; }
    .ans .who { flex: 1; color: var(--body); }
    .ans .shim { height: 8px; border-radius: 99px; background: #e8e1d6; flex: 1; max-width: 90px; }
    .ans.you { background: var(--or-soft); transform: scale(1.02); }
    .ans.you .dot { background: var(--or); color: #fff; }
    .ans.you .who { color: #6b2a17; font-weight: 600; }
    .ans.flip { animation: flip .45s ease; }
    @keyframes flip { 50% { transform: rotateX(90deg); } }
    /* first-screen waitlist */
    .early { position: absolute; left: 0; right: 0; bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 var(--g); }
    .wl-sm { margin: 0; width: min(100%, 420px); }
    .early .wl-msg { margin: 0; min-height: 0; }

    /* agent cards: flip to an example week */
    .agent { position: relative; overflow: hidden; }
    .agent .peek { all: unset; cursor: pointer; align-self: flex-start; margin-top: auto; font-size: 14px; font-weight: 500; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
    .week { position: absolute; inset: 0; background: var(--ink); color: #fff; padding: 22px; display: flex; flex-direction: column; gap: 10px; transform: translateY(102%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
    .agent.open .week { transform: none; }
    .week .mono { color: #a9a29a; }
    .week ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
    .week li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45; color: #e7e1d8; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
    .week li::before { content: none; }
    .week li b { font: 500 12px var(--mono); color: var(--or); padding-top: 2px; }
    .agent.open .week li { opacity: 1; transform: none; }
    .agent.open .week li:nth-child(2) { transition-delay: .12s; } .agent.open .week li:nth-child(3) { transition-delay: .24s; } .agent.open .week li:nth-child(4) { transition-delay: .36s; }
    .week .close-w { all: unset; cursor: pointer; margin-top: auto; align-self: flex-start; font-size: 14px; border-bottom: 1.5px solid currentColor; }

    /* Lab strip */
    .lab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
    .loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: relative; }
    .loop li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; min-height: 150px; display: flex; flex-direction: column; gap: 8px; transition: border-color .4s, box-shadow .4s, transform .4s; }
    .loop li b { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
    .loop li span { font-size: 14px; color: var(--body); line-height: 1.45; }
    .loop li.now { border-color: var(--or); box-shadow: 0 14px 40px rgba(245,80,43,.14); transform: translateY(-4px); }
    .loop li.now .mono { color: var(--or-text); }

    /* FAQ */
    .faq { max-width: 860px; margin: clamp(32px, 4vw, 56px) auto 0; border-top: 1px solid var(--line); }
    .faq details { border-bottom: 1px solid var(--line); }
    .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 500; letter-spacing: -.015em; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; color: var(--mute); font-weight: 400; transition: transform .3s; }
    .faq details[open] summary::after { transform: rotate(45deg); }
    .faq details p { margin: 0 0 22px; max-width: 62ch; color: var(--body); line-height: 1.6; font-size: 16px; }

    /* globe */
    .why-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
    .globe-box { position: relative; justify-self: end; width: min(100%, 580px); }
    .globe-wrap { position: relative; aspect-ratio: 1; width: 100%; cursor: grab; touch-action: pan-y; }
    .globe-wrap::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -2%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(90,60,30,.18), transparent); z-index: -1; }
    .globe-wrap:active { cursor: grabbing; }
    .globe-wrap canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s; }
    .globe-wrap canvas.on { opacity: 1; }
    .globe-wrap canvas.arcs { position: absolute; inset: 0; pointer-events: none; }
    .ask { position: absolute; left: -6%; bottom: 16%; width: min(330px, 70%); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: 0 22px 60px rgba(60,40,20,.14); transition: opacity .3s, transform .3s; }
    .ask.swap { opacity: 0; transform: translateY(8px); }
    .ask-top { display: flex; justify-content: space-between; gap: 10px; }
    .ask-top .mono { font-size: 10.5px; }
    .ask-top .mono:first-child { color: var(--or-text); }
    .ask-q { margin: 8px 0 10px; font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; min-height: 2.7em; }
    .ask-a { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--body); opacity: 0; transform: translateY(4px); transition: opacity .4s .1s, transform .4s .1s; }
    .ask-a.on { opacity: 1; transform: none; }
    .ask-a b { white-space: nowrap; background: var(--or-ink); color: #fff; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
    .cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
    .cities button { all: unset; cursor: pointer; font: 500 13px var(--sans); padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--body); transition: background .25s, color .25s, border-color .25s; }
    .cities button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

    /* 3D staircase in the closing section */
    .cta.cta-3d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; text-align: left; gap: clamp(24px, 4vw, 64px); }
    .cta-3d .cta-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
    .stair3d { position: relative; height: clamp(340px, 42vw, 560px); cursor: grab; touch-action: pan-y; }
    .stair3d:active { cursor: grabbing; }
    .stair3d.still { background: url(/assets/img/glass-stairs-poster.webp) center / cover no-repeat; border-radius: 24px; cursor: default; }
    .stair3d.still .drag-hint { display: none; }
    .stair3d canvas { width: 100% !important; height: 100% !important; display: block; }
    .drag-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); }

    /* SplitText line masks */
    .split-line { overflow: clip; }

    /* S1 partner */
    .partner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
    .partner .tag { display: inline-flex; align-items: center; gap: 10px; }
    .partner .tag img { height: 22px; width: auto; }
    .logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
    .logos li { background: var(--card); display: flex; align-items: center; justify-content: center; padding: 26px 18px; min-height: 110px; }
    .logos li.lead { grid-column: span 2; }
    .logos img { max-width: 100%; max-height: 46px; width: auto; height: auto; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
    .logos li:hover img { filter: none; opacity: 1; }
    .link-u { display: inline-flex; gap: 8px; margin-top: 26px; font-weight: 500; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

    /* closing call to action */
    .cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
    .cta h2 { max-width: none; }
    .cta .wl { margin: 0; width: 100%; }
    .cta .wl-msg { margin: 0; }

    /* footer, as on the current site: link columns and the giant wordmark */
    .site-footer { position: relative; overflow: hidden; background: var(--paper); border-top: 1px solid var(--line); }
    .site-footer .ft { padding: 56px var(--g) 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 36px; }
    .site-footer .who { font-weight: 600; font-size: 17px; }
    .site-footer nav { display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 72px); }
    .site-footer nav > div { display: flex; flex-direction: column; min-width: 150px; }
    .site-footer nav h2 { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-family: var(--mono); max-width: none; }
    .site-footer nav a { min-height: 38px; display: flex; align-items: center; font-size: 15px; }
    .site-footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
    .site-footer .legal { padding: 0 var(--g); font-size: 13px; color: var(--mute); }
    .site-footer .giant { font-weight: 600; font-size: 22.5vw; line-height: .78; letter-spacing: -.06em; white-space: nowrap; margin: 32px 0 -.06em -.02em; color: var(--ink); pointer-events: none; transform: translateY(var(--gy, 0)); }
    .site-footer .giant b { font-weight: 600; color: var(--or); }



    /* ===== Header menu (tablets and phones, up to 1180px) =====
       The menu is a sheet: full screen on phones, a right-hand panel on tablets. core.js adds the
       .m-actions (Sign in + Join the waitlist) and a .m-scrim if a page's markup lacks them, toggles
       .is-open for the animation, html.menu-open for the scroll lock, and traps focus. */
    @media (max-width: 1180px) {
      .top nav .lnk { display: none; }
      .top nav { gap: 10px; }
      .menu-btn { all: unset; box-sizing: border-box; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 48px; height: 48px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.8); cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
      .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
      .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
      .menu-btn:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
      .top.scrolled { background: rgba(244,240,233,.9); box-shadow: 0 1px 0 var(--line); }
      html.menu-open, html.menu-open body { overflow: hidden; }
      html.menu-open .top { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
      html.menu-open .top nav .signin, html.menu-open .top nav .pill { visibility: hidden; }
      .m-menu:not([hidden]) { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: -1; padding: calc(var(--top-h, 76px) + 8px) var(--g) calc(20px + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-10px); transition: opacity .28s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
      .m-menu.is-open { opacity: 1; transform: none; }
      .m-menu > a, .m-menu .m-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: clamp(22px, 6.6vw, 28px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1), color .2s; }
      .m-menu > a::after, .m-menu .m-links a::after { content: "→"; font-size: 18px; color: var(--mute); transition: transform .25s, color .25s; }
      .m-menu > a:hover::after, .m-menu > a:focus-visible::after { transform: translateX(4px); color: var(--or); }
      .m-menu > a[aria-current="page"], .m-menu .m-links a[aria-current="page"] { color: var(--or-text); }
      .m-menu > a:focus-visible { outline: none; color: var(--or-text); }
      .m-menu.is-open > a, .m-menu.is-open .m-links a { opacity: 1; transform: none; }
      .m-menu.is-open > a:nth-child(2) { transition-delay: .03s; } .m-menu.is-open > a:nth-child(3) { transition-delay: .06s; }
      .m-menu.is-open > a:nth-child(4) { transition-delay: .09s; } .m-menu.is-open > a:nth-child(5) { transition-delay: .12s; }
      .m-menu.is-open > a:nth-child(6) { transition-delay: .15s; } .m-menu.is-open > a:nth-child(n+7) { transition-delay: .18s; }
      .m-actions { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; opacity: 0; transform: translateY(12px); transition: opacity .35s .12s, transform .5s .12s cubic-bezier(.2,.8,.2,1); }
      .m-menu.is-open .m-actions { opacity: 1; transform: none; }
      .m-menu .m-signin, .m-menu .m-join { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 999px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
      .m-menu .m-signin { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
      .m-menu .m-signin .si-stairs { width: 18px; height: 18px; color: var(--ink); }
      .m-menu .m-join { background: var(--or-ink); color: #fff; }
      .m-menu .m-signin:focus-visible, .m-menu .m-join:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
      .m-scrim { display: none; }
      html.menu-open .cookie-bar { visibility: hidden; }
    }
    @media (max-width: 1180px) and (max-height: 700px) {
      .m-menu > a, .m-menu .m-links a { min-height: 52px; font-size: clamp(21px, 6vw, 26px); }
      .m-actions { padding-top: 20px; }
      .m-menu .m-signin, .m-menu .m-join { min-height: 52px; }
    }
    /* Tablets: the menu is a panel on the right with a dimmed page behind it. */
    @media (min-width: 701px) and (max-width: 1180px) {
      .m-menu:not([hidden]) { left: auto; width: min(460px, 100%); padding-left: 36px; padding-right: 36px; border-left: 1px solid var(--line); box-shadow: -30px 0 80px rgba(60,40,20,.12); transform: translateX(32px); }
      .m-menu.is-open { transform: none; }
      .m-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: -2; background: rgba(21,20,18,.32); opacity: 0; transition: opacity .3s; }
      .m-scrim.is-open { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .m-menu, .m-menu > a, .m-menu .m-links a, .m-actions, .m-scrim, .menu-btn span { transition: none !important; }
    }

    @media (max-width: 900px) {
      .top nav .signin { display: none; }
      .scrolly { height: 300vh; }
      .scrolly .shade { background: linear-gradient(180deg, rgba(244,240,233,.92) 0%, rgba(244,240,233,.7) 48%, rgba(244,240,233,0) 72%); }
      .hero-copy { top: 96px; transform: none; }
      h1 { font-size: clamp(42px, 12vw, 64px); }
      .how { grid-template-columns: 1fr; }
      .stage { aspect-ratio: 4 / 4.2; }
      .team { grid-template-columns: 1fr; }
      .agent { min-height: 0; }
      .stats { grid-template-columns: 1fr; }
      .why-top { grid-template-columns: minmax(0, 1fr); }
      .globe-box { justify-self: center; width: 100%; min-width: 0; }
      .ask { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -8%; }
      .cities { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; max-width: 100%; }
      .cities button { flex: none; white-space: nowrap; }
      .cta.cta-3d { grid-template-columns: minmax(0, 1fr); }
      .stair3d { height: min(78vw, 420px); }
      .lab { grid-template-columns: 1fr; }
      .loop { grid-template-columns: 1fr 1fr; }
      .early { bottom: 72px; }
      .partner { grid-template-columns: 1fr; }
      .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .meter i { transition: none; }
      .cue i { animation: none; }
      .steps li.on .bar { animation: none; width: 100%; }
      .scene, .bars span.track i { transition: none; }
      .scene.on .tap { animation: none; }
      .agent svg .flow { display: none; }
    }

    /* =====================================================================
       PHONES AND SMALL TABLETS (≤ 900px): designed for touch, not a squeezed desktop.
       Type ≥ 17px, labels ≥ 12px, taps ≥ 48px, tight section rhythm, no sideways scroll.
       ===================================================================== */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .swipe-dots { display: none; }
    .cookie-bar .ck-s { display: none; }
    @keyframes ck-in { from { opacity: 0; transform: translateY(24px); } }
    @media (prefers-reduced-motion: reduce) { .cookie-bar { animation: none !important; } }
    @media (max-width: 900px) {
      body { font-size: 17px; }
      main p:not([class]), main li:not([class]) { line-height: 1.55; }
      main :is(h1, h2, h3, p, li, a, span) { overflow-wrap: break-word; }
      main img, main video { max-width: 100%; height: auto; }
      .mono { font-size: 12.5px; letter-spacing: .09em; }

      /* header */
      .top { padding: 12px var(--g); min-height: 72px; transition: background .25s, box-shadow .25s; }
      .wm { font-size: 20px; gap: 9px; min-height: 48px; }
      .wm svg { width: 22px; height: 22px; }
      .top nav { gap: 8px; }
      .top .pill { min-height: 48px; padding: 0 18px; font-size: 15px; white-space: nowrap; }

      /* sections and type */
      section.blk { padding: 64px var(--g); }
      section[id] { scroll-margin-top: 80px; }
      .eyebrow { margin-bottom: 14px; }
      h1 { font-size: clamp(40px, 11.6vw, 64px); line-height: 1; letter-spacing: -.045em; }
      h2 { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.06; letter-spacing: -.035em; max-width: 20ch; }
      h3 { font-size: 21px; }
      .sub, .lede { font-size: clamp(18px, 4.8vw, 20px); line-height: 1.5; margin-top: 14px; }
      .link-u { min-height: 48px; align-items: center; margin-top: 18px; border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; font-size: 17px; }
      main .pill { min-height: 52px; padding: 0 24px; font-size: 17px; justify-content: center; }

      /* waitlist form: input above a full-width button */
      .wl { margin-top: 24px; max-width: 520px; }
      .wl input[type=email] { font-size: 17px; }
      .wl button { min-height: 52px; font-size: 16px; }
      .wl-msg { font-size: 15px; }

      /* hero: no pinned scroll on phones. One screen: the film plays once by itself above the
         headline, lede and waitlist form. (index.html's script switches mode at the same width.) */
      .scrolly { height: auto !important; background: var(--bg); }
      .scrolly .pin { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 24px; overflow: hidden; }
      .scrolly canvas { position: relative; inset: auto; width: 100%; height: auto; flex: 1 1 0; min-height: 250px; max-height: 62svh; -webkit-mask-image: linear-gradient(#000 52%, transparent 96%); mask-image: linear-gradient(#000 52%, transparent 96%); }
      .scrolly .shade, .scrolly .cue, .scrolly .early { display: none; }
      .scrolly .beat { position: relative; top: auto; transform: none !important; opacity: 1 !important; text-align: left; padding: 0 var(--g); will-change: auto; }
      .scrolly .beat[data-beat="0"] { margin-top: -72px; }
      .scrolly .beat .big { margin: 0; max-width: 30ch; font-size: clamp(17px, 4.6vw, 22px); line-height: 1.3; letter-spacing: -.02em; text-shadow: none; color: var(--body); }
      .scrolly .beat[data-beat="1"] .big { color: var(--or-text); }
      .hero-copy { position: relative; top: auto; transform: none !important; opacity: 1 !important; pointer-events: auto; margin-top: 14px; max-width: 640px; }
      .hero-copy .lede, .hero-copy .wl { max-width: 520px; }
      .hero-copy .lede { margin-top: 16px; }
      .hero-copy .note { margin: 12px 0 0; }

      /* why now: globe, question card, city chips */
      .why-top { gap: 8px; }
      .globe-box { width: min(100%, 520px); }
      .globe-wrap { width: min(100%, 440px); margin: 0 auto; }
      .ask { margin-top: -12%; padding: 16px 18px; border-radius: 20px; z-index: 1; }
      .ask-top .mono { font-size: 12px; }
      .ask-q { font-size: 18px; line-height: 1.35; margin: 10px 0 12px; }
      .ask-a { font-size: 15.5px; flex-wrap: wrap; }
      .ask-a b { padding: 3px 11px; }
      .cities { gap: 8px; margin: 14px calc(-1 * var(--g)) 0; padding: 2px var(--g) 4px; scroll-padding: 0 var(--g); scroll-snap-type: x proximity; }
      .cities::-webkit-scrollbar { display: none; }
      .cities button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; font-size: 15px; scroll-snap-align: start; }

      /* swipe rows: stats and agent cards sit side by side and snap; the next card peeks in.
         .swipe is the same thing for any other row of cards; add data-swipe for the dots. */
      .stats, .team, .swipe { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); padding: 4px var(--g) 6px; scroll-padding: 0 var(--g); }
      .stats::-webkit-scrollbar, .team::-webkit-scrollbar, .swipe::-webkit-scrollbar { display: none; }
      .stats > *, .team > *, .swipe > * { flex: 0 0 min(86%, 420px); scroll-snap-align: start; scroll-snap-stop: always; }
      .stats { margin-top: 36px; }
      .swipe-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
      .swipe-dots i { width: 7px; height: 7px; border-radius: 99px; background: #d6cec2; transition: width .3s, background .3s; }
      .swipe-dots i.on { width: 22px; background: var(--ink); }

      /* stats */
      .stat { padding: 18px; gap: 12px; border-radius: 22px; }
      .viz { height: auto; min-height: 272px; padding: 76px 16px 18px; }
      .seg { top: 12px; left: 12px; }
      .seg button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; font-size: 14.5px; box-sizing: border-box; }
      .replay { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; font-size: 14.5px; box-sizing: border-box; right: 12px; top: 12px; }
      .crowd { margin-top: 0; width: min(100%, 210px); }
      .answers { margin-top: 0; }
      .ans { font-size: 15px; padding: 10px 12px; }
      .race .lab { font-size: 14.5px; }
      .stat .num { font-size: 64px; margin-top: 4px; }
      .stat p { font-size: 17px; }
      .stat .src { font-size: 12px; letter-spacing: .01em; }

      /* how it works: the demo first (so it never jumps), the steps below it */
      .how { display: flex; flex-direction: column; align-items: stretch; gap: 20px; margin-top: 32px; }
      .stage { order: -1; aspect-ratio: auto; height: 410px; border-radius: 22px; }
      .scene { padding: 14px; }
      .chat, .monday { padding: 18px; gap: 12px; font-size: 16px; border-radius: 18px; }
      .chat .hd { font-size: 14px; }
      .chat .hd .mono, .monday .hd { font-size: 12px; }
      .q { padding: 10px 14px; }
      .flag { font-size: 15px; padding: 12px; }
      .fix .row { font-size: 15px; padding: 12px; }
      .fix .ok { font-size: 12.5px; }
      .approve { font-size: 15px; padding: 12px 18px; }
      .monday h4 { font-size: 19px; }
      .bars div { font-size: 15px; }
      .orders { font-size: 15px; align-items: baseline; }
      .steps button { padding: 16px 0; min-height: 64px; grid-template-columns: 38px 1fr 24px; }
      .steps .n { font-size: 13px; }
      .steps .t { font-size: 22px; }
      .steps .pm { font-size: 24px; }
      .steps .body > p { font-size: 17px; padding-left: 38px; }

      /* your AI team */
      .team { margin-top: 32px; }
      .agent { padding: 20px; gap: 12px; min-height: 0; }
      .agent svg { flex: none; max-height: 190px; }
      .agent h3 { font-size: 22px; }
      .agent p { font-size: 17px; }
      .agent ul { font-size: 16px; gap: 8px; line-height: 1.45; }
      .agent .peek, .week .close-w { display: inline-flex; align-items: center; min-height: 48px; border-bottom: 0; padding: 0; font-size: 16px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
      .agent { min-height: 520px; }
      .week { padding: 20px; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
      .week ol { gap: 12px; }
      .week li { grid-template-columns: 48px 1fr; font-size: 16px; line-height: 1.45; }
      .week li b { font-size: 12.5px; padding-top: 3px; }
      .team-foot { margin-top: 18px; font-size: 16px; line-height: 1.5; }
      .team-foot a { display: inline-block; padding: 6px 0; }

      /* lab (it shares the team's background, so no second gap between them) */
      #team + #lab { padding-top: 12px; }
      .lab { gap: 28px; }
      .loop { gap: 10px; }
      .loop li { padding: 16px 14px; min-height: 0; border-radius: 18px; }
      .loop li b { font-size: 19px; }
      .loop li span { font-size: 15.5px; line-height: 1.45; }
      .loop li .mono { font-size: 12px; }

      /* S1 partner */
      .partner { gap: 28px; }
      .logos li { padding: 18px 14px; min-height: 88px; }
      .logos img { max-height: 40px; }

      /* FAQ: big tap rows */
      .faq { margin-top: 28px; }
      .faq summary { align-items: center; min-height: 68px; padding: 14px 0; font-size: 18.5px; line-height: 1.3; gap: 16px; -webkit-tap-highlight-color: transparent; }
      .faq summary::after { font-size: 28px; line-height: 1; flex: none; width: 28px; text-align: center; }
      .faq details p { font-size: 17px; margin-bottom: 20px; }

      /* closing call to action: the glass staircase leads in, the form follows */
      .cta.cta-3d { gap: 8px; }
      .cta-3d .cta-copy { gap: 0; }
      .cta-3d .cta-copy .sub { margin-top: 14px !important; }
      .cta-3d .cta-copy .wl-msg { margin-top: 10px; }
      .stair3d { order: -1; height: min(64vw, 340px); margin-top: -12px; }
      .stair3d.still { background-size: contain; }

      /* footer */
      .site-footer .ft { flex-direction: column; gap: 28px; padding: 52px var(--g) 8px; }
      .site-footer .who { font-size: 20px; }
      .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; width: 100%; }
      .site-footer nav > div { min-width: 0; }
      .site-footer nav h2 { font-size: 12.5px; margin-bottom: 4px; }
      .site-footer nav a { min-height: 48px; font-size: 17px; line-height: 1.3; padding: 4px 0; }
      .site-footer .legal { font-size: 14px; padding-top: 12px; padding-bottom: 4px; }
      .site-footer .giant { font-size: 21.6vw; margin-top: 28px; }

      /* cookie notice: a compact sheet at the bottom; the hero leaves room for it (--cookie-h). */
      .cookie-bar { animation: ck-in .45s cubic-bezier(.2,.8,.2,1) both; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 14px 16px; border-radius: 20px; gap: 10px; font-size: 14px; line-height: 1.45; box-shadow: 0 18px 50px rgba(60,40,20,.2); }
      .cookie-bar p { flex: 1 1 100%; }
      .cookie-bar .ck-l { display: none; } .cookie-bar .ck-s { display: inline; }
      .cookie-actions { width: 100%; }
      .cookie-actions button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; font-size: 15px; box-sizing: border-box; text-align: center; }
    }

    /* short phone screens: a smaller film window so the form still makes the first screen */
    @media (max-width: 900px) and (max-height: 700px) {
      .scrolly canvas { min-height: 224px; }
      .scrolly .beat[data-beat="0"] { margin-top: -80px; }
    }

    /* small tablets: two columns where there is room */
    @media (min-width: 601px) and (max-width: 900px) {
      .loop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .stage { height: 460px; }
      .cookie-bar { left: 16px; right: 16px; max-width: 600px; }
      .cookie-bar p { flex: 1 1 260px; }
      .cookie-actions { width: auto; }
      .cookie-bar .ck-l { display: inline; } .cookie-bar .ck-s { display: none; }
    }

    /* phones (≤ 600px) */
    @media (max-width: 600px) {
      /* the waitlist form stacks: a big field, then a full-width button */
      .wl { flex-direction: column; gap: 10px; max-width: none; width: 100%; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
      .wl input[type=email] { min-height: 56px; padding: 0 20px; border: 1px solid #d8d0c4; border-radius: 999px; background: #fff; box-shadow: 0 6px 24px rgba(60,40,20,.06); }
      .wl input[type=email]:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(245,80,43,.18); }
      .wl button { width: 100%; min-height: 56px; font-size: 17px; }
      .wl-msg { margin-left: 0; }
      .note { margin-left: 0; }
      .cta .wl { margin-top: 22px; }
      main .pill { display: flex; width: 100%; }
      .top .pill { display: inline-flex; width: auto; }
      /* the cycling AI word gets its own line, so a long name like "Perplexity" never wraps or shrinks much
         (with reduced motion the word stays "AI" and keeps its place in the line) */
      @media (prefers-reduced-motion: no-preference) { .hero-copy h1 > span:last-child > [data-ai-word] { display: flex !important; width: fit-content; } }
      .stage { height: 420px; }
    }
    @media (max-width: 480px) {
      section.blk { padding-top: 56px; padding-bottom: 60px; }
      .site-footer .ft { padding-top: 44px; }
    }
    /* narrow phones: tighter header so the wordmark, Join and menu button always fit */
    @media (max-width: 374px) {
      :root { --g: 16px; }
      .top nav { gap: 6px; }
      .top .pill { padding: 0 14px; font-size: 14px; }
      .wm { font-size: 19px; gap: 8px; }
      .stage { height: 460px; }
      .loop li { padding: 14px 12px; }
      .loop li span { font-size: 15px; }
      .agent { min-height: 548px; }
      .week li { font-size: 15.5px; }
      .week ol { gap: 10px; }
    }

    /* =====================================================================
       MOBILE DIRECTION B (≤ 900px): cinematic and calm. One idea per screen, calm type, more air,
       one dark primary action per screen; orange only as an accent. Desktop (≥ 901px) is untouched:
       everything below is inside a phone query, hidden by default, or only built on demand.
       ===================================================================== */
    /* .ph-only shows on phones only; .dt-only hides on phones. */
    @media (min-width: 901px) { .ph-only { display: none !important; } }
    @media (max-width: 900px) { .dt-only { display: none !important; } }

    /* Join sheet (built by core.js; see "Join sheet" there). Bottom sheet on phones, centred card wider. */
    .j-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
    .j-sheet[hidden] { display: none; }
    .j-scrim { position: absolute; inset: 0; background: rgba(21,20,18,.42); opacity: 0; transition: opacity .35s ease; }
    .j-panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100svh - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-radius: 24px 24px 0 0; padding: 10px 22px calc(28px + env(safe-area-inset-bottom)); box-shadow: 0 -24px 60px rgba(60,40,20,.18); transform: translateY(104%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
    .j-sheet.is-open .j-scrim { opacity: 1; }
    .j-sheet.is-open .j-panel { transform: none; }
    .j-grab { display: block; width: 36px; height: 4px; border-radius: 99px; background: #d9d1c5; margin: 0 auto 16px; }
    .j-x { all: unset; box-sizing: border-box; position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .j-x:focus-visible { outline: 2px solid var(--or); outline-offset: 0; }
    .j-eye { margin: 8px 0 12px; font-size: 11.5px; letter-spacing: .12em; }
    .j-h { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: -.035em; font-weight: 500; max-width: none; }
    .j-sub { margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--body); }
    .j-vh { position: absolute; left: -9999px; }
    .j-panel .wl { margin: 22px 0 0; flex-direction: column; gap: 10px; max-width: none; width: 100%; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .j-panel .wl input[type=email] { min-height: 54px; padding: 0 20px; border: 1px solid #d8d0c4; border-radius: 999px; background: #fff; font-size: 17px; box-shadow: none; }
    .j-panel .wl input[type=email]:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21,20,18,.08); }
    .j-panel .wl button { width: 100%; min-height: 54px; font-size: 16px; background: var(--ink); }
    .j-panel .wl-msg { margin: 12px 0 0; min-height: 1.4em; font-size: 15px; }
    html.sheet-open, html.sheet-open body { overflow: hidden; }
    html.sheet-open .cookie-bar { visibility: hidden; }
    @media (min-width: 901px) {
      .j-sheet { align-items: center; }
      .j-panel { max-width: 460px; border-radius: 24px; padding: 32px; opacity: 0; transform: translateY(16px); transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
      .j-sheet.is-open .j-panel { opacity: 1; }
      .j-grab { display: none; }
    }
    @media (prefers-reduced-motion: reduce) { .j-scrim, .j-panel { transition: none !important; } }

    @media (max-width: 900px) {
      /* calm type and spacing */
      body { font-size: 16.5px; line-height: 1.5; }
      .mono { font-size: 11.5px; letter-spacing: .12em; }
      section.blk { padding: 88px var(--g); }
      .eyebrow { margin-bottom: 16px; }
      h1 { font-size: clamp(44px, 12.8vw, 52px); line-height: 1; letter-spacing: -.045em; }
      h2 { font-size: clamp(32px, 9vw, 36px); line-height: 1.08; letter-spacing: -.035em; }
      .sub, .lede { font-size: 17.5px; line-height: 1.5; margin-top: 16px; }
      .link-u { font-size: 16.5px; }
      main .pill { min-height: 54px; padding: 0 26px; font-size: 16px; font-weight: 500; background: var(--ink); color: #fff; justify-content: center; }
      main .pill.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
      .wl input[type=email] { font-size: 17px; }
      .wl button { min-height: 54px; font-size: 16px; }

      /* header: wordmark, a small dark Join pill and a two-line menu icon. Frosted; a header marked
         data-over-hero stays clear over the hero film until the page scrolls past it. */
      .top { min-height: 60px; padding: 8px var(--g); background: rgba(244,240,233,.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: none; transition: background .3s, box-shadow .3s; }
      .top.scrolled { background: rgba(244,240,233,.86); box-shadow: 0 1px 0 rgba(227,221,211,.8); }
      .top[data-over-hero]:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
      .wm { font-size: 18px; gap: 9px; min-height: 44px; }
      .wm svg { width: 18px; height: 18px; }
      .top nav { gap: 6px; }
      .top .pill { position: relative; display: inline-flex; min-height: 36px; padding: 0 15px; font-size: 14px; font-weight: 500; background: var(--ink); color: #fff; }
      .top .pill::after { content: ""; position: absolute; inset: -4px -3px; }
      .top .pill[href$="#join-end"] { font-size: 0; }
      .top .pill[href$="#join-end"]::before { content: "Join"; content: "Join" / ""; font-size: 14px; }
      .menu-btn { width: 44px; height: 44px; gap: 7px; border: 0; border-radius: 0; background: transparent; margin-right: -10px; }
      .menu-btn span { width: 22px; height: 1.6px; }
      .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.3px) rotate(45deg); }
      .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.3px) rotate(-45deg); }

      /* the full-screen menu, calmer: lighter type, more air, Sign in and Join at the bottom */
      .m-menu:not([hidden]) { padding: calc(var(--top-h, 60px) + 24px) var(--g) calc(24px + env(safe-area-inset-bottom)); }
      .m-menu > a, .m-menu .m-links a { min-height: 58px; padding: 6px 0; font-size: 24px; font-weight: 400; letter-spacing: -.025em; border-bottom-color: rgba(227,221,211,.7); }
      .m-menu > a::after, .m-menu .m-links a::after { content: none; }
      .m-actions { padding-top: 32px; }
      .m-menu .m-signin, .m-menu .m-join { min-height: 54px; font-size: 16px; }
      .m-menu .m-join { background: var(--ink); }

      /* cookie notice: one slim line with two small text buttons */
      .cookie-bar { left: 10px; right: 10px; max-width: 520px; bottom: calc(10px + env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: 4px; padding: 3px 6px 3px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.35; box-shadow: 0 10px 30px rgba(60,40,20,.14); }
      .cookie-bar p { flex: 1 1 auto; min-width: 0; }
      .cookie-bar .ck-l { display: none; }
      .cookie-bar .ck-s { display: inline; }
      .cookie-actions { width: auto; flex: none; gap: 0; }
      .cookie-actions button, .cookie-actions .cookie-yes { flex: none; min-height: 44px; padding: 0 9px; border: 0; background: none; color: var(--mute); font-size: 14px; }
      .cookie-actions .cookie-yes { color: var(--ink); font-weight: 600; }
      html.has-cookie body { padding-bottom: var(--cookie-h, 0px); }

      /* footer: two calm columns of links and a wordmark that fits */
      .site-footer .ft { padding: 48px var(--g) 4px; gap: 0; }
      .site-footer .who { display: none; }
      .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; width: 100%; }
      .site-footer nav > div { display: contents; }
      .site-footer nav h2 { display: none; }
      .site-footer nav a { min-height: 44px; padding: 0; font-size: 15.5px; color: var(--body); }
      .site-footer .legal { font-size: 13px; padding-top: 20px; padding-bottom: 0; }
      .site-footer .giant { font-size: 20.4vw; margin-top: 24px; }

      /* ---------- Homepage (body.home) on phones ---------- */
      /* hero: the glass staircase fills the first screen; the headline sits low on a soft fade */
      .home .scrolly .pin { height: 100svh; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 calc(34px + env(safe-area-inset-bottom)); }
      .home .scrolly canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; -webkit-mask-image: none; mask-image: none; }
      .home .scrolly .shade { display: block; opacity: 1 !important; background: linear-gradient(180deg, rgba(244,240,233,0) 30%, rgba(244,240,233,.84) 56%, var(--bg) 78%); }
      .home .scrolly .beat { display: none; }
      .home .hero-copy { margin: 0; z-index: 1; }
      .home .hero-eye { color: var(--body); margin-bottom: 18px; }
      .home .hero-copy h1 { font-size: clamp(44px, 12.8vw, 52px); }
      .home .hero-copy .lede { margin-top: 16px; max-width: 31ch; font-size: 17.5px; }
      .home .hero-copy .wl, .home .hero-copy .wl-msg, .home .hero-copy .note { display: none; }
      .home .hero-btns { display: flex; gap: 10px; margin-top: 26px; }
      .home .hero-btns .pill { flex: 1 1 auto; width: auto; }
      .home .hero-btns .ghost { flex: 0 0 auto; background: rgba(255,255,255,.78); }

      /* why now: one giant number at a time; then one question card that cycles cities */
      .home #why { display: flex; flex-direction: column; }
      .home .why-top, .home .why-top > div:first-child { display: contents; }
      .home #why .stats { order: 1; margin-top: 4px; gap: 16px; }
      .home #why .stats > * { flex-basis: 88%; }
      .home #why .swipe-dots { order: 2; justify-content: flex-start; margin-top: 30px; }
      .home .stat { background: none; border: 0; border-radius: 0; padding: 0; gap: 0; }
      .home .stat .viz { display: none; }
      .home .stat .num { font-size: clamp(92px, 31vw, 124px); line-height: .92; letter-spacing: -.06em; margin: 0; white-space: nowrap; }
      .home .stat p { margin-top: 18px; font-size: 19px; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); max-width: 25ch; }
      .home .stat .src { margin-top: 18px; font-size: 11.5px; letter-spacing: .04em; }
      .home .globe-box { order: 3; width: auto; margin: 88px calc(-1 * var(--g)) -88px; padding: 88px var(--g); background: var(--paper); }
      .home .globe-wrap, .home .cities { display: none; }
      .home .lang-head h2 { max-width: 13ch; }
      .home .ask { position: relative; left: auto; bottom: auto; z-index: auto; width: 100%; margin-top: 32px; padding: 22px; border: 0; border-radius: 22px; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 30px 60px -30px rgba(60,40,20,.28); cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .home .ask-top .mono { font-size: 11.5px; }
      .home .ask-q { margin: 14px 0 18px; min-height: 3.9em; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
      .home .ask-a { font-size: 15px; }
      .home .ask-hint { margin: 16px 0 0; }

      /* how it works: three tidy rows */
      .home .how { display: block; margin-top: 32px; }
      .home .stage, .home .steps .pm, .home .steps .body, .home .steps .bar { display: none; }
      .home .steps button { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "n t" ". l"; align-items: baseline; gap: 6px 0; min-height: 0; padding: 22px 0; cursor: default; pointer-events: none; }
      .home .steps .n, .home .steps li.on .n { grid-area: n; font-size: 12px; color: var(--mute); }
      .home .steps .t { grid-area: t; font-size: 26px; letter-spacing: -.03em; }
      .home .steps .ph-l { grid-area: l; font-size: 16px; line-height: 1.5; color: var(--body); }

      /* your AI team: three tidy rows; a tap opens the example week below the row */
      .home .team { display: grid; gap: 12px; overflow: visible; margin: 32px 0 0; padding: 0; scroll-snap-type: none; }
      .home .team > * { flex: none; }
      .home .team + .swipe-dots, .home .team-foot { display: none; }
      .home .agent { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; grid-template-areas: "ico name ." "ico line ." "week week week"; column-gap: 14px; row-gap: 0; align-items: center; min-height: 0; padding: 18px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(60,40,20,.04); overflow: hidden; }
      .home .ag-ico { grid-area: ico; width: 44px; height: 44px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; color: var(--ink); }
      .home .ag-ico svg { width: 20px; height: 20px; flex: none; max-height: none; }
      .home .agent > .mono { grid-area: name; align-self: end; font: 500 17px/1.3 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
      .home .agent h3 { grid-area: line; align-self: start; margin-top: 2px; font-size: 14.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--mute); }
      .home .agent > svg, .home .agent ul, .home .week .close-w { display: none; }
      .home .agent .peek { position: absolute; left: 0; right: 0; top: 0; height: 80px; min-height: 0; margin: 0; padding: 0; display: block; font-size: 0; color: transparent; border: 0; border-radius: 18px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
      .home .agent .peek::after { content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--mute); border-bottom: 1.6px solid var(--mute); transform: translate(0, -50%) rotate(-45deg); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
      .home .agent.open .peek::after { transform: translate(0, -70%) rotate(45deg); }
      .home .week { position: static; grid-area: week; display: none; transform: none; transition: none; margin-top: 16px; padding: 16px; gap: 8px; overflow: visible; border-radius: 14px; background: var(--bg); color: var(--ink); }
      .home .agent.open .week { display: flex; animation: wk-in .4s cubic-bezier(.2,.8,.2,1) both; }
      .home .week .mono { color: var(--mute); }
      .home .week li { grid-template-columns: 44px minmax(0, 1fr); font-size: 15px; color: var(--body); }
      .home .week li b { font-size: 11.5px; color: var(--or-text); }
      .home .team-note { margin-top: 22px; font-size: 15.5px; max-width: 34ch; }

      /* lab: one headline, its lines and the link */
      .home .loop { display: none; }
      .home #team + #lab { padding-top: 40px; }

      /* S1 digital: a dark band, four client logos in white, one white button */
      .home #partner { background: var(--ink); color: #fff; }
      .home .partner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
      .home .partner > div { display: contents; }
      .home #partner .mono { color: #8f887e; }
      .home #partner .sub { color: #b9b2a8; }
      .home #partner p.mono { margin: 40px 0 20px !important; }
      .home #partner .logos { order: 1; grid-template-columns: 1fr 1fr; gap: 28px 20px; background: none; border: 0; border-radius: 0; overflow: visible; }
      .home #partner .logos li { min-height: 40px; padding: 0; justify-content: flex-start; background: none; }
      .home #partner .logos li.lead { grid-column: auto; }
      .home #partner .logos li:nth-child(4), .home #partner .logos li:nth-child(6), .home #partner .logos li:nth-child(7) { display: none; }
      .home #partner .logos img, .home #partner .logos li:hover img { max-width: 128px; max-height: 30px; filter: grayscale(1) invert(1) brightness(1.7); opacity: .82; }
      .home #partner .link-u { order: 2; display: flex; justify-content: center; align-items: center; min-height: 54px; margin-top: 40px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 16px; }
      .home #partner .link-u span { display: none; }

      /* FAQ: plain rows */
      .home #faq .eyebrow, .home #faq h2 { text-align: left !important; margin-left: 0 !important; }
      .home .faq summary { min-height: 64px; font-size: 17px; font-weight: 400; letter-spacing: -.01em; }
      .home .faq summary::after { font-size: 22px; width: 22px; }

      /* closing: centred, the price, the form; the 3D staircase stays on wide screens */
      .home .cta.cta-3d { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 104px; background: var(--paper); }
      .home .cta-3d .cta-copy { align-items: center; width: 100%; }
      .home .stair3d { display: none; }
      .home .cta-3d h2 { margin: 0 auto; max-width: 11ch; font-size: clamp(36px, 10.4vw, 42px); }
      .home .cta-3d .cta-copy .sub { margin-top: 14px !important; }
      .home .cta-3d .wl { margin-top: 28px; }
      .home .cta-3d .wl-msg { text-align: center; }
    }
    @keyframes wk-in { from { opacity: 0; transform: translateY(-6px); } }
    /* the cycling AI word gets its own line on phones (with reduced motion the word stays "AI" in line) */
    @media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .hero-copy h1 > span:last-child > [data-ai-word] { display: flex !important; width: fit-content; } }
    @media (max-width: 374px) {
      .home .hero-btns { gap: 8px; }
      .home .hero-btns .pill { padding: 0 16px; font-size: 15.5px; }
      .top .pill { padding: 0 13px; }
    }
    @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .home .agent.open .week { animation: none; } }