/* ══════════════════════════════════════════════════════════════════════════
   SendTroy — the marketing site's design system
   ══════════════════════════════════════════════════════════════════════════

   One stylesheet for three pages: the landing page, sign-in and register. It
   is shared rather than inlined per page because the auth pages have to look
   like they belong to the same company as the hero — a sign-in screen that
   drifts from the marketing site is the moment somebody wonders whether they
   are still on the right domain.

   Two rules run through the whole file:

   MOTION IS PROGRESSIVE, NEVER LOAD-BEARING. Every scroll-driven animation is
   inside `@supports (animation-timeline: view())` and every reveal starts from
   a state that is already readable. Scroll-driven animations are at roughly
   84% support (Chrome/Edge 115+, Safari 18+, Firefox behind a flag), so the
   other 16% get an IntersectionObserver in motion.js — and if the JavaScript
   never runs at all, `.no-js` paints everything visible. A landing page that
   is blank without JS is a landing page that is blank to a crawler.

   COLOUR IS THE BRAND, TYPED. The accents are the same indigo/violet pair the
   app itself reads from `BRAND_ACCENT` / `BRAND_ACCENT_2` in troy/brand.py, so
   a customer arriving at my.sendtroy.team does not change companies. The
   department hues are new and only ever decorate — nothing is identified by
   colour alone.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Typed custom properties ───────────────────────────────────────────────
   @property is what makes a gradient angle animatable at all: an untyped
   custom property is a string to the interpolator and jumps from one value to
   the next. Typed, it is a number the compositor can tween, which is how the
   rotating conic borders below run without a single frame of JavaScript. */

@property --spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --beam {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@property --lift {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}
@property --count {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

:root {
  /* Surfaces — dark, and deliberately not neutral grey. Every one carries a
     trace of the brand hue so the page reads as one material. */
  --void:        #05060c;
  --ink:         #080a12;
  --panel:       #0d1019;
  --panel-2:     #121623;
  --raised:      #171b2b;

  --line:        rgba(255, 255, 255, 0.075);
  --line-2:      rgba(255, 255, 255, 0.13);
  --line-hot:    rgba(139, 92, 246, 0.42);

  --text:        #eef0f8;
  --dim:         #9aa3ba;
  --faint:       #626c86;

  /* The brand pair, matching troy/brand.py's defaults exactly. */
  --brand:       #6366f1;
  --brand-2:     #8b5cf6;
  --brand-3:     #a5b4fc;

  --cyan:        #22d3ee;
  --lime:        #a3e635;
  --amber:       #fbbf24;
  --rose:        #fb7185;
  --pink:        #f472b6;
  --sky:         #60a5fa;

  /* Department hues. Decoration only — every department is also named. */
  --d-marketing:    #8b5cf6;
  --d-support:      #22d3ee;
  --d-development:  #a3e635;
  --d-studios:      #f472b6;
  --d-intelligence: #fbbf24;
  --d-bureau:       #60a5fa;

  --shell: min(1240px, 100% - 3rem);
  --radius: 18px;
  --radius-sm: 11px;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-display: 'Outfit', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, monospace;

  color-scheme: dark;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* On BOTH, not just body. Body's `overflow-x` propagates to the viewport
     only while html is visible, and that propagation was leaving a sliver of
     horizontal scroll at 360px that was absent at 390. `clip` rather than
     `hidden`: `hidden` makes the element a scroll container, which silently
     breaks `position: sticky` on the header. */
  overflow-x: clip;
  /* The sticky header is 68px; an anchor that lands under it looks like a
     broken link rather than a jump that overshot. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font: 400 16.5px/1.65 var(--font-body);
  font-feature-settings: 'ss01' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: color-mix(in srgb, var(--brand) 45%, transparent); color: #fff; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--brand-3);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── The page's ambient light ─────────────────────────────────────────────
   Two fixed radial washes and a hairline grid, all behind everything and all
   `pointer-events: none`. This is what stops the dark surfaces reading as a
   flat black rectangle: there is a light source, and panels sit in it. */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 42rem at 12% -8%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 62%),
    radial-gradient(46rem 38rem at 92% 4%, color-mix(in srgb, var(--brand-2) 15%, transparent), transparent 60%),
    radial-gradient(70rem 50rem at 50% 108%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 65%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(72rem 60rem at 50% 22%, #000 20%, transparent 78%);
}

main, header, footer { position: relative; z-index: 1; }

.shell { width: var(--shell); margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════════════════════════════════ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: color-mix(in srgb, var(--void) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.masthead.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--void) 88%, transparent);
}
.masthead .shell {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 68px;
}

/* The scroll progress rule. `scroll()` gives it the document's own timeline,
   so it costs nothing on the main thread; without support it simply never
   appears, which is the correct failure for a decoration. */
.masthead .progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 55%, var(--cyan));
}
@supports (animation-timeline: scroll()) {
  .masthead .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.13rem;
  letter-spacing: -0.045em;
}
.wordmark .glyph {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--brand) 90%, transparent);
  position: relative;
  overflow: hidden;
}
.wordmark .glyph svg { width: 15px; height: 15px; }
.wordmark .glyph::after {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(from var(--spin), transparent 0 68%, rgba(255,255,255,0.55) 78%, transparent 88%);
  animation: spin-slow 5.5s linear infinite;
}
@keyframes spin-slow { to { --spin: 360deg; } }
.wordmark .tail { color: var(--brand-3); }

.masthead nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.masthead nav a.navlink {
  position: relative;
  padding: 0.5rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dim);
  border-radius: 9px;
  transition: color 0.22s var(--ease-out);
}
.masthead nav a.navlink::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--spring);
}
.masthead nav a.navlink:hover { color: var(--text); }
.masthead nav a.navlink:hover::before { opacity: 1; transform: scale(1); }
.masthead nav a.navlink span { position: relative; }

/* The section links go; SIGN IN STAYS. It is the one link on this bar that an
   existing customer came here to use, and a header offering only "Get started"
   tells the person who already has an account that they are in the wrong
   place. `.keep` is the opt-out and it is used exactly once. */
@media (max-width: 900px) {
  .masthead nav a.navlink:not(.keep) { display: none; }
  .masthead nav a.navlink.keep { padding-inline: 0.6rem; }
}
/* Under 420px the bar is the wordmark plus two labels, and both were wrapping
   to two lines each — a 68px header with four lines of text in it. The mark
   loses its word first, because it is the one thing still recognisable as an
   icon alone. */
@media (max-width: 420px) {
  .masthead .shell { gap: 0.5rem; }
  .masthead .wordmark > span:last-child { display: none; }
  .masthead nav { gap: 0.15rem; }
  .masthead nav a.navlink.keep { padding-inline: 0.45rem; font-size: 0.84rem; }
  .masthead .btn.sm { padding: 0.5rem 0.8rem; font-size: 0.82rem; }
  .masthead .btn.sm svg { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
  --btn-bg: linear-gradient(135deg, var(--brand), var(--brand-2));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.3rem;
  border: 0;
  border-radius: 12px;
  background: var(--btn-bg);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.012em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 12px 34px -14px color-mix(in srgb, var(--brand) 92%, transparent);
  transition: transform 0.28s var(--spring), box-shadow 0.28s var(--ease-out), filter 0.2s linear;
  will-change: transform;
}
.btn:hover {
  filter: brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 18px 44px -14px color-mix(in srgb, var(--brand) 95%, transparent);
}
.btn:active { transform: scale(0.975); }

/* The sweep. A `--beam` percentage is typed, so it interpolates; a plain
   custom property in the same place would snap. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent calc(var(--beam) - 22%), rgba(255,255,255,0.34) var(--beam), transparent calc(var(--beam) + 22%));
  --beam: -30%;
  transition: --beam 0.62s var(--ease-out);
}
.btn:hover::after { --beam: 130%; }

.btn.ghost {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-2);
  color: var(--text);
  box-shadow: none;
}
.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-hot);
  filter: none;
}
.btn.sm { padding: 0.52rem 0.95rem; font-size: 0.86rem; border-radius: 10px; }
.btn.lg { padding: 0.95rem 1.75rem; font-size: 1.03rem; border-radius: 14px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform 0.3s var(--spring); }
.btn:hover .arrow { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   Shared type + section furniture
   ══════════════════════════════════════════════════════════════════════════ */

section.band { padding: clamp(4.5rem, 9vw, 8.5rem) 0; position: relative; }
section.band + section.band { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.34rem 0.8rem 0.34rem 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-3);
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent);
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent); }
  50%      { opacity: 0.65; box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 0%, transparent); }
}

