/* =====================================================
   Authority Directory — Global Stylesheet Template
   ADM Build System · Perfect Little Business™

   INSTRUCTIONS:
   1. Replace all values in the :root block with the
      client's brand spec (client-brand-spec.md)
   2. Update the Google Fonts @import or <link> tag
      to match the client's fonts
   3. All structural classes below are ready to use —
      do not modify unless evolving the ADM architecture
   ===================================================== */

/* --- CSS CUSTOM PROPERTIES --- */
:root {
  /* === BRAND COLORS — Replace with client values === */

  /* Primary accent — CTAs, labels, emphasis, hover. Never large fill. */
  --color-primary:        #2C79C4;   /* {{CLIENT_ACCENT}} */
  --color-primary-hover:  #2463A1;   /* {{CLIENT_ACCENT_HOVER}} */
  /* RGB triplet of primary, used in rgba() overlays. Auto-computed from accent hex. */
  --color-primary-rgb:    44, 121, 196;  /* {{CLIENT_ACCENT_RGB}} */

  /* Dark surface system */
  --color-charcoal:       #000000;   /* {{CLIENT_DARK}} */
  --color-charcoal-deep:  #000000;   /* {{CLIENT_DARK_DEEP}} */
  --color-charcoal-mid:   #111111;   /* {{CLIENT_DARK_MID}} */

  /* Light surface system */
  --color-parchment:      #FFFFFF;   /* {{CLIENT_LIGHT}} */
  --color-parchment-dark: #E6E6E6;   /* {{CLIENT_LIGHT_DARK}} */
  --color-cream:          #FEEAD8;   /* {{CLIENT_CALLOUT}} */
  --color-white:          #ffffff;   /* Card surfaces */

  /* Secondary accent */
  --color-amber:          #6ECADC;   /* {{CLIENT_SECONDARY}} */

  /* Text colors */
  --color-text-primary:   #000000;   /* {{CLIENT_TEXT}} */
  --color-text-muted:     #555555;   /* {{CLIENT_TEXT_MUTED}} */
  --color-text-on-dark:   #FFFFFF;   /* {{CLIENT_TEXT_ON_DARK}} */
  /* RGB triplet of text-on-dark, used in rgba() tints. Auto-computed. */
  --color-text-on-dark-rgb: 255, 255, 255;  /* {{CLIENT_TEXT_ON_DARK_RGB}} */
  --color-text-on-dark-muted: rgba(var(--color-text-on-dark-rgb), 0.75);
  /* Black, not white. Every loud surface in this brand (orange #FC943E,
     teal #6ECADC, peach #FEEAD8) is light, so white label text lands at
     1.17:1 to 2.22:1 and fails outright; black lands at 9.4:1 to 18:1.
     NOTE: this var has no {{CLIENT_*}} placeholder, so brand.colors
     .textOnPrimary in site.json is ignored and the value must be set here.
     Worth giving it a real role upstream in adm-builds. */
  --color-text-on-primary: #000000;

  /* Legacy aliases — MUST reference the client-replaced tokens above,
     never hardcode hex values, or client sites inherit PLB palette. */
  --color-bg-white:       var(--color-white);
  --color-bg-warm:        var(--color-parchment);
  --color-bg-charcoal:    var(--color-charcoal);
  --color-bg-blush:       var(--color-cream);

  /* Hero treatment — DO NOT default to a dark color. The hero bg should
     match the brand's vibe, not the darkest neutral. Override via the
     brand spec when a dark hero is intentional. */
  --color-hero-bg:         #6ECADC;     /* {{CLIENT_HERO_BG}} */
  --color-hero-text:       #000000;  /* {{CLIENT_HERO_TEXT}} */
  --color-hero-text-muted: #12333A;    /* {{CLIENT_HERO_TEXT_MUTED}} */
  --color-hero-border:     #4FB3C7;        /* {{CLIENT_HERO_BORDER}} */

  /* Site nav treatment — same rule as hero. Override per brand. */
  --color-nav-bg:          var(--color-parchment);     /* {{CLIENT_NAV_BG}} */
  --color-nav-text:        var(--color-text-primary);  /* {{CLIENT_NAV_TEXT}} */
  --color-nav-text-muted:  var(--color-text-muted);    /* {{CLIENT_NAV_TEXT_MUTED}} */
  --color-nav-border:      var(--color-parchment-dark);/* {{CLIENT_NAV_BORDER}} */

  /* === COMPONENT SURFACES — dark or light, per brand spec ===
     Each recurring component (CTA band, inShort card, sidebar CTA,
     highlight box, footer) declares its surface here. Values are
     computed by generate-css.js from brand.surfaces in site.json:
     'dark' maps to the dark surface system, 'light' to the light one.
     Dark is only the fallback when no choice is declared — the brand
     spec collects an explicit choice per client. Never hardcode hex. */
  --surface-cta-bg:            var(--color-cream);      /* {{CLIENT_SURFACE_CTA_BG}} */
  --surface-cta-text:          var(--color-text-primary);  /* {{CLIENT_SURFACE_CTA_TEXT}} */
  --surface-cta-text-rgb:      0, 0, 0;              /* {{CLIENT_SURFACE_CTA_TEXT_RGB}} */
  --surface-inshort-bg:        var(--color-white);      /* {{CLIENT_SURFACE_INSHORT_BG}} */
  --surface-inshort-text:      var(--color-text-primary);  /* {{CLIENT_SURFACE_INSHORT_TEXT}} */
  --surface-inshort-text-rgb:  0, 0, 0;              /* {{CLIENT_SURFACE_INSHORT_TEXT_RGB}} */
  --surface-sidebar-bg:        var(--color-cream);      /* {{CLIENT_SURFACE_SIDEBAR_BG}} */
  --surface-sidebar-text:      var(--color-text-primary);  /* {{CLIENT_SURFACE_SIDEBAR_TEXT}} */
  --surface-sidebar-text-rgb:  0, 0, 0;              /* {{CLIENT_SURFACE_SIDEBAR_TEXT_RGB}} */
  --surface-highlight-bg:      var(--color-cream);      /* {{CLIENT_SURFACE_HIGHLIGHT_BG}} */
  --surface-highlight-text:    var(--color-text-primary);  /* {{CLIENT_SURFACE_HIGHLIGHT_TEXT}} */
  --surface-highlight-text-rgb: 0, 0, 0;             /* {{CLIENT_SURFACE_HIGHLIGHT_TEXT_RGB}} */
  --surface-footer-bg:         var(--color-charcoal);      /* {{CLIENT_SURFACE_FOOTER_BG}} */
  --surface-footer-text:       var(--color-text-on-dark);  /* {{CLIENT_SURFACE_FOOTER_TEXT}} */
  --surface-footer-text-rgb:   255, 255, 255;              /* {{CLIENT_SURFACE_FOOTER_TEXT_RGB}} */

  /* === SMART GETS PAID BRAND BANDS ===
     Teal and orange are the primary surface colours on smartgetspaid.com.
     Her live theme alternates them down the page as skewed bands
     (.skewed-bg-teal / .skewed-bg-orange), with blue reserved for links.
     Declared here rather than in site.json because the pipeline's
     COLOR_ROLES has no tertiary role, so brand.colors.tertiary never
     reaches the stylesheet. Values read from her live CSS. */
  --color-teal:        #6ECADC;
  --color-teal-deep:   #4FB3C7;
  --color-orange:      #FC943E;
  --color-peach:       #FEEAD8;

  /* === TYPOGRAPHY — Replace with client fonts === */
  --font-headline:        'Oswald', sans-serif;         /* {{CLIENT_HEADLINE_FONT}} */
  --font-headline-weight: 700;                           /* {{CLIENT_HEADLINE_WEIGHT}} */
  --font-body:            'Bitter', Georgia, serif; /* {{CLIENT_BODY_FONT}} */
  --font-mono:            'Oswald', sans-serif; /* {{CLIENT_MONO_FONT}} */

  /* === SPACING — Structural constants === */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl:  120px;
  --page-pad:   48px;

  /* === LAYOUT — Structural constants === */
  --border-radius:     2px;   /* {{CLIENT_RADIUS}} */
  --border-radius-sm:  6px;
  --border-radius-btn: 2px;    /* {{CLIENT_BTN_RADIUS}} */
}


/* --- RESET & BASE --- */
/* `clip`, NOT `hidden`. The skewed band pseudo-elements overhang the viewport
   and need clipping, but `overflow: hidden` on an ancestor makes that ancestor
   the sticky containing block and silently kills `position: sticky` on the
   node sidebar. `clip` clips without creating a scroll container, so the
   sidebar keeps sticking. */
html, body { overflow-x: clip; }

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 19px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text-primary);
  background: var(--color-parchment);
  line-height: 1.75;
  font-size: 19px;
}

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

a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary);
}


/* --- TYPOGRAPHY --- */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  color: var(--color-text-primary);
  line-height: 1.15;
}

/* Weights are per level, not one blanket 700. On her live site the headings
   carry no weight declaration at all and pick up 400/600/700 from context,
   which is what keeps the pages airy. Forcing 700 everywhere is what made
   every headline read as EXTRA BOLD. */
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 400; }
h4 { font-weight: 600; }

/* Type scale raised to sit closer to smartgetspaid.com, which runs
   h1 4.5rem / h2 3rem / h3 2.25rem / h4 1.5rem. H1 is deliberately left
   where it was; everything below it was the part reading undersized. */
h1 { font-size: 66px; margin-bottom: var(--space-md); }
h2 { font-size: 58px; margin-bottom: var(--space-md); }
h3 { font-size: 44px; margin-bottom: var(--space-sm); }
h4 { font-size: 30px; margin-bottom: var(--space-xs); }

p {
  margin-bottom: var(--space-sm);
  font-size: 20px;
  line-height: 1.8;
}


