/* components.css — header, footer, sections, cards, buttons, receipt, pricing, form. */

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font:600 14px/1 var(--font-sans);letter-spacing:.2px;
  padding:12px 22px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:opacity .15s ease, box-shadow .15s ease;
  min-height:44px;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--pill-bg);color:var(--pill-fg);}
.btn-primary:hover{opacity:.85;}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong);}
.btn-ghost:hover{box-shadow:0 0 0 5px var(--ring);}
@media (max-width:640px){.btn{width:100%;justify-content:center;}}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px;}
/* Canonical ACS product lockup: master mark + AGRO CAPITAL STANDARD overline
   over the serif product wordmark. Product identity stays primary; the mark
   never exceeds the 40px header ceiling. */
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--text);font-weight:700;}
.brand:hover{text-decoration:none;}
.brand .acs-mark{width:32px;height:32px;flex:0 0 auto;}
.brand-stack{display:flex;flex-direction:column;gap:1px;min-width:0;}
.brand-org{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.brand-name{font-family:var(--font-serif);font-size:20px;font-weight:600;letter-spacing:.2px;line-height:1.1;white-space:nowrap;}
.brand-seg{color:var(--accent);}
@media (max-width:900px){
  .brand{gap:9px;}
  .brand .acs-mark{width:27px;height:27px;}
  .brand-name{font-size:18px;}
}
/* PHONE LOCKUP SCALE — B1.
   The redesign's lockup set a hard 356px minimum content width: the mark, an
   unbreakable 175px `AGRO CAPITAL STANDARD` overline, the serif wordmark and
   two 44px controls did not fit a 320px viewport, so every route scrolled
   horizontally and only 8px of the 44px menu button was on screen. WCAG 1.4.10
   is measured at 320 CSS px, which is also a 1280px desktop at 400% zoom.

   Two independent mechanisms, so no single width can reintroduce the defect:
   the rules below scale the lockup down inside the sheets' EXISTING 640px
   breakpoint (no new breakpoint, so the measurement ledger's bracketed-
   breakpoint pin still holds), and `.brand{min-width:0}` plus the overline's
   `white-space:normal` let the overline wrap as a last resort at any width the
   scale alone cannot serve. Wrapping makes the header taller; it never makes
   the document wider. `.header-controls{flex:0 0 auto}` keeps the controls at
   full size while the lockup absorbs the pressure. */
@media (max-width:640px){
  .header-inner{gap:var(--space-3);}
  .brand{gap:8px;}
  .brand .acs-mark{width:24px;height:24px;}
  /* Below 640px the primary nav is collapsed behind the menu button, so the
     lockup is the only flexible thing in the bar and wrapping the overline can
     cost nothing but header height. Above 640px it stays `nowrap`: there the
     nav competes for the same row, and a shrinkable lockup lets flexbox pull
     the brand narrower than the wordmark, which then spills under the theme
     control. */
  .brand-org{font-size:8.5px;letter-spacing:.18em;white-space:normal;}
  .brand-name{font-size:16px;}
  .header-controls{gap:var(--space-2);}
}
.primary-nav{display:flex;align-items:center;gap:var(--space-6);}
.primary-nav>ul{display:flex;gap:var(--space-4);list-style:none;margin:0;padding:0;}
.primary-nav a{color:var(--muted);font-size:var(--fs-small);font-weight:600;white-space:nowrap;}
.primary-nav a:hover{color:var(--text);}
/* .primary-nav a (0,1,1) outranks .btn-primary (0,1,0), which painted the
   gold CTA's label in muted ink at ~1.9:1. State the CTA ink at the same
   specificity, after the nav rule. */
.primary-nav a.btn-primary{color:var(--pill-fg);}
.nav-actions{display:flex;align-items:center;gap:var(--space-3);}
.cross-link{color:var(--faint);font-size:var(--fs-small);font-family:var(--font-mono);}
/* Circular icon control, related to the soulgci.ai header control.
   Fixed square box so the hit target cannot collapse below 44px at any zoom,
   and `display:grid` with both icons stacked in the same cell so the crossfade
   needs no absolute positioning and cannot clip. */
/* Always visible in the header bar, at every width. .nav-toggle appears only
   at or below the 1200px nav breakpoint; the theme control never disappears. */
.header-controls{display:flex;align-items:center;gap:var(--space-3);flex:0 0 auto;}

.theme-toggle{
  display:grid;place-items:center;
  width:48px;height:48px;padding:0;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text);
  border-radius:var(--radius-pill);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle>svg{
  grid-area:1/1;width:20px;height:20px;
  transition:opacity .2s var(--ease),transform var(--dur-morph) var(--ease);
}
/* Both icons always present; only opacity and transform differ, so there is no
   layout change during the switch and nothing to reflow. */
.theme-toggle .i-sun{opacity:0;transform:rotate(-90deg) scale(.4);}
.theme-toggle .i-moon{opacity:1;transform:rotate(0) scale(1);}
:root[data-theme="dark"] .theme-toggle .i-sun{opacity:1;transform:rotate(0) scale(1);}
:root[data-theme="dark"] .theme-toggle .i-moon{opacity:0;transform:rotate(90deg) scale(.4);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{opacity:1;transform:rotate(0) scale(1);}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{opacity:0;transform:rotate(90deg) scale(.4);}
}
.theme-toggle:hover{box-shadow:0 0 0 4px var(--ring);border-color:var(--text);}
.theme-toggle:active{transform:scale(.94);}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (max-width:1200px){.theme-toggle{width:44px;height:44px;}}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-strong);color:var(--text);border-radius:var(--radius-sm);min-height:44px;min-width:44px;cursor:pointer;}
.nav-toggle>svg{width:20px;height:20px;}

