/* ════════════════════════════════════════════════════════════════════════
   TabShame website — design system + cinematic chapter scaffolding
   ──────────────────────────────────────────────────────────────────────
   Spirit (not literal copy) of an Apple product page:
     • Big editorial typography
     • Pinned-on-scroll chapters that morph as you progress
     • Reveal-on-scroll for every block (Intersection Observer)
     • A single accent palette (peach + lavender on paper)
     • One sticky install pill at the top
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #1a1612;
  --ink-soft: rgba(26, 22, 18, 0.6);
  --ink-faint: rgba(26, 22, 18, 0.35);
  --ink-ghost: rgba(26, 22, 18, 0.12);
  --paper: #f4ede0;
  --paper-rich: #f7f0e3;
  --peach: #ff8966;
  --lavender: #b8a4ff;
  --shame: #e63946;

  --font-serif: "Fraunces", "Instrument Serif", Georgia, serif;
  --font-italic: "Instrument Serif", "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;

  --max-w: 1080px;
  --max-w-narrow: 760px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* DO NOT add overflow-x: hidden here — it creates a scroll context that
     breaks `position: sticky` on chapter descendants. The marquee has its
     own overflow:hidden; rely on max-width on chapter-inner for horizontal
     containment instead. */
}

body {
  background:
    radial-gradient(1400px 700px at 85% -10%, rgba(184, 164, 255, 0.18), transparent 60%),
    radial-gradient(1100px 600px at -5% 110%, rgba(255, 137, 102, 0.14), transparent 60%),
    var(--paper);
  min-height: 100vh;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
a:hover { color: var(--peach); }

img, canvas, video { max-width: 100%; display: block; }

::selection { background: var(--peach); color: var(--paper); }

/* ── Sticky topbar ────────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(244, 237, 224, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease-out), border-color 0.3s ease;
}
.topbar.is-visible {
  transform: translateY(0);
  border-bottom-color: var(--ink-ghost);
}

.topbar-brand {
  color: var(--ink);
  text-decoration: none;
}
.topbar-brand:hover { color: var(--peach); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar-right a { text-decoration: none; color: var(--ink-soft); }
.topbar-right a:hover { color: var(--ink); }

.topbar-cta {
  color: var(--ink) !important;
  background: var(--ink);
  color: var(--paper) !important;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
}
.topbar-cta:hover { color: var(--paper) !important; background: var(--peach); }

/* ── Chapter primitive ────────────────────────────────────────────────── */
/* NOTE: overflow MUST stay `visible` (default) here. `overflow: hidden`
   on an ancestor of `position: sticky` breaks sticky behavior — the
   pinned-stage stops sticking to the viewport and stays at its natural
   document position. If you need to clip a chapter's content, do it
   inside the chapter (e.g. on the marquee strip), not on .chapter. */
.chapter {
  position: relative;
  width: 100%;
}

.chapter-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 140px 32px;
}

.chapter-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--peach);
  margin: 0 0 16px;
}

.chapter-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  max-width: 12em;
}
.chapter-title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--peach);
}

.chapter-title-huge {
  font-size: clamp(64px, 12vw, 160px);
  letter-spacing: -0.035em;
}

.chapter-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 0 56px;
}

.chapter-cta {
  margin-top: 48px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chapter-cta a { text-decoration: none; color: var(--ink); }
.chapter-cta a:hover { color: var(--peach); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; }

/* ── Hero chapter ─────────────────────────────────────────────────────── */
/* Bottom padding reserves space for the absolute-positioned marquee
   strip so hero content never collides with it on viewports as short as
   720px. */
.chapter-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 100px 32px 160px;
}

.hero-content {
  width: 100%;
  /* Wider than the default --max-w (1080) so the two-line headline reads
     as a single dramatic statement instead of forced narrow lines. */
  max-width: 1320px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(52px, 8vw, 124px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 28px;
}
/* Direct child spans are full lines (block); the <em> emphasis stays
   INLINE inside its parent line so "tabs say about you." reads naturally
   with peach italics on just the two emphasized words. */
.hero-title > span {
  display: block;
}
.hero-title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--peach);
}