.band-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.band-head .eyebrow { margin-bottom: 1.4rem; }
.band-head h2 { font-size: clamp(2rem, 4.6vw, 3.35rem); margin-bottom: 1.1rem; }
.band-head p { color: var(--dim); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 38rem; }

.grad-text {
  background: linear-gradient(104deg, var(--brand-3) 0%, var(--brand-2) 42%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   Reveal system
   ──────────────────────────────────────────────────────────────────────────
   `.reveal` is the base state: shifted and transparent. Three things can
   restore it, in order of preference — a scroll-driven view() timeline, the
   `.in` class motion.js sets from an IntersectionObserver, or `.no-js`, which
   is on <html> until the script removes it. The last one is why the page is
   readable with JavaScript disabled and to a crawler.
   ══════════════════════════════════════════════════════════════════════════ */

/* AN OBSERVER DRIVES THIS, NOT A SCROLL TIMELINE, AND THAT IS DELIBERATE.

   `animation-timeline: view()` is the better tool for scrubbing something —
   the slabs and the pipeline below both use it. It is the wrong tool for
   *whether content is visible at all*, because an animation whose timeline is
   inactive holds at its `from` keyframe, and `from` here is `opacity: 0`.

   A timeline goes inactive more often than it sounds: an element that is
   already fully in view at load, a viewport as tall as the document, a printed
   page. Caught by a full-page screenshot, where Chromium sets the viewport to
   the document height and five of the eight sections rendered blank — the same
   thing a very tall window would do to a real visitor.

   So: the reveal is observer-driven everywhere, and scroll timelines are kept
   for decoration whose failure mode is "it does not move". */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.72s var(--ease-out), transform 0.72s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Words split by motion.js. Each rides its own clip so the line reads as
   printing rather than fading — the mask is what separates the two. */
.split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.split .word > span {
  display: inline-block;
  transform: translateY(110%) rotate(3deg);
  opacity: 0;
  transition:
    transform 0.95s var(--ease-out) var(--wd, 0ms),
    opacity 0.6s linear var(--wd, 0ms);
}
.split.in .word > span, .no-js .split .word > span { transform: none; opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Cards — the shared surface
   ══════════════════════════════════════════════════════════════════════════ */

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    var(--panel);
  overflow: hidden;
  isolation: isolate;
}

/* The pointer spotlight. --mx/--my are written by motion.js in a rAF loop and
   are the only per-frame JavaScript on a card; everything else the pointer
   does here is CSS reacting to those two numbers. */
.card.lit::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  background: radial-gradient(
    18rem 18rem at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--hue, var(--brand-2)) 26%, transparent),
    transparent 68%);
}
.card.lit:hover::before, .card.lit:focus-within::before { opacity: 1; }

/* The rotating hairline. Drawn on a mask so only the 1px rim shows — a
   border-image would repaint the whole box on every frame of the angle. */
.card.rim::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spin),
    transparent 0 58%,
    color-mix(in srgb, var(--hue, var(--brand-2)) 85%, transparent) 74%,
    transparent 86%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.card.rim:hover::after, .card.rim:focus-within::after {
  opacity: 1;
  animation: spin-slow 4s linear infinite;
}

/* ── 3D tilt ──────────────────────────────────────────────────────────────
   `--rx`/`--ry` come from the same rAF loop. The parent carries the
   perspective so the depth is per-card rather than per-page: a shared
   perspective origin makes cards at the edge of a grid shear. */
.tilt-stage { perspective: 1100px; }
.tilt {
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}
.tilt.tracking { transition: transform 0.09s linear; }
.tilt .pop { transform: translateZ(38px); }
.tilt .pop-sm { transform: translateZ(18px); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 7rem);
  min-height: min(94svh, 980px);
  display: flex;
  align-items: center;
}

.hero .shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero .shell { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
}

.hero h1 {
  font-size: clamp(2.7rem, 7.2vw, 5.3rem);
  font-weight: 800;
  margin: 1.5rem 0 1.4rem;
  letter-spacing: -0.048em;
}
.hero .lede {
  color: var(--dim);
  font-size: clamp(1.03rem, 1.9vw, 1.24rem);
  max-width: 34rem;
  margin-bottom: 2.2rem;
}
.hero .lede strong { color: var(--text); font-weight: 600; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
/* Full width below 520px. Wrapped, the ghost button ends up a short pill under
   a long primary one and reads as a caption rather than as the other choice. */
@media (max-width: 520px) {
  .hero-cta { display: grid; }
  .hero-cta .btn { width: 100%; }
}
.hero-note {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.83rem;
  color: var(--faint);
}
.hero-note span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-note svg { width: 13px; height: 13px; color: var(--lime); flex: none; }

/* ── The floor: a live canvas of the whole org ───────────────────────────
   Thirty-one nodes, one per agent, clustered by department. The canvas is
   drawn in motion.js; everything here is the frame around it. */
.floor {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 620px;
  margin-inline: auto;
  width: 100%;
}
.floor canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.floor .core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(96px, 15vw, 132px);
  aspect-ratio: 1;
  border-radius: 26px;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 92%, #000), color-mix(in srgb, var(--brand-2) 92%, #000));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 26px 70px -20px color-mix(in srgb, var(--brand) 85%, transparent);
  animation: core-breathe 6s var(--ease-in-out) infinite;
}
@keyframes core-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.045); }
}
.floor .core b {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: block;
}
.floor .core small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 3px;
}

/* The ring of orbiting department chips is positioned by motion.js so the
   labels never collide with the canvas nodes they belong to. */
/* The ring of department labels. motion.js re-places these against the real
   cluster angles once it has measured the box, but the six static positions
   below are the layout without it — a 60° step starting at the top, matching
   the order the canvas draws them in. A chip stack in the corner is what you
   get if this is left to JavaScript alone. */
.floor .chip {
  --hue: var(--brand-2);
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hue) 40%, transparent);
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hue) 70%, #fff);
  white-space: nowrap;
  cursor: default;
  transition: transform 0.35s var(--spring), border-color 0.3s, background 0.3s;
}
.floor .chip i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hue);
  box-shadow: 0 0 8px var(--hue);
}
.floor .chip:hover,
.floor .chip:focus-visible {
  transform: translate(-50%, -50%) scale(1.09);
  border-color: var(--hue);
  background: color-mix(in srgb, var(--hue) 16%, var(--void));
}

.floor .chip:nth-of-type(1) { left: 50%;   top: 10.5%; --hue: var(--d-marketing); }
.floor .chip:nth-of-type(2) { left: 84.2%; top: 30.2%; --hue: var(--d-support); }
.floor .chip:nth-of-type(3) { left: 84.2%; top: 69.8%; --hue: var(--d-development); }
.floor .chip:nth-of-type(4) { left: 50%;   top: 89.5%; --hue: var(--d-studios); }
.floor .chip:nth-of-type(5) { left: 15.8%; top: 69.8%; --hue: var(--d-intelligence); }
.floor .chip:nth-of-type(6) { left: 15.8%; top: 30.2%; --hue: var(--d-bureau); }
@media (max-width: 560px) { .floor .chip { font-size: 0.55rem; padding: 0.24rem 0.5rem; } }

