/* project5.ai — dark, technical, no framework.
   One self-hosted variable face + system mono. No external requests, ever. */

:root {
  color-scheme: dark;

  /* Warm near-black family — deliberately warm so the audit report the site links
     to (paper-toned) reads as the same house rather than a different product. */
  --bg: #0E0E0D;
  --bg-raised: #141413;
  --bg-panel: #171716;
  --line: #262624;
  --line-mid: #383833;
  --line-strong: #6E6C62;

  --text: #EDEDE7;
  --muted: #A3A39B;
  /* Tertiary text is set light enough to clear 4.5:1 on the *lightest* surface it
     lands on (--bg-raised), not just on the page background — the plate labels and
     the pillar "Kills" notes sit on raised panels. */
  --faint: #86857D;

  --accent: #D6C39A;
  --accent-dim: #8C7F60;
  --on-accent: #0E0E0D;

  --font: 'Space Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --radius: 3px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

/* ---------- Primitives ---------- */

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

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 7000;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
}

.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: 0.9rem;
  vertical-align: 0.28em;
  background: var(--accent);
}

.lead {
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}

.lead em { color: var(--text); font-style: italic; }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 160ms ease-out, border-color 160ms ease-out,
    color 160ms ease-out, transform 160ms ease-out;
}

.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: #E8DAB8;
  border-color: #E8DAB8;
}

.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--bg-raised);
  border-color: #9A978A;
}

.btn-ghost:active { transform: translateY(1px); }

.btn .arrow { transition: transform 160ms ease-out; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 14, 13, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.wordmark .five { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.site-nav a:not(.btn):hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-nav .btn {
  min-height: 44px;
  padding: 0 1.15rem;
  font-size: 0.875rem;
}

.site-nav a,
.site-nav .btn { white-space: nowrap; }

/* Selectors carry an element to match `.site-nav a:not(.btn)` above — a bare class
   loses on specificity and the link stays visible. The header sheds its optional
   links as it narrows so the wordmark and the CTA never wrap; both destinations
   remain reachable from the hero and the sample-audit section. */
@media (max-width: 719px) {
  .site-nav a.nav-link-secondary { display: none; }
}

@media (max-width: 539px) {
  .site-nav a.nav-link-compact { display: none; }
  .site-nav .btn { padding: 0 0.95rem; font-size: 0.8125rem; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  /* Top pad is capped at 8rem rather than 9: on a first visit the consent banner
     occupies the bottom ~118px of the viewport, and the extra rem was enough to push
     the primary CTA underneath it at 1440x900. */
  padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* Faint engineering grid, faded out with a mask so it never fights the type. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(237, 237, 231, 0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237, 237, 231, 0.038) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(88% 74% at 50% 6%, #000 0%, transparent 72%);
  mask-image: radial-gradient(88% 74% at 50% 6%, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: -30% 0 auto;
  height: 130%;
  z-index: -1;
  background: radial-gradient(58% 46% at 50% 22%, rgba(214, 195, 154, 0.10), transparent 68%);
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(2.5rem, 1.35rem + 5.1vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 16ch;
  margin: 0 0 1.75rem;
}

/* Block, so the tonal shift always lands on its own line rather than mid-line at
   whatever width the balancer happens to break at. */
.hero h1 .soft {
  display: block;
  color: var(--muted);
}

/* The five-second answer: who this is for and what they get, at a size that reads
   before the eye reaches the mechanism paragraph below it. */
.hero-answer {
  font-size: clamp(1.125rem, 1rem + 0.72vw, 1.4375rem);
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--text);
  max-width: 52ch;
  margin: 0 0 1.35rem;
}

.hero-pitch {
  max-width: 62ch;
  margin-bottom: 2.25rem;
}

.hero-pitch + .hero-pitch { margin-top: 1.1rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 3.5rem;
}

/* Data plate — the "codename" tell: a stamped spec strip under the hero. */
/* 1px grid gaps over a line-coloured backdrop draw the cell dividers, so the plate
   stays correctly ruled at whatever column count auto-fit lands on. */
.plate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}

.plate div {
  padding: 1.1rem 1.35rem;
  background: var(--bg-raised);
}

.plate dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.35rem;
}

.plate dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
}

.plate .accent { color: var(--accent); }

/* ---------- Section shell ---------- */

.section { padding-block: var(--section-y); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section-head h2 {
  font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3rem);
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin-bottom: 1.25rem;
}

/* ---------- Pain ledger ---------- */

/* Ruled rows rather than cards: this section is a bill, and a bill is a list of
   line items. The label column is fixed so the costs align down the page. */
.pains {
  margin: 0;
  border-top: 1px solid var(--line);
}

.pain {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.4rem clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.6vw, 1.85rem) 0;
  border-bottom: 1px solid var(--line);
}

.pain dt {
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text);
}

.pain dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

@media (max-width: 719px) {
  .pain { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Repeated calls to action ---------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem clamp(0.875rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.cta-note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--faint);
  max-width: 40ch;
}

/* ---------- Pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.pillar {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.pillar + .pillar { border-top: 1px solid var(--line); }

/* Three abreast, with each card's rows subgridded onto the parent's. That is what
   keeps the "Kills" hairline on one line across all three cards even though the
   body copy above it runs to different lengths. */
@media (min-width: 900px) {
  .pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
  }

  .pillar {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }

  .pillar + .pillar {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  /* The subgrid row already reserves the space; an auto top margin would push each
     block to its own row's bottom edge and undo the alignment. */
  .pillar > .pillar-kills { margin-top: 0; }
}

/* Beats `.pillar p` on specificity — without this the index inherits body colour. */
.pillar .pillar-index {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 1.75rem;
}

.pillar h3 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
}

.pillar p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}

