/* ============================================================================
   Pling — marketing site stylesheet.

   The palette is NOT invented for the web: every value below is lifted from the
   app's own semantic tokens (pling-rn/theme/semantic.ts DARK + theme/tokens.ts),
   so the site and the product read as one thing. If the app's palette moves,
   move these to match rather than eyeballing something close.

   The one invariant carried over from the app, and it is load-bearing:
   GREEN MEANS AVAILABILITY, NOTHING ELSE. Not a CTA, not a checkmark, not a
   "success" state. The moment green means two things it stops meaning "free",
   which is the single signal this whole product is built on.

   Deliberately separate from landing.css — app.html / demo.html / groups.html
   and the rest of the prototype still ride that file, and this rebuild should
   not disturb them.
   ============================================================================ */

:root {
  /* ── Environment ─────────────────────────────────────────── */
  --bg: #14111c;
  --bg-elevated: #16131f;

  /* ── Surfaces ────────────────────────────────────────────── */
  --card: #1e1a29;
  --card-quiet: #1a1724;
  --tile: #2a2338;
  --tile-quiet: #221d2e;
  --chip: #211c2e;

  /* ── Text ────────────────────────────────────────────────── */
  --text: #f0edf8;
  --text-2: #c8c2d8;
  --text-3: #857e99;
  --text-4: #6a6480;

  /* ── Lines ───────────────────────────────────────────────── */
  --hair: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* ── Action (coral ramp) — every tappable thing, and only those ── */
  --coral: #ff8f5e;
  --coral-end: #e85c6e;
  --coral-soft: rgba(255, 143, 94, 0.22);

  /* ── Availability. GREEN IS ONLY EVER THIS. ──────────────── */
  --free: #34e89e;
  --free-pill: rgba(52, 232, 158, 0.12);
  --free-border: rgba(52, 232, 158, 0.3);

  /* ── Supporting accents ──────────────────────────────────── */
  --amber: #ffce7a;
  --violet: #8b7ce0;
  --violet-light: #c9a7ff;

  /* The app's signature "free room" — the ambient gradient behind Home when
     you're available. It is the most recognisable surface in the product, so
     the hero borrows it wholesale rather than inventing a web-only look. */
  --room-1: #e8656b;
  --room-2: #d55c82;
  --room-3: #a94f92;
  --room-4: #67479f;

  --radius: 26px;
  --radius-sm: 16px;
  --radius-lg: 34px;

  --shell: 1120px;
  --gutter: clamp(20px, 5vw, 40px);

  --font: "Outfit", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Content movement in the app is spring-driven; CSS has no springs, so this
     is the closest legible ease — overshoot-free, fast out, slow in. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* clears the sticky nav on anchor jumps */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* One visible focus treatment for the whole site. Keyboard users get a ring on
   everything interactive; pointer users never see it. */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Wordmark
   ========================================================================== */
.mark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.mark-bang {
  background: linear-gradient(135deg, var(--coral), var(--coral-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================================
   Nav
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  background: rgba(20, 17, 28, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav[data-scrolled="true"] {
  border-bottom-color: var(--hair);
  background: rgba(20, 17, 28, 0.88);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}
.nav-mark { font-size: 22px; }
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
}
.nav-links a { transition: color 0.2s var(--ease); }
.nav-links a:hover { color: var(--text); }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-inner { gap: 16px; }
}

/* ============================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 15px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  /* The app fires press feedback on press-IN, not on release — mirrored here so
     the site's buttons feel like the product's. */
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
    background 0.2s var(--ease);
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: linear-gradient(135deg, var(--coral), var(--coral-end));
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(232, 92, 110, 0.65);
}
.btn-primary:hover { box-shadow: 0 14px 38px -10px rgba(232, 92, 110, 0.8); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.btn-sm { height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 12px; }

/* ============================================================================
   Section furniture
   ========================================================================== */
.sec { padding: clamp(76px, 11vw, 132px) 0; }
.sec-tight { padding: clamp(56px, 8vw, 92px) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--coral), transparent);
}

.h2 {
  font-size: clamp(30px, 5.2vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.h2 em {
  font-style: normal;
  background: linear-gradient(115deg, var(--coral), var(--coral-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  margin-top: 18px;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.62;
  color: var(--text-3);
  max-width: 56ch;
}

/* ============================================================================
   Hero — the app's "free room" gradient, full bleed
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 10vw, 108px) 0 clamp(72px, 11vw, 124px);
}
/* Two blooms rather than one flat linear-gradient: the app's room is a 4-stop
   ambient wash that pools warm at the top and cools toward the bottom, and a
   single linear ramp reads noticeably flatter than the real screen. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.hero::before {
  width: min(90vw, 900px);
  aspect-ratio: 1.35;
  top: -32%;
  left: 50%;
  translate: -50% 0;
  background: radial-gradient(
    ellipse at 50% 45%,
    var(--room-1) 0%,
    var(--room-2) 38%,
    var(--room-3) 66%,
    transparent 78%
  );
  opacity: 0.62;
}
.hero::after {
  width: min(70vw, 640px);
  aspect-ratio: 1;
  top: 22%;
  right: -14%;
  background: radial-gradient(circle, var(--room-4) 0%, transparent 68%);
  opacity: 0.5;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 15px 0 11px;
  border-radius: 999px;
  background: var(--free-pill);
  border: 1px solid var(--free-border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--free);
  margin-bottom: 24px;
}
/* The only green dot on the page, and it means exactly what it means in the
   app: someone is free right now. */
.dot-free {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--free);
  box-shadow: 0 0 0 4px rgba(52, 232, 158, 0.16);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52, 232, 158, 0.16); }
  50% { box-shadow: 0 0 0 8px rgba(52, 232, 158, 0.04); }
}

.hero h1 {
  /* Capped at 60, not 74: the hero is a two-column grid, so the headline only
     ever has ~half the shell to work with. At 74 it broke to four lines on a
     desktop viewport and pushed the CTAs below the fold. */
  font-size: clamp(37px, 5.4vw, 60px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.hero h1 span {
  display: block;
  color: var(--text-2);
}
.hero-sub {
  margin-top: 22px;
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.58;
  color: var(--text-2);
  max-width: 46ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}
.hero-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-4);
}

/* ── The status card: the app's actual hero control, in miniature ── */
.status-card {
  background: rgba(30, 26, 41, 0.72);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.status-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--free-pill);
  border: 1px solid var(--free-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--free);
}

/* Slide-to-set control — the home screen's signature affordance. */
.slider {
  position: relative;
  height: 56px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 5px;
  margin-bottom: 22px;
}
.slider-knob {
  width: 50%;
  height: 100%;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--coral), var(--coral-end));
  box-shadow: 0 8px 22px -8px rgba(232, 92, 110, 0.8);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  animation: slide 6s var(--ease) infinite;
}
@keyframes slide {
  0%, 42% { transform: translateX(0); }
  50%, 92% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
.slider-track-label {
  position: absolute;
  right: 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-4);
}