/* THE NAV BREAKPOINT — B1, second band.
   The redesigned header bar needs about 1160px of content after the gap trim
   above: the ACS lockup, the theme and menu controls, five primary links, the
   cross-edition link and the access CTA. The pre-redesign header was narrower
   and collapsed at 900px; carrying that number over meant the FULL nav row was
   painted at 901px, where it does not fit, and every viewport from 901px to
   about 1249px scrolled horizontally -- up to +306px at 920px, which is a
   1024px or 1152px laptop. Measured on the base tree at 880-1340px: zero
   overflow, so this was introduced by the redesign, not inherited.
   The nav is therefore shown only when the design's own 1200px content column
   is available, and below that it collapses into the menu button with the same
   links. This declares a 1200px breakpoint, which browser/measure-units.js
   brackets with the 1200/1201 presentation pair -- an unbracketed breakpoint
   fails the rendering ledger closed. */
@media (max-width:1200px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .primary-nav{
    display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;
    align-items:stretch;gap:var(--space-4);background:var(--bg);border-bottom:var(--border);
    padding:var(--space-6) var(--gutter);
  }
  .primary-nav.open{display:flex;}
  .primary-nav>ul{flex-direction:column;gap:var(--space-4);}
  .nav-actions{flex-direction:column;align-items:stretch;}
}

/* Sections */
.section{padding-block:var(--space-24);}
.section-alt{background:var(--bg-soft);}
.page-head{padding-block:var(--space-16) var(--space-12);}
.hero{padding-block:var(--space-32) var(--space-24);}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6);}
.cta-band{text-align:left;}

/* Step grid */
.step-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.step-grid-wide{grid-template-columns:repeat(2,1fr);}
.step-card{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-8);}
.step-n{color:var(--accent-gold);font-size:var(--fs-mono-label);font-weight:600;letter-spacing:.14em;}
.step-name{font-size:var(--fs-h3);margin:var(--space-3) 0 var(--space-2);}
.step-body{color:var(--muted);margin:0;}
@media (max-width:820px){.step-grid,.step-grid-wide{grid-template-columns:1fr;}}

/* Tiers */
.tier-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4);}
.tier-item{display:flex;gap:var(--space-6);align-items:flex-start;background:var(--surface);border:var(--border);border-radius:var(--radius);padding:var(--space-6);}
.tier-n{color:var(--faint);white-space:nowrap;min-width:64px;}
.tier-name{font-size:var(--fs-h3);margin:0 0 var(--space-2);}
.tier-body{color:var(--muted);margin:0;}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.card{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-8);}
.card-title{font-size:var(--fs-h3);margin:0 0 var(--space-3);}
.card p{color:var(--muted);margin:0;}
@media (max-width:820px){.card-grid{grid-template-columns:1fr;}}

