/* base tokens and reset, folded in from scrollcraft.css 2026-09-15 */
/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-track-normal: -0.005em;
  --sc-leading-body: 1.62;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */--sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;--sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;--sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */

  /* --- radius. Pick one scale for the page and hold it. ------------------- */--sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */--sc-d-base: 240ms;  --sc-d-slow: 420ms;--sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* harrowtech.ai · layered scroll site · page styles
   Tokens override scrollcraft.css. The engine is untouched. */

@font-face { font-family: "Geist"; src: url("fonts/geist-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --sc-canvas:      #06070a;
  --sc-surface:     #0e1014;
  --sc-ink:         #f2f3f5;
  --sc-ink-soft:    #a4a9b4;
  --sc-accent:      #d6dde8;
  --sc-accent-ink:  #0d1118;
  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 222 40% 2%;

  --ink-2: rgba(242, 243, 245, .64);
  --ink-3: rgba(242, 243, 245, .40);
  --line:   rgba(242, 243, 245, .08);
  --line-2: rgba(242, 243, 245, .14);
  --container: 1080px;
  --nav-h: 60px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: auto; }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }

.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }

/* ---------- reveal on enter (bespoke, mirrors the reference's timing) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- chrome ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; pointer-events: none; }
.progress__bar { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(214,222,236,.7), var(--sc-accent) 60%, #ffffff); will-change: transform; }
.progress__head { position: absolute; top: -3px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 6px 2px rgba(214,222,236,.6); opacity: 0; transition: opacity .3s var(--ease); will-change: transform; }
.progress.is-on .progress__head { opacity: 1; }

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.nav.is-scrolled { background: rgba(6,7,10,.86); box-shadow: 0 1px 0 var(--line); }
.nav__inner { width: min(1360px, 100% - 40px); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.brand__mark { width: 26px; height: 26px; border-radius: 7px; background: var(--sc-accent); color: var(--sc-accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.brand span b { color: var(--sc-accent); font-weight: 600; }
.nav__links { display: flex; gap: 28px; margin-left: 48px; font-size: 15px; color: var(--ink-2); }
.nav__links a { transition: color .16s var(--ease); }
.nav__links a:hover { color: var(--sc-ink); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; color: var(--ink-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--sc-r-pill); font-size: 15px; font-weight: 500; white-space: nowrap; transition: transform .14s var(--ease), background .16s var(--ease), color .16s var(--ease); }
.btn:active { transform: scale(.97); }
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: 0 10px 30px -12px rgba(214,222,236,.35); }
.btn--accent:hover { background: #ffffff; }
.btn--ghost { border: 1px solid var(--line-2); color: var(--sc-ink); }
.btn--ghost:hover { border-color: rgba(242,243,245,.3); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }

.chip { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 13px; border-radius: var(--sc-r-pill); border: 1px solid var(--line-2); font-family: var(--sc-font-mono); font-size: 12.5px; color: var(--ink-2); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 3px rgba(214,222,236,.18); }

/* ---------- hero: the film is the whole hero ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero { position: relative; padding-top: var(--nav-h); background: var(--sc-canvas); overflow: clip; }

.device { padding: 7px 7px 0; border-radius: 22px 22px 0 0; background: rgba(28,29,34,.92); box-shadow: 0 -1px 0 rgba(255,255,255,.09) inset, 0 40px 120px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04); }
.device::before { content: ''; position: absolute; top: 3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #0c0d11; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.screen { position: relative; height: 640px; border-radius: 15px 15px 0 0; overflow: clip; background: #0a0b0f; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ---------- phone ---------- */
@media (max-width: 899px) {
  .nav__links { display: none; }
}
}

/* ---------- section furniture ---------- */
.section-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.section-head .chip { margin-bottom: 22px; }
.section-head__p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 500; text-wrap: balance; }
.h2 .h2__a, .h2 .h2__b { display: block; }
.h2--single .h2__a { display: inline; }
[data-type] .ch { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(4px); transition: opacity .6s var(--ease), filter .8s var(--ease), transform .8s var(--ease); }
[data-type].is-typed .ch { opacity: 1; filter: blur(0); transform: none; }
[data-type] .w { display: inline-block; white-space: nowrap; }