.roster { display: grid; gap: 3px; }
.roster-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--hair);
}
.roster-row:first-child { border-top: 0; }
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  flex: none;
}
.roster-name { font-size: 15px; font-weight: 600; }
.roster-sub { font-size: 13px; color: var(--text-4); }
.roster-meta { margin-left: auto; text-align: right; }
.roster-timer {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--free);
  font-variant-numeric: tabular-nums;
}
.roster-off { font-size: 13px; color: var(--text-4); font-weight: 600; }

/* ============================================================================
   "What we left out" — moved up front. This is the sharpest thing the product
   has to say, so it gets the strongest visual treatment on the page.
   ========================================================================== */
.cut-list {
  display: grid;
  gap: 0;
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--hair);
}
.cut {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(16px, 4vw, 48px);
  align-items: baseline;
  padding: clamp(24px, 3.4vw, 34px) 0;
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 720px) {
  .cut { grid-template-columns: 1fr; gap: 8px; }
}
.cut-name {
  font-size: clamp(24px, 4.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-2);
  width: fit-content;
}
/* The strike is the argument, so it wraps only the words actually being cut —
   "Always-on" is struck but "location" is not, because location isn't removed,
   it's just off until you turn it on. Drawn rather than text-decoration, which
   can't be coloured independently of the text at this weight. */
.cut-name s {
  position: relative;
  text-decoration: none;
  color: var(--text-4);
}
.cut-name s::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--coral), var(--coral-end));
}
.cut-why {
  font-size: clamp(15.5px, 1.9vw, 17.5px);
  line-height: 1.6;
  color: var(--text-3);
  padding-top: 6px;
}
.cut-why b { color: var(--text); font-weight: 600; }

.cut-kicker {
  margin-top: clamp(36px, 5vw, 52px);
  font-size: clamp(19px, 3vw, 27px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
  max-width: 30ch;
}
.cut-kicker em {
  font-style: normal;
  background: linear-gradient(115deg, var(--coral), var(--coral-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================================
   Two situations
   ========================================================================== */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 26px);
  margin-top: clamp(38px, 5vw, 58px);
}
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } }

.case {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 38px);
}
/* A faint accent wash so the two cases read as different moods without
   inventing a second palette: warm for spontaneous, cool for planned. */
