/* Riverside Co-Creator case study. Self-contained: Riverside's own dark look
   (tokens from the file's "Co-creator Chat System" page), Inter + DM Mono.
   Desktop (>=1100px) is designed at 1440 and zoomed to the window (--z, riverside.js);
   below that everything stacks. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("fonts/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("fonts/dm-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --c1100: #0d0d0d; --c1000: #151515; --c900: #1d1d1d; --c800: #222; --c700: #2b2b2b; --c600: #393939;
  --c400: #565656; --c300: #888; --c200: #bbb; --c150: #dbdbdb; --c100: #fafafa;
  --p900: #5e3ac3; --p800: #7848ff; --p700: #875eff; --p500: #b196ff; --p300: #d5c7ff; --p100: #f2eeff;
  --ink: var(--c100); --ink-soft: var(--c200); --ink-mute: var(--c300);
  --line: rgba(255, 255, 255, .08);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: 20px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--c1100); }
body {
  margin: 0; background: var(--c1100); color: var(--ink);
  font: 400 16px/1.6 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .kicker, .card h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: inherit; }

/* ---------- Header (styles come from header.css; this keeps it fixed and hiding on scroll) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 64px;
  background: rgba(13, 13, 13, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform .35s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 64px; }

/* ---------- Sections ---------- */
.section { position: relative; }
.section__inner { position: relative; width: 1440px; margin: 0 auto; padding: 0 120px; }
@media (min-width: 1100px) {
  .section__inner, .site-header__inner { zoom: var(--z, 1); }
  .site-header__inner { width: 1440px; margin: 0 auto; }
  .site-header { height: calc(64px * var(--z, 1)); }
}

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 "DM Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--p500);
}
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.h2 { font-size: 44px; line-height: 52px; font-weight: 600; letter-spacing: -.02em; margin-top: 18px; }
.h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
/* Leads: a lighter grey and softer bolds, so the eye does not jump between grey and white */
.lead { font-size: 18px; line-height: 30px; color: #c9c9c9; margin-top: 20px; }
.lead b { font-weight: 600; color: #f2f2f2; }
.body { font-size: 16px; line-height: 26px; color: var(--ink-soft); }
.grad { background: linear-gradient(92deg, #fff 10%, var(--p300) 55%, var(--p700) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Hero ---------- */
/* Same composition as the other case studies: logo, title, line and role on the left, the product on the right */
.hero { padding-top: 64px; overflow: hidden; border-bottom: 1px solid var(--c800); background: linear-gradient(180deg, var(--c1100), #120c22); }
.hero .section__inner { padding: 0; }
.hero__glow {
  position: absolute; inset: -20% -10% auto; height: 900px; pointer-events: none;
  background:
    radial-gradient(40% 45% at 70% 45%, rgba(120, 72, 255, .38), transparent 70%),
    radial-gradient(30% 35% at 20% 20%, rgba(177, 150, 255, .14), transparent 70%);
  filter: blur(10px); animation: glow 12s ease-in-out infinite alternate;
}
@keyframes glow { to { transform: translate3d(-4%, 3%, 0) scale(1.06); } }
.hero__grid { position: relative; min-height: 760px; display: grid; grid-template-columns: 460px 1fr; column-gap: 72px; align-items: center; padding: 72px 96px; }
.hero__text { position: relative; z-index: 2; }
.hero__logo { height: 200px; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.hero__logotype { display: block; width: 372px; height: auto; }
.hero__title { margin-top: 24px; font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--p500); }
.hero__sub { margin-top: 10px; font-size: 22px; line-height: 32px; font-weight: 400; color: var(--ink-soft); }
.hero__meta { margin-top: 28px; display: grid; gap: 2px; font-size: 13px; line-height: 1.9; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #b59bff; }
.hero__pills { list-style: none; margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); max-width: 500px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__pills li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c600); background: rgba(255, 255, 255, .03); font-size: 13px; line-height: 18px; color: var(--c200); }
.hero__pills b { font-weight: 600; color: #fff; }

/* Who we designed for: same composition as the other case studies (icon, label, title, line) */
.aud { margin-top: 96px; }
.aud__head { font-size: 26px; line-height: 34px; font-weight: 600; }
.aud__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 32px; }
.aud__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--p800); color: #fff; box-shadow: 0 0 0 6px rgba(120, 72, 255, .12); }
.aud__icon svg { width: 22px; height: 22px; }
.aud__label { display: block; margin-top: 20px; font: 500 12px/16px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--p500); }
.aud__item h3 { margin-top: 8px; font-size: 17px; line-height: 24px; font-weight: 500; }
.aud__item p { margin-top: 6px; font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.hero__meta span { color: rgba(255, 255, 255, .8); }
.nobr { white-space: nowrap; font-style: inherit; }
.mobile-only { display: none; }
.step-dots { display: none; }
.hero__stage { position: relative; }
.hero__stage .stage { transform: rotate(-3deg); }
.hero__stage .browser { width: 780px; }
/* The screen sits back a little so the chat panel in front reads first */
.hero__stage .browser::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(9, 7, 18, .46); pointer-events: none; }
.hero__stage .browser__screen { filter: saturate(.85); }
.hero__stage .lens { left: 470px; right: auto; top: 150px; width: 290px; }
.hero__stage .lens__tag { left: 470px; right: auto; top: 114px; }
.meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--c150);
}
.chip b { font-weight: 500; color: var(--c300); }

/* ---------- Browser frame (screens are 1366x850, cropped to the bare page) ---------- */
.browser {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  background: var(--c1000); border: 1px solid var(--c700);
  box-shadow: 0 40px 120px -40px rgba(120, 72, 255, .45), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.browser__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--c900); border-bottom: 1px solid var(--c700); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--c600); }
.browser__bar span {
  margin: 0 auto; padding: 3px 14px; border-radius: 6px; background: var(--c1100);
  font: 400 11px/16px "DM Mono", monospace; color: var(--c300);
}
.browser__screen { position: relative; aspect-ratio: 1366 / 850; overflow: hidden; background: var(--c1100); }
.browser__screen--tall { aspect-ratio: 1366 / 850; }
.browser__screen > img, .frame > img { width: 100%; height: auto; }