/* --- SECTION LABEL / EYEBROW --- */
.section-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Deeper blue than the link accent. The eyebrow is 13px uppercase, so it
     is small text and needs 4.5:1: #2C79C4 is only 3.87:1 on the peach
     band. This is the existing accentHover token, not a new colour. */
  color: var(--color-primary-hover);
  margin-bottom: var(--space-sm);
  display: block;
}

.section-label--on-dark {
  color: var(--color-primary);
  opacity: 0.85;
}


/* --- LAYOUT --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}


/* --- SECTIONS --- */
.section {
  padding: var(--space-xl) 0;
}

.section--white {
  background: var(--color-white);
}

.section--white .card {
  background: var(--color-parchment);
  border-color: var(--color-parchment-dark);
}

/* The alternating band is TEAL, her primary surface colour. It was peach,
   which is why teal only ever appeared in the footer CTA and the page read
   peach top to bottom. Peach survives as punctuation, not as the field.
   The band is painted by a skewed pseudo-element so the section edges are
   diagonal, matching .skewed-bg-teal on her live site. */
.section--warm {
  background: transparent;
  position: relative;
}

.section--warm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-teal);
  transform: skewY(-2.0618deg);
  transform-origin: 0;
}

.section--warm .card { background: var(--color-white); border-color: #000000; }
/* Blue on teal is 3.30:1 and fails, so labels and links go black on the band. */
.section--warm .section-label,
.section--warm a:not(.btn) { color: #000000; }

.section--warm .card {
  background: var(--color-white);
  border-color: var(--color-parchment-dark);
}

/* Charcoal — floating rounded container */
.section--charcoal {
  background: transparent;
  color: var(--surface-cta-text);
  padding: var(--space-xl) 0;
}

.section--charcoal > .cta-block,
.section--charcoal > .container {
  background: var(--surface-cta-bg);
  border-radius: var(--border-radius);
  padding: var(--space-xl) var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.section--charcoal > .cta-block::after,
.section--charcoal > .container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--color-primary-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  border-radius: var(--border-radius);
}

.section--charcoal h1, .section--charcoal h2,
.section--charcoal h3, .section--charcoal h4 { color: var(--surface-cta-text); }
.section--charcoal p { color: var(--surface-cta-text); }
.section--charcoal a { color: var(--surface-cta-text); text-decoration-color: var(--color-primary); }
.section--charcoal .section-label { color: var(--color-primary); opacity: 0.85; }

/* Dark section — full-bleed */
.section--dark {
  background: var(--surface-cta-bg);
  color: var(--surface-cta-text);
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

.section--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--color-primary-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.section--dark > .container { position: relative; z-index: 1; }
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--color-text-on-dark); }
.section--dark p { color: var(--color-text-on-dark); }
.section--dark a { color: var(--color-text-on-dark); text-decoration-color: var(--color-primary); }
.section--dark .section-label { color: var(--color-primary); opacity: 0.85; }


/* --- HERO --- */
.hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: var(--color-hero-bg);
  color: var(--color-hero-text);
}

.hero h1, .hero h2, .hero h3, .hero h4 { color: var(--color-hero-text); }
.hero p { color: var(--color-hero-text-muted); }

.hero--video {
  position: relative;
  overflow: hidden;
  background: var(--color-hero-bg);
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--color-primary-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 2;
  pointer-events: none;
}

.hero__video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(36, 36, 36, 0.65) 0%,
    rgba(36, 36, 36, 0.78) 50%,
    rgba(36, 36, 36, 0.90) 100%);
  z-index: 1;
}

.hero__content { position: relative; z-index: 3; }

.hero__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  display: block;
}

.hero__headline {
  font-size: 62px;
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-hero-text);
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.hero__sub {
  font-size: 24px;
  color: var(--color-hero-text-muted);
  margin: 0 0 var(--space-lg);
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* --- BUTTONS --- */
/* Buttons use the label font, not the body font. Bitter is her body serif
   and her live site sets buttons in Oswald, so a serif button reads wrong. */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: var(--border-radius-btn);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  border: none;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Primary buttons are ORANGE, not the blue accent. On her site blue is only
   ever a link colour; the loud, clickable things are teal and orange blocks.
   Black on orange is 9.44:1, so the label stays black (white would be
   2.22:1 and fail). */
.btn--primary {
  background: var(--color-orange);
  color: #000000;
}

.btn--primary:hover {
  background: var(--color-teal);
  color: #000000;
}

/* Flat and bold, per her brand rules. A hairline border on a warm band
   is nearly invisible, so the secondary button carries a real 2px edge. */
.btn--secondary {
  background: transparent;
  color: #000000;
  border: 2px solid #000000;
  font-weight: 600;
}

.btn--secondary:hover {
  background: transparent;
  color: var(--color-hero-text);
  border-color: var(--color-hero-text);
}

.btn--secondary-light {
  background: var(--color-white);
  color: var(--color-primary);
  border: 0.5px solid var(--color-primary);
  font-weight: 500;
}

.btn--secondary-light:hover {
  background: var(--color-cream);
  color: var(--color-primary);
}

/* BUG FIX: this was white text inside a 0.5px white border, which is what the
   sidebar's "Apply to The Academy" button was rendering as on a light peach
   panel. Every surface in this brand is light, so ghost buttons are black with
   a real 2px edge. The .cta-block override further down handles the one dark-ish
   case, the teal band. */
.btn--ghost {
  background: transparent;
  color: #000000;
  border: 2px solid #000000;
  font-weight: 600;
}

.btn--ghost:hover {
  background: #000000;
  color: var(--color-teal);
}


/* --- NAVIGATION --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-nav-border);
  padding: var(--space-sm) 0;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.site-nav__logo {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-nav-text);
  text-decoration: none;
}

.site-nav__logo:hover { color: var(--color-primary); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
}

/* Nav mirrors .site-header .menu-primary a on her live site:
   Oswald, uppercase, 1rem, letter-spacing .0625rem. */
.site-nav__links a {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-nav-text);
  transition: color 0.2s ease;
}

.site-nav__links a:hover { color: var(--color-primary); }
.site-nav__links .btn { font-size: 15px; padding: 12px 24px; color: var(--color-text-on-primary); }

/* Nav dropdowns — a nav link may declare dropdown[] children in
   site.json. Toggle matches the plain-link style; panel follows the
   nav tokens so it works on light and dark navs alike. */
.site-nav__item--dropdown { position: relative; }

.site-nav__dropdown-toggle {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-nav-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.site-nav__dropdown-toggle:hover { color: var(--color-nav-text); }

.site-nav__chevron { font-size: 9px; transition: transform 0.2s ease; }
.site-nav__item--dropdown:hover .site-nav__chevron { transform: rotate(180deg); }

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 300px;
  background: var(--color-nav-bg);
  border: 1px solid var(--color-nav-border);
  border-radius: var(--border-radius-btn);
  padding: 12px 0;
  list-style: none;
  margin: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 110;
}

.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-nav__dropdown li { margin: 0; }
.site-nav__dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  white-space: normal;
  line-height: 1.4;
}
.site-nav__dropdown a:hover {
  background: rgba(var(--color-primary-rgb), 0.06);
}

/* --- PILLAR ACCENT THEMING (optional) --- */
/* Activates when a pillar declares accentColor in pillars.json — the
   renderers set --pillar-accent on <body class="pillar-themed">. With
   no accentColor declared, every rule falls back to the site primary,
   so un-themed builds render exactly as before. */
.pillar-themed .breadcrumb__item--current { color: var(--pillar-accent, var(--color-primary)); }
.pillar-themed .section-label { color: var(--pillar-accent, var(--color-primary)); }
.pillar-themed .inshort__label { color: var(--pillar-accent, var(--color-primary)); }
.pillar-themed .sidebar-cta__eyebrow { color: var(--pillar-accent, var(--color-primary)); }

/* Related-node cards carry their DESTINATION pillar's accent. */
.card--pillar-tinted { border-top: 3px solid var(--card-accent, var(--color-primary)); }
.card--pillar-tinted .card__label { color: var(--card-accent, var(--color-primary)); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-nav-text);
  margin: 5px 0;
  transition: transform 0.3s ease;
}


/* --- BREADCRUMB --- */
/* 15px, not 16. At 16 the four crumbs no longer fit one line, and because the
   list is a non-wrapping flex row the items shrank and wrapped internally,
   which left "Home" sitting on its own baseline below the others. */
.breadcrumb {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-parchment-dark);
  padding: 12px 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  gap: 0;
}

/* Each crumb stays on one line; the row wraps instead of the words. */
.breadcrumb__item { white-space: nowrap; }
.breadcrumb__item:last-child { white-space: normal; }

/* ...but only while a crumb can actually fit. This site's pillar and cluster
   names are full sentences ("Building a consulting business that's profitable
   and sustainable"), so at 375px a nowrap crumb ran to 642px and was clipped
   unreadable on every generated node page. Measured 2026-08-10 at 375px: the
   page never scrolled horizontally, so this failed silently rather than
   visibly. Let the words wrap once the row cannot. */
@media (max-width: 640px) {
  .breadcrumb__item { white-space: normal; }
  .breadcrumb__item + .breadcrumb__item::before { margin: 0 5px; }
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '\203A';
  margin: 0 8px;
  color: var(--color-text-muted);
}

.breadcrumb__item a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--color-primary); }
.breadcrumb__item--current { color: var(--color-text-primary); }


