/* PreFilm homepage: the viewfinder direction. Colours live in tokens.css; no hex
   values here. Two fonts: Bricolage Grotesque (display) and DM Sans; Caveat only
   for Henry's receipts and his signature on /about. No monospace.
   Motion is driven by site.js and only runs when html has the "motion" class
   (set in the head when prefers-reduced-motion is off); without it, everything
   is in its final state. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: clip; /* decorative overflow never widens the page */
  background: var(--bg);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  font-family: var(--font-sans); font-size: 17px; line-height: 1.55;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--paper); color: var(--on-paper); }

.container {
  width: 100%;
  max-width: calc(1200px + 2 * var(--space-6));
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--paper); color: var(--on-paper);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
.h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--display-4); line-height: 0.9; letter-spacing: -0.045em; color: var(--ink);
}
@media (min-width: 768px) { .h1 { font-size: var(--display-2); } }
@media (min-width: 1100px) { .h1 { font-size: var(--display-1); } }
/* A long primary keyword: one display size down at every width, so the H1 keeps to 2 lines on desktop and 3 on a phone */
@media (min-width: 768px) { .h1.h1--long { font-size: var(--display-3); } }
@media (min-width: 1100px) { .h1.h1--long { font-size: var(--display-2); } }
.h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 40px; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink);
}
@media (min-width: 768px) { .h2 { font-size: 60px; } }
@media (min-width: 1100px) { .h2 { font-size: 76px; } }
/* 7 Nov: no paragraph on the site ends on a single word. */
p { text-wrap: pretty; }
.body { max-width: 560px; font-size: 17px; line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; } /* pretty: no one-word last line (7 Nov) */
@media (min-width: 768px) { .body { font-size: 19px; } }
.label {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted);
}

/* Section label: a timecode, then the section's name */
.tc { display: flex; align-items: baseline; gap: 14px; }
.tc__time { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Masked lines: each line of a headline slides up from behind its own mask */
.ln { display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln__in { display: block; }

/* ---------- The section layout, used everywhere ---------- */
.sec { padding: var(--section-y) 0; }
/* 00:02 Ideas, 00:03 Proof and 00:04 Scripts are one story; the closer runs into the footer */
#product { padding-bottom: var(--section-y-tight); }
#proof { padding-block: var(--section-y-tight); }
#scripts { padding-top: var(--section-y-tight); }
/* The marquee flows straight into the problem */
#top { padding-bottom: 24px; }
#problem { padding-top: var(--section-y-tight); }
#start { padding-bottom: var(--section-y-tight); }
/* The timecode label always sits directly above its headline, on the headline's own axis:
   left-aligned here, centred in .sec__head--center. Everything below the head starts on that axis too. */
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-sm); }
.sec__copy { display: grid; gap: var(--stack-md); }
.sec__visual { margin-top: var(--stack-lg); }
.sec__after { margin-top: var(--stack-md); font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 22px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap;
  border-radius: var(--radius-md); border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-secondary { background: transparent; color: var(--paper); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink-muted); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
/* On the smallest phones a long label wraps inside the button instead of pushing the page sideways (7 Nov: "Show me my niche's outliers" at 320px). */
@media (max-width: 359px) { .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; padding-block: 10px; } }
.btn span[aria-hidden] { transition: transform 0.3s var(--ease); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.text-link { font-size: 16px; font-weight: 600; color: var(--paper); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; transition: text-decoration-color 0.2s ease; }
.text-link:hover { text-decoration-color: var(--paper); }
/* Secondary actions in page content: an outlined pill with an arrow (no underlined links, CLAUDE.md) */
.link-pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 10px 18px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--paper); text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); transition: background-color 0.2s ease, border-color 0.2s ease; }
.link-pill > span[aria-hidden] { display: inline-block; transition: transform 0.2s var(--ease); }
.link-pill:hover { background: var(--raised); border-color: var(--ink-muted); }
.link-pill:hover > span[aria-hidden] { transform: translateX(3px); }
.link-pill:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.link-pill__play { width: 12px; height: 12px; fill: currentColor; }

/* ---------- REC dot and multiplier chips ---------- */
/* The REC dot is drawn like the logo: a red dot inside a thin white ring. It never blinks. */
.rec { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ink); background: radial-gradient(circle, var(--rec) 0 2.6px, transparent 3.1px); }
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: -0.01em;
  color: var(--on-btn); background: var(--btn); /* white on --btn: 4.8:1 at small sizes */
  border-radius: var(--radius-sm); padding: 5px 7px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Viewfinder frame ---------- */
.vf { position: relative; padding: 28px; }
/* Four 26px corner brackets, 2px, white at 70% */
.vf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--vf-corner), var(--vf-corner)) left top / 26px 2px,
    linear-gradient(var(--vf-corner), var(--vf-corner)) left top / 2px 26px,
    linear-gradient(var(--vf-corner), var(--vf-corner)) right top / 26px 2px,
    linear-gradient(var(--vf-corner), var(--vf-corner)) right top / 2px 26px,
    linear-gradient(var(--vf-corner), var(--vf-corner)) left bottom / 26px 2px,
    linear-gradient(var(--vf-corner), var(--vf-corner)) left bottom / 2px 26px,
    linear-gradient(var(--vf-corner), var(--vf-corner)) right bottom / 26px 2px,
    linear-gradient(var(--vf-corner), var(--vf-corner)) right bottom / 2px 26px;
  background-repeat: no-repeat;
}
/* Optional rule-of-thirds grid over the content */
.vf--grid::after {
  content: ""; position: absolute; inset: 28px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--vf-grid), var(--vf-grid)) 33.333% 0 / 1px 100%,
    linear-gradient(var(--vf-grid), var(--vf-grid)) 66.666% 0 / 1px 100%,
    linear-gradient(var(--vf-grid), var(--vf-grid)) 0 33.333% / 100% 1px,
    linear-gradient(var(--vf-grid), var(--vf-grid)) 0 66.666% / 100% 1px;
  background-repeat: no-repeat;
}
/* HUD labels in the corner bands */
.hud {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--hud); /* the site's one label style (12px) */
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hud--tl { top: 9px; left: 36px; }
.hud--tr { top: 9px; right: 36px; }
.hud--bl { bottom: 9px; left: 36px; }
.hud--br { bottom: 9px; right: 36px; }
@media (max-width: 599px) {
  .vf { padding: 22px; }
  .vf--grid::after { inset: 22px; }
  .hud { font-size: 10px; letter-spacing: 0.12em; }
  .hud--tl, .hud--bl { left: 30px; }
  .hud--tr, .hud--br { right: 30px; }
  .hud--tl, .hud--tr { top: 6px; }
  .hud--bl, .hud--br { bottom: 6px; }
}
@media (max-width: 399px) { .hud--br { display: none; } } /* the two bottom labels would meet */

/* ---------- Clips: product videos inside a viewfinder ---------- */
.clip { margin: 0; }
.clip__stage { position: relative; }
.clip__media { position: relative; aspect-ratio: var(--ar, 16 / 9); background: var(--bg); overflow: hidden; }
.clip__media video, .clip__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.clip__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 4;
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  color: var(--paper); background: var(--scrim); border: 1px solid var(--line-strong);
}
.clip__play:hover { border-color: var(--paper); }
.clip__play[hidden] { display: none; }
.clip__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }

/* HUD annotations: a label outside the frame with a 1px leader that ends at the frame's edge */
.cues { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cue {
  position: absolute; display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink); white-space: nowrap;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.cue.is-on { opacity: 1; }
.cue.is-hidden, .cue-leader.is-hidden { display: none; }
.cue-leader {
  position: absolute; width: 1px; background: var(--leader);
  transform: scaleY(0); transition: transform 0.5s var(--ease);
}
.cue-leader--up { transform-origin: bottom; }   /* label above: draws up from the frame */
.cue-leader--down { transform-origin: top; }    /* label below: draws down from the frame */
.cue-leader.is-on { transform: scaleY(1); }
@media (max-width: 899px) { .cues { display: none; } }

/* ---------- Film grain: one static overlay ---------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Motion system (site.js adds the states; .motion is set in the head) ---------- */
.motion [data-lines]:not(.is-in) .ln { overflow: hidden; }
.motion [data-lines]:not(.is-in) .ln__in { transform: translateY(105%); }
.motion [data-lines].is-in .ln { overflow: hidden; }
.motion [data-lines].is-in .ln__in {
  transform: none;
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.08s);
}
.motion [data-lines].is-done .ln { overflow: visible; }

.motion [data-fade]:not(.is-in) { opacity: 0; transform: translateY(16px); }
.motion [data-fade].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--delay, 0s);
}

/* The hero starts on first paint, from CSS, without waiting for site.js. Its first frame is at 1%
   opacity rather than 0 so the browser counts it as painted (largest contentful paint). */
.motion .hero [data-fade]:not(.is-in), .motion .hero [data-fade].is-in {
  opacity: 1; transform: none; transition: none;
  animation: hero-fade 0.8s var(--ease) var(--delay, 0s) both;
}
@keyframes hero-fade { from { opacity: 0.01; transform: translateY(16px); } }
.motion .hero [data-lines] .ln__in, .motion .hero [data-lines].is-in .ln__in {
  transform: none; transition: none;
  animation: line-up 0.9s var(--ease) calc(var(--i, 0) * 0.08s) both;
}
@keyframes line-up { from { transform: translateY(105%); } }

/* Viewfinders cut in like a letterbox opening */
.motion [data-cut]:not(.is-in) { clip-path: inset(14% 0); }
.motion [data-cut].is-in { clip-path: inset(0); transition: clip-path 1.1s var(--ease-cut); }

/* =====================================================================
   Sections
   ===================================================================== */

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); min-height: 40px; }
.logo svg { width: 20px; height: 20px; flex: none; }
.logo__dot { fill: var(--rec); }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1; }

/* ---------- Nav: a floating pill (behaviour in site.js) ---------- */
.site-nav {
  --nav-h: 64px;
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  padding: calc(12px + env(safe-area-inset-top)) 12px 0;
  pointer-events: none;
  transition: translate 0.4s var(--ease);
}
.site-nav.is-compact { --nav-h: 56px; }
.site-nav.is-hidden { translate: 0 calc(-100% - 40px); }

/* Every in-page target (a section, a chapter, a #link to a block inside one) lands clear of the
   floating nav: its bottom edge is 76px down when expanded, so 96px leaves 20px, and the section's
   own top padding sits under that. site.js jumps (chapters, Lenis) read this same value. */
main [id], .footer [id] { scroll-margin-top: var(--anchor-y); }
main:focus { outline: none; }

.site-nav__pill {
  position: relative; pointer-events: auto;
  max-width: 1120px; margin-inline: auto;
  background: var(--nav-pill);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-nav);
}
.site-nav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: calc(var(--nav-h) - 2px); padding: 0 12px 0 16px;
  transition: height 0.25s ease;
}
@media (min-width: 768px) { .site-nav__bar { padding-left: 20px; } }
.site-nav .logo { transform-origin: left center; transition: scale 0.25s ease; }
.site-nav.is-compact .logo { scale: 0.9; }
.site-nav__main { position: relative; }
.site-nav__links { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: var(--space-8); }
.site-nav__link, .site-nav__login {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px;
  font-size: 14px; font-weight: 500; color: var(--ink-muted);
  transition: color 0.2s ease;
}
.site-nav__link:hover, .site-nav__login:hover,
.site-nav__link.is-active, .site-nav__link[aria-expanded="true"] { color: var(--paper); }
.site-nav__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.site-nav__link[aria-expanded="true"] .site-nav__chev { transform: rotate(180deg); }
.site-nav__underline {
  position: absolute; left: 0; bottom: 4px; width: 100px; height: 2px; border-radius: 1px;
  background: var(--paper); transform-origin: left center; opacity: 0; pointer-events: none;
  transition: transform 0.3s var(--ease), opacity 0.2s ease;
}
.site-nav__underline.is-on { opacity: 1; }
.site-nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.site-nav__login { display: none; }
.cta-short { display: inline; }
.cta-long { display: none; }
@media (min-width: 400px) { .cta-short { display: none; } .cta-long { display: inline; } }

.site-nav__dd { position: relative; }
.nav-dd {
  position: absolute; top: 100%; left: -24px; width: 560px;
  padding-top: calc((var(--nav-h) - 40px) / 2 + 8px);
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}
.site-nav__dd.is-open .nav-dd { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s; }
.nav-dd__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  list-style: none; margin: 0; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-nav);
}
.nav-dd__item { display: flex; align-items: center; gap: var(--space-3); padding: 10px; border-radius: var(--radius-md); transition: background-color 0.15s ease; }
.nav-dd__item:hover, .nav-dd__item:focus-visible { background: var(--raised); }
.nav-dd__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); }
.nav-dd__icon--duo { display: flex; justify-content: center; gap: 3px; }
.nav-dd__icon--duo img { width: 14px; height: 14px; }
.nav-dd__icon > img:only-child { width: 20px; height: 20px; }
.nav-dd__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-dd__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--paper); white-space: nowrap; }
.nav-dd__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-muted); white-space: nowrap; }