/* ---------- 2 · intro ---------- */
.intro { padding: 60px 0; background: var(--sc-canvas); }
.intro__inner { width: min(880px, 100% - 48px); margin-inline: auto; text-align: center; }
.intro .chip { display: flex; width: fit-content; margin: 0 0 40px; }
.intro .container { margin-top: 176px; }
.intro__p { margin: 0 0 34px; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 400; color: var(--sc-ink); text-wrap: pretty; }
[data-intro] { opacity: .6; will-change: opacity; }
[data-intro] { color: var(--sc-ink); }
.deck__p[data-intro] { color: var(--sc-ink); }
.intro__p:last-child { margin-bottom: 0; }

.proof-ribbon { position: relative; margin: 56px 0 0; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-ribbon__rail { display: flex; width: max-content; animation: proofScroll 23.4s linear infinite; }
.proof-ribbon:hover .proof-ribbon__rail, .proof-ribbon:focus-within .proof-ribbon__rail { animation-play-state: paused; }
.proof-ribbon__track { display: flex; align-items: stretch; flex: none; gap: 16px; padding: 18px 8px; }
.proof-ribbon__item { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; width: 364px; flex: none; padding: 14px 24px; border-radius: var(--sc-r-lg); border: 1px solid var(--line-2); background: var(--sc-canvas); box-shadow: var(--sc-edge); opacity: .42; transition: opacity .5s var(--ease); }
.proof-ribbon__quote { margin: 0; font-size: 16px; line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.proof-ribbon__meta { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; line-height: 1.7; font-family: var(--sc-font-mono); font-size: 12.5px; }
.proof-ribbon__meta b { color: var(--sc-ink); font-weight: 500; }
.proof-ribbon__meta a { text-decoration: underline; text-underline-offset: 2px; }
.proof-ribbon__stars { font-size: 37.5px; color: #d4af37; letter-spacing: 1px; line-height: 1; }
@keyframes proofScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 3 · stage ---------- */
.features { padding: 60px 0; }
.tabs { display: flex; gap: 6px; padding: 5px; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: var(--sc-r-pill); background: var(--sc-surface); margin-bottom: 22px; overflow-x: auto; }
.tab { height: 38px; padding: 0 18px; border: 0; border-radius: var(--sc-r-pill); background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .16s var(--ease), color .16s var(--ease); }
.tab:hover { color: var(--sc-ink); }
.tab.is-active { background: var(--sc-accent); color: var(--sc-accent-ink); }
.stage { position: relative; height: 620px; border-radius: 28px; overflow: clip; border: 1px solid var(--line); background: var(--sc-surface); box-shadow: var(--sc-e3); }
.stage__bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; opacity: .9; will-change: transform; }
.stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,10,.15), rgba(6,7,10,.55)); }
.stage__slides { position: absolute; inset: 0; }
.stage__slide { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 48px; opacity: 0; transform: scale(.97); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.stage__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.stage__slide img, .stage__slide video { width: 100%; max-width: 980px; height: auto; border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); }
.stage__slide--tall img { width: auto; max-height: 524px; max-width: 420px; }
.stage-bar { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.stage-bar__caption { flex: 1; text-align: center; font-size: 14px; color: var(--ink-2); }
.stage-bar__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; cursor: pointer; position: relative; transition: border-color .16s var(--ease); }
.stage-bar__btn:hover { border-color: rgba(242,243,245,.35); }
.stage-bar__btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-left: 1.5px solid var(--sc-ink); border-bottom: 1.5px solid var(--sc-ink); transform: translate(-30%, -50%) rotate(45deg); }
.stage-bar__btn--next::before { transform: translate(-70%, -50%) rotate(-135deg); }

