/* ============================================================================
   Skool of Forecasting — program page design system
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for type scale, measure, widths and touch sizing
   across every /programs/ page.

   Load this LAST in <head> — after landing.css / letter.css and after any
   page-level <style> block — so its :root wins on document order. Historically
   each landing page redeclared the same token block inline, which is why the
   pages drifted apart. Change a value here and every page moves together.

   Fixes encoded here (measured with the audit harness, 2026-08-04):
     - type floor: nothing renders below ~12.5px (was 9px–11px in places)
     - the screen is used: content was capped at 1480px on a 2560px display
     - measure held at ~65-70ch instead of 96-124ch on wide screens
     - touch targets raised to 44px (nav links were 11-13px tall)
     - horizontal overflow on letter pages at tablet/mobile removed
   ========================================================================== */

:root {
  /* ---- Brand and spacing ------------------------------------------------ */
  --ink:        #1a1916;
  --paper:      #f6f2e9;
  --paper-alt:  #ede7d8;
  --muted:      #5c5750;
  --rule:       rgba(26,25,22,0.16);
  --rule-light: rgba(246,242,233,0.14);
  --accent:     #7a1f1c;
  --accent-bg:  rgba(122,31,28,0.07);
  --serif:      'EB Garamond', Georgia, serif;
  --mono:       'Courier Prime', monospace;
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;

  /* ---- Type scale -------------------------------------------------------
     Every step is fluid. The vw coefficient is what lets a large display get
     proportionally larger text instead of the same text in a narrow ribbon. */
  --h1:    clamp(2.1rem,  1.55rem + 2.6vw,  4.4rem);
  --h2:    clamp(1.65rem, 1.35rem + 1.5vw,  3rem);
  --h3:    clamp(1.2rem,  1.1rem  + 0.5vw,  1.7rem);
  --lead:  clamp(1.125rem, 1.05rem + 0.38vw, 1.55rem);
  --body:  clamp(1.0625rem, 1rem + 0.26vw,  1.35rem);

  /* --small and --label carry the trust copy: terms, refund lines, prices,
     attributions. They were 14px and 11px flat. Both now have a floor and
     scale up. Nothing on the page may resolve below --label. */
  --small: clamp(0.9rem,  0.87rem + 0.12vw, 1.08rem);
  --label: clamp(0.795rem, 0.76rem + 0.11vw, 0.95rem);

  /* ---- Widths -----------------------------------------------------------
     --max is the structural shell and should track the viewport.
     --read/--col are reading columns expressed in em so the measure stays
     constant (~65-70 characters) as the type scales up on large screens. */
  --max:    min(93vw, 2000px);
  --wide:   min(92vw, 1180px);
  --read:   min(92vw, 34em);
  --col:    min(92vw, 34em);
  --gutter: clamp(18px, 4vw, 76px);
}

/* the-market-forecaster is the one page that declares its tokens on <body>
   (`.market-forecaster-page`) rather than :root. Custom properties resolve from
   the NEAREST ancestor that sets them, so body always beats :root for that
   page's content no matter what order the stylesheets load in. Redeclaring the
   same tokens on the same selector is the only thing that reaches it.
   If another page ever adopts a body-scoped token block, add it here too. */
.market-forecaster-page {
  --ink:        #1a1916;
  --paper:      #f6f2e9;
  --paper-alt:  #ede7d8;
  --muted:      #5c5750;
  --rule:       rgba(26,25,22,0.16);
  --rule-light: rgba(246,242,233,0.14);
  --accent:     #7a1f1c;
  --accent-bg:  rgba(122,31,28,0.07);
  --serif:      'EB Garamond', Georgia, serif;
  --mono:       'Courier Prime', monospace;
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;
  --h1:    clamp(2.1rem,  1.55rem + 2.6vw,  4.4rem);
  --h2:    clamp(1.65rem, 1.35rem + 1.5vw,  3rem);
  --h3:    clamp(1.2rem,  1.1rem  + 0.5vw,  1.7rem);
  --lead:  clamp(1.125rem, 1.05rem + 0.38vw, 1.55rem);
  --body:  clamp(1.0625rem, 1rem + 0.26vw,  1.35rem);
  --small: clamp(0.9rem,  0.87rem + 0.12vw, 1.08rem);
  --label: clamp(0.795rem, 0.76rem + 0.11vw, 0.95rem);
  --max:   min(93vw, 2000px);
  --wide:  min(92vw, 1180px);
  --read:  min(92vw, 34em);
}

/* Anchor jumps must not park content underneath the sticky nav. */
html { scroll-padding-top: 6.5rem; }

/* Sideways scroll on a phone reads as broken. clip (not hidden) keeps
   position:sticky working. */
body { overflow-x: clip; }

