/* Sailfold, draft 2.1: "the render console", in light.
   White and soft grey with one light blue; no coloured glows; crisp solid cards; glass only where content moves under it (nav, play buttons).
   Ad screens float behind the hero on their own mouse-driven layers. Rules: ../rules.md (2, 3, 4-7) + Gustav's notes of 2026-11-10.
   The dark first version is kept in _v2.0-dark/. */

:root {
  --bg: #f8f9fa;
  --bg-2: #f1f3f5;
  --card: #ffffff;
  --ink: #161d27;
  --ink-2: #434b57;
  --muted: #6b727d;
  --line: #e6e8eb;
  --line-2: #d9dde2;
  --blue: #4472bf;          /* a soft, slightly grey blue: white text on it reads 4.8:1, on the page 4.5:1 */
  --blue-ink: #ffffff;
  --sky: #a9c4ea;            /* the light blue */
  --sky-2: #eef3fa;          /* its softest tint */
  --sky-3: #dce6f4;
  --rec: #ef4444;
  --r-xl: 24px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px;
  --wrap: 1280px;
  --gut: clamp(16px, 4vw, 48px);
  --nav: 76px;
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(22, 29, 39, .04), 0 8px 24px rgba(22, 29, 39, .06);
  --shadow-lg: 0 2px 4px rgba(22, 29, 39, .04), 0 24px 60px rgba(22, 29, 39, .10);
  --mx: 0; --my: 0;           /* pointer, -1..1, set by app.js */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 16px); }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sky-3); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 16px; }

/* ------------------------------------------------------------ the page ground: soft grey, a faint grid at the top, nothing glowing */
.ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.ground__grid { position: absolute; inset: -40px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .55;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  translate: calc(var(--mx) * -6px) calc(var(--my) * -6px); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); }

/* ------------------------------------------------------------ buttons */
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent; font-weight: 500; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background .2s, border-color .2s, color .2s; }
.btn:active { transform: scale(.97); }
.btn--blue { background: var(--blue); color: var(--blue-ink); }
.btn--blue:hover { background: #3a64aa; transform: translateY(-1px); }
.btn--line { background: var(--card); border-color: var(--line-2); color: var(--ink); }
.btn--line:hover { border-color: #c3c9d1; background: #fafbfc; }
.btn--text { background: transparent; color: var(--ink-2); padding: 0 14px; }
.btn--text:hover { color: var(--ink); background: var(--bg-2); }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; }
.btn--xl { --h: 60px; padding: 0 28px; font-size: 17px; font-weight: 600; }
.btn--full { width: 100%; }
.btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 3px rgba(239,68,68,.16), 0 0 8px rgba(239,68,68,.55); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; } }