/* ---------- 4 · stacked decks ---------- */
.get { padding: 60px 0; }
.stack { margin-top: 20px; }
.deck { position: sticky; top: 120px; display: grid; grid-template-columns: 1fr 1fr; height: 628px; margin-bottom: 48px; border-radius: 28px; overflow: clip; background: #0b0c10; border: 1px solid var(--line); box-shadow: 0 0 0 6px rgba(255,255,255,.02), 0 50px 100px -50px rgba(0,0,0,.9); transform-origin: 50% 0; will-change: transform, filter; }
.deck--flip .deck__copy { order: 2; }
.deck__copy { padding: 56px 48px; display: flex; flex-direction: column; }
.deck__label { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 13px; border-radius: var(--sc-r-pill); border: 1px solid var(--line-2); font-family: var(--sc-font-mono); font-size: 13px; color: var(--ink-2); width: fit-content; }
.deck__title { margin: 64px 0 0; font-size: 32px; line-height: 40px; letter-spacing: -.03em; font-weight: 500; max-width: 14ch; }
.deck__p { margin: 30px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.deck__p + .deck__p { margin-top: 16px; }
.deck__media { position: relative; margin: 8px; border-radius: 22px; overflow: clip; background: #0f1012; }
.deck__bg { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; opacity: .85; }
.deck__media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,10,.15), rgba(6,7,10,.5)); }

/* ---------- 5 · plans ---------- */
.plans { padding: 60px 0; }
.plans .chip { margin-bottom: 22px; }
.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; align-items: start; }
.plan { padding: 30px 28px 20px; border-radius: 24px; border: 1px solid var(--line); background: var(--sc-surface); box-shadow: var(--sc-edge); }
.plan__label { font-family: var(--sc-font-mono); font-size: 13px; color: var(--ink-2); }
.plan__price { margin-top: 16px; font-size: 30px; letter-spacing: -.03em; font-weight: 500; }
.plan__price span { font-size: 15px; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.plan__blurb { margin: 12px 0 22px; min-height: 45px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.plan .btn { width: 100%; }
.plan__rows { list-style: none; margin: 26px 0 0; padding: 0; }
.plan__rows li { display: flex; gap: 12px; padding: 11px 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); border-top: 1px solid var(--line); }
.plan__rows i { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; }
.plan__rows i::after { content: ''; position: absolute; left: 4px; top: 3px; width: 3px; height: 6px; border-right: 1.5px solid var(--sc-accent); border-bottom: 1.5px solid var(--sc-accent); transform: rotate(45deg); }
.plans__note { margin: 36px auto 0; max-width: 70ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-align: center; }

/* ---------- 6 · faq ---------- */
.faq { padding: 60px 0; }
.faq__grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.faq__side { position: sticky; top: 100px; }
.faq__tabs { display: flex; flex-direction: column; gap: 4px; }
.faq__tabs button { text-align: left; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease); }
.faq__tabs button:hover { color: var(--sc-ink); }
.faq__tabs button.is-active { background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-edge); }
.faq__card { margin-top: 28px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--sc-surface); }
.faq__card h3 { margin: 0; font-size: 16px; font-weight: 500; }
.faq__card p { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.faq__card a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-3); }
.faq__set { display: none; }
.faq__set.is-active { display: block; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 4px; font-size: 17px; font-weight: 500; }
.qa summary::-webkit-details-marker { display: none; }
.qa__chev { flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s var(--ease); margin-right: 6px; }
.qa[open] .qa__chev { transform: rotate(-135deg); }
.qa__a { padding: 0 4px 22px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

/* ---------- 8 · close ---------- */
.cta { position: relative; padding: 140px 0 260px; overflow: clip; background: linear-gradient(180deg, var(--sc-canvas) 0%, #0d1424 55%, #22305a 100%); }
.cta__inner { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: 40px; align-items: start; }
.cta__copy .h2 { margin-top: 0; }
.cta__copy p { margin: 26px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 36ch; }
.cta__copy .cta__small { font-size: 14px; color: var(--ink-2); }
.cta__device { position: relative; }
.device--cta { padding: 7px; border-radius: 22px; }
.screen--cta { height: auto; min-height: 520px; border-radius: 15px; padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 20px; background: #0a0b0f; }
.form__head { display: flex; align-items: center; gap: 7px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.form__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(242,243,245,.14); }
.form__title { margin-left: 12px; font-size: 14px; color: var(--ink-2); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea { font: inherit; font-size: 15px; color: var(--sc-ink); background: var(--sc-surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; transition: border-color .16s var(--ease); }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sc-accent); }
.form__foot { display: flex; justify-content: flex-end; }
.form__note { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); text-align: right; }
.form__note a { color: var(--ink-2); text-decoration: underline; }
.honeypot { position: absolute; left: -9999px; }
.cta__dunes { position: absolute; z-index: 1; left: 0; right: 0; bottom: -20px; width: 100%; height: 560px; object-fit: cover; object-position: 50% 30%; opacity: .7; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%); will-change: transform; }
.cta__layer { position: absolute; left: 50%; width: max(1440px, 100%); transform: translateX(-50%); pointer-events: none; will-change: transform; max-width: none; }
.cta__layer--front { z-index: 3; bottom: -250px; }
.cta::after { content: ''; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(6,7,10,0), var(--sc-canvas)); pointer-events: none; }

/* ---------- 9 · footer ---------- */
.footer { position: relative; z-index: 5; background: var(--sc-canvas); border-top: 1px solid var(--line); padding: 64px 0 36px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: 32px; }
.footer__brand p { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 32ch; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-2); }
.footer__col h3 { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--sc-ink); }
.footer__col a:hover { color: var(--sc-ink); }
.footer__base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }

/* ---------- mobile nav ---------- */
.burger { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--sc-ink); }
.burger::before { top: 15px; } .burger::after { bottom: 15px; }
.nav__sheet { position: fixed; z-index: 59; top: var(--nav-h); left: 0; right: 0; padding: 16px 24px 24px; background: rgba(6,7,10,.96); border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 4px; }
.nav__sheet.is-open { display: flex; }
.nav__sheet a { padding: 12px 4px; font-size: 17px; border-bottom: 1px solid var(--line); }
.nav__sheet a:last-child { border: 0; }

@media (prefers-reduced-motion: reduce) {
  .stage__bg, .cta__dunes { transform: none !important; }
  .cta__layer { transform: translateX(-50%) !important; }
  .deck { transform: none !important; filter: none !important; }
  [data-type] .ch { opacity: 1; filter: none; transform: none; transition: none; }
  [data-intro] { opacity: 1 !important; }
  .stage__slide { transition: none; }
  .proof-ribbon { overflow-x: auto; }
  .proof-ribbon__rail { animation: none; width: auto; }
  .proof-ribbon__track[aria-hidden] { display: none; }
}

@media (max-width: 1100px) {
  .deck__title { font-size: 28px; line-height: 34px; }
  .plans__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  .burger { display: block; }
  .nav__right { display: none; }
  .section-head { grid-template-columns: 1fr; gap: 27px; margin-bottom: 28px; }
  .intro { padding: 36px 0; }
  .intro .container { margin-top: 112px; }
  .intro__p { font-size: 1.35rem; margin-bottom: 26px; }
  .features { padding: 36px 0; }
  .stage { height: 420px; }
  .stage__slide { padding: 22px; }
  .stage__slide--tall img { max-width: 260px; max-height: 376px; }
  .get { padding: 36px 0; }
  .deck { position: sticky; top: 76px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100svh - 96px); margin-bottom: 20px; }
  .deck--flip .deck__copy { order: 0; }
  .deck__copy { padding: 26px 24px; }
  .deck__title { margin-top: 24px; font-size: 26px; line-height: 32px; }
  .deck__p { margin-top: 14px; font-size: 15px; }
  .deck__media { height: 320px; }
  .plans { padding: 36px 0; }
  .faq { padding: 36px 0; }
  .faq__grid { grid-template-columns: 1fr; gap: 28px; }
  .faq__side { position: static; }
  .faq__tabs { flex-direction: row; overflow-x: auto; }
  .faq__card { display: none; }
  .cta { padding: 94px 0 174px; }
  .cta__inner { grid-template-columns: 1fr; }
  .screen--cta { padding: 20px 18px 22px; min-height: 0; }
  .form__grid { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }
  .cta__layer { width: 1100px; }
  .cta__layer--front { bottom: -120px; }
  .footer { padding: 43px 0 24px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---------- services stack ---------- */
.deck--svc { --svc-h: clamp(468px, calc(100vh - 160px), 576px); height: var(--svc-h); margin-bottom: max(180px, calc(100vh - 700px)); }
.deck--svc:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .deck--svc { top: calc((100vh - 60px - var(--svc-h)) / 2 + 60px); } }
.deck--svc .deck__title { margin-top: 44px; }

