/* ════════════════════════════════════════════════════════════════
   MARKETING — local styles only.
   All colour, spacing, type, and motion comes from the design
   system tokens loaded above. We just compose the layouts here.
   ════════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--fg-strong);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
  transition: color var(--dur-slow) var(--ease-std);
  /* Background composed in one layer:
       1. Soft acid radial wash anchored top-right (only visible
          at the top of the page since it fades to transparent).
       2. Paper grain SVG noise tile (240×240, 8% opacity).
       3. Solid surface color underneath.
     All on the body itself so it scrolls naturally with the page
     and behaves predictably in full-page screenshots.
     (Previously these were on `position: fixed` pseudo-elements,
     which iOS Safari renders incorrectly when taking a full-page
     capture — the fixed layer shows once at the top and the rest
     of the long screenshot is missing it.) */
  background:
    radial-gradient(ellipse 80vw 50vh at 100% 0%, rgba(221, 235, 42, 0.10), transparent 60%) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='luminanceToAlpha'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.08'/></svg>") 0 0/240px 240px repeat,
    var(--bg);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: inherit; }
p { line-height: var(--lh-body); }
strong { font-weight: var(--fw-semibold); }

/* .page owns HORIZONTAL padding only.
   .sect / .hero / .sect-bleed own VERTICAL padding.
   Using longhand properties on both prevents shorthand collisions —
   if either rule used `padding: <v> <h>` shorthand, it would zero
   out the other axis from the sibling rule. (This was the real
   cause of the "no margins on mobile" bug: .sect's shorthand was
   wiping .page's horizontal padding for every <section class="sect page">.) */
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--sp-12);
  padding-right: var(--sp-12);
}
@media (max-width: 900px) {
  .page { padding-left: var(--sp-8); padding-right: var(--sp-8); }
}
@media (max-width: 540px) {
  .page { padding-left: var(--sp-8); padding-right: var(--sp-8); }
}
@media (max-width: 380px) {
  .page { padding-left: var(--sp-7); padding-right: var(--sp-7); }
}

/* ─── Dark section override ─────────────────────────────────────
   Any section tagged data-theme="dark" rebinds the design system
   semantic tokens (handled by the design system itself). We just
   make sure the section paints its own background. */
[data-theme="dark"] {
  background: var(--bg);
  color: var(--fg-strong);
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — slim 56px, sticky, frosted
   Override the design-system .topbar (which uses grid) with flex
   so we can place the wordmark on the left and the CTA on the right
   without double-padding.
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-12) !important;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-faint);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
@media (max-width: 900px) { .topbar { padding: 0 var(--sp-8) !important; } }
@media (max-width: 540px) {
  .topbar { height: 52px; padding: 0 var(--sp-8) !important; }
}
@media (max-width: 380px) {
  .topbar { padding: 0 var(--sp-7) !important; }
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-strong);
}
.mark svg { width: 16px; height: 16px; }
.mark svg path { fill: var(--fg-strong); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  padding: 8px 14px 8px 16px;
  background: var(--_acid);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.nav-cta:hover { transform: translateY(-1px); background: var(--fg-strong); color: var(--bg); }
.nav-cta svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════════
   SECTION PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */
/* Vertical-only padding using longhand so .page's horizontal
   padding survives on <section class="sect page"> combinations. */
.sect { padding-top: 96px; padding-bottom: 96px; position: relative; }
@media (max-width: 900px) { .sect { padding-top: 72px; padding-bottom: 72px; } }
@media (max-width: 540px) { .sect { padding-top: 56px; padding-bottom: 56px; } }

/* Full-bleed section (used for dark sections so the dark bg
   extends edge-to-edge, while inner .page constrains content). */
.sect-bleed { padding-top: 96px; padding-bottom: 96px; position: relative; }
@media (max-width: 900px) { .sect-bleed { padding-top: 72px; padding-bottom: 72px; } }
@media (max-width: 540px) { .sect-bleed { padding-top: 56px; padding-bottom: 56px; } }
/* Tight variant — used by the pivot section where the content
   is just a single statement, doesn't need full section breathing room. */
.sect-bleed--tight { padding-top: 80px; padding-bottom: 88px; }
@media (max-width: 900px) { .sect-bleed--tight { padding-top: 64px; padding-bottom: 72px; } }
@media (max-width: 540px) { .sect-bleed--tight { padding-top: 48px; padding-bottom: 56px; } }

/* Section eyebrow reads as a CHAPTER BREAK — the number is large,
   a long horizontal rule signals "new section starts here",
   and a generous bottom margin separates it from the headline.
   Each section should feel like a new page in a book. */
.section-eye {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  /* Spacing note: .page is a flex column with gap (sp-10 desktop,
     sp-8 mobile). That gap already creates breathing room below
     the eyebrow. We add a small margin-bottom on top of that for
     a clean chapter-break feel, but stay measured so the title
     doesn't drift too far from the rule. */
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-2);
  width: 100%;
}
.section-eye .num {
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-size: 2em;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* The rule is the chapter break — fills the remaining row. */
.section-eye .bar {
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 60px;
}
[data-theme="dark"] .section-eye .bar { background: rgba(255,255,255,0.18); }
@media (max-width: 768px) {
  .section-eye { margin-bottom: var(--sp-3); padding-top: var(--sp-2); }
}
@media (max-width: 540px) {
  .section-eye {
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
    padding-top: var(--sp-1);
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .section-eye .num { font-size: 1.6em; }
  .section-eye .bar { min-width: 32px; }
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--fg-strong);
  max-width: 20ch;
}
/* Quieter emphasis — no italic, no highlight.
   Inherit weight & style; let the words carry on their own. */
.section-title .accent { color: var(--fg-strong); }
.section-title .stroke {
  -webkit-text-stroke: 1.4px var(--fg-strong);
  color: transparent;
  font-style: italic;
  font-weight: var(--fw-semibold);
}

.section-deck {
  max-width: 60ch;
  font-size: var(--fs-17);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  margin-top: var(--sp-6);
}
.section-deck strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }

@media (max-width: 540px) {
  .section-title { font-size: clamp(30px, 8vw, 44px); }
  .section-deck { font-size: var(--fs-15); margin-top: var(--sp-5); }
}

/* ═══════════════════════════════════════════════════════════════
   00 · HERO — light, leads the page
   ═══════════════════════════════════════════════════════════════ */
/* Vertical-only padding (longhand). Horizontal comes from .page.
   Hero fills the viewport on every breakpoint so the section below
   (01 — The job today) doesn't peek above the fold. The flex column
   with space-between anchors the brand+headline to the top and the
   deck+CTA to the bottom of the viewport — feels intentional. */
.hero {
  position: relative;
  padding-top: 88px;
  padding-bottom: 96px;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
}
/* Title + tagline anchored at the TOP of the hero.
   Foot (deck + CTA) anchored at the BOTTOM via margin-top: auto
   on the foot's main rule below.
   The big middle space holds the watermark + intentional negative
   space — the page feels composed, not empty. */
@media (max-width: 768px) {
  .hero { padding-top: 56px; padding-bottom: 64px; min-height: calc(100svh - 52px); }
}
@media (max-width: 540px) {
  .hero { padding-top: 56px; padding-bottom: 64px; min-height: calc(100svh - 52px); }
}

/* ── HERO META ROW — editorial issue/status header ──
   Magazine-spread feel. Sits at the very top of the hero below
   the topbar, in mono uppercase. The acid pulse on the status
   dot is the page's single piece of "alive" motion. */
.hero-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  position: relative;
  z-index: 1;
}
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--_acid);
  animation: hero-status-pulse 1.8s ease-in-out infinite;
}
@keyframes hero-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-status-dot { animation: none; }
}
@media (max-width: 540px) {
  .hero-meta-row { font-size: 10px; letter-spacing: 0.14em; }
  .hero-status-dot { width: 6px; height: 6px; }
}

/* ── HERO TITLE — "Day to Day." as the dominant title ──
   Upright extrabold (no italic — italic reads as 2010s startup).
   Display weight does the confidence work. Acid dot at the end is
   the only color moment in the typography. */
.hero-title {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(64px, 11vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  color: var(--fg-strong);
  position: relative;
  z-index: 1;
  margin: 0;
}
.hero-title .dot { color: var(--_acid); }

/* ── HERO TAGLINE — value prop, immediately under title ──
   No big gap. The two read as one typographic block. Forced to
   wrap onto two lines for editorial rhythm via max-width. */
.hero-tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  max-width: 16ch;
  margin: clamp(14px, 1.4vw, 22px) 0 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 540px) {
  .hero-title { font-size: clamp(56px, 16vw, 88px); }
  .hero-tagline { font-size: clamp(20px, 5.4vw, 26px); margin-top: var(--sp-3); }
}

/* ── HERO MARQUEE — auto-scrolling category list ──
   The music-industry signal. Reads like a vinyl track listing or
   a tour poster: the things Day to Day actually covers, scrolling
   past slowly. Pauses on hover so a reader can scan. Edges fade
   via mask so it feels infinite. */