/* The page's playhead: reading progress along the pill's bottom edge */
.nav-progress { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.nav-progress::before, .nav-progress__fill { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.nav-progress::before { background: var(--progress-track); }
.nav-progress__fill { background: var(--rec); transform-origin: left center; transform: scaleX(0); }
.nav-progress__dot {
  position: absolute; left: -5px; bottom: -3.5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rec); pointer-events: none; transition: scale 0.15s ease;
}
.site-nav.is-scrolling .nav-progress__dot { scale: 1.2; }

/* Chapters (pages whose sections carry data-chapter): the progress bar splits into one segment
   per chapter, sized by its share of the page, like a YouTube chapter bar. Each is a button. */
.site-nav__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.chapter-now { display: none; }
.has-chapters .chapter-now { display: grid; min-width: 0; max-width: 170px; padding-left: 14px; border-left: 1px solid var(--line-strong); }
@media (max-width: 559px), (min-width: 960px) and (max-width: 1099px) { .has-chapters .chapter-now { display: none; } }
.chapter-now__t { grid-area: 1 / 1; font-family: var(--font-sans); font-size: 13px; line-height: 1.2; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.3s var(--ease); }
.chapter-now__t.is-on { opacity: 1; }
.has-chapters .nav-progress::before, .has-chapters .nav-progress__fill { display: none; }
.chapters { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; display: flex; gap: 2px; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.chapters[hidden] { display: none; }
.chapter { position: relative; flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.chapter::before, .chapter__fill { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transition: height 0.15s ease; }
.chapter::before { background: rgba(255, 255, 255, 0.1); }
.chapter__fill { background: var(--rec); transform-origin: left center; transform: scaleX(0); }
.chapter:hover::before, .chapter:hover .chapter__fill { height: 5px; }
.chapter:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 2px; }
.chapter-tip {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 5; translate: -50% 0;
  padding: 6px 10px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--paper);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.chapter-tip.is-on { opacity: 1; }

.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--ink); }
.menu-toggle:hover { background: var(--raised); }
.menu-toggle__icon { width: 20px; height: 20px; }
.menu-toggle__icon line { stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: center; }
.menu-toggle[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .l2 { opacity: 0; }
.menu-toggle[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: absolute; left: 12px; right: 12px; top: calc(100% + 8px);
  max-height: calc(100dvh - var(--nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain;
  pointer-events: auto; padding: var(--space-3) var(--space-3) var(--space-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-nav);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu__label { padding: 4px 10px 6px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); }
.mobile-menu__product { display: grid; gap: 2px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.mobile-menu__product .nav-dd__desc { white-space: normal; }
.mobile-menu__links a { display: flex; align-items: center; min-height: 48px; padding: 0 10px; font-size: 16px; font-weight: 500; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.mobile-menu__links li:last-child a { border-bottom: 0; }
.mobile-menu__links a:hover { color: var(--paper); }
@media (min-width: 960px) {
  .site-nav__links { display: flex; }
  .site-nav__login { display: inline-flex; }
  .site-nav__actions { gap: var(--space-6); }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
/* Top: just clear of the floating nav (its bottom edge is at 76px) */
.hero { padding: calc(96px + env(safe-area-inset-top)) 0 var(--section-y-tight); }
@media (min-width: 960px) { .hero { padding-top: calc(120px + env(safe-area-inset-top)); } }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__rec { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.hero__title { margin-top: var(--stack-sm); }
/* The YouTube logo before the word in the H1 (7 Nov, Henry). The official red play button, unmodified; the word stays as text for search. */
.yt-word { white-space: nowrap; }
.yt-logo { display: inline-block; height: 0.74em; width: auto; aspect-ratio: 24 / 16.91; margin-right: 0.1em; vertical-align: -0.02em; }
/* With the logo, "from YouTube." needs about 7.2em; on a phone the hero H1 steps down so that line never breaks and "from" never sits alone. */
@media (max-width: 479px) { .hero__title { font-size: clamp(34px, calc((100vw - 32px) / 7.8), 52px); } }
@media (max-width: 479px) { .hero__title.h1--long { font-size: clamp(28px, calc((100vw - 32px) / 9.6), 40px); } }
.hero__lede { margin-top: var(--stack-md); }
.hero__actions { margin-top: var(--stack-md); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-8); }

/* The rotating word: crossfades with a slight blur; JS sizes the box to the word on show */
.rot { display: inline-grid; grid-template-columns: minmax(0, 1fr); justify-items: center; vertical-align: bottom; transition: width 0.6s var(--ease); }
.rot__word { grid-area: 1 / 1; white-space: nowrap; }
/* Below 1100px "Get more calls booked" can't share a line, so the word always gets its own:
   the headline keeps the same three lines whichever word is showing */
@media (max-width: 1099px) { .rot { display: grid; margin-inline: auto; } }
.rot:not(.is-live) .rot__word:not(.is-on) { display: none; }
.rot.is-live .rot__word { opacity: 0; filter: blur(10px); transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.rot.is-live .rot__word.is-on { opacity: 1; filter: none; }

/* The viewfinder product mockup: reading a niche */
.hero__vf { margin-top: var(--stack-lg); width: 100%; max-width: 1040px; text-align: left; }
.mock { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 8px; }
@media (min-width: 900px) { .mock { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 40px; padding: 20px; align-items: center; } }
.mock__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.mock__log { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.mock__log li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.mock__log li.is-live { color: var(--ink); }
.mock__log .rec { position: relative; top: -1px; }
.mock__tick { flex: none; width: 8px; color: var(--paper); font-size: 12px; }
.mock__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 600px) { .mock__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mock__thumb, .mq__thumb { position: relative; } /* the chips sit on their own thumbnail */
.mock__thumb img, .mq__thumb img, .idea__thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; } /* content in full colour; the interface stays monochrome */
.mock__thumb .chip, .mq__thumb .chip { position: absolute; left: 6px; top: 6px; }
.mock__channel { margin-top: 8px; font-size: 13px; line-height: 1.3; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Outliers marquee: one slow row of full-colour cards */
.mq { margin-top: var(--stack-lg); }
.mq__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.mq__viewport { display: flex; margin-top: 24px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--bg) 6%, var(--bg) 94%, transparent); }
.mq__track { list-style: none; margin: 0; padding: 0 12px 0 0; display: flex; gap: 12px; flex: none; }
.mq__card { width: 248px; flex: none; }
.mq__title { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mq__channel { margin-top: 4px; font-size: 15px; color: var(--ink-muted); }
.motion .mq__track { animation: mq-roll 110s linear infinite; }
.motion .mq__viewport:hover .mq__track, .motion .mq__viewport:focus-within .mq__track { animation-play-state: paused; }
@keyframes mq-roll { to { transform: translateX(-100%); } }
/* Without motion: one static row you can scroll sideways */
html:not(.motion) .mq__viewport { overflow-x: auto; mask-image: none; }
html:not(.motion) .mq__track--copy { display: none; }

/* ---------- 00:01 The problem ---------- */
/* Full-width screenshots (Problem, Henry's channel): up to 1240px, wider than the 1200px container */
.wideshot { width: min(1240px, 100%); margin-inline: auto; }
@media (min-width: 1240px) { .wideshot { width: min(1240px, 100vw - 48px); margin-inline: calc((100% - min(1240px, 100vw - 48px)) / 2); } }
/* One screen at 1440x900: the headline and the line beside it, then the screenshot */
@media (min-width: 1100px) {
  .problem .sec__copy { grid-template-columns: auto minmax(0, 440px); justify-content: space-between; align-items: end; gap: var(--space-8); }
  .problem .sec__visual { margin-top: 40px; }
}
/* A plain frame for a screenshot: no viewfinder */
.sshot__frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.sshot__frame img, .sshot__frame picture { display: block; width: 100%; height: auto; }
/* The real Studio screenshot, with one thin red ring drawn round "102" as the section comes into view */
.sshot__frame { position: relative; }
.sshot__ring { position: absolute; left: 27.93%; top: 50.21%; width: 6.26%; height: 5.27%; translate: -50% -50%; overflow: visible; pointer-events: none; }
@media (max-width: 599px) { .sshot__ring { left: 17.35%; top: 34.1%; width: 10.93%; height: 9.67%; } }
.sshot__ring path { fill: none; stroke: var(--rec); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion .sshot:not(.is-in) .sshot__ring path { stroke-dashoffset: 1; }
.motion .sshot .sshot__ring path { transition: stroke-dashoffset 0.9s var(--ease) 0.5s; }

/* ---------- 00:02 Ideas: the ranked list inside a viewfinder ---------- */
.ideas { list-style: none; margin: 0; padding: 8px 0; display: grid; }
.idea { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 8px; border-top: 1px solid var(--line); }
.idea:first-child { border-top: 0; }
@media (min-width: 768px) {
  .idea { grid-template-columns: 300px minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 28px 20px; }
}
.idea__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
@media (min-width: 768px) { .idea__title { font-size: 26px; } }
.idea__for { justify-self: start; display: inline-block; margin-bottom: 10px; padding: 4px 9px; font-size: 15px; line-height: 1.3; color: var(--ink-muted); background: var(--raised); border-radius: var(--radius-sm); }
.idea__evidence { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.idea__x { display: inline-block; padding: 3px 6px; font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: -0.01em; color: var(--on-btn); background: var(--btn); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; vertical-align: 1px; } /* the multiplier as the allowed red chip, like everywhere else */
.idea__btn { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 15px; font-weight: 500; color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-md); white-space: nowrap; text-decoration: none; transition: border-color 0.2s; }
a.idea__btn:hover { border-color: var(--ink-muted); }
a.idea__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ---------- 00:04 Scripts: the rewrite strip ---------- */
.rewrite { margin-top: var(--stack-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 960px) { .rewrite { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px 0; } }
.rewrite__ai, .rewrite__new { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; }
@media (min-width: 768px) { .rewrite__ai, .rewrite__new { font-size: 34px; } }
.rewrite__ai { color: var(--ink-faint); }
.rewrite__ai del { text-decoration: none; background: linear-gradient(var(--paper), var(--paper)) 0 55% / 100% 2px no-repeat; }
.rewrite__new { color: var(--ink); }
.rewrite__new ins { text-decoration: none; }
.rewrite__arrow { font-family: var(--font-display); font-size: 34px; color: var(--ink-muted); }
.rewrite.is-pending .rewrite__ai { color: var(--ink-muted); }
.rewrite.is-pending .rewrite__ai del { background-size: 0% 2px; }
.rewrite.is-struck .rewrite__ai { transition: color 0.6s var(--ease); }
.rewrite.is-struck .rewrite__ai del { transition: background-size 0.6s var(--ease); }
.rewrite__after.is-pending { opacity: 0; transform: translateY(16px); }
.rewrite__after.is-in { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rewrite__new .word.is-hidden { opacity: 0; }

/* ---------- 00:03 Proof and 00:04 Scripts: copy and video side by side ---------- */
.split__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-lg); }
.split__copy { display: grid; gap: var(--stack-md); align-content: start; }
.split__copy > .tc { margin-bottom: calc(var(--stack-sm) - var(--stack-md)); } /* label to headline: --stack-sm */
.split__title { font-size: 40px; }
@media (min-width: 768px) { .split__title { font-size: 48px; } }
@media (min-width: 1100px) {
  .split__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: calc(var(--stack-lg) + var(--stack-md)); align-items: center; }
  .split--reverse .split__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .split--reverse .split__media { order: -1; }     /* video left, copy right; copy still first in the source and on mobile */
  .split__title { font-size: 56px; }
  .split__media .clip { max-width: 680px; }
  .split:not(.split--reverse) .split__media .clip { margin-left: auto; }
}
/* The picture is never taller than 60vh; contain keeps its true aspect with nothing cut */
.split .clip__media { max-height: 60vh; }
/* HUD annotations only where there's room beside the columns */
@media (max-width: 1099px) { .split .cues { display: none; } }
/* The streaming script slides past the frame's top and bottom: soften those edges */
.clip--fade .clip__media video { -webkit-mask-image: linear-gradient(transparent, var(--bg) 24px, var(--bg) calc(100% - 24px), transparent); mask-image: linear-gradient(transparent, var(--bg) 24px, var(--bg) calc(100% - 24px), transparent); }

/* Proof: the evidence rows, the same values as the clip */
.evidence { list-style: none; margin: 0; padding: 0; max-width: 480px; border-bottom: 1px solid var(--line); }
.evidence li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: 12px 0; border-top: 1px solid var(--line); }
.evidence__label { font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.evidence__value { flex: none; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.evidence__value--rec { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--rec); } /* the section's one red number */

/* Scripts: the rewrite strip, compact, in the copy column */
.split .rewrite { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; max-width: 480px; }
.split .rewrite__ai, .split .rewrite__new { margin-top: 8px; font-family: var(--font-sans); font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.split .rewrite__ai del { background-position: 0 58%; background-size: 100% 1.5px; }
.split .rewrite.is-pending .rewrite__ai del { background-size: 0% 1.5px; }
.split .rewrite__arrow { font-family: var(--font-sans); font-size: 18px; line-height: 1; }

/* ---------- 00:05 Everything else: the feature player ---------- */
/* A list of features beside one 16:10 stage. The recordings are encoded at exactly 16:10
   (1600x1000), so the video fills the stage with nothing cropped or letterboxed. The stage's
   outline is a box-shadow, not a border, so its content box stays exactly 16:10. */
.fplayer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .fplayer { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--stack-lg); align-items: center; } }
.fplayer__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; }
.fplayer__list::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .fplayer__list { padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } } /* the chip row scrolls: its right edge fades so the last chip peeks instead of being cut */
@media (min-width: 900px) { .fplayer__list { flex-direction: column; gap: 0; overflow: visible; } }
.fitem { position: relative; display: block; width: 100%; text-align: left; color: var(--ink-muted); }
.fitem__title { display: block; font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; transition: color 0.2s ease; }
.fitem:hover .fitem__title, .fitem.is-active .fitem__title { color: var(--paper); }
.fitem__text { display: none; }
.fitem__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.fitem__fill { position: absolute; inset: 0; background: var(--rec); transform-origin: left center; transform: scaleX(0); }
.fitem:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Mobile: a row of pills above the stage */
@media (max-width: 899px) {
  .fitem { padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
  .fitem.is-active { border-color: var(--line-strong); background: var(--surface); }
  .fitem__bar { left: 14px; right: 14px; bottom: 6px; }
}
/* Desktop: a list; the active item opens to show its line */
@media (min-width: 900px) {
  .fitem { padding: 18px 0 20px; }
  .fitem__title { font-size: 18px; white-space: normal; }
  .fitem__text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
  .fitem__text > span { overflow: hidden; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink-muted); }
  .fitem.is-active .fitem__text { grid-template-rows: 1fr; }
  .fitem.is-active .fitem__text > span { padding-top: 6px; }
}
.fplayer__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line); container-type: inline-size; }
.fslide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.fslide.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
.fslide__poster, .fslide__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.fslide__video { opacity: 0; transition: opacity 0.2s ease; }
.fslide__video.is-ready { opacity: 1; } /* the poster (its first frame) shows until it can play */
/* Channel report: built to 16:10, sized in container units so it scales with the stage */
.freport { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3.2cqw; padding: 5cqw 5.5cqw; }
.freport__title { font-family: var(--font-display); font-weight: 700; font-size: 3.1cqw; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.freport__meta { margin-top: 0.8cqw; font-size: 1.9cqw; color: var(--ink-muted); }
.freport__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; padding-bottom: 2.4cqw; border-bottom: 1px solid var(--line); }
.freport__label { font-size: 1.8cqw; color: var(--ink-muted); }
.freport__value { margin-top: 0.6cqw; font-family: var(--font-display); font-weight: 800; font-size: 5cqw; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.freport__stats--rows { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 4cqw; row-gap: 2.6cqw; align-items: center; padding-bottom: 0; border-bottom: 0; }
.freport__video { font-size: 2.3cqw; line-height: 1.25; color: var(--ink); padding-top: 2.6cqw; border-top: 1px solid var(--line); }
.freport__stats--rows .freport__value { font-size: 4.2cqw; margin-top: 0; padding-top: 2.6cqw; border-top: 1px solid var(--line); text-align: right; }
.freport__stats--rows .freport__label:not(:first-child) { text-align: right; }
.freport__chart { display: block; width: 100%; flex: 1; min-height: 0; overflow: visible; }
.freport__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.freport__typical, .freport__line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.freport__typical { stroke: var(--ink-faint); stroke-width: 2; stroke-dashoffset: var(--draw-typical, 0); }
.freport__line { stroke: var(--paper); stroke-width: 3; stroke-dashoffset: var(--draw, 0); }
.freport__legend { display: flex; gap: 3cqw; font-size: 1.8cqw; color: var(--ink-muted); }
.freport__key { display: inline-flex; align-items: center; gap: 1cqw; }
.freport__key::before { content: ""; width: 2.4cqw; height: 3px; border-radius: 2px; }
.freport__key--this::before { background: var(--paper); }
.freport__key--typical::before { background: var(--ink-faint); }

/* ---------- 00:06 Where you work ---------- */
.where { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-lg) 32px; }
@media (min-width: 900px) { .where { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.where__panel { display: flex; flex-direction: column; align-items: flex-start; }
.where__panel .clip { width: 100%; }
.clip.has-cues-below + .where__title { margin-top: 0; } /* the label band below the clip is the gap */
.where__title { margin-top: 28px; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.where__text { margin-top: 10px; max-width: 440px; font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.where__btn { margin-top: 24px; }

/* ---------- Light: one low glow in the hero, one subtle one behind the MCP chat ---------- */
/* Light, not shapes: every glow is a radial gradient that reaches zero long before its box ends,
   behind the content (z-index -1 inside an isolated parent). The fixed film grain over the page
   hides any banding. Never on borders, buttons or text. */
/* The hero: a faint 80px grid, fading out towards the edges and the bottom */
.hero { position: relative; isolation: isolate; overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 22%, #000 25%, transparent 100%); mask-image: radial-gradient(70% 55% at 50% 22%, #000 25%, transparent 100%);
}
/* The hero's one light, Linear-style but red, around the demo video. The layer reaches from above the
   video to well below it and spreads past both sides: a wide haze centred on the video, so its sides glow in
   the first screen without scrolling, and a brighter core along the video's bottom edge (at 70.7% of the
   layer's height). Many stops keep the falloff smooth; together the two peak at 25% (#7A1010, CLAUDE.md) */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -45% -50% -60%;
  background:
    radial-gradient(45% 15% at 50% 70.7%, rgba(122, 16, 16, 0.12) 0%, rgba(122, 16, 16, 0.09) 25%, rgba(122, 16, 16, 0.045) 52%, rgba(122, 16, 16, 0.015) 78%, rgba(122, 16, 16, 0) 100%),
    radial-gradient(50% 50% at 50% 50%, rgba(122, 16, 16, 0.15) 0%, rgba(122, 16, 16, 0.12) 30%, rgba(122, 16, 16, 0.07) 55%, rgba(122, 16, 16, 0.03) 78%, rgba(122, 16, 16, 0) 100%);
}
/* One subtle red glow per section (CLAUDE.md): #7A1010 at 15-25% behind or beside the main visual,
   alternating left and right down the page, fading to nothing; the fixed film grain sits over it */
.sglow { position: relative; isolation: isolate; overflow-x: clip; }
.sglow::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: var(--gy, 60%); left: var(--gx, 50%); width: min(1100px, 110vw); aspect-ratio: 1.35; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(122, 16, 16, var(--ga, 0.2)) 0%, rgba(122, 16, 16, calc(var(--ga, 0.2) * 0.5)) 40%, rgba(122, 16, 16, calc(var(--ga, 0.2) * 0.15)) 70%, rgba(122, 16, 16, 0) 100%);
}
.channels.sglow { --gy: 66%; } /* behind the Hormozi card */
.sglow--l { --gx: 30%; }
.sglow--r { --gx: 70%; }
@media (max-width: 899px) { .sglow--l, .sglow--r { --gx: 50%; } }

/* ---------- Layered visuals (Linear-style): a dimmed back panel, a sharp front panel ---------- */
/* Both sit in one grid cell, so the box is as tall as the taller of the two and nothing spills.
   --back-w / --front-w / --front-top tune each use. Below 900px only the front shows. */
.layered { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; isolation: isolate; } /* one track, the container's width: a back wider than it overflows both sides evenly and never pushes the front off the axis */
.layered > * { grid-area: 1 / 1; min-width: 0; }
.layered__back {
  z-index: 0; width: var(--back-w, 66%); justify-self: end; align-self: start; opacity: 0.4; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 44% 44% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 44% 44% at 50% 50%, #000 40%, transparent 100%);
}
.layered--left .layered__back { justify-self: start; }
.layered--center .layered__back { justify-self: center; }
.layered__front {
  z-index: 1; position: relative; width: var(--front-w, 60%); justify-self: start; align-self: start; margin-top: var(--front-top, 10%);
  background: #151515; border: 1px solid #262626; border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -30px #000000e6;
}
.layered--left .layered__front { justify-self: end; }
.layered--center .layered__front { justify-self: center; }
.motion .layered:not(.is-in) .layered__back { opacity: 0; }
.motion .layered .layered__back { transition: opacity 0.9s var(--ease); }
.motion .layered:not(.is-in) .layered__front { opacity: 0; translate: 0 24px; }
.motion .layered .layered__front { transition: opacity 0.7s var(--ease) 0.45s, translate 0.8s var(--ease) 0.45s; }
@media (max-width: 899px) {
  .layered__back { display: none; }
  .layered__front { width: 100%; margin-top: 0; justify-self: stretch; }
  .sec__head + .layered { margin-top: var(--stack-lg); } /* without --front-top, a visual straight under a head needs the usual headline-to-visual gap */
}
/* A component that brings its own card sits in the front panel without a second frame */
.layered__front > .evcard, .layered__front > .mcp__chat { margin: 0; max-width: none; background: none; border: 0; box-shadow: none; }

/* A faint top highlight on the main cards and frames: an inset 1px line along the top edge only */
.price-card, .evcard, .fplayer__stage, .tile, .pair__card, .where__mock, .faq__card, .voices__item, .clue__vf, .receipt__card, .closer__box {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fplayer__stage { box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ---------- Hero: the demo loop ---------- */
/* A big product video under the headline: the full container width (about 1120px of video on desktop) */
.hero__stage { width: 100%; max-width: 1176px; margin-top: var(--stack-lg); }
.hero__stage .hero__vf { margin-top: 0; max-width: none; }
/* 16px from the video frame to the "PreFilm demo" label, then 64px to the marquee */
.hero__stage .vf { padding-bottom: calc(16px + 11px); }
.hero__stage .hud--bl, .hero__stage .hud--br { bottom: 0; }
.hero .mq { margin-top: 48px; } /* plus the 16px below the frame: 64px from the label */
/* Phones: the labels start 34px in, clear of the 26px corner brackets (10 Nov, Henry: at 18px the bottom brackets ran through "PreFilm demo" and "2 min") */
@media (max-width: 599px) { .hero__stage .vf { padding: 20px 14px; } .hero__stage .hud--tl, .hero__stage .hud--bl { left: 34px; } .hero__stage .hud--tr, .hero__stage .hud--br { right: 34px; } }
.heroloop { position: relative; aspect-ratio: 16 / 9; /* the explainer's own shape (13 Nov; until then 1600 / 732, the cropped demo) */ border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.heroloop__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.heroloop__btn {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px 0 18px;
  font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--on-paper); background: var(--paper);
  border-radius: var(--radius-pill); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); transition: scale 0.2s ease;
}
.heroloop__btn:hover { scale: 1.04; }
.heroloop__btn[hidden] { display: none; }
.heroloop__video:focus { outline: none; }
.heroloop__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.heroloop__btn svg { width: 20px; height: 20px; fill: var(--on-paper); }
@media (max-width: 599px) { .heroloop__btn { min-height: 44px; padding: 0 18px 0 14px; font-size: 14px; } }
.demo__dialog .watch__video { aspect-ratio: 16 / 9; }


/* ---------- 00:03 YouTube MCP ---------- */
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.caps li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.caps svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Works with: the official Claude and ChatGPT marks, one colour */
.aiwith { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.aiwith--center { justify-content: center; }
.hero .aiwith { margin-top: var(--stack-md); }
.aiwith__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.aiwith__list li { display: inline-flex; align-items: center; gap: 10px; font-size: inherit; color: var(--ink); }
.aiwith__list img { width: 24px; height: 24px; }
.aiwith { font-size: 17px; line-height: 1.55; }
@media (min-width: 768px) { .aiwith { font-size: 19px; } }
.aiwith__note { color: var(--ink-muted); }
.mcp .split__grid { align-items: start; } /* the label lines up with the top of the visual, not its middle */
@media (min-width: 1100px) { .mcp .split__media .cframe { max-width: none; } }
/* MCP: a wall of thumbnails behind the Claude window, no box or edge, spilling past its top and right */
.mcpwall { position: relative; isolation: isolate; }
.mcpwall > .cframe, .mcpwall__front { position: relative; z-index: 1; }
.mcpwall--hero { width: 100%; max-width: 1040px; margin: var(--stack-lg) auto 0; }
.mcpwall--hero .hero__vf { margin-top: 0; }
.mcpwall--hero .mcpwall__back { inset: -16% -22% -14% -22%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mcpwall__back { position: absolute; z-index: 0; inset: -24% -15% -12% -14%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: center; gap: 14px; opacity: 0.35; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, #000 20%, transparent 100%); }
.mcpwall__back img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) { .mcpwall__back { display: none; } }
/* A clean app window round a recording: title bar, radius, hairline border */
.cframe { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.cframe__bar { position: relative; display: flex; align-items: center; justify-content: center; height: 38px; border-bottom: 1px solid var(--line); background: var(--raised); }
.cframe__dots { position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: flex; gap: 7px; }
.cframe__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.cframe__title { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.cframe .clip__media video, .cframe .clip__media img { max-height: none; }
.mcp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stack-sm) var(--stack-md); }
.mcp__chat { padding: var(--stack-md); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mcp__chat .chat { padding: 0; }
/* The chat's result card: three outliers, each with a two-bar chart against its channel's normal */
.mres__card { padding: 6px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.mres__list { list-style: none; margin: 0; padding: 0; }
.mres { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; }
.mres + .mres { border-top: 1px solid var(--line); }
.mres img { display: block; width: 72px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.mres__body { display: grid; gap: 2px; min-width: 0; }
.mres__t { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mres__ch { font-size: 13px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mres__bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.mres__bars i { display: block; width: 7px; height: var(--h); background: var(--line-strong); border-radius: 2px; }
.mres__bars .mres__out { background: var(--paper); }
.motion [data-seq].chat:not(.is-in) .mres__out { height: 18%; }
.motion [data-seq].chat .mres__out { transition: height 0.7s var(--ease) calc(var(--t, 0s) + 0.3s); }
.where--solo { max-width: 640px; }
@media (min-width: 900px) { .where.where--solo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 00:07 The extension, on a real channel ---------- */
.xshot { position: relative; max-width: 880px; margin: var(--stack-lg) auto 0; }
.xshot__frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.xshot__bar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--raised); }
.xshot__dots { display: flex; gap: 6px; }
.xshot__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.xshot__url { flex: 1; max-width: 360px; margin: 0 auto; padding: 5px 12px; font-size: 12px; line-height: 1; text-align: center; color: var(--ink-muted); background: var(--bg); border-radius: var(--radius-pill); }
.xshot__media { position: relative; }
.xshot__media img { display: block; width: 100%; height: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.xshot__rings { position: absolute; inset: 0; pointer-events: none; }
.xshot__ring { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 6px; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
.motion .xshot.is-in .xshot__ring { animation: xring 1.1s var(--ease) both; animation-delay: calc(0.3s + var(--n) * 0.35s); }
.motion .xshot.is-in .xshot__ring--key { animation: xring 1.1s var(--ease) both, xring-hold 0.6s var(--ease) forwards; animation-delay: calc(0.3s + var(--n) * 0.35s), calc(1.4s + var(--n) * 0.35s); }
@keyframes xring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
@keyframes xring-hold { to { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); } }
/* The 5.5x label: outside the frame on the left, at the badge's height, with a line in to the badge (wide screens) */
.xshot__label { display: none; }
@media (min-width: 1200px) {
  .xshot__label {
    display: block; position: absolute; right: calc(100% + 28px); top: var(--y); translate: 0 -50%;
    font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--hud);
  }
  .xshot__label::after { content: ""; position: absolute; left: calc(100% + 10px); top: 50%; height: 1px; width: calc(18px + 880px * var(--bx-n) - 4px); background: var(--hud); }
}
/* Add to Chrome: a white pill with the official Chrome logo */
.chrome-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1.2; color: #0B0B0B; background: #FFFFFF; border-radius: var(--radius-pill); text-decoration: none; transition: background-color 0.2s ease; }
.chrome-btn img { width: 18px; height: 18px; }
.chrome-btn:hover { background: #E8E8E8; }
.chrome-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.xshot__cta { display: flex; justify-content: center; margin-top: var(--stack-md); }
.motion .xshot:not(.is-in) .xshot__label { opacity: 0; }
.motion .xshot .xshot__label { transition: opacity 0.5s var(--ease) 2.6s; }
@media (prefers-reduced-motion: reduce) { .xshot__ring--key { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); } }
html:not(.motion) .xshot__ring--key { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }

/* ---------- Back-panel mockups (dimmed, decorative) ---------- */
.bboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px; background: #121212; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.bboard__col { display: grid; align-content: start; gap: 8px; }
.bboard__head { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); padding: 2px 2px 6px; border-bottom: 1px solid var(--line); }
.bboard__card { display: grid; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.bboard__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.bboard__t { font-size: 11px; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; padding: 4px; }
/* Proof: the thumbnails as a full-width wall behind the card, fading out on every side (no hard edges) */
.layered--wall .layered__back { width: min(1600px, 100vw); justify-self: center; align-self: center; opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, #000 20%, transparent 100%); }
.layered--wall .bgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 16px; }
.layered--wall .layered__front { justify-self: center; }
.bgrid__item { display: grid; gap: 4px; min-width: 0; }
.bgrid__thumb { position: relative; display: block; }
.bgrid__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.bgrid__thumb .chip { position: absolute; left: 6px; top: 6px; }
.bgrid__t { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bgrid__c { font-size: 12px; color: var(--ink-muted); }
.xshot2 { max-width: 1100px; margin: var(--stack-lg) auto 0; }
.xshot2 .layered__back img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.xshot2 .layered__back { align-self: center; opacity: 0.3; background: none; -webkit-mask-image: radial-gradient(ellipse 52% 50% at 55% 50%, #000 0%, rgba(0, 0, 0, 0.7) 22%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.14) 68%, transparent 88%); mask-image: radial-gradient(ellipse 52% 50% at 55% 50%, #000 0%, rgba(0, 0, 0, 0.7) 22%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.14) 68%, transparent 88%); } /* a white page reads brighter: dimmer, softer edge */
.motion .xshot2 .layered.is-in .layered__back { opacity: 0.3; }
/* The extension's side panel for one video */
.xpanel { padding: 18px; }
.xpanel__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: -0.01em; color: var(--paper); }
.xpanel__thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 14px; border-radius: 8px; }
.xpanel__title { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.xpanel__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 15px; color: var(--ink-muted); }
.xpanel__dot { color: var(--ink-faint); }
.xpanel__rows { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.xpanel__rows li { padding: 11px 2px; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); }
.xpanel__btn { display: flex; justify-content: center; align-items: center; min-height: 40px; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--on-paper); background: var(--paper); border-radius: var(--radius-md); }
.hero__stage { position: relative; }

/* ---------- 00:02 Channels ---------- */
.cgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 8px 0; }
.ccard { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; background: #141414; border: 1px solid #262626; border-radius: var(--radius-lg); }
.ccard__av { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ccard__av--lg { width: 56px; height: 56px; }
.ccard__text { display: grid; gap: 2px; min-width: 0; }
.ccard__name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard__name--lg { font-size: 18px; }
.ccard__yt { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-muted); stroke-width: 1.6; }
.ccard__yt path { fill: var(--ink-muted); stroke: none; }
.ccard__subs { font-size: 15px; color: var(--ink-muted); }
.motion .layered--channels:not(.is-in) .ccard { opacity: 0; translate: 0 10px; }
.motion .layered--channels .ccard { transition: opacity 0.6s var(--ease), translate 0.6s var(--ease); transition-delay: calc(var(--r) * 0.18s); }
.layered--channels .layered__front { transition-delay: 0.8s, 0.8s !important; }
@media (min-width: 900px) {
  .motion .layered--channels.is-in .cgrid { animation: drift 12s ease-in-out 1.5s infinite alternate; }
}
@keyframes drift { from { translate: -10px 0; } to { translate: 10px 0; } }
/* A full-width wall of channels behind the card, fading into the page on every side (no edges) */
.layered--channels .layered__back { width: min(1600px, 100vw); justify-self: center; align-self: center; opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, #000 25%, transparent 100%), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, #000 25%, transparent 100%), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; } /* the radial fade alone met the viewport edge on wide screens, so the wall was cut, not faded; the horizontal fade keeps it soft at the sides */
.motion .layered--channels:not(.is-in) .layered__back { opacity: 0.45; } /* the cards fade in themselves, row by row */
.ctrack { padding: 22px; }
.ctrack__who { display: flex; align-items: center; gap: 14px; }
.ctrack__label { margin-top: 18px; font-size: 15px; color: var(--ink-muted); }
.ctrack__select { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; min-height: 42px; padding: 0 12px; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.ctrack__select svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-muted); stroke-width: 1.6; }
.ctrack__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ctrack__btn { display: flex; align-items: center; justify-content: center; min-height: 42px; font-size: 15px; font-weight: 500; color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.ctrack__btn--rec { color: var(--on-btn); background: var(--btn); border-color: var(--btn); }
a.ctrack__btn { text-decoration: none; transition: background-color 0.2s, border-color 0.2s; }
a.ctrack__btn:hover { border-color: var(--ink-muted); }
a.ctrack__btn--rec:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
a.ctrack__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.ctrack__top { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ctrack__top img { display: block; width: 88px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.ctrack__t { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }

/* ---------- Compare: two cards, most tools (muted) and PreFilm (lifted), the same height ---------- */
.vsc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-md); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .vsc { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.vsc__card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); }
.vsc__card--them { background: var(--surface); border: 1px solid var(--line); color: var(--ink-muted); }
.vsc__card--us { background: #151515; border: 1px solid #FFFFFF33; }
.vsc__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); }
.vsc__card--them .vsc__title { color: var(--ink-muted); }
.vsc__logo { width: 26px; height: 26px; flex: none; }
.vsc__sub { margin-top: 6px; font-size: 16px; color: var(--ink-muted); }
.vsc__list { list-style: none; margin: var(--stack-md) 0 0; padding: var(--stack-md) 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.vsc__list li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.vsc__list--dots li { color: var(--ink-muted); }
.vsc__list--dots li::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 6px; border-radius: 50%; background: var(--ink-muted); }
.vsc__tick { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vsc__btn { margin-top: auto; align-self: flex-start; }
.vsc__list + .vsc__btn { margin-top: var(--stack-lg); }

/* ---------- Homepage shapes ---------- */
/* Centred heads: the timecode label sits above the headline */
.sec__head.sec__head--center { display: flex; flex-direction: column; align-items: center; gap: var(--stack-sm); text-align: center; }
.sec__head--center .h2 { margin-inline: auto; }
.sec__head--center .ln { text-wrap: balance; }
.sec__head--center .body { margin: calc(var(--stack-md) - var(--stack-sm)) auto 0; }

/* 00:03 Proof: one centred evidence card */
.evcard { max-width: 900px; margin: var(--stack-lg) auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: left; }
@media (min-width: 820px) { .evcard { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 36px; padding: 28px; align-items: center; } }
.evcard__src { margin: 0; }
.evcard__src img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.evcard__src-body { display: grid; gap: 2px; margin-top: 14px; }
.evcard__src-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); }
.evcard__src-title { margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.evcard__src-ch { font-size: 15px; color: var(--ink-muted); }
.evcard__title { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); }
@media (min-width: 820px) { .evcard__title { font-size: 28px; } }
.evcard__stats { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.evcard__stats div { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.evcard__stats dt { order: 2; font-size: 15px; line-height: 1.35; color: var(--ink-muted); }
.evcard__n { order: 1; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 820px) { .evcard__n { font-size: 56px; } }
.evcard__n--rec { color: var(--rec); } /* this section's one red number */

/* Proof, "your next video": the repackaged title on top, the source video below */
.evcard--next { display: block; padding: 0; overflow: hidden; }
.evcard__next { padding: 28px; border-bottom: 1px solid var(--line); }
.evcard__next-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.evcard__tag { font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.evcard__title--next { margin-top: 14px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.evcard__line { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.evcard__based { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
@media (min-width: 820px) { .evcard__based { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 36px; align-items: center; } }
.evcard__src-title--big { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.evcard--next .evcard__src-ch { display: block; margin-top: 2px; }
.evcard__stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evcard--next .evcard__n { font-size: clamp(32px, 3.6vw, 48px); }
.evcard__after { margin-top: var(--stack-md); text-align: center; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
@media (min-width: 768px) { .evcard__after { font-size: 19px; } }

/* 00:04 Scripts: the rewrite is the section, centred and huge */
.rewrite.rewrite--big { max-width: 1040px; margin: var(--stack-lg) auto 0; grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; gap: 28px; text-align: center; justify-items: center; } /* stacked at every width */
.rewrite--big .label { display: block; }
.rewrite--big .rewrite__ai { margin-top: 14px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.03em; color: var(--ink-muted); }
.rewrite--big .rewrite__ai del { background-position: 0 56%; background-size: 100% 3px; }
.rewrite--big.is-pending .rewrite__ai del { background-size: 0% 3px; }
.rewrite--big.is-struck .rewrite__ai del { transition: background-size 1s var(--ease); }
.rewrite--big .rewrite__arrow { font-family: var(--font-sans); font-size: 26px; line-height: 1; }
.rewrite--big .rewrite__new { margin-top: 14px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.035em; color: var(--paper); }
.rewrite--big .rewrite__new .word { transition: opacity 0.35s var(--ease); }

/* The AI tells: each giveaway gets a thin white underline and a small grey label above it */
.rewrite--tells .rewrite__ai { line-height: 1.75; }
.tell2 { position: relative; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--paper); }
.tell2__label {
  position: absolute; left: 0; bottom: calc(100% - 0.35em); white-space: nowrap;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
}
.motion .rewrite--tells.is-pending .tell2:not(.is-on) { text-decoration-color: transparent; }
.motion .rewrite--tells.is-pending .tell2:not(.is-on) .tell2__label { opacity: 0; translate: 0 4px; }
.motion .rewrite--tells .tell2, .motion .rewrite--tells .tell2__label { transition: text-decoration-color 0.3s var(--ease), opacity 0.3s var(--ease), translate 0.3s var(--ease); }
@media (max-width: 599px) { .tell2__label { font-size: 10px; letter-spacing: 0.08em; } }

/* Watch it work: one wide poster, recordings in a dialog */
.watch__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); text-align: center; }
.watch__poster { position: relative; display: block; width: 100%; max-width: 1040px; margin: var(--stack-lg) auto 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); cursor: pointer; }
.watch__poster img { display: block; width: 100%; height: auto; transition: scale 0.6s var(--ease); }
.watch__poster:hover img { scale: 1.02; }
.watch__poster:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.watch__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--paper); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); transition: scale 0.2s ease; }
.watch__poster:hover .watch__play { scale: 1.06; }
.watch__play svg { width: 36px; height: 36px; margin-left: 4px; fill: var(--on-paper); }
@media (max-width: 599px) { .watch__play { width: 68px; height: 68px; } .watch__play svg { width: 26px; height: 26px; } }
.watch__dialog { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: auto; }
.watch__dialog::backdrop { background: rgba(0, 0, 0, 0.86); }
.watch__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 0 20px; }
.watch__dialog-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); }
.watch__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--ink); }
.watch__close:hover { background: var(--raised); }
.watch__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.watch__tabs { display: flex; gap: 6px; padding: 10px 16px 14px; overflow-x: auto; }
.watch__tab { flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--ink-muted); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.watch__tab:hover { color: var(--paper); }
.watch__tab[aria-selected="true"] { color: var(--on-paper); background: var(--paper); border-color: var(--paper); }
.watch__video { display: block; width: 100%; height: auto; background: #000; }

/* 00:06 Where you work: two clean mockups, no brackets */
.where__mock { width: 100%; min-height: 360px; display: flex; align-items: center; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.feed { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
@media (min-width: 600px) { .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feed__item { display: grid; gap: 4px; min-width: 0; }
.feed__thumb { position: relative; display: block; margin-bottom: 4px; }
.feed__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.feed__x { position: absolute; left: 6px; top: 6px; }
.feed__title { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed__ch { font-size: 12px; line-height: 1.3; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motion [data-seq].feed:not(.is-in) .feed__x { opacity: 0; scale: 0.4; }
.motion [data-seq].feed .feed__x { transition: opacity 0.3s var(--ease), scale 0.45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(0.3s + var(--t, 0s)); }
.chat--small { width: 100%; padding: 4px 0; gap: 14px; }
.chat--small .chat__msg { font-size: 15px; }
.chat--small .chat__changes li { font-size: 14px; }

/* ---------- 00:07 Built by Henry ---------- */
.founder { display: flex; align-items: center; gap: var(--space-3); }
.founder__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.founder__text { display: flex; flex-direction: column; }
.founder__name { font-size: 16px; font-weight: 600; color: var(--ink); }
.founder__role { font-size: 17px; color: var(--ink-muted); }
@media (min-width: 768px) { .founder__role { font-size: 19px; } }
.founder__more { justify-self: start; }
.sec__head--center .founder { justify-content: center; text-align: left; }
.receipts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 600px) { .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .receipts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.receipt { position: relative; display: grid; }
.receipt__card { height: 100%; }
.receipt:not(.receipt--wide) .receipt__title { min-height: calc(2em * 1.35); }
/* Receipts in groups: a label and white result chips above each group's cards */
.receipt__card { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px; transition: border-color 0.2s ease; }
.receipt__card:hover, .receipt__card:focus-visible { border-color: var(--line-strong); }
.receipt__card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.receipt__img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.receipt__title { margin-top: var(--space-3); padding: 0 4px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.receipt__line { margin-top: var(--space-1); padding: 0 4px 6px; font-size: 17px; line-height: 1.45; color: var(--ink-muted); }
@media (min-width: 768px) { .receipt__line { font-size: 19px; } }
.receipt__line + .receipt__date { margin-top: -6px; }
/* Handwritten notes over a receipt: /about only now */
@media (min-width: 900px) { .receipts:has(.receipt__pin) { padding-top: 92px; } }
.receipt__facts { margin-top: var(--space-1); padding: 0 4px 6px; font-size: 13px; color: var(--ink-muted); }
.receipt__pin { position: absolute; left: 4%; bottom: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.receipt__note { font-family: var(--font-hand); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.receipt__arrow { margin: 6px 0 0 36%; overflow: visible; }
@media (max-width: 899px) { .receipt__pin { display: none; } }
.motion .receipt__note:not(.is-on), .motion .receipt__chip:not(.is-on) { opacity: 0; }
.motion .receipt__note.is-on, .motion .receipt__chip.is-on { opacity: 1; transition: opacity 0.5s var(--ease); }
/* Henry's channel screenshot: full grid width; it's light-themed, so it gets a hairline round the image */
.receipt--wide { grid-column: 1 / -1; }
/* Built by Henry: three receipts, the channel screenshot across the top and two videos under it */
@media (min-width: 600px) { .receipts--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.receipts--three { max-width: 1040px; margin-left: auto; margin-right: auto; }
.henry .sec__head--center { gap: var(--stack-md); } /* even gaps: headline, intro, founder line, pill */
.henry .sec__head--center .body { max-width: 560px; margin-top: 0; }
.henry__by { font-size: 15px; color: var(--ink-muted); }
/* Four text styles in this section: label, headline, body (intro, card titles in white, result lines in grey)
   and the small grey line (founder, date) */
.henry .receipt__title { font-size: 17px; font-weight: 400; min-height: 0; }
@media (min-width: 768px) { .henry .receipt__title { font-size: 19px; } }
.henry .receipt__date { margin-top: 2px; font-size: 15px; color: var(--ink-muted); }
.henry__more { margin-top: 0; }
.henry .sec__visual { margin-top: var(--stack-lg); }
.about__shot { margin-top: var(--stack-lg); }
.about-receipts .receipts--three { margin-top: 0; }
.receipts--three { margin-top: var(--stack-lg); }
/* Revenue chip: white with black text, over the card's top-right corner (padding only, never the chart) */
.receipt__chip {
  position: absolute; top: 8px; right: -8px; translate: 0 -100%;
  font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1;
  color: var(--on-paper); background: var(--paper); border-radius: var(--radius-pill); padding: 7px 13px;
}
/* Henry's handwritten note above the card, with a hand-drawn arrow to the card's top edge */
.hand-arrow { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Sequence states (site.js, motion only) */
.receipt.is-pending { opacity: 0; transform: translateY(16px); }
.receipt.is-in { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.receipt.is-pending .receipt__img { clip-path: inset(0 100% 0 0); }
.receipt.is-drawing .receipt__img { clip-path: inset(0); transition: clip-path 1.2s var(--ease); }
.motion .hand-arrow:not(.is-on) { visibility: hidden; }
.hand-arrow__line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion .hand-arrow:not(.is-on) .hand-arrow__line { stroke-dashoffset: 1; }
.motion .hand-arrow.is-on .hand-arrow__line { transition: stroke-dashoffset 0.5s var(--ease); }

/* ---------- 00:08 Pricing ---------- */
.prices { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 900px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { display: flex; }
.price-card { display: flex; flex-direction: column; width: 100%; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.price-card--pop { border-color: var(--frame-pop); }
.price-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.price-card__name { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.price-card__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper); }
.price-card__for { margin-top: 10px; font-size: 15px; color: var(--ink); }
.price-card__scope { margin-top: 2px; font-size: 15px; color: var(--ink-muted); }
.price-card__trial { display: inline-flex; align-items: center; width: fit-content; margin-top: 24px; padding: 7px 14px; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); transition: background-color 0.2s ease, border-color 0.2s ease; } /* the $1 trial, as a chip in the card's head so it reads in both billing states */
.price-card__trial[role="button"] { cursor: pointer; } /* on Annual it switches the cards to Monthly (site.js) */
.price-card__trial[role="button"]:hover { background: var(--raised); border-color: var(--ink-muted); }
.price-card__trial:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.price-card__price { margin-top: 14px; display: flex; align-items: baseline; gap: 4px; }
.price-card__amount { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-card__per { font-size: 15px; color: var(--ink-muted); }
.price-card__billed { margin-top: 6px; font-size: 15px; color: var(--ink-muted); }
.price-card__amount, .price-card__billed { transition: opacity 0.2s ease; }
.price-card.is-swapping .price-card__amount, .price-card.is-swapping .price-card__billed { opacity: 0; }
/* Monthly / Annual switch */
.billing { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto var(--stack-md); font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.billing[hidden] { display: none; }
.billing__opt.is-on { color: var(--paper); }
.billing__switch { position: relative; width: 48px; height: 28px; padding: 0; border-radius: var(--radius-pill); background: var(--raised); border: 1px solid var(--line-strong); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.billing__switch[aria-checked="true"] { background: var(--btn); border-color: var(--btn); } /* Annual on: the toggle's active state is red (CLAUDE.md) */
.billing__switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.billing__knob { position: absolute; top: 3px; left: 3px; box-shadow: 0 1px 2px #00000066; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); transition: translate 0.2s var(--ease); }
.billing__switch[aria-checked="true"] .billing__knob { translate: 20px 0; }
.billing__save { font-size: 12px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-paper); background: var(--paper); border-radius: var(--radius-pill); padding: 5px 9px; }
/* What's included (Henry, 10 Nov 2026): a muted header ("Creator includes" / "Everything in Creator, plus"), then one row per thing you get:
   a short lead in ink, what you get in buyer words, and a short muted detail after it, written to fit one line at 1440. Same size as the
   body text, so the card keeps its text styles; only the weight and the colour change. */
.price-card__incl { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.price-card__ticks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; align-content: start; flex: 1; } /* the list fills the card so the buttons line up; its rows keep their own height instead of spreading out */
.price-card__ticks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.price-card__lead { font-weight: 500; color: var(--ink); }
.price-card__detail { color: var(--ink-muted); }
.plan__tick { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.price-card__btn { margin-top: auto; padding-top: 0; width: 100%; } /* anchored to the card's bottom, so both buttons sit on one line whatever the lists' heights */
.price-card__ticks { padding-bottom: 32px; }
.pricing__notes { max-width: 720px; margin: 40px auto 0; text-align: center; }
.pricing__guarantee { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink); text-wrap: balance; }
.pricing__guarantee + .pricing__small { margin-top: 4px; }
.pricing__small { font-size: 15px; line-height: 1.6; color: var(--ink-muted); text-wrap: balance; }

/* ---------- 00:09 Questions ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: 200px minmax(0, 1fr); gap: 0 var(--space-8); align-items: start; }
  .faq__card { position: sticky; top: 120px; }
}
.faq__card { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 960px) { .faq__card { order: 0; } .faq__list { order: 1; } }
@media (max-width: 959px) { .faq__card { order: 2; } }
.faq__card-title { font: inherit; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ink); }
@media (min-width: 768px) { .faq__card-title { font-size: 21px; } }
.faq__card-text { margin-top: var(--space-1); font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
/* The card's action is a .link-pill (no underlined links in page content), 9 Nov 2026 */
.faq__card-link { margin-top: var(--space-6); }
.faq__list { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); padding: 24px 0; }
.faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); list-style: none; cursor: pointer; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ink); }
@media (min-width: 768px) { .faq__q { font-size: 21px; } }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-sm); }
.faq__icon { position: relative; flex: none; width: 34px; height: 34px; margin-top: calc((1.35em - 34px) / 2); /* centred on the question's first line, so a wrapped question doesn't push it down (9 Nov) */ border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 1px; background: var(--paper); transition: background-color 0.3s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--paper); border-color: var(--paper); transform: rotate(45deg); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--on-paper); }
.faq__a { overflow: hidden; }
.faq__a p { margin-top: 14px; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .motion .faq__item { interpolate-size: allow-keywords; }
  .motion .faq__item::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 0.35s var(--ease), opacity 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
  .motion .faq__item[open]::details-content { block-size: auto; opacity: 1; }
}

/* =====================================================================
   Product pages
   ===================================================================== */

/* A headline whose lines wrap: even line lengths, no orphaned last word */
.h1--balance .ln__in, .h2--balance .ln__in { text-wrap: balance; }

/* A clip as the hero visual: capped so a tall clip doesn't fill the screen */
.hero__vf--clip { max-width: 760px; }
.hero__vf--clip .clip__media { max-height: 70vh; }

/* What it is: three boxes joined by lines that draw in (data-seq) */
.flow3 { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; padding: 32px 8px; }
@media (min-width: 768px) { .flow3 { grid-template-columns: minmax(0, 1fr) minmax(40px, 120px) minmax(0, 1fr) minmax(40px, 120px) minmax(0, 1fr); align-items: center; padding: 64px 24px; } }
.flow3__box {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 260px; min-height: 72px; padding: 16px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; text-align: center; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface);
}
.flow3__box--prefilm { border-color: var(--frame-pop); }
.flow3__line { display: block; width: 1px; height: 40px; background: var(--leader); }
@media (min-width: 768px) { .flow3__line { width: 100%; height: 1px; } }
.motion [data-seq]:not(.is-in) .flow3__line { transform: scaleY(0); }
@media (min-width: 768px) { .motion [data-seq]:not(.is-in) .flow3__line { transform: scaleX(0); } }
.motion [data-seq] .flow3__line { transform-origin: left top; transition: transform 0.8s var(--ease) 0.3s; }
.motion [data-seq] .flow3__line--2 { transition-delay: 0.9s; }

/* What you can ask: three columns of capabilities with example prompts */
.ask { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-lg) 32px; }
@media (min-width: 960px) { .ask { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ask__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ask__note { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.ask__list { list-style: none; margin: 0; padding: 0; }
.ask__list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ask__cap { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ask__prompt { margin-top: 8px; padding: 10px 14px; font-size: 14px; line-height: 1.45; color: var(--paper); background: var(--raised); border-radius: var(--radius-md); }
/* 7 Nov: the questions alone, as messages you would type: no row lines, no labels, an even gap. */
.ask__list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ask__list li { padding: 0; border-bottom: 0; }
.ask__list .ask__prompt { margin-top: 0; }

/* One conversation: a generic AI chat that plays out on enter (data-seq, each step's delay is --t) */
.chat { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; padding: 24px 4px; }
@media (min-width: 768px) { .chat { padding: 48px 24px; } }
.chat__msg { font-size: 16px; line-height: 1.5; color: var(--ink); }
.chat__msg--user { align-self: flex-end; max-width: 80%; padding: 12px 16px; background: var(--raised); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); }
.chat__tool { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
.chat__msg--ai { display: grid; gap: 10px; }
.chat__changes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.chat__changes li { padding: 10px 0; font-size: 15px; line-height: 1.4; color: var(--ink); border-bottom: 1px solid var(--line); }
.chat__changes del { color: var(--ink-faint); text-decoration: none; background: linear-gradient(var(--paper), var(--paper)) 0 55% / 100% 1.5px no-repeat; }
.chat__changes ins { color: var(--paper); text-decoration: none; font-weight: 600; }
.chat__more { font-size: 14px; color: var(--ink-muted); }
.chat__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chat__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.chat__btn--white { color: var(--on-paper); background: var(--paper); border-color: var(--paper); }
.motion [data-seq].chat:not(.is-in) > *, .motion [data-seq].chat:not(.is-in) .chat__step { opacity: 0; transform: translateY(8px); }
.motion [data-seq].chat > *, .motion [data-seq].chat .chat__step { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--t, 0s); }
.motion [data-seq].chat > .chat__msg--ai { transition-delay: 1.3s; }

/* Set it up: the address, tabs with numbered steps, copy boxes */
.setup { display: grid; gap: var(--stack-lg); max-width: 820px; }
.setup__address .label { margin-bottom: 10px; }
.copybox { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--raised); border-radius: var(--radius-md); }
.copybox__text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--paper); user-select: all; }
.copybox--step { margin-top: 12px; }
.copybox--step .copybox__text { font-size: 14px; }
.copybox__btn { flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color 0.2s ease; }
.copybox__btn:hover { border-color: var(--ink-muted); }
.copybox__btn[hidden] { display: none; }
.tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs__tab { position: relative; min-height: 48px; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--ink-muted); transition: color 0.2s ease; }
.tabs__tab:hover, .tabs__tab[aria-selected="true"] { color: var(--paper); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--paper); }
.tabs__tab:focus-visible { outline-offset: -2px; }
.tabs__panel { padding-top: 24px; }
.tabs__panel:focus-visible { outline-offset: 4px; }
.tabs__panel[hidden] { display: none; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 16px; }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; font-size: 17px; line-height: 1.55; color: var(--ink); }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 50%;
}
.steps__link { margin-top: 20px; }
.setup__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.setup__line { font-size: 16px; color: var(--ink-muted); }

/* Why PreFilm's: three short points */
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) { .points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.points__item { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.points__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.points__text { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

/* Where the ideas come from: three small viewfinders, each a simple visual, then a title and a line */
.clues { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-lg) 24px; }
@media (min-width: 900px) { .clues { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clue__vf { position: relative; display: flex; align-items: center; min-height: 200px; padding: 40px 28px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.clue__tag { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); } /* marks made-up example data */
.clue__vf > ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.clue__title { margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.clue__text { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.clue__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.clue__thumbs .chip { font-size: 11px; padding: 4px 5px; left: 4px; top: 4px; }
.clue__bubbles { display: grid; gap: 8px; }
.clue__bubbles li { justify-self: start; max-width: 92%; padding: 8px 12px; font-size: 14px; line-height: 1.4; color: var(--ink-muted); background: var(--raised); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-sm); }
.clue__searches { display: grid; }
.clue__searches li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; line-height: 1.35; color: var(--ink); border-bottom: 1px solid var(--line); }
.clue__searches li:first-child { border-top: 1px solid var(--line); }
.clue__searches li span:last-child { flex: none; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* What a YouTube outlier is: one channel's last 12 videos; bars grow from the baseline, the red one last */
.bars { display: block; width: 100%; height: auto; max-height: 420px; padding: 24px 8px 8px; overflow: visible; }
.bars__grey rect { fill: var(--line-strong); }
.bars__hot { fill: var(--rec); } /* this section's one red number */
.bars__break { fill: none; stroke: var(--bg); stroke-width: 6; }
.bars__normal { stroke: var(--paper); stroke-width: 1; stroke-dasharray: 5 5; opacity: 0.7; }
.bars__base { stroke: var(--line-strong); stroke-width: 1; }
.bars__label { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-muted); }
.bars__x { font-family: var(--font-display); font-size: 22px; font-weight: 800; fill: var(--rec); }
.bars rect { transform-box: fill-box; transform-origin: bottom; }
/* The chart scales with its frame; keep its labels readable on small screens */
@media (max-width: 599px) { .bars__label { font-size: 24px; letter-spacing: 0.08em; } .bars__x { font-size: 40px; } }
.motion [data-seq].bars:not(.is-in) rect { transform: scaleY(0); }
.motion [data-seq].bars:not(.is-in) .bars__x, .motion [data-seq].bars:not(.is-in) .bars__break,
.motion [data-seq].bars:not(.is-in) .bars__normal, .motion [data-seq].bars:not(.is-in) .bars__label { opacity: 0; }
.motion [data-seq].bars rect { transition: transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.motion [data-seq].bars .bars__normal, .motion [data-seq].bars .bars__label { transition: opacity 0.6s var(--ease) 0.6s; }
.motion [data-seq].bars .bars__x, .motion [data-seq].bars .bars__break { transition: opacity 0.5s var(--ease) 1.5s; }

/* Two kinds of winner */
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pair__card { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pair__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.pair__text { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }

/* Then what: three linked steps */
.next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.next__card { display: flex; flex-direction: column; height: 100%; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 0.2s ease; }
.next__card:hover { border-color: var(--ink-muted); }
.next__card:focus-visible { outline-offset: 3px; border-radius: var(--radius-lg); }
.next__step { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.next__title { margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.next__title span { display: inline-block; transition: transform 0.3s var(--ease); }
.next__card:hover .next__title span { transform: translateX(4px); }
.next__text { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }

/* A small text link under a section's visual */
.sec__more { margin-top: var(--stack-md); }

/* It learns your voice: transcript cards fan in, a line draws, then the learned traits appear */
.learn { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; padding: 32px 4px; }
@media (min-width: 768px) { .learn { grid-template-columns: minmax(0, 1fr) minmax(48px, 120px) minmax(0, 1.1fr); align-items: center; padding: 56px 24px; } }
.learn__stack { position: relative; width: 100%; max-width: 260px; height: 190px; margin-top: 78px; }
@media (min-width: 768px) { .learn__stack { justify-self: end; margin-right: 42px; } .learn__voice { justify-self: start; } } /* the line meets both */
.learn__card {
  position: absolute; left: 0; top: 0; width: 100%; padding: 16px; display: grid; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  transform: translate(calc(var(--n) * 14px), calc(var(--n) * -26px)) rotate(calc(var(--n) * 1.5deg));
  transform-origin: bottom left;
}
.learn__card:nth-child(1) { opacity: 0.5; } .learn__card:nth-child(2) { opacity: 0.7; } .learn__card:nth-child(3) { opacity: 0.85; }
.learn__label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
.learn__card i { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); }
.learn__card i:nth-of-type(2) { width: 82%; } .learn__card i:nth-of-type(3) { width: 64%; }
.learn__line { display: block; width: 1px; height: 40px; background: var(--leader); }
@media (min-width: 768px) { .learn__line { width: 100%; height: 1px; } }
.learn__voice { width: 100%; max-width: 360px; padding: 20px; background: var(--surface); border: 1px solid var(--frame-pop); border-radius: var(--radius-md); }
.learn__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.learn__tag { font-family: var(--font-sans); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--hud); }
.learn__traits { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.learn__traits li { padding: 10px 12px; font-size: 15px; line-height: 1.4; color: var(--ink); background: var(--raised); border-radius: var(--radius-sm); }
.motion [data-seq].learn:not(.is-in) .learn__card { opacity: 0; transform: translate(0, 16px) rotate(0deg); }
.motion [data-seq].learn .learn__card { transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); transition-delay: var(--t); }
.motion [data-seq].learn:not(.is-in) .learn__line { transform: scaleY(0); }
@media (min-width: 768px) { .motion [data-seq].learn:not(.is-in) .learn__line { transform: scaleX(0); } }
.motion [data-seq].learn .learn__line { transform-origin: left top; transition: transform 0.6s var(--ease) 0.9s; }
.motion [data-seq].learn:not(.is-in) .learn__voice, .motion [data-seq].learn:not(.is-in) .learn__traits li { opacity: 0; transform: translateY(8px); }
.motion [data-seq].learn .learn__voice { transition: opacity 0.6s var(--ease) 1.2s, transform 0.6s var(--ease) 1.2s; }
.motion [data-seq].learn .learn__traits li { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--t); }

/* No AI tells: the patterns are tagged, then the paragraph is struck and rewritten.
   Without motion the two versions sit side by side. */
.tells { position: relative; display: grid; gap: 28px; max-width: 900px; margin: 0 auto; padding: 40px 4px 24px; }
@media (min-width: 768px) { .tells { padding: 56px 24px 32px; } }
html:not(.motion) .tells { max-width: none; }
@media (min-width: 900px) { html:not(.motion) .tells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.tells__count { justify-self: end; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
@media (min-width: 900px) { html:not(.motion) .tells__count { grid-column: 1 / -1; } }
.tells__n { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: 0; color: var(--rec); vertical-align: -2px; margin-right: 4px; } /* this section's one red number */
.tells__ai, .tells__new { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.45; letter-spacing: -0.015em; }
@media (min-width: 768px) { .tells__ai, .tells__new { font-size: 30px; } }
.tells__ai { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--paper); text-decoration-thickness: 2px; }
.tell { text-decoration: underline; text-decoration-color: var(--ink-muted); text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tell__tag {
  display: inline-block; margin: 0 6px 0 6px; padding: 3px 6px; vertical-align: 0.4em;
  font-family: var(--font-sans); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hud); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.tells__new { color: var(--ink); }
/* Sequence: tags appear one by one, then the strike, then the rewrite */
.motion [data-seq].tells:not(.is-in) .tells__ai { color: var(--ink); text-decoration-color: transparent; }
.motion [data-seq].tells .tells__ai { transition: color 0.6s var(--ease) 2.1s, text-decoration-color 0.6s var(--ease) 2.1s; }
.motion [data-seq].tells:not(.is-in) .tell { text-decoration-color: transparent; }
.motion [data-seq].tells:not(.is-in) .tell__tag, .motion [data-seq].tells:not(.is-in) .tells__count { opacity: 0; }
.motion [data-seq].tells .tell { transition: text-decoration-color 0.4s var(--ease); transition-delay: var(--t); }
.motion [data-seq].tells .tell__tag { transition: opacity 0.4s var(--ease); transition-delay: var(--t); }
.motion [data-seq].tells .tells__count { transition: opacity 0.4s var(--ease) 1.8s; }
.motion [data-seq].tells:not(.is-in) .tells__after { opacity: 0; transform: translateY(12px); }
.motion [data-seq].tells .tells__after { transition: opacity 0.8s var(--ease) 2.7s, transform 0.8s var(--ease) 2.7s; }

/* Built to sell: a script outline, blocks appear one after another */
.outline { list-style: none; margin: 0 auto; padding: 32px 4px; max-width: 560px; display: grid; gap: 10px; }
@media (min-width: 768px) { .outline { padding: 48px 24px; } }
.outline li { display: grid; gap: 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.outline__name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.outline li i { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); }
.outline li i:last-child { width: 70%; }
.outline__sale { border-color: var(--frame-pop) !important; background: var(--raised) !important; }
.outline__sale .outline__name { color: var(--paper); }
.motion [data-seq].outline:not(.is-in) li { opacity: 0; transform: translateY(10px); }
.motion [data-seq].outline li { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--t); }

/* Three cards in a row (Ready to film), and two linked cards (Where the script starts) */
@media (min-width: 768px) and (max-width: 899px) { .pair--3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .next--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .next--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A line under a section's visual (a caveat, a source link) */
.sec__note { margin-top: var(--stack-md); max-width: 680px; }
.sec__note + .sec__note { margin-top: var(--space-4); }

/* What a roast shows: laid out like the real Roast result; blocks reveal top to bottom (data-seq) */
.roast { max-width: 900px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.roast__label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
.roast__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.roast__idea { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.roast__verdict { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--paper); border: 1px solid var(--frame-pop); border-radius: var(--radius-pill); }
.roast__verdict--quiet { border-color: var(--line-strong); }
.roast__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px; }
@media (min-width: 768px) { .roast__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.roast__why ul, .roast__reframes ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.roast__why li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.roast__why li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-muted); }
.roast__side { display: grid; gap: 24px; align-content: start; }
.roast__reframes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.4; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); }
.roast__use { flex: none; font-size: 13px; font-weight: 600; color: var(--paper); }
.roast__video { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.roast__thumb { flex: none; width: 72px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--line-strong), var(--raised)); }
.roast__vtitle { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.roast__vmeta { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.roast__foot { padding: 16px 24px 20px; border-top: 1px solid var(--line); }
.roast__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--on-paper); background: var(--paper); border-radius: var(--radius-md); }
.motion [data-seq].roast:not(.is-in) [style*="--t"] { opacity: 0; transform: translateY(10px); }
.motion [data-seq].roast [style*="--t"] { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--t); }

/* Thumbnails too: a deliberately generic thumbnail beside its title, and a short roast */
.thumbtest { max-width: 760px; margin: 0 auto; padding: 32px 4px; display: grid; gap: 24px; }
.thumbtest__tag { text-align: center; } /* marks the made-up example */
@media (min-width: 768px) { .thumbtest { padding: 56px 24px; } }
.thumbtest__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; }
@media (min-width: 600px) { .thumbtest__pair { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 24px; } }
.thumbtest__thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); container-type: inline-size; }
.thumbtest__thumb span { font-family: var(--font-display); font-weight: 800; font-size: 22cqi; line-height: 1; letter-spacing: -0.03em; color: var(--paper); }
.thumbtest__title { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--ink); }
.thumbtest__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.thumbtest__reason { flex: 1 1 280px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
/* Real roasts on /product/youtube-title-checker: the hero card, the videos behind it, and Henry's own video */
.hero__roast { max-width: 900px; margin-inline: auto; }
.hero__note { margin-top: 12px; text-align: center; font-size: 14px; color: var(--ink-muted); }
.roast__body--one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .roast__body--one { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.roast__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.roast__list .roast__video { margin-top: 0; }
a.roast__video { text-decoration: none; transition: border-color 0.2s ease; }
a.roast__video:hover { border-color: var(--line-strong); }
a.roast__video:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.roast__video--lead { flex-direction: column; }
.roast__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.roast__img--sm { flex: none; width: 120px; }
.thumbtest__img { display: block; width: 100%; max-width: 416px; height: auto; margin-inline: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.thumbtest__verdict { margin-top: 14px; }
.thumbtest__summary.roast__body { padding: 20px 0 0; }
.roast__video--ref { margin-top: 12px; }
/* /product/youtube-mcp: a real MCP answer in the hero, and a real video breakdown */
.hero__chat { max-width: 820px; margin-inline: auto; text-align: left; }
.chat--real { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.mcpans { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.mcpans__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mcpans__x { grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--paper); }
.mcpans__title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; }
.mcpans__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.mcpans__ch { font-size: 13px; color: var(--ink-muted); }
.bdown { max-width: 1000px; }
.bdown__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .bdown__head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.bdown__line { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.bdown__sections { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.bdown__sections li { font-size: 15px; line-height: 1.4; color: var(--ink); }
.bdown__at { display: inline-block; min-width: 48px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.hero__script { max-width: 820px; margin-inline: auto; text-align: left; }
/* /product/youtube-script-writer: the opening of a real script, and the real never-say list */
.script-card__body { padding: 24px; display: grid; gap: 14px; }
.script-card__body p { font-size: 16px; line-height: 1.6; color: var(--ink); }
.script-card__body .script-card__cue { font-size: 13px; letter-spacing: 0.04em; color: var(--ink-muted); }
.never { max-width: 760px; margin: 0 auto; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sec__head + .never { margin-top: var(--stack-lg); } /* straight under a head: the usual headline-to-visual gap */
.never__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.never__list li { padding: 8px 14px; font-size: 15px; color: var(--ink-muted); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); text-decoration: line-through; text-decoration-color: var(--ink-muted); }
/* /product/competitor-analysis: a real comment scan */
.comments-real__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; text-align: left; }
.comments-real__topic { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.comments-real__q { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.roast__list .roast__video .chip { margin-left: auto; flex: none; }
.roast__body--single, .roast__body.roast__body--single { grid-template-columns: minmax(0, 1fr); }
/* /product/youtube-video-ideas: real ranked ideas */
.ranked { max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; }
.ranked__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ranked__row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ranked__n { grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink-muted); }
.ranked__t { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ranked__e { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
/* /product/agencies: each real voice's phrases */
.voices__says { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.roast__label--gap { margin-top: 24px; }
@media (min-width: 768px) { .thumbtest__summary.roast__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }

/* Cheaper than a flop: a roast's minute against a video's 20 hours; segments grow left to right */
.timeline { padding: 56px 4px 32px; }
@media (min-width: 768px) { .timeline { padding: 72px 24px 40px; } }
.timeline__track { position: relative; display: flex; align-items: center; gap: 6px; height: 14px; margin-right: 96px; }
.timeline__seg { display: block; height: 100%; border-radius: 3px; transform-origin: left center; }
.timeline__seg--roast { flex: 0 0 18px; background: var(--paper); }
.timeline__seg--video { flex: 1 1 auto; background: var(--line-strong); }
.timeline__end { position: absolute; left: 100%; top: 50%; translate: 12px -50%; white-space: nowrap; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
.timeline__views { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--rec); vertical-align: -4px; margin-right: 4px; } /* this section's one red number */
.timeline__labels { display: flex; gap: 16px; margin-top: 16px; margin-right: 96px; }
.timeline__lab { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
.timeline__lab--roast { color: var(--paper); flex: none; }
.timeline__lab--video { margin-left: auto; text-align: right; }
@media (max-width: 599px) {
  .timeline__track, .timeline__labels { margin-right: 0; }
  .timeline__end { position: static; translate: none; margin-left: 10px; }
  .timeline__track { height: 12px; }
  .timeline__labels { flex-direction: column; gap: 6px; }
  .timeline__lab--video { margin-left: 0; text-align: left; }
}
.motion [data-seq].timeline:not(.is-in) .timeline__seg { transform: scaleX(0); }
.motion [data-seq].timeline .timeline__seg--roast { transition: transform 0.5s var(--ease) 0.1s; }
.motion [data-seq].timeline .timeline__seg--video { transition: transform 1.6s var(--ease) 0.6s; }
.motion [data-seq].timeline:not(.is-in) .timeline__end, .motion [data-seq].timeline:not(.is-in) .timeline__lab { opacity: 0; }
.motion [data-seq].timeline .timeline__lab--roast { transition: opacity 0.5s var(--ease) 0.4s; }
.motion [data-seq].timeline .timeline__lab--video { transition: opacity 0.5s var(--ease) 1.6s; }
.motion [data-seq].timeline .timeline__end { transition: opacity 0.5s var(--ease) 2.2s; }

/* Pricing page */
.hero--compact { padding-bottom: 0; }
.notfound { min-height: 70svh; padding-bottom: var(--section-y); }
.pricing--page { padding-top: var(--stack-lg); }
.sec__more--center { display: block; width: fit-content; margin: 24px auto 0 !important; }
.pair__link { margin-top: 16px; }

/* What $1 gets you: the key number, then four allowances (2x2 on mobile) */
.trial { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-md); align-items: center; padding: var(--stack-md) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .trial { grid-template-columns: auto minmax(0, 1fr); gap: var(--stack-lg); } }
.split .trial { grid-template-columns: minmax(0, 1fr); } /* in a split, the $1 sits above the four numbers */
.trial__key { display: flex; align-items: baseline; gap: 12px; }
.trial__price { font-family: var(--font-display); font-weight: 800; font-size: 96px; line-height: 0.9; letter-spacing: -0.05em; color: var(--rec); } /* this section's one red number */
.trial__for { font-size: 15px; color: var(--ink-muted); }
.trial__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
@media (min-width: 600px) { .trial__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trial__list li { display: grid; gap: 6px; }
.trial__n { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.trial__label { font-size: 15px; line-height: 1.35; color: var(--ink-muted); }

/* Compare plans: a real table; on small screens it scrolls sideways inside its own box */
.cmp { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } /* positioned so the hidden labels inside scroll with the table instead of widening the page */
.cmp:focus-visible { outline-offset: 4px; }
.cmp__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; }
.cmp__table th, .cmp__table td { padding: 18px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp__table thead th { padding-top: 0; vertical-align: top; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); border-bottom-color: var(--line-strong); }
.cmp__table thead th:first-child { width: 34%; }
.cmp__plan { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.cmp__pop { display: flex; align-items: center; gap: 7px; min-height: 20px; margin-top: 8px; color: var(--paper); } /* its own row under the plan name, so Creator and Pro share a baseline */
.cmp__table tbody th { font-weight: 500; color: var(--ink-muted); }
.cmp__table td { color: var(--ink); }
.cmp__yes { color: var(--paper); font-weight: 700; }
.cmp__no { color: var(--ink-muted); }

/* ---------- About page ---------- */
/* Henry's portrait in a viewfinder; a neutral block until a photo exists */
.portrait { margin: var(--stack-lg) 0 0; width: 100%; max-width: 440px; }
.portrait__media { aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; }
.portrait__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait__media--empty { display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
.portrait__tag { font-size: 12px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
/* The story: the one longer read on the site, and its one handwriting moment besides the receipts */
.story { display: grid; gap: 20px; max-width: 640px; }
.story p { font-size: 19px; line-height: 1.6; color: var(--ink); }
.story .story__sign { margin-top: 4px; font-family: var(--font-hand); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--paper); }
/* Get in touch: label beside the link, one row each */
.reach { list-style: none; margin: 0; padding: 0; max-width: 640px; border-top: 1px solid var(--line); }
.reach li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.reach__label { flex: none; width: 96px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); }
.reach__link { overflow-wrap: anywhere; }

/* ---------- Agencies page ---------- */
/* Hero: a channel switcher. Client list on the left, the selected channel's top ideas on the right. */
.switcher { display: block; border-radius: var(--radius-md); }
.switcher:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.switcher__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; text-align: left; }
@media (min-width: 768px) { .switcher__inner { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; } }
.switcher__tag { display: inline-flex; font-size: 11px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.switcher__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
@media (min-width: 768px) { .switcher__list { grid-template-columns: minmax(0, 1fr); } }
.switcher__chan { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border-radius: var(--radius-md); font-size: 15px; font-weight: 500; color: var(--ink-muted); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.switcher__chan.is-active { background: var(--raised); color: var(--paper); }
.switcher__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher__avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line-strong); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted); }
.switcher__chan.is-active .switcher__avatar { color: var(--paper); }
@media (max-width: 767px) { .switcher__chan .switcher__avatar { display: none; } .switcher__chan { font-size: 14px; } }
.switcher__main { display: grid; }
.switcher__set { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; }
.switcher__set.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease) 0.15s, visibility 0s; }
.switcher__head { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); padding: 6px 0; }
.switcher__ideas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.switcher__idea { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .switcher__idea { grid-template-columns: 168px minmax(0, 1fr); gap: 20px; padding: 14px 0; } }
.switcher__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--raised); }
.switcher__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.switcher__x { position: absolute; left: 6px; bottom: 6px; font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1; color: var(--on-btn); background: var(--btn); border-radius: var(--radius-pill); padding: 4px 7px; } /* multiplier chip */
.switcher__text { display: grid; gap: 4px; min-width: 0; }
.switcher__ch { font-size: 13px; line-height: 1.3; color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the video's channel */
.switcher__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .switcher__title { font-size: 19px; } }
/* 00:01: a short, centred, typographic breather */
.breather__inner { display: flex; flex-direction: column; align-items: center; gap: var(--stack-md); max-width: 820px; margin-inline: auto; text-align: center; }
.breather .body { margin-inline: auto; }
/* 00:02: two clients, two voices */
.voices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.voices__tag { margin-bottom: var(--stack-sm); text-align: center; } /* the quotes are made up */
@media (min-width: 768px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voices__item { margin: 0; display: grid; align-content: start; gap: 20px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.voices__who { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
.voices__line { margin: 0; }
.voices__line p { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
/* 00:03: the price per channel is this section's one red number */
.h2__rec { color: var(--rec); }
.maths__note { max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.chat__x { font-family: var(--font-display); font-weight: 800; color: var(--rec); margin-right: 6px; } /* multiplier */
/* 00:05: the shared cards, Agency only */
.prices--solo .plan:first-child, .prices--solo .price-card__more { display: none; }
@media (min-width: 900px) { .prices--solo .prices { grid-template-columns: minmax(0, 480px); justify-content: center; } }
.price-card__more { display: flex; width: fit-content; margin: 0 auto 20px; } /* the agencies link sits with the notes under both cards, not inside Pro */

/* ---------- Closer ---------- */
.closer__vf { max-width: 1040px; margin: 0 auto; }
/* Pages other than the homepage: the closer without a viewfinder (two framed visuals per page at most) */
.closer__box { max-width: 1040px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.closer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 8px; }
@media (min-width: 768px) { .closer__inner { padding: 112px 48px; } }
.closer__title { max-width: 860px; }
.closer__form { margin-top: 40px; width: 100%; max-width: 580px; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.closer__input {
  flex: 999 1 260px; min-width: 0; min-height: 56px; padding: 0 18px;
  font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.closer__input::placeholder { color: var(--ink-muted); opacity: 1; }
.closer__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--paper); }
/* The /consulting form ("Hire us"): the closer's input style, labelled fields, two columns from 768px (9 Nov 2026) */
.contact-form { display: grid; gap: var(--space-6); }
.contact-form[hidden] { display: none; }
.contact-form__row { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-form__field { display: grid; gap: var(--space-2); }
.contact-form__label { font-size: 14px; font-weight: 500; color: var(--ink); }
.contact-form__opt { color: var(--ink-muted); font-weight: 400; }
.contact-form__input { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.contact-form__input::placeholder { color: var(--ink-muted); opacity: 1; }
.contact-form__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--paper); }
.contact-form__text { min-height: 96px; resize: vertical; line-height: 1.5; }
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.contact-form__status { font-size: 15px; color: var(--ink-muted); }
.contact-form__status.is-error { color: var(--ink); }
.contact-done { display: grid; gap: var(--stack-md); padding: var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.contact-done[hidden] { display: none; }
.contact-done__title { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.contact-done__title:focus { outline: none; }
.closer__btn { flex: 1 0 auto; }
.closer__fine { margin-top: 20px; font-size: 15px; color: var(--ink-muted); }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; padding-top: var(--section-y-tight); background: var(--bg); border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 600px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; } }
/* Desktop: the link columns size to their links, sit at the right with equal gaps, and the last one ends on the
   container's right edge, in line with "Built by Henry Purchase" below (9 Nov 2026) */
@media (min-width: 1024px) { .footer__top { grid-template-columns: minmax(0, 1fr) repeat(3, auto); column-gap: clamp(64px, 7vw, 120px); } }
.footer__tagline { margin-top: var(--space-4); max-width: 260px; font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.footer__social { display: flex; gap: var(--space-2); margin: 20px 0 0 -8px; padding: 0; list-style: none; }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink-muted); border-radius: var(--radius-md); transition: color 0.2s ease; }
.footer__social a:hover { color: var(--paper); }
.footer__social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer__heading { display: flex; align-items: center; min-height: 40px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); }
/* The column headings share the logo's 40px row, so the brand column and the link columns start on one line, and the
   tagline and the first links start on the next (both var(--space-4) below that row) (9 Nov 2026) */
.footer__col ul { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.footer__col a { font-size: 15px; line-height: 1.4; color: var(--ink); opacity: 0.85; transition: opacity 0.2s ease; }
.footer__col a:hover { opacity: 1; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: 56px; padding: var(--space-6) 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }
/* The wordmark: a subtle shape, with the REC dot as its full stop */
.footer__wordmark {
  margin: 0 0 calc(48px - 0.158em); text-align: center; white-space: nowrap; user-select: none;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-size: min(calc((100vw - 48px) / 3.5), 330px); color: var(--wordmark);
}
.footer__dot { display: inline-block; width: 0.13em; height: 0.13em; margin-left: 0.04em; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 0.025em var(--ink); vertical-align: baseline; } /* drawn like the logo: a red dot in a white ring */

/* ---------- Sticky bottom bar ---------- */
.sticky-cta {
  position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  translate: 0 calc(100% + 40px); visibility: hidden;
  transition: translate 0.5s var(--ease), visibility 0s linear 0.5s;
}
.sticky-cta[hidden] { display: none; }
.has-sticky main { padding-bottom: 88px; } /* room for the bar at the end of a page (site.js adds the class while the bar is live) */
.sticky-cta.is-shown { translate: 0 0; visibility: visible; transition: translate 0.5s var(--ease), visibility 0s; }
.sticky-cta__text { display: none; }
.sticky-cta__btn { flex: 1; min-height: 44px; font-size: 15px; }
.sticky-cta__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--ink-muted); }
.sticky-cta__close:hover { color: var(--paper); background: var(--raised); }
.sticky-cta__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (min-width: 640px) {
  .sticky-cta { left: 0; right: 0; width: calc(100% - 48px); max-width: 640px; margin-inline: auto; padding: 12px 12px 12px 20px; gap: var(--space-4); }
  .sticky-cta__text { display: block; flex: 1; min-width: 0; }
  .sticky-cta__btn { flex: none; min-height: 40px; font-size: 14px; }
}
.sticky-cta__title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--paper); }
.sticky-cta__sub { margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--ink-muted); }

/* ---------- Reduced motion: the final state, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .rec, .mq__track { animation: none !important; }
  .site-nav.is-scrolling .nav-progress__dot { scale: none; }
  .chapter-now__t, .chapter-tip, .chapter::before, .chapter__fill { transition: none !important; }
}

/* Timecodes tick without the digits shifting: equal-width digits in a fixed-width box */
[data-timecode], [data-clip-time] { display: inline-block; width: calc(11ch + 11 * 0.16em); white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; text-align: left; }
.hud--tr[data-timecode], .hud--tr[data-clip-time] { text-align: right; }

/* Mockup buttons that are real sign-up links */
a.xpanel__btn, a.roast__btn, a.roast__use { text-decoration: none; }
a.roast__use:hover { color: var(--paper); }
a.xpanel__btn:focus-visible, a.roast__btn:focus-visible, a.roast__use:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* Four text styles per section (CLAUDE.md): card text uses the body style, so each section has the label,
   the headline, the body and one supporting style (a card title, or the setup address) */
.next__step { display: none; }
.next__text, .clue__text, .ask__cap, .ask__prompt, .ask__note, #ask .sec__after, .setup .steps li, .setup__line { font-size: 17px; font-weight: 400; line-height: 1.55; }
@media (min-width: 768px) { .next__text, .clue__text, .ask__cap, .ask__prompt, .ask__note, #ask .sec__after, .setup .steps li, .setup__line { font-size: 19px; } }
.ask__cap { color: var(--ink); }
.ask__prompt, .ask__note, #ask .sec__after, .setup__line { color: var(--ink-muted); }
.copybox--step .copybox__text { font-size: 16px; }

/* ---------- /product/competitor-analysis ---------- */
.comp-hero { margin-top: var(--stack-lg); }
/* 00:01: three channels against their own normal (Example) */
.cbars-wrap { position: relative; max-width: 900px; margin: 0 auto; }
.cbars__tag { margin: 0 0 var(--stack-sm); text-align: right; } /* in the flow, so it never covers a bar label */
.cbars { display: block; width: 100%; height: auto; overflow: visible; }
.cbars__normal { fill: var(--line-strong); }
.cbars__out { fill: var(--paper); }
.cbars__out--hot { fill: var(--rec); } /* the section's one red element */
.cbars__base { stroke: var(--line-strong); stroke-width: 1; }
.cbars text { font-family: var(--font-sans); fill: var(--ink-muted); font-size: 13px; }
.cbars .cbars__x { font-family: var(--font-display); font-weight: 800; font-size: 18px; fill: var(--ink); }
.cbars .cbars__name { fill: var(--ink); font-size: 14px; font-weight: 600; }
.motion .cbars:not(.is-in) g { opacity: 0; }
.motion .cbars g { transition: opacity 0.6s var(--ease); transition-delay: var(--d, 0s); }
.cbars__key { display: flex; justify-content: center; gap: 24px; margin-top: var(--stack-sm); font-size: 15px; color: var(--ink-muted); }
.cbars__key span { display: inline-flex; align-items: center; gap: 8px; }
.cbars__key i { width: 12px; height: 12px; border-radius: 3px; }
.cbars__key-normal { background: var(--line-strong); }
.cbars__key-out { background: var(--paper); }
/* 00:02: the three things a breakdown shows, and the extension's panel on its own */
.vpoints { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--stack-sm); font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
@media (min-width: 768px) { .vpoints { font-size: 19px; } }
.vpoints__t { font-weight: 600; color: var(--ink); }
.xpanel--solo { max-width: 420px; margin-inline: auto; background: #151515; border: 1px solid #262626; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -30px #000000e6; }
/* 00:03: comment bubbles on their own */
.comments-solo { max-width: 480px; margin-inline: auto; }

/* ---------- Privacy and Terms: plain reading pages ---------- */
.legal__inner { max-width: 760px; }
.legal-hero .hero__inner { align-items: flex-start; text-align: left; }
.legal__title { font-size: clamp(44px, 6vw, 72px); }
.legal__lede { margin-top: var(--stack-md); }
.legal__date { margin-top: var(--stack-sm); font-size: 15px; color: var(--ink-muted); }
.legal.sec { padding-top: var(--stack-lg); }
.legal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--stack-lg); }
.legal__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-sm); scroll-margin-top: var(--anchor-y); }
@media (min-width: 768px) { .legal__item { grid-template-columns: 48px minmax(0, 1fr); } }
.legal__n { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-muted); font-variant-numeric: tabular-nums; padding-top: 4px; }
.legal__h { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.legal__body p, .legal__body dd { margin: var(--stack-sm) 0 0; font-size: 17px; line-height: 1.65; color: var(--ink-muted); overflow-wrap: anywhere; }
.legal__body dl { margin: var(--stack-sm) 0 0; display: grid; gap: var(--stack-sm); }
.legal__body dl > div { padding-top: var(--stack-sm); border-top: 1px solid var(--line); }
.legal__body dt { font-size: 17px; font-weight: 600; color: var(--ink); }
.legal__body dd { margin-top: 4px; }

/* ---------- Articles (/blog, /vs): content/*.md through src/content.mjs ---------- */
.article__head { padding-top: calc(96px + env(safe-area-inset-top)); padding-bottom: var(--stack-lg); }
@media (min-width: 960px) { .article__head { padding-top: calc(120px + env(safe-area-inset-top)); } }
.article__wrap { max-width: 860px; }
.article__title { margin-top: var(--stack-sm); font-size: clamp(40px, 6vw, 68px); }
.article__title.h1--long { font-size: clamp(32px, 5.4vw, 64px); } /* h1_long: true in front matter, when the keyword fills a phone line */
.article__title .ln__in { text-wrap: balance; } /* even lines, so a phone never ends on one word */
.article__intro { margin-top: var(--stack-md); max-width: 680px; }
.article__intro p { font-size: 19px; line-height: 1.6; color: var(--ink-muted); }
.article__byline { margin-top: var(--stack-md); font-size: 15px; color: var(--ink-muted); }
.article__author { color: var(--ink); font-weight: 600; text-decoration: none; }
.article__author:hover { color: var(--paper); }
.article__main { padding-top: 0; }
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-lg); }
@media (min-width: 1100px) { .article__grid { grid-template-columns: 220px minmax(0, 680px); justify-content: center; gap: 72px; } }
/* Table of contents: sticky beside the prose on desktop, hidden on smaller screens */
.toc { display: none; }
@media (min-width: 1100px) { .toc { display: block; position: sticky; top: 112px; align-self: start; } }
.toc__label { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.toc ol { list-style: none; margin: var(--stack-sm) 0 0; padding: 0; display: grid; gap: 10px; border-left: 1px solid var(--line); }
.toc a { display: block; padding-left: 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: 15px; line-height: 1.4; color: var(--ink-muted); text-decoration: none; }
.toc a:hover, .toc a.is-on { color: var(--ink); border-left-color: var(--paper); }
/* Prose: the article's text styles (H2, H3, body, caption) */
.prose { max-width: 680px; min-width: 0; }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 56px; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); scroll-margin-top: 104px; }
.prose h3 { margin-top: 36px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--ink); scroll-margin-top: 104px; }
.prose p, .prose li { font-size: 18px; line-height: 1.7; color: var(--ink-muted); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a:not([class]) { color: var(--ink); font-weight: 500; text-decoration: none; background: linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat; }
.prose a:not([class]):hover { background-image: linear-gradient(var(--paper), var(--paper)); }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose li::marker { color: var(--ink-muted); }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--line-strong); }
.prose blockquote p { color: var(--ink); }
.prose__fig { margin: 32px 0 0; }
.prose__fig img { display: block; width: 100%; height: auto; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-md); }
/* An image smaller than the column shows at its natural size (max-width set inline), centred, never upscaled */
.prose__fig--natural img { margin-inline: auto; }
.prose__note { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.prose__table { overflow-x: auto; -webkit-overflow-scrolling: touch; --fade-l: 0px; --fade-r: 0px; }
/* A table wider than its box scrolls sideways; the side with more to see fades out so the cut-off column reads as
   scrollable, never chopped (site.js sets the classes from the scroll position) */
.prose__table.has-more-left { --fade-l: 56px; }
.prose__table.has-more-right { --fade-r: 56px; }
.prose__table.has-more-left, .prose__table.has-more-right {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); }
.prose__table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; }
/* Tables with four or more columns: wider than the text on desktop (up to 960px, growing to the right so the
   contents list stays clear), sideways scrolling on phones */