/* --- CARDS --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-parchment-dark);
  border-radius: var(--border-radius);
  padding: var(--space-lg) var(--space-md);
  box-shadow: 0 2px 12px rgba(50, 50, 50, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 8px 32px rgba(50, 50, 50, 0.13);
  transform: translateY(-2px);
}

.card--on-charcoal {
  background: rgba(var(--color-text-on-dark-rgb), 0.06);
  border: 0.5px solid rgba(var(--color-text-on-dark-rgb), 0.12);
  color: var(--color-text-on-dark);
}

.card__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
  display: block;
}

.card__title {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 27px;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.card__title a { text-decoration: none; color: inherit; }
.card__title a:hover { color: var(--color-primary); }

.card__text {
  font-size: 19px;
  color: var(--color-text-primary);
  line-height: 1.7;
}

.structural-number {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 140px;
  line-height: 1;
  color: rgba(var(--color-primary-rgb), 0.07);
  position: absolute;
  top: -10px;
  left: -10px;
  pointer-events: none;
  z-index: 0;
}


/* --- TL;DR / NODE OPENING ANSWER --- */
/* The direct answer is the most important block on a node and the first thing
   an AI engine extracts, so it carries the primary brand colour. Teal, not the
   peach tint: teal was appearing only in the footer CTA, which left the whole
   node reading peach. Black on teal is 11.14:1. */
.node-tldr {
  background: var(--color-teal);
  border-left: none;
  border-radius: 0;
  border: 2px solid #000000;
  box-shadow: -10px 10px 0 #000000;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0 var(--space-xl);
}

.node-tldr__label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* Black, not the blue accent: blue on teal is 3.30:1 and fails at this size. */
  color: #000000;
  display: block;
  margin-bottom: 10px;
}

.node-tldr p {
  font-size: 22px;
  line-height: 1.7;
  color: #000000;
  margin: 0;
  max-width: 62ch;
}

.hero .tldr p, .hero .tldr { color: var(--color-text-primary); }


/* --- AUTHOR BLOCK (top of node) --- */
.author-block {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-parchment-dark);
  border-bottom: 1px solid var(--color-parchment-dark);
  margin-bottom: var(--space-lg);
}

.author-block__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-parchment-dark);
  flex-shrink: 0;
  overflow: hidden;
}

.author-block__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-block__info { flex: 1; }

.author-block__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}

.author-block__title { font-size: 16px; color: var(--color-text-muted); margin: 0; }

.author-block__links { display: flex; gap: 14px; margin-top: 6px; }
.author-block__links a {
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-mono);
}

.author-block__date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: auto;
}


/* --- INSHORT CARD --- */
.inshort {
  background: var(--surface-inshort-bg);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
}

.inshort__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  display: block;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--surface-inshort-text-rgb), 0.08);
}

.inshort__text {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(var(--surface-inshort-text-rgb), 0.88);
  margin: 0;
}


/* --- KEY TAKEAWAYS --- */
.takeaways {
  list-style: none;
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-parchment-dark);
}

.takeaways li {
  font-size: 19px;
  line-height: 1.65;
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--color-parchment-dark);
  position: relative;
}

.takeaways li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 14px;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}


/* --- TWO-COLUMN NODE LAYOUT --- */
.node-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-xl);
  align-items: start;
}

.node-sidebar {
  position: sticky;
  top: 88px;
}


/* --- SIDEBAR CTA --- */
/* Sidebar CTA, rebuilt. The old one read as one undifferentiated tinted box
   with two invisible headings in it. Now it is a teal-capped card with a hard
   offset edge, matching the card treatment on her live site, and the two offers
   are visually separated instead of running together. */
.sidebar-cta {
  position: relative;
  background: var(--color-white);
  border: 2px solid #000000;
  border-radius: 0;
  padding: var(--space-md);
  padding-top: calc(var(--space-md) + 10px);
  color: var(--surface-sidebar-text);
  transform: translate(6px, -6px);
  box-shadow: -10px 10px 0 #000000;
}

/* Teal cap, so the primary brand colour shows up in the sidebar instead of
   appearing only in the footer CTA. Absolutely positioned so it spans the full
   card width without needing a wrapper element the renderer does not emit. */
.sidebar-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--color-teal);
}

/* The two offers were running together as one undifferentiated block. The
   divider now reads as a real separation. */
.sidebar-cta__divider {
  border: none;
  border-top: 2px solid #000000;
  margin: var(--space-md) 0;
  opacity: 1;
}

.sidebar-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  display: block;
  margin-bottom: 10px;
}

/* BUG FIX: this hardcoded var(--color-text-on-dark), which is WHITE, while the
   sidebar surface is light peach. That is 1.17:1, effectively invisible, and it
   is why both sidebar headings disappeared. Use the surface-aware token so it
   follows whatever surface the sidebar is set to. */
.sidebar-cta__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 25px;
  color: var(--surface-sidebar-text);
  line-height: 1.15;
  margin-bottom: var(--space-sm);
}

.sidebar-cta__text {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(var(--surface-sidebar-text-rgb), 0.75);
  margin-bottom: var(--space-sm);
}

/* (divider is defined above, with the rebuilt sidebar card) */

.sidebar-cta .btn { width: 100%; text-align: center; margin-bottom: 10px; }
.sidebar-cta .btn--primary { margin-bottom: 0; }
.sidebar-cta__eyebrow { color: var(--color-primary-hover); }
.sidebar-cta .btn:last-child { margin-bottom: 0; }


/* --- NODE BODY TYPOGRAPHY --- */
.node-main h2 {
  font-size: 34px;
  font-weight: 700;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-parchment-dark);
  line-height: 1.25;
}

.node-main h2:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.node-main h3 { font-size: 24px; font-weight: 700; margin-top: var(--space-md); margin-bottom: 10px; }
.node-main p { font-size: 20px; line-height: 1.8; }
.node-main ul, .node-main ol { margin: var(--space-sm) 0 var(--space-md) var(--space-md); }
.node-main li { font-size: 19px; line-height: 1.7; margin-bottom: 8px; }
.node-main strong { font-weight: 600; }
.node-main code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--color-parchment-dark);
  padding: 2px 6px;
  border-radius: 4px;
}


/* --- CODE BLOCKS --- */
.node-main pre, .guide-body pre {
  background: #1e1e2e;
  color: #e0ddd8;
  border-radius: var(--border-radius);
  padding: var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  margin: var(--space-md) 0;
  border-left: 3px solid var(--color-primary);
}

.node-main pre code, .guide-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}


/* --- PERSPECTIVE BLOCK --- */
/* Leah's take. Her copy here is client-approved and must not be re-broken or
   re-worded, so readability is bought entirely with presentation: a real
   measure cap, looser leading, and a first-line lift so a long single
   paragraph still has an entry point. */
.perspective-block {
  background: var(--color-white);
  border: 2px solid #000000;
  border-left: 10px solid var(--color-teal);
  border-radius: 0;
  padding: var(--space-lg);
}

.perspective-block p {
  max-width: 60ch;
  line-height: 1.85;
}

.perspective-block p:first-of-type::first-line {
  font-weight: 600;
}

.perspective-block p + p {
  margin-top: var(--space-md);
}

.perspective-block__label {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-sm);
}

.perspective-block p { font-size: 20px; line-height: 1.8; }
.perspective-block p:last-child { margin-bottom: 0; }


/* --- CITATIONS / SOURCES --- */
.citation-ref {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  color: var(--color-primary);
  text-decoration: none;
}

/* --- SOURCES ---
   Deliberate deviation from the scaffold. The template mutes sources to
   opacity 0.5/0.65 because it assumes third-party citations that should sit
   quietly. Here the sources ARE the product: they are Leah's own podcast
   episodes, and the podcast is anecdotally her highest-converting vehicle.
   So this is promoted into a real listen-next block rather than fine print. */
.node-sources {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border: 2px solid #000000;
  border-top-width: 10px;
  border-top-color: var(--color-teal);
  background: var(--color-white);
  box-shadow: -10px 10px 0 #000000;
}

.node-sources__label {
  display: block;
  font-size: 15px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000000;
  opacity: 1;
  margin-bottom: var(--space-sm);
}

.node-sources__list { list-style: none; padding-left: 0; }

.node-sources__list li {
  font-size: 18px;
  line-height: 1.45;
  padding: 12px 0;
  opacity: 1;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.node-sources__list li:first-child { border-top: none; }

/* Play affordance, so an episode reads as something to listen to. */
.node-sources__list li::before {
  content: "\25B6";
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.7;
  color: #000000;
  background: var(--color-teal);
  border: 2px solid #000000;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
}

.node-sources__list a {
  font-family: var(--font-headline);
  font-weight: 700;
  color: #000000;
  text-decoration: none;
  border-bottom: 2px solid var(--color-teal);
}

.node-sources__list a:hover {
  color: #000000;
  background: var(--color-teal);
  border-bottom-color: #000000;
}


/* --- AUTHOR BIO (bottom of node) --- */
.author-bio {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-parchment-dark);
  margin-top: var(--space-lg);
}

.author-bio__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-parchment-dark);
  flex-shrink: 0;
  overflow: hidden;
}

