/* ================================================================
   periocast.app — surgical-drape green drench
   Fonts: Bricolage Grotesque (voice) + Spline Sans Mono (chart)
   ================================================================ */

:root {
  --drape:    oklch(0.315 0.065 154);
  --drape-2:  oklch(0.365 0.07  152);
  --drape-3:  oklch(0.26 0.058 157);
  --drape-4:  oklch(0.215 0.05 159);
  --enamel:   oklch(0.97 0.008 120);
  --enamel-dim: oklch(0.84 0.025 140);
  --enamel-faint: oklch(0.72 0.03 145);
  --bop:      oklch(0.62 0.21 25);
  --bop-text: oklch(0.78 0.15 25); /* readable red for small text on the drape */
  --bop-soft: oklch(0.62 0.21 25 / 0.16);
  --probe:    oklch(0.85 0.11 165);
  --probe-deep: oklch(0.66 0.12 160);
  --screen:   oklch(0.985 0.005 140);
  --screen-ink: oklch(0.26 0.04 155);
  --screen-line: oklch(0.90 0.015 150);
  --line:     oklch(0.42 0.055 150);
  --line-soft: oklch(0.36 0.055 152);

  --font-voice: "Bricolage Grotesque", system-ui, sans-serif;
  --font-chart: "Spline Sans Mono", ui-monospace, monospace;

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3rem);
  --step-hero: clamp(2.8rem, 1.8rem + 4.6vw, 5.2rem);

  --space-s: clamp(1rem, 2vw, 1.5rem);
  --space-m: clamp(2rem, 4vw, 3.5rem);
  --space-l: clamp(4rem, 9vw, 8rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  --z-nav: 30; --z-caption: 5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--drape);
  color: var(--enamel);
  font-family: var(--font-voice);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.mono { font-family: var(--font-chart); font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; line-height: 1.06; letter-spacing: -0.025em; margin: 0; font-weight: 720; }
p { text-wrap: pretty; }
a { color: inherit; }
img, svg, canvas { max-width: 100%; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: fixed; top: -100%; left: 1rem; z-index: 99; background: var(--enamel); color: var(--drape-4); padding: 0.6rem 1rem; border-radius: 0 0 10px 10px; transition: top 0.2s; }
.skip:focus { top: 0; }

/* ---------------- nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.8rem clamp(1rem, 4vw, 2.5rem);
  background: oklch(0.225 0.05 158 / 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.wordmark { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 640; font-size: 1.2rem; letter-spacing: -0.02em; }
.wordmark b { font-weight: 800; }
.wordmark-glyph { width: 1.7rem; height: 1.7rem; }
.wg-tooth { fill: var(--enamel); }
.wg-wave rect { fill: var(--probe); }
.nav-links { display: flex; gap: 1.4rem; margin-inline: auto; }
.nav-links a { text-decoration: none; color: var(--enamel-dim); font-size: 0.95rem; font-weight: 480; transition: color 0.18s; }
.nav-links a:hover { color: var(--enamel); }
.nav-side { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.lang-btn {
  appearance: none; border: 0; background: transparent; color: var(--enamel-dim);
  font-family: var(--font-chart); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 0.42rem 0.75rem; min-height: 40px; min-width: 46px; cursor: pointer; transition: background 0.18s, color 0.18s;
}
.lang-btn.is-on { background: var(--enamel); color: var(--drape-4); }
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; row-gap: 0.15rem; padding-block: 0.6rem; }
  .nav-links { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 1.1rem; overflow-x: auto; padding-block: 0.25rem; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 0.85rem; white-space: nowrap; }
  .nav-side { margin-left: auto; }
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  border-radius: 12px; padding: 0.85rem 1.5rem;
  font-weight: 640; font-size: 1rem; letter-spacing: -0.01em;
  transition: transform 0.18s var(--ease), background 0.18s, color 0.18s, border-color 0.18s;
  cursor: pointer;
}
.btn:active { transform: scale(0.985); }
.btn-primary { background: var(--enamel); color: var(--drape-4); border: 1px solid var(--enamel); }
.btn-primary:hover { background: var(--probe); border-color: var(--probe); }
.btn-ghost { background: transparent; color: var(--enamel); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--enamel-dim); background: oklch(1 0 0 / 0.05); }
.btn-nav { padding: 0.5rem 1rem; font-size: 0.9rem; }
@media (max-width: 560px) { .nav-side .btn-nav { display: none; } }

/* ---------------- hero ---------------- */
.hero {
  overflow-x: clip;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: var(--space-m);
  max-width: 1200px; margin-inline: auto;
  padding: var(--space-l) clamp(1rem, 4vw, 2.5rem) var(--space-l);
  min-height: min(88vh, 60rem);
}
.hero-status { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.4rem; color: var(--enamel-dim); font-size: 0.8rem; letter-spacing: 0.04em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bop); box-shadow: 0 0 0 0 var(--bop-soft); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(0.62 0.21 25 / 0.5); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hero h1 { font-size: var(--step-hero); font-weight: 790; letter-spacing: -0.03em; }
.hero-sub { max-width: 46ch; color: var(--enamel-dim); font-size: var(--step-1); line-height: 1.5; margin: 1.5rem 0 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; list-style: none; padding: 0; margin: 2.4rem 0 0; color: var(--enamel-faint); font-size: 0.78rem; letter-spacing: 0.05em; }
.hero-chips li::before { content: "＋ "; color: var(--probe-deep); }