.hero-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 0 36px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Marquee strip at the bottom of the hero */
.marquee {
  position: absolute;
  bottom: 80px;
  left: 0; right: 0;
  overflow: hidden;
  border-top: 1px solid var(--ink-ghost);
  border-bottom: 1px solid var(--ink-ghost);
  padding: 18px 0;
  background: rgba(255, 255, 255, 0.3);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 32px;
  animation: marquee 38s linear infinite;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  padding-left: 32px;
}
.marquee-track span { font-style: italic; }
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scroll-cue-arrow {
  font-size: 16px;
  animation: bounce 1.8s var(--ease) infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ── Pinned chapter primitive ─────────────────────────────────────────── */
/* A pinned chapter has two parts:
   - .pinned-stage : position: sticky, holds the visual that stays put
   - .pinned-spacer: pure scroll height; longer = chapter lasts longer
   The stage is `top: 0` (sticks to the very top of viewport) AND
   `align-items: center` flex (centers the content vertically inside
   the 100vh box). The sticky topbar floats over the very top ~50px
   with a backdrop-blur, so the centered content has natural breathing
   room from it without needing an explicit top inset. */
.pinned-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 56px; /* keep top eyebrow text clear of the sticky topbar */
}

.pinned-spacer { width: 100%; pointer-events: none; }

/* ── Chapter 1: Numbers stage ─────────────────────────────────────────── */
.chapter-numbers {
  background:
    radial-gradient(900px 500px at 50% 60%, rgba(184, 164, 255, 0.16), transparent 60%),
    var(--paper);
}

.numbers-stage {
  text-align: center;
  padding: 0 32px;
}

.numbers-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--peach);
  margin-bottom: 28px;
}

.numbers-big {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(160px, 26vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.6s ease;
}
.chapter-numbers[data-stage="2"] .numbers-big { color: var(--peach); }
.chapter-numbers[data-stage="3"] .numbers-big { color: var(--shame); }

.numbers-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}

.numbers-caption {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(22px, 3vw, 36px);
  color: var(--ink);
  margin-top: 40px;
  min-height: 1.5em;
  transition: opacity 0.4s ease;
}

/* ── Chapter 2: Diagnosis (browser simulator) ────────────────────────── */
.chapter-diagnosis {
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(255, 137, 102, 0.15), transparent 60%),
    var(--paper);
}

.diagnosis-stage {
  width: 100%;
  max-width: 1000px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.diagnosis-headline {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  color: var(--ink);
  max-width: 18em;
  min-height: 1.2em;
  transition: opacity 0.4s ease;
}
.diagnosis-headline em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--peach);
}

/* Mock Chrome window */
.browser {
  width: 100%;
  max-width: 760px;
  background: white;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(26, 22, 18, 0.06),
    0 30px 80px rgba(26, 22, 18, 0.18);
  overflow: hidden;
  font-family: var(--font-sans);
}

.browser-chrome {
  background: #ebe2d2;
  padding: 10px 12px 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 44px;
}

.browser-traffic {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
  order: 0; /* always first, then pill, then tabs */
}
.browser-traffic span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #ddd2c0;
}
.browser-traffic span:nth-child(1) { background: #ff5f57; }
.browser-traffic span:nth-child(2) { background: #febc2e; }
.browser-traffic span:nth-child(3) { background: #28c840; }

/* Tab strip — a flex row that we append to dynamically. Single line;
   tabs SHRINK rather than wrap so the strip always looks like a real
   browser. */
.browser-tabs {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  flex: 1;
  min-width: 0; /* required so flex children can shrink past their content */
  min-height: 30px;
  order: 2;
  overflow: hidden;
}

.browser-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px 8px 0 0;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--ink);
  flex: 1 1 0;
  min-width: 32px;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: bottom center;
  animation: tabPop 0.32s var(--ease-out);
}
.browser-tab-fav {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--lavender);
  flex-shrink: 0;
}
.browser-tab-title { overflow: hidden; text-overflow: ellipsis; }

