/* =====================================================
   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:        #6DBEA2;   /* {{CLIENT_ACCENT}} */
  --color-primary-hover:  #4F9C81;   /* {{CLIENT_ACCENT_HOVER}} */
  /* RGB triplet of primary, used in rgba() overlays. Auto-computed from accent hex. */
  --color-primary-rgb:    109, 190, 162;  /* {{CLIENT_ACCENT_RGB}} */

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

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

  /* Secondary accent */
  --color-amber:          #993F09;   /* {{CLIENT_SECONDARY}} */

  /* Tertiary accent — third brand colour. Derives from the secondary
     accent when the brand declares only two colours. */
  --color-tertiary:       #FADADD;   /* {{CLIENT_TERTIARY}} */

  /* Text colors */
  --color-text-primary:   #272727;   /* {{CLIENT_TEXT}} */
  --color-text-muted:     #636363;   /* {{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);
  /* Text on accent-coloured surfaces (buttons, CTAs). White suits most
     accents, but a brand whose loud surfaces are light needs dark text
     here or every button fails contrast. */
  --color-text-on-primary: #000000;   /* {{CLIENT_TEXT_ON_PRIMARY}} */

  /* 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:         var(--color-parchment);     /* {{CLIENT_HERO_BG}} */
  --color-hero-text:       var(--color-text-primary);  /* {{CLIENT_HERO_TEXT}} */
  --color-hero-text-muted: var(--color-text-muted);    /* {{CLIENT_HERO_TEXT_MUTED}} */
  --color-hero-border:     rgba(0, 0, 0, 0.12);        /* {{CLIENT_HERO_BORDER}} */

  /* Site nav treatment — same rule as hero. Override per brand. */
  --color-nav-bg:          #000000;     /* {{CLIENT_NAV_BG}} */
  --color-nav-text:        #FFFFFF;  /* {{CLIENT_NAV_TEXT}} */
  --color-nav-text-muted:  rgba(255,255,255,0.75);    /* {{CLIENT_NAV_TEXT_MUTED}} */
  --color-nav-border:      #000000;/* {{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-charcoal);      /* {{CLIENT_SURFACE_CTA_BG}} */
  --surface-cta-text:          var(--color-text-on-dark);  /* {{CLIENT_SURFACE_CTA_TEXT}} */
  --surface-cta-text-rgb:      255, 255, 255;              /* {{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:  39, 39, 39;              /* {{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:  39, 39, 39;              /* {{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: 39, 39, 39;             /* {{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}} */

  /* === TYPOGRAPHY — Replace with client fonts === */
  --font-headline:        Fraunces;         /* {{CLIENT_HEADLINE_FONT}} */
  --font-headline-weight: 400;                           /* {{CLIENT_HEADLINE_WEIGHT}} */
  --font-body:            Inter; /* {{CLIENT_BODY_FONT}} */
  --font-mono:            Montserrat; /* {{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:     6px;   /* {{CLIENT_RADIUS}} */
  --border-radius-sm:  6px;
  --border-radius-btn: 9999px;    /* {{CLIENT_BTN_RADIUS}} */
}


/* --- RESET & BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 17px;
  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: 17px;
}

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);
  font-weight: var(--font-headline-weight);
  color: var(--color-text-primary);
  line-height: 1.2;
}

h1 { font-size: 54px; margin-bottom: var(--space-md); }
h2 { font-size: 44px; margin-bottom: var(--space-md); }
h3 { font-size: 32px; margin-bottom: var(--space-sm); }
h4 { font-size: 22px; margin-bottom: var(--space-xs); }

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


/* --- SECTION LABEL / EYEBROW --- */
.section-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  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);
}

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

.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: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  display: block;
}

.hero__headline {
  font-size: 56px;
  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: 22px;
  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 --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 11px 22px;
  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;
  letter-spacing: 0.01em;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-on-primary);
}

.btn--secondary {
  background: transparent;
  color: var(--color-hero-text);
  border: 0.5px solid var(--color-hero-border);
  font-weight: 500;
}

.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);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-on-dark);
  border: 0.5px solid rgba(var(--color-text-on-dark-rgb), 0.25);
  font-weight: 500;
}

.btn--ghost:hover {
  background: rgba(var(--color-text-on-dark-rgb), 0.08);
  color: var(--color-text-on-dark);
}


/* --- 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: 20px;
  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;
}

.site-nav__links a {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-nav-text-muted);
  transition: color 0.2s ease;
}

.site-nav__links a:hover { color: var(--color-nav-text); }
.site-nav__links .btn { font-size: 13px; padding: 9px 20px; 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-size: 13px;
  font-weight: 500;
  color: var(--color-nav-text-muted);
  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: 14px;
  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 --- */