/* ---------------- phone / simulation ---------------- */
.hero-stage { display: grid; place-items: center; position: relative; }
.hero-stage::before {
  content: ""; position: absolute; inset: -12% -20%;
  background: radial-gradient(50% 45% at 50% 48%, oklch(0.85 0.11 165 / 0.14), transparent 70%);
  pointer-events: none;
}
.phone {
  position: relative; width: min(320px, 82vw);
  aspect-ratio: 9 / 17.2;
  background: var(--drape-4);
  border: 1px solid var(--line);
  border-radius: 42px; padding: 12px;
  box-shadow: 0 40px 90px -40px oklch(0.1 0.03 160 / 0.9), 0 0 0 6px oklch(0.19 0.045 160 / 0.6);
}
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 84px; height: 8px; border-radius: 99px; background: oklch(0.32 0.04 158); z-index: 2; }
.phone-screen {
  position: relative; height: 100%; overflow: hidden;
  background: var(--screen); color: var(--screen-ink);
  border-radius: 32px; display: flex; flex-direction: column;
}
.app-bar { display: flex; justify-content: space-between; align-items: center; padding: 2.4rem 1.1rem 0.7rem; font-size: 0.72rem; }
.app-patient { color: oklch(0.45 0.03 155); letter-spacing: 0.03em; }
.app-rec { display: flex; align-items: center; gap: 0.35rem; color: oklch(0.5 0.19 27); font-weight: 600; letter-spacing: 0.06em; }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bop); animation: pulse 1.6s infinite; }

.chart { padding: 0.4rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.68rem; color: oklch(0.45 0.03 155); letter-spacing: 0.05em; }
.ch-tooth { font-size: 1.5rem; font-weight: 600; color: var(--screen-ink); }
.chart-grid { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.chart-grid th, .chart-grid td {
  border: 1px solid var(--screen-line); text-align: center;
  height: 2.1rem; width: 20%; font-weight: 500;
}
.chart-grid thead th { height: 1.5rem; font-size: 0.62rem; color: oklch(0.55 0.025 150); font-weight: 600; letter-spacing: 0.08em; border-top: 0; border-inline: 0; }
.chart-grid tbody th { font-size: 0.72rem; color: oklch(0.45 0.03 155); background: oklch(0.955 0.008 145); }
.chart-grid td { position: relative; transition: background 0.3s; }
.chart-grid td.is-cursor { outline: 2px solid var(--probe-deep); outline-offset: -2px; background: oklch(0.85 0.11 165 / 0.12); }
.chart-grid td.is-filled { color: var(--screen-ink); font-weight: 600; }
.chart-grid td.is-warn { color: oklch(0.5 0.19 27); }
.chart-grid td.is-bop::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--bop); }
.chart-grid tr.is-skipped td { background: oklch(0.93 0.01 145); color: oklch(0.65 0.02 150); }
.chart-grid tr.is-skipped td:nth-child(3)::before { content: "—"; }
.idx-strip { display: flex; gap: 0.45rem; margin-top: auto; }
.idx-chip {
  flex: 1; text-align: center; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 0.45rem 0; border-radius: 8px;
  color: oklch(0.5 0.03 152); background: oklch(0.945 0.01 145);
}
.idx-chip.is-on { background: var(--screen-ink); color: var(--screen); }
.chart-totals { display: flex; justify-content: space-between; font-size: 0.7rem; color: oklch(0.45 0.03 155); letter-spacing: 0.04em; }
.chart-totals b { color: var(--screen-ink); font-weight: 600; }
#sim-bop.hot { color: oklch(0.5 0.19 27); }

