/* Responsive framework + shared layout primitives (EP-FCW-05).
   Breakpoint pixel values below are hardcoded because CSS @media
   conditions cannot reference custom properties -- asserted equal to
   design_tokens.py's BREAKPOINT_* constants by tests/test_app_shell.py,
   so they cannot silently drift apart. Mirrors
   product/verify_site/static/css/layout.css's *structure*; every value
   is FAST's own token. No gradient, drop shadow, oversized rounded
   corner, or decorative animation anywhere below (§12's chrome
   discipline, reused as a principle). */

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

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: var(--weight-body);
  font-size: var(--size-2);
  line-height: var(--line-height-body);
  color: var(--color-body);
  background: var(--color-background);
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-navy);
  color: var(--color-background);
  padding: var(--space-2) var(--space-4);
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.site-header {
  border-bottom: 1px solid var(--color-divider);
}

.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.brand {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--size-3);
  color: var(--color-navy);
  text-decoration: none;
  margin-right: auto;
}

.primary-nav ul {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  color: var(--color-body);
  text-decoration: none;
  font-size: var(--size-1);
  font-weight: var(--weight-emphasis);
}

.primary-nav a:hover,
.primary-nav a:focus {
  color: var(--color-navy);
}

.nav-cta {
  margin-left: var(--space-5);
}

.button {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: var(--weight-emphasis);
  font-size: var(--size-1);
  padding: var(--space-2) var(--space-4);
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
}

/* Brass is reserved for primary calls to action only (§12) -- never used
   for a secondary/tertiary button or any non-CTA emphasis.

   font-size/font-weight below are a deliberate WCAG AA fix (EP-FCW-14
   colour-contrast audit), not a drive-by style change: white text on
   the ratified brass (#9C7A34, §12's own exact value, never altered)
   measures 4.00:1 -- short of the 4.5:1 "normal text" AA minimum, but
   comfortably clears the 3:1 "large text" AA minimum. WCAG's large-text
   carve-out requires >=18.66px (14pt) *and* bold (700) -- size-3 (20px)
   at weight-heading (700) genuinely qualifies, with margin, rather than
   picking a size that merely looks large enough. .button--secondary
   (navy text, 16:1+ at any size) needed no change and keeps the base
   .button size. */
.button--primary {
  background: var(--color-brass);
  color: var(--color-background);
  font-size: var(--size-3);
  font-weight: var(--weight-heading);
}

.button--primary:hover,
.button--primary:focus {
  background: var(--color-brass-hover);
}

.button--secondary {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-border);
}

.button--secondary:hover,
.button--secondary:focus {
  border-color: var(--color-navy);
}

.site-footer {
  border-top: 1px solid var(--color-divider);
  background: var(--color-background-subtle);
  margin-top: var(--space-9);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-7);
}

.site-footer h2 {
  font-size: var(--size-1);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: var(--color-body);
  text-decoration: none;
  font-size: var(--size-1);
}

.site-footer__brand {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
}

.site-footer__disclaimer,
.site-footer__issuer {
  color: var(--color-muted);
  font-size: var(--size-0);
  max-width: 48ch;
}

/* Mobile: wrap nav below the brand row. A collapsing hamburger menu is
   deferred until it's driven by a real interaction requirement -- a
   wrapped flex row is a genuine, working responsive behaviour today, not
   a placeholder for one (same posture VERIFY's own Phase 1 took). */
@media (max-width: 768px) {
  .site-header__row {
    flex-wrap: wrap;
  }

  .primary-nav {
    order: 3;
    width: 100%;
  }

  .primary-nav ul {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

/* Shared prose-page primitives -- Home, Trust & Security, and Pricing are
   long-form institutional prose pages built from the same handful of
   patterns rather than bespoke per-page layout. */

.page-prose {
  max-width: 72ch;
  padding-block: var(--space-8);
}

.page-prose h1 {
  font-family: var(--font-ui);
  font-weight: var(--weight-heading);
  font-size: var(--size-6);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}

.page-prose h2 {
  font-family: var(--font-ui);
  font-weight: var(--weight-heading);
  font-size: var(--size-4);
  color: var(--color-ink);
  margin: var(--space-8) 0 var(--space-4);
}

.page-lede {
  font-family: var(--font-serif);
  font-size: var(--size-3);
  line-height: var(--line-height-body);
  color: var(--color-body);
}

.page-prose p {
  font-family: var(--font-ui);
  font-size: var(--size-2);
  line-height: var(--line-height-body);
  color: var(--color-body);
}

.table-scroll {
  overflow-x: auto;
}

/* EP-OCE-05: the split-columns card grid was removed here. Its only consumers
   were Home's "what this is / what this is not" split and the How FAST Works
   band, both of which the founder ruling of 2026-07-20 took off the page.
   Surfaced by test_no_dead_css_rules_in_product_stylesheets — which also reads
   comments, so the class name is written without its leading dot above. */

.trust-section {
  margin-bottom: var(--space-6);
}

.trust-section h2 {
  font-family: var(--font-ui);
  font-weight: var(--weight-heading);
  font-size: var(--size-4);
  color: var(--color-ink);
}

/* Shared form primitives (Enterprise Contact this phase). */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-family: var(--font-ui);
  font-size: var(--size-1);
  font-weight: var(--weight-emphasis);
  color: var(--color-ink);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-ui);
  font-size: var(--size-2);
  color: var(--color-body);
  border: 1px solid var(--color-border);
  padding: var(--space-3);
}

.form-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}

.form-field--checkbox label {
  font-weight: var(--weight-body);
}

/* Error summary banner (Phase 3 funnel forms: sign-in, upload). Always a
   live region (aria-live="polite" set at the call site, template by
   template) so a re-rendered form's rejection reason is announced
   without forcing renewed navigation. */

.error-summary {
  border-left: 3px solid var(--color-critical);
  background: var(--color-critical-background);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--size-1);
  color: var(--color-ink);
}