/* TerraFab OS marketing site — Home page (/) sections.
   Source: HANDOVER-marketing-site.md §4 (structure) + §5 (content arrays).
   Generic type-scale/CTA-panel primitives (.tf-eyebrow, .tf-h1/h2/h3,
   .tf-lead, .tf-body, .tf-cta-panel) live in shell.css since every page
   uses them, not just Home -- this file was fixed to only hold sections
   genuinely specific to Home. (A Product Tour bug surfaced this: that page
   used those classes without linking this file, so they were unstyled.)

   Hero fade-up, stat count-up, and the live feed ticker's rotation +
   pulsing dot render here in their final, settled state by default (no
   animation) — that's also exactly the prefers-reduced-motion end-state
   the doc's Definition of Done requires; home.js layers the motion on top
   for count-up/ticker, and the two CSS-only animations below are gated on
   prefers-reduced-motion: no-preference. */

.tf-section { padding: 96px 0; }
.tf-section--sand { background: var(--tf-sand); }
.tf-section--shell { background: var(--tf-shell); }
.tf-section--deep { background: var(--tf-deep); color: var(--tf-on-dark); }

/* ---- Hero ---------------------------------------------------------- */
.tf-hero { padding-top: 88px; padding-bottom: 56px; }
.tf-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.tf-hero__ctas { display: flex; align-items: center; gap: 14px; }
.tf-hero__media { position: relative; }
.tf-hero__image {
  width: 100%; height: 460px; object-fit: cover; border-radius: var(--tf-r-xl);
  display: block; box-shadow: var(--tf-shadow-lg);
}
.tf-hero__live {
  position: absolute; left: -28px; bottom: 32px; width: 340px;
  background: var(--tf-shell); border-radius: var(--tf-r-lg); box-shadow: var(--tf-shadow-lg);
  padding: 20px 24px;
}
.tf-hero__live-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.tf-hero__live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tf-coral); flex-shrink: 0; }
.tf-hero__live-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tf-ocean);
}
.tf-hero__feed-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--tf-line);
}
.tf-hero__feed-row:first-of-type { border-top: none; padding-top: 0; }
.tf-hero__feed-text { font-size: 13px; font-weight: 500; color: var(--tf-ink); }
.tf-hero__feed-time {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--tf-body-faint);
  white-space: nowrap;
}

/* ---- Motion (hero fade-up, live-dot pulse) ------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tf-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  .tf-hero__copy { animation: tf-fade-up 600ms var(--tf-ease) both; }

  @keyframes tf-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
  .tf-hero__live-dot { animation: tf-pulse 1.8s ease-in-out infinite; }
}

/* ---- Stat band ------------------------------------------------------ */
.tf-stats {
  background: var(--tf-ocean); color: var(--tf-sand); border-radius: var(--tf-r-lg);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.tf-stats__item {
  padding: 40px 32px; text-align: center; border-left: 1px solid rgba(245,238,227,0.15);
}
.tf-stats__item:first-child { border-left: none; }
.tf-stats__value {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 42px;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.tf-stats__label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.85;
}
.tf-stats__disclaimer { text-align: center; font-size: 11px; color: var(--tf-body-faint); margin: 24px 0 0; }

/* ---- The problem ------------------------------------------------------ */
.tf-problem__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.tf-problem__stat {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 96px;
  letter-spacing: -0.02em; line-height: 1; margin: 0 0 20px;
}
.tf-problem__stat span { color: var(--tf-coral); }
.tf-problem__body { max-width: 40ch; font-size: 17px; line-height: 1.65; color: var(--tf-on-dark); }
.tf-problem__q-heading { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 34px; margin: 0 0 28px; }
.tf-problem__row {
  display: flex; gap: 14px; align-items: flex-start; background: rgba(245,238,227,0.06);
  border-radius: 10px; padding: 18px 22px; margin-bottom: 12px; transition: background var(--tf-dur) var(--tf-ease);
}
.tf-problem__row:hover { background: rgba(245,238,227,0.12); }
.tf-problem__n {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--tf-coral);
  font-size: 13px; flex-shrink: 0; padding-top: 2px;
}
.tf-problem__q { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.tf-problem__d { font-size: 14px; color: rgba(245,238,227,0.55); margin: 0; }

/* ---- Chain of custody ------------------------------------------------- */
.tf-chain__header { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: end; margin-bottom: 56px; }
.tf-chain__title { max-width: 24ch; text-wrap: balance; }
.tf-chain__body { font-size: 17px; line-height: 1.65; color: var(--tf-body); margin: 0; }
.tf-timeline { position: relative; padding-left: 40px; }
.tf-timeline::before {
  content: ''; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px;
  background: rgba(10,41,48,0.14);
}
.tf-timeline__entry { position: relative; padding-bottom: 30px; display: grid; grid-template-columns: 1fr 400px; gap: 32px; }
.tf-timeline__entry:last-child { padding-bottom: 0; }
.tf-timeline__dot {
  position: absolute; left: -40px; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  border: 5px solid var(--tf-sand);
}
.tf-timeline__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 10px; }
.tf-timeline__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; margin: 0 0 10px; }
.tf-timeline__body { font-size: 15px; line-height: 1.6; color: var(--tf-body-muted); max-width: 56ch; margin: 0; }

