/* ═══ COLOR FLOW MAP (from design-spec sections bg_context) ═══
 * index.html:
 *   nav        → transparent-on-dark (scrolled: solid #1A2B45)
 *   hero       → DARK  (#1A2B45)    | text: #F5F0E8 (cream)
 *   trust-bar  → DARK  (#243352)    | text: #F5F0E8
 *   problem    → LIGHT (#F7F4EE)    | text: #1A2B45
 *   how-it-works-preview → CREAM (#EDE8DC) | text: #1A2B45
 *   coverage   → DARK  (#1A2B45)    | text: #F5F0E8
 *   why-param  → WHITE (#FFFFFF)    | text: #1A2B45
 *   data-trans → LIGHT (#F7F4EE)    | text: #1A2B45
 *   testimonials → CREAM (#EDE8DC) | text: #1A2B45
 *   about-preview → DARK (#1A2B45) | text: #F5F0E8
 *   final-cta  → LIGHT (#F7F4EE)   | text: #1A2B45
 *   footer     → DARK  (#0F1C2D)   | text: #A8B8CC
 *
 * how-it-works.html, methodology.html, about.html, faq.html, contact.html:
 *   nav        → transparent-on-light (forced solid #1A2B45)
 *   hero       → LIGHT (#F7F4EE)    | text: #1A2B45
 *   sections   → alternating LIGHT/CREAM/WHITE
 *   footer     → DARK  (#0F1C2D)   | text: #A8B8CC
 *
 * coverage/agriculture.html, coverage/infrastructure.html, for-brokers.html:
 *   nav        → transparent-on-dark (scrolled: solid #1A2B45)
 *   hero       → DARK  (#1A2B45)   | text: #F5F0E8
 *   sections   → mixed LIGHT/CREAM/DARK
 *   footer     → DARK  (#0F1C2D)   | text: #A8B8CC
 *
 * blog/index.html, blog articles, legal pages:
 *   nav        → forced solid #1A2B45
 *   hero/header → LIGHT (#F7F4EE) | text: #1A2B45
 *   content    → WHITE (#FFFFFF)   | text: #1A2B45
 *   footer     → DARK  (#0F1C2D)  | text: #A8B8CC
 *
 * Nav rule: dark-top pages → nav starts transparent, white text;
 *           light-top pages → nav solid #1A2B45, white text (forced)
 * Adjacent same-polarity sections: differentiated via bg shade step
 * ═══════════════════════════════════════════════════════════════ */

/* === RESET & ROOT === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Brand palette */
  --rwt-navy:          #1A2B45;
  --rwt-navy-alt:      #243352;
  --rwt-navy-deep:     #0F1C2D;
  --rwt-amber:         #D4873A;
  --rwt-amber-aa-lt:   #B36A18;
  --rwt-amber-aa-dk:   #F0A84C;

  /* Foreground tokens */
  --rwt-fg-light-primary:    #1A2B45;
  --rwt-fg-light-secondary:  #4A5568;
  --rwt-fg-dark-primary:     #F5F0E8;
  --rwt-fg-dark-secondary:   #A8B8CC;

  /* Background tokens */
  --rwt-bg-light:    #F7F4EE;
  --rwt-bg-white:    #FFFFFF;
  --rwt-bg-dark:     #1A2B45;
  --rwt-bg-dark-alt: #243352;
  --rwt-bg-cream:    #EDE8DC;

  /* Signal */
  --rwt-signal-red:   #C0392B;
  --rwt-signal-green: #2E7D52;

  /* Typography */
  --rwt-font-serif: 'Playfair Display', 'Georgia', serif;
  --rwt-font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  --rwt-font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing */
  --rwt-space-xs: 4px;
  --rwt-space-sm: 8px;
  --rwt-space-md: 16px;
  --rwt-space-lg: 24px;
  --rwt-space-xl: 40px;
  --rwt-space-2xl: 64px;
  --rwt-space-3xl: 96px;
  --rwt-space-4xl: 128px;

  /* Radius */
  --rwt-radius-sm:  2px;
  --rwt-radius-md:  4px;
  --rwt-radius-lg:  8px;

  /* Shadows */
  --rwt-shadow-sm:  0 1px 3px rgba(26,43,69,0.10);
  --rwt-shadow-md:  0 4px 12px rgba(26,43,69,0.12);
  --rwt-shadow-lg:  0 8px 32px rgba(26,43,69,0.16);

  /* Transitions */
  --rwt-transition: 200ms ease;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--rwt-font-sans);
  font-weight: 400;
  line-height: 1.65;
  color: var(--rwt-fg-light-primary);
  background: var(--rwt-bg-white);
  min-height: 100vh;
}