.case::before {
  content: "";
  position: absolute;
  inset: -40% 40% 60% -20%;
  background: radial-gradient(circle, var(--wash, var(--coral)) 0%, transparent 70%);
  opacity: 0.14;
  pointer-events: none;
}
.case-when {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.case h3 {
  margin-top: 12px;
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.case p {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1.62;
}
.case-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
}

/* ============================================================================
   Capability cards
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.2vw, 22px);
  margin-top: clamp(38px, 5vw, 56px);
}
.card {
  background: var(--card-quiet);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px 32px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--tile);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  color: var(--coral);
}
.card h3 {
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.card p {
  margin-top: 11px;
  color: var(--text-3);
  font-size: 15.5px;
  line-height: 1.62;
}

/* ============================================================================
   Demo strip
   ========================================================================== */
.demo {
  background: linear-gradient(160deg, var(--card) 0%, var(--card-quiet) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 780px) {
  .demo { grid-template-columns: 1fr; }
}
.demo h2 {
  font-size: clamp(25px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.12;
}
.demo p { margin-top: 13px; color: var(--text-3); max-width: 46ch; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================================
   FAQ — native <details>, so it works with no JS and is keyboard-operable
   ========================================================================== */
.faq { margin-top: clamp(34px, 4.5vw, 50px); border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 4px;
  cursor: pointer;
  font-size: clamp(16.5px, 2.1vw, 19px);
  font-weight: 600;
  letter-spacing: -0.015em;
  list-style: none;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--coral); }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--text-4);
  border-bottom: 2px solid var(--text-4);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.28s var(--ease), border-color 0.2s var(--ease);
}
.faq details[open] summary::after {
  rotate: -135deg;
  translate: 0 2px;
  border-color: var(--coral);
}
.faq-body {
  padding: 0 4px 26px;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1.66;
  max-width: 62ch;
}
.faq-body b { color: var(--text-2); font-weight: 600; }

/* ============================================================================
   Join
   ========================================================================== */
.join {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  padding: clamp(40px, 6vw, 72px) clamp(26px, 5vw, 60px);
  text-align: center;
  background: var(--card);
}
.join::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -60% -10% 40%;
  background: radial-gradient(
    ellipse at 50% 50%,
    var(--room-2) 0%,
    var(--room-4) 45%,
    transparent 72%
  );
  opacity: 0.3;
  filter: blur(70px);
  pointer-events: none;
}
.join > * { position: relative; z-index: 1; }
.join h2 {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.join p {
  margin: 16px auto 0;
  color: var(--text-2);
  max-width: 46ch;
  font-size: 17px;
}

.signup {
  display: flex;
  gap: 10px;
  margin: 30px auto 0;
  max-width: 440px;
}
@media (max-width: 520px) { .signup { flex-direction: column; } }

.signup input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border-radius: 15px;
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px minimum, or iOS Safari zooms the page on focus */
}
.signup input::placeholder { color: var(--text-4); }
.signup input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-soft);
}
.signup-error input { border-color: var(--coral-end); }

.signup-msg {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--free); /* legitimate: this confirms you're on the availability list */
}
.signup-fine { margin-top: 14px; font-size: 13.5px; color: var(--text-4); }

/* ============================================================================
   Footer
   ========================================================================== */
.foot {
  border-top: 1px solid var(--hair);
  padding: 46px 0 60px;
  margin-top: clamp(60px, 8vw, 96px);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.foot-mark { font-size: 20px; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: auto;
  font-size: 14.5px;
  color: var(--text-3);
}
.foot-links a:hover { color: var(--text); }
.foot-legal {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--text-4);
}

/* ============================================================================
   Long-form document pages (privacy, support, copyright).

   These exist for App Store review as much as for people: Apple requires a
   reachable, readable privacy-policy URL, and a raw .MD file served by GitHub
   Pages is delivered as plain text or a download — which is what a reviewer
   would have hit before. Same shell, same palette, narrower measure.
   ========================================================================== */
.doc {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 84px) 0 clamp(60px, 8vw, 100px);
}
.doc h1 {
  font-size: clamp(32px, 5.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.doc-updated {
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-4);
}
.doc h2 {
  margin-top: clamp(40px, 5vw, 56px);
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.doc h2 span { color: var(--text-4); font-weight: 600; }
.doc p, .doc li {
  margin-top: 15px;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.68;
}
.doc ul { margin-top: 6px; }
.doc li {
  position: relative;
  padding-left: 20px;
}
.doc li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--coral);
}
.doc a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.doc b, .doc strong { color: var(--text); font-weight: 600; }
.doc hr {
  margin: clamp(40px, 5vw, 56px) 0 0;
  border: 0;
  border-top: 1px solid var(--hair);
}

.doc-note {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--card-quiet);
  border: 1px solid var(--border);
  border-left: 3px solid var(--coral);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-3);
}

/* Data table — collapses to stacked blocks on narrow screens rather than
   forcing a horizontal scroll on a legal page. */
.doc-table { margin-top: 22px; display: grid; gap: 10px; }
.doc-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 0.8fr);
  gap: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--card-quiet);
  border: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-3);
}
/* Scoped to the LABEL cell only. Applied to every `b` in the row it also caught
   emphasis inside the prose cell and knocked those words onto their own line. */
.doc-row > span:first-child b { display: block; margin-bottom: 3px; }
.doc-row b { color: var(--text); font-weight: 600; }
.doc-row-req { color: var(--text-4); }
@media (max-width: 720px) {
  .doc-row { grid-template-columns: 1fr; gap: 8px; }
  .doc-row-req { font-size: 13.5px; }
}

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
}
.doc-back:hover { color: var(--coral); }

/* ============================================================================
   Scroll reveal. Opt-IN via .reveal, and the visible state is applied by JS —
   so if JS never runs, nothing is stuck invisible.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Honour the OS setting: no drifting, no pulsing, no sliding knob. Everything
   lands in its final state immediately. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}