/* relaysos.com home, in the look of the Relay films: a light lavender ground
   with a purple glow, dark purple interstitials for the loop words, the app's
   own cards and tables, and Steady (the films' demo brand) for the examples.
   Layout: one scrolling story. Light hero -> a pinned dark loop (INTEL, CRAFT,
   TEST, KILL) -> light proof of each step -> two ways to buy -> dark end card. */
:root {
  --bg: #faf8fe; --bg-2: #f3eefc; --card: #ffffff;
  --ink: #16121f; --ink-2: #2c2638; --mut: #6d6680; --line: rgba(22,18,31,.09);
  --p: #a678f0; --p2: #7c4ddb; --p-soft: #efe6fd; --p-glow: #dccbfa;
  --dark: #07050d; --dark-ink: #f5f0eb; --dark-mut: #cbb8f3;
  --red: #ff4d5e; --good: #047857; --good-soft: #d9f7ea; --warn: #8a5300; --warn-soft: #fdf2d8;
  --steady: #3b6d1f; --steady-ink: #16210f; --steady-bg: #fbfaf5; --steady-red: #e0402f;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --brand: 'Poppins', 'Inter', sans-serif;
  --gutter: clamp(16px, 5vw, 72px); --max: 1200px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(44px, 7vw, 96px); }