/* tile copy scales with the tile, so nothing is ever clipped (2026-09-11).
   100cqh = the card's own height. Numbers are the 576px design sizes as a share of 576. */
@media (min-width: 900px) {
  .deck--svc { container-type: size; }
  .deck--svc .deck__label { height: clamp(26px, 5.21cqh, 30px); font-size: clamp(11.5px, 2.26cqh, 13px); }
  .deck--svc .deck__title { margin-top: clamp(14px, calc(12.5cqh - 28px), 44px); font-size: clamp(27px, 5.56cqh, 32px); line-height: clamp(33px, 6.94cqh, 40px); }
  .deck--svc .deck__p { margin-top: clamp(10px, calc(8.7cqh - 20px), 30px); font-size: clamp(14.5px, 2.78cqh, 16px); }
  .deck--svc .deck__p + .deck__p { margin-top: clamp(7px, calc(4.6cqh - 10.5px), 16px); }
}
@media (max-width: 899px) {
  .deck--svc { height: auto; grid-template-rows: auto auto; margin-bottom: 20px; }
  .deck--svc .deck__title { margin-top: 24px; }
  .deck--svc .deck__media { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
}


/* skip link: invisible until a keyboard tabs to it, then it sits over the nav */
.skip { position: fixed; z-index: 80; top: 0; left: 20px; transform: translateY(-110%); padding: 12px 20px; border-radius: 0 0 12px 12px; background: var(--sc-accent); color: var(--sc-accent-ink); font-size: 15px; font-weight: 500; transition: transform .18s var(--ease); }
.skip:focus-visible { transform: translateY(0); }
main:focus { outline: none; }

/* WCAG 2.2 target size: these links measured 23px, one short of the 24px minimum */
.footer__col a { line-height: 24px; }
.faq__card a { display: inline-block; line-height: 24px; }

/* service tiles: full photo, price as a corner plate (2026-09-04) */
.deck--svc .deck__bg { opacity: 1; inset: 0; height: 100%; }
.deck--svc .deck__media::before { background: linear-gradient(180deg, rgba(6,7,10,.05) 40%, rgba(6,7,10,.55) 100%); }

/* pricing cards: same size, no raised card, light sweep on hover (2026-09-04) */
.plans__grid { align-items: stretch; }
.plan { position: relative; overflow: clip; display: flex; flex-direction: column; background: var(--sc-surface); border-color: var(--line); transform: none; box-shadow: var(--sc-edge); transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); }
.plan--raised { background: var(--sc-surface); border-color: var(--line); transform: none; box-shadow: var(--sc-edge); }
.plan__rows { margin-top: 0; padding-top: 26px; }
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-4px); border-color: rgba(242,243,245,.22); box-shadow: var(--sc-e3), var(--sc-edge), 0 0 0 1px rgba(214,222,236,.06); }
}
@media (prefers-reduced-motion: reduce) {
  .plan { transition: none; }
  .plan:hover { transform: none; }
}

