/* ============================================================================
   Category narrative — /growing-by-foresight
   ============================================================================

   Scoped entirely under `.fs`, the same convention as the homepage (`.hp`) and
   Market Intelligence (`.mi`). Two reasons that matters here:

   1. The theme styles h1–h4, p, ul and blockquote globally and decorates
      headings with ::before/::after. A page that does not reset inside its own
      scope inherits that chrome and reads as a default blog post. The local
      reset below is what stops it.
   2. This sheet is page-scoped (inc/asset-scope.php maps it to the
      `ageye_foresight` query var), but most theme sheets are not — an unscoped
      `.stat` or `.card` here would leak sitewide.

   Palette, radii, shadow and type are lifted from the homepage's own system
   (`body.home-v2` in home-v2.css) so this page belongs to the same site rather
   than inventing a look. Urbanist is the self-hosted file the homepage already
   ships — same URL, so no extra font request.

   Rhythm is dark → light → dark → light → light → dark, matching how the
   homepage alternates. The one piece of visual rhetoric is the shift block:
   the old column washed and dashed, the new column a white card with the pink
   rule, an arrow between them.

   @package AGEYE
   ============================================================================ */

@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/urbanist.woff2') format('woff2');
}

/* ── page tokens ──────────────────────────────────────────────────────── */
.fs {
  --paper: #f3f4f1;
  --card: #ffffff;
  --ink: #101010;
  --mut: #5c5f58;
  /* #8a8d84 was 3.06:1 on --paper and 2.85:1 on the shift panel's wash --
     under AA on both, and the panel's list is 16px body copy needing 4.5:1.
     #676a62 clears 4.5:1 on both surfaces (4.99 / 4.65) and is still 16x
     lighter than --ink, so the washed-out 'hindsight' column keeps reading
     as the quiet one. Every --quiet use on this page is text or a meaningful
     icon, so this is fixed at the token rather than per call site. */
  --quiet: #676a62;
  --pink-hot: #ff5c8a;
  --hair: rgba(16, 16, 16, .08);
  --hair-2: rgba(16, 16, 16, .16);
  --dk: #2b2d30;
  --dk-2: #323438;
  --dk-hair: rgba(255, 255, 255, .1);
  --dk-hair-2: rgba(255, 255, 255, .18);
  --on-dk: rgba(244, 246, 242, .95);
  --on-dk-dim: rgba(244, 246, 242, .68);
  --sh-soft: 0 14px 30px -22px rgba(60, 80, 100, .18);
  --r: 16px;
  --font: 'Urbanist', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;

  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ── local reset: stop theme element styles reaching inside ───────────── */
.fs h1, .fs h2, .fs h3, .fs h4, .fs p, .fs ul, .fs ol, .fs li,
.fs dl, .fs dt, .fs dd, .fs figure, .fs blockquote {
  margin: 0; padding: 0; border: 0; background: none; text-transform: none;
}
.fs h1::before, .fs h2::before, .fs h3::before, .fs h1::after, .fs h2::after, .fs h3::after { content: none; }
.fs ul { list-style: none; }
.fs a { color: inherit; text-decoration: none; }
.fs svg { display: block; max-width: 100%; }
.fs *, .fs *::before, .fs *::after { box-sizing: border-box; }
.fs ::selection { background: var(--pink); color: #fff; }

/* ── layout ───────────────────────────────────────────────────────────── */
.fs-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.fs .fs-narrow { max-width: 820px; }
.fs .fs-sec { padding: 92px 0; }
.fs .fs-sec-tight { padding-top: 72px; }

/* ── shared type ──────────────────────────────────────────────────────── */
.fs .fs-eyebrow {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
}
.fs .fs-eyebrow.fs-on-dk { color: var(--pink-hot); }
.fs .fs-h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.fs .fs-h2-lg { font-size: clamp(1.9rem, 4vw, 3rem); }
.fs .fs-lede { max-width: 62ch; margin: 0 0 20px; color: var(--mut); }
.fs .fs-lede:last-child { margin-bottom: 0; }
.fs .fs-intro { max-width: 62ch; margin: 18px 0 0; color: var(--mut); }
.fs .fs-on-dk-dim { color: var(--on-dk-dim); }

/* ── hero — dark sheet ────────────────────────────────────────────────── */
.fs-hero { background: var(--dk); color: var(--on-dk); }
.fs .fs-hero-in { padding-top: 168px; padding-bottom: 88px; }
.fs .fs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--dk-hair-2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dk);
}
.fs .fs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink-hot); }
.fs .fs-h1 {
  max-width: 16ch;
  margin: 0 0 26px;
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.fs .fs-standfirst {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--on-dk-dim);
}