.pdf-sheet {
  position: absolute; inset: auto 8% -2% 8%; height: 68%;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease);
  background: white; border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px -12px oklch(0.2 0.04 160 / 0.45);
}
.pdf-sheet.is-out { transform: translateY(0); }
.pdf-inner { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.2rem 1.1rem; height: 100%; }
.pdf-title { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.4 0.03 155); }
.pdf-lines { display: grid; gap: 0.55rem; }
.pdf-lines i { display: block; height: 7px; border-radius: 3px; background: oklch(0.92 0.01 145); }
.pdf-lines i:nth-child(2n) { width: 82%; }
.pdf-lines i:nth-child(3n) { width: 64%; }
.pdf-sig { margin-top: auto; font-size: 0.66rem; color: var(--probe-deep); font-weight: 600; }

.caption {
  position: absolute; left: 50%; bottom: -1.9rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.7rem;
  width: max-content; max-width: 94%;
  background: var(--drape-4); border: 1px solid var(--line);
  border-radius: 22px; padding: 0.55rem 1.1rem 0.55rem 0.8rem;
  z-index: var(--z-caption);
  box-shadow: 0 18px 40px -18px oklch(0.1 0.03 160);
}
.wave { display: block; flex-shrink: 0; }
.caption-text { font-size: 0.8rem; color: var(--enamel); letter-spacing: 0.01em; white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: var(--space-m); text-align: center; }
  .hero-stage { order: -1; margin-bottom: 2.6rem; }
  .hero-sub { margin-inline: auto; }
  .hero-ctas, .hero-chips, .hero-status { justify-content: center; }
}

/* ---------------- sections shared ---------------- */
section { max-width: 1200px; margin-inline: auto; padding: var(--space-l) clamp(1rem, 4vw, 2.5rem); scroll-margin-top: 5.5rem; }
section h2 { font-size: var(--step-3); max-width: 24ch; }
#waitlist { scroll-margin-top: 6.5rem; }

/* ---------------- problem ---------------- */
.problem { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-m); align-items: center; border-top: 1px solid var(--line-soft); }
.problem p { color: var(--enamel-dim); max-width: 58ch; }
.problem h2 { margin-bottom: 1.2rem; }
.paper { margin: 0; display: grid; gap: 0.8rem; justify-items: center; }
.paper-card {
  position: relative; width: min(380px, 100%);
  background: oklch(0.94 0.015 95); color: oklch(0.35 0.02 90);
  border-radius: 6px; padding: 1.3rem 1.4rem 1.6rem;
  transform: rotate(-1.6deg);
  box-shadow: 0 24px 60px -28px oklch(0.12 0.03 160 / 0.9);
}
.paper-title { font-size: 0.62rem; letter-spacing: 0.14em; color: oklch(0.45 0.02 90); }
.paper-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem 0; margin-top: 1rem; text-align: center; font-size: 0.95rem; border-block: 1px solid oklch(0.8 0.02 95); padding-block: 0.7rem; }
.p-wrong { color: oklch(0.5 0.19 27); text-decoration: line-through wavy oklch(0.5 0.19 27 / 0.7); }
.p-smudge { filter: blur(1.1px); opacity: 0.75; }
.paper-note { display: block; margin-top: 1rem; font-size: 0.78rem; font-style: italic; color: oklch(0.5 0.02 90); }
.bop-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--bop); opacity: 0.8; }
.bd-1 { top: 18%; right: 10%; } .bd-2 { bottom: 24%; left: 8%; width: 6px; height: 6px; } .bd-3 { bottom: 10%; right: 26%; width: 5px; height: 5px; }
.paper figcaption { color: var(--enamel-faint); font-size: 0.78rem; letter-spacing: 0.03em; text-align: center; }
@media (max-width: 860px) { .problem { grid-template-columns: 1fr; } }