/* ---- Measure ---------------------------------------------------------------
   Running text was reaching 96-124 characters per line on wide screens. These
   are the containers the audit flagged. Composition stays centred (the column
   is centred in the page); only the text inside it sets ragged-right, which is
   materially easier to read than centring an eight-line paragraph. */
.prose p,
.prose li,
.qa-a,
.faq-a p,
.not-for-item__p,
.notfor-item__p,
.module__p,
.proof-entry__p {
  max-width: 68ch;
  text-align: left;
}
.prose,
.qa-list,
.notfor-grid { margin-inline: auto; }
.prose p, .prose li, .qa-a, .faq-a p { margin-inline: auto; }

/* Bullet lists carry as much selling weight as body copy here. */
.includes-bullets li,
.offer-card__list li { font-size: var(--body); }

/* ---- Headline sizing -------------------------------------------------------
   .urgency-h inherited --h1 and overran the viewport at 1440 and above. */
.section-head h2.urgency-h,
.urgency-h { font-size: clamp(1.55rem, 1.15rem + 2.1vw, 3.3rem); line-height: 1.06; }

/* ---- Small-caps / mono labels ---------------------------------------------
   Heavy tracking at 11px was the worst legibility offender on the page and
   caused ugly wrapping ("· BRISBANE" orphaning onto its own line). Larger with
   less tracking reads better at every width. */
.eyebrow,
.proof-role,
.proof-item__label,
.pb-item__lbl,
.u-row__l,
.link-quiet,
.hero-terms,
.final-close__terms,
.final-close__refund,
.offer-card__refund,
.offer-card__kicker,
.value-stack__label,
.letter-hero__kicker,
.module__num {
  font-size: var(--label);
  letter-spacing: 0.12em;
}
.eyebrow { text-wrap: balance; }

/* The one-line legal/disclaimer blocks were rendering at 10px. */
.final-disclaimer,
.footer,
.footer-inner,
.tool-desc,
.tool-badge { font-size: var(--small); }

/* ---- Orphan-page furniture -------------------------------------------------
   the-forecaster, the-market-forecaster and time-by-solar-degrees-letter were
   built before the shared stylesheets existed and carry their own class names,
   so the selectors above miss them entirely. Their labels were rendering at
   10-11px. Listing them here keeps every page's type floor in ONE file rather
   than patching three pages separately.
   (The two report pages - house-of-influence, year-ahead-almanac - are
   deliberately excluded from visual alignment; they keep their own designs.) */
.bc-item,
.bc-sep,
.nav-login,
.status-pill,
.pc-fine,
.ac-year,
.fl-num,
.label,
.mf-kicker,
.mf-panel-label,
.mf-period { font-size: var(--label); letter-spacing: 0.1em; }

/* Year spans injected by script. They sit inside small mono labels AND inside
   headings, so they must inherit rather than carry a size of their own —
   otherwise the year renders as tiny mono in the middle of an h1/h2. */
.js-next-year,
.js-intake-year { font-size: inherit; font-family: inherit; letter-spacing: inherit; }
.label .js-next-year,
.label .js-intake-year,
.pc-label .js-next-year { font-size: var(--label); letter-spacing: 0.1em; }

/* the-market-forecaster scopes every rule under a .market-forecaster-page
   ancestor, which outranks the single-class selectors above. Match its
   specificity rather than reaching for !important. */
.market-forecaster-page .mf-kicker,
.market-forecaster-page .mf-panel-label,
.market-forecaster-page .mf-period,
.market-forecaster-page .label,
.market-forecaster-page .mf-hero__copy .mf-kicker,
.market-forecaster-page .mf-framework__intro .mf-kicker,
.market-forecaster-page .long-letter-inner .label { font-size: var(--label); }

/* Same page, the handful of labels hard-coded to 10px/11px rather than to the
   token, which the token override above cannot reach. */
.market-forecaster-page .mf-panel-label,
.market-forecaster-page .mf-period,
.market-forecaster-page .mf-button,
.market-forecaster-page .site-footer,
.market-forecaster-page .nav a,
.market-forecaster-page .btn { font-size: var(--label); }