/* ── the enemy ────────────────────────────────────────────────────────── */
.fs .fs-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 34px;
}
.fs .fs-def {
  padding: 26px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--hair);
  box-shadow: var(--sh-soft);
}
.fs .fs-def-term {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.fs .fs-def-body { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--mut); }

/* ── proof — dark band ────────────────────────────────────────────────── */
.fs-band { padding: 92px 0; background: var(--dk); color: var(--on-dk); }
.fs .fs-stats {
  display: grid;
  /* 2x2, not a 4-across row. At 4-up the card is 218px of usable width and
     "90% vs 5%" needs 256px at this type size, so the numeral wrapped to two
     lines and dragged that card's claim out of alignment with the other three.
     Widening the card to ~505px is what lets every metric hold one line at
     full size; shrinking the type to fit a 4-up row would have undone the
     larger numerals. Explicit columns rather than auto-fit because auto-fit
     packs 3 across at this container width and leaves a fourth orphan. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 44px 0 0;
}
@media (max-width: 720px) {
  .fs .fs-stats { grid-template-columns: minmax(0, 1fr); }
}
.fs .fs-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid var(--dk-hair);
  border-radius: var(--r);
  background: var(--dk-2);
}
.fs .fs-stat-n {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--pink-hot);
  font-variant-numeric: tabular-nums;
}
.fs .fs-stat-c { font-size: .96rem; line-height: 1.55; color: var(--on-dk-dim); }
.fs .fs-stat-src { font-size: .8rem; font-style: normal; color: rgba(244, 246, 242, .45); }

/* ── the shift ────────────────────────────────────────────────────────── */
.fs-shift { margin-top: 40px; }

/* ── the flag ─────────────────────────────────────────────────────────── */
.fs-flag { background: var(--card); border-top: 1px solid var(--hair); }
.fs .fs-claim {
  margin: 0 0 26px;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.fs .fs-faq-list { margin-top: 34px; }
.fs .fs-faq-item { padding: 26px 0; border-top: 1px solid var(--hair); }
.fs .fs-faq-item:last-child { border-bottom: 1px solid var(--hair); }
.fs .fs-faq-list dt { margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.fs .fs-faq-list dd { margin: 0; color: var(--mut); }

/* ── close — dark sheet ───────────────────────────────────────────────── */
.fs-close { padding: 92px 0 104px; background: var(--dk); color: var(--on-dk); }
.fs .fs-quote { margin: 0 0 52px; padding: 0 0 0 26px; border-left: 3px solid var(--pink-hot); }
.fs .fs-quote p {
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--on-dk);
}
.fs .fs-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }
.fs .fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.fs .fs-btn svg { width: 18px; height: 18px; }
.fs .fs-btn-primary { background: var(--pink); color: #fff; }
.fs .fs-btn-primary:hover { background: var(--pink-hot); transform: translateY(-1px); }
.fs .fs-btn-ghost { border: 1px solid var(--dk-hair-2); color: var(--on-dk); }
.fs .fs-btn-ghost:hover { border-color: var(--on-dk); transform: translateY(-1px); }
.fs .fs-btn:focus-visible { outline: 2px solid var(--pink-hot); outline-offset: 3px; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fs { font-size: 16.5px; }
.fs .fs-wrap { padding: 0 18px; }
.fs .fs-sec, .fs .fs-band { padding: 60px 0; }
.fs .fs-close { padding: 60px 0 72px; }
.fs .fs-hero-in { padding-top: 128px; padding-bottom: 60px; }
.fs .fs-h1 { max-width: none; }
.fs .fs-cols { grid-template-columns: 1fr; gap: 28px; }

  /* stack the comparison: panels stack, the arrow turns to point down */
  .fs .fs-shift { grid-template-columns: 1fr; }
.fs .fs-ctas .fs-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-btn { transition: none; }
.fs .fs-btn:hover { transform: none; }
}

/* ── hero CTAs ────────────────────────────────────────────────────────── */
.fs .fs-ctas-hero { margin-top: 34px; }

/* ── the enemy: stacked statement ─────────────────────────────────────────
   The eyebrow, the lead-in and the three lines are ONE typographic unit, not
   three stacked paragraphs. The lead-in is the sentence the stack completes
   ("The most expensive input in an indoor farm / It isn't the lights..."), so
   it sits tight against the stack as its first rung and steps up in size and
   in ink: --quiet -> --mut -> --ink. The eyebrow keeps its own air above so
   the label reads as a label and not as part of the sentence.
   --quiet on --paper is 2.96:1, under the 3:1 WCAG AA floor for large text,
   which is why the two setup lines are --mut (5.9:1) rather than --quiet. */
.fs .fs-statement { margin-top: 6px; }
.fs .fs-lead-in {
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--quiet);
}
.fs .fs-stack {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
}
.fs .fs-stack-l { color: var(--mut); }
.fs .fs-stack-hit { color: var(--ink); }
.fs .fs-stack-hit::after {
  content: "";
  display: block;
  width: 92px;
  height: 4px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--pink);
}