/* ---------------- how ---------------- */
.how { border-top: 1px solid var(--line-soft); }
.how h2 { margin-bottom: var(--space-m); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.how-step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; max-width: 860px; }
.how-step:nth-child(2) { margin-left: clamp(0rem, 8vw, 7rem); }
.how-step:nth-child(3) { margin-left: clamp(0rem, 16vw, 14rem); }
.how-n {
  font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 300; line-height: 0.9;
  color: transparent; -webkit-text-stroke: 1.5px var(--probe-deep);
}
.how-body h3 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.how-body p { color: var(--enamel-dim); max-width: 52ch; margin: 0; }
.say { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1rem !important; padding: 0.5rem 0.95rem; border: 1px dashed var(--line); border-radius: 99px; font-size: 0.8rem; color: var(--enamel); }
.say-glyph { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
.say-glyph rect { fill: var(--probe); }
@media (max-width: 700px) { .how-step:nth-child(2), .how-step:nth-child(3) { margin-left: 0; } }

/* ---------------- tray ---------------- */
.tray { border-top: 1px solid var(--line-soft); }
.tray h2 { margin-bottom: var(--space-m); }
.tray-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden; }
.tool { grid-column: span 3; background: var(--drape); padding: clamp(1.4rem, 3vw, 2.2rem); }
.tool-wide { grid-column: span 6; background: var(--drape-3); }
.tool h3 { font-size: var(--step-1); margin-bottom: 0.55rem; letter-spacing: -0.015em; }
.tool p { margin: 0; color: var(--enamel-dim); font-size: 0.95rem; max-width: 62ch; }
.tool:not(.tool-wide):hover { background: var(--drape-2); transition: background 0.25s; }
@media (max-width: 640px) { .tool, .tool-wide { grid-column: span 6; } }

/* ---------------- why / gap ---------------- */
.why { border-top: 1px solid var(--line-soft); }
.why-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-s) var(--space-m); align-items: end; margin-bottom: var(--space-m); }
.why-head p { color: var(--enamel-dim); max-width: 56ch; margin: 0; }
@media (max-width: 860px) { .why-head { grid-template-columns: 1fr; } }
.gap-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 18px; }
.gap-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.gap-table thead th {
  text-align: left; font-size: 0.75rem; font-weight: 560; letter-spacing: 0.06em;
  color: var(--enamel-faint); padding: 1rem 1.3rem; border-bottom: 1px solid var(--line-soft);
}
.gap-table tbody th { text-align: left; font-family: var(--font-voice); font-weight: 620; font-size: 1rem; padding: 1.1rem 1.3rem; }
.gap-table tbody td { padding: 1.1rem 1.3rem; font-size: 0.85rem; color: var(--enamel-dim); }
.gap-table tbody tr + tr { border-top: 1px solid var(--line-soft); }
.gap-table tbody tr:not(.gap-us) td:nth-child(3) { color: var(--enamel-faint); }
.gap-us { background: var(--drape-2); }
.gap-us th { color: var(--probe); }
.gap-us td { color: var(--enamel) !important; font-weight: 500; }
.gap-us td:nth-child(3) { color: var(--probe) !important; font-weight: 700; }
.gap-note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--enamel-dim); letter-spacing: 0.03em; }

/* ---------------- real / roadmap ---------------- */
.real { border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-m); }
.real h2 { margin-bottom: 1.2rem; }
.real p { color: var(--enamel-dim); max-width: 56ch; }
.proof-row { display: flex; flex-wrap: wrap; gap: 2.2rem; margin: 2rem 0; }
.proof { display: flex; flex-direction: column; gap: 0.2rem; }
.proof b { font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 600; color: var(--enamel); letter-spacing: -0.02em; }
.proof span { font-size: 0.75rem; color: var(--enamel-faint); letter-spacing: 0.04em; max-width: 17ch; }
.road { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.road li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 1.2rem; padding: 1.3rem 0 1.3rem 1.4rem; border-left: 1px solid var(--line); position: relative; }
.road li::before { content: ""; position: absolute; left: -5px; top: 1.85rem; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.road li.road-now::before { background: var(--bop); }
.road-when { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--enamel); }
.road-now .road-when { color: var(--bop-text); }
.road-what { font-size: 0.85rem; color: var(--enamel-dim); line-height: 1.55; }
@media (max-width: 860px) { .real { grid-template-columns: 1fr; } }

