/* =========================================================================
   PHASEBOARD · WEB · DESIGN LANGUAGE
   FILE: phaseboard.css   REV.H — 2026
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ─── TOKENS · LIGHT ────────────────────────────────────────────────────── */
:root {
  --paper:        #EBE8DD;
  --paper-2:      #DDD9CB;
  --paper-3:      #C5C0B0;
  --ink:          #1A1814;
  --ink-2:        #3A352D;
  --ink-3:        #6E6655;
  --ink-4:        #968E7A;
  --mars:         #D9542B;
  --rust:         #9C3A28;
  --mustard:      #C99326;
  --moss:         #355C3F;
  --mission:      #284C82;
  --plum:         #4F2A4A;
  --halftone-rgb:    26, 24, 20;
  --halftone-alpha:  0.045;

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

  --t-mono-sm:    11px;
  --t-body:       15px;
  --t-body-lg:    18px;
  --t-h1:         clamp(64px, 11vw, 168px);

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 144px;
  --s-11: 192px;

  --stroke-hair: 0.5px;
  --stroke-thin: 1px;
  --stroke:      1.5px;
  --stroke-bold: 2.5px;
  --stroke-heavy: 4px;

  --shadow-1: 2px 2px 0 var(--ink);
  --shadow-2: 4px 4px 0 var(--ink);

  --ease-mech:    cubic-bezier(.20, .80, .20, 1.00);
  --dur-fast: 120ms;
  --dur-med:  220ms;

  --rail-h: min(64vh, 520px);
}

/* ─── TOKENS · DARK ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #16181D;
    --paper-2:  #1E2025;
    --paper-3:  #2C2F36;
    --ink:      #E8E2D2;
    --ink-2:    #B8B2A0;
    --ink-3:    #85806E;
    --ink-4:    #5C5749;
    --mars:     #E5683E;
    --rust:     #B85047;
    --mustard:  #D9A53D;
    --moss:     #5A8060;
    --mission:  #4870B0;
    --plum:     #7B5A75;
    --halftone-rgb:    232, 226, 210;
    --halftone-alpha:  0.035;
  }
}
:root[data-theme="dark"] {
  --paper:    #16181D;
  --paper-2:  #1E2025;
  --paper-3:  #2C2F36;
  --ink:      #E8E2D2;
  --ink-2:    #B8B2A0;
  --ink-3:    #85806E;
  --ink-4:    #5C5749;
  --mars:     #E5683E;
  --rust:     #B85047;
  --mustard:  #D9A53D;
  --moss:     #5A8060;
  --mission:  #4870B0;
  --plum:     #7B5A75;
  --halftone-rgb:    232, 226, 210;
  --halftone-alpha:  0.035;
}

/* ─── BASE ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; background-color: var(--paper); }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  transition: background-color 240ms var(--ease-mech), color 240ms var(--ease-mech);
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(var(--halftone-rgb), var(--halftone-alpha)) 1px, transparent 1.4px),
    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 values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 6px 6px, 240px 240px;
  animation: bg-drift 90s linear infinite;
  will-change: background-position;
}
@keyframes bg-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 60px -90px, 240px -180px; }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--mars); color: var(--paper); }

/* ─── INLINE HIGHLIGHT · same look as text selection ───────────────────
   Mars-on-paper marker for emphasising one key phrase per paragraph.
   Restrained by convention — use sparingly, never on whole sentences.
   Markup: <mark> (semantic) or any <span class="hl">. box-decoration-break
   keeps the highlight clean when the phrase wraps across two lines. */