.tf-evidence-chip {
  display: flex; gap: 13px; align-items: center; background: var(--tf-shell);
  border: 1px solid var(--tf-line); border-radius: var(--tf-r-md); padding: 14px 18px;
  box-shadow: var(--tf-shadow-sm); transition: transform var(--tf-dur) var(--tf-ease), box-shadow var(--tf-dur) var(--tf-ease);
  max-width: 400px;
}
.tf-evidence-chip:hover { transform: translateY(-2px); box-shadow: var(--tf-shadow-hover); }
.tf-evidence-chip__type {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 9.5px;
}
.tf-evidence-chip__body { min-width: 0; flex: 1; }
.tf-evidence-chip__filename {
  color: var(--tf-ocean-text); font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.tf-evidence-chip__meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--tf-body-faint); }
.tf-pill {
  display: inline-flex; align-items: center; font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 9999px; white-space: nowrap; flex-shrink: 0;
}

/* Per-gate tone modifiers (§5.3 data — 4 fixed combinations, not reusable
   general tokens, so named here rather than inlined per element). */
.tf-chip--slate { background: rgba(10,41,48,0.06); color: var(--tf-slate); }
.tf-chip--teal { background: rgba(15,122,134,0.14); color: var(--tf-ocean-text); }
.tf-chip--coral { background: rgba(224,120,86,0.14); color: var(--tf-coral-deep); }
.tf-pill--teal { background: rgba(15,122,134,0.14); color: var(--tf-ocean-text); }
.tf-pill--amber { background: rgba(185,118,43,0.16); color: var(--tf-amber); }
.tf-pill--slate { background: rgba(10,41,48,0.08); color: rgba(22,33,31,0.6); }
.tf-timeline__dot--teal { background: #0F7A86; }
.tf-timeline__dot--coral { background: #E07856; }
.tf-timeline__dot--deep { background: #0A2930; }
.tf-timeline__eyebrow--teal { color: var(--tf-ocean-text); }
.tf-timeline__eyebrow--coral { color: var(--tf-coral-deep); }
.tf-timeline__eyebrow--slate { color: rgba(22,33,31,0.5); }

/* ---- Evidence types (5-up) --------------------------------------------- */
.tf-evidence-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.tf-evidence-card {
  background: var(--tf-shell); border: 1px solid var(--tf-line); border-radius: 14px; padding: 22px;
}
.tf-evidence-card__title { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; }
.tf-evidence-card__body { font-size: 13.5px; color: var(--tf-body-muted); margin: 0; }

/* ---- One evidence regime, wherever modules are made -------------------- */
.tf-china__header { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: end; margin-bottom: 48px; }
.tf-china__title { max-width: 24ch; text-wrap: balance; }
.tf-china__body { font-size: 17px; line-height: 1.65; color: var(--tf-body); margin: 0; }
.tf-china__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tf-china__col { border-top: 2px solid var(--tf-coral); padding-top: 18px; }
.tf-china__col h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.tf-china__col p { font-size: 14.5px; color: var(--tf-body-muted); margin: 0; }

/* ---- Audiences ---------------------------------------------------------- */
.tf-audiences__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 24px; flex-wrap: wrap; }
.tf-audiences__lender-link {
  /* --tf-coral fails AA at this size on --tf-sand -- darkened per §2's own
     fallback instruction (see contact.css's note on the same finding). */
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tf-coral-press); border-bottom: 1.5px solid var(--tf-coral-press); padding-bottom: 4px; white-space: nowrap;
}
.tf-audiences-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tf-audience-card { background: var(--tf-shell); border-radius: var(--tf-r-lg); box-shadow: var(--tf-shadow-md); padding: 28px 30px; transition: transform var(--tf-dur) var(--tf-ease), box-shadow var(--tf-dur) var(--tf-ease); }
.tf-audience-card:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-lg); }
.tf-audience-card__tag {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tf-coral-press); margin: 0 0 14px;
}
.tf-audience-card__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 21px; margin: 0 0 10px; }
.tf-audience-card__body { font-size: 14.5px; line-height: 1.6; color: var(--tf-body-muted); margin: 0; }