/* ------------------------------------------------------------ nav: a floating frosted bar (glass where content scrolls under it) */
.nav { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; }
.nav__bar { display: flex; align-items: center; gap: 24px; height: 58px; padding: 0 8px 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
.logo__mark { width: 22px; height: 22px; }
.nav__links { display: flex; gap: 2px; margin-left: 12px; }
.nav__links a { padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.nav__links a:hover { background: var(--bg-2); color: var(--ink); }
.nav__status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
@media (max-width: 960px) { .nav__links, .nav__status { display: none; } .nav__bar .btn { margin-left: auto; } }

/* ------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100svh; padding: calc(var(--nav) + 40px) 0 56px; display: flex; align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; }
.hero__copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); }
.hero h1 { margin: 22px 0 0; font-weight: 500; font-size: clamp(40px, 4.6vw, 70px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero__lead { margin: 24px 0 0; max-width: 40ch; font-size: 19px; color: var(--ink-2); }
.hero__facts { display: grid; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 15px; }
.hero__facts li { display: inline-flex; align-items: center; gap: 10px; }
.hero__facts li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--sky-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' fill='none' stroke='%234472bf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* the stage: the brief in front, drawn ad screens scattered around it on purpose unevenly:
   mixed formats, sizes, tilts and depths. Near ones are tucked under the brief's edges; far ones are smaller, paler and barely move. */
.stage-brief { position: relative; isolation: isolate; }
.screens { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.float { position: absolute; will-change: transform; rotate: var(--rot, 0deg);
  transform: translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px), 0); transition: transform .12s linear; }
.float > .monitor { animation: bob var(--bob, 9s) ease-in-out var(--lag, 0s) infinite alternate; }
@keyframes bob { from { translate: 0 -5px; } to { translate: 0 6px; } }
.float--1 { width: 128px; left: -84px;  top: 96px;     --rot: -5deg;  --d: 12;  --bob: 10s; }
.float--2 { width: 248px; right: -64px; bottom: -58px; --rot: 2.5deg; --d: -9;  --bob: 12s; --lag: -4s; }
.float--3 { width: 96px;  right: 70px;  top: -64px;    --rot: 7deg;   --d: 16;  --bob: 8s;  --lag: -2s; }
.float--4 { width: 84px;  left: -132px; top: -62px;    --rot: -9deg;  --d: 5;   --bob: 11s; --lag: -6s; }
.float--5 { width: 62px;  left: -138px; bottom: 30px;  --rot: 8deg;   --d: 4;   --bob: 9s;  --lag: -3s; }
.float--6 { width: 150px; left: 64px;   bottom: -70px; --rot: -4deg;  --d: -14; --bob: 10s; --lag: -7s; }
.float--7 { width: 70px;  right: -54px; top: 230px;    --rot: -11deg; --d: 20;  --bob: 7s;  --lag: -1s; }
.float--8 { width: 74px;  left: 230px;  top: -88px;    --rot: 5deg;   --d: 6;   --bob: 13s; --lag: -5s; }
.float--9 { width: 58px;  right: -98px; top: 400px;    --rot: 6deg;   --d: 3;   --bob: 11s; --lag: -8s; }
/* the hero's drawn screens: dark grey so they read as videos, but quiet */
.float .monitor { background: linear-gradient(180deg, #5a5f68, #43474f); border-color: #3a3d44;
  box-shadow: 0 2px 4px rgba(22,29,39,.06), 0 16px 36px rgba(22,29,39,.14);
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.22); --muted: rgba(255,255,255,.6); }
.float--far { z-index: -1; opacity: .5; }
.float--far .monitor { box-shadow: 0 8px 20px rgba(22,29,39,.08); }
.float .monitor--sm .monitor__hud { left: 8px; right: 8px; top: 7px; font-size: 9px; }
.float .monitor--sm .monitor__bar { left: 8px; right: 8px; bottom: 8px; height: 2px; }
.float .monitor__hud .live { color: #ff8a8a; }
.float .monitor__play { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); box-shadow: none; }
.float .monitor__play::after { border-left-color: rgba(255,255,255,.9); }
.float .monitor__bar::after { background: rgba(255,255,255,.5); }

/* ------------------------------------------------------------ AD SCREEN (rule 3; minimal: a light frame, the red record signal, the play button)
   In the hero they stay drawn screens; elsewhere each becomes a muted looping <video> once the ads exist. */
.monitor { position: relative; aspect-ratio: var(--ar, 9 / 16); border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f2f3f5); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.monitor--45 { --ar: 4 / 5; } .monitor--11 { --ar: 1 / 1; } .monitor--169 { --ar: 16 / 9; }
.monitor--sky { background: linear-gradient(180deg, #f8fafd, #edf2f8); }
.monitor__hud { position: absolute; left: 10px; right: 10px; top: 9px; display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.monitor__hud .live { display: inline-flex; align-items: center; gap: 6px; color: var(--rec); }
.monitor__hud .rec { width: 6px; height: 6px; }
.monitor__corners { position: absolute; inset: 14%; pointer-events: none;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 0 / 12px 1px, linear-gradient(var(--line-2), var(--line-2)) 0 0 / 1px 12px,
    linear-gradient(var(--line-2), var(--line-2)) 100% 0 / 12px 1px, linear-gradient(var(--line-2), var(--line-2)) 100% 0 / 1px 12px,
    linear-gradient(var(--line-2), var(--line-2)) 0 100% / 12px 1px, linear-gradient(var(--line-2), var(--line-2)) 0 100% / 1px 12px,
    linear-gradient(var(--line-2), var(--line-2)) 100% 100% / 12px 1px, linear-gradient(var(--line-2), var(--line-2)) 100% 100% / 1px 12px;
  background-repeat: no-repeat; }
.monitor__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.monitor__bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--sky); border-radius: inherit; animation: scrub 8s linear infinite; }
@keyframes scrub { from { width: 0; } to { width: 100%; } }
.monitor__play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.monitor__play::after { content: ""; position: absolute; left: 17px; top: 14px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--blue); }
.monitor--sm .monitor__play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.monitor--sm .monitor__play::after { left: 11px; top: 9px; border-width: 6px 0 6px 10px; }
.monitor__mark { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 70%; font: 600 10px/1 var(--mono); letter-spacing: .3em; color: rgba(22,29,39,.24); }

/* ------------------------------------------------------------ THE BRIEF (rule 2): four steps, calm, with a ticket that fills in as you answer */
.brief { position: relative; z-index: 2; padding: 32px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.brief__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brief__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--sky-2); color: var(--blue); font-size: 13px; font-weight: 500; }
.brief__job { color: var(--muted); }
.brief__job b { color: var(--ink); font-weight: 500; }

/* the stepper: numbers that turn into drawn checks, joined by a line that fills */
.stepper { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 22px 0 0; padding: 0; list-style: none; }
.stepper::before, .stepper::after { content: ""; position: absolute; top: 15px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; background: var(--line); }
.stepper::after { right: auto; width: calc(75% * var(--fill, 0)); background: var(--blue); transition: width .6s var(--ease); }
.stepper li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--muted); transition: color .3s; }
.stepper .dot { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--line-2);
  font: 500 12px/1 var(--mono); color: var(--muted); transition: background .35s, border-color .35s, color .35s, transform .45s var(--ease); }
.stepper .dot svg { position: absolute; width: 14px; height: 14px; opacity: 0; }
.stepper .dot svg path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s .1s var(--ease); }
.stepper li.is-now { color: var(--ink); }
.stepper li.is-now .dot { border-color: var(--blue); color: var(--blue); transform: scale(1.08); box-shadow: 0 0 0 5px var(--sky-2); }
.stepper li.is-done .dot { background: var(--blue); border-color: var(--blue); color: transparent; }
.stepper li.is-done .dot svg { opacity: 1; } .stepper li.is-done .dot svg path { stroke-dashoffset: 0; }
.stepper li.is-done { color: var(--ink-2); }

/* the ticket: what the ad is so far, one chip per answer */
.ticket { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; height: 46px; margin: 22px 0 0; padding: 0 10px; border-radius: var(--r-md); background: var(--bg); border: 1px dashed var(--line-2);
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; mask-image: linear-gradient(90deg, transparent 0, #000 var(--tl, 0px), #000 calc(100% - 24px), transparent 100%); }
.ticket::-webkit-scrollbar { display: none; }
.ticket__chip { flex: none; }
.ticket__empty { padding: 0 6px; color: var(--muted); font-size: 13px; }
.ticket__chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap; animation: chip-in .45s var(--ease); }
.ticket__chip b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.ticket__chip small { font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ticket__chip i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px) scale(.9); } }