mark, .hl {
  background: var(--mars);
  color: var(--paper);
  padding: 0 0.22em 0.06em;
  font-weight: inherit;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
button {
  font: inherit; color: inherit; background: none; border: none;
  cursor: pointer; padding: 0;
}

.dot {
  display: inline-block;
  width: 0.20em; height: 0.20em;
  background: var(--mars);
  margin-left: 0.08em;
  vertical-align: 4%;
}

/* ─── MASTHEAD ─────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--stroke) solid var(--ink);
  transition: background-color 240ms var(--ease-mech);
}
.masthead-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) clamp(20px, 4vw, 56px);
  color: var(--ink);
}
.masthead .brand {
  font-weight: 700;
  display: inline-flex; align-items: center;
  gap: var(--s-3);
}
.masthead .brand .logo {
  display: inline-block;
  position: relative;
  width: 30px; height: 30px;
  border: var(--stroke-thin) solid var(--ink);
}
.masthead .brand .logo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.masthead .brand .logo .logo-light { display: block; }
.masthead .brand .logo .logo-dark  { display: none; }
:root[data-theme="dark"] .masthead .brand .logo .logo-light { display: none; }
:root[data-theme="dark"] .masthead .brand .logo .logo-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .masthead .brand .logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .masthead .brand .logo .logo-dark  { display: block; }
}
.masthead .brand .wordmark {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.masthead nav {
  display: flex; gap: var(--s-5);
  justify-self: end;
  margin-right: var(--s-4);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
}
.masthead nav a {
  position: relative;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-mech);
  color: var(--ink-2);
}
.masthead nav a:hover { color: var(--mars); }
.masthead nav a.active { color: var(--ink); font-weight: 700; }
.masthead nav a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: var(--stroke-bold);
  background: var(--mars);
}

.lang-switch {
  display: inline-flex;
  border: var(--stroke-thin) solid var(--ink);
}
.lang-switch button {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 4px 8px;
  color: var(--ink-3);
  background: transparent;
  border-right: var(--stroke-hair) solid var(--ink);
  transition: background-color var(--dur-fast) var(--ease-mech), color var(--dur-fast) var(--ease-mech);
}
.lang-switch button:last-child { border-right: none; }
.lang-switch button:hover { color: var(--ink); background: var(--paper-2); }
.lang-switch button.on { background: var(--ink); color: var(--paper); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px;
  border: var(--stroke-thin) solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-mech);
}
.theme-toggle:hover { background: var(--paper-2); }
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .sun { display: block; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun,
.theme-toggle.on .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon,
.theme-toggle.on .moon { display: block; }

/* ─── NAV TOGGLE · hamburger button, mobile only ───────────────────────── */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 28px; height: 24px;
  border: var(--stroke-thin) solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-mech);
}
.nav-toggle:hover { background: var(--paper-2); }
.nav-toggle svg { width: 14px; height: 14px; }
.nav-toggle .close { display: none; }
.nav-toggle[aria-expanded="true"] .bars  { display: none; }
.nav-toggle[aria-expanded="true"] .close { display: block; }

/* ─── MOBILE NAV DRAWER · drops down from masthead at <820px ───────────── */
@media (max-width: 820px) {
  .masthead-inner { gap: var(--s-3); }
  .nav-toggle     { display: inline-flex; }

  .masthead nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--s-3) clamp(20px, 4vw, 56px);
    background: var(--paper);
    border-bottom: var(--stroke) solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
    z-index: 49;
    display: none;
  }
  .masthead[data-nav-open="true"] nav { display: flex; }

  .masthead nav a {
    padding: 12px 0;
    font-size: 16px;
    color: var(--ink);
    border-bottom: var(--stroke-hair) solid var(--ink-4);
  }
  .masthead nav a:last-child { border-bottom: none; }
  .masthead nav a.active { color: var(--mars); }
  .masthead nav a.active::after { display: none; }
}

.stripe-bar {
  display: flex; height: 8px;
  border-bottom: var(--stroke) solid var(--ink);
}
.stripe-bar > i { display: block; flex: 1; }
.stripe-bar > i:nth-child(1) { background: var(--mars); }
.stripe-bar > i:nth-child(2) { background: var(--rust); }
.stripe-bar > i:nth-child(3) { background: var(--mustard); }
.stripe-bar > i:nth-child(4) { background: var(--moss); }
.stripe-bar > i:nth-child(5) { background: var(--mission); }