@keyframes tabPop {
  from { transform: translateY(8px) scale(0.92); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* Persona pill (Chrome tab-group label) — appears when threshold hit.
   Sits AFTER the traffic lights and BEFORE the tab strip. */
.browser-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #b8e2f5;
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  align-self: center;
  order: 1;
  animation: pillIn 0.55s var(--ease-out);
}
.browser-pill[hidden] { display: none; }
.browser-pill-emoji { font-size: 14px; }

@keyframes pillIn {
  from { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.05); }
  to   { transform: scale(1); opacity: 1; }
}

.browser-address {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 14px;
  margin: 6px 8px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.browser-address-fav { font-size: 10px; }
.browser-address-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.browser-body {
  background:
    linear-gradient(135deg, rgba(255, 137, 102, 0.07), rgba(184, 164, 255, 0.09)),
    white;
  min-height: 240px;
  padding: 36px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reveal block inside the browser body — final persona moment */
.diagnosis-reveal {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: revealIn 0.7s var(--ease-out);
}
.diagnosis-reveal[hidden] { display: none; }

.diagnosis-reveal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
}
.diagnosis-reveal-emoji { font-size: 40px; margin-right: 8px; }
.diagnosis-reveal-name {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center;
}
.diagnosis-reveal-stats {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}
.diagnosis-reveal-roast {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  margin: 8px 0 14px;
  max-width: 24em;
  padding-left: 14px;
  border-left: 3px solid var(--peach);
  text-align: left;
}

@keyframes revealIn {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ── Chapter 3: Personas grid ─────────────────────────────────────────── */
.chapter-personas {
  background:
    radial-gradient(900px 500px at 80% 80%, rgba(184, 164, 255, 0.12), transparent 60%),
    var(--paper);
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.persona-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--ink-ghost);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s var(--ease), box-shadow 0.2s ease;
}
.persona-card:hover {
  transform: translateY(-4px);
  color: var(--ink);
  box-shadow: 0 16px 40px rgba(26, 22, 18, 0.1);
  border-color: rgba(26, 22, 18, 0.2);
}
.persona-emoji { font-size: 36px; line-height: 1; }
.persona-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.persona-recipe {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Chapter 4: Share triptych ────────────────────────────────────────── */
.chapter-share {
  background:
    radial-gradient(900px 500px at 20% 80%, rgba(255, 137, 102, 0.1), transparent 60%),
    var(--paper);
}

/* Triptych: three differently-shaped cards (16:9, 4:5, 9:16) but all at
   the SAME height. Flex-row with align-items:flex-end so figcaptions sit
   on the same baseline. Each card's width auto-scales from its aspect
   ratio + fixed height — natural social-media silhouettes preserved. */
.share-triptych {
  display: flex;
  gap: 32px;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
}

.share-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  flex: 0 0 auto;
}

.share-card-canvas {
  /* Equal-height "frame" — all three cards share this height. Width
     follows from each card's aspect-ratio. Sized so the combined widths
     (16:9 + 4:5 + 9:16 at the same height, + gaps) fit inside the
     chapter-inner max-width (1080px). At height=280:
       16:9 → 498   4:5 → 224   9:16 → 158   = 880 + gaps → fits. */
  height: clamp(220px, 19vw, 280px);
  background:
    linear-gradient(135deg, rgba(255, 137, 102, 0.14), rgba(184, 164, 255, 0.2)),
    var(--paper);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(16px, 2vw, 28px);
  box-shadow: 0 18px 50px rgba(26, 22, 18, 0.14);
  border: 1px solid var(--ink-ghost);
  transition: transform 0.2s var(--ease);
  text-align: left;
}
.share-card:hover .share-card-canvas { transform: translateY(-6px) rotate(-0.5deg); }

/* Aspect ratios drive width given the fixed height above. */
.share-card-twitter   { aspect-ratio: 16 / 9; }
.share-card-instagram { aspect-ratio: 4 / 5;  }
.share-card-story     { aspect-ratio: 9 / 16; }

/* On narrow viewports, cards stack vertically. Drop the height
   constraint so each card sizes naturally to its aspect ratio in a
   single-column layout. */
@media (max-width: 860px) {
  .share-card-canvas {
    height: auto;
    width: 100%;
    max-width: 360px;
  }
}

.share-card-emoji { font-size: 48px; line-height: 1; }
.share-card-name {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.05;
}
.share-card-stat {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

.share-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.share-card-format {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
}
.share-card-spec {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* ── Chapter 5: Privacy ───────────────────────────────────────────────── */
.chapter-privacy {
  background:
    radial-gradient(900px 500px at 50% 50%, rgba(184, 164, 255, 0.1), transparent 60%),
    var(--paper);
}

.privacy-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 860px) {
  .privacy-split { grid-template-columns: 1fr; gap: 32px; }
}

.privacy-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
}
.privacy-bullets li {
  padding-left: 28px;
  position: relative;
}
.privacy-bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--peach);
  font-weight: 600;
}