/* ── The ticker ─────────────────────────────────────────────────────────── */
.ticker {
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  overflow: hidden;
  padding: 0.85rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker .rail {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: rail 46s linear infinite;
}
.ticker:hover .rail { animation-play-state: paused; }
@keyframes rail { to { transform: translateX(-50%); } }
.ticker .item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--faint);
  white-space: nowrap;
}
.ticker .item b { color: var(--dim); font-weight: 500; }
.ticker .item .tag {
  padding: 0.12rem 0.42rem;
  border-radius: 5px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--hue, var(--brand)) 16%, transparent);
  color: color-mix(in srgb, var(--hue, var(--brand)) 72%, #fff);
  border: 1px solid color-mix(in srgb, var(--hue, var(--brand)) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE BOX — six slabs that lift out of a cube on scroll
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The exploded stack ───────────────────────────────────────────────────
   Six plates in one isometric stack that fans apart when the section arrives.

   `--s` is the plate edge and every other number here is derived from it,
   because the three that matter are coupled: the stage has to be tall enough
   for the projected square (about 0.74 × s once rotated) PLUS the tallest
   plate's lift, or the top of the stack is clipped and the bottom overlaps
   whatever comes next.

   Two things that were wrong the first time and are worth naming:

   `.box-stack` MUST carry an explicit height. Its children are all absolute,
   so without one it computes to zero, the grid centres a zero-height box, and
   the stack renders half a section below where it was placed — over the
   legend beside it.

   The plates are labelled IN PLANE. An earlier version counter-rotated each
   label back to face the viewer, which un-rotates it out of the plate it
   belongs to: with the stack closed all six labels landed on the same few
   pixels and stacked into an unreadable smear. Rotating only on Z keeps the
   text lying on the surface — foreshortened, obviously attached to its own
   plate, and legible at every stage of the fan. */
.box-stage {
  --s: clamp(240px, 32vw, 400px);
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  min-height: calc(var(--s) * 0.74 + 320px);
  display: grid;
  place-items: center;
}
.box-stack {
  position: relative;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-40deg) translateZ(-120px);
}
.slab {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--hue) 42%, var(--line-2));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--hue) 26%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel-2) 88%, var(--hue));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hue) 12%, transparent) inset,
    0 30px 60px -40px #000;
  padding: 1.15rem 1.35rem;
  /* Bottom-left, because that is the only part of a lower plate you can see.
     The plates are offset in Z, which projects almost entirely to screen-Y, so
     each one shows a band below the plate above it — and in the plate's own
     coordinates that band is its bottom-left edge. Labelled at the top-left
     instead, five of the six names were covered by the plate on top of them. */
  display: grid;
  align-content: end;
  justify-items: start;
  transform: translateZ(calc(var(--i) * 5px));
  transition: transform 1.1s var(--ease-out) calc(var(--i) * 90ms);
}
.slab .plate {
  display: block;
  /* Z only — the plate stays in its own surface, so the text reads as painted
     on it. Counter-rotating on X as well faces it at the viewer, which lifts
     it off the plate and, with the stack closed, piles all six in one place. */
  transform: rotateZ(40deg);
  transform-origin: 0 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.72rem, 1.5vw, 0.95rem);
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--hue) 45%, #fff);
  white-space: nowrap;
}
.slab .plate small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hue) 62%, var(--faint));
  margin-top: 3px;
}

/* Class-driven, not scroll-driven. A `view()` timeline was tried here and
   removed: it needs `transition: none` to avoid fighting the transition, so
   the moment the timeline reads inactive the stack has nothing left to open
   it and sits shut. A staggered transition cannot fail that way. */
.box-stage.in .slab { transform: translateZ(calc(var(--i) * 58px + 6px)); }

.box-legend {
  display: grid;
  gap: 0.6rem;
  align-content: center;
}
.box-legend li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--spring);
}
.box-legend li:hover {
  border-color: color-mix(in srgb, var(--hue) 45%, transparent);
  background: color-mix(in srgb, var(--hue) 7%, transparent);
  transform: translateX(5px);
}
.box-legend li i { width: 10px; height: 10px; border-radius: 3px; background: var(--hue); box-shadow: 0 0 12px var(--hue); }
.box-legend li b { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.box-legend li span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); }

.box-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .box-split { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   DEPARTMENTS — the explorer
   ══════════════════════════════════════════════════════════════════════════ */

.dept-explorer {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 940px) { .dept-explorer { grid-template-columns: 1fr; } }

.dept-rail { display: grid; gap: 0.5rem; }
@media (max-width: 940px) {
  .dept-rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.6rem;
    scrollbar-width: thin;
  }
  .dept-rail .dept-tab { scroll-snap-align: start; }
}

.dept-tab {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.015);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--spring);
}
.dept-tab:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }
.dept-tab[aria-selected='true'] {
  border-color: color-mix(in srgb, var(--hue) 52%, transparent);
  background: color-mix(in srgb, var(--hue) 11%, transparent);
}
.dept-tab[aria-selected='true']::before {
  content: '';
  position: absolute;
  left: 0; top: 12%;
  width: 3px; height: 76%;
  border-radius: 0 3px 3px 0;
  background: var(--hue);
  box-shadow: 0 0 14px var(--hue);
}
.dept-tab .ic {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hue) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue) 30%, transparent);
  color: color-mix(in srgb, var(--hue) 68%, #fff);
}
.dept-tab .ic svg { width: 16px; height: 16px; }
/* `b + span`, not a bare `span`. The tab wraps its two lines in a span of its
   own and the icon is a span too, so a bare selector put the uppercase mono
   meta style on the whole label — the department names rendered in caps and
   wrapped to two lines. Only the line that follows the name is the meta. */
.dept-tab b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.93rem; letter-spacing: -0.02em; line-height: 1.25; }
.dept-tab b + span { display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }

.dept-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008)), var(--panel);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  position: relative;
  overflow: hidden;
  min-height: 470px;
}
.dept-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(36rem 22rem at 82% -8%, color-mix(in srgb, var(--hue) 17%, transparent), transparent 62%);
  transition: background 0.6s var(--ease-out);
}
.dept-panel > * { position: relative; }
.dept-panel[hidden] { display: none; }

/* Without JavaScript there is nothing to switch tabs, so five of the six
   departments — twenty-three of the thirty-one agents — would be behind
   buttons that do nothing. Stack them all instead and drop the rail: a tab
   strip that cannot switch is worse than no tab strip. */
.no-js .dept-explorer { grid-template-columns: 1fr; }
.no-js .dept-rail { display: none; }
.no-js .dept-panel[hidden] { display: block; }
.no-js .dept-panel + .dept-panel { margin-top: 1.25rem; }

.dept-panel .head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.dept-panel .head h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.dept-panel .head p { color: var(--dim); font-size: 0.98rem; margin-top: 0.6rem; max-width: 40rem; }
.dept-panel .status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.68rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lime) 34%, transparent);
  background: color-mix(in srgb, var(--lime) 11%, transparent);
  color: color-mix(in srgb, var(--lime) 76%, #fff);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dept-panel .status i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}
/* Narrow: the head stops being a row, so `margin-left: auto` strands the pill
   on its own line hard against the right edge. Put it back under the heading. */
@media (max-width: 620px) {
  .dept-panel .head { flex-direction: column-reverse; align-items: flex-start; gap: 0.9rem; }
  .dept-panel .status { margin-left: 0; }
}

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 0.75rem; margin-bottom: 1.6rem; }

.agent {
  --hue: var(--brand-2);
  position: relative;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s, transform 0.35s var(--spring);
  animation: agent-in 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes agent-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.agent:hover {
  border-color: color-mix(in srgb, var(--hue) 48%, transparent);
  background: color-mix(in srgb, var(--hue) 9%, transparent);
  transform: translateY(-3px);
}
.agent .row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
.agent .av {
  display: grid;
  place-items: center;
  width: 27px; height: 27px;
  flex: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hue) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue) 34%, transparent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--hue) 72%, #fff);
}
.agent b { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.02em; }
.agent .live {
  margin-left: auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: pulse-dot 2.6s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 260ms);
}
.agent p { font-size: 0.83rem; line-height: 1.5; color: var(--faint); }

.dept-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.dept-proof li { display: grid; grid-template-columns: 16px 1fr; gap: 0.6rem; font-size: 0.87rem; color: var(--dim); }
.dept-proof li svg { width: 15px; height: 15px; margin-top: 4px; color: color-mix(in srgb, var(--hue) 70%, #fff); }

/* ══════════════════════════════════════════════════════════════════════════
   THE PIPELINE — scroll-scrubbed
   ══════════════════════════════════════════════════════════════════════════ */

.pipe { position: relative; display: grid; gap: 0; }
.pipe .track {
  position: absolute;
  left: 27px; top: 0; bottom: 0;
  width: 2px;
  background: var(--line-2);
  overflow: hidden;
}
.pipe .track i {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--brand), var(--brand-2) 45%, var(--cyan));
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand-2) 70%, transparent);
}
@keyframes track-fill { to { transform: scaleY(1); } }
.pipe.in .track i { transition: transform 1.6s var(--ease-out); transform: scaleY(1); }