.plain-list{padding-left:1.1em;color:var(--muted);}
.plain-list li{margin-bottom:var(--space-3);}

/* Receipt — the evidence document. The gold top hairline marks it as the
   family's evidence surface; everything inside stays mono-labelled and quiet. */
.receipt{background:var(--surface);border:var(--border);border-top:2px solid var(--accent-gold);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow);max-width:var(--container);}
.receipt-tag{display:inline-block;background:var(--info-bg);color:var(--info);border-radius:var(--radius-pill);padding:4px 12px;font-size:var(--fs-mono-label);letter-spacing:.12em;margin-bottom:var(--space-6);}
.receipt-fields{margin:0;}
.receipt-field{display:grid;grid-template-columns:220px 1fr;gap:var(--space-6);padding:var(--space-4) 0;border-top:var(--border);}
.receipt-field:first-child{border-top:none;}
.receipt-field dt{color:var(--faint);letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-mono-label);}
.receipt-field dd{margin:0;}
.receipt-desc{display:block;color:var(--muted);margin-bottom:var(--space-2);}
.receipt-example{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-small);background:var(--chip-bg);color:var(--text);border-radius:var(--radius-sm);padding:4px 8px;word-break:break-word;}
@media (max-width:640px){.receipt-field{grid-template-columns:1fr;gap:var(--space-2);}}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.price-card{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3);}
.price-card-featured{border:1px solid var(--text);box-shadow:var(--shadow);}
.price-flag{color:var(--accent);letter-spacing:.12em;}
.price-name{font-size:var(--fs-h3);margin:0;}
.price-amount{margin:0;}
.price-figure{font-size:var(--fs-h2);font-weight:700;}
.price-period{color:var(--faint);font-size:var(--fs-body);}
.price-detail{color:var(--muted);margin:0;flex:1;}
.price-cta{margin-top:var(--space-4);}
@media (max-width:820px){.price-grid{grid-template-columns:1fr;}}

/* Footer */
.site-footer{border-top:var(--border);background:var(--bg-soft);padding-block:var(--space-16);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:var(--space-8);}
.footer-brand .acs-mark-f{display:block;width:48px;height:48px;margin-bottom:10px;}
.footer-brand .brand-org{display:block;margin-bottom:2px;}
.footer-brand .brand-name{display:block;}
.footer-parentline{color:var(--muted);font-size:13px;margin:var(--space-3) 0 0;}
.footer-def{color:var(--muted);max-width:36ch;}
.footer-col-title{font-size:var(--fs-mono-label);letter-spacing:.14em;color:var(--faint);margin:0 0 var(--space-4);}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);}
.footer-col a{color:var(--muted);font-size:var(--fs-small);}
.footer-col a:hover{color:var(--text);}
.footer-col li{color:var(--muted);font-size:var(--fs-small);}
.footer-legal{margin-top:var(--space-12);padding-top:var(--space-6);border-top:var(--border);color:var(--faint);font-size:var(--fs-small);}
.footer-links a{color:var(--faint);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* Form */
.form-container{max-width:var(--measure);}
.request-form{display:flex;flex-direction:column;gap:var(--space-6);}
.form-intro{color:var(--muted);}
.form-row{display:flex;flex-direction:column;gap:var(--space-2);}
.form-row label{font-weight:600;font-size:var(--fs-small);}
.form-row input,.form-row select,.form-row textarea{
  font-family:var(--font-sans);font-size:var(--fs-body);
  padding:12px 14px;min-height:44px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
}
.form-row textarea{min-height:110px;resize:vertical;}
.req{color:var(--crit);}
.field-hint{color:var(--faint);font-size:var(--fs-small);margin:0;}
.field-error{color:var(--crit);font-size:var(--fs-small);margin:0;}
.form-check{flex-direction:row;align-items:flex-start;gap:var(--space-3);}
.form-check input{min-height:auto;width:20px;height:20px;margin-top:2px;}
.form-check label{font-weight:400;}
.form-submit{align-self:flex-start;margin-top:var(--space-2);}
.form-status{padding:var(--space-4);border-radius:var(--radius-sm);border:var(--border);}
.form-status.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok);}
.form-status.err{background:var(--crit-bg);color:var(--crit);border-color:var(--crit);}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Evidence chain — the product story rendered as structured metadata, not
   decorative artwork: Decision → Evidence → Canonical digest → Receipt →
   Verification → Audit / review. Stages stay one-line each; the paragraph
   wraps between stages, never inside one. */