.author-bio__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-bio__name { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.author-bio__text { font-size: 19px; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 8px; }
.author-bio__link { font-size: 14px; font-family: var(--font-mono); color: var(--color-primary); }


/* --- FAQ ACCORDION --- */
/* --- FAQ ACCORDION ---
   Rebuilt. The old version was heavy Oswald 700 on a hairline rule with a
   small light-weight '+', so it read as a list of shouted statements rather
   than as controls you can open. Now each row is a real card with a boxed
   toggle, a hover state, and an obviously different open state. Weight drops
   to 600 so the questions stop competing with the section headline. */
.faq-item {
  border: 2px solid #000000;
  background: var(--color-white);
  margin-bottom: 12px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.faq-item:hover { box-shadow: -8px 8px 0 #000000; }

.faq-item[open] {
  box-shadow: -8px 8px 0 #000000;
  border-color: #000000;
}

.faq-item summary {
  /* Bitter, not Oswald. These are questions, not headlines, and Oswald 700
     made them heavier than the section headline above them. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 14px;
  align-items: center;
}

.faq-item summary:hover { background: var(--color-peach); }
.faq-item[open] summary { background: var(--color-teal); }

.faq-item summary::-webkit-details-marker { display: none; }

/* A real boxed control, not a stray plus sign. */
.faq-item summary::after {
  content: '+';
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: #000000;
  background: var(--color-teal);
  border: 2px solid #000000;
}

.faq-item[open] summary::after {
  content: '\2212';
  background: var(--color-white);
}

.faq-item__answer {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  font-size: 20px;
  line-height: 1.75;
  border-top: 2px solid #000000;
}


/* --- RELATED NODES --- */
.related-nodes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}


/* --- NODE LIST (cluster hubs) --- */
.node-list { list-style: none; }
/* The renderer emits .node-list__item (render-cluster-hub.js), never a bare
   li, so the previous `.node-list li` rules matched nothing and every cluster
   hub rendered its node list as an unseparated wall of text. */
.node-list__item {
  background: var(--color-white);
  border: 2px solid #000000;
  border-radius: 0;
  padding: 20px 26px;
  margin-bottom: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.node-list__item:hover {
  transform: translate(6px, -6px);
  box-shadow: -10px 10px 0 #000000;
}

.node-list__teaser { margin-bottom: 0; }
.node-list li:last-child { border-bottom: none; }

.node-list__query {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 4px;
}

.node-list__query a { text-decoration: none; color: var(--color-text-primary); }
.node-list__query a:hover { color: var(--color-primary); }
.node-list__teaser { font-size: 18px; color: var(--color-text-muted); }


/* --- PULL QUOTE ---
   Ported from the Master Roofing build 2026-08-10. It renders between Key
   Takeaways and the fan-out body, which puts the author's voice in the top
   half of the node where both a reader and an extraction engine reach it
   early. The component was specified in this build's design files and never
   rendered, because the pull-quote work was done in that client's pipeline
   and never back-ported to the scaffold engine. */
.pull-quote {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-md);
}

.pull-quote p {
  font-family: var(--font-headline);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.pull-quote p::before { content: '\201C'; color: var(--color-primary); margin-right: 4px; }
.pull-quote p::after  { content: '\201D'; color: var(--color-primary); margin-left: 4px; }

.pull-quote cite {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* The ported component arrived as a fixed 30px, which made it the only
   display-sized type in this stylesheet that did not scale. Every heading
   steps down at 900px and again at 640px, so a 30px centred Oswald line was
   running about a dozen characters wide on a phone. Tracks h3's scale. */
@media (max-width: 900px) {
  .pull-quote p { font-size: 26px; }
}

@media (max-width: 640px) {
  .pull-quote { padding: 0 var(--space-sm); }
  .pull-quote p { font-size: 22px; }
}

/* --- CTA BLOCK ---
   Modelled on her live .block.form-cta: a full-bleed brand band with the
   copy left and Leah right. Teal carries it because her headshot is already
   shot on a cyan backdrop, so the photo panel reads as a deliberate flat
   colour block rather than a pasted cut-out, which is how her brand works
   (flat and bold, no shadows or gradients).

   Type is black, never white: black on teal is 11.14:1, white on teal is
   1.88:1 and fails outright. The primary button is black for the same
   reason, orange on teal computes 1.18:1 and would disappear. */
.cta-block { padding: var(--space-xl) var(--space-lg); }
.cta-block h2 { margin-bottom: var(--space-sm); }
.cta-block p { margin: 0 0 var(--space-md); max-width: 34em; }
.cta-block .btn { margin: 0 var(--space-xs) var(--space-xs) 0; }

.section--charcoal > .cta-block {
  background: var(--color-teal);
  color: #000000;
  position: relative;
  overflow: hidden;
}

/* The headshot panel is gone. Cindy 2026-08-06: Leah would rather this block
   feature her students than herself, matching the success-stories section on
   her own homepage. The proof cards now do that job. */
.success-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg) var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Her exact card signature: hard 3px black edge, zero-blur shadow offset
   DOWN-LEFT with the card itself nudged UP-RIGHT. A blurred or grey shadow
   reads as not-hers. */
.story-card {
  background: var(--color-white);
  border: 3px solid #000000;
  border-radius: 0;
  margin: 0;
  padding: 28px 26px 30px;
  transform: translate(10px, -10px);
  box-shadow: -10px 10px 0 #000000;
}

.story-card__who {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.story-card__quote {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: #000000;
  margin: 0;
}

.story-card__quote::before { content: '\201C'; }
.story-card__quote::after  { content: '\201D'; }

@media (max-width: 767px) {
  .story-card { transform: none; box-shadow: -5px 5px 0 #000000; padding: 24px; }
}

.cta-block h2,
.cta-block .section-label { color: #000000; }
.cta-block .section-label { opacity: 1; }

.cta-block .btn--primary { background: #000000; color: #FFFFFF; }
.cta-block .btn--primary:hover { background: var(--color-primary); color: #FFFFFF; }
.cta-block .btn--ghost,
.cta-block .btn--secondary {
  border: 2px solid #000000;
  color: #000000;
  background: transparent;
}
.cta-block .btn--ghost:hover,
.cta-block .btn--secondary:hover { background: #000000; color: var(--color-teal); }



/* --- CORAL CALLOUT PILL --- */
.callout--coral {
  background: var(--color-primary);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
}

.callout--coral h2 { color: #ffffff; margin-bottom: var(--space-sm); }
.callout--coral p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; }


/* --- DIVIDERS --- */
.divider {
  border: none;
  height: 1px;
  background: var(--color-parchment-dark);
  margin: var(--space-lg) 0;
}

.coral-rule {
  display: block;
  width: 3px;
  height: 32px;
  background: var(--color-primary);
  margin-bottom: var(--space-sm);
}


/* --- COMPARISON TABLES --- */
.node-main table, .guide-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: 15px;
}

.node-main th, .guide-body th {
  text-align: left;
  padding: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.node-main td, .guide-body td {
  padding: var(--space-sm);
  border-bottom: 1px solid rgba(50, 50, 50, 0.08);
  vertical-align: top;
}


/* --- GUIDE BODY TYPOGRAPHY --- */
.guide-body h2 { font-size: 40px; font-weight: 700; margin-top: var(--space-xl); margin-bottom: var(--space-md); }
.guide-body h2:first-of-type { margin-top: 0; }
.guide-body h3 { font-size: 24px; font-weight: 700; margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.guide-body p { font-size: 20px; line-height: 1.8; }
.guide-body ul, .guide-body ol { margin: var(--space-sm) 0 var(--space-md) var(--space-md); }
.guide-body li { font-size: 19px; line-height: 1.7; margin-bottom: 8px; }
.guide-body code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: rgba(50, 50, 50, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}


/* --- GUIDE COMPONENTS --- */

/* Stat banner */
.stat-banner {
  background: var(--color-primary);
  border-radius: var(--border-radius);
  padding: var(--space-lg) var(--space-md);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.stat-banner__item { text-align: center; }
.stat-banner__value {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 32px;
  color: #ffffff;
  display: block;
  line-height: 1.1;
  margin-bottom: 6px;
}

.stat-banner__label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.75);
}

/* Concept cards */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.concept-card {
  background: var(--color-white);
  border: 1px solid var(--color-parchment-dark);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: var(--space-md);
}

.concept-card__icon {
  width: 40px;
  height: 40px;
  background: rgba(var(--color-primary-rgb), 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
  font-size: 18px;
}

.concept-card__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
}

.concept-card__text { font-size: 15px; line-height: 1.7; margin: 0; }

/* Step list */
.step-list { margin: var(--space-lg) 0; padding: 0; list-style: none; }

.step-list__item {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  align-items: flex-start;
}

.step-list__number {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.step-list__content {
  flex: 1;
  background: var(--color-white);
  border: 1px solid var(--color-parchment-dark);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-lg);
}

.step-list__title { font-family: var(--font-headline); font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.step-list__text { font-size: 15px; line-height: 1.7; margin: 0; }

/* Highlight box */
.highlight-box {
  background: var(--surface-highlight-bg);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  color: var(--surface-highlight-text);
}

.highlight-box p { color: rgba(var(--surface-highlight-text-rgb), 0.88); font-size: 18px; line-height: 1.75; }
.highlight-box p:last-child { margin-bottom: 0; }
.highlight-box strong { color: var(--surface-highlight-text); }

/* Bold lead list */
.bold-lead-list { list-style: none; padding: 0; margin: var(--space-md) 0; display: flex; flex-direction: column; gap: var(--space-md); }
.bold-lead-list li { padding-left: var(--space-md); border-left: 2px solid var(--color-primary); line-height: 1.7; }
.bold-lead-list li strong { display: block; font-family: var(--font-headline); font-size: 18px; font-weight: 400; margin-bottom: 4px; }

/* Guide CTA */
.guide-cta {
  background: var(--color-cream);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}

.guide-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-xs);
}

.guide-cta__heading { font-family: var(--font-headline); font-weight: 700; font-size: 24px; margin-bottom: var(--space-xs); }
.guide-cta__text { font-size: 16px; line-height: 1.7; margin-bottom: var(--space-sm); }

/* Guide TOC */
.guide-toc {
  margin-top: var(--space-lg);
  border: 1px solid rgba(50, 50, 50, 0.12);
  border-radius: var(--border-radius);
  background: var(--color-white);
}

.guide-toc__toggle {
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  user-select: none;
}

.guide-toc__toggle::-webkit-details-marker { display: none; }
.guide-toc__toggle::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--color-primary); }
.guide-toc[open] .guide-toc__toggle::after { content: '\2212'; }

.guide-toc__nav { padding: 0 var(--space-lg) var(--space-lg); }
.guide-toc__list { list-style: none; padding: 0; margin: 0; counter-reset: toc-counter; }
.guide-toc__list li { counter-increment: toc-counter; border-top: 1px solid rgba(50, 50, 50, 0.06); }

.guide-toc__list li a {
  display: block;
  padding: var(--space-sm) 0;
  color: var(--color-charcoal);
  text-decoration: none;
  font-size: 16px;
}

.guide-toc__list li a::before {
  content: counter(toc-counter, decimal-leading-zero) "  ";
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}

.guide-toc__list li a:hover { color: var(--color-primary); }


/* --- FOOTER --- */
/* --- FOOTER, matched to smartgetspaid.com ---
   Hers is ORANGE, not the scaffold's black. Headings and links are Oswald,
   links are black, and the SGP lockup sits top-left. The grid-texture overlay
   the scaffold paints is removed: her brand rules are explicit that the look
   is flat and bold, no gradients, no shadows, no texture. */
.site-footer {
  background: transparent;
  color: #000000;
  padding: calc(var(--space-xl) + 46px) 0 var(--space-lg);
  margin-top: -46px;
  position: relative;
  overflow: hidden;
}

/* Diagonal top edge, matching .skewed-bg-orange.skewed-top on her live site.
   Her exact site-wide constant is skewY(-2.0618deg); .skewed-top pivots on
   the right edge. NOTE: her corner wedges use calc() against
   --scrollbar-width, which her CSS never declares (it is set by JS not in
   the capture), so those are deliberately not copied. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-orange);
  transform: skewY(-2.0618deg);
  transform-origin: 100%;
}

.site-footer > .container { position: relative; z-index: 1; }
.site-footer a { color: #000000; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* The SGP lockup, reproduced from type rather than an image file, which is
   what her brand rules specify: the wordmark is Oswald bold inside a thin
   rectangular border. Rendered as a grid item via ::before so no renderer
   change is needed. */
.footer__grid::before {
  content: "SGP";
  align-self: start;
  justify-self: start;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #000000;
  border: 3px solid #000000;
  padding: 6px 12px 8px;
}

.footer__col h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 30px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.1;
  color: #000000;
  margin-bottom: var(--space-md);
}

.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: var(--space-sm); }

.footer__col li a {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: #FFFFFF;
}

.footer__col li a:hover { color: #000000; }

/* The legal column reads as fine print on her site: Bitter, black, smaller. */
.footer__col--legal li a,
.footer__col:last-child li a { font-weight: 700; }

.footer__bottom {
  border-top: 2px solid #000000;
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #000000;
}


/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .node-layout { grid-template-columns: 1fr; }
  .node-sidebar { position: static; order: -1; }
  .sidebar-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .sidebar-cta .btn { width: auto; }
}

@media (max-width: 900px) {
  :root { --page-pad: 32px; }
  h1, .hero__headline { font-size: 44px; }
  h2 { font-size: 36px; }
  h3 { font-size: 28px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .card-grid { grid-template-columns: 1fr; }
  .inshort { grid-template-columns: 1fr; }
  .related-nodes { grid-template-columns: 1fr; }
  .sidebar-cta { grid-template-columns: 1fr; }
  .stat-banner { grid-template-columns: repeat(2, 1fr); }
  .concept-grid { grid-template-columns: 1fr; }
  .guide-body h2 { font-size: 32px; }
}

@media (max-width: 640px) {
  :root {
    --space-xl: 48px;
    --space-2xl: 64px;
    --page-pad: 24px;
  }
  h1, .hero__headline { font-size: 36px; }
  h2 { font-size: 30px; }
  .site-nav__links { display: none; }
  .nav-toggle { display: block; }
  .site-nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-nav-bg);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-nav-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }
  .site-nav__links.is-open a { color: var(--color-nav-text-muted); padding: var(--space-xs) 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--space-xs); text-align: center; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .stat-banner__value { font-size: 24px; }
  .step-list__item { flex-direction: column; }
  .step-list__number { width: 32px; height: 32px; font-size: 14px; }
}


/* =====================================================
   OPT-IN PAGE MODULES
   Styles for the three opt-in renderers: the marketing
   homepage (render-homepage.js rich sections, scoped under
   body.body--home), magnet landing pages
   (render-magnet-landing.js), and the resource center index
   (render-resource-center.js). Every color references the
   token system above; no raw brand values live here.
   ===================================================== */

/* --- SHARED MARKETING HELPERS --- */
/* Used by both the marketing homepage and magnet landing pages. */

.container--narrow { max-width: 800px; }

/* --- GUIDE PAGE WIDTH -----------------------------------------------------
   A guide sits on the same 1200px .container as every other generated page.
   Cindy's call, 2026-08-18: the Keep Reading / Related reading width is the
   correct width for the WHOLE page. So .guide-body and .guide-measure add no
   width of their own. They exist only to scope the overrides below.

   Those overrides are the actual fix. Measured on a built guide before them:
   SIX different text measures on one page (560, 748, 770, 852, 875, 1104),
   which is what made the column look like it changed width section to
   section. The cause is that several components carry caps sized for a NODE,
   where .node-layout reserves 300px for a sidebar and the column is ~860px.
   A guide has no sidebar, so every one of those caps left a visible gap
   inside a much wider container.

   The worst was the In short box: 1104px wide with its paragraph stopping at
   875 and hugging the left edge, which is the squish Cindy reported. Inside a
   guide the container does the constraining, so the component caps come off.

   A first attempt solved this the other way, by narrowing everything to an
   820px reading measure. That was rejected: it made the top two thirds of the
   page narrower than the bottom. Do not reintroduce a guide-specific
   max-width here. */
.guide-measure .node-tldr p,
.guide-body .node-tldr p,
.guide-measure .hero-lede,
.guide-measure .pull-quote,
.guide-body .pull-quote { max-width: none; }

/* Wide devices stay full-measure rather than shrinking to the text column. */
.guide-body table,
.guide-body .stat-banner,
.guide-body .concept-grid,
.guide-body .card-grid { width: 100%; }

@media (max-width: 900px) {
  :root { --guide-measure: 100%; }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--color-primary);
}
.hero-eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.15);
}
.hero-h1 {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(40px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -1.2px;
  color: var(--color-text-primary); margin-bottom: 28px;
}
.hero-lede {
  font-family: var(--font-body); font-size: 19px; line-height: 1.65;
  color: var(--color-text-primary); max-width: 560px; margin-bottom: 16px;
}
.hero-lede strong { color: var(--color-primary); font-weight: 700; }
.hero-sub {
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  color: var(--color-text-muted); max-width: 520px; margin-bottom: 40px;
}
.hero-cta-row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.hero-trust {
  font-family: var(--font-body); font-size: 13px; color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-trust svg { color: var(--color-primary); }

/* Squiggle underline utility, usable in any display headline. The
   squiggle shape rides in a mask so its color comes from the token
   system instead of a baked-in SVG stroke. */
.squiggle {
  display: inline-block; position: relative; padding-bottom: 6px;
}
.squiggle::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px; height: 10px;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 25 1, 50 6 T 100 6 T 150 6 T 198 6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 25 1, 50 6 T 100 6 T 150 6 T 198 6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.squiggle--secondary::after { background: var(--color-amber); }

/* --- MARKETING HOMEPAGE MODULE (body.body--home) --- */
/* Activates only when site.homepage carries rich section configs.
   Local aliases keep the section rules readable; every alias resolves
   to an engine token. The script font is decorative (handwritten
   captions, signatures); add Caveat to brand.fonts.googleFontsUrl to
   activate it, otherwise the headline font carries those spots. */

.body--home {
  --home-bg: var(--color-parchment);
  --home-surface: var(--color-white);
  --home-border: var(--color-parchment-dark);
  --home-ink: var(--color-text-primary);
  --home-muted: var(--color-text-muted);
  --home-dark: var(--color-charcoal);
  --home-accent: var(--color-primary);
  --home-accent-rgb: var(--color-primary-rgb);
  --home-secondary: var(--color-amber);
  --font-script: 'Caveat', var(--font-headline), cursive;

  background: var(--home-bg);
  color: var(--home-ink);
  overflow-x: hidden;
}
.body--home a { color: inherit; }
.body--home img { max-width: 100%; display: block; }
.body--home .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Typography utilities */
.body--home h1, .body--home h2, .body--home h3, .body--home h4 {
  font-family: var(--font-headline); margin: 0; letter-spacing: -0.3px;
}
.body--home p { margin: 0; }
.body--home .eyebrow {
  display: inline-block;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--home-accent);
  margin-bottom: 18px;
}
.body--home .eyebrow--accent { color: var(--home-accent); }
.body--home .eyebrow--secondary { color: var(--home-secondary); }

/* Buttons (marketing treatment overrides the base .btn scale) */
.body--home .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 14px; letter-spacing: 0.4px; text-transform: uppercase;
  text-decoration: none;
  padding: 18px 28px; border-radius: 10px; border: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.body--home .btn--primary {
  background: var(--home-accent); color: var(--color-text-on-primary);
  box-shadow: 0 6px 20px rgba(var(--home-accent-rgb), 0.25);
}
.body--home .btn--primary:hover {
  background: var(--color-primary-hover); transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(var(--home-accent-rgb), 0.32);
}
.body--home .btn--primary:active { transform: translateY(0); }
.body--home .btn--primary .icon-arrow { transition: transform .2s ease; }
.body--home .btn--primary:hover .icon-arrow { transform: translateX(4px); }
.body--home .btn--light {
  background: var(--home-surface); color: var(--home-dark);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.body--home .btn--light:hover {
  background: var(--home-accent); color: var(--color-text-on-primary); transform: translateY(-1px);
}
.body--home .btn--ghost {
  background: transparent; color: var(--home-accent);
  padding: 16px 26px; border: 2px solid rgba(var(--home-accent-rgb), 0.25);
}
.body--home .btn--ghost:hover { border-color: var(--home-accent); }

/* Hero */
.body--home .hero {
  position: relative; padding: 32px 0 120px; overflow: hidden;
  background: var(--home-bg);
}
.body--home .hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 80px; align-items: center;
}
.body--home .hero-h1 {
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -1.8px;
  color: var(--home-ink);
}
.body--home .hero-h1__asset {
  color: var(--home-accent); display: inline-block; position: relative; padding-bottom: 6px;
}
.body--home .hero-h1__asset::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px; height: 10px;
  background: var(--home-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 25 1, 50 6 T 100 6 T 150 6 T 198 6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 25 1, 50 6 T 100 6 T 150 6 T 198 6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.body--home .hero-h1__or { color: var(--home-muted); font-weight: 700; }
.body--home .hero-h1__target { color: var(--home-secondary); }
.body--home .hero-h1__and {
  display: block; font-size: 0.7em; color: var(--home-ink);
  margin-top: 6px; font-weight: 700;
}
.body--home .hero-lede { color: var(--home-ink); max-width: 520px; }

/* Hero brand-card visual (before / after cards) */
.body--home .hero-visual {
  position: relative; min-height: 480px;
  display: flex; align-items: center; justify-content: center;
}
.body--home .brand-card {
  position: absolute;
  width: 300px; padding: 28px 26px; border-radius: 18px;
  background: var(--home-surface); border: 1px solid var(--home-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
  font-family: var(--font-body);
}
.body--home .brand-card__label {
  font-family: var(--font-headline); font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--home-muted);
  margin-bottom: 12px;
}
.body--home .brand-card__name {
  font-family: var(--font-headline); font-size: 28px; font-weight: 700;
  letter-spacing: -0.6px; color: var(--home-ink); margin-bottom: 8px; line-height: 1.1;
}
.body--home .brand-card__tag { font-size: 13px; color: var(--home-muted); line-height: 1.5; }
.body--home .brand-card__line { height: 1px; background: var(--home-border); margin: 18px 0; }
.body--home .brand-card__meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--home-muted);
}
.body--home .brand-card--unprotected {
  left: 4%; top: 8%; transform: rotate(-6deg);
  border-color: var(--home-secondary);
}
.body--home .brand-card--unprotected .brand-card__badge {
  position: absolute; top: 14px; right: -8px;
  font-family: var(--font-headline); font-weight: 700; font-size: 12px;
  letter-spacing: 1.5px; color: var(--home-secondary);
  background: var(--home-surface); border: 2px solid var(--home-secondary);
  padding: 6px 12px; border-radius: 6px; transform: rotate(6deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.body--home .brand-card--unprotected .brand-card__copycat {
  position: absolute; left: -48px; top: 50%;
  font-family: var(--font-script);
  font-size: 18px; color: var(--home-secondary); font-weight: 600;
  transform: rotate(-8deg);
}
.body--home .brand-card--protected {
  right: 4%; bottom: 6%; transform: rotate(4deg);
  border-color: rgba(var(--home-accent-rgb), 0.35);
}
.body--home .brand-card--protected .brand-card__badge {
  position: absolute; top: 14px; right: -8px;
  font-family: var(--font-headline); font-weight: 700; font-size: 12px;
  letter-spacing: 1.5px; color: var(--color-text-on-primary);
  background: var(--home-accent);
  padding: 6px 12px; border-radius: 6px; transform: rotate(-4deg);
  box-shadow: 0 4px 12px rgba(var(--home-accent-rgb), 0.35);
}
.body--home .hero-arrow {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 160px; pointer-events: none; z-index: 2;
  color: var(--home-accent);
}

/* Lead magnet (dark band with document mock) */
.body--home .leadmag {
  padding: 100px 0; background: var(--home-dark); color: var(--color-text-on-dark);
  position: relative; overflow: hidden;
}
.body--home .leadmag::before {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(var(--home-accent-rgb), 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.body--home .leadmag-grid {
  display: grid; grid-template-columns: 1fr 0.9fr; gap: 72px; align-items: center;
  position: relative;
}
.body--home .leadmag .eyebrow { color: var(--home-accent); }
.body--home .leadmag-h2 {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -1px;
  color: var(--color-text-on-dark);
  margin-bottom: 20px;
}
.body--home .leadmag-lede {
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  color: rgba(var(--color-text-on-dark-rgb), 0.78); margin-bottom: 28px; max-width: 480px;
}
.body--home .leadmag-lede em { color: var(--home-accent); font-style: normal; font-weight: 600; }
.body--home .leadmag-list {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.body--home .leadmag-list li {
  display: flex; gap: 14px; align-items: flex-start;
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: rgba(var(--color-text-on-dark-rgb), 0.92);
}
.body--home .leadmag-list li .li-text { flex: 1; min-width: 0; }
.body--home .about-points li .li-text { flex: 1; min-width: 0; }
.body--home .leadmag-check {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(var(--home-accent-rgb), 0.2); color: var(--home-accent);
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.body--home .leadmag-outcome {
  background: rgba(var(--home-accent-rgb), 0.08);
  border-left: 3px solid var(--home-accent);
  padding: 18px 22px; border-radius: 0 10px 10px 0;
  font-size: 15px; line-height: 1.55; color: rgba(var(--color-text-on-dark-rgb), 0.88);
  margin-bottom: 32px;
}
.body--home .leadmag-outcome strong { color: var(--color-text-on-dark); font-weight: 700; }

/* Roadmap document mock */
.body--home .roadmap { position: relative; transform: rotate(-2.5deg); }
.body--home .roadmap-doc {
  background: var(--home-bg); color: var(--home-ink);
  border-radius: 14px; padding: 32px 32px 28px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), 0 20px 40px rgba(0, 0, 0, 0.25);
  position: relative;
}
.body--home .roadmap-doc::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(var(--home-accent-rgb), 0.2); border-radius: 8px; pointer-events: none;
}
.body--home .roadmap-doc__head {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px;
}
.body--home .roadmap-doc__brand {
  font-family: var(--font-headline); font-weight: 700; font-size: 14px;
  color: var(--home-accent); letter-spacing: 1px;
}
.body--home .roadmap-doc__pg {
  font-family: var(--font-headline); font-size: 10px; color: var(--home-muted);
  letter-spacing: 2px; font-weight: 700;
}
.body--home .roadmap-doc__kicker {
  font-family: var(--font-headline); font-weight: 700; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--home-secondary); margin-bottom: 10px;
}
.body--home .roadmap-doc__title {
  font-family: var(--font-headline); font-weight: 700; font-size: 28px;
  letter-spacing: -0.8px; line-height: 1.05; color: var(--home-ink); margin-bottom: 22px;
}
.body--home .roadmap-doc__line {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px dashed var(--home-border);
}
.body--home .roadmap-doc__line:first-of-type { border-top: 0; padding-top: 4px; }
.body--home .roadmap-doc__num {
  font-family: var(--font-headline); font-weight: 700; font-size: 11px;
  color: var(--home-accent); letter-spacing: 1.5px;
}
.body--home .roadmap-doc__text {
  font-family: var(--font-body); font-size: 13px; color: var(--home-ink);
}
.body--home .roadmap-doc__foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--home-border);
  display: flex; justify-content: space-between;
  padding-right: 84px;
  font-family: var(--font-body); font-size: 11px; color: var(--home-muted);
}
.body--home .roadmap-stamp {
  position: absolute; bottom: -24px; right: -24px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--home-secondary); color: var(--color-text-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-headline); font-weight: 700; font-size: 12px;
  text-align: center; line-height: 1.1; letter-spacing: 0.5px;
  transform: rotate(12deg); white-space: pre-line;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Section head (shared by audience / process / traps) */
.body--home .sec-pad { padding: 112px 0; }
.body--home .section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.body--home .section-head h2 {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -1.2px;
  color: var(--home-ink);
}
.body--home .section-head p {
  font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  color: var(--home-muted); margin-top: 18px;
}

/* Audience personas */
.body--home .personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.body--home .persona {
  position: relative; background: var(--home-surface); border-radius: 20px;
  padding: 40px 32px 36px; border: 1px solid var(--home-border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.body--home .persona:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
}
.body--home .persona-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(var(--home-accent-rgb), 0.12); color: var(--home-accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.body--home .persona:nth-child(2) .persona-icon { background: var(--color-cream); color: var(--home-secondary); }
.body--home .persona:nth-child(3) .persona-icon { background: var(--home-border); color: var(--home-dark); }
.body--home .persona-kicker {
  font-family: var(--font-headline); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--home-muted);
  margin-bottom: 8px;
}
.body--home .persona-name {
  font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px;
  color: var(--home-ink); margin-bottom: 14px;
}
.body--home .persona-desc {
  font-family: var(--font-body); font-size: 15px; line-height: 1.65;
  color: var(--home-muted); margin-bottom: 24px;
}
.body--home .persona-lines {
  border-top: 1px dashed var(--home-border); padding-top: 20px;
}
.body--home .persona-line {
  margin-bottom: 14px; font-family: var(--font-body); font-size: 14px; line-height: 1.55;
}
.body--home .persona-line:last-child { margin-bottom: 0; }
.body--home .persona-line__label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-headline); font-weight: 700; font-size: 10px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--home-accent);
}
.body--home .persona:nth-child(2) .persona-line__label { color: var(--home-secondary); }
.body--home .persona:nth-child(3) .persona-line__label { color: var(--home-dark); }
.body--home .persona-line__text { color: var(--home-ink); }