/* Same arrangement as the slabs: the class is what guarantees it fills, the
   timeline is what makes it track the scrollbar instead of running on a timer.
   Scoped to `.in` so an inactive timeline cannot leave the rule at zero. */
@supports (animation-timeline: view()) {
  html:not(.no-js) .pipe.in .track i {
    transition: none;
    animation: track-fill linear both;
    animation-timeline: view();
    animation-range: entry 62% cover 78%;
  }
}

.step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1.4rem;
  padding: 1.4rem 0;
  align-items: start;
}
.step .node {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brand-3);
  z-index: 1;
  transition: border-color 0.5s, box-shadow 0.5s, transform 0.5s var(--spring), background 0.5s;
}
.step:hover .node,
.step.in .node {
  border-color: var(--line-hot);
  background: color-mix(in srgb, var(--brand-2) 14%, var(--panel-2));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-2) 9%, transparent);
}
.step:hover .node { transform: scale(1.06); }
.step .body { padding-top: 0.4rem; }
.step h3 { font-size: 1.18rem; margin-bottom: 0.45rem; }
.step h3 em { font-style: normal; color: var(--brand-3); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; margin-left: 0.6rem; vertical-align: middle; }
.step p { color: var(--dim); font-size: 0.96rem; max-width: 46rem; }
.step .artifact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding: 0.3rem 0.6rem;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--faint);
}
.step .artifact b { color: var(--brand-3); font-weight: 500; }
@media (max-width: 600px) { .step { grid-template-columns: 44px minmax(0,1fr); gap: 1rem; } .pipe .track { left: 21px; } .step .node { width: 44px; height: 44px; border-radius: 13px; } }

/* ══════════════════════════════════════════════════════════════════════════
   THE LADDER — authority
   ══════════════════════════════════════════════════════════════════════════ */

.ladder { display: grid; gap: 0.9rem; }
.rung {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--hue) 8%, transparent), transparent 55%), rgba(255,255,255,0.015);
  overflow: hidden;
  transition: border-color 0.35s, transform 0.35s var(--spring);
}
.rung:hover { border-color: color-mix(in srgb, var(--hue) 45%, transparent); transform: translateX(6px); }
.rung .lock {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hue) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue) 32%, transparent);
  color: color-mix(in srgb, var(--hue) 74%, #fff);
}
.rung .lock svg { width: 17px; height: 17px; }
.rung b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 650; letter-spacing: -0.02em; }
.rung .what { color: var(--dim); font-size: 0.93rem; }
.rung .what strong { color: var(--text); font-weight: 600; }
.rung.final { background: linear-gradient(100deg, color-mix(in srgb, var(--rose) 13%, transparent), transparent 60%), rgba(255,255,255,0.02); }
@media (max-width: 800px) { .rung { grid-template-columns: 40px minmax(0,1fr); } .rung .what { grid-column: 1 / -1; } }

/* ══════════════════════════════════════════════════════════════════════════
   THE CONSOLE — a still of what you sign into
   ══════════════════════════════════════════════════════════════════════════ */

.console {
  border: 1px solid var(--line-2);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 60px 120px -60px #000, 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.console .bar {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.console .bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.console .bar .dot:nth-child(1) { background: #ff5f57; }
.console .bar .dot:nth-child(2) { background: #febc2e; }
.console .bar .dot:nth-child(3) { background: #28c840; }
.console .bar .addr {
  margin-left: 0.8rem;
  padding: 0.2rem 0.7rem;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--faint);
}
.console .bar .addr b { color: var(--brand-3); font-weight: 500; }

.console .body { display: grid; grid-template-columns: 210px minmax(0, 1fr) 260px; min-height: 400px; }
@media (max-width: 900px) { .console .body { grid-template-columns: 1fr; } .console .body .crew { display: none; } }

.console .side { border-right: 1px solid var(--line); padding: 1rem; display: grid; gap: 0.35rem; align-content: start; }
.console .side .nav {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 9px;
  font-size: 0.85rem;
  color: var(--faint);
  transition: background 0.25s, color 0.25s;
}
.console .side .nav svg { width: 14px; height: 14px; }
.console .side .nav.on { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-3); }
.console .side .nav .badge { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; color: var(--faint); }

.console .feed { padding: 1.2rem; display: grid; gap: 0.8rem; align-content: start; }
.console .msg { max-width: 84%; padding: 0.75rem 0.95rem; border-radius: 13px; font-size: 0.88rem; line-height: 1.55; }
.console .msg.me { justify-self: end; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-bottom-right-radius: 4px; }
.console .msg.troy { background: rgba(255,255,255,0.045); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--dim); }
.console .msg.troy b { color: var(--text); font-weight: 600; }
.console .msg .who { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-3); margin-bottom: 0.4rem; }

.console .work { display: grid; gap: 0.4rem; margin-top: 0.3rem; }
.console .work .job {
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.02);
  font-size: 0.78rem;
}
.console .work .job .meter { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.console .work .job .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--cyan)); animation: meter 2.6s var(--ease-in-out) infinite; }
@keyframes meter { 0% { width: 8%; } 60% { width: 88%; } 100% { width: 96%; } }
.console .work .job span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--faint); }

.console .crew { border-left: 1px solid var(--line); padding: 1rem; display: grid; gap: 0.45rem; align-content: start; }
.console .crew h4 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 400; margin-bottom: 0.4rem; }
.console .crew .who {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 0.55rem; align-items: center;
  padding: 0.4rem 0.5rem; border-radius: 8px; font-size: 0.8rem;
  transition: background 0.25s;
}
.console .crew .who:hover { background: rgba(255,255,255,0.035); }
.console .crew .who .av { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.58rem; background: color-mix(in srgb, var(--hue) 20%, transparent); color: color-mix(in srgb, var(--hue) 76%, #fff); }
.console .crew .who i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 7px var(--lime); }

/* ══════════════════════════════════════════════════════════════════════════
   NUMBERS
   ══════════════════════════════════════════════════════════════════════════ */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.figure {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,0.018);
  position: relative;
  overflow: hidden;
}
.figure .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(140deg, #fff, var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.figure .k { margin-top: 0.55rem; font-size: 0.87rem; color: var(--dim); }
.figure .u { font-size: 0.5em; vertical-align: super; margin-left: 2px; color: var(--brand-3); -webkit-text-fill-color: var(--brand-3); }

/* Counting with a typed integer. A registered `<integer>` is interpolable, so
   `counter-reset` can be handed the animating value and `counter()` prints it
   — the number ticks up without a JavaScript interval writing textContent
   sixty times a second, and without a layout-thrashing read on each frame.

   The rolling digits are `aria-hidden` in the markup and the real figure is on
   the parent's aria-label: generated content is not reliably announced, and a
   headline number a screen reader cannot read is not a headline number. */
.figure .n .roll { counter-reset: tally var(--count); }
.figure .n .roll::after { content: counter(tally); }
.figure.in .n .roll { animation: tally 1.9s var(--ease-out) forwards; }
@keyframes tally { to { --count: var(--to); } }
.no-js .figure .n .roll { counter-reset: tally var(--to); }

/* ══════════════════════════════════════════════════════════════════════════
   CTA + footer
   ══════════════════════════════════════════════════════════════════════════ */

.finale {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 26px;
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(40rem 24rem at 50% -20%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 68%),
    linear-gradient(180deg, var(--panel-2), var(--ink));
}
.finale::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spin), transparent 0 62%, var(--brand-2) 76%, var(--cyan) 82%, transparent 92%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  animation: spin-slow 9s linear infinite;
  pointer-events: none;
}
.finale h2 { font-size: clamp(2.1rem, 5.5vw, 3.8rem); margin-bottom: 1.2rem; }
.finale p { color: var(--dim); max-width: 34rem; margin: 0 auto 2.2rem; font-size: 1.05rem; }
.finale .hero-cta { justify-content: center; }

.foot { border-top: 1px solid var(--line); padding: 3rem 0 3.5rem; margin-top: clamp(4rem, 8vw, 7rem); }
.foot .shell { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 800px) { .foot .shell { grid-template-columns: 1fr 1fr; } }
.foot .about p { color: var(--faint); font-size: 0.87rem; margin-top: 0.9rem; max-width: 22rem; }
.foot h5 { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 400; margin: 0 0 0.9rem; }
.foot li { margin-bottom: 0.5rem; }
.foot a { color: var(--dim); font-size: 0.88rem; transition: color 0.2s; }
.foot a:hover { color: var(--brand-3); }
.foot .rule { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--faint); font-size: 0.8rem; }