.hero-bottom {
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.hero-rule {
  height: 1px;
  width: 100%;
  background: var(--_acid);
  opacity: 0.85;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.hero-marquee-wrap {
  width: 100%;
  overflow: hidden;
  margin-bottom: clamp(40px, 6vw, 72px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.hero-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: hero-marquee 48s linear infinite;
  will-change: transform;
}
.hero-marquee:hover .hero-marquee-track,
.hero-marquee-track:hover {
  animation-play-state: paused;
}
.hero-marquee-list {
  display: inline-block;
  padding-right: 0.6em;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.015em;
  color: var(--fg);
}
.hero-marquee-list .sep {
  display: inline-block;
  margin: 0 0.6em;
  color: var(--fg-faint);
  font-weight: var(--fw-regular);
}
@keyframes hero-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track { animation: none; }
}
@media (max-width: 540px) {
  .hero-marquee-list { font-size: clamp(16px, 5vw, 22px); }
  .hero-marquee-wrap { margin-bottom: var(--sp-7); }
}

/* Watermark removed in favor of the editorial marquee + meta row.
   The brand identity now comes from: topbar mark + huge upright
   title + scrolling category list. No more decorative corner blob. */


/* Hero foot — deck + CTA. Sits inside .hero-bottom which is the
   flex-column hero's bottom anchor. No own border or top-margin;
   the acid rule + marquee above provide the visual separation. */
.hero-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 540px) {
  .hero-foot { gap: var(--sp-6); }
}

.hero-deck {
  max-width: 48ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: var(--lh-body);
  color: var(--fg);
}

.btn-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0 26px;
  height: 52px;
  background: var(--_acid);
  color: var(--fg-strong);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  line-height: 1;
  border-radius: var(--r-md);
  transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.btn-block:hover { transform: translateY(-2px); background: var(--fg-strong); color: var(--bg); }
.btn-block svg {
  width: 16px; height: 16px;
  transition: transform var(--dur-base) var(--ease-std);
}
.btn-block:hover svg { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════
   02 · CHAOS — bubbles, the manager's role is bigger
   ═══════════════════════════════════════════════════════════════ */
/* Chaos as TYPE, not illustration.
   The right column is a vertical wall of fragments — file names,
   voicenote durations, sticky notes, overdue alerts — set in
   mixed sizes, weights, and styles. Reads like a poster collage
   of "everything the manager dealt with today" rather than a
   set of rotated UI cards. More editorial, more confident. */
.chaos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.chaos-head { max-width: 100%; margin-bottom: 0; }
#chaos .section-title {
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.02;
  max-width: 18ch;
}
#chaos .section-deck { max-width: 46ch; }

.chaos-wall {
  font-family: var(--font-display);
  color: rgba(0, 0, 0, 0.42);
  line-height: 1.25;
  letter-spacing: -0.02em;
  column-gap: clamp(20px, 2.6vw, 44px);
  /* The wall is supporting evidence — the headline on the left
     leads. We desaturate the default fragment color so the wall
     reads as ambient context. The sticky note and the alert lines
     keep their full color (overrides below). */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
/* Default frag inherits the muted color. Then re-punch the two
   fragments that should still grab the eye. */
.chaos-wall .frag.alert  { color: rgba(230, 43, 122, 0.85); }
.chaos-wall .frag.sticky { color: var(--fg-strong); }
.chaos-wall .row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 0.6em;
  padding: 0.18em 0;
}
.chaos-wall .row.r-r { justify-content: flex-end; }
.chaos-wall .row.r-c { justify-content: center; }

/* Fragment treatments — pure typography, no boxes. */
.frag {
  display: inline-block;
  transform: rotate(var(--rot, 0deg));
  transform-origin: center;
}
/* Capped at "big" — no huge fragments. The wall supports the
   headline on the left, doesn't compete with it. */
.frag.huge { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.frag.big  { font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.frag.mid  { font-size: clamp(15px, 1.5vw, 18px); font-weight: 500; }
.frag.small{ font-size: clamp(13px, 1vw, 15px); font-weight: 500; color: var(--fg-muted); }
.frag.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }
.frag.italic { font-style: italic; font-weight: 500; }
.frag.stroke {
  -webkit-text-stroke: 1.2px var(--fg-strong);
  color: transparent;
  font-style: italic;
  font-weight: var(--fw-semibold);
}
.frag.alert { color: var(--danger); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.frag.muted { color: var(--fg-subtle); }
.frag.sticky {
  font-family: 'Caveat', 'Segoe Print', cursive;
  background: #FFE787;
  padding: 0.06em 0.36em 0.1em;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.18);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: 0;
}
.frag.acid {
  background: linear-gradient(transparent 70%, var(--_acid) 70%, var(--_acid) 92%, transparent 92%);
  padding: 0 0.06em;
}

.chaos-wall .row .frag:nth-child(odd) { --rot: -1deg; }
.chaos-wall .row .frag:nth-child(even) { --rot: 1deg; }

@media (max-width: 1024px) {
  .chaos-grid { grid-template-columns: 1fr; gap: var(--sp-10); align-items: start; }
  #chaos .section-title { max-width: 22ch; }
}
/* Tighten the typographic wall on phone — fewer rows feel
   packed, smaller fragments fit naturally, mask shrinks. */
@media (max-width: 540px) {
  .chaos-wall { line-height: 1.15; column-gap: var(--sp-3); }
  .chaos-wall .row { gap: 0.3em 0.4em; padding: 0.12em 0; }
  .frag.huge { font-size: 22px; }
  .frag.big  { font-size: 18px; }
  .frag.mid  { font-size: 14px; }
  .frag.small{ font-size: 12px; }
  .frag.sticky { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   03 · INSIDE — dark, two sides intro
   ═══════════════════════════════════════════════════════════════ */
/* Two equal halves with a connecting "+" between them.
   Same treatment on both sides — same weight, same color —
   so neither dominates. The plus sign is the visual story:
   one workspace = both halves. */
/* The pivot — the single statement that pivots the page from
   "the problem" to "the answer." Big, confident, lots of breathing
   room. Reads as the moment of clarity. */
/* Pivot — single statement section. Two-column desktop layout
   with the title on the left and a short supporting deck on the
   right. Both start-aligned so the section reads naturally from
   the top rather than floating against the section base. */
.pivot {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.pivot-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--fg-strong);
  margin: 0;
}
.pivot-title .pivot-accent { color: var(--_acid); }
.pivot-deck {
  max-width: 44ch;
  font-size: var(--fs-17);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  margin: 0;
  padding-top: 0.4em;
}
@media (max-width: 900px) {
  .pivot {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
  }
  .pivot-title { font-size: clamp(38px, 8vw, 64px); }
  .pivot-deck { font-size: var(--fs-15); max-width: 60ch; padding-top: 0; }
}
/* ═══════════════════════════════════════════════════════════════
   04 · YOUR ROSTER — light, vibrant tiles
   ═══════════════════════════════════════════════════════════════ */
.home-grid {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
@media (max-width: 980px) { .home-grid { grid-template-columns: 1fr; gap: var(--sp-12); } }

.home-copy { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 48ch; }
.home-copy p {
  font-size: var(--fs-17);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.home-copy p strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }

/* /home surface preview */
.surface {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  transform: rotate(-0.4deg);
}
/* Drop the editorial tilt on phone — the tilt can push horizontal
   overflow when the surface is full-width, and it looks crooked
   at narrow sizes. */
@media (max-width: 768px) {
  .surface { transform: none; border-radius: var(--r-md); }
}
.surface-chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-faint);
}
.surface-chrome .lights { display: flex; gap: 5px; }
.surface-chrome .light {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong);
}
.surface-chrome .title {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  margin-left: 6px;
}
.surface-chrome .url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--fg-faint);
}
.surface-chrome .live {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-strong);
  padding: 3px 8px;
  border: 1px solid var(--fg-strong);
  background: var(--_acid);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-bold);
  margin-left: auto;
}
.surface-chrome .live .ldot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg-strong);
  animation: pulse-dot 1.8s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}
@media (max-width: 540px) {
  .surface-chrome .title, .surface-chrome .url { display: none; }
}

.surface-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: var(--sp-5); }
@media (max-width: 540px) { .surface-body { padding: 16px 14px; gap: var(--sp-4); } }

.surf-greet {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-faint);
}
.surf-greet-eye {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.surf-greet-line {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-strong);
}
/* No more highlight markers inside the product mockup either. */
.surf-greet-line .accent {
  color: var(--fg-strong);
  font-weight: var(--fw-extrabold);
}
.surf-greet-side {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 540px) {
  .surf-greet-line { font-size: 16px; }
  .surf-greet-side { display: none; }
}