/* ---- Responsive (Home sections — §2's stated breakpoints) ---------------- */
/* ---- Capability band (word proof points, not numeric stats) ----------- */
.tf-stats__value--text { font-size: 24px; letter-spacing: -0.01em; }

/* Hero secondary CTA: reuses the existing lender-link treatment so no new
   button style is introduced; only spacing is added. */
/* The borrowed lender-link style sets white-space: nowrap for its short
   label; this CTA is a full sentence, so it must be allowed to wrap or it
   overflows the viewport at 375px. Override on the modifier only -- the
   original .tf-audiences__lender-link is untouched. */
.tf-hero__secondary {
  display: inline-block; margin-top: 20px;
  white-space: normal; max-width: 100%; line-height: 1.5;
}

/* ---- Strategic context ------------------------------------------------ */
/* Reuses the existing chain-header two-column pattern; only the standalone
   definition paragraph needs its own rule. */
.tf-context__definition {
  margin: 36px 0 0; max-width: 78ch; font-size: 16.5px; line-height: 1.7;
  padding-top: 24px; border-top: 1px solid var(--tf-line);
}

/* ---- Modular reforms -------------------------------------------------- */
.tf-reform__header {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px;
  align-items: end; margin-bottom: 44px;
}
.tf-reform__title { color: var(--tf-sand); font-size: 42px; margin: 0; }
.tf-reform__intro { font-size: 16px; line-height: 1.65; margin: 0; opacity: 0.88; }
.tf-reform__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.tf-reform__card { border-top: 2px solid var(--tf-coral); padding-top: 18px; }
.tf-reform__card-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px;
  color: var(--tf-sand); margin: 0 0 8px;
}
.tf-reform__card-body { font-size: 14.5px; line-height: 1.6; margin: 0; opacity: 0.82; }
.tf-reform__note { margin: 44px 0 0; font-size: 12.5px; opacity: 0.6; }

/* ---- Why TerraFab ----------------------------------------------------- */
.tf-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 24px; }
.tf-why__item { border-top: 1px solid var(--tf-line); padding-top: 16px; }
.tf-why__title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 8px;
}
.tf-why__body { font-size: 14.5px; line-height: 1.6; color: var(--tf-body-muted); margin: 0; }

/* ---- Chain-of-custody flow (Government page, Section 5) ---------------- */
/* Ordered list styled with the existing card/rule language -- no new tokens,
   no new colours, degrades to a plain numbered list without CSS. */
.tf-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 18px;
}
.tf-flow__step { border-top: 2px solid var(--tf-coral); padding-top: 16px; }
.tf-flow__num {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: 0.16em; opacity: 0.7; margin-bottom: 6px;
}
.tf-flow__label {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 16px; color: var(--tf-sand);
}

@media (max-width: 1099px) {
  .tf-section { padding: 72px 0; }
  .tf-hero { padding-top: 72px; }
  .tf-hero__grid, .tf-problem__grid, .tf-chain__header, .tf-china__header,
  .tf-reform__header { grid-template-columns: 1fr; }
  .tf-reform__header { align-items: start; gap: 24px; }
  .tf-stats { grid-template-columns: repeat(2, 1fr); }
  .tf-stats__item:nth-child(3) { border-left: none; }
  .tf-evidence-grid { grid-template-columns: repeat(2, 1fr); }
  .tf-evidence-grid > *:last-child { grid-column: 1 / -1; }
  .tf-china__cols, .tf-audiences-grid { grid-template-columns: repeat(2, 1fr); }
  .tf-reform__grid, .tf-why__grid { grid-template-columns: repeat(2, 1fr); }
  .tf-flow { grid-template-columns: repeat(2, 1fr); }
  /* min-width: 0 on the grid items -- otherwise CSS Grid's default
     minmax(auto,1fr) uses each item's min-content size as a floor, which
     can force the "1fr" track wider than the viewport regardless of the
     single-column override (found via the 375px responsive check). */
  .tf-timeline__entry { grid-template-columns: 1fr; }
  .tf-timeline__entry > * { min-width: 0; }
  .tf-evidence-chip { max-width: 100%; }
}

@media (max-width: 767px) {
  .tf-hero__image { height: 280px; }
  .tf-hero__live { position: static; width: auto; margin-top: 20px; }
  .tf-stats { grid-template-columns: repeat(2, 1fr); }
  /* Desktop's 40px/32px padding is too wide for a 2-column split at this
     viewport -- found via the 375px responsive check. */
  .tf-stats__item { padding: 28px 16px; }
  .tf-evidence-grid, .tf-china__cols, .tf-audiences-grid,
  .tf-reform__grid, .tf-why__grid, .tf-flow { grid-template-columns: 1fr; }
}