/* ─── SCROLL RAIL ──────────────────────────────────────────────────────── */
.scroll-rail {
  position: fixed; right: 14px; top: 50%;
  transform: translateY(-50%);
  height: var(--rail-h);
  width: 32px; z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-mech);
}
.scroll-rail.visible { opacity: 0.92; }
.scroll-rail .rail-track {
  position: absolute; left: 10px;
  top: 0; bottom: 0; width: 2px;
  background: var(--ink); opacity: 0.18;
}
.scroll-rail .rail-fill-window {
  position: absolute; left: 9px; top: 0;
  width: 4px; height: 0;
  overflow: hidden;
  border-right: var(--stroke-thin) solid var(--ink);
  will-change: height;
}
.scroll-rail .rail-fill-stripes {
  position: absolute; left: 0; top: 0;
  width: 4px; height: var(--rail-h);
  display: flex; flex-direction: column;
}
.scroll-rail .rail-fill-stripes i { display: block; flex: 1; }
.scroll-rail .rail-fill-stripes i:nth-child(1) { background: var(--mars); }
.scroll-rail .rail-fill-stripes i:nth-child(2) { background: var(--rust); }
.scroll-rail .rail-fill-stripes i:nth-child(3) { background: var(--mustard); }
.scroll-rail .rail-fill-stripes i:nth-child(4) { background: var(--moss); }
.scroll-rail .rail-fill-stripes i:nth-child(5) { background: var(--mission); }
.scroll-rail .rail-arrow {
  position: absolute; left: 1px; top: 0;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--ink);
  transform: translateY(-50%);
  will-change: top;
  transition: top 60ms var(--ease-mech);
}
.scroll-rail .ticks {
  position: absolute; left: 14px;
  top: 0; bottom: 0; width: 18px;
}
.scroll-rail .ticks .tick {
  position: absolute; left: 0;
  height: 1px; background: var(--ink);
}
.scroll-rail .ticks .tick.maj  { width: 14px; height: 1.5px; opacity: 0.78; }
.scroll-rail .ticks .tick.mid  { width: 9px;  height: 1px;   opacity: 0.55; }
.scroll-rail .ticks .tick.min  { width: 5px;  height: 1px;   opacity: 0.34; }
.scroll-rail .rail-cap {
  position: absolute; left: 9px;
  width: 4px; height: 4px;
  background: var(--ink);
}
.scroll-rail .rail-cap.top { top: -3px; }
.scroll-rail .rail-cap.bot { bottom: -3px; }
@media (max-width: 720px) { .scroll-rail { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-rail .rail-arrow { transition: none; }
}

/* ─── PAGE WRAPPER ─────────────────────────────────────────────────────── */
.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  position: relative;
}

/* ─── BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center;
  gap: var(--s-3);
  padding: 12px 18px;
  border: var(--stroke-bold) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-mech), box-shadow var(--dur-fast) var(--ease-mech);
  box-shadow: var(--shadow-1);
  position: relative;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-2);
}
.btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn.primary { background: var(--mars); color: var(--paper); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { box-shadow: var(--shadow-1); }
.btn .arrow { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }

/* ─── COVER + HERO CARD ────────────────────────────────────────────────── */
.cover {
  position: relative;
  padding: clamp(48px, 8vh, 96px) 0 clamp(64px, 11vh, 144px);
  border-bottom: var(--stroke-heavy) solid var(--ink);
  overflow: visible;
}
.cover-tagline {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  margin: 0 0 var(--s-6);
  position: relative; z-index: 2;
}
.cover-tagline::before {
  content: "";
  display: inline-block;
  width: 24px; height: var(--stroke-bold);
  background: var(--mars);
  vertical-align: 4px;
  margin-right: var(--s-3);
}
.cover h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 14ch;
  position: relative; z-index: 2;
}
.cover h1 .dot { width: 0.18em; height: 0.18em; vertical-align: 6%; }
.cover .deck {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.35;
  max-width: 32ch;
  margin-top: var(--s-7);
  color: var(--ink-2);
  letter-spacing: -0.01em;
  position: relative; z-index: 2;
}
.cover .cta-row {
  margin-top: var(--s-7);
  display: flex; flex-wrap: wrap;
  gap: var(--s-4);
  position: relative; z-index: 2;
}
.cover-specs {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: var(--stroke-thin) solid var(--ink-4);
  display: flex; flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11px;
  color: var(--ink-3);
  position: relative; z-index: 2;
}
.cover-specs b { color: var(--ink); font-weight: 700; }