/* Mock DevTools panel showing 0 requests */
.devtools-mock {
  background: #1d1d1d;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26, 22, 18, 0.25);
  font-family: var(--font-mono);
}
.devtools-tabbar {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.devtools-tabbar .active {
  color: white;
  position: relative;
}
.devtools-tabbar .active::after {
  content: "";
  position: absolute;
  bottom: -10px; left: 0; right: 0;
  height: 2px;
  background: #4d9eff;
}
.devtools-body {
  background: #2a2a2a;
  color: rgba(255, 255, 255, 0.7);
  min-height: 220px;
}
.devtools-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 8px 16px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.devtools-header { color: rgba(255, 255, 255, 0.5); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.devtools-empty {
  padding: 32px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.devtools-empty-num {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 72px;
  color: white;
  line-height: 1;
}
.devtools-empty-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.06em;
}
.devtools-empty-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
}

/* ── Chapter 6: Install ───────────────────────────────────────────────── */
.chapter-install {
  background:
    linear-gradient(135deg, rgba(255, 137, 102, 0.22), rgba(184, 164, 255, 0.28)),
    var(--paper);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 32px;
}
.install-stage {
  width: 100%;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  text-align: center;
}
.install-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(56px, 10vw, 128px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
}
.install-title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--peach);
}
.install-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 40px;
}
.install-actions { display: flex; justify-content: center; }
.install-meta {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 18px rgba(26, 22, 18, 0.22);
}
.btn-primary:hover { color: var(--paper); background: #2b251e; box-shadow: 0 10px 28px rgba(26, 22, 18, 0.3); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(26, 22, 18, 0.25);
}
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }

.btn-large {
  font-size: 14px;
  padding: 18px 32px;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--ink-ghost);
  padding: 36px 32px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  gap: 16px;
  flex-wrap: wrap;
}
.footer a { text-decoration: none; color: var(--ink-faint); }
.footer a:hover { color: var(--ink-soft); }

/* ── Welcome-page specifics ───────────────────────────────────────────── */
/* A quote block matching the extension's roast-line styling (peach left
   border, italic serif). Used on the "what is this?" section. */
.welcome-quote {
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--peach);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 720px;
}
.welcome-quote p { margin: 0 0 18px; }
.welcome-quote p:last-child { margin-bottom: 0; }

/* Soft italic tagline that sits after a section's main content as a
   throwaway one-liner (mirrors the extension's tone). */
.pin-footer {
  margin-top: 28px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  text-align: center;
}

/* ── Reveal-on-scroll primitive ───────────────────────────────────────── */
/* Any element with .reveal starts invisible+offset; the IntersectionObserver
   in script.js flips .is-visible when it enters viewport. data-delay is in
   milliseconds and applied via style attribute. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal[data-reveal="up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-reveal="left"] { transform: translateX(28px); }
.reveal[data-reveal="left"].is-visible { transform: translateX(0); opacity: 1; }

/* Reduced motion — kill animations + reveals */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .scroll-cue-arrow { animation: none !important; }
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar { padding: 12px 18px; }
  .topbar-right { gap: 14px; }
  .topbar-right a:not(.topbar-cta) { display: none; } /* hide nav links, keep CTA */
  .chapter-inner { padding: 80px 22px; }
  .chapter-hero { padding: 100px 22px 0; }
  .marquee { bottom: 60px; padding: 14px 0; }
  .marquee-track { font-size: 15px; gap: 24px; }
  .footer { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
}