.breadcrumb {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-parchment-dark);
  padding: 10px 0;
  font-size: 13px;
  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;
  align-items: center;
  gap: 0;
}

.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: 9px;
  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: 24px;
  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: 15px;
  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 --- */
.node-tldr {
  background: var(--color-bg-blush);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0 var(--space-lg);
}

.node-tldr__label {
  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: 10px;
}

.node-tldr p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text-primary);
  margin: 0;
}

.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: 15px;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}

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

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

.author-block__date {
  font-family: var(--font-mono);
  font-size: 11px;
  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: 10px;
  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: 17px;
  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: 17px;
  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;
}


/* --- PULL QUOTE --- */
/* Sits between Key Takeaways and the fan-out body, on nodes and guides alike.
   Only renders when the node declares a `pullQuote`; see render-node.js. */
.section--pullquote { padding: var(--space-lg) 0; }

.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);
}


/* --- 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 {
  background: var(--surface-sidebar-bg);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  color: var(--surface-sidebar-text);
}

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

.sidebar-cta__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text-on-dark);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

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

.sidebar-cta__divider {
  border: none;
  border-top: 1px solid rgba(var(--surface-sidebar-text-rgb), 0.10);
  margin: var(--space-sm) 0;
}

.sidebar-cta .btn { width: 100%; text-align: center; margin-bottom: 10px; }
.sidebar-cta .btn:last-child { margin-bottom: 0; }


/* --- NODE BODY TYPOGRAPHY --- */
.node-main h2 {
  font-size: 28px;
  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: 20px; font-weight: 700; margin-top: var(--space-md); margin-bottom: 10px; }
.node-main p { font-size: 18px; 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: 17px; 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 --- */
.perspective-block {
  background: var(--color-bg-blush);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: var(--space-md) var(--space-lg);
}

.perspective-block__label {
  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-sm);
}

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


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

.node-sources {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-parchment-dark);
}

.node-sources__label {
  display: block;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  opacity: 0.5;
  margin-bottom: 10px;
}

.node-sources__list { list-style: decimal; padding-left: 20px; }
.node-sources__list li { font-size: 14px; line-height: 1.7; padding: 3px 0; opacity: 0.65; }
.node-sources__list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.node-sources__list a:hover { color: var(--color-primary); opacity: 1; }


/* --- 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: 16px; margin-bottom: 4px; }
.author-bio__text { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 8px; }
.author-bio__link { font-size: 13px; font-family: var(--font-mono); color: var(--color-primary); }


/* --- FAQ ACCORDION --- */
.faq-item { border-bottom: 1px solid var(--color-parchment-dark); }

.faq-item summary {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 19px;
  padding: var(--space-sm) 0;
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::before {
  content: '+';
  display: inline-block;
  width: 24px;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-primary);
}

.faq-item[open] summary::before { content: '\2212'; }

.faq-item__answer {
  padding: 0 0 var(--space-sm) 24px;
  font-size: 15px;
  line-height: 1.75;
}


/* --- 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; }
.node-list li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-parchment-dark); }
.node-list li:last-child { border-bottom: none; }

.node-list__query {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 20px;
  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: 14px; color: var(--color-text-muted); }


/* --- PULL QUOTE --- */
.section--pullquote { padding: var(--space-lg) 0; }

.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);
}

/* --- CTA BLOCK --- */
.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); }
.cta-block .btn { margin: 0 var(--space-xs) 0 0; }


/* --- 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: 18px; 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: 17px; 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;
  /* Fills the row with however many stats there are (3 or 4 is usual), so a
     three-stat banner has no empty fourth column. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 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); }


/* --- GUIDE PAGE PARTS (pipeline/render-guide.js) --- */
/* Ported 2026-10-02 from a client build's guide pipeline. Tokens only: every
   value comes from the client's brand settings, so no client's palette ships. */

/* Back links above the guide header */
.back-nav { padding: var(--space-sm) 0 0; }
.back-nav .container { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.back-nav a { font-size: 15px; font-weight: 500; color: var(--color-text-muted); text-decoration: none; }
.back-nav a:hover { color: var(--color-primary); }

/* The deck line under the H1, the freshness line under the author block,
   and the closing conviction sentence */
.guide-subtitle {
  font-size: 21px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 46em;
  margin-top: calc(var(--space-xs) * -1);
  margin-bottom: var(--space-md);
}
.guide-updated { font-size: 13px; letter-spacing: 0.02em; color: var(--color-text-muted); margin-top: var(--space-xs); }
.guide-conviction {
  margin-top: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-headline);
  font-size: 21px;
  line-height: 1.55;
}
.guide-conviction strong { font-weight: 700; }
@media (max-width: 768px) {
  .guide-subtitle { font-size: 18px; }
  .guide-conviction { font-size: 18px; }
}