/* Sequence frames cross-fade */
.seq .frame { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.seq .frame:first-child { position: relative; }
.seq.is-ready .frame { opacity: 0; }
.seq .frame.is-active, .seq:not(.is-ready) .frame:first-child { opacity: 1; z-index: 1; }
/* Tall pages scroll inside the frame */
.frame--scroll > img { transform: translateY(0); }
.frame--scroll.is-active > img { animation: page-scroll var(--scroll-dur, 7s) var(--ease) .8s forwards; }
@keyframes page-scroll { to { transform: translateY(var(--scroll-to)); } }

/* Shimmer over the transcript while the agent edits (the file's note asks for it) */
.shimmer { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s ease; overflow: hidden; border-radius: 6px; }
.frame.is-active .shimmer { opacity: 1; }
.shimmer::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, rgba(177, 150, 255, .22) 50%, transparent 80%);
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* "In progress" checklist: each step spins, then ticks, in the panel's own type (sizes in 1366px screen units) */
.browser__screen, .lens__plane { container-type: inline-size; }
.prog { position: absolute; z-index: 2; display: grid; pointer-events: none; font-family: "Inter", sans-serif; }
.prog__row { --u: calc(100cqw / 1366); display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(var(--rh) * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: calc(.2 * var(--u)); color: #8a8a8a; opacity: 0; white-space: nowrap; }
.prog__ic { position: relative; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.prog__ic::before, .prog__ic::after { content: ""; position: absolute; inset: 0; opacity: 0; }
.prog__ic::before { inset: calc(1.5 * var(--u)); border-radius: 50%; border: calc(1.6 * var(--u)) solid rgba(255, 255, 255, .22); border-top-color: #dbdbdb; }
.prog__ic::after { background: #b196ff; -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.prog { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Step i appears at i * 1.1s, spins for 1s, then ticks */
.prog { --pt: 1.1s; }
.frame.is-active .prog__row { animation: prog-in .35s ease calc(var(--i) * var(--pt) + .3s) both, prog-done .3s ease calc((var(--i) + 1) * var(--pt) + .2s) both; }
.frame.is-active .prog__ic::before { animation: prog-spin-show var(--pt) linear calc(var(--i) * var(--pt) + .3s) both, prog-spin .8s linear infinite; }
.frame.is-active .prog__ic::after { animation: prog-tick .3s ease calc((var(--i) + 1) * var(--pt) + .2s) both; }
@keyframes prog-in { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes prog-done { to { color: #dbdbdb; } }
@keyframes prog-spin-show { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes prog-spin { to { rotate: 360deg; } }
@keyframes prog-tick { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.lens__plane { position: absolute; }
/* Chat panel on its own, cropped from the screen and floated like the lens */
.stage--panel { display: flex; justify-content: center; }
.panelview {
  position: relative; margin: 0; width: 380px; overflow: hidden; border-radius: 18px; background: var(--c1000);
  border: 1px solid var(--c600); box-shadow: 0 0 0 6px rgba(120, 72, 255, .10), 0 40px 120px -40px rgba(120, 72, 255, .45), 0 40px 80px -24px rgba(0, 0, 0, .9);
}
.panelview__screen { position: absolute; inset: 0; }
.panelview .seq .frame { position: absolute; inset: 0; }
.panelview .frame > img { position: absolute; max-width: none; width: var(--pw); height: auto; left: var(--px); top: var(--py); }
/* Review: Editorial cuts gets selected, then the struck lines are deleted and the transcript closes the gap */
.ring { position: absolute; z-index: 2; pointer-events: none; border: 1.5px solid #7848ff; border-radius: 8px; box-shadow: 0 0 0 4px rgba(120, 72, 255, .18); opacity: 0; }
.frame.is-active .ring { animation: ring-in .4s ease .6s both; }
@keyframes ring-in { from { opacity: 0; scale: 1.03; } to { opacity: 1; scale: 1; } }
/* A result arrives: placeholder, then the thumbnail wipes in, the icons follow, and the reply is written word by word */
.rv { --u: calc(100cqw / 1366); position: absolute; z-index: 2; pointer-events: none; background: #151515; }
/* the "in progress" rows stay as they ended, then clear */
.prog--done .prog__row { opacity: 1; color: #dbdbdb; }
.prog--done .prog__ic::before { opacity: 0; }
.prog--done .prog__ic::after { opacity: 1; }
.frame.is-active .prog--done .prog__row { animation: rv-rows-out .4s ease .7s both; }
.frame.is-active .prog--done .prog__ic::before { animation: none; }
.frame.is-active .prog--done .prog__ic::after { animation: none; }
@keyframes rv-rows-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(-4 * var(--u))); } }
.frame.is-active .rv--rows { animation: rv-clear .5s ease 1.9s both; }
/* the placeholder slides up into the result's place; a spark blooms, the thumbnail opens from its centre in a
   bright bloom while the card glows, a light passes over it and it settles */
.rv--img { border-radius: calc(8 * var(--u)); overflow: hidden; transform: translateY(calc(var(--dy) * var(--u))); }
.frame.is-active .rv--img { animation: rv-move .8s var(--ease) 1s both, rv-glow 2s ease 2.6s both; }
@keyframes rv-move { from { transform: translateY(calc(var(--dy) * var(--u))); } to { transform: none; } }
@keyframes rv-glow { 0% { box-shadow: 0 0 0 0 rgba(120, 72, 255, 0); } 40% { box-shadow: 0 0 calc(40 * var(--u)) calc(3 * var(--u)) rgba(120, 72, 255, .45); } 100% { box-shadow: 0 0 0 0 rgba(120, 72, 255, 0); } }
.rv--img img { display: block; max-width: none; }
.rv--img .rv__ph { position: absolute; height: auto; }
.rv--img .shimmer { position: absolute; border-radius: 0; }
.frame.is-active .rv--img .shimmer { animation: rv-clear .8s ease 2.4s both; }
.rv--img .rv__thumb { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.frame.is-active .rv__thumb { animation: rv-open 1.4s ease-out 2.4s both; }
@keyframes rv-open {
  from { opacity: 0; transform: scale(1.04); filter: blur(calc(10 * var(--u))) brightness(1.3); }
  to { opacity: 1; transform: none; filter: none; }
}
.rv__sweep { position: absolute; z-index: 2; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%); transform: translateX(-100%); mix-blend-mode: screen; }
.frame.is-active .rv__sweep { animation: rv-sweep 1s ease-in-out 4s both; }
@keyframes rv-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.frame.is-active .rv--ic { animation: rv-clear .3s ease 4s both; }
@keyframes rv-clear { from { opacity: 1; } to { opacity: 0; } }
.rv--txt p { margin: 0; font-family: "Inter", sans-serif; font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); color: #e0e0e0; }
.rv--txt span { opacity: 0; }
.frame.is-active .rv--txt span { animation: thr-in .25s ease both; animation-delay: calc(4.2s + var(--i) * .06s); }
/* A picked answer: the row tints, gets a ring and a check, a beat before the next step */
.pick { --u: calc(100cqw / 1366); position: absolute; z-index: 2; pointer-events: none; border-radius: calc(8 * var(--u)); background: rgba(120, 72, 255, .10); box-shadow: 0 0 0 1px #b196ff; opacity: 0; }
.pick::after { content: ""; position: absolute; right: calc(12 * var(--u)); top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(-8 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.33 4.33 6 11.67 2.67 8.33' fill='none' stroke='%23b196ff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; transform: scale(.4); opacity: 0; }
.frame.is-active .pick { animation: ring-in .35s ease 1.5s both; }
.frame.is-active .pick::after { animation: qcheck .3s var(--ease) 1.7s both; }
.pick--plain::after { display: none; }
/* Live editing overlay: the transcript is rebuilt in HTML so each checklist step can act on it */
.edit { --u: calc(100cqw / 1366); position: absolute; z-index: 2; overflow: hidden; background: #0e0e0e; font-family: "Inter", sans-serif; font-size: calc(16 * var(--u)); line-height: calc(30 * var(--u)); color: #dddddd; pointer-events: none; }
.edit__scroll { padding-top: calc(6 * var(--u)); }
.ed__row { display: grid; grid-template-columns: calc(68 * var(--u)) 1fr; padding-right: calc(82 * var(--u)); }
.ed__ts { padding-left: calc(15 * var(--u)); font-size: calc(14 * var(--u)); color: #6f6f6f; }
.ed__who { color: #cef086; font-weight: 600; }
.ed__ch { color: #fff; font-weight: 600; }
.ed__p { margin: 0 0 calc(14 * var(--u)); }
.tk { display: inline-block; max-width: 32ch; overflow: hidden; vertical-align: bottom; white-space: nowrap; text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: calc(1.6 * var(--u)); }
.tk--p { padding: 0 calc(6 * var(--u)); border-radius: calc(4 * var(--u)); background: #1e1e1e; color: #8f8f8f; font-size: calc(13 * var(--u)); }
.tk--h { background: rgba(120, 72, 255, 0); color: inherit; white-space: normal; display: inline; max-width: none; overflow: visible; text-decoration: none; border-radius: calc(3 * var(--u)); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.edit__sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; opacity: 0; background: linear-gradient(100deg, transparent 0%, rgba(120, 72, 255, .16) 45%, rgba(177, 150, 255, .28) 50%, rgba(120, 72, 255, .16) 55%, transparent 100%); transform: translateX(-100%); }
.frame.is-active .edit__scroll { animation: ed-scroll 5.2s cubic-bezier(.4, 0, .6, 1) .6s both; }
.frame.is-active .tk--p { animation: tk-strike .3s ease calc(.5s + var(--k) * .3s) both, tk-gone .5s cubic-bezier(.65, 0, .35, 1) calc(1.3s + var(--k) * .3s) both; }
.frame.is-active .tk--f { animation: tk-strike .3s ease calc(3.2s + var(--k) * .28s) both, tk-gone .5s cubic-bezier(.65, 0, .35, 1) calc(3.9s + var(--k) * .28s) both; }
.frame.is-active .edit__sweep { animation: ed-sweep 1.8s ease-in-out 5.8s both; }
.frame.is-active .tk--h { animation: tk-mark .6s ease calc(6.3s + var(--k) * .5s) both; }
@keyframes ed-scroll { to { transform: translateY(calc(-150 * var(--u))); } }
@keyframes tk-strike { from { text-decoration-color: transparent; } to { text-decoration-color: #ff7a7a; color: #ff9a9a; } }
@keyframes tk-gone { from { max-width: 32ch; } to { max-width: 0; padding: 0; margin-right: calc(-4 * var(--u)); opacity: 0; } }
@keyframes ed-sweep { 0% { opacity: 0; transform: translateX(-100%); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%); } }
@keyframes tk-mark { to { background: rgba(120, 72, 255, .38); color: #fff; } }
/* Review: cut passages are struck through, then removed while the script scrolls on */
.ed__cut .ed__p { margin: 0 0 calc(14 * var(--u)); max-height: calc(200 * var(--u)); overflow: hidden; }
.ed__x { color: #dddddd; text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: calc(1.6 * var(--u)); }
.frame.is-active .edit--review .edit__scroll { animation: ed-scroll-rv 8s cubic-bezier(.4, 0, .6, 1) 1.2s both; }
.frame.is-active .ed__cut .ed__x { animation: tk-strike .35s ease calc(1.4s + var(--k) * 2.2s) both; }
.frame.is-active .ed__cut .ed__p { animation: ed-collapse .6s cubic-bezier(.65, 0, .35, 1) calc(2.3s + var(--k) * 2.2s) both; }
@keyframes ed-scroll-rv { to { transform: translateY(calc(-330 * var(--u))); } }
@keyframes ed-collapse { from { opacity: 1; } 40% { opacity: 0; } to { opacity: 0; max-height: 0; margin-bottom: 0; } }

.vfx { --u: calc(100cqw / 1366); position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.vfx__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(177, 150, 255, .35), transparent); transform: translateX(-100%); }
.vfx__eq { position: absolute; left: calc(14 * var(--u)); bottom: calc(14 * var(--u)); display: flex; align-items: flex-end; gap: calc(3 * var(--u)); height: calc(22 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(13, 13, 13, .7); opacity: 0; }
.vfx__eq i { width: calc(3 * var(--u)); height: 100%; border-radius: calc(2 * var(--u)); background: #b196ff; transform-origin: bottom; transform: scaleY(.3); }
.frame.is-active .vfx { animation: vfx-clean 1.8s ease 8.6s both; backdrop-filter: brightness(.72) saturate(.6) contrast(.9); -webkit-backdrop-filter: brightness(.72) saturate(.6) contrast(.9); }
.frame.is-active .vfx__scan { animation: vfx-scan 1.6s ease-in-out 8.6s both; }
.frame.is-active .vfx__eq { animation: vfx-eq-show .4s ease 8.6s both; }
.frame.is-active .vfx__eq i { animation: vfx-eq .55s ease-in-out calc(8.6s + var(--j, 0) * .09s) 5 alternate; }
.vfx__eq i:nth-child(2) { --j: 1; } .vfx__eq i:nth-child(3) { --j: 2; } .vfx__eq i:nth-child(4) { --j: 3; } .vfx__eq i:nth-child(5) { --j: 4; }
@keyframes vfx-clean { to { backdrop-filter: none; -webkit-backdrop-filter: none; } }
@keyframes vfx-scan { 0% { opacity: 0; transform: translateX(-100%); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(400%); } }
@keyframes vfx-eq-show { to { opacity: 1; } }
@keyframes vfx-eq { to { transform: scaleY(1); } }
/* Four chat features in one gallery */
.feat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 48px; margin-top: 56px; }
.feat { display: grid; gap: 22px; }
.feat__cap { max-width: 420px; }
.feat__k { display: block; font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--purple-soft, #b196ff); }
.feat__cap p { margin: 8px 0 0; font-size: 16px; line-height: 26px; color: var(--ink-soft); }
.panelview--feat { width: min(380px, 100%); margin: 0; }
.chapter--feat .chapter__text { position: static; max-width: 640px; }

/* Clarify storyboard: the question cards in a row, then the plan */
.chapter--board .chapter__text { position: static; max-width: 640px; }
.win { position: relative; overflow: hidden; border-radius: 14px; background: #1b1b1b; border: 1px solid var(--c700, #2a2a2a); }
.win img { position: absolute; max-width: none; height: auto; }
.qboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.qcard { margin: 0; }
.qcard figcaption { margin-top: 14px; padding: 0 4px; }
.qcard b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.qcard span { display: block; margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--ink-soft); }
.plan { display: grid; grid-template-columns: 1fr 300px 300px; gap: 32px; align-items: start; margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--c800, #222); }
.plan__text p { margin: 10px 0 0; font-size: 16px; line-height: 26px; color: var(--ink-soft); max-width: 380px; }

/* Crop windows: the interesting region of a screen at readable size, two side by side for script + chat */
.cropview { margin: 0; position: relative; }
.cropview__screen { position: relative; }
.cropview .seq .frame { display: grid; grid-template-columns: var(--cols, 1fr); gap: 40px; align-items: start; }
.cw { position: relative; overflow: hidden; border-radius: 14px; background: #0e0e0e; border: 1px solid var(--c700); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.plane { position: absolute; container-type: inline-size; }
.plane > img { display: block; width: 100%; height: auto; max-width: none; }
.cw__lbl { display: block; margin-bottom: -26px; font-family: "DM Mono", monospace; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: #b196ff; }

.chapter--wide .stage--crop { padding: 0; }

/* Stacked windows: the script across the stage, the chat under it beside a note */
.cropview--stack .seq .frame { grid-template-columns: 1fr 384px; column-gap: 32px; row-gap: 14px; }
.cw--span { grid-column: 1 / -1; }
.cw__note { align-self: start; padding-top: 4px; }
.cw__note p { margin: 8px 0 0; max-width: 300px; font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.cropview--stack .cw__lbl + .cw--span { margin-top: 12px; }
.cropview--stack .cw__lbl { margin-bottom: 0; }
/* A lone chat panel window */
/* Two windows side by side: the chat panel overlaps the script a little, as in the editor */
.cropview--pair .seq .frame { grid-template-columns: 1fr 280px; grid-template-rows: auto auto; column-gap: 0; row-gap: 12px; align-items: start; }
.cropview--pair .cw__lbl { margin-bottom: 0; grid-row: 1; }
.cropview--pair .cw__lbl--a { grid-column: 1; }
.cropview--pair .cw__lbl--b, .cropview--pair .cw--b { grid-column: 2; margin-left: -72px; }
.cropview--pair .cw--a { grid-column: 1; grid-row: 2; }
.cropview--pair .cw--b { grid-row: 2; margin-top: 36px; z-index: 2; box-shadow: 0 0 0 6px rgba(13, 13, 13, .9), 0 40px 80px -24px rgba(0, 0, 0, .95); }
.cropview--pair { padding-bottom: 8px; }
.chapter--tight .chapter__stage { padding-right: 0; }

/* "Creating an editing plan": the spinner turns while the text shimmers */
.spin { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%; border: 1.5px solid #3a3a3a; border-top-color: #b196ff; box-shadow: 0 0 0 2px #151515; opacity: 0; }
.frame.is-active .spin { opacity: 1; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* A long chat column scrolls inside the panel's message area: by hand, with one slow auto pass */
.pscroll { --u: calc(100cqw / 1366); position: absolute; z-index: 3; overflow-y: auto; overscroll-behavior: contain; background: #151515; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.pscroll::-webkit-scrollbar { width: 6px; } .pscroll::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
.pscroll img { display: block; max-width: none; height: auto; }
.cropview .pscroll img { margin-bottom: calc(18 * var(--u)); } /* the box runs past the crop edge, so the last row still clears it */
.pscroll:focus-visible { outline: 2px solid #7848ff; outline-offset: -2px; }

/* "Creating an editing plan" drawn live so the shimmer sits on the words */
.ptext { --u: calc(100cqw / 1366); position: absolute; z-index: 2; pointer-events: none; white-space: nowrap; font-family: "Inter", sans-serif; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: calc(.1 * var(--u));
  color: transparent; background: linear-gradient(100deg, #8a8a8a 0 35%, #e9e4ff 50%, #8a8a8a 65% 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; }
.frame.is-active .ptext { animation: ptext 1.8s linear infinite; }
@keyframes ptext { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Chat panel beside a vertical clip (9:16) with animated captions */
.cropview--duo { display: grid; grid-template-columns: minmax(0, 384px) 262px; gap: 44px; align-items: center; justify-content: center; }
.cropview--duo .cropview__screen { width: 100%; }
.phone { position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #0e0e0e; border: 1px solid var(--c700); box-shadow: 0 0 0 6px rgba(120, 72, 255, .10), 0 40px 80px -24px rgba(0, 0, 0, .9); }
/* Two speakers stacked, as the vertical cut: the one talking pushes in, the other dims, in time with the captions */
.phone__half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: url("img/vertical.webp") center / 100% auto no-repeat; }
.phone__half--a { top: 0; background-position: center top; }
.phone__half--b { top: 50%; background-position: center bottom; }
.phone__half::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; }
@keyframes cut-a { 0% { transform: scale(1); } 66% { transform: scale(1.08); } 66.5%, 100% { transform: scale(1); } }
@keyframes cut-b { 0%, 66% { transform: scale(1); } 66.5% { transform: scale(1.02); } 100% { transform: scale(1.09); } }
@keyframes dim-a { 0%, 66% { opacity: 0; } 66.5%, 100% { opacity: .45; } }
@keyframes dim-b { 0%, 66% { opacity: .45; } 66.5%, 100% { opacity: 0; } }
.phone__tag { position: absolute; top: 12px; left: 12px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .55); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .06em; color: #fff; }
.cap { position: absolute; left: 8%; right: 8%; top: 44%; text-align: center; font-family: "Inter", sans-serif; font-weight: 800; font-size: clamp(16px, 7.6cqw, 24px); line-height: 1.25; text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7); }
.phone { container-type: inline-size; }
.phone .cap { z-index: 3; }
.cap__l { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .3em; opacity: 0; }
.cap__w { display: inline-block; padding: 0 .18em; border-radius: .25em; opacity: 0; transform: scale(.6) translateY(.2em); }
/* The clip follows the checklist beside it (9 s, rows of 1.9 s from .3 s):
   names 0.3-2.1, captions 2.2-4.0 (four lines of 1.7 s, they then stay), sound 4.1-5.9, hook 6.0-7.8.
   riverside.js restarts .is-run each time the checklist frame restarts. */
.phone__name { position: absolute; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 6px; background: rgba(13, 13, 13, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 600 12px/16px "Inter", sans-serif; color: #fff; opacity: 0; }
.phone__name::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: #b196ff; }
.phone__name--a { top: 40px; }
.phone__name--b { bottom: 12px; }
.phone.is-run .phone__name { animation: name-in .5s var(--ease) both; }
.phone.is-run .phone__name--a { animation-delay: .5s; }
.phone.is-run .phone__name--b { animation-delay: 1.1s; }
@keyframes name-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.phone.is-run .cap__l { animation: cap-on 1.7s linear calc(2.2s + var(--i) * 1.7s) both; }
.phone.is-run .cap__w { animation: cap-pop .5s ease calc(2.2s + var(--i) * 1.7s + var(--k) * .28s) both; }
@keyframes cap-on { 0% { opacity: 0; } 1%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cap-pop {
  0% { opacity: 0; transform: scale(.6) translateY(.2em); background: #7848ff; }
  40% { opacity: 1; transform: scale(1.12) translateY(0); background: #7848ff; }
  65% { transform: scale(1); background: #7848ff; }
  100% { opacity: 1; transform: scale(1); background: transparent; }
}

/* Sound: grain clears while an equaliser works */
.phone__grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.phone.is-run .phone__grain { animation: grain-clear 1.8s ease 4.1s both, grain-jitter .25s steps(2) infinite; }
@keyframes grain-clear { 0% { opacity: 0; } 10% { opacity: .32; } 100% { opacity: 0; } }
@keyframes grain-jitter { 50% { background-position: 37px 61px; } }
.phone__eq { position: absolute; left: 50%; bottom: 44px; z-index: 3; display: flex; align-items: center; gap: 4px; height: 44px; padding: 8px 14px; margin-left: -64px; width: 128px; justify-content: center; border-radius: 12px; background: rgba(13, 13, 13, .78); box-shadow: 0 0 0 1px rgba(177, 150, 255, .35), 0 0 24px rgba(120, 72, 255, .45); opacity: 0; }
.phone__eq i { width: 4px; height: 100%; border-radius: 2px; background: #b196ff; transform: scaleY(.3); }
.phone.is-run .phone__eq { animation: eq-show 1.8s ease 4.1s both; }
.phone.is-run .phone__eq i { animation: eq-bar .45s ease-in-out calc(var(--b) * -.17s) infinite alternate; }
@keyframes eq-show { 0% { opacity: 0; transform: scale(.9); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes eq-bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Hook: a flash, a punch-in on the first speaker and a light sweep */
.phone__flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #fff; opacity: 0; }
.phone.is-run .phone__flash { animation: hook-flash .7s ease-out 6.05s both; }
@keyframes hook-flash { 0% { opacity: 0; } 12% { opacity: .75; } 100% { opacity: 0; } }
.phone__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 22%; }
.phone.is-run .phone__vid { animation: hook-punch 1.7s var(--ease) 6.05s both; }
@keyframes hook-punch { 0% { transform: scale(1); } 16% { transform: scale(1.16); } 100% { transform: scale(1); } }
.phone__sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.phone__sweep::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -60%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(213, 199, 255, .6), transparent); opacity: 0; }
.phone.is-run .phone__sweep::before { animation: hook-sweep .9s ease-in-out 6.35s both; }
/* Sound waves pulse in from the edges of the clip */
.phone__glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(120, 72, 255, 0); }
.phone.is-run .phone__glow { animation: sound-glow .6s ease-in-out 4.1s 3 alternate; }
@keyframes sound-glow { from { box-shadow: inset 0 0 0 0 rgba(120, 72, 255, 0); } to { box-shadow: inset 0 0 40px 6px rgba(120, 72, 255, .55); } }
@keyframes hook-sweep { 0% { left: -60%; opacity: 1; } 100% { left: 120%; opacity: 1; } }
@keyframes cap-line { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
@keyframes cap-word {
  0% { opacity: 0; transform: scale(.6) translateY(.2em); background: #7848ff; }
  2.5% { opacity: 1; transform: scale(1.12) translateY(0); background: #7848ff; }
  4% { transform: scale(1); background: #7848ff; }
  6% { background: #7848ff; }
  7% { background: transparent; }
  100% { opacity: 1; transform: scale(1); background: transparent; }
}
/* Assets beside a smaller chat panel: thumbnails fanned out, the finished one big, the notes as a YouTube card */
.cropview--art .seq .frame { grid-template-columns: 1fr 300px; column-gap: 36px; align-items: center; }
.cropview--art .cw { box-shadow: 0 0 0 6px rgba(120, 72, 255, .10), 0 40px 80px -24px rgba(0, 0, 0, .9); }
.art { position: relative; min-height: 300px; display: grid; place-items: center; }
.fan { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.fan__i { position: absolute; left: 16%; top: 14%; width: 68%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); transform: rotate(calc((var(--n) - 1) * 6deg)) translate(calc((var(--n) - 1) * 8%), calc((var(--n) - 1) * 5%)); opacity: 0; }
.frame.is-active .fan__i { animation: fan-in .7s cubic-bezier(.2, .8, .2, 1) calc(var(--n) * .14s + .15s) both; }
@keyframes fan-in { from { opacity: 0; transform: rotate(0) translate(0, 14%) scale(.92); } to { opacity: 1; transform: rotate(calc((var(--n) - 1) * 6deg)) translate(calc((var(--n) - 1) * 8%), calc((var(--n) - 1) * 5%)); } }
.art__ph { position: relative; width: 86%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #2a2a2a, #3a3a3a 50%, #262626); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
.art__ph .shimmer { position: absolute; border-radius: 0; }
.art__big { display: block; width: 86%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
.art__card { width: 70%; border: 1px solid var(--c700); background: #141414; }
.frame.is-active .art__pop { animation: art-pop .6s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes art-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.cropview--panel .seq .frame { justify-items: center; }
.cropview--panel .cw { width: min(384px, 100%); box-shadow: 0 0 0 6px rgba(120, 72, 255, .10), 0 40px 80px -24px rgba(0, 0, 0, .9); }
/* Looking back: three rising charts, discoverability to publishing */
.rise { position: relative; margin-top: 56px; padding: 36px 32px 32px; border-radius: 20px; background: var(--c1000); border: 1px solid var(--c800); }
.rise__svg { display: block; width: 100%; height: auto; overflow: visible; }
.rise__base { fill: none; stroke: var(--c700); stroke-width: 1; stroke-dasharray: 2 5; }
.rise__area { fill: url(#rise-fill); opacity: 0; transition: opacity 1s ease 1.2s; }
.rise__line { fill: none; stroke: #b196ff; stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(177, 150, 255, .5)); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1) .3s; }
.rise__tick { stroke: var(--c600); stroke-width: 1; stroke-dasharray: 2 4; }
.rise__node { fill: var(--c1000); stroke: #b196ff; stroke-width: 3; opacity: 0; transition: opacity .4s ease; }
.rise__node:nth-of-type(1) { transition-delay: .6s; } .rise__node:nth-of-type(2) { transition-delay: 1.2s; } .rise__node:nth-of-type(3) { transition-delay: 1.9s; }
.rise__node--last { fill: var(--p800, #7848ff); stroke: #d5c7ff; }
.rise.is-in .rise__line, .no-js .rise__line { stroke-dashoffset: 0; }
.rise.is-in .rise__area, .rise.is-in .rise__node, .no-js .rise__area, .no-js .rise__node { opacity: 1; }
.rise__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
.rise__step { padding-top: 14px; border-top: 1px solid var(--c800); }
.rise__k { display: block; font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #b196ff; }
.rise__step h3 { margin: 8px 0 0; font-size: 18px; line-height: 26px; font-weight: 600; color: #fff; }
.rise__step p { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.rise__note { margin: 16px 0 0; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }

.cut { --u: calc(100cqw / 1366); position: absolute; z-index: 2; pointer-events: none; overflow: hidden; }
.cut__erase { position: absolute; left: 0; right: 0; top: 0; background: #0e0e0e; opacity: 0; }
.cut__rest { position: absolute; left: 0; right: 0; overflow: hidden; background: #0e0e0e; }
.cut__rest img { position: absolute; left: 0; max-width: none; }
.frame.is-active .cut__erase { animation: cut-erase .45s ease 1.7s both; }
.frame.is-active .cut__rest { animation: cut-close .7s cubic-bezier(.65, 0, .35, 1) 2.15s both; }
@keyframes cut-erase { to { opacity: 1; } }
@keyframes cut-close { to { transform: translateY(calc(var(--gap) * -1 * var(--u))); } }
.lens .lens__plane > img { position: static; display: block; width: 100%; height: auto; }

/* Lens: the Co-Creator panel magnified beside the frame, in step with it */
.stage { position: relative; }
.chapter__stage .lens { right: -24px; top: 80px; width: 290px; }
.chapter__stage .lens__tag { right: -24px; top: 44px; }
/* Script chapters: a bigger lens over the script, the chat panel stays visible on the right */
.script-ch .chapter__stage .lens { right: auto; left: -24px; top: 60px; width: 400px; }
.script-ch .chapter__stage .lens__tag { right: auto; left: -24px; top: 24px; }
.lens {
  position: absolute; z-index: 3; overflow: hidden; border-radius: 16px;
  background: var(--c1000); border: 1px solid var(--c600);
  box-shadow: 0 0 0 6px rgba(120, 72, 255, .10), 0 40px 80px -24px rgba(0, 0, 0, .9);
  animation: floaty 7s ease-in-out infinite;
}
.lens .frame { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.lens .frame.is-active { opacity: 1; }
.lens img { position: absolute; max-width: none; }
.lens__tag {
  position: absolute; z-index: 4; padding: 4px 10px; border-radius: 999px;
  background: rgba(120, 72, 255, .9); color: #fff; font: 500 11px/16px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase;
}
@keyframes floaty { 50% { transform: translateY(-8px); } }

/* ---------- Intro video (first open) ---------- */
.vseq video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lens video { position: absolute; max-width: none; }
.browser__bar { position: relative; }
/* Sound toggle: the portfolio's shared round button, sitting under the Co-Creator chat */
.sound-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.sound-row__t { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sound-toggle {
  position: static; z-index: 4; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(17, 0, 52, .75); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .2s;
}
.sound-toggle svg { width: 18px; height: 18px; }
.sound-toggle:hover { background: var(--p800); transform: scale(1.06); }
.sound-toggle:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }

/* ---------- Vision ---------- */
.vision { padding: 120px 0 40px; }
.journey { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: linear-gradient(90deg, var(--p800), var(--p300), var(--p800)); opacity: .6; }
.journey li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-right: 16px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.journey span {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c1000); border: 1px solid var(--p800);
  font: 500 12px/1 "DM Mono", monospace; color: var(--p300); box-shadow: 0 0 0 6px rgba(120, 72, 255, .08);
}
.vision .principles { margin-top: 48px; }

/* ---------- Chapter layout ---------- */
.chapter { padding: 140px 0; }
.chapter + .chapter { padding-top: 40px; }
.chapter__grid { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.chapter__grid--flip { grid-template-columns: 1fr 360px; }
.chapter__grid--flip .chapter__text { order: 2; }
.chapter__text { position: sticky; top: 120px; }
.chapter__num { font: 500 13px/1 "DM Mono", monospace; color: var(--c300); letter-spacing: .08em; }
.chapter .h2 { font-size: 38px; line-height: 46px; }
.chapter .lead { font-size: 17px; line-height: 28px; }
.chapter__stage { padding-right: 96px; padding-top: 24px; }

/* Wide chapters: text in two columns above a full-width frame */
.chapter--wide .chapter__grid { grid-template-columns: 1fr; gap: 48px; }
.chapter--wide .chapter__text { position: static; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: 80px; align-items: start; align-content: start; }
.chapter--wide .chapter__text > * { grid-column: 1; }
.chapter--wide .steps { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
.chapter--wide .chapter__stage { padding: 0 60px; }

/* Step list: click to jump, a bar shows time left, pause holds a step */
.steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 6px; }
.steps li { position: relative; }
.steps li > .step {
  position: relative; display: block; width: 100%; padding: 13px 44px 13px 16px; border: 0; border-radius: 12px; text-align: left;
  background: transparent; color: var(--c300); font: inherit; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px var(--c800);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.steps li > .step:hover { color: var(--c150); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--c700); }
.steps strong { display: block; font-size: 15px; line-height: 22px; font-weight: 600; }
.steps span { display: block; max-height: 0; overflow: hidden; font-size: 14px; line-height: 21px; color: var(--c200); opacity: 0; transition: max-height .5s var(--ease), opacity .4s ease, margin .4s ease; }
.steps li.is-active > .step { background: var(--c900); color: var(--ink); box-shadow: inset 0 0 0 1px var(--c700); }
.steps li.is-active span { max-height: 140px; opacity: 1; margin-top: 4px; }
.steps li > .step::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--p800), var(--p500));
}
.steps li.is-running > .step::after { animation: step-bar var(--dur, 3s) linear forwards; animation-play-state: var(--play, running); }
@keyframes step-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes step-fill { from { background-size: 0% 100%, auto; } to { background-size: 100% 100%, auto; } }
.step-pause {
  position: absolute; right: 10px; top: 12px; width: 26px; height: 26px; border: 0; border-radius: 50%; padding: 5px;
  background: rgba(255, 255, 255, .08); color: var(--c150); cursor: pointer; display: none;
}
.step-pause svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.steps li.is-active .step-pause { display: block; }
.step-pause:hover { background: var(--p800); color: #fff; }

/* ---------- Brief ---------- */
.brief { padding: 60px 0 40px; }
.brief__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.card {
  position: relative; padding: 28px; border-radius: 20px; background: var(--c1000); border: 1px solid var(--line); overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(120, 72, 255, .18), transparent 60%);
}
.card:hover::before { opacity: 1; }
.card__label { font: 500 12px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--c300); }
.card h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-top: 14px; }
.card p { font-size: 15px; line-height: 24px; color: var(--c200); margin-top: 8px; }


/* ---------- Component wall: four columns of real chat components drifting past each other ---------- */
.wall { padding: 120px 0 40px; overflow: hidden; }
.wall__head { max-width: 760px; margin: 0 auto; text-align: center; }
.wall__head .h2, .wall__head .lead { margin-left: auto; margin-right: auto; }
.wall__stage {
  position: relative; height: 780px; margin-top: 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 80%, transparent);
}
.wall__cols { position: absolute; left: 50%; top: 50%; width: 1200px; margin-left: -600px; display: flex; align-items: flex-start; gap: 24px; justify-content: center; }
@media (min-width: 1100px) { .wall__cols { zoom: var(--z, 1); } }
.wall__col { container-type: inline-size; display: flex; flex-direction: column; gap: 22px; width: 282px; animation: wall-drift var(--t, 70s) linear infinite; will-change: transform; }
.wall__col--rev { animation-direction: reverse; }
@keyframes wall-drift { from { transform: translateY(-25%); } to { transform: translateY(-75%); } }
.wall__card { width: auto; align-self: flex-start; border-radius: 12px; overflow: hidden; background: var(--c900); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .05); flex: 0 0 auto; }
.wall__card img { display: block; height: auto; }
.wall__card--bub, .wall__card--bub2, .wall__card--chip, .wall__card--sm { width: auto; background: none; box-shadow: none; border-radius: 0; }
.wall__card--bub2 img { border-radius: 12px; }
.wall__card--chip img { border-radius: 8px; }
.wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--c1100), transparent 10%, transparent 90%, var(--c1100)); }

/* Shown only when the browser refuses to start the intro on its own */
.vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: none; align-items: center; gap: 12px; padding: 14px 22px 14px 18px; border: 0; border-radius: 999px; background: var(--p800); color: #fff; font: 500 15px/1 "Inter", system-ui, sans-serif; cursor: pointer; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.vplay svg { width: 18px; height: 18px; fill: currentColor; }
.vseq.needs-play .vplay { display: inline-flex; }

/* ---------- Agent loop ---------- */
.loop { padding: 120px 0; }
.loop__head { max-width: 760px; }
.loop__map { position: relative; margin-top: 56px; height: 470px; }
.loop__map svg.loop__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop__lines path { fill: none; stroke: var(--c600); stroke-width: 1.5; stroke-dasharray: 4 6; }
.loop__lines .loop__flow { stroke: var(--p700); stroke-dasharray: 40 960; stroke-width: 2.5; stroke-linecap: round; animation: flow 9.1s linear infinite; filter: drop-shadow(0 0 6px var(--p800)); }
@keyframes flow { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.node {
  position: absolute; width: 230px; padding: 18px 20px; border-radius: 16px; background: var(--c1000); border: 1px solid var(--c700);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s var(--ease);
}
.node.is-on { border-color: var(--p700); box-shadow: 0 0 0 4px rgba(120, 72, 255, .14), 0 20px 50px -20px rgba(120, 72, 255, .6); transform: translateY(-3px); }
.node__n { font: 500 12px/1 "DM Mono", monospace; color: var(--p500); }
.node h3 { font-size: 16px; line-height: 22px; font-weight: 600; margin-top: 10px; }
.node p { font-size: 13px; line-height: 19px; color: var(--c300); margin-top: 6px; }
.node__agent {
  display: inline-block; margin-top: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(120, 72, 255, .16);
  font: 500 11px/16px "DM Mono", monospace; color: var(--p300);
}
.node--user { border-style: dashed; }

/* ---------- Plan steps strip ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.trio .card { padding: 24px; }
.trio .card__label { color: var(--p500); }

/* ---------- Thumbnails ---------- */
.thumbs { padding: 140px 0 120px; }

/* ---------- Home / chat-first ---------- */
.home-section { padding: 140px 0; background: linear-gradient(180deg, var(--c1100), #120b26 50%, var(--c1100)); }

/* ---------- Principles + closing ---------- */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.closing { padding: 140px 0 160px; }
.closing__inner { max-width: 820px; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; }

/* Typed hero line */
.typed::after { content: ""; display: inline-block; width: 3px; height: .9em; margin-left: 4px; vertical-align: -.08em; background: var(--p700); animation: caret 1s steps(1) infinite; }
.typed.is-done::after { animation: caret 1s steps(1) 3 forwards; }
@keyframes caret { 50% { opacity: 0; } }

.mobile-only { display: none; }

/* ---------- Below 1100: stack ---------- */
/* ---------- Creators band (who we designed for) ---------- */
.creators { margin-top: 72px; overflow: hidden; }
.creators__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: min(1440px, 100%); margin: 0 auto; padding: 0 120px; }
.creators__ph { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--c1000); }
.creators__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-pair img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; transform: translateY(var(--py, 0px)); will-change: transform; }
.creators__ph::after, .photo-pair figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none; }

/* ---------- Closing photos ---------- */
.photo-pair { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 80px; }
.photo-pair figure { position: relative; margin: 0; height: 440px; border-radius: 24px; overflow: hidden; background: var(--c1000); }
.photo-pair__big img { object-position: 50% 40%; }
.photo-pair__tall img { object-position: 50% 30%; }

/* ---------- Promotion: thumbnails behind the section ---------- */
.chapter--promo { position: relative; overflow: hidden; }
.chapter--promo::before { content: ""; position: absolute; inset: -8% -4%; z-index: 0; pointer-events: none; opacity: .55;
  background: url(img/thumb-a.webp) 4% 8% / 44% auto no-repeat, url(img/thumb-c.webp) 56% 96% / 40% auto no-repeat, url(img/thumb-b.webp) 100% 24% / 46% auto no-repeat;
  filter: blur(26px) saturate(1.25); animation: promo-drift 26s ease-in-out infinite alternate; }
.chapter--promo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--c1100) 0%, rgba(13, 13, 13, .5) 16%, rgba(13, 13, 13, .5) 84%, var(--c1100) 100%); }
.chapter--promo .section__inner { z-index: 1; }
@keyframes promo-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2%, -3%, 0) scale(1.06); } }
.fan--busy .fan__i { filter: blur(1.5px) saturate(.5) brightness(.5); }
.fan--busy::after { content: ""; position: absolute; left: 16%; top: 14%; width: 68%; aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%) 0 0 / 250% 100%; animation: fan-sheen 2.2s linear infinite; pointer-events: none; }
@keyframes fan-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.dim { --u: calc(100cqw / 1366); position: absolute; z-index: 2; pointer-events: none; border-radius: calc(12 * var(--u)); box-shadow: 0 0 0 200vmax rgba(9, 7, 18, .55); opacity: 0; }
.frame.is-active .dim { animation: dim-in .8s ease .3s both; }
@keyframes dim-in { to { opacity: 1; } }

/* ---------- Clarify: one fixed board, three questions feeding the preferences and the plan ---------- */
.chapter--thread .chapter__stage { padding-right: 0; }
.thread { position: relative; width: 100%; }
.thread .frame { position: absolute; inset: 0; }
.thread .frame:first-child { position: relative; } /* every frame holds the whole board, so the first one sets the height */
.board { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; height: 100%; font-family: "Inter", sans-serif; }
.board__qs { display: grid; align-content: start; gap: 12px; }
.qcard, .pcard { border-radius: 14px; background: #1d1d1d; box-shadow: 0 0 0 1px #262626, 0 30px 60px -30px rgba(0, 0, 0, .8); }
.qcard { padding: 12px 12px 10px; display: grid; gap: 6px; transition: opacity .5s ease, box-shadow .5s ease; }
.qcard__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 2px 8px; }
.qcard__hd b { font-size: 15px; line-height: 20px; font-weight: 600; color: #ececec; }
.qcard__hd span { font-size: 12px; color: #8a8a8a; }
.qopt { position: relative; display: block; padding: 9px 12px; border-radius: 9px; background: #232323; font-size: 13.5px; line-height: 18px; font-weight: 500; color: #ececec; }
.qopt--other { color: #8a8a8a; font-weight: 400; }
/* Selected state as in the Figma component: 10% purple fill, 1px lilac stroke, the General/check icon (1.2px round stroke) */
.qopt.is-pick::after { content: ""; position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.33 4.33 6 11.67 2.67 8.33' fill='none' stroke='%23b196ff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; transform: scale(.4); opacity: 0; }
/* States: cards after the current one wait, the current one picks its answer, earlier ones keep theirs */
.board[data-state="1"] .qcard[data-q="2"], .board[data-state="1"] .qcard[data-q="3"], .board[data-state="2"] .qcard[data-q="3"] { opacity: .38; }
.board[data-state="4"] .qcard, .board[data-state="5"] .qcard { opacity: .55; }
.board[data-state="1"] .qcard[data-q="1"], .board[data-state="2"] .qcard[data-q="2"], .board[data-state="3"] .qcard[data-q="3"] { box-shadow: 0 0 0 1px #3a3a3a, 0 0 0 6px rgba(120, 72, 255, .10), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.board[data-state="2"] .qcard[data-q="1"] .is-pick, .board[data-state="3"] .qcard[data-q="1"] .is-pick, .board[data-state="3"] .qcard[data-q="2"] .is-pick,
.board[data-state="4"] .is-pick, .board[data-state="5"] .is-pick { background: rgba(120, 72, 255, .10); box-shadow: 0 0 0 1px #b196ff; }
.board[data-state="2"] .qcard[data-q="1"] .is-pick::after, .board[data-state="3"] .qcard[data-q="1"] .is-pick::after, .board[data-state="3"] .qcard[data-q="2"] .is-pick::after,
.board[data-state="4"] .is-pick::after, .board[data-state="5"] .is-pick::after { transform: scale(1); opacity: 1; }
.frame.is-active .board[data-state="1"] .qcard[data-q="1"] .is-pick, .frame.is-active .board[data-state="2"] .qcard[data-q="2"] .is-pick, .frame.is-active .board[data-state="3"] .qcard[data-q="3"] .is-pick { animation: qpick .35s ease 1.1s both; }
.frame.is-active .board[data-state="1"] .qcard[data-q="1"] .is-pick::after, .frame.is-active .board[data-state="2"] .qcard[data-q="2"] .is-pick::after, .frame.is-active .board[data-state="3"] .qcard[data-q="3"] .is-pick::after { animation: qcheck .3s var(--ease) 1.3s both; }
@keyframes qpick { from { background: #232323; box-shadow: 0 0 0 1px transparent; } to { background: rgba(120, 72, 255, .10); box-shadow: 0 0 0 1px #b196ff; } }
@keyframes qcheck { to { transform: scale(1); opacity: 1; } }
/* The preferences fill one line per answer */
.prefs { padding: 14px 18px 8px; border-bottom: 1px solid #2c2c2c; }
.prefs b { display: block; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid #2c2c2c; font-size: 15px; line-height: 20px; font-weight: 600; color: #ececec; }
.prefs ul { margin: 0; padding: 0 0 0 18px; }
.prefs li { padding: 4px 0; font-size: 13.5px; line-height: 19px; color: #d6d6d6; opacity: 0; }
.board[data-state="2"] .prefs li[style="--i:0"], .board[data-state="3"] .prefs li:not([style="--i:2"]), .board[data-state="4"] .prefs li, .board[data-state="5"] .prefs li { opacity: 1; }
.frame.is-active .board[data-state="1"] .prefs li[style="--i:0"], .frame.is-active .board[data-state="2"] .prefs li[style="--i:1"], .frame.is-active .board[data-state="3"] .prefs li[style="--i:2"] { animation: thr-in .5s var(--ease) 1.7s both; }
/* The plan: placeholder lines, then the writing spinner, then the written plan */
.pdoc { display: flex; flex-direction: column; overflow: hidden; }
.pdoc__body { position: relative; flex: 1; min-height: 0; }
.pdoc__skel { position: absolute; inset: 18px; opacity: .8; display: grid; align-content: start; gap: 12px; }
.pdoc__skel i { display: block; height: 10px; border-radius: 5px; background: #262626; }
.pdoc__skel i:nth-child(1) { width: 34%; } .pdoc__skel i:nth-child(2) { width: 78%; } .pdoc__skel i:nth-child(3) { width: 58%; }
.pdoc__wait { position: absolute; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 10px; opacity: 0; }
.board[data-state="4"] .pdoc__skel { top: 52px; opacity: .5; }
.frame.is-active .board[data-state="4"] .pdoc__wait { animation: thr-in .5s var(--ease) .4s both; }
.pdoc__wait { bottom: auto; top: 18px; }
.board[data-state="5"] .pdoc__skel { display: none; }
.pdoc__doc { display: none; position: absolute; inset: 0; z-index: 1; padding: 16px 18px 18px; overflow-y: auto; background: transparent; }
.board[data-state="5"] .pdoc__doc { display: block; }
.pdoc__doc small { display: block; font-size: 12px; color: #9a9a9a; }
.pdoc__doc strong { display: block; margin-top: 12px; font-size: 18px; line-height: 24px; font-weight: 700; color: #fff; }
.pdoc__doc em { display: block; margin-top: 6px; font-style: normal; font-size: 13.5px; color: #d6d6d6; }
.pdoc__doc hr { margin: 14px 0 10px; border: 0; border-top: 1px solid #2c2c2c; }
.pdoc__doc b { display: block; margin: 10px 0 2px; font-size: 14px; line-height: 20px; font-weight: 600; color: #fff; }
.pdoc__doc i { display: block; position: relative; padding: 3px 0 3px 18px; font-style: normal; font-size: 13.5px; line-height: 19px; color: #d6d6d6; }
.pdoc__doc i::before { content: ""; position: absolute; left: 6px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #d6d6d6; }
.frame.is-active .board[data-state="5"] .pdoc__doc > * { opacity: 0; animation: thr-in .4s ease both; animation-delay: calc(.2s + var(--i, 0) * .09s); }
.frame.is-active .board[data-state="5"] .pdoc__doc > small { animation-delay: 0s; } .frame.is-active .board[data-state="5"] .pdoc__doc > strong { animation-delay: .1s; }
.frame.is-active .board[data-state="5"] .pdoc__doc > em { animation-delay: .2s; } .frame.is-active .board[data-state="5"] .pdoc__doc > hr { animation-delay: .3s; }
.thr__spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #3a3a3a; border-top-color: #b196ff; animation: spin 1s linear infinite; }
.thr__ptext { font-size: 14px; line-height: 20px; background: linear-gradient(90deg, #8a8a8a 0%, #ffffff 45%, #8a8a8a 90%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ptext 1.8s linear infinite; }
@keyframes thr-in { to { opacity: 1; transform: none; } }

@media (max-width: 1099.98px) {
  /* Phones: the current question above the preferences, then the preferences above the plan */
  .thread { height: 500px; }
  .thread .frame:first-child { position: absolute; }
  .board { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  .board .qcard { display: none; }
  .board[data-state="1"] .qcard[data-q="1"], .board[data-state="2"] .qcard[data-q="2"], .board[data-state="3"] .qcard[data-q="3"] { display: grid; }
  .board[data-state="4"] .board__qs, .board[data-state="5"] .board__qs { display: none; }
  .board[data-state="4"], .board[data-state="5"] { grid-template-rows: minmax(0, 1fr); }
  .board[data-state="5"] .prefs { display: none; }
  .creators { margin-top: 48px; }
  .creators__row { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--gutter); }
  .photo-pair { grid-template-columns: 1fr; margin-bottom: 48px; }
  .photo-pair figure { height: 60vw; max-height: 400px; }
  .photo-pair__tall { display: none; }
  .chapter--promo::before { opacity: .28; }
  .site-header { height: 56px; }
  .site-header__inner { padding: 0 var(--gutter); }
  .section__inner { width: auto; padding: 0 var(--gutter); }
  .hero__grid { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: 56px var(--gutter); }
  .hero__logo { height: 156px; }
  .hero__logotype { width: min(300px, 100%); }
  .hero__title { font-size: 22px; }
  .hero__sub { font-size: 18px; line-height: 28px; }
  .hero__stage { margin-top: 48px; width: 100%; }
  .hero__stage .stage { transform: none; }
  .hero__stage .lens { display: none; }
  .panelview { width: min(380px, 100%); }
  .feat__grid { grid-template-columns: 1fr; gap: 44px; }
  .qboard { grid-template-columns: 1fr 1fr; gap: 20px; }
  .cropview .seq .frame, .cropview--stack .seq .frame { grid-template-columns: 1fr; gap: 20px; }
  .cw--span { grid-column: auto; }
  /* Tablet widths: the windows keep roughly their desktop size instead of filling the stage */
  .cropview { max-width: 640px; margin-inline: auto; }
  .cropview--pair { max-width: 720px; }
  .cropview--pair .seq .frame { grid-template-columns: 1fr 280px; }
  .cropview--duo { max-width: 760px; }
  .cropview--art .seq .frame { grid-template-columns: 1fr; justify-items: center; }
  .cropview--art .cw { width: min(384px, 100%); }
  .art { width: 100%; min-height: 0; }
  .phone { width: min(240px, 100%); }
  /* Looking back: the line stays full width, the three results stack under it */
  .rise { margin-top: 36px; padding: 24px 18px 22px; border-radius: 16px; }
  .rise__cols { grid-template-columns: 1fr; gap: 18px; margin-top: 4px; }
  .rise__step h3 { font-size: 16px; line-height: 22px; }
  .rise__step p { font-size: 14px; line-height: 21px; }
  .plan { grid-template-columns: 1fr 1fr; }
  .plan__text { grid-column: 1 / -1; }
  .hero__stage .browser { width: auto; }
  .brief__grid, .chapter__grid, .chapter__grid--flip { grid-template-columns: 1fr; gap: 40px; }
  .chapter__grid, .chapter__grid--flip { gap: 16px; }
  .chapter__grid--flip .chapter__text { order: 0; }
  .chapter__text { position: static; }
  .chapter__stage, .chapter--wide .chapter__stage { padding: 0; }
  .chapter--wide .chapter__text { display: block; }
  .chapter--wide .steps { margin-top: 30px; }
  /* Phones: the screen comes first, then the step list as a swipe carousel with progress dots (Amir, 2026-10-23, all projects).
     The active card snaps to the start, the next one peeks in; every card shows its title and line */
  .chapter__text, .chapter--wide .chapter__text { display: contents; }
  .chapter__grid .chapter__stage { order: 5; }
  .steps, .chapter--wide .steps { order: 10; margin: 0; }
  .steps.is-swipe {
    display: flex; gap: 10px; min-width: 0; align-self: stretch; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .steps.is-swipe::-webkit-scrollbar { display: none; }
  .steps.is-swipe::after { content: ""; flex: 0 0 calc(100% - min(86%, 440px) - 10px); } /* lets the last card snap to the start */
  .steps.is-swipe > li { flex: 0 0 min(86%, 440px); scroll-snap-align: start; display: flex; }
  .steps.is-swipe li > .step { height: 100%; padding: 12px 52px 12px 14px; }
  .steps.is-swipe span { max-height: none; opacity: 1; margin-top: 2px; transition: none; }
  .steps.is-swipe li > .step::after { display: none; }
  .step-pause { top: 10px; }
  .step-dots { order: 11; display: flex; margin: -2px 0 0 -2px; }
  .step-dots button { display: grid; place-items: center; padding: 8px 3px; border: 0; background: none; cursor: pointer; }
  .step-dots i { display: block; position: relative; overflow: hidden; width: 8px; height: 8px; border-radius: 4px; background: var(--c700); transition: width .3s ease; }
  .step-dots i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--p800), var(--p500)); transform-origin: left; transform: scaleX(0); }
  .step-dots .is-on i { width: 28px; }
  .step-dots .is-done i::after { transform: none; opacity: .4; }
  .step-dots .is-running i::after { animation: step-bar var(--dur, 3s) linear forwards; animation-play-state: var(--play, running); }
  .step-dots button:focus-visible { outline: 2px solid var(--p500); outline-offset: -2px; border-radius: 8px; }
  .h2, .chapter .h2 { font-size: 30px; line-height: 38px; }
  .lead, .chapter .lead { font-size: 17px; line-height: 28px; }
  .chapter, .loop, .thumbs, .home-section { padding: 80px 0; }
  .chapter + .chapter { padding-top: 24px; }
  .facts, .trio, .principles { grid-template-columns: 1fr; }
  .aud { margin-top: 64px; }
  .aud__grid { grid-template-columns: 1fr; gap: 32px; }
  .vision { padding: 80px 0 24px; }
  .journey { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; margin-top: 40px; }
  .journey::before { display: none; }
  .journey li { flex-direction: row; align-items: center; gap: 12px; padding-right: 0; font-size: 17px; line-height: 24px; }
  .journey span { width: 36px; height: 36px; flex: none; box-shadow: 0 0 0 4px rgba(120, 72, 255, .08); }
  .sound-toggle { width: 28px; height: 28px; }
  .sound-toggle svg { width: 15px; height: 15px; }
  .lens:not(.mobile-only), .lens__tag { display: none; }
  .mobile-only { display: block; }
  /* Full-editor chapters: a readable chat card overlaps the lower right of the screen, the editor behind it sits under a veil */
  .stage--mlens .lens { position: relative; inset: auto; z-index: 3; width: 84%; margin: -56px 0 0 auto; border-radius: 14px; animation: none; transition: height .6s ease; box-shadow: 0 0 0 6px rgba(13, 13, 13, .9), 0 30px 60px -24px rgba(0, 0, 0, .9); }
  /* Intro: the phone card is drawn in HTML (the video is 1366px wide, too soft to magnify) and typed in sync with it */
  .stage--mlens .ipanel { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; padding: 0 18px; box-shadow: none; background: #151515; color: #e6e6e6; font-family: "Inter", system-ui, sans-serif; transition: grid-template-rows .6s var(--ease), margin .6s var(--ease), padding .6s var(--ease), opacity .5s ease .15s; }
  .stage--mlens .ipanel.is-shown { grid-template-rows: 1fr; opacity: 1; margin-top: -56px; padding: 16px 18px 18px; box-shadow: 0 0 0 6px rgba(13, 13, 13, .9), 0 30px 60px -24px rgba(0, 0, 0, .9); }
  .ipanel__in { min-height: 0; overflow: hidden; }
  .stage--mlens-panel .sound-row { margin-top: 12px; }
  .ipanel__hd { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 20px; font-weight: 600; color: #fff; }
  .ipanel__spark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #2a2a2a; }
  .ipanel__spark svg { width: 18px; height: 18px; fill: #fff; }
  .ipanel__txt { min-height: 88px; margin: 16px 0 0; font-size: 14px; line-height: 22px; color: #e6e6e6; }
  .ipanel__btn { display: inline-block; margin-top: 16px; padding: 10px 16px; border-radius: 10px; background: var(--p800); color: #fff; font-size: 14px; line-height: 18px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
  .ipanel.has-btn .ipanel__btn { opacity: 1; transform: none; }
  .stage--mlens .browser__screen::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(9, 7, 18, .46); pointer-events: none; }
  .stage--mlens-panel .browser__screen::after { inset: auto; left: 64.35%; top: 5.65%; width: 28.11%; height: 94.35%; background: none; border-radius: 1.2cqw 1.2cqw 0 0; box-shadow: 0 0 0 200vmax rgba(9, 7, 18, .46); }
  .hero__stage .browser::after { display: none; }
  /* without the lens, the chat panel itself stays lit and the rest of the editor sits behind the veil */
  .hero__stage .browser__screen::after { content: ""; position: absolute; z-index: 3; left: 64.35%; top: 5.65%; width: 28.11%; height: 94.35%; border-radius: 1.2cqw 1.2cqw 0 0; box-shadow: 0 0 0 200vmax rgba(9, 7, 18, .46); pointer-events: none; }
  .wall { padding: 80px 0 24px; }
  .wall__stage { height: 560px; margin-top: 32px; }
  /* two columns wider than the phone, clipped at the edges, so the type stays readable at the shared scale */
  .wall__cols { width: 520px; margin-left: -260px; gap: 24px; }
  .wall__col { width: 248px; gap: 18px; }
  .wall__col:nth-child(n + 3) { display: none; }
  .wall::after { background: linear-gradient(to right, var(--c1100), transparent 14%, transparent 86%, var(--c1100)); }
  /* Agent loop: one vertical rail, a row per step, dashes only between the circles, back to 01 at the end */
  .loop__map { height: auto; display: grid; gap: 0; margin-top: 32px; }
  .loop__map .node { position: relative; inset: auto !important; display: grid; grid-template-columns: 32px auto 1fr; column-gap: 12px; align-items: start; width: auto; padding: 9px 0; border: 0; background: none; transform: none; box-shadow: none; }
  .loop__map .node::after { content: ""; position: absolute; left: 15px; top: 46px; bottom: -4px; border-left: 1.5px dashed var(--c600); }
  .loop__map .node:last-child::after { bottom: 6px; }
  .node__n { grid-row: 1 / span 2; width: 32px; height: 32px; padding: 0; border-radius: 50%; box-sizing: border-box; background: var(--c1000); border: 1px solid var(--c700); font-size: 11px; line-height: 30px; text-align: center; transition: border-color .4s ease, box-shadow .4s ease; }
  .node--user .node__n { border-style: dashed; font-size: 0; }
  .node--user .node__n::before { content: "04"; font: 500 11px/30px "DM Mono", monospace; }
  .node--user h3::after { content: "Creator"; display: inline-block; vertical-align: 2px; margin-left: 10px; padding: 2px 8px; border-radius: 6px; border: 1px dashed var(--p700); font: 500 11px/16px "DM Mono", monospace; color: var(--p300); }
  .node.is-on .node__n { border-color: var(--p700); color: #fff; background: var(--p800); box-shadow: 0 0 0 4px rgba(120, 72, 255, .14); }
  .node h3 { grid-column: 2; grid-row: 1; margin: 5px 0 0; font-size: 15px; line-height: 22px; }
  .node__agent { grid-column: 3; grid-row: 1; justify-self: start; margin: 8px 0 0; }
  .node p { grid-column: 2 / span 2; grid-row: 2; margin-top: 2px; font-size: 13px; line-height: 19px; }
  .loop__lines { display: none; }
  .closing { padding: 80px 0 100px; }
    .mobile-only { display: block; }
  .desktop-only { display: none; }
}

/* Phones: the chat window overlaps the script, as in the editor, so the ticks and the cuts share one view */
@media (max-width: 639px) {
  .cropview--pair .seq .frame { grid-template-columns: 1fr; grid-template-rows: auto; }
  .cropview--pair .cw__lbl--a, .cropview--pair .cw--a { grid-column: auto; grid-row: auto; }
  .cropview--pair .cw__lbl--b { display: none; }
  .cropview--pair .cw--b { grid-column: auto; grid-row: auto; width: 84%; margin: -56px 0 -28.5% auto; clip-path: inset(-8px -8px 27.7% -8px round 14px); } /* the crop is cut under the four ticked tasks, its fullest state */
  .cropview--pair { padding-bottom: 0; }
}
/* Phones: the vertical clip sits in the chat's empty corner, under the actions that make it */
@media (max-width: 759px) {
  .cropview--duo { display: block; position: relative; width: min(384px, 100%); margin-inline: auto; }
  .cropview--duo .cropview__screen { width: 100%; }
  .cropview--duo .phone { position: absolute; right: 10px; bottom: 10px; width: 40%; z-index: 3; box-shadow: 0 0 0 4px rgba(13, 13, 13, .95), 0 24px 48px -16px rgba(0, 0, 0, .9); }
}

@media (prefers-reduced-motion: reduce) {
  /* Decoration stands still; the step sequences and the intro are the content, they keep playing and have pause buttons */
  .photo-pair img { transform: none; }
  .hero__glow, .lens, .loop__lines .loop__flow, .shimmer::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .seq .frame, .lens .frame { transition: none; }
  .frame--scroll.is-active > img { animation: none; }
  .site-header { transition: none; }
}

/* Shared closing row, in Riverside's type */
.next-case__t { font-family: "Inter", system-ui, sans-serif; }
.next-case__win img { height: auto; }

/* Animations wait while their sequence is off screen */
.seq.is-ready:not(.is-live) .frame, .seq.is-ready:not(.is-live) .frame * { animation-play-state: paused !important; }