/* KaiProva marketing site — shared component stylesheet.
 *
 * WHY. The marketing pages were copied from one another with no shared
 * stylesheet, so a fix landed on whichever copy the editor happened to open.
 * That produced five live defects in one day (2026-08-12): headings falling
 * back to Georgia, hero CTAs rendering as unstyled text because .btn lived on
 * one page only, a .faq-* block that existed on one page only, and a
 * .section-body margin rule that never matched its own markup.
 *
 * WHAT IS IN HERE. Only rules that were ALREADY IDENTICAL on every page that
 * used them. Nothing was reconciled or tidied on the way in, so adopting this
 * file changed no page's rendering — proven by a computed-style diff of 22
 * properties over every element on all nine pages, before and after.
 *
 * THE TWO-CHROME PROBLEM IS RESOLVED. This file used to carry a warning here
 * that .topbar could not be extracted because there were genuinely TWO chrome
 * variants — a dark tabbed bar on the audience pages and a light .docbar on
 * the long-form pages — and that reconciling them was a design decision rather
 * than a refactor. That decision was made: every page moved to the vision
 * .site-header and .site-footer, and on 2026-08-18 the legacy chrome rules
 * were deleted. There is one chrome now.
 *
 * STILL TRUE, and the lesson that cost the most:
 *   - Selectors with a bare element in any position (`h1`, `.card p`) leak into
 *     any page that happens to contain that element. `footer { background }`
 *     did exactly this — it painted the record card's own <footer> dark green
 *     under dark text, invisible on every vision surface, until it was scoped
 *     to `body > footer`.
 *   - A rule and the thing it depends on must live in the SAME file. Splitting
 *     .outcomes from the rules writing light text onto it left three pages
 *     rendering a headline at 1.08:1. tests/site/cascade_contrast.js now
 *     resolves the cascade per page and fails the build on both.
 *
 * EDITING RULES.
 *   - A change here changes every marketing page. That is the point.
 *   - Do not copy a rule back into a page's inline <style> unless it genuinely
 *     differs there. That is exactly how the drift started.
 *   - tokens.css owns the variables; this file owns the components built from
 *     them. Load order: tokens.css -> site.css -> page inline <style>.
 */ *, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  background: var(--kp-paper);
}
body {
  font-family: var(--kp-sans);
  background: var(--kp-paper);
  color: var(--kp-ink);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: none;
}
a {
  color: inherit;
}
/* In-prose links.
   Nav links, buttons and card links all set their own colour and strip the
   underline, so the bare `a { color: inherit }` above is right for them. It is
   wrong for a link inside running text: it leaves the link the same colour as
   the sentence around it, distinguishable only by the underline the browser
   supplies by default. `.inline` is the opt-in prose-link style. It was
   already the convention on privacy.html and regulators.html — it just had no
   definition anywhere outside the privacy.html <style> block, so it was a
   no-op on every other page.
   #1A6B42 measures 5.2:1 (paper-2) to 6.1:1 (paper-3) against the three page
   grounds — WCAG AA at any text size. */