.prose__table--wide table { min-width: 720px; }
@media (min-width: 768px) { .prose__table--wide { width: min(960px, calc(100vw - 48px)); } }
@media (min-width: 1100px) { .prose__table--wide { width: min(960px, calc(50vw + 170px)); } }
.prose__table th, .prose__table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-muted); }
.prose__table thead th { color: var(--ink); font-weight: 600; border-bottom-color: var(--line-strong); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
/* The inline call to action after the second section */
.cta-card { margin-top: 40px !important; padding: 28px; background: #151515; border: 1px solid #FFFFFF33; border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cta-card__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--ink); max-width: 22ch; }
.prose .cta-card__title { color: var(--ink); }
/* The same card as a mid-page call to action on landing pages */
.sec--tight { padding-block: var(--section-y-tight); }
.cta-card--page { max-width: none; margin: 0 !important; } /* 7 Nov: the same width as the content above it, so its edges line up with the cards (was 972px, centred) */
.cmp__more { margin-top: 20px; }
.cta-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Key takeaways: after the intro and byline, before the featured image */
.takeaways { margin-top: var(--stack-lg); max-width: 680px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.takeaways__label { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.takeaways__list { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.takeaways__list li { font-size: 17px; line-height: 1.55; color: var(--ink); }
.takeaways__list li::marker { color: var(--ink-muted); }
.takeaways__list a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat; }
/* The featured image (scripts/article-media.mjs), full width of the header */
.article__featured { margin: var(--stack-lg) 0 0; }
.article__featured img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
/* The end-of-article call to action, before "Keep going" */
.article__end { padding-top: var(--stack-lg); }
.end-cta { max-width: 972px; margin: 0 auto; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #151515; border: 1px solid #FFFFFF33; border-radius: var(--radius-lg); }
@media (min-width: 768px) { .end-cta { padding: 72px 48px; } }
.end-cta__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.end-cta__text { margin: 14px 0 28px; max-width: 520px; font-size: 18px; line-height: 1.55; color: var(--ink-muted); }
/* Lite YouTube embed: the thumbnail and a play button; the iframe loads on click (site.js) */
.lyt { position: relative; margin-top: var(--stack-lg); max-width: 860px; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.lyt img, .lyt iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.lyt__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 72px; height: 72px; border-radius: 50%; background: var(--btn); display: grid; place-items: center; transition: scale 0.2s var(--ease); }
.lyt__play svg { width: 28px; height: 28px; fill: #FFF; margin-left: 3px; }
.lyt__play:hover { scale: 1.06; }
.lyt__play:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
/* Alternatives: the ranked tool cards */
.alt-table th[scope="row"] { color: var(--ink); font-weight: 600; white-space: nowrap; }
.tool-cards { display: grid; gap: 16px; }
.tool-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.tool-card__rank { font-size: 15px; color: var(--ink-muted); }
.prose .tool-card__name { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.tool-card__facts { margin: 14px 0 0; display: grid; gap: 10px; }
.tool-card__facts dt { font-size: 15px; font-weight: 600; color: var(--ink); }
.tool-card__facts dd { margin: 2px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.tool-card__links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
/* /vs: the verdict, the two choose blocks and the table */
.vs-verdict { font-size: 19px !important; color: var(--ink) !important; }
.vs-choose { display: grid; gap: 16px; }
@media (min-width: 700px) { .vs-choose { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs-choose__card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.vs-choose__card--us { background: #151515; border-color: #FFFFFF33; }
.prose .vs-choose__card h2 { margin-top: 0; font-size: 22px; }
.vs-choose__card ul { margin-top: 12px; }
.vs__table--prose { min-width: 440px; }
.cmp__sub { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-muted); }
/* ---------- Hubs ---------- */
.hub { padding-top: var(--stack-lg); }
.hub__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--stack-md); }
.hub__pill { padding: 8px 16px; font-size: 15px; font-weight: 500; color: var(--ink-muted); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.hub__pill.is-on { color: var(--on-paper); background: var(--paper); border-color: var(--paper); }
.hub__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub__item[hidden] { display: none; }
.hub__card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: border-color 0.2s ease; }
.hub__card:hover { border-color: var(--line-strong); }
.hub__card:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.hub__thumb { width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 6px; }
.hub__tag { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.hub__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--ink); }
.hub__text { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.hub__empty { margin-inline: auto; text-align: center; }

/* ---------- Free tools (/tools/<slug>): the tool sits in the hero ---------- */
.tool { width: 100%; max-width: 860px; margin-top: var(--stack-lg); text-align: left; }
.tool__form { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.tool__input { flex: 1 1 280px; min-width: 0; min-height: 52px; padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-md); }
.tool__input::placeholder { color: var(--ink-muted); }
.tool__input:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.tool__btn { flex: none; }
@media (max-width: 599px) { .tool__btn { flex: 1 1 100%; justify-content: center; } }
.tool__msg { min-height: 1.5em; margin-top: var(--stack-sm); font-size: 15px; color: var(--ink-muted); }
.tool__out { position: relative; margin-top: var(--stack-sm); }
.tool__out.is-gated > :not(.tool__gate) { filter: blur(10px); pointer-events: none; user-select: none; }
.tool__gate { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; }
.tool__gate-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thumbs__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.thumbs__img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: #000; }
.thumbs__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.thumbs__size { font-size: 15px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.thumbs__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--on-paper); background: var(--paper); border-radius: var(--radius-pill); }
.thumbs__btn:hover { background: #E8E8E8; }
.thumbs__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.thumbs__btn:disabled { opacity: 0.6; }
.thumbs__note { grid-column: 1 / -1; font-size: 15px; color: var(--ink-muted); }

/* Free tools, batch 1 (10 Nov): the panel a result sits in, its head (thumbnail, title, meta), the actions row, the
   transcript's text, the tag pills, the figures grid and the calculator's fields. Four text styles: the panel title,
   the body, the figure (display font) and the small label. */
.tool__panel { display: grid; gap: 16px; padding: var(--card-pad, 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.tool__head { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; }
.tool__head img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: #000; }
.tool__head--plain { grid-template-columns: minmax(0, 1fr); }
.tool__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.tool__meta { margin-top: 4px; font-size: 15px; color: var(--ink-muted); overflow-wrap: anywhere; }
.tool__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tool__action { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--on-paper); background: var(--paper); border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.tool__action:hover { background: #E8E8E8; }
.tool__action:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.tool__action--ghost { color: var(--ink); background: transparent; border: 1px solid var(--line-strong); }
.tool__action--ghost:hover { background: var(--raised); }
.tool__text { max-height: 420px; overflow: auto; padding: 16px; font-size: 16px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.tool__text:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.tool__body { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.tool__body strong { color: var(--ink); font-weight: 600; }
.tag-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pills li { padding: 6px 12px; font-size: 15px; color: var(--ink); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow-wrap: anywhere; }
.figures { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.figures > div { padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.figures dt { font-size: 15px; color: var(--ink-muted); }
.figures dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc { display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
@media (min-width: 700px) { .calc { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)) minmax(0, .9fr); align-items: end; } .calc .tool__btn { grid-column: 1 / -1; justify-self: start; min-width: 200px; } }
.calc__field { display: grid; gap: 6px; min-width: 0; }
.calc__label { font-size: 15px; color: var(--ink-muted); }
.calc__input { min-width: 0; min-height: 48px; padding: 0 14px; font: inherit; font-size: 17px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.calc__input::placeholder { color: var(--ink-faint); }
.calc__input:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.calc .tool__btn { min-height: 48px; }
/* How to use it: three steps */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--card-gap); }
@media (min-width: 768px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps3 li { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.steps3__n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--ink-muted); }
.steps3__t { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.steps3__p { margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }


/* ---------- Extension landing (/extensions/<slug>) ---------- */
.ext-hero { margin-top: var(--stack-lg); }
.steps3--plain .steps3__t { margin-top: 0; }
.steps3 li { background: var(--surface); border: 1px solid var(--line); }

/* ---------- Card system (9 Nov 2026; CLAUDE.md "Cards") ----------
   One padding, radius, gap and hover for every card grid. Steps get the timeline; other grids don't. */
:root { --card-pad: 28px; --card-gap: 24px; }
.pair { gap: var(--card-gap); }
.pair__card, .tstep__card, .next__card, .steps3 li {
  display: flex; flex-direction: column; padding: var(--card-pad); border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, translate 0.25s var(--ease);
}
.pair__card:hover, .tstep__card:hover, .next__card:hover, .receipt__card:hover, .steps3 li:hover { border-color: var(--line-strong); translate: 0 -2px; }
@media (prefers-reduced-motion: reduce) { .pair__card:hover, .tstep__card:hover, .next__card:hover, .receipt__card:hover, .steps3 li:hover { translate: none; } }
.pair__icon, .steps3__icon { display: block; width: 28px; height: 28px; margin-bottom: 18px; color: var(--ink-muted); }
.pair__icon svg, .steps3__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pair__title { font-size: 24px; }

/* How it works: the timeline */
.tsteps { --dot: 12px; position: relative; list-style: none; margin: 8px 0 0; padding: 0 0 0 28px; display: grid; gap: var(--card-gap); }
.tsteps::before { content: ""; position: absolute; left: calc(var(--dot) / 2 - 0.5px); top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tsteps { grid-template-columns: minmax(0, 1fr); }
.tstep { position: relative; display: grid; min-width: 0; }
.tstep__card, .sv-channels li, .sv-row > div { min-width: 0; }
.tstep__dot { position: absolute; left: -28px; top: calc(var(--card-pad) + 2px); width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 1px var(--line-strong); }
.motion .tsteps .tstep__dot { transition: background-color 0.35s ease; transition-delay: calc(var(--i) * 0.35s + 0.2s); }
.motion .tsteps:not(.is-in) .tstep__dot { background: var(--bg); }
@media (min-width: 900px) {
  .tsteps { margin-top: 24px; padding: 28px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tsteps::before { left: 0; right: 0; top: calc(var(--dot) / 2 - 0.5px); bottom: auto; width: auto; height: 1px; }
  .tstep__dot { left: var(--card-pad); top: -28px; }
}
.tstep__card { height: 100%; background: var(--surface); border: 1px solid var(--line); }
.tstep__label { margin: 0; }
.tstep__title { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.tstep__text { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
.tstep__visual { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 150px; margin-top: auto; padding: 16px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 14px; color: var(--ink); }
.tstep__text { margin-bottom: 22px; }
@media (min-width: 1100px) { .tstep__visual { height: 184px; } }
.tstep__visual:has(> .sv-img) { min-height: 0; aspect-ratio: 16 / 9; }
@media (min-width: 1100px) { .tstep__visual:has(> .sv-img) { aspect-ratio: auto; } }
.tstep__visual:has(> .sv-img) { padding: 0; }

/* Step visuals: small, real, quiet */
.sv-label { font-size: 12px; color: var(--ink-muted); }
.sv-field { display: grid; gap: 4px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sv-field__label { font-size: 12px; color: var(--ink-muted); }
.sv-field__value { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; line-height: 1.35; color: var(--ink); }
.sv-bars { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 118px; padding: 0 2px; border-bottom: 1px solid var(--line-strong); }
.sv-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.sv-bars__bar { width: 100%; max-width: 44px; height: calc(var(--h) * 0.72); border-radius: 4px 4px 0 0; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sv-bars__col.is-hot .sv-bars__bar { background: var(--rec); box-shadow: none; }
.sv-bars__x { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); }
.sv-bars__name { position: absolute; bottom: -22px; width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 11px; color: var(--ink-muted); }
.sv-bars__col { position: relative; }
.sv-bars__name { position: absolute; left: -4px; right: -4px; width: auto; top: calc(100% + 6px); bottom: auto; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.sv-bars { margin-bottom: 30px; }
.sv-bars__normal { display: none; }
.sv-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: 12px 14px; }
.sv-row > .chip { grid-column: 1; grid-row: 2; justify-self: start; }
.sv-row img { width: 128px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.sv-row > div { grid-column: 2; grid-row: 1 / span 2; }
.sv-row__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; }
.sv-row__meta { margin-top: 2px; font-size: 12px; color: var(--ink-muted); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-chips li { padding: 6px 10px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.sv-lines { display: grid; gap: 8px; font-size: 15px; line-height: 1.5; }
.sv-lines mark { background: none; color: var(--ink-muted); }
.sv-verdict { align-self: flex-start; }
.sv-asks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-asks li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sv-asks__n { flex: none; color: var(--ink-muted); }
.sv-channels { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-channels li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.sv-channels li.is-active { border-color: var(--line-strong); }
.sv-channels__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-channels__meta { flex: none; font-size: 12px; color: var(--ink-muted); }
.sv-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pair__media { display: block; width: calc(100% + 2 * var(--card-pad) - 20px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; margin: calc(-1 * var(--card-pad) + 10px) calc(-1 * var(--card-pad) + 10px) 20px; border-radius: var(--radius-md); }

/* ---------- The hero's channel field (10 Nov, Henry; assets/js/hero-channel.js) ----------
   The field and the red button side by side from 768px, stacked on a phone. The list opens under the row, over the
   demo pill. No line of text under the field. */
.hchan { position: relative; z-index: 5; width: 100%; max-width: 640px; margin: var(--stack-md) auto 0; }
.hchan__row { position: relative; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .hchan__row { flex-direction: row; align-items: stretch; } }
.hchan__box { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 56px; background: var(--surface); border: 1px solid #FFFFFF33; border-radius: var(--radius-md); transition: border-color 0.2s ease; }
.hchan__box:focus-within { border-color: var(--paper); }
.hchan__icon { flex: none; width: 20px; height: 20px; margin-left: 16px; fill: none; stroke: var(--ink-muted); stroke-width: 1.8; stroke-linecap: round; }
.hchan.is-picked .hchan__icon { display: none; }
.hchan__input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 16px 0 10px; font: 400 17px/1 var(--font-sans); color: var(--ink); background: transparent; border: 0; outline: none; }
.hchan__input::placeholder { color: var(--ink-muted); opacity: 1; }
.hchan__input[hidden] { display: none; }
.hchan__go { flex: none; white-space: nowrap; }
.hchan__panel { position: absolute; z-index: 20; top: calc(56px + 8px); left: 0; right: 0; padding: 6px; text-align: left; background: var(--surface); border: 1px solid #FFFFFF33; border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); animation: hchan-in 0.16s ease-out; }
.hchan__panel[hidden] { display: none; }
@keyframes hchan-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .hchan__panel { animation: none; } .hchan__box { transition: none; } }
.hchan__list { max-height: 320px; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.hchan__list[hidden] { display: none; }
.hchan__opt { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; cursor: pointer; }
.hchan__opt[aria-selected="true"] { background: #FFFFFF14; }
.hchan__avatar { flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--raised); }
.hchan__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hchan__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.hchan__name { overflow: hidden; font: 600 15px/1.2 var(--font-sans); color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.hchan__meta { overflow: hidden; font: 400 13px/1.2 var(--font-sans); color: var(--ink-muted); text-overflow: ellipsis; white-space: nowrap; }
.hchan__note { margin: 0; padding: 10px; font: 400 15px/1.4 var(--font-sans); color: var(--ink-muted); }
.hchan__note[hidden] { display: none; }
.hchan__wait { display: flex; align-items: center; gap: 12px; padding: 10px; animation: hchan-wait 1.2s ease-in-out infinite alternate; }
.hchan__wait[hidden] { display: none; }
.hchan__bars { display: flex; flex-direction: column; gap: 7px; }
.hchan__bars span { display: block; width: 140px; max-width: 40vw; height: 10px; border-radius: var(--radius-sm); background: var(--raised); }
.hchan__bars span + span { width: 200px; max-width: 55vw; height: 8px; }
@keyframes hchan-wait { from { opacity: 1; } to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .hchan__wait { animation: none; } }
.hchan__picked { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 8px 0 12px; }
.hchan__picked[hidden] { display: none; }
.hchan__change { flex: none; margin-left: auto; padding: 8px 12px; font: 500 14px/1 var(--font-sans); color: var(--ink-muted); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.hchan__change:hover { color: var(--ink); }
.hchan__change:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.hero__demo { margin-top: 20px; }
/* Connect to Claude / ChatGPT under the hero's field (13 Nov, in place of Watch the demo): a muted label, two pills with the marks. */
.hero__connect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.hero__connect-label { font-size: 15px; color: var(--ink-muted); }
.hero__connect-btn img { flex: none; width: 16px; height: 16px; }
.hero__connect-note { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-muted); }