/* About */
.body--home .about {
  padding: 112px 0; background: var(--home-surface);
  border-top: 1px solid var(--home-border);
  border-bottom: 1px solid var(--home-border);
}
.body--home .about-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center;
}
.body--home .about-portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(var(--home-accent-rgb), 0.4) 0%, rgba(0, 0, 0, 0.45) 100%),
    radial-gradient(circle at 30% 30%, var(--home-border), var(--color-parchment));
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px;
}
.body--home .about-portrait::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(var(--color-text-on-dark-rgb), 0.03) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.body--home .about-faces {
  display: flex; margin-bottom: 16px;
  position: relative; z-index: 1;
}
.body--home .about-face {
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--home-bg); border: 4px solid var(--home-surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-headline); font-weight: 700; font-size: 36px;
  color: var(--home-accent); letter-spacing: -1px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  margin-left: -16px;
}
.body--home .about-face:first-child { margin-left: 0; background: var(--home-accent); color: var(--color-text-on-primary); }
.body--home .about-face:nth-child(2) { background: var(--home-secondary); color: var(--color-text-on-primary); }
.body--home .about-caption {
  position: relative; z-index: 1;
  font-family: var(--font-script);
  color: var(--color-text-on-dark); font-size: 24px; font-weight: 600;
  transform: rotate(-2deg);
}
.body--home .about-note {
  position: absolute; bottom: 12px; right: 16px; z-index: 2;
  font-family: var(--font-body); font-size: 10px;
  color: rgba(var(--color-text-on-dark-rgb), 0.6); letter-spacing: 1px; text-transform: uppercase;
}

