:root {
  --bg: #0a0a10;
  --panel: #12141d;
  --border: #232838;
  --text: #eef0f6;
  --muted: #8a90a5;
  --accent: #ff3b3b;
  --accent2: #ff8a3d;
  --grad: linear-gradient(100deg, #ff3b3b, #ff8a3d);
  /* Segmented control + input bar. The track sits BELOW the page surface and
     the thumb above it, which is what gives the control depth on either theme. */
  --ht-track: #0d0f16;
  --ht-thumb: #1b1f2c;
  --ht-thumb-sh: 0 1px 0 #ffffff10 inset, 0 2px 6px #0008;
  --ht-bar-sh: 0 1px 2px #0006, 0 10px 30px #0000004d;
  --ht-ring: #ff3b3b26;
  --ht-ph: #4a4f63;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* Custom scrollbars — subtle floating pills. Coloured from theme tokens
   (--border / --muted), so they follow light and dark without a separate
   override; the transparent border + padding-box clip gives the thumb its
   breathing room on any surface. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }

a { color: var(--accent2); text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 22px 18px 60px; position: relative; z-index: 1; }

/* Keyboard users need to see where they are on a dark stage. */
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Cinematic key light behind the fold. */
.glow {
  position: fixed; top: -340px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 760px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, #ff3b3b26, #ff8a3d0f 55%, transparent);
}

/* ── Header / logo ── */
header { padding: 6px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { font-size: 1.5rem; font-weight: 900; letter-spacing: -.5px; color: var(--text);
  display: inline-flex; align-items: center; }
.logomark { display: block; margin-right: 9px; }
.logo .run { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .ai { color: var(--muted); font-weight: 700; }
.topnav { display: flex; gap: 22px; }
.topnav a { color: var(--muted); font-size: .93rem; font-weight: 600; }
.topnav a:hover { color: var(--text); }
.topnav a.on { color: var(--text); }
.topnav .navcta { display: none; } /* mobile-panel only: desktop has the hero form in view */

/* ── Use cases dropdown ────────────────────────────────────────────────
   A disclosure, not a hover menu: hover-only submenus are unreachable on
   touch and invisible to a keyboard, and this one is the only route to the
   /for/ pages, which had no nav entry at all before it. Hover merely opens
   it early on devices that have a pointer; the button is what actually
   owns the state. */
/* The panel anchors to the NAV, not to the trigger. Centred on the trigger it
   fits at a wide desktop and hangs off the right edge as the viewport narrows,
   because the nav slides right as the page container shrinks. The nav's right
   edge is always inside the page, so aligning to it is safe at every width. */
.topnav { position: relative; }
.navdrop { position: static; display: flex; align-items: center; }
.navdrop-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none;
  font: inherit; font-size: .93rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.navdrop-btn:hover, .navdrop.open .navdrop-btn, .navdrop.here .navdrop-btn { color: var(--text); }
.navdrop-btn svg { width: 13px; height: 13px; transition: transform .18s ease; }
.navdrop.open .navdrop-btn svg { transform: rotate(180deg); }
.navdrop-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.navdrop-panel {
  position: absolute; top: 100%; right: 0; left: auto; margin-top: 12px; z-index: 70;
  width: min(620px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); padding: 16px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.3,1), visibility .2s;
}
.navdrop.open .navdrop-panel { opacity: 1; visibility: visible; transform: none; }
/* A gap between trigger and panel would close the menu as the pointer
   crosses it; this bridges it without being visible. */
.navdrop-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.navdrop-grid { display: grid; grid-template-columns: 1fr 190px; gap: 14px; }
.navdrop-h {
  font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); opacity: .8; padding: 2px 10px 8px;
}
.navdrop-col a {
  display: block; padding: 8px 10px; border-radius: 10px; color: var(--muted);
  font-size: .9rem; font-weight: 600; transition: background .12s, color .12s;
}
/* Icon and text side by side, so the blurb wraps under the label rather than
   under the icon. */
.navdrop-col a { display: flex; align-items: flex-start; gap: 10px; }
.navdrop-ic { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--accent); }
.navdrop-txt { min-width: 0; }
.navdrop-col a b { display: block; color: var(--text); font-weight: 700; font-size: .92rem; }
.navdrop-col a span span,
.navdrop-col a > span > span { display: block; margin-top: 2px; font-size: .78rem; font-weight: 500; line-height: 1.4; }
.navdrop-col a:hover { background: var(--bg); color: var(--text); }
.navdrop-col a[aria-current="page"] { background: var(--bg); }
.navdrop-col a[aria-current="page"] b { color: var(--accent); }
.navdrop-side { border-left: 1px solid var(--border); padding-left: 12px; }
.navdrop-thin { font-size: .88rem; }
.navdrop-all { margin-top: 6px; color: var(--text) !important; font-weight: 800 !important; font-size: .84rem !important; }