.hero-card {
  position: absolute;
  top: clamp(40px, 9vh, 130px);
  right: clamp(-30px, -1vw, 18px);
  width: min(440px, 42vw);
  z-index: 1;
  pointer-events: none;
  transform: rotate(-1.6deg);
  animation: card-bob 7.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes card-bob {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(-1.6deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .hero-card { animation: none; } }

.hero-card-frame {
  background: var(--paper);
  border: var(--stroke-bold) solid var(--ink);
  box-shadow: var(--shadow-2);
  position: relative; z-index: 2;
}
.hero-card .hc-strip {
  display: flex; align-items: center;
  gap: var(--s-2);
  background: var(--paper-2);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: var(--stroke) solid var(--ink);
  color: var(--ink);
}
.hero-card .hc-name { opacity: 0.7; }
.hero-card .hc-stripe {
  margin-left: auto;
  display: inline-flex;
  width: 50px; height: 7px;
}
.hero-card .hc-stripe i { flex: 1; display: block; }
.hero-card .hc-stripe i:nth-child(1) { background: var(--mars); }
.hero-card .hc-stripe i:nth-child(2) { background: var(--rust); }
.hero-card .hc-stripe i:nth-child(3) { background: var(--mustard); }
.hero-card .hc-stripe i:nth-child(4) { background: var(--moss); }
.hero-card .hc-stripe i:nth-child(5) { background: var(--mission); }
.hero-card .hc-body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.hero-card .hc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1;
}
.hero-card .hc-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.hero-card .hc-meta b { color: var(--ink); font-weight: 700; }
.hero-card .hc-pill {
  display: inline-flex; align-items: center;
  gap: 6px; padding: 2px 8px;
  border: var(--stroke-thin) solid var(--ink);
  background: var(--mission); color: var(--paper);
  font-weight: 700;
}
.hero-card .hc-pill i {
  display: inline-block;
  width: 6px; height: 6px;
  background: currentColor;
}
.hero-card .hc-tasks {
  margin: 0; padding: var(--s-2) 0;
  list-style: none;
  display: grid; gap: 8px;
  border-top: var(--stroke-thin) solid var(--ink-4);
  border-bottom: var(--stroke-thin) solid var(--ink-4);
}
.hero-card .hc-tasks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s-3);
  align-items: center;
  font-family: var(--font-display);
  font-size: 13px; line-height: 1.35;
  color: var(--ink);
}
.hero-card .hc-check {
  width: 16px; height: 16px;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper);
}
.hero-card .hc-check svg { width: 12px; height: 12px; }
.hero-card .hc-tasks li.done .hc-check {
  background: var(--moss); color: var(--paper);
}
.hero-card .hc-tasks li.done {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--ink-3);
}
.hero-card .hc-tasks li.current .hc-check {
  background: var(--mars); position: relative;
}
.hero-card .hc-tasks li.current .hc-check::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--paper);
}
.hero-card .hc-tasks li.current { font-weight: 700; }
.hero-card .hc-bar {
  height: 18px;
  border: var(--stroke) solid var(--ink);
  background:
    repeating-linear-gradient(135deg, transparent 0 4px, rgba(var(--halftone-rgb),.14) 4px 5px),
    var(--paper-2);
  position: relative; overflow: hidden;
}
.hero-card .hc-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 62%;
  background: var(--mission);
  border-right: var(--stroke) solid var(--ink);
}
.hero-card .hc-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.hero-card-note {
  position: absolute;
  right: -18px; bottom: -36px;
  width: 200px;
  background: var(--mustard);
  border: var(--stroke) solid var(--ink);
  padding: 10px 12px 12px;
  transform: rotate(5.5deg);
  box-shadow: var(--shadow-1);
  z-index: 1;
}
.hero-card-note .hcn-tag {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.hero-card-note .hcn-body {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px; line-height: 1.35;
  color: var(--ink);
}
@media (max-width: 1000px) { .hero-card { display: none; } }

/* ─── CHAPTER FRAMEWORK ─────────────────────────────────────────────────
   2-col grid: narrow left margin for the sticky chapter mark; wide right
   column for head + body. Every direct child *except* .chapter-mark is
   explicitly placed in column 2 so .features / .shape-figure / .price-row
   never auto-flow into the narrow margin column. */
.chapter {
  display: grid;
  grid-template-columns: minmax(100px, 140px) minmax(0, 1fr);
  gap: var(--s-7);
  padding: var(--s-11) 0 var(--s-10);
  border-bottom: var(--stroke-heavy) solid var(--ink);
  position: relative;
}
.chapter > .chapter-mark {
  grid-column: 1;
  grid-row: 1 / -1;
}
.chapter > *:not(.chapter-mark) {
  grid-column: 2;
  min-width: 0;
}

.chapter-mark {
  position: sticky;
  top: 84px;
  align-self: start;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  z-index: 5;
}
.chapter-mark .cm-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.82;
  color: var(--mars);
  letter-spacing: -0.04em;
}
.chapter-mark .cm-eye {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-weight: 700;
  color: var(--ink-3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: flex-end;
}

.chapter-head {
  margin-bottom: var(--s-9);
}
.chapter-head .ch-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6vw, 84px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
  max-width: 18ch;
}