/* ══════════════════════════════════════════════════════════════════════════
   AUTH — sign in and register
   ══════════════════════════════════════════════════════════════════════════ */

.auth {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
@media (max-width: 980px) { .auth { grid-template-columns: 1fr; } .auth .aside { display: none; } }

.auth .aside {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-right: 1px solid var(--line);
  display: grid;
  align-content: space-between;
  overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent 55%);
}
.auth .aside canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.75; }
.auth .aside > * { position: relative; }
.auth .aside h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.auth .aside p { color: var(--dim); max-width: 30rem; }

.auth .aside .creds { display: grid; gap: 0.55rem; margin-top: 2rem; }
.auth .aside .creds li { display: grid; grid-template-columns: 18px 1fr; gap: 0.7rem; font-size: 0.9rem; color: var(--dim); align-items: start; }
.auth .aside .creds svg { width: 16px; height: 16px; margin-top: 4px; color: var(--brand-3); }

.auth .stage {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.auth-card {
  width: min(430px, 100%);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)), var(--panel);
  box-shadow: 0 50px 90px -50px #000;
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spin), transparent 0 66%, color-mix(in srgb, var(--brand-2) 70%, transparent) 80%, transparent 90%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  animation: spin-slow 8s linear infinite;
  pointer-events: none;
}
.auth-card > * { position: relative; }

.auth-card .brandline { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.6rem; }
.auth-card h1 { font-size: 1.65rem; margin-bottom: 0.5rem; }
.auth-card .sub { color: var(--faint); font-size: 0.9rem; margin-bottom: 1.7rem; }

.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field > span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }
.field .wrap { position: relative; display: grid; }
.field input {
  width: 100%;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.95rem;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.field input::placeholder { color: #4b5468; }
.field input:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 17%, transparent);
}
.field .wrap:has(.reveal) input { padding-right: 2.9rem; }
.field .reveal {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.field .reveal:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.field .reveal svg { width: 16px; height: 16px; }

.strength { display: grid; gap: 0.35rem; margin: -0.4rem 0 1rem; }
.strength .bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength .bars i { height: 3px; border-radius: 3px; background: var(--line-2); transition: background 0.35s var(--ease-out); }
.strength small { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

.auth-msg {
  display: none;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.auth-msg.show { display: grid; grid-template-columns: 16px 1fr; }
.auth-msg svg { width: 15px; height: 15px; margin-top: 3px; }
.auth-msg.bad { border-color: color-mix(in srgb, var(--rose) 40%, transparent); background: color-mix(in srgb, var(--rose) 11%, transparent); color: #ffc4cd; }
.auth-msg.good { border-color: color-mix(in srgb, var(--lime) 40%, transparent); background: color-mix(in srgb, var(--lime) 10%, transparent); color: #d6f5a4; }
.auth-msg.info { border-color: var(--line-2); background: rgba(255,255,255,0.03); color: var(--dim); }

.auth-alt { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); text-align: center; font-size: 0.87rem; color: var(--faint); }
.auth-alt a { color: var(--brand-3); font-weight: 500; }
.auth-alt a:hover { text-decoration: underline; }
.auth-foot { margin-top: 1.6rem; text-align: center; font-size: 0.76rem; color: #4d5567; }
.auth-foot a { color: var(--faint); }
.auth-foot a:hover { color: var(--dim); }

.spinner {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.32);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   Cross-document view transitions. Chrome/Edge honour this; every other
   browser ignores the at-rule entirely and navigates normally, which is why
   nothing else on the page depends on it.
   ══════════════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.24s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 0.34s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.99); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.006); } }

.wordmark { view-transition-name: mark; }

/* ══════════════════════════════════════════════════════════════════════════
   Reduced motion — one block, and it is not a suggestion.

   Everything above is decoration on top of a page that already reads. So this
   removes the motion rather than shortening it: an animation that still runs
   at 0.01s is still a repaint, and a vestibular trigger is not a duration
   problem. The canvas checks the same query in JavaScript and paints one
   static frame.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    animation-timeline: none !important;
  }
  .reveal, .split .word > span { opacity: 1 !important; transform: none !important; }
  .pipe .track i, .masthead .progress { transform: scaleY(1) scaleX(1) !important; }
  .box-stage .slab { transform: translateZ(calc(var(--i) * 40px)) !important; }
  .tilt { transform: none !important; }
  .figure .n .roll::after { counter-reset: tally var(--to); }
  @view-transition { navigation: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   The three products, and the course behind one of them
   ══════════════════════════════════════════════════════════════════════════ */

.products {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: 2.6rem;
}

.product {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.6rem 1.5rem 1.5rem;
  text-decoration: none;
  color: inherit;
}
a.product { transition: transform 0.35s var(--ease-out); }
a.product:hover { transform: translateY(-3px); }

.product h3 {
  margin: 0;
  font: 700 1.5rem/1.15 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text);
}

.product-tag {
  align-self: flex-start;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hue, var(--brand-2)) 45%, transparent);
  background: color-mix(in srgb, var(--hue, var(--brand-2)) 12%, transparent);
  color: color-mix(in srgb, var(--hue, var(--brand-2)) 88%, white);
  font: 600 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.product-tag.soon { opacity: 0.72; }

