/* =========================================================
   FLOWSENSE SYSTEM.CSS
   Loaded LAST on every page — wins same-specificity ties
   via cascade order. Standardizes width, spacing, and type.
   No messaging or structural changes.
========================================================= */

:root {
  --page-max: 1680px;
  --content-max: 1480px;
  --hero-max: 1600px;
  --text-max: 1120px;
  --heading-max: 900px;
  --section-pad-x: clamp(24px, 4vw, 80px);

  --pad-hero: 7rem 2.25rem 5rem;
  --pad-major: 6rem 2.25rem;
  --pad-supporting: 5rem 2.25rem;
  --pad-mobile-major: 4rem 1.4rem;
  --pad-mobile-hero: 5rem 1.4rem 3.5rem;
}

/* ---------- BASE TYPOGRAPHY ---------- */
body {
  font-size: 1.06rem;
  line-height: 1.6;
}

.eyebrow,
.fork-card-label,
.what-pill-num,
.demo-why-num,
.price-tier,
.section-label,
.block-label,
.mobile-section-label {
  font-size: 0.92rem;
  letter-spacing: 0.18em;
}

/* ---------- BUTTONS ---------- */
.btn,
.form-submit,
.price-cta,
.nav-cta {
  font-size: 0.95rem;
  letter-spacing: 0.07em;
}
.btn { padding: 1rem 1.9rem; }