/* Section header bars inside the surface mockup — match the
   wireframe pattern (h-style title + small mono meta). Used by
   roster, week and attention sections so the three areas are
   clearly delineated. */
.surf-sec-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 10px;
}
.surf-sec-title {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  line-height: 1;
}
.surf-sec-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.10em;
  color: var(--fg-subtle);
}

.surf-roster { display: flex; flex-direction: column; gap: 0; }
/* Legacy classes preserved for compatibility but the new bar is
   what we use in markup. */
.surf-roster-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.surf-roster-head .eye {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.surf-roster-head .count {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--fg-subtle);
}

/* Always 2-up so the roster reads as "you have multiple artists"
   even on phone. minmax(0, 1fr) lets tiles shrink past their
   content width on narrow screens. Drops to 1-col only on really
   tiny devices. */
.surf-roster-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 360px) { .surf-roster-tiles { grid-template-columns: 1fr; } }

/* Glass tile — pale, refined, with a single colored accent
   representing the artist's brand. Reads as a roster card in
   a clean management app, not a vibrant marketing flourish. */
.surf-tile {
  position: relative;
  isolation: isolate;
  padding: 16px 18px 18px;
  border-radius: var(--r-lg);
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  color: var(--fg-strong);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px -12px rgba(0, 0, 0, 0.12);
  transition: transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.surf-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 18px 38px -14px rgba(0, 0, 0, 0.18);
}
/* Per-tile accent stripe — left edge, 3px, brand color per artist. */
.surf-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--tile-accent, var(--_acid));
  z-index: 1;
}
/* Very subtle wash from the accent into the card. */
.surf-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, color-mix(in srgb, var(--tile-accent, var(--_acid)) 14%, transparent), transparent 60%);
}
.surf-tile > * { position: relative; z-index: 2; }

/* Per-artist accent — one acid, one cobalt. Two real distinct
   brand identities, not the same dark gradient twice. */
.surf-tile--magenta { --tile-accent: var(--_acid); }
.surf-tile--cobalt { --tile-accent: var(--_cobalt, #2E7CFA); }

.surf-tile-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: var(--tile-accent, var(--_acid));
  color: var(--fg-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  align-self: flex-start;
  line-height: 1;
}
/* Cobalt tile gets white text on the deep blue tag */
.surf-tile--cobalt .surf-tile-tag { color: #fff; }
.surf-tile-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2.4s infinite;
}
.surf-tile-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.surf-tile-name {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 24px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--fg-strong);
}
/* Label stacks above value (no more 72px label column eating the
   value's width). Within the value, the item and date stack on
   separate lines so neither truncates. */
.surf-tile-meta-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.surf-tile-meta-k {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.surf-tile-meta-v {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.surf-tile-meta-v .meta-date {
  display: block;
  font-weight: var(--fw-regular);
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0;
  margin-top: 2px;
}

/* Week grid */
.surf-week { display: flex; flex-direction: column; gap: 6px; }
.surf-week-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.surf-week-head .eye {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.surf-week-head .live {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
}
/* minmax(0, 1fr) forces equal-width day columns even when one
   cell has more text than another. Without it, `1fr` defaults to
   `minmax(auto, 1fr)` and cells with longer titles can stretch
   wider than their neighbors, throwing off the alignment between
   the day-header row and the artist rows. */
.surf-week-row {
  display: grid;
  grid-template-columns: 80px repeat(5, minmax(0, 1fr));
  gap: 4px;
  align-items: stretch;
}
@media (max-width: 540px) { .surf-week-row { grid-template-columns: 60px repeat(5, minmax(0, 1fr)); gap: 3px; } }
.surf-week-row.is-head .surf-cell {
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--border-faint);
}
.surf-week-row.is-head .surf-cell .dow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.surf-week-row.is-head .surf-cell .num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: var(--fg-strong);
}
.surf-week-row.is-head .surf-cell.today .dow,
.surf-week-row.is-head .surf-cell.today .num { color: var(--fg-strong); font-weight: var(--fw-bold); }
.surf-week-row.is-head .surf-cell.today {
  position: relative;
}
.surf-week-row.is-head .surf-cell.today::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 16px; height: 2px;
  transform: translateX(-50%);
  background: var(--fg-strong);
  border-radius: 1px;
}
.surf-row-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  padding-right: var(--sp-2);
  border-right: 1px solid var(--border-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surf-cell {
  padding: 5px;
  border-radius: var(--r-xs);
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
}
.surf-cell.is-release { background: rgba(0, 0, 0, 0.06); }
.surf-cell.is-show { background: rgba(221, 235, 42, 0.32); }
.surf-cell.is-radio { background: rgba(0, 0, 0, 0.04); }
.surf-cell.is-studio { background: rgba(0, 0, 0, 0.08); }
.surf-cell.is-travel { background: rgba(0, 0, 0, 0.04); }
.surf-cell-type {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.surf-cell-title {
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--fg-strong);
  line-height: 1.2;
  /* Long names like "Strongroom" can overflow narrow grid columns.
     Truncate with ellipsis so cells can't bleed into neighbors. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .surf-cell { padding: 4px; min-height: 32px; }
  .surf-cell-title { font-size: 10px; }
  .surf-row-label { font-size: 8.5px; }
}
/* Very small screens — drop the cell-type label so the title
   has room to breathe, and tighten the row label column. */
@media (max-width: 420px) {
  .surf-week-row { grid-template-columns: 46px repeat(5, minmax(0, 1fr)); gap: 2px; }
  .surf-cell { padding: 3px; min-height: 28px; }
  .surf-cell-type { display: none; }
  .surf-cell-title { font-size: 9.5px; line-height: 1.1; }
  .surf-row-label { font-size: 8px; padding-right: 4px; }
}

.surf-attention {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-faint);
}
.surf-attention-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px;
}
.surf-attention-head .eye {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.surf-attention-head .count {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--fg-subtle);
}
.surf-att-row {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 12px;
}
.surf-att-row:last-child { border-bottom: none; }
.surf-att-row .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-faint);
}
.surf-att-row.is-late .dot { background: var(--danger); }
.surf-att-row.is-late .when { color: var(--danger); }
.surf-att-row .what { color: var(--fg-muted); }
.surf-att-row .what strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }
/* Tiny assignee avatar — gives "someone is on this" signal */
.surf-att-row .who {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--fg-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
.surf-att-row .when {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   05 · MODULES — dark, 4-card band
   ═══════════════════════════════════════════════════════════════ */
.modules-band {
  margin-top: var(--sp-16);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 768px) { .modules-band { grid-template-columns: 1fr; } }

.mod-card {
  background: var(--bg);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 240px;
  transition: background var(--dur-base);
}
.mod-card:hover { background: var(--bg-elevated); }
@media (max-width: 768px) { .mod-card { padding: 26px 24px; min-height: 220px; } }
@media (max-width: 540px) { .mod-card { padding: 22px 20px; min-height: 0; } }

/* Row 1: number + name on the same baseline. No more redundant
   "tag" line above the name. Cleaner hierarchy, less visual noise. */
.mod-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.mod-num {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg-subtle);
}
.mod-tag { display: none; }
.mod-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg-strong);
}
.mod-body {
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 44ch;
}
.mod-list {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mod-list span { position: relative; padding-left: 14px; }
.mod-list span:first-child { padding-left: 0; }
.mod-list span + span::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: var(--_acid);
  border-radius: 50%;
}
/* On phone the description already lists what's inside each module —
   the dotted tag row duplicates that and adds vertical weight. Hide it
   so each card is more compact and the section scrolls less. */