.product-lede {
  margin: 0;
  font: 400 0.94rem/1.62 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.product-lede em { color: var(--text); font-style: normal; font-weight: 600; }

.product-points {
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.product-points li {
  position: relative;
  padding-left: 1.25rem;
  font: 400 0.85rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.product-points li::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  top: 0.55em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--hue, var(--brand-2));
}
.product-points strong { color: var(--text); font-weight: 650; }

/* Pushed to the bottom so three cards of different lengths still line their
   call to action up — a row of cards whose last line floats at three different
   heights reads as three unrelated boxes. */
.product-go {
  margin-top: auto;
  padding-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 600 0.86rem/1 'Inter', system-ui, sans-serif;
  color: color-mix(in srgb, var(--hue, var(--brand-2)) 88%, white);
}
.product-go.quiet { color: var(--faint); font-weight: 500; }
a.product:hover .product-go .arrow { transform: translateX(3px); }
.product-go .arrow { transition: transform 0.3s var(--ease-out); }


/* ── The curriculum ─────────────────────────────────────────────────────── */

.course-hero .shell { align-items: center; }
.course-feature { margin: 0; }
.course-feature figcaption {
  margin-top: 0.85rem;
  font: 400 0.84rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.course-feature figcaption b { display: block; color: var(--dim); font-weight: 600; }

/* The video container. One shape for the hero player and the episode
   thumbnails, so a locked row and a free row are the same object in two
   states rather than two different components. */
.vid {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(22rem 14rem at 50% 0%, rgba(139,92,246,0.14), transparent 70%),
    var(--panel-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid.sm { aspect-ratio: 16 / 10; width: 6.4rem; flex: none; border-radius: var(--radius-sm); }

/* Locked is drawn, not hidden. A course whose locked episodes are absent looks
   like a course with four episodes; drawn, it looks like what it is. */
.vid[data-locked] { filter: saturate(0.35); opacity: 0.72; }

.vid-badge {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.26rem 0.55rem;
  border-radius: 999px;
  background: rgba(5, 6, 12, 0.78);
  border: 1px solid var(--line-2);
  color: var(--dim);
  font: 600 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: none;
}
.vid-badge svg { width: 0.72rem; height: 0.72rem; }
.vid-badge.free { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 45%, transparent); }
.vid.sm .vid-badge { right: 50%; bottom: 50%; transform: translate(50%, 50%); padding: 0.3rem; }
.vid.sm .vid-badge svg { width: 0.85rem; height: 0.85rem; }

.courses { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; gap: 1rem; }

.course {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1.5rem 1.5rem 1.35rem;
}
.course.flagship { border-color: color-mix(in srgb, var(--brand-2) 38%, transparent); }

.course-head { display: flex; gap: 1rem; align-items: flex-start; }
.course-n {
  flex: none;
  font: 800 1.05rem/1 'Outfit', system-ui, sans-serif;
  color: var(--faint);
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.course-head h3 {
  margin: 0 0 0.4rem;
  font: 700 1.28rem/1.2 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.018em;
  color: var(--text);
}
.course-head p { margin: 0; font: 400 0.9rem/1.6 'Inter', system-ui, sans-serif; color: var(--dim); }

.course-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--faint);
  font: 600 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.course-state svg { width: 0.78rem; height: 0.78rem; }
.course-state.free { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 45%, transparent); }

.course-mods { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0; }
.course-mods span {
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--faint);
  font: 500 0.72rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.eps { list-style: none; margin: 1.15rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ep {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.ep:hover { background: rgba(255,255,255,0.022); border-color: var(--line); }
.ep b {
  flex: 1;
  font: 500 0.88rem/1.45 'Inter', system-ui, sans-serif;
  color: var(--text);
  min-width: 0;
}
.ep small { flex: none; color: var(--faint); font: 500 0.76rem/1 'Inter', system-ui, sans-serif;
            font-variant-numeric: tabular-nums; }
.ep code { font: 500 0.86em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--brand-3); }
.course.locked .ep b { color: var(--dim); }
.ep.flag b { color: var(--text); }
.ep.flag::after {
  content: 'the one nobody else can record';
  flex: none;
  color: var(--brand-3);
  font: 600 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 46rem) {
  .course-head { flex-wrap: wrap; }
  .course-state { order: -1; margin-left: auto; }
  .ep { flex-wrap: wrap; }
  .vid.sm { width: 5rem; }
  .ep.flag::after { display: none; }
}

/* A button inside a product card is the card's own call to action, so it sits
   at the bottom like `.product-go` and does not stretch to the card's width —
   a flex column stretches its children by default and a full-bleed button
   reads as a banner rather than a control. */
.product > .btn { margin-top: auto; align-self: flex-start; }


/* ── The full curriculum view ───────────────────────────────────────────── */

/* An episode is title + the trap under it. The trap is why the row is two
   lines: a list of titles is a table of contents, and the line under each one
   is the thing somebody is actually shopping for. */
.ep-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ep-t b {
  font: 600 0.9rem/1.4 'Inter', system-ui, sans-serif;
  color: var(--text);
}
.ep-t em {
  font-style: normal;
  font: 400 0.8rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.ep-t em strong { color: var(--dim); font-weight: 600; }
.ep-t code, .course-head code {
  font: 500 0.88em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--brand-3);
}

.course-state.open { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 42%, transparent); }
.course-state.writing { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 42%, transparent); }

/* Not recorded yet. Drawn as an empty frame rather than a lock, because it is
   not withheld — it does not exist, and saying so is the whole honesty of the
   page. */
.vid.sm[data-soon] {
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.02) 0 6px, transparent 6px 12px), var(--ink);
  border-style: dashed;
  opacity: 0.6;
}
.ep:has([data-soon]) .ep-t b { color: var(--dim); }
.ep:has([data-soon]) small { opacity: 0.5; }

.eps.clips .ep-t b { font-weight: 550; }
.clips-more {
  margin: 0.9rem 0 0;
  padding-left: 0.6rem;
  font: 400 0.83rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.clips-more a { color: var(--brand-3); }

/* The recommended order. Numbered by course id, not by position — that is the
   point of the section, so the number must be the course's own. */
.path { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.path li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
}
.path li span {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--line-2);
  color: var(--brand-3);
  font: 700 0.76rem/1 'Outfit', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.path li b { font: 600 0.95rem/1.4 'Inter', system-ui, sans-serif; color: var(--text); }
.path li em {
  font-style: normal;
  margin-left: auto;
  text-align: right;
  font: 400 0.82rem/1.4 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.path li.lib { border-style: dashed; }

@media (max-width: 40rem) {
  .path li { flex-wrap: wrap; }
  .path li em { margin-left: 0; width: 100%; text-align: left; }
}


/* ── The paste-prompt, which is the install ─────────────────────────────── */

.paste-block {
  margin: 1.15rem 0 0;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--brand-2) 30%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 7%, transparent), transparent 60%),
    var(--ink);
}
.paste-lab {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--brand-3);
  font: 600 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* Selectable, wrapping, and monospace: this block exists to be copied, so it
   must never need a horizontal scroll to read the end of a line. */
.paste-block pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: 400 0.82rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--dim);
  user-select: all;
}
.paste-note {
  margin: 0.85rem 0 0;
  font: 400 0.82rem/1.55 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.paste-note strong { color: var(--dim); font-weight: 600; }

.course.start-course { border-color: color-mix(in srgb, var(--brand-2) 34%, transparent); }


/* ══════════════════════════════════════════════════════════════════════════
   The course page — accordions, tiers, discussion
   ══════════════════════════════════════════════════════════════════════════ */

.band.tight { padding-top: 0; }
.shell.narrow { max-width: min(820px, 100% - 3rem); }
.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;
}

/* ── Accordions ─────────────────────────────────────────────────────────── */

.accs { display: grid; gap: 0.75rem; margin-top: 2.4rem; }

.acc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.acc[open] { border-color: var(--line-2); }
.acc.flagship { border-color: color-mix(in srgb, var(--brand-2) 34%, transparent); }

/* The marker is drawn by the chevron, so remove the native one in both
   engines — Safari uses the pseudo-element, everything else the property. */
.acc > summary { list-style: none; cursor: pointer; }
.acc > summary::-webkit-details-marker { display: none; }

.acc > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  transition: background 0.25s var(--ease-out);
}
.acc > summary:hover { background: rgba(255, 255, 255, 0.022); }
.acc > summary:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }

.acc-n {
  flex: none;
  font: 800 1.05rem/1 'Outfit', system-ui, sans-serif;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.acc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.22rem; }
.acc-t b {
  font: 700 1.18rem/1.25 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.015em;
  color: var(--text);
}
.acc-t em {
  font-style: normal;
  font: 400 0.86rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.acc-meta { flex: none; display: inline-flex; align-items: center; gap: 0.7rem; }
.acc-meta .pill {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--faint);
  font: 600 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.acc-meta .pill.writing { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 42%, transparent); }
.acc-meta .pill svg { width: 0.72rem; height: 0.72rem; }
.acc-meta .chev {
  width: 1.1rem; height: 1.1rem; flex: none; color: var(--faint);
  transition: transform 0.3s var(--ease-out);
}
.acc[open] .acc-meta .chev { transform: rotate(180deg); }

.acc-body { padding: 0 1.3rem 1.3rem; }

@media (max-width: 44rem) {
  .acc > summary { flex-wrap: wrap; gap: 0.6rem 0.8rem; padding: 1rem; }
  .acc-t { order: 3; flex-basis: 100%; }
  .acc-meta { margin-left: auto; }
  .acc-body { padding: 0 1rem 1rem; }
}

/* The ten that matter, marked inside courses that contain more than ten. */
.star { color: var(--amber); }
.ep.star .ep-t b::after {
  content: '★';
  margin-left: 0.45rem;
  color: var(--amber);
  font-size: 0.82em;
}

/* ── Pricing ────────────────────────────────────────────────────────────── */

.tiers {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  margin-top: 2.5rem;
  align-items: stretch;
}
.tier { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem 1.4rem 1.4rem; }
.tier.featured { transform: none; }
@media (min-width: 68rem) { .tier.featured { transform: translateY(-0.6rem); } }

.tier h3 {
  margin: 0;
  font: 700 1.28rem/1.2 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.018em;
  color: var(--text);
}
.tier-tag {
  align-self: flex-start;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hue, var(--brand-2)) 45%, transparent);
  background: color-mix(in srgb, var(--hue, var(--brand-2)) 12%, transparent);
  color: color-mix(in srgb, var(--hue, var(--brand-2)) 88%, white);
  font: 600 0.64rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tier-price { margin: 0.1rem 0 0; display: flex; align-items: baseline; gap: 0.35rem; }