/* About portrait, photo variant (real headshot). Overrides the gradient
   + monogram treatment when a real image is supplied in site.json. */
.body--home .about-portrait--photo {
  background: var(--home-dark);
  padding: 0;
  display: block;
}
.body--home .about-portrait--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.body--home .about-portrait--photo .about-portrait__img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  position: absolute; inset: 0;
  z-index: 0;
}
.body--home .about-portrait--photo .about-caption {
  position: absolute; left: 28px; bottom: 24px; right: 28px;
  z-index: 2;
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.body--home .about-h2 {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -1px;
  margin-bottom: 24px; color: var(--home-ink);
}
.body--home .about-body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.7;
  color: var(--home-ink); margin-bottom: 28px; max-width: 560px;
}
.body--home .about-body strong { color: var(--home-accent); }
.body--home .about-points {
  list-style: none; padding: 0; margin: 0 0 36px;
  display: flex; flex-direction: column; gap: 12px;
}
.body--home .about-points li {
  display: flex; align-items: flex-start; gap: 14px;
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--home-ink);
}
.body--home .about-points strong { color: var(--home-accent); }
.body--home .about-dot {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(var(--home-accent-rgb), 0.15); color: var(--home-accent);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.body--home .about-mission {
  font-family: var(--font-headline); font-weight: 700; font-size: 18px;
  line-height: 1.4; color: var(--home-ink); margin-bottom: 32px;
  padding-left: 18px; border-left: 3px solid var(--home-accent);
}

/* Process */
.body--home .process {
  padding: 112px 0 100px; background: var(--home-bg);
}
.body--home .process-path {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.body--home .process-path::before {
  content: ""; position: absolute; top: 36px; left: 10%; right: 10%; height: 2px;
  background: repeating-linear-gradient(to right, var(--home-accent) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.body--home .step {
  position: relative; background: var(--home-surface); border-radius: 18px;
  padding: 32px 26px 28px; border: 1px solid var(--home-border); z-index: 1;
}
.body--home .step-num {
  position: absolute; top: -22px; left: 24px;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--home-dark); color: var(--home-accent);
  font-family: var(--font-headline); font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.body--home .step:nth-child(2) .step-num { background: var(--home-accent); color: var(--color-text-on-primary); }
.body--home .step:nth-child(3) .step-num { background: var(--home-secondary); color: var(--color-text-on-primary); }
.body--home .step:nth-child(4) .step-num { background: var(--color-charcoal-mid); color: var(--color-text-on-dark); }
.body--home .step-label {
  margin-top: 18px;
  font-family: var(--font-headline); font-weight: 700; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--home-muted);
}
.body--home .step-heading {
  font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px;
  margin: 8px 0 12px; color: var(--home-ink);
}
.body--home .step-desc {
  font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--home-muted);
}

/* Traps */
.body--home .traps { padding: 112px 0; background: var(--home-surface); }
.body--home .trap-list { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
.body--home .trap {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: stretch;
  background: var(--home-bg); border-radius: 20px;
  border: 1px solid var(--home-border); overflow: hidden;
}
.body--home .trap-quote {
  padding: 40px 40px 40px 48px;
  background: var(--home-surface); border-right: 1px solid var(--home-border);
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.body--home .trap-quote::before {
  content: "\201C";
  position: absolute; top: 12px; left: 24px;
  font-family: var(--font-headline);
  font-size: 100px; line-height: 1; color: rgba(var(--home-accent-rgb), 0.14);
  font-weight: 700;
}
.body--home .trap-num {
  font-family: var(--font-headline); font-weight: 700;
  font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--home-secondary); margin-bottom: 12px; position: relative;
}
.body--home .trap-title {
  font-family: var(--font-headline); font-weight: 700; font-size: 24px;
  letter-spacing: -0.3px; color: var(--home-ink); margin-bottom: 18px; line-height: 1.2;
  position: relative;
}
.body--home .trap-quoted {
  font-family: var(--font-body); font-style: italic; font-size: 17px;
  line-height: 1.55; color: var(--home-ink); position: relative;
}
.body--home .trap-fix {
  padding: 40px; display: flex; flex-direction: column; justify-content: center;
}
.body--home .trap-fix__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-headline); font-weight: 700; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--home-accent);
  margin-bottom: 14px;
}
.body--home .trap-fix__desc {
  font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--home-ink);
}
.body--home .trap-fix__desc strong { color: var(--home-accent); font-weight: 700; }
.body--home .center-cta { text-align: center; margin-top: 56px; }

