/* Founding-partner conversion pages (founding-proof-partners.html,
   founding-mandate-partners.html). Loads AFTER css/ui-base.css and
   css/pages-ui.css; same tokens throughout. Page-specific components
   only — nav, hero shells, sections, tcard/hcard grids, cta band and
   footer all come from the shared vocabulary.

   NOTE: css/pages.css (the 15-page legacy stylesheet) is UNRELATED
   and untouched. */

:root{
  /* Accessible brand-green for SMALL text on light backgrounds.
     hassle.css ships this token; ui-base.css doesn't. --signal (#00B863)
     is 2.61:1 on #FFFFFF — it fails WCAG AA as text and must never be
     used below large-text size. #007A43 is 5.43:1 on paper. */
  --signal-text:#007A43;
}

/* ── hero: eyebrow line under the pill ─────────────────────────────── */
.hero .eyebrow{margin:18px 0 0}
/* grey-500 is ~4.1:1 on --night — below AA at 12px. Same fix as
   ui-base's .sec--night .eyebrow. */
.hero--night .eyebrow{color:var(--term-dim)}

/* ── hero trust strip ──────────────────────────────────────────────
   Port of the legacy .tchip (site.css): mono line with a leading ✓.
   The tick is a ::before glyph (outside axe's text-contrast scan, as
   on every legacy page) and marks a product guarantee the page states,
   not decoration added here. */
.trust-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:34px;max-width:560px}
.tchip{font:500 12.5px/1.5 var(--mono);color:var(--grey-600);display:inline-flex;align-items:baseline;gap:9px}
.tchip:before{content:"✓";color:var(--signal);font-weight:700;flex:none}
.hero--night .tchip{color:#A2A8B0}
.hero--night .tchip:before{color:var(--term-green)}
@media (max-width:720px){.trust-strip{grid-template-columns:1fr}}

/* ── looping hero terminal (js/terminal.js) ────────────────────────
   HassleTerminal emits .tp prompts and a .tcur cursor; ui-base only
   styles the tabbed-terminal equivalents (.g / .cur). */
.term-body .tl{display:block}
.term-body .tp{color:var(--term-green)}
.tcur{display:inline-block;width:8px;height:15px;background:var(--term-green);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.tcur{animation:none}}

/* ── tcard status foot ─────────────────────────────────────────────
   The legacy .ev-status pill, in the new system's idiom: a dashed-top
   mono caption, same shape as .hcard .hk in pages-ui.css. Neutral grey
   on purpose — these are programme labels, not verified state. */
.tcard .tfoot{margin-top:16px;padding-top:12px;border-top:1px dashed var(--grey-300);font:500 11.5px/1 var(--mono);color:var(--grey-500)}

/* ── step grid (9-step onboarding / 6-step mandate flow) ──────────
   Reuses .hcard/.hm from pages-ui.css; this grid holds 6–9 cards where
   .hand is fixed at 3, so it needs its own column ramp. */
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
@media (max-width:940px){.stepgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.stepgrid{grid-template-columns:1fr}}

/* ── guided-setup callout (spec §13 copy, proof page) ─────────────── */
.callout{max-width:760px;margin:26px 0 0;padding:20px 24px;border:1px solid var(--grey-200);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--elev-soft)}
.callout .co-k{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-text);margin-bottom:9px}
.callout p{font-size:14.5px;line-height:1.55;color:var(--grey-700)}
.callout .m{font-family:var(--mono);font-size:13px;color:var(--ink)}

/* ── expectations card (mandate page, above the form) ─────────────── */
.expectations{max-width:62ch;margin:26px auto 0;padding:20px 24px;border:1px solid var(--grey-200);border-radius:var(--r-card);background:var(--paper);text-align:left}
.expectations .xh{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey-500);margin-bottom:12px}
.expectations ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14.5px;color:var(--ink)}
.expectations li{display:flex;gap:10px;align-items:baseline}
.expectations li:before{content:"→";color:var(--grey-500);font:600 12px/1.5 var(--mono);flex:none}
.expectations .xn{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--grey-600)}

/* ── application form card ─────────────────────────────────────────
   Ported from the legacy inline styles; class names are load-bearing
   (the inline form JS binds to them) — only the tokens moved to the
   new system. */
.apply{border:1px solid var(--grey-200);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--elev-pop);max-width:880px;margin:56px auto 0;overflow:hidden;text-align:left}
.apply-head{padding:28px 32px;border-bottom:1px solid var(--grey-200);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.apply-head h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.apply-head p{margin:6px 0 0;font-size:14.5px;color:var(--grey-700)}
.apply-body{padding:28px 32px 34px}
.apply-body[hidden]{display:none}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.field .hint{font-family:var(--mono);font-size:11.5px;color:var(--grey-600);margin-top:2px}
.field input[type=text],.field input[type=email],.field input[type=url],.field select,.field textarea{
  font-family:var(--font);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--grey-300);border-radius:10px;padding:11px 13px;line-height:1.4;
  transition:border-color .15s,box-shadow .15s;width:100%}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal-deep);box-shadow:0 0 0 3px var(--signal-soft)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0331e}
.field .err{font-family:var(--mono);font-size:11.5px;color:#8a1c0e;margin-top:2px}
.field--checks{gap:10px}
.field--checks .opt{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink)}
.field--checks .opt input{width:18px;height:18px;accent-color:var(--signal-deep)}

.apply-meta{font-family:var(--mono);font-size:12px;color:var(--grey-600);margin-top:18px;line-height:1.55}
.apply-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}

.form-banner{padding:14px 18px;border-radius:10px;font-size:14.5px;line-height:1.45;margin-bottom:20px}
.form-banner--ok{background:var(--signal-soft);border:1px solid var(--signal-line);color:var(--signal-deep)}
.form-banner--err{background:rgba(192,51,30,.08);border:1px solid rgba(192,51,30,.32);color:#6b1b0e}
.form-banner[hidden]{display:none}

@media (max-width:640px){
  .field-grid{grid-template-columns:1fr}
  .apply-head,.apply-body{padding-left:22px;padding-right:22px}
}

/* ── footer legal links ────────────────────────────────────────────
   Terms/Privacy sit inline in the copyright line at the same tone as
   the surrounding text, so they need a non-colour affordance
   (axe link-in-text-block, WCAG 1.4.1). */
.f-bot a{text-decoration:underline;text-underline-offset:2px}