@media (max-width: 540px) {
  .mod-list { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   06 · BUSINESS — light, ledger feel
   ═══════════════════════════════════════════════════════════════ */
/* Business side — minimal. Short copy on the left, four BIG
   category names on the right. The names are the section's
   impact, not paragraphs of description. Top-aligned so the
   headline reads naturally above the lead text in the left
   column, and the four big names start at the top of the right
   column. */
.biz-grid {
  margin-top: var(--sp-10);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (max-width: 980px) { .biz-grid { grid-template-columns: 1fr; gap: var(--sp-10); } }

.biz-lead { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-2); }
.biz-text {
  font-size: var(--fs-17);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  max-width: 42ch;
}
.biz-text strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }

.biz-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.biz-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-faint);
}
.biz-row:last-child { border-bottom: 1px solid var(--border-faint); }
.biz-row-num {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  color: var(--fg-subtle);
}
.biz-row-name {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(32px, 3.6vw, 52px);
  letter-spacing: -0.035em;
  color: var(--fg-strong);
  line-height: 1;
}
@media (max-width: 540px) {
  .biz-row { grid-template-columns: 40px 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; }
  .biz-row-name { font-size: clamp(26px, 8vw, 36px); }
}

/* ═══════════════════════════════════════════════════════════════
   07 · MOMENTS — banner intro + 3 spreads
   ═══════════════════════════════════════════════════════════════ */
.moments-intro {
  padding: 56px 0 48px;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
@media (max-width: 768px) { .moments-intro { padding: 44px 0 36px; } }
@media (max-width: 540px) { .moments-intro { padding: 36px 0 28px; } }
.moments-banner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-6);
}
.moments-eye {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.moments-eye .num { color: var(--fg-strong); font-weight: var(--fw-extrabold); }
.moments-eye .bar { width: 48px; height: 1px; background: var(--border); }
@media (max-width: 540px) { .moments-eye .bar { width: 28px; } }
.moments-title {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg-strong);
  max-width: 20ch;
}
.moments-title .accent { color: var(--fg-strong); }
.moments-title .stroke {
  -webkit-text-stroke: 1.4px var(--fg-strong);
  color: transparent;
  font-style: italic;
  font-weight: var(--fw-semibold);
}
.moments-deck {
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 48ch;
}

/* Moments now read as a premium product showcase, not a flat
   editorial section. Each moment lives on its own subtly-tinted
   background (cream, warm grey, sand) so it feels like turning
   to a new spread in a product catalogue. The mockups themselves
   sit in a deeper card with a real shadow, not flat on the page. */