/* Hamburger: three bars that fold into an X. Hidden until the breakpoint. */
.menubtn { display: none; position: relative; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.menubtn:hover { border-color: #3a4056; }
.menubtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menubars, .menubars::before, .menubars::after { position: absolute; width: 17px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .14s ease; }
.menubars { top: 50%; left: 50%; margin: -1px 0 0 -8.5px; }
.menubars::before, .menubars::after { content: ''; left: 0; }
.menubars::before { top: -6px; }
.menubars::after { top: 6px; }
.menubtn.on .menubars { background: transparent; transition-duration: 0s; }
.menubtn.on .menubars::before { transform: translateY(6px) rotate(45deg); }
.menubtn.on .menubars::after { transform: translateY(-6px) rotate(-45deg); }

/* THE NAV COLLAPSES AT 720px, NOT 560px, because 560 was well below the width
   the desktop nav actually needs. Measured: the signed-out row is 622px of
   links beside a 142px logo, so it stops fitting at a 682px viewport and every
   page on the site overflowed horizontally by up to 82px through the whole
   561-690 band. 720 clears that with headroom.
   Paired with the `min-width: 720px` rule further down; the two bounds MUST
   move together or there is a band with neither rule. */
@media (max-width: 719px) {
  header { position: relative; }
  .menubtn { display: block; }
  .navscrim { position: fixed; inset: 0; background: rgba(6,6,11,.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 55; }
  .navscrim[hidden] { display: none; }

  /* Kept in the DOM and animated rather than display:none-toggled, so the
     panel can transition; visibility keeps it off the tab order when shut. */
  .topnav { flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 8px; padding: 8px; background: var(--panel); border: 1px solid var(--border);
    border-radius: 16px; z-index: 60; box-shadow: 0 18px 40px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: top right;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s; }
  .topnav.open { opacity: 1; visibility: visible; transform: none; }
  .topnav a { padding: 13px 14px; border-radius: 10px; font-size: 1rem;
    opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
  .topnav.open a { opacity: 1; transform: none; }
  .topnav.open a:nth-child(2) { transition-delay: .04s; }
  .topnav.open a:nth-child(3) { transition-delay: .08s; }
  .topnav.open a:nth-child(4) { transition-delay: .12s; }
  .topnav.open a:nth-child(5) { transition-delay: .16s; }
  .topnav a:active { background: var(--bg); }
  .topnav a.on { background: var(--bg); color: var(--text); display: flex; align-items: center; gap: 9px; }
  .topnav a.on::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex: none; }

  /* On a phone the dropdown is part of the menu, not a layer over it: an
     absolutely-positioned panel inside an already-absolute nav would hang
     off the screen edge. It expands inline and pushes the rest down. */
  .navdrop { display: block; }
  .navdrop-btn { width: 100%; justify-content: space-between; padding: 13px 14px;
    border-radius: 10px; font-size: 1rem; color: var(--muted);
    opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
  .topnav.open .navdrop-btn { opacity: 1; transform: none; transition-delay: .04s; }
  .navdrop-btn:active { background: var(--bg); }
  .navdrop.here .navdrop-btn { background: var(--bg); color: var(--text); }
  /* Shown and hidden with `display`, not an animated max-height. A collapse
     transition needs a height guess that is wrong the moment the list changes
     length, and the whole panel is already inside a menu that animates itself,
     so the extra motion bought nothing and could fail silently. */
  .navdrop-panel {
    display: none; position: static; width: auto; margin: 0; padding: 0 0 0 10px;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    transform: none; max-height: none; overflow: visible; opacity: 1; visibility: visible;
    transition: none;
  }
  .navdrop.open .navdrop-panel { display: block; }
  .navdrop-panel::before { content: none; }
  .navdrop-grid { grid-template-columns: 1fr; gap: 0; }
  .navdrop-h { padding: 10px 10px 4px; }
  .navdrop-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); margin-top: 6px; }
  .navdrop-col a { padding: 10px; opacity: 1; transform: none; }
  /* Blurbs are a desktop affordance — but the LABEL lives inside a span too
     (`.navdrop-txt` wraps <b>label</b> + <span>blurb</span>), so hiding every
     span here hid the wrapper and left a column of bare icons. Hide only the
     blurb, which is the wrapper's own child. */
  .navdrop-col a .navdrop-txt > span { display: none; }
  .topnav .navcta { display: block; margin-top: 6px; text-align: center; color: #fff;
    font-weight: 800; background: linear-gradient(135deg, var(--accent), #FF8A3D); }
}

@media (prefers-reduced-motion: reduce) {
  .menubars, .menubars::before, .menubars::after,
  .topnav, .topnav a { transition-duration: .01ms; }
  .topnav, .topnav.open, .topnav a, .topnav.open a { transform: none; }
}

/* ── Hero ── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px;
  align-items: center; padding: 68px 0 40px;
  /* The fan is wider than the column it sits in - that is the point, the back
     cards peek out either side - so at a tight viewport the right one would
     push the PAGE wide and hand the whole site a horizontal scrollbar. clip,
     not hidden: it trims the decoration without making this a scroll
     container. */
  overflow-x: clip;
}
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); font-weight: 900; letter-spacing: -1.5px; line-height: 1.06; }
.hero .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { margin-top: 20px; color: var(--muted); font-size: 1.1rem; line-height: 1.65; max-width: 30em; }

/* Hero source tabs: Product / Voice / Text. Prefixed `ht` because this file
   is shared with the player page and a reused class name silently corrupts the
   other one (see CLAUDE.md §7).

   A SEGMENTED CONTROL, not three buttons. Three separate boxes with a coloured
   outline on the active one read as a validation error, and on a near-white
   page they had no depth at all - track, thumb and page were all the same
   value. So the track is recessed, the selected item is a raised thumb that
   SLIDES between positions, and the accent is spent on the label rather than
   on a border. --i is the selected index, set in JS. */
.httabs {
  /* --n is how many segments; the control is used with three on the homepage
     and two on speak.php, and hard-coding 3 was the only thing stopping it
     being shared. */
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr);
  gap: 0; max-width: 600px; margin: 28px 0 0; padding: 5px;
  background: var(--ht-track); border: 1px solid var(--border); border-radius: 999px;
}
.httabs::before {
  content: ''; position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px;
  width: calc((100% - 10px) / var(--n, 3)); border-radius: 999px;
  background: var(--ht-thumb); box-shadow: var(--ht-thumb-sh);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .34s cubic-bezier(.34, 1.3, .5, 1);
}
.httab {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 10px; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: -.1px;
  cursor: pointer; border-radius: 999px; transition: color .2s;
}
.httab .ic { width: 16px; height: 16px; flex: none; opacity: .85; }
.httab:hover { color: var(--text); }
.httab[aria-selected="true"] { color: var(--text); }
.httab[aria-selected="true"] .ic { color: var(--accent); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .httabs::before { transition: none; } }
@media (max-width: 430px) {
  .httab { font-size: .86rem; padding: 10px 6px; gap: 5px; }
  .httab .ic { width: 14px; height: 14px; }
}

/* The wait. Sits where the form was, so the eye does not have to move. */
.spprog {
  max-width: 600px; margin: 14px 0 0; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--ht-bar-sh);
}
.spprog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.spprog-msg { font-weight: 700; font-size: 1rem; letter-spacing: -.2px; }
.spprog-pct { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.spprog-track {
  position: relative; height: 8px; margin-top: 12px; border-radius: 999px;
  background: var(--ht-track); overflow: hidden;
}
.spprog-fill {
  height: 100%; width: 0; border-radius: 999px; background: var(--grad);
  transition: width .6s cubic-bezier(.3, .7, .3, 1);
}
/* A sheen travelling over the fill, so a long stage still looks like work in
   progress rather than a bar that has stalled. */
.spprog-fill::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffffff59, transparent);
  transform: translateX(-100%); animation: spprog-sheen 1.6s ease-in-out infinite;
}
@keyframes spprog-sheen { to { transform: translateX(100%); } }
.spprog-sub { color: var(--muted); font-size: .86rem; line-height: 1.6; margin-top: 12px; }
.spprog.err { border-color: var(--accent); }
.spprog.err .spprog-fill { background: var(--accent); }
.spprog.err .spprog-fill::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .spprog-fill { transition: none; }
  .spprog-fill::after { animation: none; }
}

.htpane { display: none; }
.htpane.on { display: block; }
.htpane .urlbar { margin-top: 14px; }
.htgo { display: inline-block; margin-top: 14px; text-decoration: none; }
.htnote { color: var(--muted); font-size: .9rem; margin-top: 12px; }

/* Reel Voice / Reel Text behind a plan. Shown where the recorder or the text
   box would have been, on the homepage tabs, the /voice and /text pages and
   the speak page - one block so the reason reads the same in all three.
   Names checked against the player block before adding them; style.css is
   shared and the player rules come last. */