/* Creed */
.body--home .creed {
  padding: 120px 0; background: var(--home-dark); color: var(--color-text-on-dark);
  position: relative; overflow: hidden;
}
.body--home .creed::before {
  content: ""; position: absolute; left: -100px; bottom: -120px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(var(--home-accent-rgb), 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.body--home .creed-head { text-align: center; margin-bottom: 64px; position: relative; }
.body--home .creed-head h2 {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; letter-spacing: -1.2px;
  color: var(--color-text-on-dark);
}
.body--home .creed-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 960px; margin: 0 auto; position: relative;
}
.body--home .creed-item {
  padding: 32px; border-left: 3px solid var(--home-accent);
  background: rgba(var(--color-text-on-dark-rgb), 0.04); border-radius: 0 14px 14px 0;
}
.body--home .creed-item:nth-child(2) { border-left-color: var(--home-secondary); }
.body--home .creed-item:nth-child(3) { border-left-color: var(--color-charcoal-mid); }
.body--home .creed-item:nth-child(4) { border-left-color: var(--home-accent); }
.body--home .creed-item h3 {
  font-family: var(--font-headline); font-weight: 700; font-size: 22px;
  line-height: 1.2; letter-spacing: -0.3px; margin-bottom: 10px; color: var(--color-text-on-dark);
}
.body--home .creed-item p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.65;
  color: rgba(var(--color-text-on-dark-rgb), 0.75);
}
.body--home .creed-foot {
  text-align: center; margin-top: 56px;
  font-family: var(--font-script); font-size: 24px; color: var(--home-accent); font-weight: 600;
}

/* Directory / resource center teaser. Outer section stays light; the
   inner container is a contained dark card with its own radial glow,
   so the teaser reads dark-and-premium without a full-bleed dark run. */
.body--home .directory {
  padding: clamp(120px, 12vw, 180px) 32px;
  background: var(--home-surface);
}
.body--home .directory-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--home-dark);
  color: var(--color-text-on-dark);
  border-radius: 28px;
  padding: 64px 64px 56px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}
.body--home .directory-inner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(var(--home-accent-rgb), 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 95%, rgba(var(--color-text-on-dark-rgb), 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.body--home .directory-head,
.body--home .rc-chips,
.body--home .rc-attestation,
.body--home .directory-cta-row { position: relative; z-index: 1; }
.body--home .directory-head {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: end;
  margin-bottom: 28px;
}
.body--home .directory-h2 {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -1.4px;
  color: var(--color-text-on-dark);
}
.body--home .rc-italic { color: var(--home-accent); font-style: italic; font-weight: 700; }
.body--home .directory-sub {
  font-family: var(--font-body); font-size: 18px; line-height: 1.65;
  color: rgba(var(--color-text-on-dark-rgb), 0.72);
}
.body--home .rc-chips {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 8px 0 24px;
}
.body--home .rc-chip {
  background: rgba(var(--color-text-on-dark-rgb), 0.04);
  border: 1px solid rgba(var(--color-text-on-dark-rgb), 0.12);
  border-radius: 14px; padding: 28px 26px 26px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.body--home .rc-chip:hover {
  background: rgba(var(--home-accent-rgb), 0.07);
  border-color: rgba(var(--home-accent-rgb), 0.35);
  transform: translateY(-2px);
}
.body--home .rc-chip__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--home-accent); margin-bottom: 14px;
}
.body--home .rc-chip:nth-child(2) .rc-chip__label { color: var(--home-secondary); }
.body--home .rc-chip:nth-child(3) .rc-chip__label { color: var(--color-text-on-dark); }
.body--home .rc-chip__dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px rgba(var(--color-text-on-dark-rgb), 0.15);
}
.body--home .rc-chip__body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: rgba(var(--color-text-on-dark-rgb), 0.82);
}
.body--home .directory-cta-row {
  display: flex; align-items: center; justify-content: center;
  padding-top: 20px; border-top: 1px solid rgba(var(--color-text-on-dark-rgb), 0.08);
}

/* Signed attestation inside the dark teaser. The trust signal lives
   where the CTA is, so it closes the section with weight. */