a.inline {
  color: var(--kp-pasture-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.inline:hover {
  color: var(--kp-pasture-deep);
}
.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.btn {
  display: inline-block;
  font-family: var(--kp-sans);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.95rem 1.65rem;
  border-radius: var(--kp-radius-md);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: 0.005em;
}
.btn-primary {
  background: var(--kp-pasture-deep);
  color: var(--kp-paper);
  border-color: var(--kp-pasture-deep);
}
.btn-primary:hover {
  background: var(--kp-pasture-mid);
  border-color: var(--kp-pasture-mid);
}
.btn-secondary {
  background: transparent;
  color: var(--kp-pasture-deep);
  border-color: var(--kp-pasture-deep);
}
.btn-secondary:hover {
  background: var(--kp-pasture-deep);
  color: var(--kp-paper);
}
.hero {
  padding: 3.5rem 0 5rem;
  border-bottom: 1px solid var(--brand-rule);
}
.eyebrow {
  font-family: var(--kp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kp-ink-2);
  margin-bottom: 1.5rem;
}
.hero-ctas {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2rem;
}
.section-eyebrow {
  font-family: var(--kp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kp-ink-2);
  margin-bottom: 1.25rem;
}
.section-body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--kp-ink-2);
  max-width: 64ch;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2.25rem;
}
.step {
  padding-left: 1.25rem;
  border-left: 2px solid var(--kp-gold);
}
.step .step-num {
  font-family: var(--kp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--kp-gold-2);
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}
.kaupapa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.85rem;
  color: var(--kp-pasture-deep);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.98rem;
}
.kaupapa-link:hover {
  text-decoration: underline;
}
.kaupapa-link .arrow {
  display: inline-block;
  transition: transform 0.15s;
}
.kaupapa-link:hover .arrow {
  transform: translateX(3px);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.card {
  background: var(--kp-paper-3);
  border: 1px solid var(--brand-rule);
  border-radius: var(--kp-radius-md);
  padding: 1.75rem 1.5rem;
}
.card .card-eyebrow {
  font-family: var(--kp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--kp-gold-2);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}
.faq {
  background: var(--kp-paper);
}
.faq-list {
  margin-top: 2rem;
  border-top: 1px solid var(--brand-rule);
}
.faq-item {
  border-bottom: 1px solid var(--brand-rule);
}
.faq-answer {
  padding: 0 0 1.5rem;
  max-width: 64ch;
  font-size: 0.99rem;
  line-height: 1.6;
  color: var(--kp-ink-2);
}
.audience-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.audience-link {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--brand-rule);
  border-radius: var(--kp-radius-md);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  background: var(--kp-paper-3);
}
.audience-link:hover {
  border-color: var(--kp-pasture-deep);
  background: var(--kp-paper);
}
.audience-link .arrow {
  display: inline-block;
  margin-left: 0.25rem;
  color: var(--kp-gold-2);
  transition: transform 0.15s;
}
.audience-link:hover .arrow {
  transform: translateX(3px);
}
/* `body >` is load-bearing, not tidiness. This is the legacy PAGE footer, and
   as a bare `footer` it also matched <footer class="record-foot"> inside the
   record card — painting it pasture-deep while .record-foot kept its own
   --kp-ink-2 text. Dark on dark: it rendered as a solid block with invisible
   text on every vision surface. The child combinator keeps this at
   element-level specificity (0,0,0,2), so .site-footer's class rules still win
   on migrated pages exactly as before, and the legacy pages — whose <footer>
   is a direct child of <body> — are unaffected. This is precisely the leak the
   header of this file warns about: a bare element selector reaching into
   markup that merely happens to contain that element. */ body > footer {
  background: var(--kp-pasture-deep);
  color: var(--kp-paper);
  padding: 3rem 0 2.25rem;
}
footer .container {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* .footer-brand graduated out of surface-vision.css 2026-08-18, when the last
   five pages were ported to the vision footer. It is no longer a collision:
   the legacy `footer .footer-brand img { height: 44px }` rule it used to fight
   is gone with the markup that carried it. The serif wordmark rule lives in
   surface-vision.css's h1/h2/h3 group and is restated here for the ported
   pages, which do not load that file. */ .footer-brand {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.footer-brand img { width: 42px; }
.footer-brand span { font-family: var(--kp-serif); font-optical-sizing: auto; font-size: 1.7rem; }
footer .footer-tagline {
  font-family: var(--kp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(243, 239, 230, 0.88);
  max-width: 44ch;
  margin-top: 0.85rem;
}
.page-hero .eyebrow {
  font-family: var(--kp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kp-ink-2);
  margin-bottom: 1.5rem;
}
.essay-col {
  max-width: 68ch;
  margin: 0 auto;
}
.essay-section:last-of-type {
  margin-bottom: 0;
}
.callout .callout-eyebrow {
  font-family: var(--kp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kp-gold-2);
  margin-bottom: 0.85rem;
}
.back-strip .arrow {
  display: inline-block;
  transition: transform 0.15s;
}
.essay-section .pull-quote {
  font-family: var(--kp-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--kp-pasture-deep);
  border-left: 3px solid var(--kp-gold);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.75rem 0;
  max-width: 50ch;
}
.essay-divider {
  border: none;
  border-top: 1px solid var(--brand-rule);
  max-width: 12ch;
  margin: 2.5rem auto;
}
/* ============================================================
   ACCESSIBILITY BASELINE
   ============================================================
   Added 2026-08-17. Lives here rather than on any one page so
   every marketing surface gets it at once — this is the whole
   reason a shared stylesheet was worth extracting.

   FOCUS COLOUR — read this before "fixing" it back to gold.
   The design-system note prescribed a 3px --kp-gold focus ring.
   Measured, --kp-gold (#C3A76A) on --kp-paper (#F3EFE6) is
   2.02:1. WCAG 2.1 SC 1.4.11 (Non-text Contrast) wants >= 3:1
   for a focus indicator, so gold-on-paper fails — and the site
   is overwhelmingly light. --kp-pasture-deep on paper is
   10.41:1, so that is the default here.
   Gold is kept for dark surfaces, where it measures 5.15:1
   against --kp-pasture-deep and is the correct accent.
   ============================================================ */ html {
  scroll-padding-top: 90px;   /* anchor targets clear the sticky chrome */
}
:focus-visible {
  outline: 3px solid var(--kp-pasture-deep);
  outline-offset: 4px;
  border-radius: var(--kp-radius-sm);
}
/* Reversed surfaces: the dark chrome, the dark footer, and any section that
   paints a pasture background. Gold reads here.
   `body > footer` rather than a class: the page footer is a bare <footer>, so
   a class selector never matched it and the ring measured 1.00:1 — the same
   colour as the footer — on six pages. */
.site-header :focus-visible, .site-footer :focus-visible, body > footer :focus-visible, .reversed :focus-visible, .outcomes :focus-visible {
  outline-color: var(--kp-gold);
}
.skip-link {
  position: absolute;
  z-index: 200;
  top: 0;
  left: 1rem;
  padding: 0.7rem 1.1rem;
  /* Gold, not pasture-deep: the chrome this lands on is itself dark green, so
     a pasture-deep block vanishes into the header even though its own text
     contrast is fine. Gold separates from the header at 5.15:1 and carries
     pasture-night text at 6.69:1. */
  background: var(--kp-gold);
  color: var(--kp-pasture-night);
  font-family: var(--kp-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--kp-radius-md) var(--kp-radius-md);
  transform: translateY(-110%);
  transition: transform 0.18s ease;
}
.skip-link:focus {
  transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/* ============================================================
   VISION DESIGN SYSTEM
   ============================================================
   Graduated 2026-08-17 out of public/prototypes/landing-vision.css,
   per Design_System_Promotion_Aug2026.md §2 and §7.

   WHY IT IS SAFE TO ADD ALL OF THIS AT ONCE. Of the 139 classes in
   the prototype stylesheets, exactly 6 appear in today's live
   markup: .eyebrow .faq .faq-list .footer-brand .hero .skip-link.
   Those 6 genuinely CONFLICT — same class, different values — so
   none of them are in this file. They live in surface-vision.css,
   which only a migrated page loads. Everything below matches no
   element on any current page, so adding it renders identically.
   That claim is checked, not asserted: a computed-style diff over
   every element of all ten marketing pages, before and after.

   WHY IT IS NOT A SECOND SHARED STYLESHEET. The design note
   proposed a new system.css. That predates site.css (#97/#99), and
   two shared stylesheets is exactly the drift the CI guard exists
   to stop. So the system graduates INTO site.css instead.

   FILE ROLES:
     brand/tokens.css        palette, type, radii          (untouched)
     css/site.css            THIS FILE — shared components
     css/surface-vision.css  overrides vs the legacy chrome (transitional)
     css/surface-landing.css landing-only argument components
     css/surface-audience.css audience-page components

   surface-vision.css is TRANSITIONAL. When the last page is
   migrated, fold it into this file and delete it.

   STATE VOCABULARY. Three states, no aliases: .state-now,
   .state-building, .state-later (plus -light variants for dark
   surfaces). The prototypes carried four names for three states
   (.state-live/.state-now, .state-later/.state-planned,
   .state-building-roadmap); they are consolidated here. Do not
   reintroduce a fourth — the contract is that any capability on a
   marketing surface carries exactly one of these three, and that
   nothing behind an unflipped flag is ever labelled Now.
   ============================================================ */ /* ---- shared vision system vars ---- */ :root {
  --page-max: 1240px;
  --page-pad: clamp(1.15rem, 4vw, 3rem);
  --section-space: clamp(5rem, 9vw, 8.5rem);
  --shadow: 0 28px 70px rgba(7, 42, 25, 0.16);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--kp-pasture-night) 96%, transparent);
  border-bottom: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(12px);
}
.header-inner, .section-inner, .hero-inner, .footer-inner {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
.header-inner {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
}
.brand-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
}
.brand-link img { width: 168px; }
.desktop-nav {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.desktop-nav a, .header-signin {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--kp-paper);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}
.desktop-nav a:hover, .header-signin:hover { color: var(--kp-gold); }
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.mobile-menu { display: none; color: var(--kp-paper); }
.mobile-menu summary {
  min-width: 52px;
  min-height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  list-style: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--kp-radius-md);
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: grid;
  padding: 0.75rem var(--page-pad) 1.25rem;
  background: var(--kp-pasture-night);
  border-top: 1px solid rgba(255,255,255,0.13);
}
.mobile-menu nav a {
  min-height: 48px;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--kp-radius-md);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.button:hover { transform: translateY(-2px); }
.button-small {
  min-height: 42px;
  padding: 0.67rem 1rem;
  font-size: 0.9rem;
}
.button-primary { background: var(--kp-pasture-deep); color: var(--kp-paper-3); }
.button-primary:hover { background: var(--kp-pasture-mid); }
.button-secondary { color: var(--kp-pasture-deep); border-color: var(--kp-pasture-deep); }
.button-secondary:hover { background: var(--kp-pasture-deep); color: var(--kp-paper-3); }
.button-gold { background: var(--kp-gold); color: var(--kp-pasture-night); }
.button-gold:hover { background: var(--kp-paper-3); }
.button-reversed { border-color: rgba(255,255,255,0.5); color: var(--kp-paper-3); }
.button-reversed:hover { background: var(--kp-paper-3); color: var(--kp-pasture-night); }
.hero-inner {
  min-height: calc(100vh - 74px);
  min-height: calc(100svh - 74px);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.96fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding-top: clamp(2.25rem, 5vh, 4.5rem);
  padding-bottom: clamp(2.25rem, 5vh, 4.5rem);
}
.hero-copy { position: relative; z-index: 1; }
.hero-lede {
  max-width: 59ch;
  margin: 2rem 0 0;
  color: var(--kp-ink-2);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 2rem;
}
.hero-text-link { margin-top: 0; }
.hero-objections {
  margin: 1.6rem 0 0;
  color: var(--kp-pasture-deep);
  font-size: 1rem;
}
.hero-status {
  max-width: 62ch;
  margin: 0.75rem 0 0;
  color: var(--kp-ink-2);
  font-size: 0.9rem;
}
.status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 0.55rem;
  background: var(--kp-pasture-lit);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kp-pasture-lit) 15%, transparent);
}
.record-stage { position: relative; z-index: 1; }
.record-shadow {
  position: absolute;
  inset: 1.2rem -1rem -1.2rem 1rem;
  border: 1px solid color-mix(in srgb, var(--kp-pasture-deep) 22%, transparent);
  background: var(--kp-paper-2);
  transform: rotate(2deg);
}
.record-card {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 1.7rem);
  border: 1px solid color-mix(in srgb, var(--kp-pasture-deep) 34%, transparent);
  background: var(--kp-paper-3);
  box-shadow: var(--shadow);
  transform: rotate(-0.75deg);
  animation: record-enter 0.75s cubic-bezier(.2,.7,.2,1) both;
}
.record-card::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--kp-gold) 40%, transparent);
  pointer-events: none;
}
.record-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--brand-rule);
}
.record-head h2 {
  margin: 0;
  color: var(--kp-pasture-deep);
  font-family: var(--kp-mono);
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.record-kicker { margin-bottom: 0.35rem; }
.record-state {
  padding: 0.35rem 0.55rem;
  background: var(--kp-pasture-deep);
  color: white;
  font-family: var(--kp-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.record-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--brand-rule);
}
.record-fields div { padding: 0.65rem 0.75rem 0.65rem 0; }
.record-fields div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--brand-rule); }
.record-fields dt {
  color: var(--kp-ink-2);
  font-family: var(--kp-mono);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.record-fields dd {
  margin: 0.15rem 0 0;
  color: var(--kp-pasture-deep);
  font-weight: 600;
}
.record-line {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 1.25rem 0 0;
  list-style: none;
}
.record-line::before {
  content: "";
  position: absolute;
  top: 2.1rem;
  bottom: 1.8rem;
  left: 0.32rem;
  width: 1px;
  background: var(--kp-gold);
}
.record-line li {
  position: relative;
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: center;
  gap: 0.8rem;
  min-height: 50px;
  opacity: 0;
  animation: item-enter 0.45s ease forwards;
}
.record-line li:nth-child(1) { animation-delay: .25s; }
.record-line li:nth-child(2) { animation-delay: .42s; }
.record-line li:nth-child(3) { animation-delay: .59s; }
.record-line li:nth-child(4) { animation-delay: .76s; }
.record-node {
  position: relative;
  z-index: 1;
  width: 0.68rem;
  height: 0.68rem;
  border: 2px solid var(--kp-paper-3);
  background: var(--kp-pasture-mid);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--kp-pasture-mid);
}
.is-building .record-node { background: var(--kp-gold); box-shadow: 0 0 0 1px var(--kp-gold); }
.record-line strong {
  display: block;
  color: var(--kp-pasture-deep);
  font-size: 0.9rem;
}
.record-line small {
  display: block;
  color: var(--kp-ink-2);
  font-size: 0.75rem;
}
.state-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.25rem 0.45rem;
  border: 1px solid currentColor;
  font-family: var(--kp-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.state-now { color: var(--kp-pasture-mid); }
.state-building { color: #765e28; }
/* was #8a6825: 4.48:1 on --kp-paper,
                                          a hair under AA for 0.58rem text.
                                          #765e28 is the amber already used
                                          by .eyebrow / .section-label and
                                          measures 5.38:1 on paper. */ .state-later { color: var(--kp-ink-2); }
/* Compound forms so a state chip keeps its colour inside a component that
   styles its own paragraphs. `.benefit-card p` is (0,1,1) and beat the bare
   (0,1,0) state classes, so the Building chip on the landing page rendered
   --kp-ink-2 — pixel-identical to Later. A state system whose states are the
   same colour is not a state system. These are (0,2,0) and win. */ .state-label.state-now { color: var(--kp-pasture-mid); }
.state-label.state-building { color: #765e28; }
.state-label.state-later { color: var(--kp-ink-2); }
.record-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--brand-rule);
  color: var(--kp-ink-2);
  font-family: var(--kp-mono);
  font-size: 0.59rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@keyframes record-enter {
  from { opacity: 0; transform: translateY(24px) rotate(-0.75deg); }
  to { opacity: 1; transform: translateY(0) rotate(-0.75deg); }
}
@keyframes item-enter {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.section { padding: var(--section-space) 0; border-bottom: 1px solid var(--brand-rule); }
.section-heading { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
}
.split-heading > p { margin: 0 0 0.4rem; color: var(--kp-ink-2); }
.state-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.regulatory-boundary {
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border-left: 3px solid var(--kp-gold-2);
  background: var(--kp-paper-2);
  color: var(--kp-ink-2);
}
.card-link {
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--kp-pasture-deep);
  font-weight: 600;
}
.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: var(--kp-pasture-deep);
  font-weight: 600;
  text-underline-offset: 4px;
}
/* REVERSED-SURFACE MODIFIERS — declared AFTER every base rule they modify.
   ORDER IS THE ONLY THING MAKING THESE WORK. Each is a single class at
   specificity (0,1,0), identical to the base rule it overrides, so the later
   declaration wins and nothing else does. They used to sit ABOVE .text-link,
   which meant .text-link-reversed lost: a call to action in the dark closing
   band rendered pasture-deep on pasture-night at 1.30:1 — invisible.
   Do not "tidy" these back up next to the components they belong to.
   .label-reversed additionally has to beat surface-vision.css's
   `.eyebrow, .section-label, …` rule, which loads after this file, so it is
   written as a compound selector to raise its specificity to (0,2,0). Without
   that it measured 2.51:1 on the four reversed section labels. */ .label-reversed, .section-label.label-reversed { color: var(--kp-gold); }
.state-now-light { color: var(--kp-pasture-bright); }
.state-building-light { color: var(--kp-gold); }
.state-later-light { color: rgba(255, 255, 255, 0.55); }
.text-link-reversed, .text-link.text-link-reversed { color: var(--kp-paper-3); }
.claim-card {
  position: relative;
  padding: clamp(2rem, 5vw, 3.4rem);
  border: 1px solid var(--kp-pasture-deep);
  background: var(--kp-paper-3);
  box-shadow: 14px 14px 0 var(--kp-gold);
}
.claim-number {
  margin: 1.8rem 0 0;
  color: var(--kp-pasture-deep);
  font-family: var(--kp-serif);
  font-size: clamp(4.2rem, 8vw, 7.4rem);
  font-weight: 300;
  letter-spacing: -0.07em;
  line-height: .8;
}
.claim-caption {
  max-width: 22ch;
  margin: 1rem 0 1.8rem;
  color: var(--kp-pasture-deep);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
}
.claim-scope { color: var(--kp-ink-2); }
.claim-citation {
  padding-top: 1rem;
  border-top: 1px solid var(--brand-rule);
  color: var(--kp-ink-2);
  font-family: var(--kp-mono);
  font-size: .65rem;
  text-transform: uppercase;
}
.proof-boundary {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--kp-gold-2);
  background: color-mix(in srgb, var(--kp-paper-3) 65%, transparent);
  color: var(--kp-ink-2);
}
.other-audiences {
  padding: 2rem 0;
  border-bottom: 1px solid var(--brand-rule);
  background: var(--kp-gold);
  color: var(--kp-pasture-night);
}
.other-audiences-inner {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 2rem 4rem;
}
.other-audiences p { margin: 0; }
.other-audiences nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem 1.5rem;
}
.other-audiences a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-underline-offset: 4px;
}
.roadmap-state {
  width: fit-content;
  margin: 0 0 3rem;
  padding: .35rem .55rem;
  border: 1px solid currentColor;
  font-family: var(--kp-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}
/* The state colours are declared ONCE, with .state-label above. A second set
   used to sit here — a leftover from consolidating the prototype's two state
   vocabularies into one — and being later in the file it silently won,
   rendering #87651f where the documented value is #765e28 and making the
   contrast comment above describe a colour that never shipped. */ .site-footer {
  padding: 3.5rem 0;
  background: #051f13;
  color: var(--kp-paper-3);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
}
.footer-inner > div:first-child p { max-width: 60ch; color: rgba(255,255,255,.67); }
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  color: rgba(255,255,255,.76);
  font-size: .88rem;
}
.footer-links a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-underline-offset: 3px;
}