/* ── stats: lens label, much larger numeral, connective rule ──────────── */
.fs .fs-stats { position: relative; }
.fs .fs-stat { position: relative; gap: 10px; }
.fs .fs-stat-lens {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(244, 246, 242, .5);
}
.fs .fs-stat-n {
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  line-height: .95;
  white-space: nowrap;
}
.fs .fs-stat-c { font-size: .94rem; }

/* ── the shift: two panels ────────────────────────────────────────────── */
.fs .fs-shift {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: 40px;
}
.fs .fs-panel {
  padding: 32px 30px;
  border-radius: var(--r);
  border: 1px solid var(--hair);
}
.fs .fs-panel-old { background: #ececea; border-color: rgba(16, 16, 16, .1); }
.fs .fs-panel-new { background: var(--card); border-color: rgba(63, 125, 82, .28); box-shadow: var(--sh-soft); }
.fs .fs-panel-h {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.fs .fs-panel-old .fs-panel-h { color: var(--quiet); }
.fs .fs-panel-new .fs-panel-h { color: var(--ink); }
.fs .fs-panel-note {
  margin: 0 0 22px;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--quiet);
}
.fs .fs-panel-new .fs-panel-note { color: #3f7d52; }
.fs .fs-panel-list { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.fs .fs-panel-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 1.02rem;
  line-height: 1.45;
}
.fs .fs-panel-old .fs-panel-list li { color: var(--quiet); }
.fs .fs-panel-new .fs-panel-list li { color: var(--ink); }
.fs .fs-mark { width: 18px; height: 18px; margin-top: 3px; }
.fs .fs-mark-x { color: #88847c; }   /* 3.15:1 on the wash; the cross carries meaning */
.fs .fs-mark-c { color: #3f7d52; }
.fs .fs-swap {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--quiet);
}
.fs .fs-swap svg { width: 24px; height: 24px; }

/* ── intelligence-layer diagram ───────────────────────────────────────── */
.fs .fs-dg {
  display: grid;
  grid-template-columns: 1fr 54px minmax(190px, .8fr) 54px 1fr;
  align-items: center;
  gap: 0;
  margin-top: 52px;
  padding: 34px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--paper);
}
.fs .fs-dg-col { display: flex; flex-direction: column; gap: 12px; }
.fs .fs-dg-lab {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--quiet);
}
.fs .fs-dg-node {
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--card);
}
.fs .fs-dg-node-out { border-left: 3px solid var(--pink); }
.fs .fs-dg-name { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.fs .fs-dg-detail { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.45; color: var(--mut); }
.fs .fs-dg-flow { display: flex; flex-direction: column; gap: 26px; align-items: center; }
.fs .fs-dg-flow span {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--hair-2), rgba(232, 21, 91, .5));
}
.fs .fs-dg-flow-out span { background: linear-gradient(90deg, rgba(232, 21, 91, .5), var(--hair-2)); }
.fs .fs-dg-core {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: 22px 18px;
  border-radius: var(--r);
  background: var(--dk);
  color: var(--on-dk);
  box-shadow: var(--sh-soft);
}
.fs .fs-dg-core-n { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.fs .fs-dg-core-s {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pink-hot);
}

/* ── FAQ accordion (native <details> — no JS) ─────────────────────────── */
.fs .fs-faq-item { padding: 0; border-top: 1px solid var(--hair); }
.fs .fs-faq-item:last-child { border-bottom: 1px solid var(--hair); }
.fs .fs-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.fs .fs-faq-item summary::-webkit-details-marker { display: none; }
.fs .fs-faq-item summary:hover { color: var(--pink); }
.fs .fs-faq-item summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.fs .fs-faq-ind { flex: none; width: 20px; height: 20px; color: var(--quiet); transition: transform .25s; }
.fs .fs-faq-item[open] .fs-faq-ind { transform: rotate(45deg); color: var(--pink); }
.fs .fs-faq-item p { margin: 0 0 24px; color: var(--mut); }