/* Lead paragraph below chapter title — plain typographic block, no drop cap. */
.lead {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: var(--s-6) 0 0;
  max-width: 52ch;
}

@media (max-width: 820px) {
  .chapter { grid-template-columns: 1fr; gap: var(--s-5); padding-top: var(--s-9); }
  .chapter > .chapter-mark,
  .chapter > *:not(.chapter-mark) { grid-column: 1; }
  .chapter > .chapter-mark { grid-row: auto; }
  .chapter-mark {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
  }
  .chapter-mark .cm-eye { writing-mode: horizontal-tb; transform: none; }
  .chapter-head .ch-title { max-width: 100%; }
}

/* ─── SHAPE FIGURE · 4 nested boxes (Project ⊃ Stage ⊃ Task ⊃ Subtask) ──
   Each layer is a hollow box with an ink keyline and a fieldset-style
   label tag in its top-left corner. Layers reveal in sequence on scroll
   (outermost first, like a Russian doll opening). The innermost layer
   (Subtask) is a solid mission-blue block to read as "the atom". */
.shape-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shape {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-7) 0 var(--s-5);
}
.shape-box {
  position: relative;
  background: var(--paper);
  border: var(--stroke-bold) solid var(--ink);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 550ms var(--ease-mech), transform 550ms var(--ease-mech);
}
/* Cascading reveal — when .shape enters viewport, ALL nested .shape-box
   descendants animate to their "in" state. The per-depth selectors only
   set transition-delay so the layers arrive in sequence (outer first,
   like a Russian doll opening). Previously only the direct-child rule
   set opacity:1, so only layer-1 ever became visible. */
.shape.in .shape-box                                          { opacity: 1; transform: scale(1); }
.shape.in > .shape-box                                        { transition-delay: 0ms; }
.shape.in > .shape-box > .shape-box                           { transition-delay: 180ms; }
.shape.in > .shape-box > .shape-box > .shape-box              { transition-delay: 360ms; }
.shape.in > .shape-box > .shape-box > .shape-box > .shape-box { transition-delay: 540ms; }
@media (prefers-reduced-motion: reduce) {
  .shape-box { opacity: 1; transform: none; transition: none; }
}

.layer-1 { padding: clamp(56px, 7vw, 80px) clamp(48px, 5vw, 64px) clamp(44px, 5vw, 56px); }
.layer-2 { padding: clamp(44px, 5.5vw, 60px) clamp(36px, 4vw, 48px) clamp(34px, 4vw, 44px); background: var(--paper); }
.layer-3 { padding: clamp(36px, 4.5vw, 48px) clamp(28px, 3vw, 36px) clamp(28px, 3vw, 36px); background: var(--paper); }
.layer-4 {
  padding: clamp(28px, 4vw, 40px) clamp(48px, 6vw, 68px);
  background: var(--mission);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.shape-label {
  position: absolute;
  top: -18px;
  left: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  padding: 7px 14px 6px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
}
.shape-label::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
}
.layer-1 > .shape-label::before { background: var(--mars); }
.layer-2 > .shape-label::before { background: var(--mustard); }
.layer-3 > .shape-label::before { background: var(--moss); }
.layer-4 > .shape-label {
  background: var(--mission);
  color: var(--paper);
  border-color: var(--paper);
}
.layer-4 > .shape-label::before { background: var(--paper); }

.shape-caption {
  margin-top: var(--s-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  max-width: 60ch;
}

/* ─── FEATURES · vertical numbered list with mars red ornaments ────────── */
.features {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--stroke) solid var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
}
.feature {
  display: grid;
  grid-template-columns: minmax(72px, 96px) 1fr;
  gap: var(--s-6);
  align-items: baseline;
  padding: var(--s-7) 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-mech), transform 700ms var(--ease-mech);
}
.feature.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .feature { opacity: 1; transform: none; transition: none; }
}
.feature .f-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  color: var(--mars);
  letter-spacing: -0.04em;
}
.feature .f-body {
  display: grid; gap: var(--s-3);
  max-width: 58ch;
}
.feature .f-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
}
.feature .f-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body-lg);
  line-height: 1.55;
}

