/* =====================================================
   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:        #F26523;   /* {{CLIENT_ACCENT}} */
  --color-primary-hover:  #FF6923;   /* {{CLIENT_ACCENT_HOVER}} */
  /* RGB triplet of primary, used in rgba() overlays. Auto-computed from accent hex. */
  --color-primary-rgb:    242, 101, 35;  /* {{CLIENT_ACCENT_RGB}} */

  /* Dark surface system */
  --color-charcoal:       #133357;   /* {{CLIENT_DARK}} */
  --color-charcoal-deep:  #052E4F;   /* {{CLIENT_DARK_DEEP}} */
  --color-charcoal-mid:   #133357;   /* {{CLIENT_DARK_MID}} */

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

  /* Secondary accent */
  --color-amber:          #55C2B3;   /* {{CLIENT_SECONDARY}} */

  /* Text colors */
  --color-text-primary:   #133357;   /* {{CLIENT_TEXT}} */
  --color-text-muted:     #43494F;   /* {{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);
  --color-text-on-primary: #ffffff;

  /* 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:          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-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:  19, 51, 87;              /* {{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:  19, 51, 87;              /* {{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: 19, 51, 87;             /* {{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:        'Mukta', 'Helvetica Neue', Arial, sans-serif;         /* {{CLIENT_HEADLINE_FONT}} */
  --font-headline-weight: 800;                           /* {{CLIENT_HEADLINE_WEIGHT}} */
  --font-body:            'Poppins', 'Helvetica Neue', Arial, sans-serif; /* {{CLIENT_BODY_FONT}} */
  --font-mono:            monospace; /* {{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:     8px;   /* {{CLIENT_RADIUS}} */
  --border-radius-sm:  6px;
  --border-radius-btn: 50px;    /* {{CLIENT_BTN_RADIUS}} */
}


/* --- RESET & BASE --- */
*, *::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);
  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: 19px;
  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--warm {
  background: var(--color-cream); /* #E1EBF5 parent-site section tint */
}

/* Pillar grid section — white surface with the parent site's
   full-strength mountain-silhouette divider along the bottom edge
   (Mountain.svg from masterroofingutah.com, his section-transition
   motif). Extra bottom padding keeps cards clear of the ridge. */
.section--pillars {
  background: var(--color-cream); /* #E1EBF5 — the parent site's card-section tint (verified in its CSS) */
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--space-xl) + 130px);
}

.section--pillars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 147px;
  background-image: url('/assets/images/mountain-divider.svg');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
  pointer-events: none;
}

.section--pillars > .container {
  position: relative;
  z-index: 1;
}

/* Charcoal — full-bleed pointed color block. The parent site's
   section language: a navy band whose top edge rises to a center
   peak (their angled color-blocking), with the shingle texture
   from their contact section for depth. */
.section--charcoal {
  background: transparent;
  color: var(--surface-cta-text);
  padding: 0;
}

.section--charcoal > .cta-block,
.section--charcoal > .container {
  background: var(--surface-cta-bg) url('/assets/images/contact-us-bg.webp') center / cover no-repeat;
  border-radius: 0;
  clip-path: polygon(0 110px, 50% 0, 100% 110px, 100% 100%, 0 100%);
  padding: calc(110px + var(--space-2xl)) var(--page-pad) var(--space-2xl);
  max-width: none;
  margin: 0;
  position: relative;
  overflow: hidden;
}

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

/* Guide dark band — the ONE emphasis section inside a long guide.
   Deliberately NOT .section--charcoal: that variant is the site's CTA
   language (pointed clip-path, shingle texture, 230px of top padding),
   and a guide page carries a real CTA band further down. Two identical
   pointed bands on one page reads as two calls to action, one of which
   happens to be an argument. This is a plain full-bleed navy block. */
.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; }

/* On the dark band the highlight box inverts to a translucent card so it
   still reads as a lift rather than disappearing into the background. */
.section--guide-dark .highlight-box {
  background: rgba(var(--surface-cta-text-rgb), 0.08);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  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); }

/* The bold-lead list's left rule needs to survive on dark. */
.section--guide-dark .bold-lead-list li { border-left-color: var(--color-primary); }

/* 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);
  /* Faint mountain-range texture along the hero's lower edge — the
     parent site's cta-bg.webp art (masterroofingutah.com), anchored
     bottom like his usage. */
  background: var(--color-hero-bg) url('/assets/images/mountains-faint.webp') bottom center / 100% auto no-repeat;
  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: 16px;
  padding: 15px 26px;
  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;
}