@media (max-width: 1040px) {
  .desktop-nav { display: none; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .mobile-menu { display: block; }
  .header-actions { justify-self: end; }
  .hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 760px; }
  .record-stage { max-width: 650px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .site-header { position: relative; }
  .header-inner { min-height: 68px; gap: 1rem; }
  .brand-link img { width: 140px; }
  .header-actions { display: none; }
  .mobile-menu { justify-self: end; }
  .hero-inner {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
    gap: 3.5rem;
  }
  .record-stage { width: calc(100% - .6rem); }
  .record-card { transform: none; }
  .record-shadow { inset: .8rem -.6rem -.8rem .6rem; }
  .record-line li { grid-template-columns: 1rem 1fr; padding: .45rem 0; }
  .record-line .state-label { grid-column: 2; }
  .record-foot { flex-direction: column; gap: .3rem; }
  /* Only the two whose BASE rule is in this file. The other nine in the
     prototype's version of this rule are landing components, and their base
     rules live in surface-landing.css, which loads AFTER this file. A media
     query adds no specificity, so keeping them here let the later
     unconditional rule win and the mobile collapse never happened. Each
     override now sits in the same file as its base. */ .split-heading, .other-audiences-inner { grid-template-columns: 1fr; }
  .split-heading { align-items: start; }
  .other-audiences nav { justify-content: flex-start; }
  .claim-card { margin-right: .7rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { align-items: flex-start; }
}

@media (max-width: 430px) {
  .record-fields { grid-template-columns: 1fr; }
  .record-fields div, .record-fields div:nth-child(even) {
    padding: .65rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--brand-rule);
  }
  .record-fields div:last-child { border-bottom: 0; }
}/* ---- .nav-menu — the "Who it's for" header disclosure ----
   Section-anchor nav alone would strand the audience pages: a processor or a
   programme arriving to check us out would have to scroll two-thirds down a
   farmer page to find their own. One nav item, six destinations, header stays
   short. <details> rather than JS so it works before scripts run and is
   keyboard-operable for free. */ .nav-menu { position: relative; }
.nav-menu summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--kp-paper);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-menu summary:hover { color: var(--kp-gold); }
.nav-menu[open] summary { color: var(--kp-gold); }
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: grid;
  min-width: 15rem;
  padding: 0.4rem 0;
  background: var(--kp-pasture-night);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--kp-radius-md);
  box-shadow: 0 18px 44px rgba(7,42,25,0.38);
}
.nav-menu-panel a {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  color: var(--kp-paper);
  font-size: 0.9rem;
  text-decoration: none;
}
.nav-menu-panel a:hover {
  color: var(--kp-gold);
  background: rgba(255,255,255,0.06);
}