.moment-section {
  padding: 112px 0 96px;
  border-top: 1px solid var(--border-faint);
  position: relative;
}
.moment-section--01 { background: #FBF8F1; } /* warm cream */
.moment-section--02 { background: #F4F0E8; } /* sand */
.moment-section--03 { background: #EEEAE0; } /* deeper sand */
@media (max-width: 768px) { .moment-section { padding: 80px 0 64px; } }
@media (max-width: 540px) { .moment-section { padding: 60px 0 48px; } }

.moment-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr 1.05fr;
  gap: var(--sp-10);
  align-items: start;
}
@media (max-width: 1080px) {
  .moment-row { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .moment-num-block { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .moment-row { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.moment-section--02 .moment-row {
  grid-template-columns: 1.05fr 1fr minmax(150px, 200px);
}
/* Number block keeps its column to itself — never overlaps the
   title. The number is right-padded so even at clamp's max it
   can't bleed past its lane. On smaller screens we shrink the
   number further so the column collapse doesn't leave a giant
   "01" hanging awkwardly above the content. */
.moment-num-block {
  padding-right: var(--sp-4);
  overflow: visible;
}
@media (max-width: 1080px) {
  .moment-num-block { padding-right: 0; }
  .moment-num-big { font-size: clamp(56px, 10vw, 96px); }
}
@media (max-width: 540px) {
  .moment-num-big { font-size: 64px; }
}
@media (max-width: 1080px) {
  .moment-section--02 .moment-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .moment-section--02 .moment-row { grid-template-columns: 1fr; }
}
.moment-section--02 .moment-num-block { order: 3; }
.moment-section--02 .moment-content { order: 2; }
.moment-section--02 .moment-vis { order: 1; }
@media (max-width: 1080px) {
  .moment-section--02 .moment-num-block { order: 0; }
  .moment-section--02 .moment-content { order: 1; }
  .moment-section--02 .moment-vis { order: 2; }
}

/* Big number — confident moment marker, sits in its own lane.
   Sized to stay inside the num-block column so it never bleeds
   into the title beside it. */
.moment-num-big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(68px, 8vw, 128px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--fg-strong);
  display: inline-block;
  transform-origin: left center;
  position: relative;
  padding-bottom: 0.14em;
}
.moment-num-big::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 56%;
  height: 5px;
  background: var(--_acid);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-std);
  transition-delay: 800ms;
}
.moment-row.is-in .moment-num-big::after { transform: scaleX(1); }
/* Number scales in dramatically from translucent stroke to solid.
   Triggered by .moment-row.is-in (set by IntersectionObserver). */
.moment-row .moment-num-big {
  opacity: 0;
  transform: scale(0.74) translateY(40px);
  color: rgba(0, 0, 0, 0.15);
  transition:
    opacity 720ms var(--ease-std),
    transform 900ms var(--ease-std),
    color 900ms var(--ease-std);
}
.moment-row.is-in .moment-num-big {
  opacity: 1;
  transform: scale(1) translateY(0);
  color: var(--fg-strong);
}

.moment-content { display: flex; flex-direction: column; gap: var(--sp-5); }
.moment-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--fg-strong);
  max-width: 16ch;
}
/* Title words slide up one at a time. Implemented via spans
   injected by JS — each word gets a stagger via --i. */
.moment-row .moment-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms var(--ease-std),
    transform 700ms var(--ease-std);
  transition-delay: calc(180ms + var(--i, 0) * 60ms);
}
.moment-row.is-in .moment-title .word {
  opacity: 1;
  transform: translateY(0);
}
/* Body paragraph lifts up after the title. */
.moment-row .moment-body,
.moment-row .moment-vis {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms var(--ease-std), transform 800ms var(--ease-std);
}
.moment-row .moment-body { transition-delay: 500ms; }
.moment-row .moment-vis { transition-delay: 620ms; }
.moment-row.is-in .moment-body,
.moment-row.is-in .moment-vis {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .moment-row .moment-num-big,
  .moment-row .moment-title .word,
  .moment-row .moment-body,
  .moment-row .moment-vis {
    opacity: 1; transform: none;
    color: var(--fg-strong);
  }
  .moment-row .moment-num-big::after { transform: scaleX(1); }
}
.moment-body {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  max-width: 48ch;
}
.moment-body strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }

/* The visual mockup is the conversion proof — give it weight,
   real shadow, and a soft acid-tinted glow underneath so it
   lifts off the page like a product hero card. */
.moment-vis {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 4px 12px -2px rgba(0, 0, 0, 0.08),
    0 24px 56px -16px rgba(0, 0, 0, 0.18),
    0 48px 96px -32px rgba(0, 0, 0, 0.10);
  min-height: 340px;
  position: relative;
}
/* Soft acid-tinted halo behind the mockup. Subtle, premium.
   Bleed is asymmetric on desktop so the glow has dimension;
   contained on phone so it can't push horizontal overflow. */
.moment-vis::before {
  content: '';
  position: absolute;
  inset: -16px -32px -32px -16px;
  background: radial-gradient(ellipse at 30% 80%, rgba(221, 235, 42, 0.22), transparent 65%);
  z-index: -1;
  filter: blur(20px);
  pointer-events: none;
}
@media (max-width: 768px) {
  .moment-vis { padding: var(--sp-6); min-height: 280px; }
  .moment-vis::before { inset: -8px; }
}
@media (max-width: 540px) {
  .moment-vis { padding: var(--sp-5); min-height: 240px; border-radius: var(--r-md); }
}
.vis-eye {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-bottom: var(--sp-5);
}
/* Header row for moment visuals with a top-right action button. */
.vis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.vis-head .vis-eye { margin-bottom: 0; }
.vis-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-strong);
  background: var(--_acid);
  border: 1px solid var(--fg-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--dur-fast);
}
.vis-share:hover { transform: translateY(-1px); }
.vis-share svg { width: 12px; height: 12px; }

/* Listen vis */
.listen-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  margin-bottom: 12px;
}
.listen-versions {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 14px;
}
.listen-ver {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  color: var(--fg-subtle);
  background: var(--bg-sunken);
  border: 1px solid transparent;
}
.listen-ver.is-now {
  background: var(--_acid-w);
  border-color: var(--fg-strong);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
}
.listen-ver.is-future {
  color: var(--fg-faint);
  background: transparent;
  border: 1px dashed var(--border);
}
.listen-track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.listen-track .play {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--fg-strong);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
}
.listen-track .name { font-size: 14px; color: var(--fg-strong); flex: 1; }
.listen-track .wave {
  flex: 1;
  display: flex; gap: 2px; align-items: flex-end;
  height: 22px;
}
.listen-track .wave span {
  flex: 1; background: var(--border-strong); border-radius: 1px;
}
.listen-track .wave span.lit { background: var(--fg-strong); }
.listen-track .dur {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--fg-subtle);
}
.listen-listeners {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-faint);
  display: flex; flex-direction: column; gap: 8px;
}
.listen-listener {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.listen-listener .av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--fg-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-semibold);
}
.listen-listener .who { color: var(--fg-strong); }
.listen-listener .when {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--fg-subtle);
}
.listen-listener .check {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--fg-strong);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px;
  font-weight: var(--fw-bold);
}
.listen-listener.is-pending .check {
  background: transparent;
  border: 1px solid var(--border);
  color: transparent;
}
.listen-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-faint);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap;
}
.listen-foot .who-stat {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--fg-muted);
}
.listen-foot .who-stat strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }
.listen-foot .revoke {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-strong);
  padding: 5px 10px;
  border: 1px solid var(--fg-strong);
  border-radius: var(--r-xs);
}

/* Listening mockup — phone overrides.
   Track collapses so the waveform sits in its own row beneath
   the file name. Listener rows drop the "when" column to make
   room for the name + check. */