/* Breadcrumbs and inline nav links on those pages also failed the touch test. */
@media (max-width: 820px) {
  .bc-item,
  .nav-login,
  .fl-title { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- Centred composition ---------------------------------------------------
   Brand rule: pages compose on a centreline. The hero byline was flush left
   while the headline above it was centred. */
.hero-byline,
.letter-byline { justify-content: center; flex-wrap: wrap; }

@media (max-width: 620px) {
  /* The "·" separator was orphaning onto its own line ahead of the location,
     leaving a stray bullet as the first glyph of line 2. */
  .hero-byline__sep,
  .letter-byline__sep { display: none; }
  .hero-byline,
  .letter-byline { gap: 4px 10px; row-gap: 2px; }

  /* Three lines of tracked-out uppercase mono is a lot of fold to spend before
     the headline. Tighten the tracking and let it breathe less. */
  .eyebrow { letter-spacing: 0.08em; line-height: 1.45; }
}

/* ---- Touch targets ---------------------------------------------------------
   Nav and quiet links measured 11-21px tall. 44px is the accessible minimum
   and these pages are read on phones. */
@media (max-width: 820px) {
  .nav-links a,
  .letter-nav-inner a,
  .letter-hero__nav a,
  .nav-brand,
  .nav-logo,
  .link-quiet,
  .ps-link,
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn { padding-block: 12px; }

  /* The letter nav was pushing 142px-wide links past the viewport edge,
     producing horizontal scroll on every letter page. `.jump-nav-inner` is
     time-by-solar-degrees-letter's name for the same component. */
  .letter-nav-inner,
  .jump-nav-inner,
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    max-width: 100%;
  }
  .letter-nav-inner > a,
  .jump-nav-inner > a { flex: 0 0 auto; }
  .jump-nav { max-width: 100vw; overflow-x: hidden; }

  /* Long unbroken headline words must not force the page wider. */
  h1, h2, h3 { overflow-wrap: break-word; }
}

/* ---- Mobile ----------------------------------------------------------------
   Below 600px the multi-column offer/proof grids need to stack, and the
   floating chat widget must not sit on top of the final call to action. */
@media (max-width: 600px) {
  .proof-grid,
  .offer-grid,
  .section-grid,
  .section-grid--3,
  .urgency-grid,
  .includes-list,
  .not-for-grid { grid-template-columns: 1fr !important; }

  .footer { padding-bottom: 5.5rem; }
  .final-close__refund { margin-bottom: 1rem; }
}

/* Keep the persistent chat launcher clear of the last CTA on every size. */
.final-close,
.ps-block__inner { padding-bottom: 1rem; }

/* ---- Wide screens ----------------------------------------------------------
   At 2560 the old fixed 1480px shell used 58% of the display. The tokens above
   handle the shell; these keep the reading column from becoming a slab. */
@media (min-width: 1800px) {
  .section-head p { max-width: 60ch; }
  .hero-sub { max-width: 46ch; }
}

/* ============================================================================
   SHARED COMPONENTS
   Every sales page needs these. They were first written inline on the Financial
   Time Table page; they live here so all pages get the same object rather than
   each page growing its own copy. Do not re-declare them per page.
   ========================================================================== */

/* Centred section heading (the brand composes on a centreline). */
.section-head--center { text-align: center; }
.section-head--center p { margin-left: auto; margin-right: auto; }

/* Objection / Q&A list ------------------------------------------------------
   Direct-response pages answer objections on the page. Used by #questions. */
.qa-list { max-width: var(--read); margin: 0 auto; }
.qa-item { border-top: 1px solid var(--rule); padding: var(--sp-4) 0; }
.qa-item:last-child { border-bottom: 1px solid var(--rule); }
.qa-q {
  font-family: var(--serif);
  font-size: var(--h3);
  line-height: 1.3;
  margin: 0 0 var(--sp-2);
  font-weight: 500;
}
.qa-a { font-size: var(--body); line-height: 1.7; color: var(--muted); margin: 0; }
.qa-a + .qa-a { margin-top: var(--sp-2); }

/* Disqualifier list ("do not enrol if…") ------------------------------------ */
.notfor-grid { max-width: var(--read); margin: 0 auto; display: grid; gap: var(--sp-4); }
.notfor-item {
  border-left: 2px solid var(--accent);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  text-align: left;
}
.notfor-item__h {
  font-family: var(--mono);
  font-size: var(--small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.notfor-item__p { font-size: var(--body); line-height: 1.65; margin: 0; color: var(--muted); }

/* P.S. block on a dark final-close section ---------------------------------- */
.ps-note {
  max-width: var(--read);
  margin: var(--sp-5) auto 0;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(246,242,233,0.14);
  font-size: var(--body);
  line-height: 1.7;
  color: rgba(246,242,233,0.78);
  text-align: left;
}
.ps-note strong { color: var(--paper); }
.ps-note a { color: var(--paper); text-decoration: underline; }

/* Model/diagram plate ------------------------------------------------------- */
.model-plate {
  background: var(--ink);
  border: 1px solid rgba(246,242,233,0.14);
  padding: clamp(14px, 2.5vw, 28px);
  margin: 0 auto var(--sp-5);
  max-width: var(--wide);
  box-shadow: 0 20px 60px rgba(26,25,22,0.18);
}
.model-plate img { width: 100%; height: auto; display: block; }
.model-plate__caption {
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246,242,233,0.58);
  text-align: center;
}

/* Long quiet links must be allowed to wrap rather than blow out the column. */
.hero-sub-link .link-quiet { white-space: normal; }

/* Section-exit CTA sits centred under every section that closes with one. */
.section-exit-cta { text-align: center; margin-top: var(--sp-5); }

/* ---- Letter decision block ------------------------------------------------
   Every long letter gets one early, scannable buying summary before the
   research narrative. It answers fit, result, proof and terms without giving
   away paid lessons. */
.letter-decision {
  padding: clamp(42px, 6vw, 78px) 0;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
}
.letter-decision__head {
  max-width: 760px;
  margin: 0 auto var(--sp-5);
  text-align: center;
}
.letter-decision__head h2 {
  font-family: var(--serif);
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}
.letter-decision__head p {
  max-width: 64ch;
  margin: 0 auto;
  font-size: var(--body);
  line-height: 1.65;
  color: var(--muted);
}
.letter-decision__grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.letter-decision__item {
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-2);
}
.letter-decision__item strong {
  display: block;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.letter-decision__item p {
  margin: 0;
  font-size: var(--body);
  line-height: 1.55;
}
.letter-decision__action {
  max-width: 1120px;
  margin: var(--sp-5) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  text-align: center;
  color: var(--muted);
  font-size: var(--small);
}
.letter-decision__action .btn { color: var(--paper); }
@media (max-width: 900px) {
  .letter-decision__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .letter-decision__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .letter-decision__action { align-items: stretch; flex-direction: column; }
  .letter-decision__action .btn { width: 100%; justify-content: center; }
}

/* ---- Final shared alignment rules ----------------------------------------
   These rules are intentionally last. Individual pages historically carried
   slightly different mobile bars and navigation rules, which made the same
   product family look like unrelated sites. The canonical course pages and
   the long research letters now share these final layout decisions. */
.proof-bar-inner { min-height: 68px; }
.nav-links a { white-space: nowrap; }
.letter-nav-inner,
.jump-nav-inner { scrollbar-width: none; }
.letter-nav-inner { overflow-x: auto; max-width: 100%; box-sizing: border-box; }
.letter-nav-inner::-webkit-scrollbar,
.jump-nav-inner::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Solar Degrees already has the shared proof-bar CTA. Keep its older top
   navigation for the back link, but remove the duplicate purchase button. */
.solar-letter-page > .nav .nav-links > a:last-child { display: none; }
.solar-letter-page > .nav { position: relative; }
.solar-letter-page .proof-bar { position: relative !important; top: auto !important; }
.solar-letter-page .jump-nav { position: relative; top: auto; }

/* Leave room for the persistent chat launcher. Without this, the launcher
   sits over the final CTA in the sticky purchase bar on long letters. */
.sticky-bar { padding-right: clamp(96px, 10vw, 168px); }

@media (max-width: 600px) {
  /* Show one useful proof fact and the action on a phone. The remaining facts
     stay in the page body; they should not become a clipped horizontal strip. */
  .proof-bar-inner {
    min-height: 58px;
    padding: 0 12px;
    display: flex;
    align-items: stretch;
    gap: 0;
  }
  .proof-bar .pb-item:nth-of-type(n + 2) { display: none; }
  .proof-bar .pb-item:first-of-type {
    display: flex;
    flex: 1 1 auto;
    padding: 10px 12px;
  }
  .proof-bar .pb-item__val { font-size: 1rem; }
  .proof-bar .pb-item__lbl { font-size: 0.52rem; letter-spacing: 0.1em; }
  .proof-bar .pb-cta { padding: 10px 14px; }
  .proof-bar .pb-cta a { font-size: var(--label); letter-spacing: 0.1em; }

  .letter-nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    overflow-x: hidden;
    padding: 8px 12px;
  }
  .letter-nav a { padding: 9px 0; }

  /* The Solar Degrees letter uses the older nav/jump-nav markup. Keep it in
     the same three-layer stack as the other research letters. */
  .solar-letter-page > .nav {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
  }
  .solar-letter-page > .nav .nav-links { flex-direction: row; gap: 0; }
  .solar-letter-page > .nav .nav-links > a:first-child { display: none; }
  .solar-letter-page .proof-bar {
    position: relative !important;
    top: auto !important;
    z-index: 180;
  }
  .solar-letter-page .proof-bar-inner {
    display: flex;
    min-height: 58px;
  }
  .solar-letter-page .proof-bar__chips {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--label);
    letter-spacing: 0.08em;
  }
  .solar-letter-page .proof-bar__chips span { display: none; }
  .solar-letter-page .proof-bar__chips span:first-child { display: block; }
  .solar-letter-page .proof-bar .btn { padding: 10px 14px; min-height: 40px; }
  .solar-letter-page .jump-nav {
    position: relative;
    top: auto;
    z-index: 170;
  }
  .solar-letter-page .jump-nav-inner {
    height: 44px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 0 12px;
    gap: 14px;
  }
  .sticky-bar { padding-right: 88px; }
}