/* stage arrows: on the sides of the picture, halfway up (2026-09-04, his call) */
.stage-bar { justify-content: center; }
.stage-bar__btn { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; background: rgba(6,7,10,.62); border-color: rgba(242,243,245,.22); box-shadow: 0 8px 24px -8px rgba(0,0,0,.7); }
.stage-bar__btn:hover { background: rgba(6,7,10,.85); border-color: rgba(242,243,245,.45); }
.stage-bar__btn:not(.stage-bar__btn--next) { left: 18px; }
.stage-bar__btn--next { right: 18px; }
@media (max-width: 899px) {
  .stage-bar__btn { width: 40px; height: 40px; margin-top: -20px; }
  .stage-bar__btn:not(.stage-bar__btn--next) { left: 10px; }
  .stage-bar__btn--next { right: 10px; }
}

/* stage is now one stitched video: wide on desktop, tall on phones (2026-10-07) */
.stage--video { height: auto; aspect-ratio: 1080 / 620; background: #06070a; }
.stage--video::before { display: none; }
.stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; cursor: pointer; display: block; }
@media (max-width: 700px) { .stage--video { aspect-ratio: 540 / 675; } }
.tabs--labels .tab { cursor: default; display: inline-flex; align-items: center; pointer-events: none; }
.tabs--labels .tab:hover { color: var(--ink-2); }
.tabs--labels .tab.is-active:hover { color: var(--sc-accent-ink); }
/* phones: the four names do not fit in a row, so show one at a time and fade between them (2026-10-07) */
@media (max-width: 700px) {
  .tabs--labels { display: grid; justify-items: center; width: fit-content; margin-inline: auto; }
  .tabs--labels .tab { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
  .tabs--labels .tab.is-active { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { .tabs--labels .tab { transition: none !important; } }


/* ---------- hero film (wide cut; phones get the same wide film until the tall cut exists) ---------- */
.hero__film { position: relative; z-index: 3; width: 100%; }
.hero__film::after { content: ''; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(6,7,10,0), var(--sc-canvas) 92%); pointer-events: none; }
.film__stage.stage--video { width: min(100%, calc((100svh - var(--nav-h)) * 1080 / 620)); max-width: none; max-height: none; aspect-ratio: 1080 / 620; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.film__cta { position: absolute; z-index: 5; left: 50%; bottom: 11%; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.film__stage.is-end .film__cta { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
@media (max-width: 700px) and (orientation: portrait) { .film__stage.stage--video { width: 100%; aspect-ratio: 540 / 675; -webkit-mask-image: none; mask-image: none; } .film__cta { font-size: 13px; padding: 0 14px; height: 38px; bottom: 8%; } .hero__film::after { height: 40px; } }
@media (prefers-reduced-motion: reduce) { .film__cta { transition: none; } }

/* ---------- Work video: labels on the left, video as big as the screen height allows, never taller than the screen (wide screens only) ---------- */
@media (min-width: 701px) {
  .work-stage { position: relative; left: 50%; transform: translateX(-50%); width: calc(100vw - 48px); max-width: 1920px; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 20px; }
  .work-stage .tabs--labels { flex-direction: column; width: max-content; margin: 0; gap: 4px; border-radius: 24px; overflow: visible; }
  .work-stage .tabs--labels .tab { justify-content: flex-start; }
  .features .work-stage .stage.stage--video { width: min(calc(100vw - 48px - 190px), calc((100svh - var(--nav-h) - 24px) * 1080 / 620), 1750px); margin: 0; }
}

/* ---------- Work labels now carry a one-line explanation each ---------- */
.tabs--labels .tab { height: auto; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px 16px; border-radius: 18px; white-space: normal; text-align: left; }
.tabs--labels .tab__name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.tabs--labels .tab__line { font-size: 12.5px; line-height: 1.4; opacity: .72; }
.tabs--labels .tab.is-active .tab__line { opacity: .85; }
@media (min-width: 701px) {
  .work-stage .tabs--labels { width: 280px; max-width: 280px; border-radius: 24px; }
  .features .work-stage .stage.stage--video { width: min(calc(100vw - 48px - 320px), calc((100svh - var(--nav-h) - 24px) * 1080 / 620), 1750px); }
}
@media (max-width: 700px) {
  .tabs--labels { width: min(100%, 340px); }
  .tabs--labels .tab { border-radius: 18px; }
}

/* ---------- Work labels: plain rounded rectangles (no pill shapes) ---------- */
.tabs--labels { border-radius: 16px; }
.tabs--labels .tab { border-radius: 12px; }
.work-stage .tabs--labels { border-radius: 16px; }
@media (max-width: 700px) { .tabs--labels { border-radius: 16px; } .tabs--labels .tab { border-radius: 12px; } }

/* ---------- Full screen button on both videos: a small square icon ---------- */
.vid__full { position: absolute; z-index: 6; right: 12px; bottom: 12px; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 10px; border: 1px solid rgba(242,243,245,.2); background: rgba(6,7,10,.4); color: var(--sc-ink); opacity: .75; cursor: pointer; backdrop-filter: blur(6px); transition: opacity .16s var(--ease), background .16s var(--ease); }
.vid__full:hover, .vid__full:focus-visible { opacity: 1; background: rgba(6,7,10,.7); }
.vid__full .ico-out { display: none; }
.stage:fullscreen .vid__full .ico-in, .stage:-webkit-full-screen .vid__full .ico-in { display: none; }
.stage:fullscreen .vid__full .ico-out, .stage:-webkit-full-screen .vid__full .ico-out { display: block; }
@media (max-width: 700px) { .vid__full { width: 28px; height: 28px; right: 8px; bottom: 8px; border-radius: 8px; } }
.stage:fullscreen, .stage:-webkit-full-screen { width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; background: #000 !important; -webkit-mask-image: none !important; mask-image: none !important; }
.stage:fullscreen .stage__video, .stage:-webkit-full-screen .stage__video { object-fit: contain; }

/* ---------- phone turned sideways: the video fills the screen ---------- */
.vid__close { display: none; position: absolute; z-index: 7; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(242,243,245,.28); background: rgba(6,7,10,.62); color: var(--sc-ink); font: 400 26px/1 inherit; font-family: inherit; cursor: pointer; backdrop-filter: blur(8px); }
.stage.is-filled { position: fixed !important; inset: 0 !important; z-index: 100; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #000 !important; transform: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
.stage.is-filled .stage__video { object-fit: contain; }
.stage.is-filled .vid__close { display: block; }
.has-filled { z-index: 100 !important; transform: none !important; left: 0 !important; }
.is-filling, .is-filling body { overflow: hidden; }
.is-filling .nav, .is-filling .progress { display: none; }

@media (max-width: 700px) and (orientation: landscape) { .film__stage.stage--video { width: 100%; aspect-ratio: 1080 / 620; } }

/* ---------- Square-ish screens (unfolded foldables, upright tablets): the tall cut, sized to fit the screen height ---------- */
@media (min-width: 701px) and (max-width: 1100px) and (max-aspect-ratio: 5/4) {
  .film__stage.stage--video { width: min(100%, calc((100svh - var(--nav-h)) * 540 / 675)); aspect-ratio: 540 / 675; -webkit-mask-image: none; mask-image: none; }
  .film__cta { font-size: 14px; padding: 0 16px; height: 40px; bottom: 8%; }
  .features .work-stage .stage.stage--video { width: min(calc(100vw - 48px - 320px), calc((100svh - var(--nav-h) - 24px) * 540 / 675)); aspect-ratio: 540 / 675; }
}

/* ---------- Work on phones only: one big text panel under the video (layout A) ---------- */
@media (max-width: 700px) {
.tabs--labels { display: grid; width: auto; max-width: none; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; justify-items: start; }
.tabs--labels .tab { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; background: transparent !important; color: var(--sc-ink) !important; padding: 0; border-radius: 0; gap: 0; align-items: flex-start; }
.tabs--labels .tab.is-active { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.tabs--labels .tab::before { order: -2; font-family: var(--sc-font-mono); font-size: 14px; letter-spacing: .08em; color: var(--sc-accent); margin: 0 0 10px; }
.tabs--labels .tab::after { order: -3; content: ""; width: 160px; height: 4px; margin: 0 0 18px; border-radius: 2px; background-repeat: no-repeat; background-size: 34px 4px; background-position: 0 0, 42px 0, 84px 0, 126px 0; }
.tabs--labels .tab[data-tab="0"]::before { content: "1 OF 4"; } .tabs--labels .tab[data-tab="1"]::before { content: "2 OF 4"; } .tabs--labels .tab[data-tab="2"]::before { content: "3 OF 4"; } .tabs--labels .tab[data-tab="3"]::before { content: "4 OF 4"; }
.tabs--labels .tab[data-tab="0"]::after { background-image: linear-gradient(var(--sc-accent),var(--sc-accent)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)); }
.tabs--labels .tab[data-tab="1"]::after { background-image: linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(var(--sc-accent),var(--sc-accent)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)); }
.tabs--labels .tab[data-tab="2"]::after { background-image: linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(var(--sc-accent),var(--sc-accent)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)); }
.tabs--labels .tab[data-tab="3"]::after { background-image: linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(rgba(242,243,245,.16),rgba(242,243,245,.16)), linear-gradient(var(--sc-accent),var(--sc-accent)); }
.tabs--labels .tab__name { font-size: 34px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 14px; }
.tabs--labels .tab__line { font-size: 21px; line-height: 1.5; opacity: 1 !important; color: var(--sc-ink); }

  .work-stage { display: flex; flex-direction: column; }
  .work-stage .tabs--labels { order: 2; width: 100%; max-width: none; margin-top: 22px; }
  .tabs--labels .tab__name { font-size: 28px; }
  .tabs--labels .tab__line { font-size: 19px; }
}

/* ---------- Work on desktop and tablets: same boxes as live, bigger text only ---------- */
@media (min-width: 701px) {
  .tabs--labels .tab__name { font-size: 18px; }
  .tabs--labels .tab__line { font-size: 16px; }
}

/* ---------- Phones: the page settles on the lead gen video so the whole animation and its text are on screen together ---------- */
@media (max-width: 700px) {
  html { scroll-snap-type: y proximity; }
  .features .work-stage { scroll-snap-align: start; scroll-margin-top: calc(var(--nav-h) + 12px); }
}
@media (max-width: 700px) and (max-height: 700px) {
  .features .work-stage { scroll-margin-top: calc(var(--nav-h) + 4px); }
  .features .work-stage .stage.stage--video { width: 78%; margin-inline: auto; }
  .tabs--labels .tab__name { font-size: 24px; margin-bottom: 8px; }
  .tabs--labels .tab__line { font-size: 17px; line-height: 1.4; }
  .tabs--labels { margin-top: 14px; }
}

/* demos section + price-row example links */
.demos { padding: clamp(56px, 8vw, 110px) 0; }
.demos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.demo-tile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #0d0f12; color: var(--sc-ink); text-decoration: none; border: 1px solid var(--line-2); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.demo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.demo-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.55) 38%, rgba(0,0,0,0) 72%); }
.demo-tile__t { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: grid; gap: 4px; }
.demo-tile__t b { font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; letter-spacing: -.02em; }
.demo-tile__t span { font-size: 14.5px; color: var(--ink-2); }
.demo-tile__go { position: absolute; z-index: 2; top: 16px; right: 16px; font-size: 13px; padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.4); backdrop-filter: blur(6px); }
@media (hover: hover) { .demo-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -24px #000; } .demo-tile:hover img { transform: scale(1.05); } }
.plan__eg { margin-left: 6px; color: var(--sc-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); white-space: nowrap; }
.plan__eg:hover { text-decoration-color: var(--sc-accent); }
@media (max-width: 760px) { .demos__grid { grid-template-columns: 1fr; } .demo-tile { aspect-ratio: 4 / 3; } }

/* section heads on desktop: the heading, paragraph and what follows get proper spacing (the stray brace near line 163 drops the original .section-head rule) */
@media (min-width: 900px) {
  .section-head { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 52px; }
  .section-head .chip { margin-bottom: 0; }
}