/* Ornament between feature items — thin rule + mars diamond, centred */
.features .ornament {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 0 calc(96px + var(--s-6));
}
.features .ornament::before,
.features .ornament::after {
  content: "";
  flex: 1; height: 1px;
  background: var(--ink-3);
  opacity: 0.45;
}
.features .ornament span {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--mars);
  transform: rotate(45deg);
}
@media (max-width: 720px) {
  .feature { grid-template-columns: auto 1fr; gap: var(--s-4); }
  .features .ornament { padding-left: 0; }
}

/* ─── PRICING TILES · restored two-tile layout + corner sticker tags ──── */
/* Any chapter that is the last child of its container drops its bottom
   border. Otherwise its 4pt bottom border sits flush against the colophon's
   4pt top border and reads as a doubled 8pt line. */
.chapter:last-child { border-bottom: none; }

.price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  margin-top: var(--s-4);
}
.price-tile {
  background: var(--paper);
  border: var(--stroke-bold) solid var(--ink);
  padding: var(--s-8) var(--s-7) var(--s-7);
  display: grid;
  gap: var(--s-4);
  box-shadow: var(--shadow-2);
  position: relative;
  transition: transform 240ms var(--ease-mech), box-shadow 240ms var(--ease-mech);
  opacity: 0;
  transform: translateY(18px);
  /* The reveal-up transition + the hover transition compose via a transition
     list — both transform and box-shadow are interpolated. */
}
.price-tile.in { opacity: 1; transform: translateY(0); }
.price-tile.in:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
}
.price-tile.pro {
  background: var(--ink);
  color: var(--paper);
}
.price-tile.pro .tile-list,
.price-tile.pro .tile-cta { color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .price-tile { opacity: 1; transform: none; transition: none; }
}

/* Corner sticker tag — like a printed paper label stuck on the top right.
   Slight rotation, hard offset shadow, mars (free) or mustard (pro). */
.tile-tag {
  position: absolute;
  top: -14px;
  right: 20px;
  background: var(--mars);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  padding: 6px 14px 5px;
  text-transform: uppercase;
  border: var(--stroke-bold) solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(4deg);
  z-index: 2;
}
.tile-tag.tag-pro {
  background: var(--mustard);
  color: var(--ink);
  transform: rotate(-5deg);
}

.tile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: var(--s-3) 0 0;
}
.tile-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  line-height: 1;
}
.tile-price .currency {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--ink-3);
}
.price-tile.pro .tile-price .currency { color: var(--paper-2); }
.tile-price .tile-unit {
  font-size: 0.30em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.price-tile.pro .tile-price .tile-unit { color: var(--paper-2); }

.tile-list {
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
  border-top: var(--stroke-thin) solid currentColor;
  opacity: 0.92;
}
.price-tile.pro .tile-list { border-top-color: var(--paper-2); opacity: 1; }
.tile-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s-3);
  font-size: var(--t-body);
  line-height: 1.5;
}
.tile-list li::before {
  content: "·";
  font-family: var(--font-mono);
  color: var(--mars);
  font-weight: 700;
}
.price-tile.pro .tile-list li::before { color: var(--mustard); }

.tile-cta {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--mustard);
  width: max-content;
  border-bottom: var(--stroke) solid var(--mustard);
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.tile-cta:hover { color: var(--paper); border-color: var(--paper); }