/* Primary button mechanics lifted verbatim from masterroofingutah.com
   (.btn-primary): orange pill, hard 3px teal under-shadow, and a
   slide-to-navy hover done with an oversized two-tone gradient. */
.btn--primary {
  background: linear-gradient(to right, var(--color-charcoal) 50%, var(--color-primary) 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  color: var(--color-text-on-primary);
  box-shadow: 0 3px 0 var(--color-amber);
  transition: all 0.2s ease-out;
}

.btn--primary:hover {
  background-position: left bottom;
  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;
}

/* The header bar runs wider than the 1200px article measure on purpose. This
   nav carries more than the parent site's does: 7 parent-site links, the
   Resource Center dropdown, and the CTA button. Measured at 1200px the row
   used 1104 of 1104 available pixels, so the logo and the first link touched
   with zero slack, at every width. The extra 80px is what buys the gap below.
   The top bar is widened to match so the two stay aligned with each other. */
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Never let the links run into the logo. space-between already separates
     them when there is slack; this is the floor when there is not. */
  gap: var(--space-lg);
  flex-wrap: nowrap;
  max-width: 1280px;
  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 > li { white-space: nowrap; }
.site-nav__links a {
  font-size: 15px; /* parent-site nav: Poppins 15px / 500 / uppercase */
  font-weight: 500;
  text-transform: uppercase;
  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); }
.site-nav__logo img { height: 98px; width: auto; display: block; } /* logo.svg natural size (199x98), matching the parent site's header scale */

/* Utility top bar — the parent site's navy strip above the nav:
   service area left, phone right. */
.top-bar {
  background: var(--color-charcoal);
  color: var(--color-text-on-dark);
  font-size: 14px;
}

.top-bar__inner {
  width: 100%;
  max-width: 1280px; /* matches .site-nav__inner so the two header rows align */
  margin: 0 auto;
  padding: 10px var(--page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.top-bar__text,
.top-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.top-bar__phone {
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-weight: 600;
}

.top-bar__phone:hover { color: var(--color-primary); }

.top-bar__icon { width: 16px; height: 16px; }

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

/* Matches .site-nav__links a exactly. It is a <button> for accessibility, but
   a reader should not be able to tell it apart from the links beside it. It
   was rendering 13px lowercase next to 15px uppercase links. */
.site-nav__dropdown-toggle {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  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;
  white-space: nowrap;
}

.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);
  /* Right-aligned to the parent item, not centered on it. Centering a 300px
     panel on a nav item that sits near the right edge pushed it off screen:
     at a 668px viewport the open menu measured 513px to 813px. Anchoring the
     right edges makes it open inward, which is safe at any width. */
  right: 0;
  left: auto;
  transform: translateY(8px);
  min-width: 300px;
  max-width: min(340px, calc(100vw - 2 * var(--page-pad)));
  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;
}

/* .is-open is set by nav.js on click, so the menu works on touch devices
   where :hover never fires. :hover and :focus-within stay for pointer and
   keyboard users. */
.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown,
.site-nav__item--dropdown.is-open .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__item--dropdown.is-open .site-nav__chevron { transform: rotate(180deg); }

.site-nav__dropdown li { margin: 0; white-space: normal; }
.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 component replicated verbatim from the parent site
   (masterroofingutah.com .why-choose-set .content, 2026-07-19):
   sky-blue gradient fading to white by mid-card, 18px radius,
   40/30 padding, soft drop shadow. Applies site-wide. */
.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #AFD5FF 10%, #FFF 50%);
  border: 0;
  border-radius: 18px;
  padding: 40px 30px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Numbered ring badge at the top of pillar cards — the parent site's
   icon-circle treatment (.why-choose-set .icon) with the pillar
   number in accent orange standing in for the icon. */
.card__badge {
  width: 100px;
  height: 100px;
  border: 6px solid #58779A; /* parent-site icon ring slate-blue */
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 27px;
}

.card__badge span {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--color-primary);
}

.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: 700;
  font-size: 22px; /* parent-site card h3: 22/28, #43494F */
  margin-bottom: var(--space-xs);
  line-height: 28px;
  color: #43494F;
}

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

.card__text {
  font-size: 17px;
  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: 21px;
  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: 18px;
  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: 12px;
  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;
}


/* --- 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: calc(50vh - 210px); /* centers the ~400px card in the viewport when stuck */
}


/* --- SIDEBAR CTA --- */
.sidebar-cta {
  background: var(--surface-cta-bg); /* navy card so the assessment CTA pops */
  border-radius: 18px;
  padding: var(--space-lg) var(--space-md);
  color: var(--surface-cta-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: 16px;
  line-height: 1.65;
  color: rgba(var(--color-text-on-dark-rgb), 0.9);
  margin-bottom: var(--space-md);
}

.sidebar-cta__divider {
  border: none;
  border-top: 1px solid rgba(var(--color-text-on-dark-rgb), 0.15);
  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-headline);
  font-size: 30px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-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; }