.pillar-kills {
  margin-top: auto;
  padding-top: 1.5rem;
}

.pillar-kills hr {
  border: 0;
  border-top: 1px solid var(--line-mid);
  margin: 0 0 1rem;
}

.pillar-kills p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--faint);
}

.pillar-kills strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.4rem;
}

/* ---------- How it works ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
  counter-increment: step;
}

.step:last-child { border-bottom: 1px solid var(--line); }

/* Placement is explicit rather than auto: one step carries two content blocks, and
   auto-flow would drop the second one into the empty numeral column. */
.step::before {
  content: '0' counter(step);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  line-height: 1.9;
  color: var(--accent);
}

.step h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.step p {
  grid-column: 3;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 56ch;
}

/* These chips hold whole sentences, so they must be allowed to wrap — at 375px a
   nowrap chip pushed the document wider than the viewport. `box-decoration-break`
   keeps the border drawn around each line rather than only the first and last. */
.step p em,
.asks li {
  color: var(--text);
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--bg-raised);
  border: 1px solid var(--line-mid);
  border-radius: 2px;
  padding: 0.1em 0.45em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The three sample asks read as a stack of stamped commands rather than as prose
   with chips embedded in it — one utterance per line, left-aligned to each other. */
.asks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  grid-column: 3;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  max-width: 100%;
}

.asks li { max-width: 100%; }

@media (max-width: 899px) {
  .step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 1rem;
  }
  .step h3 { margin-bottom: 0.6rem; }
  .step p { grid-column: 2; }
  .asks { grid-column: 2; }
}

/* ---------- Proof band ---------- */

.proof {
  background: var(--bg-panel);
  border-block: 1px solid var(--line);
}

.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .proof-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.proof h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.375rem);
  letter-spacing: -0.03em;
}

.proof-body p + p { margin-top: 1.15rem; }
.proof-body p { color: var(--muted); max-width: 60ch; }
.proof-body strong { color: var(--text); font-weight: 500; }

.loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.35rem;
  background: var(--bg-raised);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.loop span:not(.sep) { white-space: nowrap; }
.loop .sep { color: var(--accent); }

/* Checkable facts, marked with the same hairline the eyebrow uses rather than a
   tick — nothing here is a feature bullet, it is all evidence. */
.proof-facts {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.proof-facts li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 60ch;
}

.proof-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 1rem;
  height: 1px;
  background: var(--accent);
}

.proof-facts strong { color: var(--text); font-weight: 500; }

/* The one story on the page, given the same left-rule treatment the privacy page
   uses for its lead — a quoted piece of evidence, not a testimonial. */
.evidence {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.proof-body .evidence p { margin: 0; max-width: 58ch; }
.evidence em { color: var(--text); font-style: italic; }

.evidence-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.proof-body .evidence .evidence-label { margin-bottom: 0.6rem; }

/* ---------- Sample audit teaser ---------- */

.teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (min-width: 820px) {
  .teaser { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}

.scoreplate {
  padding: 1.5rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
}

.scoreplate-top {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.scoreplate-value {
  font-size: 3.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.scoreplate-total { font-size: 1.25rem; color: var(--faint); }

.scoreplate-grade {
  margin-left: auto;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--accent);
}

.scoreplate-meta {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.9;
}

.teaser h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.25rem);
  margin-bottom: 1rem;
}

.teaser p { color: var(--muted); max-width: 56ch; margin-bottom: 1.75rem; }

/* ---------- Closing ask ---------- */

/* Panelled like the proof band so the page ends on a surface rather than trailing
   off into the footer rule. */
.closer {
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.closer h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.closer p {
  color: var(--muted);
  max-width: 58ch;
}

.closer-note {
  margin-top: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--faint);
  max-width: 60ch;
}

/* ---------- Long-form prose (privacy, and any document page after it) ---------- */

.prose {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
}

.prose h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  letter-spacing: -0.035em;
  margin-bottom: 0.75rem;
}

.prose h2 {
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  margin: 3.25rem 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.prose h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.6rem;
  color: var(--text);
}

.prose p,
.prose li { color: var(--muted); max-width: 68ch; }

.prose p { margin: 0 0 1rem; }
.prose ul { padding-left: 1.35rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--accent-dim); }
.prose strong { color: var(--text); font-weight: 500; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover { color: #E8DAB8; }

.prose-dates {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2.5rem;
}

.prose-lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.5rem;
}

.prose code {
  font-family: var(--mono);
  font-size: 0.8125em;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-mid);
  border-radius: 2px;
  padding: 0.12em 0.4em;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  margin: 0 0 1.5rem;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.prose thead th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody th { font-weight: 400; white-space: nowrap; }

@media (max-width: 719px) {
  .prose { padding-bottom: 7rem; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem 4.5rem;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

.footer-mark {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}

.footer-links a,
.footer-links button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease-out;
}

.footer-links a:hover,
.footer-links button:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-note {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--faint);
  max-width: 66ch;
}

/* The floating consent control sits bottom-left; keep the footer clear of it. */
@media (max-width: 719px) {
  .site-footer { padding-bottom: 6.5rem; }
}

/* ---------- Motion ---------- */

/* Scroll-driven reveal, CSS only. Browsers without support simply show the
   content — there is no JS gate and nothing starts hidden without a timeline. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 24%;
    }
  }
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* A view() timeline never advances when there is no scrolling — printing, PDF export
   and full-page capture would otherwise render everything below the fold at opacity 0. */
@media print {
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero > .wrap > * {
    animation: hero-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero h1 { animation-delay: 60ms; }
  .hero-answer { animation-delay: 120ms; }
  .hero-pitch { animation-delay: 180ms; }
  .hero-actions { animation-delay: 240ms; }
  .hero .plate { animation-delay: 300ms; }
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@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;
  }
}