/* KaiProva — vision chrome overrides. TRANSITIONAL FILE.
 *
 * These are the only rules where the vision system and the legacy
 * site.css disagree: same selector, different values. They cannot live
 * in site.css without restyling the pages that have not migrated yet,
 * so a page opts in by linking this file AFTER site.css.
 *
 * Load order on a migrated page:
 *   tokens.css -> site.css -> surface-vision.css -> surface-<page>.css
 *
 * WHEN THE LAST PAGE IS MIGRATED: fold these into site.css, delete the
 * superseded legacy rules there, and delete this file. Its existence is
 * the signal that the migration is unfinished.
 */

body {
  margin: 0;
  min-width: 320px;
  background: var(--kp-paper);
  color: var(--kp-ink);
  font-family: var(--kp-sans);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* PARAGRAPH RHYTHM — restores what site.css's reset removes.
   site.css opens with `*, *::before, *::after { margin: 0; padding: 0 }`. The
   vision components were authored against a box-sizing-only reset and take
   their vertical rhythm from the UA's default paragraph margins, so under that
   global reset every heading sat flush against the copy beneath it and
   consecutive paragraphs ran together with no gap at all.
   Headings are deliberately `margin: 0` in this file — their spacing comes
   from container gaps — so this is only about <p>.
   It lives here, not in site.css, because the un-migrated pages were written
   against the reset and would shift if it changed under them. When the last
   page migrates and this file is folded in, the global reset should stop
   zeroing margins instead. */
p { margin: 1em 0; }

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, transparent 0 49.92%, color-mix(in srgb, var(--kp-ink) 7%, transparent) 50%, transparent 50.08%), var(--kp-paper);
  border-bottom: 1px solid var(--brand-rule);
}
.hero::before {
  content: "";
  position: absolute;
  width: 46rem;
  height: 46rem;
  right: -18rem;
  top: -20rem;
  border: 1px solid color-mix(in srgb, var(--kp-gold) 55%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 8rem color-mix(in srgb, var(--kp-gold) 5%, transparent), 0 0 0 15rem color-mix(in srgb, var(--kp-gold) 3%, transparent);
}
.eyebrow, .section-label, .record-kicker, .perspective-status {
  margin: 0 0 1.15rem;
  color: #765e28;
  font-family: var(--kp-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow { color: var(--kp-pasture-deep); }
h1, h2, h3, .large-copy, .standard-line, .footer-brand span { font-family: var(--kp-serif); font-optical-sizing: auto; }
h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--kp-pasture-deep);
  font-size: clamp(3.45rem, 6.2vw, 6.3rem);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.93;
}
h1 em { color: var(--kp-pasture-mid); font-weight: 300; }
h2 {
  max-width: 17ch;
  margin: 0;
  color: var(--kp-pasture-deep);
  font-size: clamp(2.45rem, 4.8vw, 4.85rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
h3 {
  margin: 0;
  color: var(--kp-pasture-deep);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.faq { background: var(--kp-paper-3); }
.faq-list { border-top: 1px solid var(--kp-pasture-deep); }
.faq-list details { border-bottom: 1px solid var(--brand-rule); }
.faq-list summary {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  color: var(--kp-pasture-deep);
  cursor: pointer;
  font-family: var(--kp-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 500;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  color: #765e28;
  font-family: var(--kp-mono);
  font-size: 1.2rem;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details div { padding: 0 2.5rem 1.5rem 0; }
.faq-list details p {
  max-width: 70ch;
  margin: 0;
  color: var(--kp-ink-2);
}

@media (max-width: 1040px) {
  .hero { background: var(--kp-paper); }
}

@media (max-width: 760px) {
  h1 { font-size: clamp(3.25rem, 16vw, 5rem); }
}