.tier-price b {
  font: 800 2.1rem/1 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tier-price small { font: 500 0.82rem/1 'Inter', system-ui, sans-serif; color: var(--faint); }
.tier-lede { margin: 0; font: 400 0.86rem/1.55 'Inter', system-ui, sans-serif; color: var(--dim); }

.tier-points { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.tier-points li {
  display: flex;
  gap: 0.5rem;
  font: 400 0.82rem/1.45 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.tier-points li svg {
  flex: none; width: 0.85rem; height: 0.85rem; margin-top: 0.22em;
  color: var(--hue, var(--brand-2));
}
.tier-points b { color: var(--text); font-weight: 650; }

.tier > .btn { margin-top: auto; align-self: flex-start; }
.tier-fine {
  margin: 0.7rem 0 0;
  font: 400 0.75rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.tiers-note {
  margin: 1.4rem 0 0;
  text-align: center;
  font: 400 0.86rem/1.6 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.tiers-note b { color: var(--text); font-weight: 650; }

/* ── Discussion ─────────────────────────────────────────────────────────── */

.topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.2rem; }
.topic {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  font: 500 0.83rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.topic:hover { color: var(--text); border-color: var(--line-2); }
.topic.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-2) 50%, transparent);
  background: color-mix(in srgb, var(--brand-2) 10%, transparent);
}
.topic i {
  font-style: normal;
  color: var(--faint);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.topic code { font: 500 0.9em/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

.composer {
  margin-top: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1rem 1.1rem;
}
.composer textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: none;
  background: transparent;
  color: var(--text);
  font: 400 0.9rem/1.6 'Inter', system-ui, sans-serif;
}
.composer textarea::placeholder { color: var(--faint); }
.composer textarea:focus { outline: none; }
.composer-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.composer-foot span { flex: 1; font: 400 0.76rem/1.5 'Inter', system-ui, sans-serif; color: var(--faint); }
.composer-foot b { color: var(--dim); font-weight: 600; }

.thread { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.thread.nested {
  margin: 0.9rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
  gap: 0.7rem;
}

.cmt {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.thread.nested .cmt { background: var(--ink); }

.votes { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.votes b {
  font: 700 0.82rem/1 'Inter', system-ui, sans-serif;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.vote {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.vote svg { width: 0.95rem; height: 0.95rem; }
.vote:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.vote.up.on { color: var(--lime); }
.vote.down.on { color: var(--rose); }

.cmt-body { flex: 1; min-width: 0; }
.cmt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
  font: 400 0.78rem/1.4 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.cmt-head b { color: var(--text); font-weight: 650; font-size: 0.86rem; }
.cmt-head time { color: var(--faint); }
.cmt-head .on a { color: var(--brand-3); text-decoration: none; }
.cmt-head .on a:hover { text-decoration: underline; }
.cmt-head .tag {
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font: 600 0.63rem/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.cmt-head .tag.op { color: var(--brand-3); border-color: color-mix(in srgb, var(--brand-2) 45%, transparent); }

.cmt-body > p { margin: 0 0 0.5rem; font: 400 0.88rem/1.62 'Inter', system-ui, sans-serif; color: var(--dim); }
.cmt-body > p:last-of-type { margin-bottom: 0; }
.cmt-body code { font: 500 0.88em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--brand-3); }
.cmt-body pre {
  margin: 0.6rem 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--void);
  overflow-x: auto;
  font: 400 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--dim);
}
.cmt-body pre code { color: inherit; }

.cmt-actions { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
.cmt-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
  font: 600 0.76rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.cmt-actions button:hover { background: rgba(255, 255, 255, 0.045); color: var(--text); }
.cmt-actions svg { width: 0.82rem; height: 0.82rem; }

.thread-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 1.3rem 0 0;
}
.thread-more span { font: 400 0.82rem/1.5 'Inter', system-ui, sans-serif; color: var(--faint); }

@media (max-width: 40rem) {
  .cmt { padding: 0.85rem 0.9rem; gap: 0.7rem; }
  .thread.nested { padding-left: 0.7rem; }
}


/* ── The ten ────────────────────────────────────────────────────────────── */

ol.ten { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; gap: 1.1rem; }

.ten-item {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.25s var(--ease-out);
}
.ten-item:hover { border-color: var(--line-2); }

.ten-item .vid { width: 100%; }

.ten-t { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding-top: 0.15rem; }
.ten-n {
  font: 800 0.82rem/1 'Outfit', system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: var(--brand-3);
  font-variant-numeric: tabular-nums;
}
.ten-t b {
  font: 700 1.32rem/1.22 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.ten-t em {
  font-style: normal;
  font: 400 0.92rem/1.6 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.ten-t em strong { color: var(--text); font-weight: 620; }
.ten-t code {
  font: 500 0.9em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--brand-3);
}
.ten-t small {
  margin-top: auto;
  padding-top: 0.25rem;
  font: 500 0.78rem/1 'Inter', system-ui, sans-serif;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.ten-t small.soon { color: var(--amber); }

/* Not recorded: a dashed empty frame, because it is not withheld — it does not
   exist, and saying so is the whole honesty of the page. */
.ten-item .vid[data-soon] {
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.02) 0 7px, transparent 7px 14px), var(--ink);
  border-style: dashed;
  opacity: 0.65;
}

@media (max-width: 52rem) {
  .ten-item { grid-template-columns: 1fr; gap: 1rem; }
  .ten-t b { font-size: 1.18rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Plans & pricing
   ══════════════════════════════════════════════════════════════════════════ */

.pricing-hero { padding-bottom: 1rem; }
.pricing-hero .shell { display: block; }

/* Product tabs. Sticky under the masthead so the choice stays reachable while
   somebody is halfway down a long plan comparison. */
.ptabs-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.9rem 0;
  background: color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.ptabs { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }

.ptab {
  flex: 1 1 0;
  min-width: 11rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ptab:hover { border-color: var(--line-2); color: var(--text); }
.ptab.active {
  border-color: color-mix(in srgb, var(--brand-2) 55%, transparent);
  background: color-mix(in srgb, var(--brand-2) 11%, transparent);
  color: var(--text);
}
.ptab svg { width: 1.15rem; height: 1.15rem; flex: none; }
.ptab span { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.ptab b { font: 650 0.95rem/1.2 'Inter', system-ui, sans-serif; }
.ptab em {
  font-style: normal;
  font: 400 0.75rem/1.2 'Inter', system-ui, sans-serif;
  color: var(--faint);
}

/* Billing term */
.terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.8rem 0 0;
  padding: 0.32rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  width: fit-content;
}
.term {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: 500 0.85rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.term:hover { color: var(--text); }
.term.active { background: var(--brand); color: #fff; font-weight: 600; }
.term i {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lime);
}
.term.active i { color: rgba(255, 255, 255, 0.82); }

/* Plans */
.plans {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  margin-top: 2.4rem;
  align-items: stretch;
}
.plans.two { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); max-width: 52rem; }

.plan { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.6rem 1.45rem 1.45rem; }
@media (min-width: 70rem) { .plan.featured { transform: translateY(-0.6rem); } }

.plan-ic {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--hue, var(--brand-2)) 38%, transparent);
  background: color-mix(in srgb, var(--hue, var(--brand-2)) 12%, transparent);
  color: color-mix(in srgb, var(--hue, var(--brand-2)) 90%, white);
  margin-bottom: 0.3rem;
}
.plan-ic svg { width: 1.2rem; height: 1.2rem; }

.plan-tag {
  align-self: flex-start;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hue, var(--brand-2)) 45%, transparent);
  background: color-mix(in srgb, var(--hue, var(--brand-2)) 12%, transparent);
  color: color-mix(in srgb, var(--hue, var(--brand-2)) 88%, white);
  font: 600 0.64rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plan-tag.soon { opacity: 0.75; }

.plan h3 {
  margin: 0.15rem 0 0;
  font: 700 1.32rem/1.2 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text);
}
.plan-price { margin: 0.15rem 0 0; display: flex; align-items: baseline; gap: 0.35rem; }
.plan-price b {
  font: 800 2.3rem/1 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plan-price small { font: 500 0.84rem/1 'Inter', system-ui, sans-serif; color: var(--faint); }
.plan-sub {
  margin: 0;
  font: 400 0.83rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.plan-sub b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-term {
  margin: 0;
  font: 600 0.74rem/1.4 'Inter', system-ui, sans-serif;
  color: var(--lime);
}
.plan-term[hidden] { display: none; }
.plan-lede { margin: 0.35rem 0 0; font: 400 0.87rem/1.58 'Inter', system-ui, sans-serif; color: var(--dim); }
.plan-lede strong { color: var(--text); font-weight: 620; }
.plan-lede em { font-style: normal; color: var(--text); }

.plan-points { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.plan-points li {
  display: flex;
  gap: 0.55rem;
  font: 400 0.83rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.plan-points li svg {
  flex: none; width: 0.85rem; height: 0.85rem; margin-top: 0.25em;
  color: var(--hue, var(--brand-2));
}
.plan-points b { color: var(--text); font-weight: 650; }

.plan > .btn { margin-top: auto; align-self: flex-start; }

.plans-note {
  margin: 1.6rem 0 0;
  padding: 0.95rem 1.1rem;
  border-left: 3px solid var(--amber);
  font: 400 0.86rem/1.6 'Inter', system-ui, sans-serif;
  color: var(--dim);
  max-width: 62ch;
}
.plans-note b { color: var(--text); font-weight: 650; }

/* Add-ons */
.addons-head { margin-top: 3.6rem; }
.addons { display: grid; gap: 0.7rem; margin-top: 2rem; }

.addon {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.22s, background 0.22s;
}
.addon:hover { border-color: var(--line-2); }
.addon.on {
  border-color: color-mix(in srgb, var(--brand-2) 50%, transparent);
  background: color-mix(in srgb, var(--brand-2) 7%, transparent);
}
.addon input { position: absolute; opacity: 0; pointer-events: none; }

.addon-box {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--ink);
  color: transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.addon-box svg { width: 0.8rem; height: 0.8rem; }
.addon.on .addon-box { background: var(--brand); border-color: var(--brand); color: #fff; }
.addon input:focus-visible + .addon-box { outline: 2px solid var(--brand-2); outline-offset: 2px; }

.addon-t { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.addon-t b { font: 650 1rem/1.3 'Inter', system-ui, sans-serif; color: var(--text); }
.addon-t b i { font-style: normal; color: var(--faint); font-weight: 500; }
.addon-t em {
  font-style: normal;
  font: 400 0.82rem/1.55 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.addon-p { display: flex; align-items: baseline; gap: 0.2rem; white-space: nowrap; }
.addon-p b {
  font: 700 1.15rem/1 'Outfit', system-ui, sans-serif;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.addon-p small { font: 500 0.74rem/1 'Inter', system-ui, sans-serif; color: var(--faint); }

/* Running total */
.total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--brand-2) 34%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 70%),
    var(--panel);
}
.total-lab {
  display: block;
  font: 600 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.35rem;
}
.total-n { margin: 0; display: flex; align-items: baseline; gap: 0.3rem; }
.total-n b {
  font: 800 2.1rem/1 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.total-n small { font: 500 0.82rem/1 'Inter', system-ui, sans-serif; color: var(--faint); }
.total-note {
  flex: 1;
  min-width: 14rem;
  margin: 0;
  font: 400 0.82rem/1.55 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.total > .btn { margin-left: auto; }

/* FAQ reuses the accordion, without the numbering */
.faq { display: grid; gap: 0.6rem; margin-top: 2rem; }
.faq .acc > summary { padding: 1rem 1.15rem; }
.faq .acc-t b { font: 650 1rem/1.35 'Inter', system-ui, sans-serif; }
.faq .acc-body { padding: 0 1.15rem 1.15rem; }
.faq .acc-body p { margin: 0; font: 400 0.87rem/1.62 'Inter', system-ui, sans-serif; color: var(--dim); }
.faq .acc-body b { color: var(--text); font-weight: 650; }
.faq .chev { transition: transform 0.3s var(--ease-out); }
.faq .acc[open] .chev { transform: rotate(90deg); }

@media (max-width: 44rem) {
  .ptab { min-width: 9.5rem; padding: 0.65rem 0.8rem; }
  .ptab em { display: none; }
  .terms { width: 100%; justify-content: space-between; }
  .term { flex: 1; justify-content: center; padding: 0.5rem 0.5rem; }
  .addon { grid-template-columns: auto 1fr; gap: 0.75rem 0.9rem; }
  .addon-p { grid-column: 2; }
  .total > .btn { margin-left: 0; width: 100%; justify-content: center; }
}


/* "Do I need a box?" — the question the two non-core tabs get asked first, so
   it is answered on the tab rather than in an FAQ somebody scrolls past. */
.dep {
  margin-top: 1.6rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--lime) 30%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--lime) 5%, var(--panel));
  max-width: 64ch;
}
.dep.needs {
  border-color: color-mix(in srgb, var(--amber) 32%, transparent);
  background: color-mix(in srgb, var(--amber) 5%, var(--panel));
}
.dep-lab {
  display: block;
  margin-bottom: 0.5rem;
  font: 600 0.68rem/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lime);
}
.dep.needs .dep-lab { color: var(--amber); }
.dep p { margin: 0; font: 400 0.87rem/1.62 'Inter', system-ui, sans-serif; color: var(--dim); }
.dep p b { color: var(--text); font-weight: 650; }
.dep-plus {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}


/* ══════════════════════════════════════════════════════════════════════════
   The gap — what the category does, and the half it leaves
   ══════════════════════════════════════════════════════════════════════════ */

.gap-grid {
  margin-top: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gap-row {
  display: grid;
  grid-template-columns: 9rem 11rem 13rem 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1.05rem 1.3rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.gap-row:last-child { border-bottom: none; }
.gap-row > b {
  font: 700 0.95rem/1.3 'Inter', system-ui, sans-serif;
  color: var(--text);
}
.gap-who {
  font: 400 0.82rem/1.4 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.gap-does {
  font: 500 0.84rem/1.4 'Inter', system-ui, sans-serif;
  color: var(--dim);
}
.gap-left {
  font: 400 0.84rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.gap-left b { color: var(--dim); font-weight: 600; }

/* The last row is the argument, so it is drawn as one rather than as a fourth
   competitor with a nicer sentence. */
.gap-row.us {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent 60%),
    var(--panel-2);
  border-top: 1px solid color-mix(in srgb, var(--brand-2) 40%, transparent);
}
.gap-row.us > b { color: var(--brand-3); }
.gap-row.us .gap-does, .gap-row.us .gap-left { color: var(--dim); }
.gap-row.us .gap-left b { color: var(--text); }

@media (max-width: 62rem) {
  .gap-row { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
  .gap-row > b { grid-column: 1; }
  .gap-who { grid-column: 2; text-align: right; }
  .gap-does, .gap-left { grid-column: 1 / -1; }
  .gap-does { color: var(--text); font-weight: 600; }
}

/* The loop */
.loop {
  margin-top: 2.2rem;
  padding: 1.6rem 1.7rem;
  border: 1px solid color-mix(in srgb, var(--brand-2) 32%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 60%),
    var(--panel);
}
.loop-lab {
  display: block;
  margin-bottom: 1.2rem;
  font: 600 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-3);
}
.loop-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: loop;
  display: grid;
  gap: 0.9rem;
}
.loop-steps li {
  counter-increment: loop;
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
}
.loop-steps li::before {
  content: counter(loop);
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-2) 45%, transparent);
  background: var(--ink);
  color: var(--brand-3);
  font: 700 0.78rem/1 'Outfit', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  align-self: start;
}
.loop-steps b { font: 650 0.98rem/1.35 'Inter', system-ui, sans-serif; color: var(--text); }
.loop-steps em {
  grid-column: 2;
  font-style: normal;
  font: 400 0.85rem/1.55 'Inter', system-ui, sans-serif;
  color: var(--faint);
}
.loop-steps em b { color: var(--dim); font-weight: 600; font-size: inherit; }
.loop-steps code {
  font: 500 0.88em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--brand-3);
}
.loop-note {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font: 400 0.92rem/1.6 'Inter', system-ui, sans-serif;
  color: var(--dim);
  max-width: 58ch;
}
.loop-note b { color: var(--text); font-weight: 650; }

@media (max-width: 40rem) {
  .loop { padding: 1.3rem 1.1rem; }
  .loop-steps li { grid-template-columns: 1.6rem 1fr; }
}


.addons-note {
  margin: 1rem 0 0;
  padding-left: 0.2rem;
  font: 400 0.82rem/1.6 'Inter', system-ui, sans-serif;
  color: var(--faint);
  max-width: 64ch;
}
.addons-note b { color: var(--dim); font-weight: 600; }