@media (max-width: 540px) {
  .listen-title { font-size: 17px; }
  .listen-ver { font-size: 9px; padding: 3px 7px; }
  .listen-track { flex-wrap: wrap; gap: 8px; }
  .listen-track .name { flex: 1 0 auto; min-width: 0; }
  .listen-track .wave { flex: 1 0 100%; height: 18px; order: 3; }
  .listen-track .dur { font-size: 9px; }
  .listen-listener { grid-template-columns: 20px 1fr auto; gap: 8px; font-size: 12px; }
  .listen-listener .av { width: 20px; height: 20px; font-size: 8.5px; }
  .listen-listener .when { display: none; }
  .listen-foot { gap: var(--sp-2); }
  .listen-foot .who-stat { font-size: var(--fs-10); }
  .listen-foot .revoke { font-size: 9px; padding: 4px 8px; }
}

/* Brief vis */
.brief-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.brief-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.brief-prev-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
}
.brief-prev-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: var(--fw-semibold);
}
.brief-prev-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: var(--_acid);
  border: 1px solid var(--fg-strong);
  border-radius: var(--r-pill);
}
.brief-prev-status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg-strong);
  animation: pulse-dot 1.8s infinite;
}
.brief-prev-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-strong);
}
.brief-prev-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-muted);
}
.brief-prev-timeline {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border-faint);
}
.bp-tl-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
}
.bp-tl-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: var(--fw-semibold);
}
.bp-tl-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.bp-tl-dot {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--bg-sunken);
  color: var(--fg-muted);
}
.bp-tl-dot.is-now {
  background: var(--_acid-w);
  color: var(--_magenta-d);
  font-weight: var(--fw-semibold);
}
/* Asset thumbnails — 2x2 grid (or 4-up wide) with a visual
   preview block on top + name/meta below. Each thumb has its
   own subtle tone so they read as different asset types at a
   glance, not all identical grey tiles. */
.brief-prev-assets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-faint);
}
@media (max-width: 540px) { .brief-prev-assets { gap: 5px; } }
.bp-asset {
  padding: 8px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-faint);
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.bp-asset-thumb {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-bold);
}
/* Asset thumbnail tones — each reads as a different kind of file
   at a glance. Artwork = a record-cover gradient. Press photos =
   a film-strip pattern. Lyrics = lined paper. Audio = clean. */
.bp-asset-thumb.is-artwork {
  background-image: linear-gradient(135deg, #2C2A33 0%, #574B5A 50%, #C8902A 100%);
  color: #fff;
}
.bp-asset-thumb.is-press {
  background: #1F1B16;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.18) 3px, rgba(255,255,255,0.18) 4px);
  color: #fff;
}
.bp-asset-thumb.is-lyrics {
  background: #F4F0E6;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0,0,0,0.12) 4px, rgba(0,0,0,0.12) 5px);
  color: var(--fg-strong);
}
.bp-asset-thumb.is-audio { background: var(--_acid); color: var(--fg-strong); }
.bp-asset-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bp-asset-name {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  line-height: 1.1;
}
.bp-asset-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-subtle);
}
/* Brief mockup — phone overrides.
   Top header wraps, timeline labels narrow. */
@media (max-width: 540px) {
  .brief-preview { padding: 14px; gap: var(--sp-2); }
  .brief-prev-top { flex-wrap: wrap; gap: var(--sp-2); }
  .brief-prev-title { font-size: 15px; }
  .brief-prev-body { font-size: 12px; }
  .bp-tl-row { grid-template-columns: 46px 1fr; gap: 8px; }
  .bp-tl-label { font-size: 8.5px; }
  .bp-tl-dot { font-size: 8.5px; padding: 2px 5px; }
  .bp-asset { padding: 7px 8px; }
}

/* Financial picture vis */
.finance-card { display: flex; flex-direction: column; gap: var(--sp-5); }
.fin-block { display: flex; flex-direction: column; gap: 5px; }
.fin-block-head {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 4px;
}
.fin-block-tag {
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
  background: var(--_acid-w);
  padding: 2px 7px;
  border-radius: var(--r-xs);
  letter-spacing: 0.18em;
}
.fin-block-label { color: var(--fg-muted); }
.fin-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: 6px 0;
}
.fin-row-info { display: flex; flex-direction: column; gap: 2px; }
.fin-row-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  color: var(--fg-strong);
}
.fin-row-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-subtle);
}
.fin-row-amt {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}
.fin-pot { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.fin-pot-top { display: flex; justify-content: space-between; align-items: baseline; }
.fin-pot-name {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--fg-strong);
}
.fin-pot-amt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
}
.fin-pot-bar {
  height: 6px;
  background: var(--bg-sunken);
  border-radius: 4px;
  overflow: hidden;
}
.fin-pot-fill {
  height: 100%;
  background: var(--fg-strong);
  width: 0;
  transition: width 1.4s var(--ease-std);
}
.fin-pot-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-subtle);
}
.fin-line {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  color: var(--fg-muted);
  padding-top: 10px;
  border-top: 1px solid var(--border-faint);
  line-height: 1.5;
}
.fin-line .num { color: var(--fg-strong); font-weight: var(--fw-bold); }
.fin-line .positive { color: var(--success); font-weight: var(--fw-bold); }

/* Finance mockup — phone overrides.
   Income rows stack so the amount sits below the name + meta.
   Budget pots already vertical, just tighten type. */
@media (max-width: 540px) {
  .fin-block-head { font-size: 9px; }
  .fin-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
  }
  .fin-row-amt { font-size: 14px; }
  .fin-row-name { font-size: 13px; }
  .fin-pot-name { font-size: 12px; }
  .fin-pot-amt { font-size: 10.5px; }
  .fin-pot-meta { font-size: 9px; }
  .fin-line { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   08 · FOUNDERS — dark, two managers
   ═══════════════════════════════════════════════════════════════ */
.founders-block {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-16);
  align-items: center;
  max-width: 1080px;
}
@media (max-width: 900px) { .founders-block { grid-template-columns: 1fr; gap: var(--sp-10); } }