.price-note {
  margin: var(--s-7) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
/* Small mars "+" mark before the price note, like a printer's bullet. */
.price-note::before {
  content: "+ ";
  font-weight: 700;
  color: var(--mars);
  margin-right: 2px;
}

/* USD/regional pricing disclaimer — smaller and quieter than .price-note,
   sits right under it to clarify currency without competing with the deal. */
.price-disclaimer {
  margin: var(--s-3) auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  line-height: 1.55;
  color: var(--ink-3);
  text-transform: uppercase;
  max-width: 60ch;
}

@media (max-width: 720px) {
  .price-row { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ─── COLOPHON ─────────────────────────────────────────────────────────── */
.colophon {
  margin: 0 auto;
  padding: var(--s-9) clamp(20px, 4vw, 56px) var(--s-9);
  border-top: var(--stroke-heavy) solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.6fr) auto;
  gap: var(--s-7);
  align-items: start;
  position: relative;
  max-width: 1320px;
}
.colophon h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-4);
  color: var(--ink);
}
.colophon h3 .dot { width: 0.18em; height: 0.18em; vertical-align: 6%; }
.colophon .col-left p {
  margin: 0;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1.65;
}
.colophon .col-mid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-5);
}
.colophon .col-mid h5 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.colophon .col-mid ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.colophon .col-mid a,
.colophon .col-mid li {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-2);
}
.colophon .col-mid a:hover { color: var(--mars); }
.colophon .col-right {
  justify-self: end;
  align-self: start;
  padding-top: var(--s-2);
}
@media (max-width: 900px) {
  .colophon { grid-template-columns: 1fr; gap: var(--s-6); }
  .colophon .col-right { justify-self: start; }
  .colophon .col-mid { grid-template-columns: 1fr 1fr; }
}

.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--mars);
  border: 3px solid var(--mars);
  padding: 8px 16px 7px;
  text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0.88;
  white-space: nowrap;
}
.stamp.large {
  font-size: 22px;
  padding: 14px 26px 12px;
  border-width: 4px;
  letter-spacing: 0.18em;
}

/* ─── CHANGELOG · release entries with version, date, sections ────────── */
.releases {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  display: grid;
  gap: var(--s-8);
}
.release {
  background: var(--paper);
  border: var(--stroke-bold) solid var(--ink);
  padding: var(--s-7) var(--s-6) var(--s-6);
  position: relative;
  box-shadow: var(--shadow-1);
}
.rel-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: var(--stroke) solid var(--ink);
  margin-bottom: var(--s-5);
}
.rel-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--paper);
  background: var(--mars);
  padding: 4px 10px 3px;
  border: var(--stroke-thin) solid var(--ink);
  white-space: nowrap;
}
.rel-version {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
  line-height: 1;
}
.rel-date {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  white-space: nowrap;
  justify-self: end;
}
.rel-summary {
  margin: 0 0 var(--s-6);
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
}
.rel-section {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mars);
  margin: var(--s-6) 0 var(--s-3);
  padding-left: var(--s-4);
  position: relative;
}
.rel-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: var(--stroke-bold);
  background: var(--mars);
}
.rel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: grid;
  gap: 8px;
}
.rel-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s-3);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-2);
}
.rel-list li::before {
  content: "·";
  font-family: var(--font-mono);
  color: var(--mars);
  font-weight: 700;
}
@media (max-width: 720px) {
  .rel-head { grid-template-columns: auto 1fr; row-gap: var(--s-2); }
  .rel-date { grid-column: 1 / -1; justify-self: start; }
}

/* ─── PROSE · used by privacy / terms long-form text inside lang-blocks ─
   Plain typographic block. Headings sit left-flush with body so nothing
   reads as offset. Widened to ~70ch so the column doesn't feel cramped. */
.prose {
  max-width: 70ch;
  margin-top: var(--s-5);
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: var(--s-8) 0 var(--s-3);
  color: var(--ink);
}
.prose h3:first-child { margin-top: 0; }
.prose p {
  margin: 0 0 var(--s-4);
  font-size: var(--t-body-lg);
  line-height: 1.65;
  color: var(--ink-2);
}
.prose p:last-of-type { margin-bottom: var(--s-5); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose ul {
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
/* Each li uses a hanging indent (padding-left) and an absolutely-positioned
   mars bullet in that gutter. NOT a grid — grid would treat ::before, the
   <strong>, and the trailing text node as three separate grid items, which
   collapses the long text into the narrow first column (the bug). */
.prose ul li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: var(--s-3);
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--ink-2);
}
.prose ul li:last-child { margin-bottom: 0; }
.prose ul li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  text-align: center;
  font-family: var(--font-mono);
  color: var(--mars);
  font-weight: 700;
}
.prose a {
  color: var(--mars);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--ink); }