/* --- DISCLAIMER (bottom of node, under sources) --- */

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


/* --- 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 {
  background: var(--color-white);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  margin-bottom: 12px;
  padding: 2px 20px;
}

.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__item {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  padding: 20px 26px;
  margin-bottom: 14px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.node-list__item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

.node-list__query {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 21px;
  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: 16px; color: var(--color-text-muted); margin-bottom: 0; }


/* --- BACK NAV (node pages) --- */
.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); }

/* --- 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); text-align: center; }
.cta-block h2 { margin-bottom: var(--space-sm); }
.cta-block p { margin: 0 auto var(--space-lg); max-width: 780px; }
.cta-block .btn { margin: 0 8px var(--space-sm); }


/* --- 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;
  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 header: deck line under the H1, the freshness line under the author
   block, and the single 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; }
}

/* 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 --- */
.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(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer__col--info li {
  color: rgba(var(--surface-footer-text-rgb), 0.6);
  font-size: 14px;
  line-height: 1.6;
}

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-sm);
}

.footer__badges img {
  height: 40px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 5px 8px;
}

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

/* ── NAV TIGHTENING (laptop range) ───────────────────────
   The horizontal nav needs roughly 1224px at full size: 7 parent-site links,
   the Resource Center dropdown, and a wide CTA button, beside a 199px logo.
   Rather than dropping every laptop to a hamburger, tighten type, gap and
   logo through the range where it would otherwise be cramped. Below 1024px
   the nav collapses properly (see the block after this one). */
@media (max-width: 1400px) and (min-width: 1101px) {
  .site-nav__links { gap: var(--space-sm); }
  .site-nav__links a,
  .site-nav__dropdown-toggle { font-size: 13px; }
  .site-nav__links .btn { font-size: 12px; padding: 8px 16px; }
  .site-nav__logo img { height: 76px; }
}

/* ── NAV COLLAPSE ─────────────────────────────────────────
   The horizontal nav needs about 814px for its links alone, plus the logo, so
   it overflowed and made the page scroll sideways anywhere between the old
   640px collapse point and roughly 900px. That is the whole tablet range. The
   hamburger now takes over well before the nav runs out of room. This is its
   own breakpoint on purpose: the 640px block below is about small-screen
   typography and layout, which should not move with the nav.

   Raised from 1024 to 1100 on 2026-08-03. At 1025px the row measured 929 of
   929 available pixels, so the first link sat flush against the logo with no
   gap at all. Collapsing 76px earlier is what pays for the guaranteed gap on
   .site-nav__inner, and it costs only a thin band of window widths. Shrinking
   the type further was the alternative and it was rejected: 15px uppercase
   Poppins is the parent site's nav, and the design SOT is the parent site. */
@media (max-width: 1100px) {
  .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; }

  /* Dropdown on mobile: the desktop treatment is position:absolute with a
     300px min-width and a translateX(-50%) centering, which overflows a phone
     viewport inside the collapsed menu. Here it becomes an ordinary indented
     sub-list that pushes the menu down. */
  .site-nav__item--dropdown { width: 100%; }
  .site-nav__dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: 13px;
    color: var(--color-nav-text-muted);
  }
  .site-nav__dropdown {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0 0 var(--space-xs) var(--space-sm);
    display: none;
  }
  .site-nav__item--dropdown:hover .site-nav__dropdown,
  .site-nav__item--dropdown:focus-within .site-nav__dropdown,
  .site-nav__item--dropdown.is-open .site-nav__dropdown {
    transform: none;
  }
  /* Only an explicit tap opens it on mobile. Leaving :hover in play here
     makes the sub-list flicker open as a finger passes over the button. */
  .site-nav__item--dropdown.is-open .site-nav__dropdown { display: block; }
}

@media (max-width: 640px) {
  :root {
    --space-xl: 48px;
    --space-2xl: 64px;
    --page-pad: 24px;
  }
  h1, .hero__headline { font-size: 32px; }
  h2 { font-size: 27px; }


  .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; }
  .site-nav__logo img { height: 80px; } /* parent-site mobile logo cap */
  .section--charcoal > .cta-block,
  .section--charcoal > .container {
    clip-path: polygon(0 48px, 50% 0, 100% 48px, 100% 100%, 0 100%);
    padding-top: calc(48px + var(--space-xl));
  }
  .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; }

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