/* Founder photo · record-cover treatment ─────────────────
   Tight crop, deep duotone (acid + black), halftone dot
   overlay, heavy vignette. Reads as a film still / record
   cover rather than a phone snapshot. Face detail abstracted
   by the dot pattern so the photo carries vibe, not likeness. */
.founders-photo-col { display: flex; flex-direction: column; }
.founders-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0E0E10;
}
.founders-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tighter crop on the upper portion so faces sit higher
     and the laptop crops cleanly across the bottom third. */
  object-position: 56% 38%;
  transform: scale(1.18);
  filter: grayscale(1) contrast(1.45) brightness(0.78);
  display: block;
  transition: transform 1400ms var(--ease-std);
}
.founders-photo-wrap:hover .founders-photo { transform: scale(1.22); }
/* Duotone — acid yellow highlights, deep black shadows. */
.founders-photo-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(221, 235, 42, 0.55) 0%, rgba(221, 235, 42, 0.18) 38%, transparent 70%),
    linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: hard-light;
  pointer-events: none;
  z-index: 1;
}
/* Halftone dot pattern overlay — record-cover finish.
   SVG circle pattern scaled finer; multiply blend punches the
   dots into the highlights without flattening the image. */
.founders-photo-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(0,0,0,0.55) 0.6px, transparent 1.2px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='luminanceToAlpha'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 4px 4px, 220px 220px;
  mix-blend-mode: multiply;
  opacity: 0.78;
  pointer-events: none;
  z-index: 2;
}
/* Outer vignette ring sealed in via inset shadow — pushes the
   eye into the center, finishes the edges. */
.founders-photo-wrap {
  box-shadow: inset 0 0 80px 12px rgba(0, 0, 0, 0.6);
}

.founder-text { display: flex; flex-direction: column; gap: var(--sp-5); }
.founder-text .body {
  font-size: var(--fs-17);
  line-height: var(--lh-loose);
  color: var(--fg);
  max-width: 56ch;
}
.founder-text .body p + p { margin-top: var(--sp-3); }
.founder-text .body strong { font-weight: var(--fw-semibold); }
@media (max-width: 540px) { .founder-text .body { font-size: var(--fs-15); } }

/* ═══════════════════════════════════════════════════════════════
   09 · WAITLIST — light close
   ═══════════════════════════════════════════════════════════════ */
.join-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; gap: var(--sp-10); } }
.join-left { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 48ch; }
.join-left .body { font-size: var(--fs-17); line-height: var(--lh-loose); color: var(--fg-muted); }
.join-left .body strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }
.join-left .body a {
  color: var(--fg-strong);
  border-bottom: 1px solid var(--fg-strong);
  padding-bottom: 1px;
}
.join-left .body p + p { margin-top: var(--sp-3); }
@media (max-width: 540px) { .join-left .body { font-size: var(--fs-15); } }

.wl-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 32px;
  position: relative;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.wl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--_acid);
}
@media (max-width: 540px) { .wl-card { padding: 22px 20px; } }
.wl-card-eye {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-5);
  display: block;
}
.wl-field { margin-bottom: var(--sp-5); }
/* Honeypot — visually hidden but reachable by automated form-fillers.
   Not display:none (some bots skip those). Positioned off-screen. */
.wl-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Turnstile widget. Sits between roster chips and submit button.
   Flexible width matches the form column. */
.wl-turnstile {
  margin-bottom: var(--sp-4);
  min-height: 65px;
}
.wl-turnstile:empty { display: none; }
.wl-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}
.wl-input {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--fg-strong);
  outline: none;
  transition: border-color var(--dur-fast);
}
.wl-input::placeholder { color: var(--fg-faint); }
.wl-input:focus { border-color: var(--fg-strong); }

.wl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-chip {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  transition: all var(--dur-fast);
}
.wl-chip:hover { border-color: var(--fg-muted); color: var(--fg-strong); }
.wl-chip.is-on {
  background: var(--_acid);
  color: var(--fg-strong);
  border-color: var(--_acid);
  font-weight: var(--fw-semibold);
}
.wl-submit {
  margin-top: var(--sp-2);
  width: 100%;
  padding: 16px;
  background: var(--_acid);
  color: var(--fg-strong);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--r-md);
  transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.wl-submit:hover { transform: translateY(-2px); background: var(--fg-strong); color: var(--bg); }
.wl-submit svg { width: 16px; height: 16px; }
.wl-note {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — colophon
   ═══════════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border-faint);
  padding: var(--sp-7) 0 var(--sp-7);
}
.foot-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.foot-mark {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.03em;
  color: var(--fg-strong);
  line-height: 1;
}
.foot-mark em { font-style: normal; font-weight: var(--fw-extrabold); color: var(--fg-strong); }
.foot-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}
.foot-meta a { color: var(--fg-muted); }
.foot-meta a:hover { color: var(--fg-strong); }
@media (max-width: 640px) {
  .foot-line { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ═══════════════════════════════════════════════════════════════ */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--_acid);
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--dur-base),
              width var(--dur-base) var(--ease-std),
              height var(--dur-base) var(--ease-std);
  will-change: transform;
}
.cursor-dot.is-visible { opacity: 1; }
.cursor-dot.is-active { width: 36px; height: 36px; opacity: 0.55; border-color: transparent; }
html.has-custom-cursor,
html.has-custom-cursor * { cursor: none; }
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor [contenteditable] { cursor: text; }
@media (hover: none) or (pointer: coarse) {
  .cursor-dot { display: none !important; }
  html.has-custom-cursor, html.has-custom-cursor * { cursor: auto !important; }
  html.has-custom-cursor input, html.has-custom-cursor textarea { cursor: text !important; }
}

/* ═══════════════════════════════════════════════════════════════
   REVEAL
   ═══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-long) var(--ease-std), transform var(--dur-long) var(--ease-std);
}
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}