/* ---------- H1 (hero titles) ---------- */
.hero h1,
.demo-hero-text h1,
.pricing-hero h1,
section[class*="-hero"] h1 {
  font-size: clamp(3rem, 6vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

/* ---------- H2 (section heads) — explicit list ---------- */
.diagnosis h2,
.fork-head h2,
.what-head h2,
.why-now h2,
.final-cta h2,
.pricing-intro h2,
.faq-head h2,
.section-head h2,
.counter-frame h2,
.spine-head h2,
.win-rate h2,
.reframe h2,
.credibility h2,
.intro h2,
.vertical h2,
.method-head h2,
.retired h2,
.sources-section-head h2,
.section-title,
h2.section-title {
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
}

/* ---------- H3 (card titles) — explicit list ---------- */
.fork-card h3,
.what-pill h4,
.demo-why-card h3,
.price-card h3,
.faq-q,
.ba-col h3,
.inst-text h3,
.outcome-card h3,
.method-card h3,
.tier-legend h3,
.toc h3,
.card-title,
h3.card-title {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.2;
}

/* Card-body text floor */
.fork-card p,
.what-pill p,
.demo-why-card p,
.price-card .price-desc,
.price-features li,
.faq-a,
.outcome-card p,
.method-card p,
.ba-col p {
  font-size: 1rem;
  line-height: 1.7;
}

/* Long-form body text */
.diagnosis-body,
.what-body,
.why-now-body,
.hero-lede,
.demo-hero-text p,
.pricing-hero p,
.final-cta p,
.pricing-intro p {
  font-size: clamp(1.06rem, 1.4vw, 1.18rem);
  line-height: 1.7;
}

/* ---------- WIDTH SYSTEM ---------- */
/* Page-max: nav, footer, hero wrappers */
.nav-inner,
.footer-inner,
.hero-inner,
.demo-hero-inner,
.pricing-hero-inner {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Content-max: explicit allowlist of standard layout wrappers */
.diagnosis-inner,
.fork-inner,
.what-inner,
.why-now-inner,
.final-cta-inner,
.demo-why-inner,
.pricing-inner,
.section-head,
.outcomes-inner,
.who-inner,
.credibility-inner,
.intro-inner,
.anchor-row-inner,
.stat-anchor-inner,
.method-inner,
.sources-inner {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Text-max: narrative reading blocks */
.diagnosis-body,
.what-body,
.why-now-body,
.hero-lede,
.demo-hero-text p,
.final-cta p,
.fork-bridge,
.pricing-intro p,
.pricing-note,
.faq-inner {
  max-width: var(--text-max);
}

/* ---------- SECTION SPACING ---------- */
.hero,
.demo-hero,
.pricing-hero,
section[class*="-hero"] {
  padding: var(--pad-hero);
}

.diagnosis,
.fork,
.what,
.why-now,
.final-cta,
.demo-why,
.pricing-section,
.pricing-faq,
.counter-frame,
.spine,
.win-rate,
.ba,
.reframe,
.outcomes,
.anchor-row,
.stat-anchor,
.intro,
.who,
.credibility,
.vertical,
.method,
.sources-section,
.retired,
.toc,
.tier-legend {
  padding: var(--pad-major);
}

/* ---------- CARDS / PANELS ---------- */
.fork-card,
.demo-why-card,
.price-card,
.demo-form-wrap,
.login-card,
.what-pill,
.outcome-card,
.method-card {
  padding: 2.2rem 2rem;
}
.fork-card { padding: 2.6rem 2.2rem; }
.demo-form-wrap { padding: 2.4rem 2.2rem; }
.login-card { padding: 2.6rem 2.2rem; }

/* ---------- FORMS ---------- */
.form-group label { font-size: 0.78rem; letter-spacing: 0.14em; }
.form-group input,
.form-group select,
.form-group textarea { font-size: 1rem; padding: 0.8rem 1rem; }

/* ---------- FOOTER ---------- */
footer { padding: 3.5rem 2rem; font-size: 0.9rem; }
.footer-tagline { font-size: 1rem; }
.footer-links a { font-size: 0.88rem; }
.footer-copy { font-size: 0.8rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1060px) {
  .hero,
  .demo-hero,
  .pricing-hero,
  section[class*="-hero"] {
    padding: var(--pad-mobile-hero);
  }
  .diagnosis, .fork, .what, .why-now, .final-cta,
  .demo-why, .pricing-section, .pricing-faq,
  .counter-frame, .spine, .win-rate, .ba, .reframe,
  .outcomes, .anchor-row, .stat-anchor, .intro, .who,
  .credibility, .vertical, .method, .sources-section,
  .retired, .toc, .tier-legend {
    padding: var(--pad-mobile-major);
  }
}

@media (max-width: 600px) {
  body { font-size: 1.02rem; }
  .hero h1, .demo-hero-text h1, .pricing-hero h1,
  section[class*="-hero"] h1 {
    font-size: clamp(2.2rem, 8vw, 2.8rem);
  }
  .diagnosis h2, .fork-head h2, .what-head h2, .why-now h2,
  .final-cta h2, .pricing-intro h2, .faq-head h2,
  .section-head h2, .counter-frame h2, .spine-head h2,
  .win-rate h2, .reframe h2, .credibility h2, .intro h2,
  .vertical h2, .method-head h2, .retired h2,
  .sources-section-head h2 {
    font-size: clamp(1.7rem, 6vw, 2.1rem);
  }
  .footer-links { gap: 1rem; }
}

/* =========================================================
   ALIGNMENT / HEADING-SHELL PASS
   Center narrative sections so the page composes around the
   midline instead of left-anchoring everything. Keep cards
   and grids left-aligned for natural reading.
========================================================= */

/* Heading-shell wrappers (eyebrow + h2 + intro) */
.what-head,
.spine-head,
.section-head,
.method-head,
.faq-head,
.fork-head,
.credibility-head {
  max-width: var(--heading-max);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.what-head .eyebrow,
.spine-head .eyebrow,
.section-head .eyebrow,
.method-head .eyebrow,
.fork-head .eyebrow {
  display: block;
}

/* Centered narrative section inner wrappers */
.diagnosis-inner,
.what-inner,
.why-now-inner,
.reframe-inner,
.counter-frame-inner,
.win-rate-inner,
.intro-inner,
.credibility-inner {
  text-align: center;
}

.diagnosis-inner > .eyebrow,
.why-now-inner > .eyebrow,
.reframe-inner > .eyebrow,
.intro-inner > .eyebrow,
.credibility-inner > .eyebrow,
.counter-frame-inner > .eyebrow,
.win-rate-inner > .eyebrow {
  display: block;
}

.diagnosis-inner > h2,
.why-now-inner > h2,
.reframe-inner > h2,
.intro-inner > h2,
.credibility-inner > h2,
.counter-frame-inner > h2,
.win-rate-inner > h2 {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--heading-max);
}

/* Body paragraphs: keep block centered, but text-align left for readability.
   Targets BOTH explicit body classes and plain <p> children of narrative
   wrappers (real markup uses plain <p> in counter-frame, intro, credibility,
   sources intro, etc.). */
.diagnosis-body,
.what-body,
.why-now-body,
.reframe-body,
.diagnosis-inner > p,
.why-now-inner > p,
.reframe-inner > p,
.intro-inner > p,
.credibility-inner > p,
.counter-frame-inner > p,
.win-rate-inner > p {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--text-max);
  text-align: left;
}

/* Pull quotes & signatures inside centered narrative blocks */
.diagnosis-pull,
.reframe-pull,
.counter-frame-inner .pull,
.win-rate-inner .pull,
.intro-inner .signature,
.credibility-inner .signature {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Cards & grids should stay left-aligned even inside centered parents */
.what-three,
.fork-grid,
.outcomes-grid,
.outcomes,
.ba-grid,
.spine-grid,
.demo-why-inner,
.pricing-grid,
.method-grid,
.who-grid,
.vertical-grid,
.anchor-row-inner {
  text-align: left;
}

.what-pill,
.fork-card,
.outcome-card,
.ba-col,
.demo-why-card,
.method-card,
.price-card,
.tier-legend {
  text-align: left;
}

/* Internal vertical rhythm tokens */
.eyebrow { margin-bottom: 0.9rem; }
.what-head h2,
.spine-head h2,
.section-head h2,
.method-head h2,
.fork-head h2 { margin-bottom: 1.4rem; }

/* Mobile: keep narrative centered, slightly tighter heading shells */
@media (max-width: 600px) {
  .what-head, .spine-head, .section-head, .method-head, .faq-head,
  .fork-head, .credibility-head { max-width: 100%; }
}

/* =========================================================
   FULL-BLEED SECTION ARCHITECTURE
   Outer <section> spans 100% viewport (already correct since
   sections are block-level and backgrounds/borders live on
   the section itself, not the *-inner container).
   This block scales horizontal padding responsively so that
   every section breathes correctly from mobile to ultra-wide,
   without any per-breakpoint media queries.
   Targets: mobile 20-24px, tablet 32-40px, desktop 48-64px,
   ultra-wide 64-80px.
   ========================================================= */
.hero,
.demo-hero,
.pricing-hero,
.trust-strip,
.diagnosis,
.fork,
.what,
.why-now,
.stakes,
.stat-anchor,
.spine,
.reframe,
.counter-frame,
.win-rate,
.before-after,
.systems-callout,
.outcomes,
.who,
.final-cta,
.sources-strip,
.both-opener,
.vertical,
.credibility,
.intro,
.tier-legend,
.method,
.sources-section,
.retired,
.toc,
.anchor-row,
.pricing-section,
.pricing-faq,
.demo-why,
footer {
  padding-inline: var(--section-pad-x);
}

/* =========================================================
   ULTRA-WIDE BREAKPOINT (>= 1600px)
   On large monitors, increase horizontal breathing room AND
   widen content shells so the site stops looking like a
   small centered island. Mobile/tablet are unaffected.
   ========================================================= */
@media (min-width: 1600px) {
  :root {
    --section-pad-x: clamp(40px, 5vw, 96px);
  }
  /* Major grids breathe more */
  .fork-grid,
  .what-three,
  .outcomes-grid,
  .who-grid,
  .vertical-grid,
  .ba-grid,
  .spine-grid,
  .pricing-grid,
  .method-grid,
  .demo-why-inner {
    gap: 3rem;
  }
  /* Hero text column may stretch slightly on ultra-wide */
  .hero h1 { max-width: 860px; }
  .hero-lede { max-width: 820px; }
  /* Shift hero text ~50px left of center on wide monitors for asymmetric anchoring */
  .hero-inner {
    margin-left: max(0px, calc(50% - var(--hero-max) / 2 - 50px));
    margin-right: auto;
  }
  /* Trust strip uses full page-max with extra gap */
  .trust-strip-inner { gap: 4rem; }
}

@media (min-width: 1920px) {
  :root {
    --section-pad-x: clamp(56px, 5vw, 112px);
  }
}