/* the panes slide in from the side you're heading to; the box eases to each pane's height */
.panes { position: relative; margin-top: 24px; }
.pane { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; align-content: start; }
.pane.is-in { animation: pane-in .5s var(--ease); }
.pane.is-in.from-left { animation-name: pane-in-left; }
@keyframes pane-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes pane-in-left { from { opacity: 0; transform: translateX(-28px); } }
.pane.is-in > * { animation: rise .55s var(--ease) both; }
.pane.is-in > *:nth-child(2) { animation-delay: .05s; } .pane.is-in > *:nth-child(3) { animation-delay: .1s; } .pane.is-in > *:nth-child(4) { animation-delay: .15s; } .pane.is-in > *:nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.pane legend { padding: 0; margin-bottom: 2px; font-size: 26px; font-weight: 500; letter-spacing: -.025em; float: left; width: 100%; }
.pane legend + * { clear: both; }
.pane__hint { margin: -10px 0 0; color: var(--muted); font-size: 15px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > label, .field > .label { font-size: 14px; font-weight: 500; color: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; }
.field .opt { color: var(--muted); font-weight: 400; }
.input { width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: #fafbfc; color: var(--ink); font-size: 16px; transition: border-color .2s, box-shadow .25s, background .2s; }
textarea.input { height: auto; min-height: 96px; padding: 14px 16px; resize: vertical; line-height: 1.45; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.input::placeholder { color: #9aa1ab; }
.input:hover { border-color: #c3c9d1; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(68,114,191,.16); background: #fff; }
.input[aria-invalid="true"] { border-color: #d9443b; box-shadow: 0 0 0 4px rgba(217,68,59,.12); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.error { margin: 0; font-size: 13px; color: #c2372f; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; color: var(--ink-2); transition: background .2s, border-color .2s, color .2s, transform .3s var(--ease); cursor: pointer; }
.chip:hover span { border-color: #c3c9d1; color: var(--ink); }
.chip input:checked + span { background: var(--sky-2); border-color: var(--blue); color: var(--blue); transform: scale(1.04); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: #fafbfc; position: relative; }
.seg label { position: relative; z-index: 1; text-align: center; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 9px 6px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color .3s; cursor: pointer; }
.seg input:checked + span { color: var(--blue); font-weight: 500; }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.seg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 3)); border-radius: 999px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow);
  transform: translateX(calc(100% * var(--i, 0))); transition: transform .45s var(--ease); }

/* the style gallery: a row you scroll through; each card becomes a looping ad later */
.gallery { position: relative; min-width: 0; }
.gallery__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gallery__head .label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.gallery__nav { display: flex; gap: 6px; }
.gallery__nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); transition: background .2s, opacity .2s; }
.gallery__nav button:hover { background: var(--bg); }
.gallery__nav button:disabled { opacity: .35; cursor: default; }
.gallery__nav svg { width: 14px; height: 14px; }
.styles { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 10px; margin: -4px -2px 0; scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 28px)), transparent 100%); }
.styles::-webkit-scrollbar { display: none; }
.style { position: relative; display: grid; gap: 8px; scroll-snap-align: start; cursor: pointer; }
.style input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 2; }
.style .monitor { --ar: 4 / 5; border-radius: 12px; box-shadow: none; transition: transform .35s var(--ease), box-shadow .35s, border-color .25s; }
.style .monitor { background: linear-gradient(180deg, #5a5f68, #43474f); border-color: #3a3d44; --line-2: rgba(255,255,255,.22); --muted: rgba(255,255,255,.6); }
.style .monitor__play { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); box-shadow: none; }
.style .monitor__play::after { left: 13px; top: 10px; border-width: 7px 0 7px 11px; border-left-color: rgba(255,255,255,.9); }
.style .name { font-size: 13.5px; line-height: 1.25; color: var(--ink-2); padding: 0 2px; transition: color .2s; }
.style:hover .monitor { transform: translateY(-3px); }
.style:has(input:checked) .monitor { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue); }
.style:has(input:checked) .name { color: var(--blue); font-weight: 500; }
.style:has(input:focus-visible) .monitor { outline: 2px solid var(--blue); outline-offset: 4px; }
.style__check { position: absolute; z-index: 1; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; transform: scale(0); transition: transform .35s var(--ease); }
.style__check svg { width: 12px; height: 12px; }
.style:has(input:checked) .style__check { transform: scale(1); }
.style--any .monitor { background: repeating-linear-gradient(-45deg, #f1f3f5 0 8px, #fafbfc 8px 16px); border-color: var(--line-2); display: grid; place-items: center; }
.style--any .monitor b { font: 500 11px/1.3 var(--mono); color: var(--muted); text-align: center; letter-spacing: .06em; }

.extras { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.upload { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 52px; border-radius: 12px; border: 1px dashed var(--line-2); background: #fafbfc; position: relative; font-size: 14px; color: var(--ink-2); transition: border-color .2s, background .2s; }
.upload:hover, .upload:focus-within { border-color: var(--blue); background: #fff; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
.upload b { font-weight: 500; color: var(--ink); }
.colour { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 10px; border-radius: 12px; border: 1px solid var(--line-2); background: #fafbfc; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.colour input { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.colour input::-webkit-color-swatch-wrapper { padding: 0; } .colour input::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.12); border-radius: 8px; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }

.brief__foot { display: grid; gap: 12px; margin-top: 28px; }
.brief__nav { display: flex; align-items: center; gap: 8px; }
.brief__nav .btn--xl { flex: 1; position: relative; overflow: hidden; }
/* a soft sheen crosses the main button on hover (no glow) */
.brief__nav .btn--xl::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .7s var(--ease); }
.brief__nav .btn--xl:hover::after { left: 120%; }
.brief__note { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--muted); font-size: 13px; }
.brief__note span { display: inline-flex; align-items: center; gap: 6px; }
.brief__note span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
.brief__status { margin: 0; text-align: center; font-size: 14px; color: var(--blue); }
.brief__status:empty { display: none; }

/* ------------------------------------------------------------ sections */
.section { position: relative; padding: clamp(80px, 11vw, 136px) 0; }
.section--alt { background: var(--card); border-block: 1px solid var(--line); }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 48px; }
.section__head h2 { margin: 14px 0 0; font-weight: 500; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; letter-spacing: -.04em; }
.section__head p { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 17px; justify-self: end; }
.tag { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); }
.tag::before { content: ""; width: 18px; height: 1px; background: currentColor; }

/* marquee strip */
.strip { border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0; background: var(--card); }
.strip__track { display: flex; gap: 48px; width: max-content; animation: marquee 44s linear infinite; }
.strip__track span { display: inline-flex; align-items: center; gap: 48px; color: var(--ink-2); font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.strip__track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* pipeline: an editor timeline */
.timeline { overflow: hidden; }
.timeline__bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--muted); }
.timeline__bar .tc { margin-left: auto; color: var(--blue); font-variant-numeric: tabular-nums; }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.tracks { position: relative; padding: 0 20px 20px; }
.ruler { display: grid; grid-template-columns: 110px repeat(8, 1fr); height: 34px; align-items: end; color: var(--muted); border-bottom: 1px solid var(--line); }
.ruler span { font: 400 10.5px/1 var(--mono); padding: 0 0 8px 6px; border-left: 1px solid var(--line); }
.ruler span:first-child { border: 0; }
.track { display: grid; grid-template-columns: 110px 1fr; align-items: center; height: 58px; border-bottom: 1px solid var(--line); }
.track__name { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.track__lane { position: relative; height: 100%; }
.clip { position: absolute; top: 12px; bottom: 12px; left: var(--x); width: var(--w); border-radius: 8px; padding: 0 10px; display: flex; align-items: center; overflow: hidden;
  font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--ink-2); border: 1px solid var(--line-2); background: var(--bg); }
.clip--blue { background: var(--sky-2); border-color: #c9d8ee; color: #36598f; }
.clip--solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.clip--wave { background-image: repeating-linear-gradient(90deg, #c3cfdd 0 2px, transparent 2px 5px); background-size: 100% 55%; background-repeat: no-repeat; background-position: 0 50%; }
.playhead { position: absolute; top: 0; bottom: 20px; left: calc(130px + var(--p, 0) * (100% - 150px)); width: 2px; background: var(--rec); pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: 0; left: -6px; border-style: solid; border-width: 9px 7px 0; border-color: var(--rec) transparent transparent; }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.stage { padding: 24px; display: grid; gap: 10px; align-content: start; border-radius: var(--r-lg); transition: transform .35s var(--ease), box-shadow .35s; }
.stage:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stage .mono { color: var(--blue); }
.stage h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.stage p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* the engine: render log + facts */
.engine { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.terminal { overflow: hidden; }
.terminal__top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.terminal pre { margin: 0; padding: 22px 24px 28px; font: 400 13.5px/1.8 var(--mono); color: var(--ink-2); white-space: pre-wrap; min-height: 360px; }
.terminal .ok { color: #1f9d55; } .terminal .dim { color: var(--muted); } .terminal .hl { color: var(--blue); }
.terminal .caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -2px; background: var(--blue); animation: rec 1s steps(1) infinite; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fact { padding: 24px; display: grid; align-content: space-between; gap: 18px; min-height: 160px; border-radius: var(--r-lg); }
.fact b { font-size: clamp(36px, 3.4vw, 52px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.fact b small { font-size: .42em; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.fact p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* work: a wall of ad screens, each with its own inner movement */
.wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.tile { position: relative; padding: 14px; border-radius: var(--r-lg); display: grid; gap: 12px; align-content: start; transition: transform .4s var(--ease), box-shadow .4s; --tx: 0; --ty: 0; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile .monitor { box-shadow: none; }
.tile .monitor__play { transform: translate3d(calc(var(--tx) * 10px), calc(var(--ty) * 10px), 0); transition: transform .2s linear; }
.tile .monitor__corners { transform: translate3d(calc(var(--tx) * -5px), calc(var(--ty) * -5px), 0); transition: transform .2s linear; }
.tile__meta { display: flex; justify-content: space-between; color: var(--muted); }
.tile--a { grid-column: span 3; grid-row: span 2; }
.tile--b { grid-column: span 6; }
.tile--c { grid-column: span 3; grid-row: span 2; }
.tile--d { grid-column: span 3; }
.tile--e { grid-column: span 3; }

/* formats: one frame; click a row on the right or the frame itself to change its shape */
.formats { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 16px; }
.morph { position: relative; display: grid; place-items: center; min-height: 520px; overflow: hidden; cursor: pointer; border-radius: var(--r-xl); text-align: inherit; padding: 0; }
.morph:hover .morph__hint { color: var(--blue); }
.morph__frame { display: block; width: 220px; height: 391px; transition: width .7s var(--ease), height .7s var(--ease); will-change: width, height; }   /* app.js sets the size in px */
/* all four shapes play in step and fill the window as it morphs, so a switch is only a crossfade (app.js) */
.morph__frame .reel--set { overflow: hidden; }
.morph__frame .monitor { display: block; width: 100%; height: 100%; aspect-ratio: auto; }
.morph > span { display: block; }
.morph__label { position: absolute; left: 20px; bottom: 18px; color: var(--blue); }
.morph__hint { position: absolute; right: 20px; bottom: 18px; color: var(--muted); transition: color .2s; }
.morph__guides { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); pointer-events: none; }
.specs { padding: 8px; display: grid; align-content: start; border-radius: var(--r-xl); }
.spec { display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; align-items: center; padding: 18px 16px; border: 0; border-radius: var(--r-md); background: transparent; text-align: left; cursor: pointer; transition: background .2s; }
.spec + .spec { margin-top: 2px; }
.spec:hover { background: var(--bg); }
.spec .ratio { display: inline-flex; align-items: center; font: 500 15px/1 var(--mono); color: var(--ink); }
.spec .where { color: var(--ink-2); font-size: 15px; }
.spec .px { font: 400 12.5px/1 var(--mono); color: var(--muted); }
.spec[aria-pressed="true"] { background: var(--sky-2); }
.spec[aria-pressed="true"] .ratio { color: var(--blue); }
.spec__shape { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; margin-right: 10px; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .9fr); gap: 16px; }
.plan { padding: 28px; display: grid; gap: 18px; align-content: start; }
.plan--main { border-color: #c9d8ee; box-shadow: 0 0 0 1px #c9d8ee, var(--shadow); }
.plan__name { display: flex; justify-content: space-between; align-items: center; }
.plan__name h3 { margin: 0; font-weight: 500; font-size: 20px; }
.badge { padding: 5px 10px; border-radius: 999px; background: var(--sky-2); color: var(--blue); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font-size: 58px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.price span { color: var(--muted); }
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--ink-2); font-size: 15px; }
.list li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--sky-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.3 9.2l2.4 2.4 5-5' fill='none' stroke='%234472bf' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.plan .btn { width: 100%; }
.plan--note { padding: 28px; display: grid; gap: 14px; align-content: start; background: var(--sky-2); border-color: #dbe5f3; box-shadow: none; }
.plan--note h3 { margin: 0; font-weight: 500; font-size: 20px; }
.plan--note p { margin: 0; color: var(--ink-2); font-size: 15px; }
.plan--note .monitor { width: 148px; margin-top: 8px; }

/* questions: answers slide open (app.js animates the height), the plus turns, each row lifts on hover */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.faq__intro p { color: var(--ink-2); margin: 18px 0 24px; }
.faq__list { display: grid; gap: 10px; align-content: start; }
.faq details { border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); }
.faq details:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.faq details[open] { border-color: #c9d8ee; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); transition: background .3s, transform .45s var(--ease); }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: var(--ink-2); border-radius: 2px; transition: background .3s; }
.faq summary .plus::after { transform: rotate(90deg); }
.faq details[open] summary .plus { transform: rotate(135deg); background: var(--blue); }
.faq details[open] summary .plus::before, .faq details[open] summary .plus::after { background: #fff; }
.faq .answer { overflow: hidden; }
.faq .answer p { margin: 0; padding: 0 24px 22px; color: var(--ink-2); max-width: 62ch; }

/* ---- the last question: ask your own (app.js: "ask your own question") ---- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* a trap field bots fill in and people never see */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ask { border-radius: var(--r-lg); overflow: hidden; border-style: dashed; border-color: var(--line-2); background: linear-gradient(var(--card), var(--card)) padding-box;
  transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); }
.ask:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ask:focus-within, .ask.is-open { border-style: solid; border-color: #c9d8ee; box-shadow: 0 0 0 4px var(--sky-2), var(--shadow); transform: none; }
.ask__row { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; margin: 0; }
.ask__icon { flex: none; width: 20px; height: 20px; color: var(--blue); }
.ask__icon svg { width: 100%; height: 100%; display: block; }
.ask.is-busy .ask__icon { animation: ask-twinkle 1.1s var(--ease) infinite; }
@keyframes ask-twinkle { 50% { transform: rotate(18deg) scale(.86); opacity: .6; } }
.ask__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 17px/1.4 var(--font); color: var(--ink); padding: 10px 0; }
.ask__input::placeholder { color: var(--ink-2); opacity: .75; font-weight: 500; }
.ask__hint { flex: none; font-size: 11px; color: var(--ink-2); opacity: 0; translate: 6px 0; transition: opacity .25s, translate .35s var(--ease); pointer-events: none; }
.ask.has-text:not(.is-answered):not(.is-busy) .ask__hint { opacity: .7; translate: 0 0; }
/* one button, three jobs: send (arrow), busy (spinner), then open/close (the FAQ's plus) */
.ask__btn { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--blue); color: #fff; transition: background .25s, transform .35s var(--ease), opacity .25s; }
.ask__btn:disabled { background: var(--bg-2); color: var(--ink-2); cursor: default; opacity: .8; }
.ask__btn:not(:disabled):hover { transform: translateY(-1px); background: #3a64aa; }
.ask__btn > * { position: absolute; transition: opacity .2s, transform .35s var(--ease); }
.ask__send { width: 16px; height: 16px; }
.ask__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; animation: ask-spin .8s linear infinite; }
@keyframes ask-spin { to { transform: rotate(360deg); } }
.ask__btn .plus { width: 30px; height: 30px; border-radius: 50%; opacity: 0; }
.ask__btn .plus::before, .ask__btn .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: currentColor; border-radius: 2px; }
.ask__btn .plus::after { transform: rotate(90deg); }
.ask.is-busy .ask__btn { background: var(--blue); }
.ask.is-busy .ask__send { opacity: 0; transform: translateY(-8px); }
.ask.is-busy .ask__spin { opacity: 1; }
.ask.is-answered .ask__btn { background: var(--bg); color: var(--ink-2); }
.ask.is-answered .ask__send { opacity: 0; transform: translateY(-8px); }
.ask.is-answered .ask__btn .plus { opacity: 1; }
.ask.is-answered.is-open .ask__btn { background: var(--blue); color: #fff; transform: rotate(135deg); }
/* the panel unfolds under the question; app.js animates its height */
.ask__panel { height: 0; overflow: hidden; }
.ask__inner { padding: 4px 24px 22px 54px; }
.ask__think { display: grid; gap: 14px; padding-top: 4px; }
.ask__think[hidden] { display: none; }
.ask__status { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: 11px; letter-spacing: .1em; }
.ask__dots { display: inline-flex; gap: 4px; }
.ask__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: ask-dot 1s var(--ease) infinite; }
.ask__dots i:nth-child(2) { animation-delay: .15s; } .ask__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ask-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ask__skel { display: grid; gap: 9px; max-width: 520px; }
.ask__skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-2) 0%, var(--sky-2) 40%, var(--bg-2) 80%) 0 0 / 300% 100%; animation: ask-shimmer 1.4s linear infinite; }
.ask__skel i:nth-child(2) { width: 88%; } .ask__skel i:nth-child(3) { width: 56%; }
@keyframes ask-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.ask__answer p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.ask__answer p + p { margin-top: 10px; }
.ask__answer .w { opacity: 0; animation: ask-word .35s var(--ease) forwards; }
@keyframes ask-word { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
.ask__answer.is-typing p:last-child::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; border-radius: 2px; background: var(--blue); animation: ask-caret .9s steps(2) infinite; }
@keyframes ask-caret { 50% { opacity: 0; } }
.ask__foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); opacity: 0; translate: 0 6px; transition: opacity .35s, translate .45s var(--ease); }
.ask__foot.is-on { opacity: 1; translate: 0 0; }
.ask__foot[hidden] { display: none; }
.ask__foot .mono { font-size: 11px; color: var(--ink-2); }
.ask__person { border: 0; background: none; padding: 0; font: 500 14px var(--font); color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sky); }
.ask__person:hover { text-decoration-color: var(--blue); }
@media (max-width: 640px) {
  .ask__row { padding-left: 16px; gap: 10px; }
  .ask__input { font-size: 16px; }
  .ask__hint { display: none; }
  .ask__inner { padding: 2px 18px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ask__dots i, .ask__skel i, .ask.is-busy .ask__icon, .ask__spin { animation: none; }
  .ask__answer .w { animation: none; opacity: 1; }
}

/* close + footer */
.close { position: relative; padding: clamp(80px, 10vw, 130px) 0 40px; overflow: hidden; }
.close__panel { position: relative; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; overflow: hidden; }
.close__panel > div, .close__panel > .btn { position: relative; z-index: 1; }
.close__panel h2 { margin: 12px 0 0; font-weight: 500; font-size: clamp(36px, 5vw, 70px); line-height: 1; letter-spacing: -.045em; max-width: 14ch; }
.close__panel p { margin: 18px 0 0; color: var(--ink-2); max-width: 44ch; }
.close__orbit { position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid var(--line-2); pointer-events: none;
  translate: calc(var(--mx) * 16px) calc(var(--my) * 16px); }
.close__orbit::after { content: ""; position: absolute; inset: 60px; border-radius: 50%; border: 1px dashed #c9d8ee; }
.wordmark { margin: 72px 0 0; font-weight: 600; font-size: clamp(80px, 20vw, 300px); line-height: .8; letter-spacing: -.07em; text-align: center;
  background: linear-gradient(180deg, rgba(22,29,39,.16), rgba(22,29,39,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.footer { padding: 32px 0 40px; border-top: 1px solid var(--line); background: var(--card); }
.footer__row { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__links a, .footer__links button { text-decoration: none; color: var(--ink-2); background: none; border: 0; padding: 0; font-size: 14px; cursor: pointer; }
.footer__links a:hover, .footer__links button:hover { color: var(--blue); }

/* ------------------------------------------------------------ the message window ("Email us") */
.modal { width: min(620px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); color: var(--ink); box-shadow: 0 40px 120px rgba(22,29,39,.25); overflow: hidden; }
.modal::backdrop { background: rgba(22, 29, 39, .32); }
.modal[open] { animation: modal-in .35s var(--ease); }
.modal[open]::backdrop { animation: fade-in .3s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal form { display: grid; padding: 0; }
/* a letter header: a tinted strip with the mail mark and who it goes to */
.modal__head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 24px; background: var(--bg); border-bottom: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px; }
.modal__mail { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line-2); color: var(--blue); box-shadow: var(--shadow); }
.modal__mail svg { width: 20px; height: 20px; }
.modal__title { flex: 1; min-width: 0; }
.modal__title h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.modal__title p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.modal__x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .3s var(--ease); }
.modal__x:hover { background: var(--bg-2); transform: rotate(90deg); }
.modal__x svg { width: 14px; height: 14px; }
.modal__body { display: grid; gap: 16px; padding: 22px 24px 8px; }
/* topic: four pills instead of a dropdown */
.topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.topics legend { padding: 0; margin-bottom: 9px; font-size: 11px; color: var(--ink-2); letter-spacing: .1em; }
.topics__row { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
.topic span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.topic span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background .2s, box-shadow .25s; }
.topic:hover span { border-color: #c3c9d1; color: var(--ink); }
.topic input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.topic input:checked + span::before { background: var(--sky); box-shadow: 0 0 0 3px rgba(169,196,234,.3); }
.topic input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
/* a note that changes with the topic */
.modal__note { margin: -2px 0 0; display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; background: var(--sky-2); border: 1px solid var(--sky-3); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.modal__note::before { content: "i"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font: 600 11px/1 var(--mono); }
.modal__note b { color: var(--ink); font-weight: 600; }
.modal__note.is-swap { animation: note-in .35s var(--ease); }
@keyframes note-in { from { opacity: 0; transform: translateY(-4px); } }
.input-wrap { position: relative; display: block; }
.input-wrap__at { position: absolute; left: 16px; top: 50%; translate: 0 -50%; font: 500 15px var(--mono); color: var(--muted); pointer-events: none; }
.input-wrap .input { padding-left: 38px; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; }
.field__top label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.modal__count { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.modal__count.is-near { color: #b45309; }
.modal .input::placeholder, .modal textarea.input::placeholder { color: var(--muted); }
.modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px 22px; }
.modal__privacy { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.modal__privacy svg { flex: none; width: 15px; height: 15px; }
.btn--ink { background: var(--ink); color: #fff; height: 50px; padding: 0 22px; font-weight: 600; }
.btn--ink:hover { background: #26303d; transform: translateY(-1px); }
.btn--ink svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn--ink:hover svg { transform: translate(2px, -2px); }
.modal__status { margin: 0; padding: 0 24px 20px; text-align: right; font-size: 14px; color: var(--blue); }
.modal__status:empty { display: none; }

/* ------------------------------------------------------------ small motion here and there */
/* windows leave the way they came: a short fade and sink, the dimmed page fades with them (app.js shut()) */
.modal[open].is-closing, .bw[open].is-closing { animation: modal-out .24s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
.modal[open].is-closing::backdrop, .bw[open].is-closing::backdrop { animation: fade-out .26s ease forwards; }
@keyframes modal-out { to { opacity: 0; transform: translateY(12px) scale(.975); } }
@keyframes fade-out { to { opacity: 0; } }
/* the message window's parts rise in one after another */
.modal[open]:not(.is-closing) .modal__head > *, .modal[open]:not(.is-closing) .modal__body > *, .modal[open]:not(.is-closing) .modal__foot { animation: rise .5s var(--ease) backwards; }
.modal[open] .modal__head > :nth-child(2) { animation-delay: .04s; }
.modal[open] .modal__body > :nth-child(1) { animation-delay: .08s; }
.modal[open] .modal__body > :nth-child(2) { animation-delay: .12s; }
.modal[open] .modal__body > :nth-child(3) { animation-delay: .16s; }
.modal[open] .modal__body > :nth-child(4) { animation-delay: .2s; }
.modal[open] .modal__foot { animation-delay: .24s; }
/* the brief window: its left side settles in just after the window */
.bw[open]:not(.is-closing) .bw__side > * { animation: rise .6s var(--ease) backwards; }
.bw[open] .bw__side > :nth-child(2) { animation-delay: .06s; }
.bw[open] .bw__side > :nth-child(3) { animation-delay: .12s; }
.bw[open] .bw__side > :nth-child(4) { animation-delay: .18s; }
.bw[open] .bw__side > :nth-child(n+5) { animation-delay: .24s; }
/* errors and status lines slide in instead of popping */
.error:not([hidden]), .modal__status:not(:empty) { animation: rise .3s var(--ease); }
/* a press you can feel */
.btn:active, .topic:active span, .ask__btn:not(:disabled):active, .sound:active, .modal__x:active { scale: .97; transition: scale .08s; }
/* sections ease in as they scroll into view (app.js adds .reveal, then .is-seen; --d staggers a row) */
.reveal:not(.is-seen) { opacity: 0; }
.reveal.is-seen { animation: reveal .8s var(--ease) backwards; animation-delay: var(--d, 0s); }
@keyframes reveal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

/* entrance on load (no blur: crisp from the first frame) */
.enter { animation: enter .8s var(--ease) both; animation-delay: var(--delay, 0s); }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }


/* ------------------------------------------------------------ real ads in the slots: muted loops that play while on screen; one at a time can have sound */
.reel { background: #1b1d22; border-color: #2a2d33; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel--set video { opacity: 0; transition: opacity .45s var(--ease); }   /* the formats frame: four shapes of one ad, the picked one fades in */
.reel--set video.is-on { opacity: 1; }
.sound { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(22,29,39,.6); color: #fff; font: 500 11.5px/1 var(--mono); letter-spacing: .04em; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.sound svg { width: 15px; height: 15px; }
.sound .sound__on, .sound[aria-pressed="true"] .sound__off { display: none; }
.sound[aria-pressed="true"] .sound__on { display: inline; }
.sound[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.sound:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.morph-wrap { position: relative; display: grid; }
.morph-wrap > .sound { top: 18px; right: 18px; bottom: auto; height: 34px; background: var(--card); color: var(--ink); border-color: var(--line-2); }
.morph-wrap > .sound:hover { border-color: #c3c9d1; }
.morph-wrap > .sound[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ------------------------------------------------------------ "see my ad" buttons in the sections, the corner widget and the brief window */
/* a small dark ad screen shared by the section buttons and the widget: the play mark and the red record dot */
.cta__screen, .widget__screen { position: relative; flex: none; display: block; border-radius: 9px; background: linear-gradient(180deg, #5a5f68, #43474f); border: 1px solid #3a3d44; }
.cta__screen::after, .widget__screen::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent rgba(255,255,255,.9); transition: scale .3s var(--ease); }
.cta__screen .rec, .widget__screen .rec { position: absolute; left: 6px; top: 6px; width: 5px; height: 5px; }

.cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 24px; padding: 20px 24px 20px 20px; }
.cta__screen { width: 46px; height: 64px; rotate: -4deg; }
.cta:hover .cta__screen::after { scale: 1.2; }
.cta__text .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.cta__text h3 { margin: 6px 0 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.cta__text p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }

.widget { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(22,29,39,.05), 0 18px 44px rgba(22,29,39,.16);
  font: inherit; color: var(--ink); cursor: pointer; text-align: left;
  transition: opacity .35s var(--ease), translate .45s var(--ease), visibility 0s .45s, box-shadow .25s; }
.widget:not(.is-on), html:has(.bw[open]) .widget { opacity: 0; translate: 0 18px; visibility: hidden; pointer-events: none; }
.widget.is-on { transition-delay: 0s; }
.widget:hover { translate: 0 -2px; box-shadow: 0 2px 4px rgba(22,29,39,.05), 0 24px 52px rgba(22,29,39,.2); }
.widget:hover .widget__screen::after { scale: 1.2; }
.widget:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.widget__screen { width: 40px; height: 40px; border-radius: 50%; }
.widget__screen .rec { left: auto; right: 1px; top: 1px; box-shadow: 0 0 0 2px #fff; }
.widget__text { display: grid; gap: 2px; line-height: 1.15; }
.widget__text b { font-weight: 500; font-size: 15px; }
.widget__text small { color: var(--muted); font-size: 12.5px; }

/* the brief window: most of the screen, the same brief on the right (moved in from the hero), what happens next on the left */
html:has(.bw[open]) { overflow: hidden; }
.bw { width: min(1240px, calc(100vw - 48px)); height: min(860px, calc(100dvh - 48px)); max-width: none; max-height: none; padding: 0;
  border: 1px solid var(--line); border-radius: 28px; background: var(--card); color: var(--ink); box-shadow: 0 40px 120px rgba(22,29,39,.28); overflow: hidden; }
.bw[open] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); animation: modal-in .4s var(--ease); }
.bw::backdrop { background: rgba(22, 29, 39, .4); }
.bw[open]::backdrop { animation: fade-in .3s ease; }
.bw__side { position: relative; display: flex; flex-direction: column; gap: 28px; padding: 48px 44px 40px; background: var(--bg-2); border-right: 1px solid var(--line); overflow: hidden; }
.bw__side .eyebrow { align-self: start; font-size: 12px; }
.bw__side h2 { margin: 0; font-size: clamp(30px, 2.8vw, 42px); font-weight: 500; line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; }
.bw__side h2 em { font-style: normal; color: var(--blue); }
.bw__steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bw__steps li { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; color: var(--ink-2); font-size: 16px; }
.bw__steps b { font-weight: 500; font-size: 12px; color: var(--blue); }
.bw__screens { position: relative; flex: 1; min-height: 150px; }
.bw__screens .monitor { position: absolute; background: linear-gradient(180deg, #5a5f68, #43474f); border-color: #3a3d44; box-shadow: 0 16px 36px rgba(22,29,39,.14);
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.22); --muted: rgba(255,255,255,.6); animation: bob 10s ease-in-out infinite alternate; }
.bw__screens .monitor:nth-child(1) { width: 118px; left: 4%; bottom: 0; rotate: -5deg; }
.bw__screens .monitor:nth-child(2) { width: 92px; left: 40%; bottom: 46%; rotate: 7deg; opacity: .55; animation-delay: -3s; }
.bw__screens .monitor:nth-child(3) { width: 168px; right: -18px; bottom: 6%; rotate: 3deg; animation-delay: -6s; }
.bw__screens .monitor__hud .live { color: #ff8a8a; }
.bw__screens .monitor__play { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); box-shadow: none; }
.bw__screens .monitor__play::after { border-left-color: rgba(255,255,255,.9); }
.bw__screens .monitor__bar::after { background: rgba(255,255,255,.5); }
.bw__fine { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bw__main { overflow-y: auto; overscroll-behavior: contain; padding: 52px 56px 40px; }
.bw .brief { max-width: 660px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.bw .styles { grid-auto-columns: 148px; }   /* more room in the window, so the style cards (later real ads) get bigger */
.bw__x { position: absolute; top: 18px; right: 18px; z-index: 3; }

/* a "see my ad" click while the hero's brief is already on screen: the brief answers with one soft ring instead of a window */
.brief.is-called { animation: called .9s var(--ease); }
@keyframes called { from { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(68,114,191,.4); } to { box-shadow: var(--shadow-lg), 0 0 0 16px rgba(68,114,191,0); } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__lead { max-width: 52ch; }
  .stage-brief { max-width: 680px; }
  .float--4 { display: none; }
  .float--5 { left: auto; bottom: auto; right: -300px; top: 200px; }
  .float--8 { left: auto; right: -250px; top: 520px; }
  .float--3 { right: -110px; top: 40px; }
  .float--7 { right: -150px; top: 300px; }
  .float--9 { right: -84px; top: 560px; }
  .hero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; }
  .engine, .formats { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan--note { grid-column: 1 / -1; }
  .stages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .section__head { grid-template-columns: minmax(0, 1fr); } .section__head p { justify-self: start; }
  .wall { grid-template-columns: repeat(6, 1fr); }
  .tile--a, .tile--c { grid-column: span 3; grid-row: span 1; } .tile--b { grid-column: span 6; } .tile--d, .tile--e { grid-column: span 3; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .close__panel { grid-template-columns: minmax(0, 1fr); }
  .timeline { overflow-x: auto; } .tracks { min-width: 720px; }
  .bw { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .bw[open] { grid-template-columns: minmax(0, 1fr); }
  .bw__side { display: none; }
  .bw__main { padding: 64px 24px 32px; }
}
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--nav) + 24px); }
  .float { display: none; }
  .brief { padding: 20px; border-radius: 22px; }
  .row, .extras { grid-template-columns: minmax(0, 1fr); }
  .stepper li span.lbl { display: none; }
  .styles { grid-auto-columns: 112px; }
  .styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts, .stages, .plans { grid-template-columns: minmax(0, 1fr); }
  .wall { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tile--a, .tile--c, .tile--d, .tile--e { grid-column: span 1; } .tile--b { grid-column: span 2; }
  .tile { padding: 10px; }
  .spec { grid-template-columns: 60px 1fr; } .spec .px { grid-column: 2; }
  .morph { min-height: 460px; padding: 58px 0 52px; }
  .terminal pre { font-size: 12px; min-height: 0; }
  .modal__head { padding: 14px 14px 14px 16px; } .modal__mail { width: 38px; height: 38px; }
  .modal__body { padding: 18px 16px 6px; } .modal__foot { flex-direction: column-reverse; align-items: stretch; padding: 14px 16px 18px; gap: 12px; }
  .modal__foot .btn--ink { width: 100%; } .modal__privacy { justify-content: center; } .modal__status { text-align: center; padding: 0 16px 16px; }
  .cta { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .cta__screen { display: none; }
  .cta .btn { width: 100%; }
  .widget { right: 16px; bottom: 16px; padding-right: 16px; }
  .widget__text small { display: none; }
  .bw__main { padding: 60px 16px 24px; }
}

/* ------------------------------------------------------------ reduced motion: everything rests */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .float, .ground__grid, .close__orbit, .tile .monitor__play, .tile .monitor__corners { transform: none !important; translate: none !important; }
}