.body--home .rc-attestation {
  max-width: 820px;
  margin: 0 auto 20px;
  padding: 16px 0 4px;
  text-align: center;
  position: relative;
}
.body--home .rc-attestation__rule {
  display: block;
  width: 48px; height: 2px;
  background: var(--home-accent);
  margin: 0 auto 16px;
  border-radius: 2px;
}
.body--home .rc-attestation__text {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: rgba(var(--color-text-on-dark-rgb), 0.88);
  margin: 0 auto;
  max-width: 60ch;
}
.body--home .rc-attestation__text em {
  font-style: normal;
  color: var(--color-text-on-dark);
  background: linear-gradient(180deg, transparent 62%, rgba(var(--home-accent-rgb), 0.3) 62%, rgba(var(--home-accent-rgb), 0.3) 88%, transparent 88%);
  padding: 0 2px;
}
.body--home .rc-attestation__sig {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 22px;
  color: var(--home-accent);
  margin: 12px 0 0;
  line-height: 1.2;
}

/* Final CTA */
.body--home .final {
  padding: 140px 32px; text-align: center; position: relative; overflow: hidden;
  background: var(--home-bg);
}
.body--home .final::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(var(--home-accent-rgb), 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(var(--home-accent-rgb), 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.body--home .final-inner { position: relative; max-width: 780px; margin: 0 auto; }
.body--home .final-h2 {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(38px, 5vw, 60px); line-height: 1.05; letter-spacing: -1.5px;
  margin-bottom: 24px; color: var(--home-ink);
}
.body--home .final p {
  font-family: var(--font-body); font-size: 19px; line-height: 1.6;
  color: var(--home-muted); margin-bottom: 40px;
}
.body--home .final-trust {
  margin-top: 20px; font-size: 13px; color: var(--home-muted);
}

/* Marketing homepage responsive */
@media (max-width: 960px) {
  .body--home .hero-grid,
  .body--home .leadmag-grid,
  .body--home .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .body--home .hero { padding: 24px 0 80px; }
  .body--home .hero-visual { min-height: 380px; }
  .body--home .leadmag { padding: 72px 0; }
  .body--home .personas,
  .body--home .rc-chips { grid-template-columns: 1fr; }
  .body--home .process-path { grid-template-columns: 1fr 1fr; }
  .body--home .process-path::before { display: none; }
  .body--home .trap { grid-template-columns: 1fr; }
  .body--home .trap-quote { border-right: 0; border-bottom: 1px solid var(--home-border); padding: 32px 28px; }
  .body--home .trap-fix { padding: 28px; }
  .body--home .directory-head { grid-template-columns: 1fr; gap: 24px; }
  .body--home .directory { padding: 96px 20px; }
  .body--home .directory-inner { padding: 56px 32px; border-radius: 20px; }
}
@media (max-width: 760px) {
  .body--home .creed-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .body--home .process-path { grid-template-columns: 1fr; }
}

/* --- RESOURCE CENTER INDEX (opt-in page) --- */
/* Dark hero for the standalone directory index page. The primary
   accent arrives via the radial glow, not the base gradient, so the
   H1 stays readable on any client palette. */

.resource-center-hero {
  background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-deep) 100%);
  color: var(--color-text-on-dark);
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}
.resource-center-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(var(--color-primary-rgb), 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.resource-center-hero .container { position: relative; z-index: 1; }
.resource-center-hero .section-label {
  color: var(--color-text-on-dark);
  opacity: 0.85;
}
.resource-center-hero h1 {
  color: var(--color-text-on-dark);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02; letter-spacing: -1.4px;
  max-width: 18ch;
  margin: var(--space-sm) 0 var(--space-md);
}
.resource-center-hero .hero__sub {
  max-width: 56ch;
  color: rgba(var(--color-text-on-dark-rgb), 0.78);
  font-size: 18px;
  line-height: 1.65;
}
.resource-center-hero .hero__actions { margin-top: var(--space-md); }

/* --- PODCAST EPISODE ---------------------------------------------------
   Added 2026-08-18 with the episode rebuild. The renderer shipped before
   these rules existed and the page rendered edge to edge as unstyled text,
   which is what a new class name with no rule behind it always looks like.
   Everything here is scoped to .episode so nothing leaks onto a node or a
   mirrored page. */

.episode .ep-eyebrow {
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.episode .ep-header h1 { margin-bottom: 8px; }
.episode .ep-guest { font-size: 18px; color: var(--color-text-muted); margin-bottom: 0; }

.episode .ep-player { margin: var(--space-md) 0 var(--space-lg); }
.episode .ep-player iframe { width: 100%; border: none; }

/* A reading measure for prose only. The container stays 1200px, matching every
   other page in the build: never narrow the PAGE to fix a line length. That was
   the wrong turn taken on the guide layout in session 21 and Cindy rejected it. */
.episode .ep-summary p,
.episode .ep-part__body p { max-width: 68ch; }

.episode .ep-summary h2,
.episode .ep-takeaways h2,
.episode .ep-chapters h2,
.episode .ep-deeper h2,
.episode .ep-related h2,
.episode .ep-transcript__title {
  font-size: 28px;
  margin-bottom: var(--space-sm);
}
.episode .ep-summary p { font-size: 20px; line-height: 1.75; }

.episode .ep-takeaways ul { list-style: none; margin: 0; padding: 0; }
.episode .ep-takeaways li {
  font-size: 19px;
  line-height: 1.7;
  padding-left: 28px;
  margin-bottom: 14px;
  position: relative;
}
.episode .ep-takeaways li::before {
  content: "\2192";                 /* arrow: her rules use arrows, never checkmarks or bullets */
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.episode .ep-chapters ol { list-style: none; margin: 0; padding: 0; }
.episode .ep-chapters li { border-bottom: 1px solid var(--color-parchment-dark); }
.episode .ep-chapters a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  font-size: 18px;
  text-decoration: none;
}
.episode .ep-chapters a:hover { text-decoration: underline; }
.episode .ep-chapters__time {
  font-family: var(--font-headline);
  font-size: 14px;
  color: var(--color-primary);
  min-width: 52px;
}

.episode .ep-transcript__note {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.episode .ep-part { border-top: 1px solid var(--color-parchment-dark); }
.episode .ep-part:last-of-type { border-bottom: 1px solid var(--color-parchment-dark); }
.episode .ep-part__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  cursor: pointer;
  padding: 18px 0;
  list-style: none;
}
.episode .ep-part__summary::-webkit-details-marker { display: none; }
.episode .ep-part__summary h2 {
  font-size: 21px;
  margin: 0;
  border: none;
  padding: 0;
  flex: 1;
}
.episode .ep-part__summary::after {
  content: "\002B";                 /* + closed, - open. No script involved. */
  font-family: var(--font-headline);
  font-size: 22px;
  color: var(--color-primary);
  line-height: 1;
}
.episode .ep-part[open] > .ep-part__summary::after { content: "\2212"; }
.episode .ep-part__time {
  font-family: var(--font-headline);
  font-size: 13px;
  color: var(--color-text-muted);
}
.episode .ep-part__body { padding: 0 0 var(--space-md); }
.episode .ep-part__body p { font-size: 18px; line-height: 1.8; }
.episode .ep-turn__meta {
  font-family: var(--font-headline);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin: var(--space-sm) 0 2px;
}
.episode .ep-turn__time { color: var(--color-text-muted); margin-left: 10px; }

.episode .ep-deeper ul,
.episode .ep-related ul { list-style: none; margin: 0; padding: 0; }
.episode .ep-deeper li,
.episode .ep-related li { margin-bottom: 12px; font-size: 19px; }
.episode .ep-related__num {
  font-family: var(--font-headline);
  font-size: 13px;
  color: var(--color-primary);
  margin-right: 10px;
}

@media (max-width: 640px) {
  .episode .ep-summary p { font-size: 18px; }
  .episode .ep-part__summary h2 { font-size: 19px; }
  .episode .ep-chapters a { font-size: 17px; }
}

/* Episode: subscribe row, the two-ways block, share. Added 2026-08-18 at Cindy's
   direction, after the first cut dropped her own Academy promotion and the
   subscribe/share buttons her WordPress pages carried. */
.episode .ep-subscribe { margin: var(--space-md) 0 var(--space-lg); }
.episode .ep-subscribe h2 { font-size: 18px; margin-bottom: 12px; }
.episode .ep-subscribe__list,
.episode .ep-share__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.episode .ep-subscribe__list a,
.episode .ep-share__list a {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--border-radius);
  font-family: var(--font-headline);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: inherit;
}
.episode .ep-subscribe__list a:hover,
.episode .ep-share__list a:hover { background: var(--color-primary); color: #fff; }

.episode .ep-twoways h2 { font-size: 30px; margin-bottom: 10px; }
.episode .ep-twoways__intro { font-size: 19px; max-width: 68ch; margin-bottom: var(--space-md); }
.episode .ep-offer { margin-bottom: var(--space-md); max-width: 68ch; }
.episode .ep-offer h3 { font-size: 22px; margin-bottom: 8px; }
.episode .ep-offer__n {
  display: inline-block;
  min-width: 30px;
  color: var(--color-primary);
}
.episode .ep-offer p { font-size: 18px; line-height: 1.7; margin-bottom: 10px; }
.episode .ep-offer ul { margin: 0 0 12px 0; padding: 0; list-style: none; }
.episode .ep-offer li { font-size: 18px; line-height: 1.7; padding-left: 26px; position: relative; margin-bottom: 6px; }
.episode .ep-offer li::before { content: "\2192"; position: absolute; left: 0; color: var(--color-primary); }
.episode .ep-offer__cta {
  display: inline-block;
  margin-top: 4px;
  padding: 11px 22px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-headline);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--border-radius);
}
.episode .ep-share { display: flex; gap: var(--space-xl); flex-wrap: wrap; }
.episode .ep-share__col { flex: 1 1 260px; }
.episode .ep-share h2 { font-size: 18px; margin-bottom: 12px; }

@media (max-width: 640px) {
  .episode .ep-twoways h2 { font-size: 25px; }
  .episode .ep-share { gap: var(--space-md); }
}