.prose-meta {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: var(--stroke-thin) solid var(--ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* ─── PRICING PAGE · 3-plan grid, comparison table, FAQ ───────────────── */

/* Three plan cards side-by-side. On narrow viewports they stack. */
.plans-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-4);
}
.plan-card {
  background: var(--paper);
  border: var(--stroke-bold) solid var(--ink);
  padding: var(--s-7) var(--s-5) var(--s-6);
  display: grid;
  gap: var(--s-3);
  box-shadow: var(--shadow-1);
  position: relative;
  transition: transform 240ms var(--ease-mech), box-shadow 240ms var(--ease-mech);
}
.plan-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-2);
}
.plan-card.featured {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-2);
}
.plan-card.featured:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
}

/* Corner tag — same paper-sticker treatment as homepage tile-tag */
.pc-tag {
  position: absolute;
  top: -14px;
  right: 16px;
  background: var(--mars);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 5px 11px 4px;
  text-transform: uppercase;
  border: var(--stroke) solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(4deg);
  z-index: 2;
  white-space: nowrap;
}
.pc-tag.tag-best {
  background: var(--mustard);
  color: var(--ink);
  transform: rotate(-5deg);
}

.pc-eye {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-weight: 700;
  color: var(--ink-3);
}
.plan-card.featured .pc-eye { color: var(--paper-2); }

.pc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}
.pc-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  margin: var(--s-2) 0 var(--s-3);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.pc-price .currency {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--ink-3);
}
.plan-card.featured .pc-price .currency { color: var(--paper-2); }
.pc-unit {
  font-size: 0.34em;
  font-weight: 500;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-left: 4px;
}
.plan-card.featured .pc-unit { color: var(--paper-2); }

.pc-list {
  margin: var(--s-2) 0;
  padding: var(--s-4) 0 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
  border-top: var(--stroke-thin) solid var(--ink-4);
  font-size: var(--t-body);
  line-height: 1.5;
}
.plan-card.featured .pc-list { border-top-color: var(--paper-2); }
.pc-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s-3);
}
.pc-list li::before {
  content: "·";
  font-family: var(--font-mono);
  color: var(--mars);
  font-weight: 700;
}
.plan-card.featured .pc-list li::before { color: var(--mustard); }

.pc-cta {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--mars);
  width: max-content;
  border-bottom: var(--stroke) solid var(--mars);
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.plan-card.featured .pc-cta { color: var(--mustard); border-color: var(--mustard); }
.pc-cta:hover { color: var(--ink); border-color: var(--ink); }
.plan-card.featured .pc-cta:hover { color: var(--paper); border-color: var(--paper); }

.plans-note {
  margin: var(--s-7) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .plans-3 { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ─── COMPARISON TABLE ────────────────────────────────────────────────── */
.cmp-wrap {
  overflow-x: auto;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.cmp {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
}
.cmp th,
.cmp td {
  padding: 12px var(--s-4);
  font-family: var(--font-display);
  font-size: 14px;
  text-align: left;
  vertical-align: baseline;
}
.cmp thead th {
  background: var(--paper-2);
  border-bottom: var(--stroke) solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding-top: 14px;
  padding-bottom: 12px;
}
.cmp thead th:nth-child(2),
.cmp thead th:nth-child(3) { width: 22%; text-align: center; }
.cmp thead th:nth-child(3) { color: var(--mars); }

.cmp tbody td { border-top: var(--stroke-thin) solid var(--ink-4); }
.cmp tbody tr:first-child td { border-top: none; }
.cmp tbody td:nth-child(1) { color: var(--ink-2); }
.cmp tbody td:nth-child(2),
.cmp tbody td:nth-child(3) {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.cmp tbody td.cmp-dash {
  color: var(--ink-4);
}

.cmp-note {
  margin: var(--s-6) 0 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 60ch;
}

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.faq {
  margin: var(--s-4) 0 0;
  padding: 0;
  border-top: var(--stroke) solid var(--ink);
}
.faq-item {
  padding: var(--s-6) 0;
  border-bottom: var(--stroke-thin) solid var(--ink-4);
}
.faq-item:last-child {
  border-bottom: var(--stroke) solid var(--ink);
}
.faq-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 var(--s-3);
  color: var(--ink);
}
.faq-a {
  margin: 0;
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 64ch;
}
.faq-a a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  color: var(--mars);
}
.faq-a a:hover { color: var(--ink); }

/* ─── SCROLL REVEAL (generic .reveal class) ────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease-mech), transform 600ms var(--ease-mech);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}