@media (max-width: 1040px) {
  .nav-menu { display: none; }   /* the mobile menu lists the audiences flat */
}/* ============================================================
   SHARED ARGUMENT COMPONENTS  (graduated 2026-08-17)
   ============================================================
   These came out of surface-landing.css. The design note listed them as
   landing-only argument structure, but the processors, buyers and science
   surfaces use all of them too — twelve components per page. Nothing caught
   it earlier because every prototype loaded ONE stylesheet, so each page had
   access to everything regardless of which file a rule sat in.

   By the note's own test — used by three or more surfaces — these are shared,
   so they live here. What stayed behind in surface-landing.css is the
   structure only the landing page has: the value loop, the compounding block,
   the question rail, the clock grid, the enablement ladder, the wedge
   reasons, the perspective cards and the origin block.

   Multi-selector rules were SPLIT rather than moved whole. A selector whose
   base rule stays in surface-landing.css keeps its media override there too:
   surface-landing.css loads after this file and a media query adds no
   specificity, so separating a base from its override lets the later
   unconditional rule win at every width. That exact bug shipped once already.
   ============================================================ */ /* KaiProva — landing-page argument components.
 *
 * One page's argument structure, not a system: the value loop, the
 * compounding block, the question rail, the problem/skeptic sections,
 * the clock grid, the enablement ladder, the wedge reasons, the
 * perspective cards. Used by landing.html only.
 *
 * If a component here starts being used by a third surface, that is the
 * signal to graduate it into site.css — not to copy it.
 *
 * Load AFTER site.css and surface-vision.css.
 */ .problem { background: var(--kp-paper-2); }