h2 { font-size: clamp(34px, 5vw, 68px); }
h3 { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; font-weight: 700; }
p { max-width: 62ch; }
.em { color: var(--p); }
.sub { color: var(--mut); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--p2); font-weight: 500; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.demo { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.sec { padding-block: clamp(80px, 11vw, 160px); position: relative; }
/* Jumping to a section (the nav, #how) lands its heading about 32px below the
   sticky nav: the padding above the heading is scrolled past, and sections that
   start with no top padding are held below the nav. */
.sec { scroll-margin-top: calc(98px - clamp(80px, 11vw, 160px)); }
.sec[style*="padding-top:0"] { scroll-margin-top: 98px; }
.sec-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head.center { align-items: center; text-align: center; }
.sec-head.center p { margin-inline: auto; }
.glow { background: radial-gradient(1400px 700px at 50% 118%, #b391f2 0%, var(--p-glow) 40%, #f5f0fe 68%, var(--bg) 100%); }

/* motion: hidden states only when JS runs, so the page is whole without it */
.js .rv { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; filter: none; }
.js [data-words] .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.18em); transition: opacity .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i) * 70ms + var(--d, 0s)); }
.js [data-words].in .w { opacity: 1; filter: none; transform: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 14px 22px; border-radius: 100px; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(40,20,90,.25); }
.btn.purple { background: var(--p2); color: #fff; }   /* #7c4ddb: white text on it is AA */
.btn.purple:hover { background: #6a3cc9; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(124,77,219,.35); }
.btn.ghost { border-color: rgba(22,18,31,.16); background: rgba(255,255,255,.6); }
.btn.ghost:hover { border-color: rgba(22,18,31,.35); }
.btn.sm { font-size: 14px; padding: 9px 16px; }
.btn .arr { transition: transform .2s; } .btn:hover .arr { transform: translateX(3px); }

/* the sign-up banner */
.topbar { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px var(--gutter); padding-top: calc(9px + env(safe-area-inset-top, 0px)); background: var(--ink); color: #f5f0eb; font-size: 13.5px; text-align: center; background-image: linear-gradient(90deg, rgba(166,120,240,0) 0%, rgba(166,120,240,.35) 50%, rgba(166,120,240,0) 100%); background-size: 200% 100%; animation: sheen 6s linear infinite; }
.topbar b { color: #d9c4ff; font-weight: 600; }
.topbar .go { font-weight: 600; display: inline-flex; gap: 6px; }
.topbar:hover .arr { transform: translateX(3px); } .topbar .arr { transition: transform .2s; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.reduce .topbar { animation: none; }
/* phones: the banner is one thin line; the whole bar is the link, so the
   "Start free" words drop and the arrow stays */
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; gap: 6px; padding-block: 6px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); font-size: 12.5px; line-height: 1.3; }
  .topbar > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar .go { font-size: 0; flex: none; }
  .topbar .go .arr { font-size: 13px; }
}

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(250,248,254,.74); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.wordmark { font-weight: 600; font-size: 13px; letter-spacing: .36em; text-transform: uppercase; display: inline-flex; align-items: center; }   /* as in the app: Relay<span>.</span> */
.wordmark span { color: var(--p); }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a:not(.btn) { font-size: 14.5px; color: var(--mut); transition: color .2s; }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-menu { display: none; width: 40px; height: 40px; border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: 4px; }
.nav { transition: background .35s, border-color .35s, color .35s; }
.nav.on-dark { background: rgba(7,5,13,.55); border-bottom-color: rgba(255,255,255,.08); color: var(--dark-ink); }
.nav.on-dark .nav-links a:not(.btn) { color: rgba(245,240,235,.7); }
.nav.on-dark .nav-links a:not(.btn):hover { color: #fff; }
.nav.on-dark .btn.primary { background: #fff; color: var(--ink); }
.nav.on-dark .nav-menu span { background: var(--dark-ink); }
.nav-menu span { width: 18px; height: 1.6px; background: var(--ink); transition: transform .25s, opacity .25s; }
@media (max-width: 900px) {
  .nav-links { gap: 10px; }
  .nav-links .nl { display: none; }
  .nav-menu { display: flex; }
  /* open: a plain dropdown under the header, one link per row */
  .nav.open .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px var(--gutter) 18px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(22,18,31,.12); }
  .nav.open .nav-links .nl { display: block; padding: 14px 2px; font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav.open .nav-links .btn { margin-top: 16px; width: 100%; padding-block: 13px; }
  .nav.open .nav-menu { margin-left: auto; }
  .nav.open.on-dark .nav-links { background: #0f0a1c; border-bottom-color: rgba(255,255,255,.08); }
  .nav.open.on-dark .nav-links .nl { color: var(--dark-ink); border-bottom-color: rgba(255,255,255,.08); }
  .nav.open .nav-menu span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
  .nav.open .nav-menu span:nth-child(2) { opacity: 0; }
  .nav.open .nav-menu span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
  .nav .wrap { gap: 10px; }
  .nav .signin { display: none; }
  .nav.open .signin { display: inline-flex; }
}

/* hero */
.hero { padding-block: clamp(56px, 8vw, 110px) clamp(70px, 9vw, 130px); text-align: center; overflow: hidden; }
.hero .kicker { display: inline-block; margin-bottom: 26px; padding: 7px 14px; border-radius: 100px; background: rgba(255,255,255,.7); border: 1px solid var(--line); color: var(--ink-2); text-transform: none; letter-spacing: .01em; font-size: 13px; font-family: var(--sans); font-weight: 500; }
.hero .kicker b { color: var(--p2); font-weight: 600; }
.hero h1 { max-width: 12em; margin: 0 auto 24px; }
.hero .sub { margin: 0 auto 34px; max-width: 36em; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-note { margin: 14px auto 0; font-size: 13.5px; color: var(--mut); }

/* home, wide screens: the copy on the left and the Ask Relay window on the
   right, so the chat runs on the opening screen */
@media (min-width: 960px) {
  .hero.split { padding-block: clamp(36px, 5vh, 64px) clamp(64px, 8vw, 110px); text-align: left; }
  .hero.split .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 4.5vw, 72px); align-items: center; }
  .hero.split h1 { font-size: clamp(50px, 4.7vw, 78px); max-width: 11em; margin: 0 0 24px; }
  .hero.split .sub { margin: 0 0 32px; }
  .hero.split .cta { justify-content: flex-start; }
  .hero.split .cta-note { margin-left: 0; }
  .hero.split .appwin { margin: 0; width: 100%; height: clamp(500px, calc(100vh - 190px), 600px); height: clamp(500px, calc(100svh - 190px), 600px); }
}

/* Ask Relay, as it looks in the app (public/app/agent.html, relay-ui.css) */
.appwin { --a-bg: #0f0a1c; --a-bg1: #181027; --a-bg2: #231a3a; --a-text: #f5f0eb; --a-mut: #8f86a8; --a-mut2: #b8aed0; --a-b: rgba(255,255,255,.08); --a-b2: rgba(255,255,255,.15);
  background-image: radial-gradient(900px 560px at 50% 42%, #2e1860 0%, #170d30 55%, #0f0a1c 100%);
  width: min(100%, 980px); margin: clamp(48px, 6vw, 80px) auto 0; background: var(--a-bg); color: var(--a-text); border-radius: 22px; overflow: hidden; text-align: left;
  box-shadow: 0 50px 120px rgba(40,20,90,.4), 0 0 0 1px rgba(22,18,31,.12); display: flex; flex-direction: column; height: clamp(560px, 62vw, 640px); font-size: 14.5px; }
.aw-top { display: flex; align-items: center; gap: 12px; padding: 0 22px; height: 58px; border-bottom: 1px solid var(--a-b); flex: none; background: rgba(15,10,28,.6); }
.aw-ttl { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-credits { font-size: 12.5px; color: var(--a-mut2); border: 1px solid var(--a-b); border-radius: 100px; padding: 5px 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aw-credits b { color: var(--a-text); }
.aw-brand { display: inline-flex; align-items: center; gap: 6px; background: var(--a-bg2); border: 1px solid var(--a-b2); border-radius: 100px; padding: 6px 12px; font-size: 13px; }
.aw-msgs { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.aw-empty { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 14px; text-align: center; padding: 18px 24px; transition: opacity .45s, transform .45s; }
.aw-empty.gone { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.aw-bl { width: 200px; height: 130px; position: relative; } .aw-bl canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.aw-empty h3 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.aw-empty p { color: var(--a-mut2); font-size: 14px; max-width: 46ch; }
.aw-sugs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 620px; margin-top: 4px; }
.aw-sugs span { text-align: left; background: var(--a-bg1); border: 1px solid var(--a-b); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; transition: border-color .3s; }
.aw-sugs span.hot { border-color: #a678f0; }
.aw-col { position: absolute; inset: 0; max-width: 780px; margin: 0 auto; padding: 22px 24px 12px; display: flex; flex-direction: column; gap: 20px; justify-content: flex-end; }
.aw-u { align-self: flex-end; max-width: 80%; background: var(--a-bg2); border: 1px solid var(--a-b); border-radius: 18px 18px 4px 18px; padding: 10px 14px; line-height: 1.55; animation: awIn .4s both; }
.aw-r { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; animation: awIn .4s both; }
.aw-av { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #c9a2ff, #6d3fd0 70%); box-shadow: 0 0 18px rgba(166,120,240,.45); margin-top: 2px; }
.aw-body { min-width: 0; line-height: 1.62; }
.aw-live { font-size: 12.5px; color: var(--a-mut2); display: flex; align-items: center; gap: 8px; }
.aw-live i { width: 8px; height: 8px; border-radius: 50%; background: #a678f0; animation: awPulse 1.2s infinite; flex: none; }
.aw-live .use { font-variant-numeric: tabular-nums; }
.aw-steps { font-size: 12.5px; color: var(--a-mut); margin-bottom: 8px; }
.aw-body p + p { margin-top: 8px; }
.aw-body b { font-weight: 600; }
.aw-ok { border: 1px solid rgba(166,120,240,.45); background: rgba(166,120,240,.08); border-radius: 14px; padding: 12px 14px; margin-top: 10px; display: grid; gap: 10px; }
.aw-ok h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #a678f0; font-weight: 600; }
.aw-ok label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.aw-ok label i { width: 16px; height: 16px; border-radius: 4px; background: #a678f0; flex: none; margin-top: 3px; display: grid; place-items: center; }
.aw-ok .row { display: flex; gap: 8px; }
.aw-ok .row span { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 100px; }
.aw-ok .row .do { background: #a678f0; color: #fff; transition: transform .15s, box-shadow .2s; } .aw-ok .row .do.press { transform: scale(.94); box-shadow: 0 0 0 6px rgba(166,120,240,.25); }
.aw-ok .row .no { border: 1px solid var(--a-b2); color: var(--a-text); background: transparent; }
.aw-done { margin-top: 10px; font-size: 13px; color: #34d399; }
.aw-thumbs { display: flex; gap: 8px; margin-top: 10px; } .aw-thumbs img { width: 62px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; border: 1px solid var(--a-b); }
.aw-usage { font-size: 11.5px; color: var(--a-mut); margin-top: 6px; font-variant-numeric: tabular-nums; }
.aw-composer { padding: 8px 22px 14px; flex: none; }
.aw-box { max-width: 780px; margin: 0 auto; background: var(--a-bg1); border: 1px solid var(--a-b2); border-radius: 22px; padding: 10px 12px 8px; display: grid; gap: 8px; transition: border-color .3s; }
.aw-box.focus { border-color: rgba(166,120,240,.6); }
.aw-in { font-size: 15px; line-height: 1.5; padding: 4px 6px; min-height: 24px; }
.aw-in .ph { color: var(--a-mut); }
.aw-in .caret { display: inline-block; width: 1.5px; height: 1.1em; background: #a678f0; vertical-align: -.2em; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.aw-bar { display: flex; align-items: center; gap: 8px; }
.aw-plus { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--a-b2); color: var(--a-mut2); font-size: 18px; display: grid; place-items: center; }
.aw-send { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: #a678f0; display: grid; place-items: center; opacity: .35; transition: opacity .2s, transform .15s; }
.aw-send.ready { opacity: 1; } .aw-send.press { transform: scale(.9); }
.aw-send svg { width: 17px; height: 17px; }
.aw-fine { max-width: 780px; margin: 6px auto 0; font-size: 11.5px; color: var(--a-mut); text-align: center; }
@keyframes awIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes awPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 640px) {
  .appwin { height: 600px; border-radius: 18px; }
  .aw-sugs { grid-template-columns: 1fr; } .aw-sugs span:nth-child(n+3) { display: none; }
  .aw-fine { display: none; } .aw-brand { display: none; }
  .aw-col { padding-inline: 14px; } .aw-composer { padding-inline: 12px; }
}

/* the loop: pinned, dark, one word at a time */
.loop { position: relative; height: 420vh; background: #0f0a1c; color: var(--dark-ink); }
.loop-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.loop-bg { position: absolute; inset: 0; background: radial-gradient(1100px 720px at 50% 58%, #40207f 0%, #1b0d3a 52%, var(--dark) 100%); transition: opacity .6s; }
.loop-bg.red { background: radial-gradient(1100px 720px at 50% 58%, #6e1026 0%, #2a0712 55%, var(--dark) 100%); opacity: 0; }
.loop[data-step="3"] .loop-bg.red { opacity: 1; }
.loop-lines { position: absolute; inset: -10% 0 auto 8%; font-family: var(--mono); font-size: clamp(11px, 1.3vw, 17px); line-height: 2.1; color: rgba(220,200,255,.16); white-space: pre; transition: opacity .6s; transform: translateY(calc(var(--lp, 0) * -40%)); }
.loop:not([data-step="0"]) .loop-lines { opacity: 0; }
.loop-words { position: relative; width: 100%; height: 100%; }
.lw { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.5vw, 30px); text-align: center; padding-inline: var(--gutter); opacity: 0; filter: blur(22px); transform: scale(1.08); transition: opacity .7s cubic-bezier(.22,1,.36,1), filter .7s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.lw.on { opacity: 1; filter: none; transform: none; }
.lw.past { transform: scale(.94); }
.lw .word { font-size: clamp(76px, 21vw, 300px); font-weight: 900; letter-spacing: -.04em; line-height: .9; position: relative; }
.lw .word.glowtext { background: linear-gradient(180deg, #fff 10%, #d9c4ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 80px rgba(166,120,240,.45); }
.lw .word.fill { background-size: cover; background-position: 50% 35%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.lw .word.kill { color: #ffe3e6; text-shadow: 0 0 60px rgba(255,77,94,.55); }
.lw .strike { position: absolute; left: -4%; top: 50%; height: .075em; width: 0; background: var(--red); box-shadow: 0 0 40px var(--red); transition: width .7s .25s cubic-bezier(.65,0,.35,1); }
.lw.on .strike { width: 108%; }
.lw .say { font-size: clamp(17px, 2vw, 26px); color: var(--dark-mut); font-weight: 500; letter-spacing: -.01em; }
.lw.k .say { color: #ffc9d0; }
.lw .detail { font-size: 15px; color: rgba(245,240,235,.62); max-width: 40ch; line-height: 1.55; }
.loop-rail { position: absolute; left: 50%; bottom: clamp(24px, 5vh, 48px); transform: translateX(-50%); display: flex; gap: 8px; }
.loop-rail span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; padding: 6px 11px; border-radius: 100px; color: rgba(245,240,235,.45); border: 1px solid rgba(245,240,235,.12); transition: color .3s, border-color .3s, background .3s; }
.loop-rail span.on { color: #fff; border-color: rgba(166,120,240,.8); background: rgba(166,120,240,.2); }
.loop[data-step="3"] .loop-rail span.on { border-color: rgba(255,77,94,.8); background: rgba(255,77,94,.2); }
.loop-intro { position: absolute; top: clamp(70px, 12vh, 120px); left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,240,235,.5); }
.reduce .loop { height: auto; }
.reduce .loop-stage { position: static; height: auto; padding-block: 90px; }
.reduce .loop-words { display: grid; gap: 70px; }
.reduce .lw { position: static; opacity: 1; filter: none; transform: none; }
.reduce .lw .strike { width: 108%; }
.reduce .loop-rail, .reduce .loop-lines { display: none; }

/* designer: a person finishes every ad */
.design-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 860px) { .design-grid { grid-template-columns: 1fr; } }
.bigword { font-family: var(--brand); font-size: clamp(72px, 12vw, 170px); font-weight: 800; letter-spacing: -.055em; text-transform: lowercase; line-height: .9; }
.bigword b { color: var(--steady-red); }
.design-copy .sub { margin-top: 22px; }
.edit { position: relative; width: min(100%, 440px); margin-inline: auto; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 100px rgba(40,20,90,.28); }
.edit img { width: 100%; height: 100%; object-fit: cover; }
.edit .hl { position: absolute; left: 8%; right: 8%; top: 7%; text-align: center; color: #fff; line-height: 1; }
.edit .hl .draft { font-weight: 600; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.45); display: block; transition: opacity .35s; }
.edit .hl .final { font-family: var(--brand); font-weight: 800; font-size: clamp(26px, 3.3vw, 38px); letter-spacing: -.045em; text-transform: lowercase; text-shadow: 0 2px 14px rgba(0,0,0,.35); position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.edit .hl .final b { color: var(--steady-red); }
.edit .box { position: absolute; left: 6%; right: 6%; top: 4.5%; height: 21%; border: 2px solid var(--p); border-radius: 4px; opacity: 0; transition: opacity .3s; }
.edit .box i { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid var(--p); border-radius: 2px; }
.edit .box i:nth-child(1) { left: -6px; top: -6px; } .edit .box i:nth-child(2) { right: -6px; top: -6px; } .edit .box i:nth-child(3) { left: -6px; bottom: -6px; } .edit .box i:nth-child(4) { right: -6px; bottom: -6px; }
.edit .cursor { position: absolute; left: 100%; top: 70%; display: flex; align-items: flex-start; gap: 2px; transition: left 1s cubic-bezier(.65,0,.35,1), top 1s cubic-bezier(.65,0,.35,1); }
.edit .cursor svg { width: 26px; height: 26px; }
.edit .cursor span { margin-top: 18px; background: var(--p); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 100px; white-space: nowrap; }
.edit.s1 .cursor { left: 62%; top: 12%; }
.edit.s2 .box { opacity: 1; }
.edit.s3 .hl .draft { opacity: 0; } .edit.s3 .hl .final { opacity: 1; }
.edit .kept { position: absolute; right: 12px; bottom: 12px; background: rgba(22,18,31,.86); color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 100px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.edit.s4 .kept { opacity: 1; transform: none; }

/* both shapes */
.shapes { overflow: hidden; padding-block: 8px 20px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rail { display: flex; gap: 22px; width: max-content; animation: rail 48s linear infinite; }
.shapes:hover .rail { animation-play-state: paused; }
@keyframes rail { to { transform: translateX(-50%); } }
.pair { display: flex; gap: 14px; align-items: flex-end; }
.shape { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shape .frame { border-radius: 16px; overflow: hidden; background: #ddd; position: relative; box-shadow: 0 20px 50px rgba(40,20,90,.16); }
.shape.feed .frame { width: 230px; aspect-ratio: 4 / 5; }
.shape.story .frame { width: 190px; aspect-ratio: 9 / 16; }
.shape img { width: 100%; height: 100%; object-fit: cover; }
.shape .story-hl { position: absolute; left: 10px; right: 10px; top: 12%; text-align: center; font-family: var(--brand); font-weight: 800; font-size: 22px; letter-spacing: -.045em; line-height: 1; text-transform: lowercase; color: var(--steady-ink); }
.shape .story-hl.on-dark { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.shape .story-hl b { color: var(--steady-red); }
.shape .tag { font-family: var(--mono); font-size: 11px; color: var(--mut); background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 4px 10px; }
.reduce .rail { animation: none; }

/* landing pages: Steady's page per person */
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 3vw, 36px); align-items: end; position: relative; max-width: 1000px; margin-inline: auto; }
.phones .rig:nth-child(2) { transform: translateY(-34px); }
@media (max-width: 760px) { .phones { grid-template-columns: 1fr; max-width: 360px; } .phones .rig:nth-child(2) { transform: none; } .phones .rig:nth-child(n+2) { display: none; } }
.rig .ptag { font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(22,18,31,.86); border-radius: 100px; padding: 6px 14px; display: table; margin: 0 auto 14px; white-space: nowrap; }
.phone { border-radius: 30px; overflow: hidden; background: var(--steady-bg); box-shadow: 0 40px 110px rgba(40,20,90,.28), 0 0 0 1px rgba(22,18,31,.08); position: relative; }
.pg { color: var(--steady-ink); font-family: var(--brand); padding-bottom: 18px; }
.pg .m { font-size: 10px; font-weight: 600; text-transform: lowercase; color: #5b6652; }
.pg .promo { text-align: center; padding: 8px; border-bottom: 1px solid rgba(28,36,24,.12); }
.pg .hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.pg .logo { font-weight: 800; font-size: 21px; letter-spacing: -.05em; color: var(--steady); } .pg .logo b { color: var(--steady-red); }
.pg .bars { display: flex; flex-direction: column; gap: 4px; width: 18px; } .pg .bars i { height: 1.5px; background: var(--steady-ink); } .pg .bars i:last-child { width: 11px; }
.pg .hero-img { margin: 0 12px; aspect-ratio: 4 / 3.6; border-radius: 14px; background-size: cover; background-position: 50% 35%; position: relative; }
.pg .hero-img span { position: absolute; left: 8px; bottom: 8px; background: var(--steady); color: var(--steady-bg); padding: 3px 9px; border-radius: 100px; font-size: 10px; font-weight: 600; text-transform: lowercase; }
.pg .stars { padding: 10px 16px 0; } .pg .stars b { color: var(--steady-ink); }
.pg h4 { font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: .98; letter-spacing: -.045em; text-transform: lowercase; margin: 6px 16px 0; }
.pg h4 b { color: var(--steady-red); }
.pg .psub { font-size: 12px; line-height: 1.45; color: #3c4636; padding: 7px 16px 0; font-family: var(--sans); }
.pg .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 16px 0; }
.pg .facts b { display: block; font-size: 11.5px; font-weight: 700; margin-top: 1px; }
.pg .atc { margin: 14px 14px 0; background: var(--steady); color: var(--steady-bg); border-radius: 100px; padding: 12px 18px; display: flex; justify-content: space-between; font-weight: 700; font-size: 13.5px; transition: transform .15s; }
.pg .buy { margin: 7px 14px 0; border: 1px solid var(--steady-ink); border-radius: 100px; padding: 11px 18px; text-align: center; font-weight: 700; font-size: 13.5px; }
.toast { position: absolute; left: 50%; top: 58%; transform: translate(-50%, 10px) scale(.96); background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 100px; white-space: nowrap; box-shadow: 0 16px 40px rgba(22,18,31,.35); opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.34,1.56,.64,1); z-index: 2; }
.phones.order .toast { opacity: 1; transform: translate(-50%, 0) scale(1); }
.phones.press .rig:nth-child(2) .atc { transform: scale(.96); }

/* tools feed */
.tools { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 860px) { .tools { grid-template-columns: 1fr; } }
.feed { display: flex; flex-direction: column; gap: 12px; }
.note { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(40,20,90,.1), 0 0 0 1px rgba(22,18,31,.05); min-width: 0; }
.js .note { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .5s, transform .6s cubic-bezier(.34,1.56,.64,1); }
.js .note.on { opacity: 1; transform: none; }
.note .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none; }
.note .nt { font-size: 14px; font-weight: 700; } .note .nt span { color: var(--mut); font-weight: 500; margin-left: 6px; }
.note .nb { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); margin-top: 2px; } .note .nb b { font-weight: 600; }
.note .st { margin-left: auto; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 100px; flex: none; background: var(--warn-soft); color: var(--warn); transition: background .3s, color .3s; }
.note .st.done { background: var(--good-soft); color: var(--good); }
.note > div:nth-child(2) { min-width: 0; }

/* product: what the app does */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cell { background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 0 0 1px rgba(22,18,31,.06); display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.cell:hover { box-shadow: 0 24px 60px rgba(40,20,90,.14), 0 0 0 1px rgba(166,120,240,.35); transform: translateY(-2px); }
.cell p { color: var(--mut); font-size: 15px; }
.cell .where { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--p2); }
.cell.w3 { grid-column: span 3; } .cell.w2 { grid-column: span 2; } .cell.w4 { grid-column: span 4; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cell.w3, .cell.w2, .cell.w4 { grid-column: span 1; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } }
.chat { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.chat .q { align-self: flex-end; background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 16px 16px 4px 16px; font-size: 14px; max-width: 85%; }
.chat .a { background: var(--bg-2); padding: 11px 14px; border-radius: 16px 16px 16px 4px; font-size: 14px; max-width: 92%; }
.chat .ok { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid rgba(166,120,240,.45); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; }
.chat .ok i { width: 16px; height: 16px; border-radius: 4px; background: var(--p); flex: none; }
.chat .ok em { margin-left: auto; white-space: nowrap; font-style: normal; font-weight: 600; font-size: 12.5px; background: var(--ink); color: #fff; padding: 5px 10px; border-radius: 100px; }
.chat .use { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.minis { display: flex; gap: 8px; margin-top: 6px; }
.minis img { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.minis .st9 { width: 46px; aspect-ratio: 9 / 16; }
.spark { height: 64px; margin-top: 4px; }
.spark path.l { fill: none; stroke: var(--p); stroke-width: 2.2; }
.spark path.a { fill: url(#sg); }
.levels { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 13.5px; }
.levels div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--bg-2); }
.levels b { font-variant-numeric: tabular-nums; }

/* the table where a loser is paused */
.dash { background: #0e0c14; border-radius: 24px; color: var(--dark-ink); box-shadow: 0 50px 120px rgba(20,8,50,.35); overflow: hidden; }
.dash-scroll { overflow-x: auto; }
.dash table { width: 100%; min-width: 720px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dash caption { text-align: left; padding: 20px 24px; font-size: 18px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.07); }
.dash caption span { color: #9298a8; font-weight: 500; font-size: 14px; margin-left: 10px; }
.dash caption em { float: right; font-style: normal; color: #9298a8; font-size: 14px; font-weight: 500; }
.dash th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a39bb8; font-weight: 500; text-align: left; padding: 12px 24px; }
.dash td { padding: 12px 24px; border-top: 1px solid rgba(255,255,255,.05); font-size: 15px; }
.dash td.n, .dash th.n { text-align: right; }
.dash .nm { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.dash .nm img { width: 34px; height: 42px; object-fit: cover; border-radius: 6px; }
.stt { display: inline-flex; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 100px; background: rgba(52,211,153,.14); color: #34d399; white-space: nowrap; transition: background .3s, color .3s; }
.stt.off { background: rgba(248,113,113,.16); color: #f87171; }
.dash tr.lose td { transition: color .4s; }
.dash.paused tr.lose td { color: #f87171; }
/* phones: Orders and ROAS drop out so the Status column, where the loser
   pauses, stays on screen without a sideways scroll */
@media (max-width: 640px) {
  .dash table { min-width: 0; table-layout: fixed; }
  .dash th:nth-child(3), .dash td:nth-child(3), .dash th:nth-child(5), .dash td:nth-child(5) { display: none; }
  .dash th:nth-child(2) { width: 19%; } .dash th:nth-child(4) { width: 23%; } .dash th:nth-child(6) { width: 74px; }
  .dash caption { padding: 16px 14px; font-size: 16px; }
  .dash caption em { float: none; display: block; margin-top: 4px; }
  .dash caption span { margin-left: 8px; }
  .dash th, .dash td { padding: 10px 8px; }
  .dash th:first-child, .dash td:first-child { padding-left: 14px; }
  .dash th:last-child, .dash td:last-child { padding-right: 14px; text-align: right; }
  .dash th { font-size: 10px; letter-spacing: .06em; }
  .dash td { font-size: 13.5px; }
  .dash .nm { gap: 8px; font-size: 13px; line-height: 1.3; }
  .dash .nm img { width: 26px; height: 32px; flex: none; }
  .stt { font-size: 11.5px; padding: 4px 9px; }
}
@media (max-width: 380px) {
  .dash .nm img { display: none; }
  .dash th, .dash td { padding-inline: 5px; }
  .dash td { font-size: 12.5px; }
  .dash th:nth-child(6) { width: 66px; }
  .stt { font-size: 11px; padding: 4px 7px; }
}
.dash-note { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }

/* every order, traced */
.trace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 5vw, 70px); position: relative; max-width: 1000px; margin-inline: auto; }
.trace svg.wire { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.trace svg.wire path { stroke: var(--p); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .2s; }
.trace.in svg.wire path { stroke-dashoffset: 0; }
.tc { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(40,20,90,.14), 0 0 0 1px rgba(22,18,31,.05); position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.tc .body { aspect-ratio: 4 / 4.4; position: relative; }
.tc .body > img { width: 100%; height: 100%; object-fit: cover; }
.tc .lab { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-weight: 600; padding: 14px 18px; border-top: 1px solid var(--line); }
.tc .mini-page { background: var(--steady-bg); padding: 16px; height: 100%; display: flex; flex-direction: column; gap: 12px; font-family: var(--brand); }
.tc .mini-page .ph { flex: 1; border-radius: 12px; background: url(img/steady/runner-photo.jpg) 50% 70% / cover; }
.tc .mini-page b { font-weight: 800; font-size: clamp(20px, 2.4vw, 28px); line-height: 1; letter-spacing: -.045em; color: var(--steady-ink); text-transform: lowercase; }
.tc .mini-page b i { color: var(--steady-red); font-style: normal; }
.tc .mini-page span { background: var(--steady); color: #fff; border-radius: 100px; padding: 8px 12px; font-size: 12px; font-weight: 700; text-transform: lowercase; }
.tc .paid { padding: clamp(18px, 3vw, 30px); display: flex; flex-direction: column; gap: 12px; height: 100%; }
.tc .paid .ck { width: 52px; height: 52px; border-radius: 50%; background: var(--good-soft); display: grid; place-items: center; }
.tc .paid h3 { font-size: clamp(24px, 2.8vw, 34px); }
.tc .paid p { color: var(--mut); font-size: 14px; }
.tc .paid .by { margin-top: auto; font-size: 14px; } .tc .paid .by b { display: block; }
.chip { position: absolute; z-index: 2; left: 0; top: 0; font-family: var(--mono); font-size: 12px; background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 100px; white-space: nowrap; opacity: 0; transition: opacity .3s; box-shadow: 0 8px 20px rgba(22,18,31,.25); }
/* phones: the cards stack and the click id travels down between them */
@media (max-width: 760px) {
  .trace { grid-template-columns: 1fr; max-width: 360px; gap: 46px; }
  .trace .tc:nth-of-type(3) .body { aspect-ratio: auto; }
  .tc .paid .by { margin-top: 18px; }
  .trace svg.wire path { stroke-dasharray: 2400; stroke-dashoffset: 2400; }
  .trace.in svg.wire path { stroke-dashoffset: 0; }
}

/* two ways to buy */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } }
.way { border-radius: 28px; padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.way.saas { background: #fff; box-shadow: 0 0 0 1px rgba(22,18,31,.07), 0 30px 80px rgba(60,30,130,.12); }
.way.agency { background: #120d1f; color: var(--dark-ink); background-image: radial-gradient(700px 400px at 90% 0%, rgba(124,77,219,.45), transparent 70%); }
.way h3 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.04em; font-weight: 800; }
.way .for { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--p2); }
.way.agency .for { color: var(--dark-mut); }
.way p { color: var(--mut); } .way.agency p { color: rgba(245,240,235,.7); }
.way ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.way li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.45; }
.way li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--p); margin-top: .55em; flex: none; }
.way .price { font-size: 15px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); }
.way.agency .price { background: rgba(255,255,255,.06); }
.way .price b { font-size: 19px; }
.way .cta { justify-content: flex-start; margin-top: auto; }
.way.agency .btn.ghost { color: var(--dark-ink); border-color: rgba(245,240,235,.25); background: transparent; }
.paths { display: flex; gap: 8px; flex-wrap: wrap; }
.paths a { font-size: 13.5px; padding: 7px 13px; border-radius: 100px; border: 1px solid rgba(245,240,235,.18); color: rgba(245,240,235,.85); transition: border-color .2s; }
.paths a:hover { border-color: rgba(245,240,235,.5); }

/* pricing */
.price-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
.rate { background: #fff; border-radius: 24px; box-shadow: 0 0 0 1px rgba(22,18,31,.07); overflow: hidden; }
.rate div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); align-items: baseline; }
.rate div:first-child { border-top: 0; background: var(--bg-2); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); padding-block: 12px; }
.rate b { font-weight: 600; } .rate span { color: var(--mut); font-size: 14px; display: block; margin-top: 2px; }
.rate em { font-style: normal; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.side { display: flex; flex-direction: column; gap: 16px; }
.pack { background: var(--ink); color: #fff; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 12px; background-image: radial-gradient(500px 300px at 100% 0%, rgba(166,120,240,.5), transparent 70%); }
.pack .big { font-size: 56px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.pack .big small { font-size: 18px; font-weight: 500; color: rgba(255,255,255,.65); letter-spacing: 0; margin-left: 6px; }
.pack p { color: rgba(255,255,255,.72); font-size: 15px; }
.perk { background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 0 0 1px rgba(22,18,31,.07); font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
.perk p { color: var(--mut); font-size: 14.5px; }

/* proof */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; } }
.case { background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 0 0 1px rgba(22,18,31,.07); display: flex; flex-direction: column; gap: 6px; transition: box-shadow .3s; }
.case:hover { box-shadow: 0 20px 50px rgba(40,20,90,.12), 0 0 0 1px rgba(166,120,240,.35); }
.case .n { font-size: clamp(34px, 4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.case .n small { font-size: .5em; color: var(--mut); font-weight: 600; }
.case p { color: var(--mut); font-size: 14.5px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 44px; margin-top: 48px; }
.logos img { height: 24px; width: auto; filter: grayscale(1) brightness(0); opacity: .55; transition: opacity .2s; }
.logos img.big { height: 34px; } .logos img:hover { opacity: .9; }
.logos img.asis { filter: grayscale(1); height: 30px; opacity: .7; }   /* white letters with a black outline: blacking it out fills it in */
.backed { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; font-size: 14px; color: var(--mut); }
.backed img { height: 18px; filter: brightness(0); opacity: .7; }

/* the film */
.film { position: relative; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 50px 120px rgba(20,8,50,.35); aspect-ratio: 16 / 9; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); transition: opacity .3s; }
.film .play span { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.92); color: var(--ink); font-weight: 600; padding: 14px 22px 14px 16px; border-radius: 100px; box-shadow: 0 20px 50px rgba(0,0,0,.3); transition: transform .2s; }
.film .play:hover span { transform: scale(1.04); }
.film .play i { width: 34px; height: 34px; border-radius: 50%; background: var(--p); display: grid; place-items: center; }
.film.playing .play { opacity: 0; pointer-events: none; }
.film-alt { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.film-alt button { font-size: 14px; padding: 8px 14px; border-radius: 100px; border: 1px solid rgba(22,18,31,.14); background: #fff; }
.film-alt button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* questions + intake */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
@media (max-width: 760px) { .qa { grid-template-columns: 1fr; } }
.qa div { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.qa p { color: var(--mut); font-size: 15.5px; }
.intake { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .intake { grid-template-columns: 1fr; } }
form { background: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 0 0 1px rgba(22,18,31,.07), 0 30px 80px rgba(60,30,130,.1); display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; }
.field input, .field select, .field textarea { font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(22,18,31,.14); background: var(--bg); color: var(--ink); width: 100%; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px rgba(166,120,240,.2); }
.send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.send .msg { font-size: 14px; color: var(--mut); }

.loop-bg { background: radial-gradient(1100px 720px at 50% 58%, #40207f 0%, #1b0d3a 55%, #0f0a1c 100%); }

/* end card */
.end { background: #0d0b14; color: var(--dark-ink); text-align: center; position: relative; overflow: hidden; }
.end::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1000px 700px at 50% 45%, #2a1f4a 0%, #0d0b14 60%, #06050a 100%); }
.end .wrap { position: relative; padding-block: clamp(90px, 12vw, 150px) 50px; }
.end .lines { display: flex; flex-direction: column; gap: 4px; font-size: clamp(24px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; }
.end .lines .ai { color: var(--p); }
.end .wm { margin-bottom: clamp(34px, 5vw, 60px); font-weight: 600; font-size: clamp(40px, 8vw, 110px); letter-spacing: .36em; padding-left: .36em; text-transform: uppercase; display: inline-flex; align-items: center; }
.end .wm span { color: var(--p); }
.end .cta { margin-top: 36px; }
.end .btn.ghost { color: var(--dark-ink); border-color: rgba(245,240,235,.25); background: transparent; }
footer { background: #06050a; color: #9298a8; font-size: 14px; position: relative; }
footer .wrap { display: flex; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; padding-block: 28px 40px; border-top: 1px solid rgba(255,255,255,.08); }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a:hover { color: #fff; }

/* phones: the same reveals without the blur. A blur filter animating on big
   layers (the app window with its live canvas, the full-screen loop words)
   drops frames on iPhone Safari and has crashed the tab before. */
@media (max-width: 760px) {
  .js .rv, .js [data-words] .w, .lw { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js [data-words] .w, .js .note { transition: none; opacity: 1; filter: none; transform: none; }
}