body.rwt-page--dark-top {
  background: var(--rwt-bg-dark);
}

/* === TYPOGRAPHY BASE === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rwt-font-serif);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--rwt-amber-aa-lt);
  text-decoration: none;
  transition: color var(--rwt-transition);
}
a:hover { color: var(--rwt-amber); }

/* Links on dark backgrounds */
.rwt-section--dark a,
.rwt-hero--dark a,
footer a {
  color: var(--rwt-amber-aa-dk);
}
.rwt-section--dark a:hover,
.rwt-hero--dark a:hover,
footer a:hover {
  color: var(--rwt-fg-dark-primary);
}

strong { font-weight: 600; }
em { font-style: italic; }

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
li { margin-bottom: 0.375rem; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure { margin: 0; }

/* === MONO TEXT === */
.rwt-mono,
.rwt-data-value,
.rwt-trigger-value {
  font-family: var(--rwt-font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* === BUTTONS === */
.rwt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  border-radius: var(--rwt-radius-md);
  font-family: var(--rwt-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--rwt-transition), color var(--rwt-transition), border-color var(--rwt-transition), transform var(--rwt-transition);
  text-decoration: none;
  white-space: nowrap;
}

.rwt-btn--primary {
  background: var(--rwt-amber);
  color: var(--rwt-navy-deep);
  border-color: var(--rwt-amber);
}
.rwt-btn--primary:hover {
  background: #c47a30;
  border-color: #c47a30;
  color: var(--rwt-navy-deep);
  transform: translateY(-1px);
}

.rwt-btn--outline-light {
  background: transparent;
  color: var(--rwt-fg-dark-primary);
  border-color: rgba(245,240,232,0.45);
}
.rwt-btn--outline-light:hover {
  background: rgba(245,240,232,0.1);
  border-color: var(--rwt-fg-dark-primary);
  color: var(--rwt-fg-dark-primary);
}

.rwt-btn--outline-dark {
  background: transparent;
  color: var(--rwt-navy);
  border-color: var(--rwt-navy);
}
.rwt-btn--outline-dark:hover {
  background: var(--rwt-navy);
  color: var(--rwt-fg-dark-primary);
}

.rwt-btn--ghost {
  background: transparent;
  color: var(--rwt-amber-aa-dk);
  border-color: transparent;
  padding: 11px 4px;
}
.rwt-btn--ghost:hover {
  color: var(--rwt-fg-dark-primary);
}

/* === EYEBROW / LABELS === */
.rwt-eyebrow {
  font-family: var(--rwt-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.75rem;
}
/* Light section eyebrow */
.rwt-section--light .rwt-eyebrow,
.rwt-section--white .rwt-eyebrow,
.rwt-section--cream .rwt-eyebrow,
.rwt-subhero--light .rwt-eyebrow {
  color: var(--rwt-amber-aa-lt);
}
/* Dark section eyebrow */
.rwt-section--dark .rwt-eyebrow,
.rwt-hero--dark .rwt-eyebrow,
.rwt-subhero--dark .rwt-eyebrow {
  color: var(--rwt-amber-aa-dk);
}

/* === DIVIDERS === */
.rwt-divider {
  border: none;
  border-top: 1px solid rgba(26,43,69,0.12);
  margin: var(--rwt-space-2xl) 0;
}
.rwt-section--dark .rwt-divider,
footer .rwt-divider {
  border-top-color: rgba(245,240,232,0.12);
}

/* === TAGS / BADGES === */
.rwt-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--rwt-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* On light */
.rwt-section--light .rwt-tag,
.rwt-section--white .rwt-tag,
.rwt-section--cream .rwt-tag {
  background: rgba(26,43,69,0.08);
  color: var(--rwt-fg-light-primary);
}
/* On dark */
.rwt-section--dark .rwt-tag,
.rwt-hero--dark .rwt-tag {
  background: rgba(245,240,232,0.12);
  color: var(--rwt-fg-dark-secondary);
}

/* === SIGNAL COLORS === */
.rwt-signal--paid {
  color: var(--rwt-signal-green);
  font-weight: 600;
}
.rwt-signal--trigger {
  color: var(--rwt-amber-aa-dk);
  font-weight: 600;
}
.rwt-signal--alert {
  color: var(--rwt-signal-red);
}

/* === ACCESSIBILITY === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--rwt-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* === SCROLL-REVEAL ANIMATION === */
.rwt-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.rwt-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Failsafe: force visible after 1.2s */
@keyframes rwt-force-visible {
  to { opacity: 1; transform: translateY(0); }
}
.rwt-fade-in {
  animation: rwt-force-visible 0s 1.2s both;
}
.rwt-fade-in.is-visible {
  animation: none;
}