.problem-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.problem-copy p { margin-top: 0; color: var(--kp-ink-2); }
.large-copy {
  color: var(--kp-pasture-deep) !important;
  font-size: clamp(1.45rem, 2.2vw, 2.05rem);
  line-height: 1.28;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--kp-pasture-deep);
  border-left: 1px solid var(--kp-pasture-deep);
}
.benefit-card {
  min-height: 300px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-right: 1px solid var(--kp-pasture-deep);
  border-bottom: 1px solid var(--kp-pasture-deep);
  background: var(--kp-paper-3);
}
.benefit-card > span {
  color: #765e28;
  font-family: var(--kp-mono);
  font-size: .7rem;
  letter-spacing: .12em;
}
.benefit-card h3 { margin-top: 3.4rem; font-size: clamp(1.65rem, 2.6vw, 2.3rem); }
.benefit-card p { margin: 1rem 0 0; color: var(--kp-ink-2); }
/* .outcomes PAINTS the reversed surface that the two rules below write light
   text onto. It used to live in surface-landing.css, which only landing.html
   loads — so on processors, buyers and science the section had NO background
   and the 69px headline rendered cream-on-cream at 1.08:1 while the lede
   measured 1.00:1. Literally invisible on three live pages.
   RULE: a selector that paints a reversed surface and the selectors that
   depend on it must be in the SAME stylesheet. Splitting them across files
   that load conditionally is silent, and the cascade gives no warning. */ .outcomes {
  overflow: hidden;
  background: var(--kp-pasture-night);
  color: var(--kp-paper);
}
.outcomes-heading h2 { color: var(--kp-paper-3); }
.outcomes-heading > p { color: color-mix(in srgb, var(--kp-paper) 76%, transparent); }
.outcome-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
  list-style: none;
}
.outcome-steps li {
  min-height: 300px;
  padding: clamp(1.45rem, 3vw, 2.2rem);
  background: var(--kp-pasture-night);
}
.step-number {
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  border: 1px solid var(--kp-gold);
  background: var(--kp-pasture-night);
  color: var(--kp-gold);
  font-family: var(--kp-mono);
  font-size: 1.1rem;
}
.outcome-steps h3 { margin-top: 1rem; color: var(--kp-paper-3); }
.outcome-steps p { color: color-mix(in srgb, var(--kp-paper) 72%, transparent); }
.proof { background: var(--kp-paper-2); }
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(340px, .8fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.proof-grid > div > p:not(.section-label) { max-width: 58ch; color: var(--kp-ink-2); }
.faq-grid {
  display: grid;
  grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
  gap: clamp(3rem, 10vw, 9rem);
  align-items: start;
}
.closing {
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: var(--kp-pasture-night);
  color: var(--kp-paper-3);
  text-align: center;
}
.closing h2 {
  max-width: 17ch;
  margin: 0 auto;
  color: var(--kp-paper-3);
}
.closing p:not(.section-label) {
  max-width: 57ch;
  margin: 1.5rem auto 0;
  color: color-mix(in srgb, var(--kp-paper) 75%, transparent);
}
.closing-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-top: 2rem;
}
.closing-actions .text-link { margin-top: 0; }


@media (max-width: 1040px) {
  .problem-grid { grid-template-columns: 1fr 1fr; }
  .outcome-steps { grid-template-columns: 1fr 1fr; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  /* Moved out of site.css: these bases are declared in THIS file, which
     loads after site.css, so the collapse has to be declared here too or
     the unconditional two-column rule wins at every width. */ .problem-grid, .proof-grid, .faq-grid {
    grid-template-columns: 1fr;
  }
  .problem-grid { gap: 2rem; }
  .benefit-grid { grid-template-columns: 1fr; }
  .outcome-steps { grid-template-columns: 1fr; }
  .outcome-steps li { min-height: 0; }
  .step-number { margin-bottom: 1.25rem; }
}