/* The ONE emphasis section in a guide ("emphasis": true). Deliberately not
   .section--charcoal: that is the CTA band's look, and a guide page already
   ends on a real CTA band. Two identical bands read as two calls to action. */
.section--guide-dark { background: var(--surface-cta-bg); color: var(--surface-cta-text); }
.section--guide-dark h2, .section--guide-dark h3, .section--guide-dark h4 { color: var(--surface-cta-text); }
.section--guide-dark p, .section--guide-dark li { color: rgba(var(--surface-cta-text-rgb), 0.88); }
.section--guide-dark strong { color: var(--surface-cta-text); }
.section--guide-dark a { color: var(--color-primary); }
.section--guide-dark .section-label { color: var(--color-primary); opacity: 0.9; }
.section--guide-dark .highlight-box {
  background: rgba(var(--surface-cta-text-rgb), 0.08);
  border-left: 3px solid var(--color-primary);
  color: var(--surface-cta-text);
}
.section--guide-dark .highlight-box p { color: rgba(var(--surface-cta-text-rgb), 0.92); }
.section--guide-dark .highlight-box strong { color: var(--surface-cta-text); }
.section--guide-dark .bold-lead-list li { border-left-color: var(--color-primary); }

/* Disclaimer under the sources ("disclaimer": "regulatory" or "general") */
.node-disclaimer {
  margin-top: var(--space-md);
  padding: 16px 18px;
  border-left: 3px solid var(--color-parchment-dark);
  background: var(--color-parchment);
}
.node-disclaimer__label {
  display: block;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  opacity: 0.5;
  margin-bottom: 8px;
}
.node-disclaimer p { font-size: 14px; line-height: 1.7; opacity: 0.7; margin: 0 0 8px 0; }
.node-disclaimer p:last-child { margin-bottom: 0; }


/* --- FOOTER --- */
.site-footer {
  background: var(--surface-footer-bg);
  color: var(--surface-footer-text);
  padding: var(--space-xl) 0 var(--space-lg);
  position: relative;
  overflow: hidden;
}

.site-footer::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;
}

.site-footer > .container { position: relative; z-index: 1; }
.site-footer a { color: rgba(var(--surface-footer-text-rgb), 0.6); text-decoration: none; }
.site-footer a:hover { color: var(--color-primary); }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(var(--surface-footer-text-rgb), 0.45);
  margin-bottom: var(--space-sm);
}

.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: var(--space-xs); }
.footer__col li a { font-size: 14px; }

.footer__bottom {
  border-top: 1px solid rgba(var(--surface-footer-text-rgb), 0.08);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(var(--surface-footer-text-rgb), 0.35);
}


/* --- 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: 38px; }
  h2 { font-size: 32px; }
  h3 { font-size: 25px; }
  .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: 32px; }
  h2 { font-size: 27px; }
  .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; }
  /* Phone width: nothing may push the page sideways. The author date wraps
     under the name, wide tables scroll inside their own box, and grid cards
     shrink to the column instead of to their longest word. */
  .author-block { flex-wrap: wrap; }
  .author-block__date { margin-left: 0; flex-basis: 100%; white-space: normal; }
  .node-main table, .guide-body table { display: block; overflow-x: auto; max-width: 100%; }
  /* The direct answer box keeps its full width on a phone, and the
     breadcrumb shows Home and the parent page only (the long library, area
     and current-page names, which the H1 repeats, ran it to four lines). */
  .node-tldr { padding: var(--space-sm) var(--space-sm) var(--space-sm) 20px; }
  .breadcrumb__item:not(:first-child):not(:nth-last-child(2)) { display: none; }
}

/* Grid and flex children default to min-width: auto, so one long word or a
   wide table sets the column's width. Let them shrink. */
.node-layout > *, .concept-grid > *, .card-grid > * { min-width: 0; }
.concept-card, .card { overflow-wrap: break-word; }


/* =====================================================
   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; }

.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: 800;
  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: 900;
  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: 800;
}
.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: 800;
  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: 900; 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: 900; 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: 900;
  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: 900; 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: 900; 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: 900; 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: 900; 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: 900;
  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: 800; 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: 900; 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: 900;
  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: 900; 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: 900; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--home-muted);
}
.body--home .step-heading {
  font-size: 22px; font-weight: 800; 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: 900;
}
.body--home .trap-num {
  font-family: var(--font-headline); font-weight: 900;
  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: 900; 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: 800; 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: 900;
  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: 900; 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: 900;
  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: 800; }
.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: 800;
  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: 900;
  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); }