.gate { border: 1px dashed var(--border); border-radius: 14px; padding: 20px 22px; margin-top: 6px;
        background: linear-gradient(180deg, #ff3b3b0d, transparent 70%); }
.gate-msg { margin: 0; font-weight: 650; }
.gate .htgo { margin-top: 16px; }
.gate .htnote { margin-top: 10px; font-size: .85rem; }
/* Row layout only: this sits the button on the textarea's BOTTOM edge.
   Below the breakpoint the bar becomes a column, where the cross axis is
   horizontal - so the same declaration right-aligns and shrink-wraps the
   textarea instead. Undone in the media query. */
.htwrite { align-items: flex-end; }
.htwrite textarea {
  flex: 1; background: none; border: 0; outline: none; color: var(--text); resize: vertical;
  font: inherit; font-size: 1.05rem; line-height: 1.5; padding: 10px 12px; min-width: 0; min-height: 68px;
}
.htwrite textarea::placeholder { color: var(--ht-ph); }

.urlbar {
  display: flex; gap: 10px; max-width: 600px; margin: 30px 0 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 10px;
  box-shadow: var(--ht-bar-sh);
  transition: border-color .15s, box-shadow .2s;
}
/* A ring rather than just a border colour: at 1px the old focus state was
   almost invisible on a near-white page. */
.urlbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ht-ring); }
.urlbar input {
  flex: 1; background: none; border: 0; outline: none; color: var(--text);
  font-size: 1.05rem; padding: 10px 12px; min-width: 0;
}
.urlbar input::placeholder { color: var(--ht-ph); }
.go {
  border: 0; cursor: pointer; white-space: nowrap;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 1rem;
  border-radius: 11px; padding: 13px 22px; transition: transform .1s, box-shadow .15s;
}
.go:hover { transform: translateY(-1px); box-shadow: 0 8px 24px #ff3b3b4d; }
.go:disabled { opacity: .75; cursor: wait; transform: none; box-shadow: none; }
@media (max-width: 430px) {
  .urlbar { flex-direction: column; align-items: stretch; }
  /* Explicit rather than relying on source order: .htwrite and .urlbar have
     the same specificity, so which one wins would be a matter of position. */
  .urlbar.htwrite { align-items: stretch; }
  .htwrite textarea { width: 100%; min-height: 96px; }
  .go { width: 100%; }
  .htgo { width: auto; }
}

.assure { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; list-style: none; }
.assure li { color: var(--muted); font-size: .92rem; display: flex; align-items: center; gap: 7px; }
.assure li::before { content: "✓"; color: var(--accent2); font-weight: 900; }
.proof { margin-top: 18px; color: var(--muted); font-size: .92rem; }
.proof b { color: var(--text); }
.err {
  max-width: 600px; margin: 18px 0 0; padding: 11px 16px; border-radius: 10px;
  background: #2a1220; color: #ff6484; border: 1px solid #ff6484; font-weight: 600;
}

.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Hero demo: the product selling itself ── */
/* Curated exports keep their native geometry. Do not reuse .phone's crop or
   iframe sizing: the wide story is not a vertical video inside a wide box. */
.home-film { margin: 0; min-width: 0; }
.home-film-stage { position:relative; border-radius:14px; overflow:hidden; background:#111; border:1px solid #ffffff20; box-shadow:0 22px 65px #0006; }
.home-film video { display:block; width:100%; height:auto; object-fit:contain; background:#111; }
.home-film-wide { width:min(100%,600px); }
.home-film-wide video { aspect-ratio:16 / 9; }
/* The preview's own controls: two round buttons over the TOP-right of the
   frame, quiet until the frame is hovered or a button is focused, always
   visible on a touch screen (there is no hover to reveal them). The icons are
   inline SVGs toggled by state classes on the stage, so no image loads and
   the pressed state is visible without colour. */
.hf-ctls { position:absolute; right:12px; top:12px; display:flex; gap:8px; z-index:3; opacity:.55; transition:opacity .25s ease; }
.home-film-stage:hover .hf-ctls, .home-film-stage:focus-within .hf-ctls, .home-film-stage.is-paused .hf-ctls { opacity:1; }
@media (hover:none) { .hf-ctls { opacity:1; } }
.hf-ctl { width:40px; height:40px; border-radius:50%; border:1px solid #ffffff2e; background:rgba(10,10,16,.62); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .2s ease, transform .2s ease; }
.hf-ctl:hover { background:rgba(10,10,16,.85); transform:scale(1.06); }
.hf-ctl:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.hf-ctl svg { width:20px; height:20px; fill:currentColor; }
.hf-ic-play, .hf-ic-sound { display:none; }
.home-film-stage.is-paused .hf-ic-play { display:block; }
.home-film-stage.is-paused .hf-ic-pause { display:none; }
.home-film-stage.has-sound .hf-ic-sound { display:block; }
.home-film-stage.has-sound .hf-ic-muted { display:none; }
@media (prefers-reduced-motion: reduce) { .hf-ctls, .hf-ctl { transition:none; } .hf-ctl:hover { transform:none; } }
.home-film figcaption { display:grid; gap:7px; margin-top:16px; }
.home-film figcaption strong { font-size:1.1rem; }
.home-film figcaption span { color:var(--muted); font-size:.86rem; line-height:1.6; }
.hero-demo:has(.home-film-wide) { min-width:0; width:100%; }
.hero:has(.home-film-wide) { grid-template-columns:1fr 1.12fr; gap:40px; }
@media (max-width:760px) {
  .hero:has(.home-film-wide) { grid-template-columns:1fr; gap:36px; }
  .home-film-wide { max-width:none; }
}
/* Doubled selector on purpose: the player's .phone rule sits later in this
   file, so equal specificity would let its width win here. */
.phone.phone-demo { width: min(290px, 76vw); }
.demo-cap { margin-top: 16px; text-align: center; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.demo-cap b { color: var(--text); }

/* THE FAN. The playing phone sits in front; two real stills fan back behind it
   so the hero shows a CHANNEL rather than a clip. Sizes are driven off the
   phone's own width so the three stay in proportion at every breakpoint. */
.hero-stack { position: relative; display: grid; place-items: center; }
.hero-stack .phone-demo { position: relative; z-index: 3; }
.hstack-ghost {
  /* left:50% + a -50% translate anchors both cards to the STACK CENTRE, so the
     two offsets below are symmetric by construction. Without an explicit left
     they fall at the static position - the stack edge - and the fan leans hard
     one way. */
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: min(250px, 66vw); aspect-ratio: 9 / 16;
  border-radius: 26px; border: 6px solid #1b1e2b; overflow: hidden; background: #000;
  box-shadow: 0 18px 46px #0009;
  /* dimmed rather than blurred: a blurred card reads as an out-of-focus photo,
     a dimmed one reads as a card further back in a stack. */
  opacity: .5; filter: saturate(.85);
  pointer-events: none;
}
.hstack-ghost img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Rotate about the BOTTOM edge so the fan opens upward from a common base,
   the way a hand of cards does; rotating about the centre splays them evenly
   and reads as scattered instead of stacked. */
.hstack-ghost.g1 { transform: translate(calc(-50% - 58px), -50%) rotate(-8deg); transform-origin: 50% 100%; z-index: 2; }
.hstack-ghost.g2 { transform: translate(calc(-50% + 58px), -50%) rotate(8deg);  transform-origin: 50% 100%; opacity: .38; }
@media (max-width: 900px) {
  .hstack-ghost { width: min(200px, 52vw); }
  .hstack-ghost.g1 { transform: translate(calc(-50% - 42px), -50%) rotate(-7deg); }
  .hstack-ghost.g2 { transform: translate(calc(-50% + 42px), -50%) rotate(7deg); }
}
/* Below the two-column break the hero centres and there is no room either side,
   so the fan collapses to the one phone that matters. */
@media (max-width: 720px) {
  .hstack-ghost { display: none; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 44px; justify-items: start; }
  .hero-demo { justify-self: center; }
}

/* ── Section furniture ── */
.section-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 900; letter-spacing: -.8px; text-align: center; }
.section-sub { text-align: center; color: var(--muted); margin-top: 10px; }

/* ── Thesis ── */
.thesis {
  margin-top: 84px; border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(180deg, #15111a, var(--panel)); padding: 40px 38px;
}
.thesis h2 { font-size: clamp(1.5rem, 3.2vw, 2.05rem); font-weight: 900; letter-spacing: -.8px; }
.thesis p { margin-top: 16px; color: var(--muted); font-size: 1.03rem; line-height: 1.75; max-width: 62ch; }
@media (max-width: 560px) { .thesis { padding: 28px 22px; } }

/* The thesis, shown as well as argued: a flat recording beside a directed cut.
   Everything here is drawn in CSS rather than filmed, so it costs no payload on
   the page that matters most and follows the theme tokens instead of baking one
   colour scheme into a video file. */
.thesis { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 38px; align-items: center; }
.th-copy p { max-width: 46ch; }
.th-turn b { color: var(--text); }
.th-vs { display: flex; align-items: center; justify-content: center; gap: 14px; }
.th-side { flex: 1 1 0; min-width: 0; text-align: center; }
.th-side figcaption { margin-top: 10px; font-size: .78rem; letter-spacing: .3px; color: var(--muted); }
.th-screen {
  position: relative; aspect-ratio: 9 / 13; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 14px;
}
.th-arrow { flex: none; color: var(--muted); opacity: .55; }
.th-arrow svg { width: 22px; height: 22px; display: block; }

/* Left: grey, evenly spaced, and the only thing that moves is a cursor
   wandering - the point being that nothing is directed. */
.th-dull .th-line { width: 60%; height: 6px; border-radius: 3px; background: var(--border); }
:root[data-theme="light"] .th-dull .th-line { background: #e2e4ec; }
.th-cursor {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); opacity: .5; top: 34%; left: 30%;
  animation: th-wander 7s ease-in-out infinite;
}
@keyframes th-wander {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(26px, 14px); }
  55%  { transform: translate(6px, 30px); }
  80%  { transform: translate(30px, 2px); }
  100% { transform: translate(0, 0); }
}

/* Right: the engine's own grammar - a drifting accent wash, words that rise and
   settle one after another, and a payoff rule that resolves the frame. */
.th-live { border-color: transparent; background: #0a0a10; box-shadow: 0 10px 34px #0003; }
.th-wash {
  position: absolute; width: 150%; height: 62%; left: -25%; top: -14%;
  border-radius: 50%; background: var(--grad); opacity: .5; filter: blur(26px);
  animation: th-drift 9s ease-in-out infinite alternate;
}
@keyframes th-drift { from { transform: translate(-6%, 0) scale(1); } to { transform: translate(8%, 12%) scale(1.12); } }
.th-word {
  position: relative; font-weight: 900; letter-spacing: -.5px; line-height: 1;
  font-size: clamp(.95rem, 2.4vw, 1.35rem); color: #fff; opacity: 0;
  animation: th-rise 4.8s cubic-bezier(.16,.84,.32,1) infinite;
}
.th-w2 { color: #ffd9c9; animation-delay: .5s; }
.th-w3 { animation-delay: 1s; }
@keyframes th-rise {
  0%, 6%   { opacity: 0; transform: translateY(9px); }
  16%, 62% { opacity: 1; transform: none; }
  74%,100% { opacity: 0; transform: translateY(-5px); }
}
.th-rule {
  position: absolute; left: 18%; bottom: 15%; height: 3px; width: 0; border-radius: 2px;
  background: var(--grad); animation: th-sweep 4.8s cubic-bezier(.16,.84,.32,1) infinite;
}
@keyframes th-sweep { 0%,26% { width: 0; } 48%,66% { width: 64%; } 82%,100% { width: 0; } }

@media (max-width: 860px) {
  .thesis { grid-template-columns: 1fr; gap: 30px; }
  .th-vs { max-width: 420px; margin: 0 auto; }
}

/* ── Steps ── */
.steps { margin-top: 84px; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.step {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px;
  transition: border-color .15s, transform .15s;
}
.step:hover { border-color: #33394d; transform: translateY(-2px); }
.step .n {
  width: 34px; height: 34px; border-radius: 10px; background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; margin-bottom: 16px;
}
.step b { display: block; font-size: 1.05rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .93rem; line-height: 1.6; }
@media (max-width: 720px) { .step-grid { grid-template-columns: 1fr; } }

/* ── Step illustrations ────────────────────────────────────────────────
   One drawn scene per step, showing what that step actually does rather
   than decorating it. CSS and a little markup, no video: three autoplaying
   files on the landing page would cost more than the whole rest of it, and
   a video cannot follow the light/dark tokens the way these do.
   They idle until scrolled into view (see .go below). */
.hw-art {
  position: relative; height: 132px; margin: -4px 0 18px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg);
  overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.step:hover .hw-art { border-color: var(--border-hi, #33394d); }

/* 1 — reading the site: a scan sweeps the page and pieces of it fly out. */
.hw-page {
  position: relative; width: 96px; height: 100px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--panel);
  padding: 8px 9px; display: flex; flex-direction: column; gap: 6px;
}
.hw-url { height: 9px; border-radius: 3px; background: var(--border); margin-bottom: 3px; position: relative; }
.hw-url span { position: absolute; left: 3px; top: 3px; width: 46%; height: 3px; border-radius: 2px; background: var(--muted); opacity: .55; }
.hw-bar { height: 5px; border-radius: 3px; background: var(--border); }
.hw-block { height: 26px; margin-top: 2px; border-radius: 5px; }
.hw-scan {
  position: absolute; left: 0; right: 0; height: 26px; top: -26px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 26%, transparent), transparent);
  animation: hw-scan 3.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes hw-scan { 0% { top: -26px; } 62%, 100% { top: 100px; } }
.hw-picks { display: flex; flex-direction: column; gap: 8px; }
.hw-pick { width: 26px; height: 26px; border-radius: 7px; opacity: 0; animation: hw-pop 3.4s cubic-bezier(.16,.84,.32,1) infinite; }
.hw-p1 { background: var(--grad); animation-delay: .55s; }
.hw-p2 { background: var(--panel); border: 1px solid var(--border-hi, #33394d); animation-delay: .85s; }
.hw-p3 { background: var(--muted); opacity: 0; animation-delay: 1.15s; }
@keyframes hw-pop {
  0%, 12%  { opacity: 0; transform: translateX(-10px) scale(.7); }
  26%, 78% { opacity: 1; transform: none; }
  92%,100% { opacity: 0; transform: translateX(4px) scale(.95); }
}

/* 2 — the cut being assembled: scenes land in order, a playhead crosses them,
   and the soundtrack moves underneath because the cuts sit on its beat. */
.hw-board { display: flex; align-items: flex-end; gap: 5px; position: relative; padding-bottom: 4px; }
.hw-cell {
  width: 21px; border-radius: 5px; background: var(--border);
  opacity: 0; transform: translateY(8px); animation: hw-land 4.4s cubic-bezier(.16,.84,.32,1) infinite;
}
.hw-c1 { height: 30px; animation-delay: .1s; }
.hw-c2 { height: 46px; animation-delay: .35s; background: var(--grad); }
.hw-c3 { height: 24px; animation-delay: .6s; }
.hw-c4 { height: 54px; animation-delay: .85s; background: var(--grad); }
.hw-c5 { height: 34px; animation-delay: 1.1s; }
@keyframes hw-land {
  0%, 4%   { opacity: 0; transform: translateY(8px); }
  14%, 80% { opacity: 1; transform: none; }
  94%,100% { opacity: 0; transform: translateY(-4px); }
}
.hw-head {
  position: absolute; top: -6px; bottom: -2px; width: 2px; border-radius: 1px;
  background: var(--text); opacity: .75; left: 0; animation: hw-head 4.4s cubic-bezier(.4,0,.4,1) infinite;
}
@keyframes hw-head { 0%,10% { left: 0; } 74%,100% { left: 100%; } }
.hw-wave { display: flex; align-items: center; gap: 3px; height: 40px; }
.hw-wave i {
  width: 3px; border-radius: 2px; background: var(--muted); opacity: .45;
  height: 8px; animation: hw-beat 1.1s ease-in-out infinite alternate;
}
.hw-wave i:nth-child(2n)  { animation-delay: .12s; }
.hw-wave i:nth-child(3n)  { animation-delay: .26s; }
.hw-wave i:nth-child(5n)  { animation-delay: .38s; }
@keyframes hw-beat { from { height: 6px; } to { height: 26px; } }

/* 3 — the preview, and the one decision the viewer has to make. */
.hw-phone {
  position: relative; width: 62px; height: 104px; border-radius: 11px;
  border: 1px solid var(--border); background: #0a0a10; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hw-play {
  width: 0; height: 0; border-left: 13px solid #fff; border-top: 9px solid transparent;
  border-bottom: 9px solid transparent; margin-left: 3px; opacity: .92;
  animation: hw-pulse 3.6s ease-in-out infinite;
}
@keyframes hw-pulse { 0%,100% { transform: scale(1); opacity: .92; } 46% { transform: scale(.86); opacity: .6; } }
.hw-prog { position: absolute; left: 8px; right: 8px; bottom: 9px; height: 3px; border-radius: 2px; background: #ffffff22; }
.hw-prog b { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--grad); animation: hw-fill 3.6s linear infinite; }
@keyframes hw-fill { 0% { width: 0; } 88%, 100% { width: 100%; } }
.hw-badge {
  font-size: .72rem; font-weight: 800; letter-spacing: .2px; padding: 7px 11px; border-radius: 999px;
  background: var(--grad); color: #fff; opacity: 0; transform: translateY(6px) scale(.9);
  animation: hw-badge 3.6s cubic-bezier(.16,.84,.32,1) infinite;
}
@keyframes hw-badge {
  0%, 62%  { opacity: 0; transform: translateY(6px) scale(.9); }
  76%, 94% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(-3px) scale(.97); }
}

/* Rest a scene while its card is off screen. Deliberately opt-OUT: paused by
   default and released by JS would mean that any browser where the observer
   never fires shows three frozen illustrations, and nothing would report it.
   Running by default costs a little idle work in the worst case and always
   looks right, which is the correct way round for a decoration.

   This must come AFTER the rules above: each sets the `animation` SHORTHAND,
   which resets animation-play-state to running, so a pause rule placed before
   them is silently undone - it computed as "running" and looked fine. */
.step.rest .hw-art * { animation-play-state: paused; }

/* Motion is the flourish, never the message: with it turned off every scene
   holds its finished state instead of freezing mid-entrance. */
@media (prefers-reduced-motion: reduce) {
  .hw-art *, .th-vs * { animation: none !important; }
  .hw-pick, .hw-cell, .th-word { opacity: 1 !important; transform: none !important; }
  .hw-badge { opacity: 1 !important; transform: none !important; }
  .hw-prog b { width: 70% !important; }
  .th-rule { width: 64% !important; }
  .hw-scan, .hw-head { display: none; }
}
@media (max-width: 420px) { .hw-art { height: 118px; } }

/* ── Pricing ── */
.pricing { margin-top: 84px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
/* Three tiers at 1100px is 340px each - workable, but the middle one carries
   five list items and would set the row height for all of them. Two-up below
   900 keeps the cards readable before the single column takes over. */
@media (max-width: 900px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
.tier { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 28px 26px; }
.tier.hot { border-color: #4a2b30; background: linear-gradient(180deg, #1a1218, var(--panel)); }
.tier-name { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soon {
  font-size: .68rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 800;
  color: var(--accent2); border: 1px solid #4a2b30; border-radius: 999px; padding: 3px 9px;
}
.tier-price { font-size: 2.6rem; font-weight: 900; letter-spacing: -1.5px; margin: 12px 0 20px; }
.tier-price span { font-size: .88rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.tier ul { list-style: none; display: grid; gap: 11px; }
.tier li { color: var(--muted); font-size: .94rem; line-height: 1.5; display: flex; gap: 10px; }
.tier li::before { content: "✓"; color: var(--accent2); font-weight: 900; flex-shrink: 0; }
.tier-note { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 18px; }
.tier-fine { margin: 14px 0 0; font-size: .88rem; }
.tier-fine a { color: var(--accent2); text-decoration: none; font-weight: 700; }
.tier-fine a:hover { text-decoration: underline; }
@media (max-width: 720px) { .tiers { grid-template-columns: 1fr; } }

/* ── Kinds of channel (the breadth of what Autopilot makes) ── */
.kinds { margin-top: 84px; }
.kind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 860px) { .kind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kind-grid { grid-template-columns: 1fr; } }
.kind {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px;
  transition: border-color .15s, transform .15s;
}
.kind:hover { border-color: var(--border-hi, #33394d); transform: translateY(-2px); }
.kind-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px;
  background: var(--bg); border: 1px solid var(--border); color: var(--accent2);
}
.kind-ic .ic { width: 20px; height: 20px; }
.kind b { display: block; font-size: 1.02rem; margin-bottom: 7px; letter-spacing: -.2px; }
.kind p { color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* ── Who ── */
.who { text-align: center; margin-top: 84px; }
.who-title { color: var(--muted); font-size: .9rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.chips span {
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 18px; font-size: .92rem; color: var(--text); font-weight: 600;
}

/* ── FAQ ── */
.faq { margin-top: 84px; max-width: 760px; margin-left: auto; margin-right: auto; }
.faq details {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 22px; margin-top: 12px;
}
.faq details[open] { border-color: #33394d; }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent2); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); line-height: 1.7; margin-top: 12px; font-size: .95rem; }

/* ── Closer ── */
.closer { text-align: center; margin-top: 90px; }
.closer h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 900; letter-spacing: -.8px; }
.closer-btn { display: inline-block; margin-top: 22px; color: #fff; font-size: 1.05rem; padding: 15px 30px; }

.reeled { margin-top: 30px; }
.reeled-label { font-size: .7rem; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px; }
.reeled-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; text-decoration: none; }
.reeled-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
  color: var(--muted); font-size: .84rem; font-weight: 600; white-space: nowrap;
  transition: border-color .14s, color .14s; }
.reeled-chip img { border-radius: 4px; filter: grayscale(1); opacity: .75; transition: filter .14s, opacity .14s; }
.reeled-strip:hover .reeled-chip { border-color: #3a4056; color: var(--text); }
.reeled-strip:hover .reeled-chip img { filter: none; opacity: 1; }
.reeled-more { font-size: .82rem; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* MADE WITH ROLLSEE — the showcase strip under the hero. Cards are 9:16
   because that is the shape the product makes; a 16:9 thumbnail of a vertical
   video would be a lie about the output. Stills, never iframes. */
.mw { max-width: 1120px; margin: 0 auto; padding: 10px 20px 4px; }
.mw-head { text-align: center; margin-bottom: 26px; }
.mw-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 8px; letter-spacing: -.02em; }
.mw-head p { color: var(--muted); margin: 0; font-size: 1rem; }

/* THE CAROUSEL. The track clips a row that is rendered twice and slides it
   by exactly half its own width, which is one full set of cards, so the loop
   is seamless at any card count. The gradient fades at both ends are the
   page ground itself (var(--bg), so they hold in both themes) painted over the
   edges; they never take the pointer, so a card under the fade still clicks.
   Hovering or focusing anything in the row parks it, and the `rest` class
   (set by the page's IntersectionObserver) parks it off screen. */
.mw-track { position: relative; overflow: hidden; margin: 0 -20px; padding: 4px 0; }
.mw-track::before, .mw-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 3; pointer-events: none; }
.mw-track::before { left: 0;  background: linear-gradient(90deg, var(--bg) 18%, transparent); }
.mw-track::after  { right: 0; background: linear-gradient(270deg, var(--bg) 18%, transparent); }
.mw-grid { display: flex; gap: 18px; width: max-content; list-style: none; padding: 0 20px; margin: 0;
           animation: mw-drift 46s linear infinite; }
.mw-track:hover .mw-grid, .mw-track:focus-within .mw-grid, .mw-track.rest .mw-grid { animation-play-state: paused; }
@keyframes mw-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mw-card { flex: none; width: 196px; }
@media (max-width: 560px) {
  .mw { padding-left: 16px; padding-right: 16px; }
  .mw-track { margin: 0 -16px; }
  .mw-track::before, .mw-track::after { width: 60px; }
  .mw-grid { gap: 12px; padding: 0 16px; }
  .mw-card { width: 150px; }
  .mw-name { font-size: .8rem; }
}
/* No drift under reduced motion: the copy goes, the row scrolls by hand. */
@media (prefers-reduced-motion: reduce) {
  .mw-grid { animation: none; width: auto; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .mw-card { scroll-snap-align: start; }
  .mw-dup { display: none; }
}
.mw-card a { display: block; text-decoration: none; color: inherit; }
.mw-shot { position: relative; display: block; aspect-ratio: 9 / 12; overflow: hidden;
           border-radius: 12px; border: 1px solid var(--border); background: #0a0a10; }
/* object-position:top — a capture is a TALL page shot, so centring it frames
   the middle of a scroll instead of the hero the video actually opens on. */
.mw-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
               transition: transform .35s ease; }
.mw-card a:hover .mw-shot img { transform: scale(1.05); }
.mw-kind { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .66rem; font-weight: 700;
           letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px;
           background: rgba(10,10,16,.78); color: #eef0f6; backdrop-filter: blur(6px); }
.mw-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
           font-size: 1.5rem; color: #fff; opacity: 0; transition: opacity .25s ease;
           background: linear-gradient(180deg, rgba(10,10,16,.1), rgba(10,10,16,.62)); }
.mw-card a:hover .mw-play, .mw-card a:focus-visible .mw-play { opacity: 1; }
.mw-name { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: .88rem;
           font-weight: 600; line-height: 1.3; }
.mw-name img { border-radius: 4px; flex: none; }
.mw-all { display: block; text-align: center; margin-top: 24px; color: var(--muted);
          font-weight: 600; text-decoration: none; }
.mw-all:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .mw-shot img, .mw-play { transition: none; }
  .mw-card a:hover .mw-shot img { transform: none; }
}

footer { text-align: center; margin-top: 90px; color: var(--muted); font-size: .88rem; }
.foot-links { margin-top: 12px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); }

/* Goal pills carry an icon, so the row scans as a set of choices rather than
   a wall of words. Inline-flex keeps the icon on the text baseline.
   Prefixed and defined here beside the other player rules. */
.goals .pill { display: inline-flex; align-items: center; gap: 6px; }
.pill-ic { width: 14px; height: 14px; flex: none; opacity: .9; }

/* ── Site footer ───────────────────────────────────────────────────────
   The footer was one centred line of six links, so the seven use cases and
   six audience pages had no route from the bottom of the page. Four columns
   and a base bar: what the product is, then everywhere the site can actually
   take you. Left-aligned, because a centred list of links gives the eye no
   edge to run down. */
.sitefoot { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--border); text-align: left; }
.sitefoot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.sitefoot-brand .logo { font-size: 1.05rem; }
.sitefoot-brand p { margin-top: 12px; color: var(--muted); font-size: .88rem; line-height: 1.65; max-width: 32ch; }
.sitefoot-cta {
  display: inline-block; margin-top: 16px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text); text-decoration: none;
  font-size: .84rem; font-weight: 700; transition: border-color .15s, background .15s;
}
.sitefoot-cta:hover { border-color: var(--border-hi, #33394d); background: var(--panel); }
.sitefoot-col h3 {
  font-size: .7rem; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--text); margin-bottom: 12px;
}
.sitefoot-col a {
  display: block; padding: 5px 0; color: var(--muted); text-decoration: none;
  font-size: .88rem; transition: color .12s;
}
.sitefoot-col a:hover { color: var(--text); }
.sitefoot-more { font-weight: 700; color: var(--text) !important; }
.sitefoot-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .82rem;
}
.sitefoot-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.sitefoot-base a { color: var(--muted); text-decoration: none; }
.sitefoot-base a:hover { color: var(--text); }
@media (max-width: 760px) {
  .sitefoot-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .sitefoot-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .sitefoot-grid { grid-template-columns: 1fr; }
  .sitefoot-base { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .go:hover, .step:hover { transform: none; }
}

/* ── Player page ── */
.player-head { padding-bottom: 18px; }
.player-grid { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; margin-top: 12px; }
@media (max-width: 860px) { .player-grid { grid-template-columns: 1fr; justify-items: center; } }

.phone {
  width: min(360px, 88vw); aspect-ratio: 9 / 16;
  border-radius: 34px; border: 8px solid #1b1e2b; overflow: hidden;
  box-shadow: 0 24px 70px #000a, 0 0 60px #ff3b3b26;
  background: #000;
}
.phone iframe { width: 100%; height: 100%; border: 0; display: block; }
.phone.wide { width: min(720px, 92vw); aspect-ratio: 16 / 9; border-radius: 18px; }

.side { max-width: 460px; width: 100%; }
.ready { color: var(--accent2); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: 2px; }
.proj { display: flex; align-items: center; gap: 10px; font-size: 1.7rem; margin-top: 10px; }
.proj img { border-radius: 6px; }
.hookline { color: var(--muted); margin-top: 8px; line-height: 1.6; }
.advcap { margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: .88rem; line-height: 1.5;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted); }
.advcap.ok { border-color: #2c5a3a; color: #7ee0a2; }
.advcap.bad { border-color: #5a3a2c; color: #ffb08a; }
.advcap a { color: inherit; font-weight: 700; }
.hookline b { color: var(--text); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-top: 16px; }
.panel-title { font-size: .8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 800; margin-bottom: 12px; }
/* Confirmation after a plan unlock. Name checked against the landing block
   before adding it - style.css is shared and the player rules come last, so a
   reused class silently restyles the other page. */
.planmsg { border: 1px solid var(--accent2); border-radius: 12px; padding: 10px 14px;
           margin-bottom: 14px; font-size: .86rem; font-weight: 600;
           background: linear-gradient(90deg, #ff3b3b14, transparent); }
.styles { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text); font-weight: 700; font-size: .92rem; background: var(--bg);
  transition: border-color .14s, background .14s;
}
.pill:hover { border-color: #3a4056; }
/* A control you may look at but not spend on: someone else's project. */
.pill.locked { opacity: .5; cursor: default; }
.pill.locked:hover { border-color: var(--border); }
/* Selected state matches the setup step's cards (accent ring on a tinted
   panel, not a filled chip), so the same choice looks the same in both
   places a visitor makes it. */
.pill.on { background: #1a1220; border-color: #ff3b3b70; color: var(--text);
  box-shadow: 0 0 0 1px #ff3b3b87 inset; }

.export {
  display: block; width: 100%; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 1.05rem;
  border-radius: 11px; padding: 14px;
}
.export-note { color: var(--muted); font-size: .84rem; margin-top: 10px; text-align: center; }

/* ── Conversational revisions (the flagship editing UX) ── */
.panel.revise { border-color: #3a2436; background: linear-gradient(165deg, #16121c, var(--panel)); }
.revsub { color: var(--muted); font-size: .84rem; line-height: 1.5; margin: -4px 0 12px; }
.revform { display: flex; flex-direction: column; gap: 9px; }
.revform textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-family: inherit; font-size: .92rem; padding: 11px 12px; resize: vertical; line-height: 1.45;
}
.revform textarea:focus { outline: none; border-color: var(--accent); }
.revgo {
  align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-2, #FF8A3D));
  color: #fff; border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 700; font-size: .9rem;
  cursor: pointer; font-family: inherit;
}
.revgo:hover { filter: brightness(1.08); }
.revchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.revchip {
  background: #191320; border: 1px solid #33283c; color: var(--muted); border-radius: 20px;
  padding: 5px 11px; font-size: .78rem; cursor: pointer; font-family: inherit; transition: border-color .12s, color .12s;
}
.revchip:hover { border-color: var(--accent); color: var(--text); }
.revlist-title { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted);
  font-weight: 800; margin: 16px 0 8px; }
.revlist { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.revlist li { color: var(--text); font-size: .88rem; line-height: 1.4; }
.revactions { display: flex; gap: 8px; }
.revactions .inline { display: inline; }
.revundo {
  background: var(--bg); border: 1px solid var(--border); color: var(--muted); border-radius: 8px;
  padding: 7px 12px; font-size: .82rem; cursor: pointer; font-family: inherit;
}
.revundo:hover { border-color: var(--accent); color: var(--text); }

.rec { color: var(--muted); font-size: .9rem; line-height: 1.55; margin-bottom: 10px; }
.sharecopy { cursor: pointer; font-family: inherit; white-space: nowrap; }
.sharecopy:hover { border-color: #3a4056; }
.share {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  color: var(--accent2); font-family: Consolas, monospace; font-size: .82rem; padding: 10px 12px; cursor: pointer;
}
.again { display: inline-block; margin-top: 22px; color: var(--muted); }

/* ── Modal ── */
.overlay {
  position: fixed; inset: 0; background: rgba(5, 5, 10, .8);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.overlay.open { display: flex; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  max-width: 440px; padding: 30px; text-align: center;
}
.modal h2 { margin-bottom: 14px; }
.modal p { color: var(--muted); line-height: 1.65; margin-bottom: 14px; }
.modal p b { color: var(--text); }
.modal-tip { font-size: .9rem; }

/* ══ Theme toggle button ══════════════════════════════════════════════ */
.headright { display: flex; align-items: center; gap: 18px; }
.themebtn {
  width: 42px; height: 42px; flex: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  color: var(--text); transition: border-color .15s, background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.themebtn:hover { border-color: var(--border-hi, #3a4056); color: var(--accent2); }
.themebtn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.themebtn svg { width: 18px; height: 18px; display: block; }
/* Icon reflects the chosen MODE (set as data-mode by JS), not the resolved
   theme: auto shows a split day/night disc, light a sun, dark a moon. */
.themebtn .sun, .themebtn .moon, .themebtn .auto { display: none; }
.themebtn[data-mode="light"] .sun { display: block; }
.themebtn[data-mode="dark"] .moon { display: block; }
.themebtn[data-mode="auto"] .auto { display: block; }

/* ══ Light mode ═══════════════════════════════════════════════════════
   Dark is the default (the :root block at the top); this is the opt-in
   light layer. Core surfaces flip by redefining the variables; the rest
   are targeted overrides for values that were hardcoded dark, so the dark
   theme's own rules are never touched. */
:root[data-theme="light"] {
  --ht-track: #eceef4;
  --ht-thumb: #ffffff;
  --ht-thumb-sh: 0 1px 2px #10121a14, 0 2px 8px #10121a1a;
  --ht-bar-sh: 0 1px 2px #10121a0a, 0 8px 24px #10121a12;
  --ht-ring: #f0322f1f;
  --ht-ph: #9aa0b0;
  --bg: #fbfbfd;
  --panel: #ffffff;
  --border: #e7e8ef;
  --text: #14161d;
  --muted: #5c6270;
  --accent: #f0322f;   /* a touch deeper so it holds on white */
  --accent2: #d9541a;  /* deep enough to read as link/mark text on white; --grad stays literally vivid */
  --border-hi: #cfd2dd;
  color-scheme: light;
}
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] .glow {
  background: radial-gradient(closest-side, #ff3b3b14, #ff8a3d08 55%, transparent);
}
:root[data-theme="light"] .err { background: #fff0f3; color: #c81e4a; border-color: #f4b8c6; }
:root[data-theme="light"] .thesis { background: linear-gradient(180deg, #fdf5f2, var(--panel)); }
:root[data-theme="light"] .step:hover,
:root[data-theme="light"] .faq details[open],
:root[data-theme="light"] .reeled-strip:hover .reeled-chip,
:root[data-theme="light"] .pill:hover,
:root[data-theme="light"] .sharecopy:hover { border-color: #cfd2dd; }
:root[data-theme="light"] .tier.hot { border-color: #ffd7c4; background: linear-gradient(180deg, #fff6f1, var(--panel)); }
:root[data-theme="light"] .soon { border-color: #ffd7c4; }
:root[data-theme="light"] .phone {
  border-color: #e7e8ef;
  box-shadow: 0 24px 70px rgba(20,22,45,.14), 0 0 60px #ff3b3b1f;
}
:root[data-theme="light"] .pill.on {
  background: #fff1ec; border-color: #ff9d7a; box-shadow: 0 0 0 1px #ffb499 inset;
}
:root[data-theme="light"] .advcap.ok { border-color: #b7e4c6; color: #1f8a4c; }
:root[data-theme="light"] .advcap.bad { border-color: #f3cdb8; color: #b85a1e; }
:root[data-theme="light"] .panel.revise { border-color: #ffd0e0; background: linear-gradient(165deg, #fdf3f7, var(--panel)); }
:root[data-theme="light"] .revchip { background: #fbf1f5; border-color: #f0d8e2; }
:root[data-theme="light"] .navscrim { background: rgba(20,22,45,.28); }
:root[data-theme="light"] .overlay { background: rgba(20,22,45,.42); }
:root[data-theme="light"] .topnav { box-shadow: 0 18px 40px rgba(20, 22, 45, .14); }
/* Desktop only. Under 720px `.topnav` stops being a row of links and BECOMES
   the dropdown panel (see the mobile block above), so height/padding here
   squash it to ~52px and clip the menu. A media query adds no specificity and
   this selector scores higher than the plain `.topnav` inside it, so being
   later in the file is not what decides it — the width bound is.
   THIS BOUND IS THE PARTNER OF THE 719px ONE ABOVE. They were 561/560; both
   moved together, and a change to one without the other leaves a band of
   widths with neither rule. */
@media (min-width: 720px) {
  :root[data-theme="light"] .topnav {
    height: 40px;
    align-items: center;
    padding: 25px;
    border-radius: 10px;
  }
}

/* Account entry in the nav: an avatar reads as "you are signed in" faster than
   any word does, so the label rides alongside it rather than replacing it. */
.navacct { display: inline-flex; align-items: center; gap: 7px; }
.navacct img { border-radius: 50%; display: block; }
/* THE NAME IS BOUNDED, because a signed-in nav is otherwise wider than the
   breakpoint was measured against and a long one has no upper limit at all.
   Measured: swapping "Sign in" for an avatar and "A Very Long Display Name"
   takes the nav from 622px to 785px, needing a 981px viewport. Below 1000px
   only the avatar shows, which the rule above already argues is the part that
   carries the meaning, and that makes a signed-in nav (598px) NARROWER than a
   signed-out one, so the 720px breakpoint holds for both. Above 1000px the
   name returns, capped so no display name can push it out again. */
.navacct span { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 999px) { .navacct span { display: none; } }

/* ── /pricing ─────────────────────────────────────────────────────────────
   Leans on the existing .tiers/.tier and .faq blocks so the page reads as
   part of the site rather than a bolt-on; only the pieces this page invents
   (the cost list, the packs strip) get new rules. */
/* The page opens straight on Plans, so the first section does not carry the
   64px gap the others use to separate themselves from what came before. */
.pr-sec{margin-top:64px}
.pr-sec.pr-first{margin-top:26px}
.pr-note{margin-top:16px;color:var(--faint);font-size:.9rem;text-align:center}

/* What things cost. A list, not a table: a table forces equal columns on
   rows whose right-hand side is two words and whose note is a sentence. */
.pr-costs{display:grid;gap:12px;margin-top:22px}
.pr-cost{border:1px solid var(--border);border-radius:14px;background:var(--panel);padding:16px 18px}
.pr-cost-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pr-cost-h .w{font-weight:700;font-size:1.02rem}
.pr-cost-h .c{font-weight:800;color:var(--accent2);white-space:nowrap}
.pr-cost p{margin-top:6px;color:var(--muted);font-size:.92rem;line-height:1.55}

.pr-tier-credits{margin:10px 0 4px;font-size:.98rem}
.pr-tier-credits b{font-size:1.15rem}
.pr-rate{color:var(--faint);font-size:.82rem;margin-left:8px}

/* The packs strip: small, factual, deliberately less prominent than a plan,
   because a plan is cheaper per credit and the page should not bury that. */
.pr-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.pr-pack{border:1px solid var(--border);border-radius:14px;background:var(--panel);padding:18px;text-align:center}
.pr-pack .n{font-size:1.7rem;font-weight:900;letter-spacing:-.6px}
.pr-pack .l{color:var(--faint);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.pr-pack .p{margin-top:10px;font-size:1.15rem;font-weight:800;color:var(--accent2)}
.pr-pack .r{color:var(--faint);font-size:.8rem;margin-top:2px}

.pr-one{border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:24px;max-width:620px}
.pr-one-price{font-size:2rem;font-weight:900;letter-spacing:-1px}
.pr-one-price span{display:block;font-size:.82rem;font-weight:600;color:var(--faint);letter-spacing:0;margin-top:2px}
.pr-one p{margin-top:12px;color:var(--muted);line-height:1.6}

.pr-cta{margin:72px 0 40px;text-align:center}
.pr-cta h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:900;letter-spacing:-.8px}
.pr-cta p{margin-top:8px;color:var(--muted)}
.pr-cta .go{margin-top:20px}

/* The atmospheric bed sits UNDER a custom scene's motion layers. It is the same
   canvas a clip scene paints, so it inherits .clip-canvas; this only puts it
   behind and stops it capturing the pointer. */
.atmos-bed { z-index: 0; pointer-events: none; }
.scene .mgcanvas { position: absolute; inset: 0; z-index: 1; }