/* ---------------- market ---------------- */
.market { border-top: 1px solid var(--line-soft); }
.market h2 { margin-bottom: var(--space-s); }
.market-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-s) var(--space-m); }
.market-cols p { color: var(--enamel-dim); max-width: 56ch; margin: 0; }
.market-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem;
  margin-top: var(--space-m); padding: 1.6rem 1rem;
  border-block: 1px solid var(--line-soft);
  font-size: clamp(0.85rem, 1.8vw, 1.05rem); letter-spacing: 0.05em; color: var(--enamel);
}
.ml-arrow { color: var(--probe-deep); font-size: 1.2em; }

/* ---------------- doors ---------------- */
.doors { border-top: 1px solid var(--line-soft); }
.doors h2 { margin-bottom: var(--space-m); }
.doors-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; align-items: stretch; }
.door { display: flex; flex-direction: column; gap: 0.9rem; border: 1px solid var(--line-soft); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.2rem); }
.door h3 { font-size: var(--step-1); }
.door p { margin: 0; color: var(--enamel-dim); font-size: 0.95rem; flex: 1; }
.door .btn { align-self: flex-start; }
.door-wait { background: var(--drape-2); border-color: var(--line); }
#waitlist-form { display: grid; gap: 0.7rem; }
#waitlist-form input, #waitlist-form select {
  width: 100%; background: var(--drape-4); color: var(--enamel);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.8rem 1rem; font-size: 0.9rem;
}
#waitlist-form input::placeholder { color: var(--enamel-faint); }
#waitlist-form input:focus-visible, #waitlist-form select:focus-visible, .btn:focus-visible, .lang-btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--probe); outline-offset: 2px; border-radius: 4px;
}
.nav-links a, footer a { padding-block: 0.4rem; }
#waitlist-form .btn { width: 100%; }
.wl-msg { margin: 0; min-height: 1.2em; font-size: 0.82rem; color: var(--probe); }
.wl-msg.is-err { color: var(--bop-text); }
.wl-msg a { color: var(--enamel); }
#waitlist-form input[aria-invalid="true"] { border-color: var(--bop-text); }

/* ---------------- footer ---------------- */
.footer { border-top: 1px solid var(--line-soft); background: var(--drape-3); padding: var(--space-m) clamp(1rem, 4vw, 2.5rem); }
.footer-note { max-width: 1200px; margin-inline: auto; }
.footer-note p:first-child { color: var(--enamel-dim); margin: 0 0 0.7rem; }
.footer-note .mono { font-size: 0.8rem; }
.footer-note a { color: var(--enamel); }
.footer-legal { max-width: 1200px; margin: 2.2rem auto 0; font-size: 0.72rem; color: var(--enamel-faint); letter-spacing: 0.03em; }

/* ---------------- reveals ---------------- */
.rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .js .rv.is-in { opacity: 1; transform: none; }
  .js .how-step.rv { transform: translateY(22px); }
  .js .how-step.rv.is-in { transform: none; }
  @media (min-width: 700px) {
    .js .how-step.rv { transform: translateX(-26px); }
    .js .how-step.rv.is-in { transform: none; }
  }
  .js .gap-table tbody tr.rv { transform: scale(0.985); }
  .js .gap-table tbody tr.rv.is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .rec-dot { animation: none; }
  html { scroll-behavior: auto; }
  .pdf-sheet { transition: none; }
}
@media print {
  .js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav, .caption { position: static; }
}

/* sim additions */
.sim-note { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.55 0.025 150); }
.idx-chip.is-pulse { background: var(--bop); color: white; transition: background 0.25s, color 0.25s; }