.hero-chain{
  font-size:12.5px;letter-spacing:.06em;line-height:2.1;color:var(--faint);
  border:var(--border);border-radius:var(--radius);background:var(--surface);
  padding:var(--space-4) var(--space-6);margin:var(--space-12) 0 0;max-width:var(--measure);
}
.chain-stage{color:var(--muted);white-space:nowrap;}
.chain-arrow{color:var(--accent-gold);padding:0 10px;}

/* Institutional questions — the questions the product is designed to help an
   institution answer, set as a tight evidence-style grid. */
.qgrid{list-style:none;margin:var(--space-6) 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;}
.q{background:var(--surface);border:var(--border);padding:var(--space-4) var(--space-6);font-size:13px;color:var(--muted);letter-spacing:.02em;line-height:1.65;min-width:0;}
@media (max-width:820px){.qgrid{grid-template-columns:1fr;}}

/* Truth states — VERIFIED / FAILED / UNKNOWN / NOT CHECKED, visibly and
   semantically distinct. Each state carries its text label (never colour
   alone); the undetermined states additionally carry a dashed border, so the
   determined/undetermined distinction survives monochrome rendering. */
.state-legend{list-style:none;margin:var(--space-8) 0 var(--space-6);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.state-item{background:var(--surface);border:var(--border);border-radius:var(--radius);padding:var(--space-6);min-width:0;}
.state{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;padding:4px 9px;border-radius:3px;white-space:nowrap;border:1px solid var(--line-strong);}
.state-verified{color:var(--ok);background:var(--ok-bg);border-color:var(--ok);}
.state-failed{color:var(--crit);background:var(--crit-bg);border-color:var(--crit);}
.state-unknown{color:var(--info);background:var(--info-bg);border-color:transparent;outline:1px dashed var(--info);outline-offset:-1px;}
.state-notchecked{color:var(--faint);background:var(--chip-bg);border-color:transparent;outline:1px dashed var(--line-strong);outline-offset:-1px;}
.state-body{font-size:13px;color:var(--muted);line-height:1.65;margin:var(--space-3) 0 0;}
@media (max-width:900px){.state-legend{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.state-legend{grid-template-columns:1fr;}}

/* Family diagram — TerraScore → ACS workspace → ProvableCORE. Conceptual
   product architecture; the ProvableCORE node carries the product's archival
   steel-blue accent, the roles carry the family gold overline. */
.eco-flow{max-width:680px;margin-top:var(--space-8);}
.eco-node{background:var(--surface);border:var(--border);border-radius:var(--radius);padding:var(--space-6);box-shadow:inset 3px 0 0 var(--line-strong);}
.eco-node-self{box-shadow:inset 3px 0 0 var(--accent);}
.eco-arrow{width:1px;height:24px;background:var(--line-strong);margin:0 auto;}
.eco-role{display:block;font-size:var(--fs-mono-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-gold);margin-bottom:var(--space-2);}
.eco-name{font-family:var(--font-serif);font-size:22px;font-weight:600;margin:0 0 var(--space-2);}
.eco-body{font-size:var(--fs-small);color:var(--muted);margin:0;}

/* Technical metadata drawer — native details/summary keeps the keyboard
   contract (Enter/Space toggles, focus stays on the summary; no script). */
.meta-drawer{margin-top:var(--space-6);border:var(--border);border-radius:var(--radius);background:var(--surface);}
.meta-drawer>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);font-size:var(--fs-mono-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.meta-drawer>summary:hover{color:var(--text);}
.meta-drawer .fine-print{padding:var(--space-4) var(--space-6) 0;margin:0;}
.meta-code{margin:0;padding:var(--space-4) var(--space-6) var(--space-6);font-size:12.5px;line-height:1.8;color:var(--muted);white-space:pre-wrap;word-break:break-word;}