/* ==========================================================================
   Endless Customers — main.css
   Apple-inspired cool-gray palette · Light + Dark mode · Gradient accent system
   ========================================================================== */

/* General Sans — via Fontshare (free for commercial use) — used for HEADINGS */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700,800&display=swap');

/* Inter — via Google Fonts — used for BODY / paragraph / UI text (Framer-style).
   VARIABLE font (wght 100–900) so intermediate weights like the 740 bold
   emphasis render true. Legacy browsers get static instances (740 → 700). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Tabler Icons — for dropdown and UI icons */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');


/* --------------------------------------------------------------------------
   1. Design Tokens — Light Mode (default)
   -------------------------------------------------------------------------- */
:root {

  /* --- Surfaces --- */
  --color-bg:             #FFFFFF;   /* Page background */
  --color-bg-surface:     #F8FAFC;   /* Cards, nav, raised elements */
  --color-bg-subtle:      #F1F5F9;   /* Alt section backgrounds */
  --color-bg-elevated:    #FFFFFF;   /* Modals, popovers on top of subtle */

  /* --- Borders --- */
  --color-border:         #E2E8F0;   /* Default dividers, card edges */
  --color-border-strong:  #CBD5E1;   /* Stronger separation */

  /* --- Text --- */
  --color-text-muted:     #5B6B7F;   /* Tertiary info — WCAG AA (4.9:1+ on all light surfaces) */
  --color-text-muted-faint:#94A3B8;  /* Decorative only — never for text that must be read */
  --color-text:           #475569;   /* Body copy — lightened a step so bold/headings pop */
  --color-text-strong:    #1E293B;   /* Labels, subheadings */
  --color-heading:        #0F172A;   /* H1–H3, high-emphasis text */
  --color-em:             #000;      /* Bold emphasis inside body copy — the ONLY pure black
                                        on the page (Apple-style color pop; headings stay
                                        hue-tinted). #fff in dark mode. June 2026, per Bob. */

  /* --- Nav --- */
  --color-nav-bg:         rgba(241, 245, 249, 0.85);
  --color-nav-border:     rgba(226, 232, 240, 0.8);
  --color-subnav-bg:      rgba(226, 230, 237, 0.72);   /* glass pill — a step darker than the page */
  --color-glass-tint:     rgba(248, 250, 252, 0.6);    /* docked-bar glass — contrast floor over imagery */
  --color-menu-bg:        #FFFFFF;                     /* dropdown panels — solid white in light */
  --color-menu-bg-dark:   #0A0F1F;                     /* near-black panel (dark mode + conference) */
  --color-curtain:        rgba(241, 245, 249, 0.45);   /* page dim behind open menus */
  --color-nav-pill-bg:    rgba(2, 6, 23, 0.93);        /* the always-dark pill — near-black over light
                                                          pages; dark pages override below (html scope,
                                                          so the nav's own dark lock can't re-scope it) */

  /* --- Accent: Primary Blue --- */
  --color-blue:           #0a6cff;
  --color-blue-hover:     #0058e0;
  --color-blue-subtle:    rgba(10, 108, 255, 0.08);

  /* --- Accent: Magenta ---
     Darkened June 2026 for WCAG AA: closest same-hue value where white
     button text reaches 4.5:1 (was #e361b7 / hover #d14fa5). */
  --color-magenta:        #D6269B;
  --color-magenta-hover:  #B8318A;
  --color-magenta-subtle: rgba(227, 97, 183, 0.08);

  /* --- Accent: Green ---
     Darkened June 2026 for WCAG AA (was #09b209 / hover #088a08). */
  --color-green:          #078A07;
  --color-green-hover:    #077A07;
  --color-green-subtle:   rgba(9, 178, 9, 0.08);

  /* --- Accent: HubSpot Orange ---
     #FF4701 set June 2026 at Bob's direction. Note: white text on this
     orange is ~3.0:1 (below WCAG AA 4.5:1) — accepted as a deliberate
     brand decision. */
  --color-hubspot:        #FF4701;
  --color-hubspot-hover:  #DE3E00;
  --color-hubspot-subtle: rgba(255, 71, 1, 0.08);

  /* --- Semantic alias (primary interactive color) --- */
  --color-accent:         var(--color-blue);
  --color-accent-hover:   var(--color-blue-hover);
  --color-accent-subtle:  var(--color-blue-subtle);

  /* --- Gradient (always: magenta → blue → green) --- */
  --gradient-accent:      linear-gradient(90deg, #e361b7 0%, #0a6cff 50%, #09b209 100%);
  --gradient-accent-135:  linear-gradient(135deg, #e361b7 0%, #0a6cff 50%, #09b209 100%);
  --gradient-accent-45:   linear-gradient(45deg, #e361b7 0%, #0a6cff 50%, #09b209 100%);

  /* --- Typography --- */
  --font-sans:            "Inter", -apple-system, BlinkMacSystemFont,
                          "Segoe UI", system-ui, sans-serif;
  --font-display:         "General Sans", -apple-system, BlinkMacSystemFont,
                          "Segoe UI", system-ui, sans-serif;
  --font-size-base:       16px;
  --line-height-base:     1.3;   /* Framer-style tight body leading */

  --text-xs:    0.75rem;    /* 12px — fine print */
  --text-sm:    0.9375rem;  /* 15px — body small */
  --text-base:  1.125rem;   /* 18px — body base */
  --text-lg:    1.5rem;     /* 24px — body large */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   2rem;       /* 32px */
  --text-4xl:   2.75rem;    /* 44px */
  --text-5xl:   3.75rem;    /* 60px */
  --text-6xl:   5rem;       /* 80px */

  /* --- Fluid headline scale ---
     Page-level (H1) headlines scale with viewport AND headline length.
     Tier by character count: short < 45 · medium 45–70 · long > 70.
     Base hero classes use the medium token; add .headline-short or
     .headline-long on the <h1> to move tiers.
     "split" tokens are for two-column heroes (services pages) where the
     headline shares the row with media and has roughly half the width.
     NOTE: caps are constrained by hero container widths (800–1000px),
     not the viewport — size × longest-line-ch × ~0.56 must fit the
     container or the headline wraps into extra lines. */
  --headline-short:        clamp(2.25rem, 3.9vw + 1.35rem, 4.5rem);   /* 36 → 72px */
  --headline-medium:       clamp(2rem, 2.85vw + 1.35rem, 4rem);       /* 32 → 64px */
  --headline-long:         clamp(1.75rem, 2.15vw + 1.25rem, 3.5rem);  /* 28 → 56px */
  --headline-split-short:  clamp(2.2rem, 4.8vw, 3.8rem);              /* 35 → 61px */
  --headline-split-medium: clamp(2.05rem, 4.5vw, 3.4rem);             /* 33 → 54px */
  --headline-split-long:   clamp(1.9rem, 4.2vw, 3rem);                /* 30 → 48px */

  /* --- Tracking & leading ramps (June 2026 spacing audit) ---
     One value per typographic role, sitewide. Shape follows Apple's measured
     curve (gentle at display sizes, never extreme) but values are tuned for
     General Sans at 700–800, which is blacker than SF Pro and needs more
     air. See typography-spacing-audit.md before changing. */
  --tracking-display: -0.025em;  /* ≥44px headlines + big stat numbers */
  --tracking-heading: -0.02em;   /* 28–44px section titles, page h2s, 32px stats */
  --tracking-title:   -0.01em;   /* 18–26px card/step/feature titles */
  --tracking-label:    0.1em;    /* uppercase eyebrows / labels */
  --leading-display:   1.05;     /* heroes */
  --leading-heading:   1.15;     /* section titles, page h2s */
  --leading-title:     1.25;     /* card/step titles */
  --leading-lede:      1.45;     /* 20–24px subheads, ledes, feature copy */
  --leading-body:      1.5;      /* standard paragraphs */
  --leading-article:   1.7;      /* long-form article bodies */

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  /* Breakpoints follow Framer's responsive model (design canvases at
     1200 / 810 / 390):
       Desktop : 1200px and up   — 1400px max-width grid, centered
                                   (fluid between 1200 and 1400)
       Tablet  : 810px – 1199px  — @media (max-width: 1199px)
       Phone   : 809px and down  — @media (max-width: 809px)
     All media queries in this project must use ONLY these two queries.
     (CSS variables can't be used inside @media, so these are documented
     here rather than defined as custom properties.) */
  --max-width:   1400px;   /* site grid: nav, subnav, heroes, sections, footer */
  --nav-height:  79px;

  /* --- Borders --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --- Shadows (cool-tinted) --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.22s ease;
  --transition-slow:   0.35s ease;
}


/* --------------------------------------------------------------------------
   2. Dark Mode Tokens
   Applied via [data-theme="dark"] (manual toggle) AND
   @media (prefers-color-scheme: dark) when no manual override is set.
   -------------------------------------------------------------------------- */
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             #0F172A;
    --color-bg-surface:     #1E293B;
    --color-bg-subtle:      #152033;
    --color-bg-elevated:    #263348;

    --color-border:         #334155;
    --color-border-strong:  #475569;

    --color-text-muted:     #94A3B8;
    --color-text:           #B7C3D3;
    --color-text-strong:    #E2E8F0;
    --color-heading:        #F8FAFC;
    --color-em:             #fff;      /* bold emphasis pop — pure white in dark */

    --color-nav-bg:         rgba(30, 41, 59, 0.92);
    --color-nav-border:     rgba(51, 65, 85, 0.8);
    --color-subnav-bg:      rgba(51, 65, 85, 0.72);   /* glass pill — a step lighter than the page */
    --color-glass-tint:     rgba(15, 23, 42, 0.58);   /* docked-bar glass — contrast floor over imagery */
    --color-menu-bg:        var(--color-menu-bg-dark);   /* dropdown panels — near-black in dark */
    --color-curtain:        rgba(2, 6, 23, 0.45);     /* page dim behind open menus */

    --color-blue-subtle:    rgba(10, 108, 255, 0.12);
    --color-magenta-subtle: rgba(227, 97, 183, 0.12);
    --color-green-subtle:   rgba(9, 178, 9, 0.12);
    --color-hubspot-subtle: rgba(255, 71, 1, 0.12);
    --color-accent-subtle:  rgba(10, 108, 255, 0.12);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* Pill fill follows the PAGE theme, not the nav's locked-dark scope, so it's
   qualified to html: near-black over light pages (set in :root above), one
   step lighter than the page over dark pages (here). The generic
   [data-theme="dark"] block must NOT define this token — it would re-scope
   on the nav element itself and erase the light-page value. */
html[data-theme="dark"] {
  --color-nav-pill-bg: rgba(28, 38, 56, 0.92);
}

/* Manual dark override always wins */
[data-theme="dark"] {
  --color-bg:             #0F172A;
  --color-bg-surface:     #1E293B;
  --color-bg-subtle:      #152033;
  --color-bg-elevated:    #263348;

  --color-border:         #334155;
  --color-border-strong:  #475569;

  --color-text-muted:     #94A3B8;
  --color-text:           #B7C3D3;
  --color-text-strong:    #E2E8F0;
  --color-heading:        #F8FAFC;
  --color-em:             #fff;      /* bold emphasis pop — pure white in dark */

  --color-nav-bg:         rgba(30, 41, 59, 0.92);
  --color-nav-border:     rgba(51, 65, 85, 0.8);
  --color-subnav-bg:      rgba(51, 65, 85, 0.72);   /* glass pill — a step lighter than the page */
  --color-glass-tint:     rgba(15, 23, 42, 0.58);   /* docked-bar glass — contrast floor over imagery */
  --color-menu-bg:        var(--color-menu-bg-dark);   /* dropdown panels — near-black in dark */
  --color-curtain:        rgba(2, 6, 23, 0.45);     /* page dim behind open menus */

  --color-blue-subtle:    rgba(10, 108, 255, 0.12);
  --color-magenta-subtle: rgba(227, 97, 183, 0.12);
  --color-green-subtle:   rgba(9, 178, 9, 0.12);
  --color-hubspot-subtle: rgba(255, 71, 1, 0.12);
  --color-accent-subtle:  rgba(10, 108, 255, 0.12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Light re-scope — lets an ELEMENT opt back out of a dark ancestor scope.
   Used by the dropdown panels: the nav pill is locked dark, but the panels
   follow the page theme (JS mirrors it onto each panel as data-theme).
   KEEP IN SYNC with the :root light tokens above. */
[data-theme="light"] {
  --color-bg:             #FFFFFF;
  --color-bg-surface:     #F8FAFC;
  --color-bg-subtle:      #F1F5F9;
  --color-bg-elevated:    #FFFFFF;

  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  --color-text-muted:     #5B6B7F;
  --color-text:           #334155;
  --color-text-strong:    #1E293B;
  --color-heading:        #0F172A;

  --color-nav-bg:         rgba(241, 245, 249, 0.85);
  --color-nav-border:     rgba(226, 232, 240, 0.8);
  --color-subnav-bg:      rgba(226, 230, 237, 0.72);
  --color-glass-tint:     rgba(248, 250, 252, 0.6);
  --color-menu-bg:        #FFFFFF;
  --color-curtain:        rgba(241, 245, 249, 0.45);

  --color-blue-subtle:    rgba(10, 108, 255, 0.08);
  --color-magenta-subtle: rgba(227, 97, 183, 0.08);
  --color-green-subtle:   rgba(9, 178, 9, 0.08);
  --color-hubspot-subtle: rgba(255, 71, 1, 0.08);
  --color-accent-subtle:  var(--color-blue-subtle);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}


/* --------------------------------------------------------------------------
   Per-page accent themes
   Add ONE of these classes to <body> to set the page's primary accent.
   All --color-accent* tokens cascade, so page styles should reference
   var(--color-accent) / -hover / -subtle rather than a specific color.

   Assignments:
     page-accent--hubspot  → HubSpot service pages (HubSpot orange)
     page-accent--magenta  → Website services, Learning Center, Self-Service Tools
     page-accent--blue     → AI, Paid Advertising (blue is also the site default)
     page-accent--green    → reserved
   -------------------------------------------------------------------------- */
.page-accent--blue {
  --color-accent:        var(--color-blue);
  --color-accent-hover:  var(--color-blue-hover);
  --color-accent-subtle: var(--color-blue-subtle);
}
.page-accent--magenta {
  --color-accent:        var(--color-magenta);
  --color-accent-hover:  var(--color-magenta-hover);
  --color-accent-subtle: var(--color-magenta-subtle);
}
.page-accent--green {
  --color-accent:        var(--color-green);
  --color-accent-hover:  var(--color-green-hover);
  --color-accent-subtle: var(--color-green-subtle);
}
.page-accent--hubspot {
  --color-accent:        var(--color-hubspot);
  --color-accent-hover:  var(--color-hubspot-hover);
  --color-accent-subtle: var(--color-hubspot-subtle);
}

/* On accent-themed pages, the sub-nav CTA and in-page primary buttons follow
   the page accent. (The main nav "Let's Talk" stays brand magenta sitewide.)
   The mobile sticky bottom bar (.subnav-bottom-cta) holds a JS-made clone of
   the sub-nav CTA outside .subnav, so it's covered explicitly. */
[class*="page-accent--"] .subnav {
  --sub-cta-bg: var(--color-accent);
  /* breadcrumb emphasis: accent-tinted near-black instead of pure #000, so
     nav type carries the page tint like all other text */
  --sub-strong: var(--color-heading);
}
[data-theme="dark"] [class*="page-accent--"] .subnav {
  --sub-strong: var(--color-heading);   /* tinted near-white (beats the #fff dark rule) */
}
[class*="page-accent--"] .subnav .btn--nav-primary,
[class*="page-accent--"] .subnav-bottom-cta .btn--nav-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
[class*="page-accent--"] .subnav .btn--nav-primary:hover,
[class*="page-accent--"] .subnav-bottom-cta .btn--nav-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
[class*="page-accent--"] .btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
[class*="page-accent--"] .btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Footer brand-colored details also follow the page accent on accent pages
   (magenta "Free Tool" eyebrow, green NEW tag; unchanged on default pages). */
[class*="page-accent--"] .footer__cta-eyebrow { color: var(--color-accent); }
[class*="page-accent--"] .footer__tag {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* --------------------------------------------------------------------------
   Accent-tinted neutrals
   The site default is a cool slate palette — in OKLCH terms, grays at hue
   ~250-260 (blue) with chroma 0.003-0.04. On accent-themed pages every
   neutral keeps its ORIGINAL slate lightness and chroma but takes the page
   accent's hue: oklch(from accent L C h). Blue pages therefore reproduce
   the default palette almost exactly (blue's hue is 260); orange/magenta
   pages get the same subtle tint structure in their own hue. Browsers
   without relative color syntax simply keep the default cool grays.
   -------------------------------------------------------------------------- */
[class*="page-accent--"] {
  /* Surfaces (slate L values; chroma ~2x slate so the accent cast clearly
     reads — tune chroma (3rd value) here if pages feel too colorful) */
  --color-bg:             oklch(from var(--color-accent) 0.995 0.01   h);
  --color-bg-surface:     oklch(from var(--color-accent) 0.984 0.012  h);
  --color-bg-subtle:      oklch(from var(--color-accent) 0.968 0.016  h);
  --color-bg-elevated:    oklch(from var(--color-accent) 0.995 0.01   h);

  /* Borders */
  --color-border:         oklch(from var(--color-accent) 0.929 0.024  h);
  --color-border-strong:  oklch(from var(--color-accent) 0.869 0.034  h);

  /* Text */
  --color-text-muted:       oklch(from var(--color-accent) 0.522 0.05  h);
  --color-text-muted-faint: oklch(from var(--color-accent) 0.711 0.05  h);
  --color-text:             oklch(from var(--color-accent) 0.446 0.05  h);
  --color-text-strong:      oklch(from var(--color-accent) 0.279 0.045 h);
  --color-heading:          oklch(from var(--color-accent) 0.208 0.045 h);

  /* Nav / glass */
  --color-nav-bg:     oklch(from var(--color-accent) 0.968 0.014 h / 0.85);
  --color-nav-border: oklch(from var(--color-accent) 0.929 0.024 h / 0.8);
  /* Sub-nav pill: chroma raised so its composited tone matches the hero
     eyebrow pill (--color-accent-subtle over the page bg) instead of gray */
  /* L sits between the eyebrow pill (0.97 effective) and the old gray step:
     same colorfulness as the pill, but dark enough to separate from the
     accent hero glow behind it. Raise L toward 0.955 to match the pill more
     (risks blending); lower toward 0.92 for more separation. */
  --color-subnav-bg:  oklch(from var(--color-accent) 0.935 0.033 h / 0.75);
  --color-glass-tint: oklch(from var(--color-accent) 0.984 0.008 h / 0.6);
  --color-menu-bg:    oklch(from var(--color-accent) 0.995 0.01  h);
  --color-curtain:    oklch(from var(--color-accent) 0.968 0.014 h / 0.45);
}

/* Dark mode equivalents — must override every token above (the body class
   would otherwise beat the html-level dark theme and leave light values).
   L/C taken from the dark slate originals. */
[data-theme="dark"] [class*="page-accent--"] {
  /* Surfaces (slate L values; chroma ~1.4x dark slate) */
  --color-bg:             oklch(from var(--color-accent) 0.208 0.055 h);
  --color-bg-surface:     oklch(from var(--color-accent) 0.279 0.05  h);
  --color-bg-subtle:      oklch(from var(--color-accent) 0.243 0.055 h);
  --color-bg-elevated:    oklch(from var(--color-accent) 0.319 0.055 h);

  /* Borders */
  --color-border:         oklch(from var(--color-accent) 0.372 0.052 h);
  --color-border-strong:  oklch(from var(--color-accent) 0.446 0.05  h);

  /* Text */
  --color-text-muted:       oklch(from var(--color-accent) 0.711 0.045 h);
  --color-text-muted-faint: oklch(from var(--color-accent) 0.711 0.045 h);
  --color-text:             oklch(from var(--color-accent) 0.82  0.028 h);
  --color-text-strong:      oklch(from var(--color-accent) 0.929 0.018 h);
  --color-heading:          oklch(from var(--color-accent) 0.984 0.006 h);

  /* Nav / glass */
  --color-nav-bg:     oklch(from var(--color-accent) 0.279 0.05  h / 0.92);
  --color-nav-border: oklch(from var(--color-accent) 0.372 0.052 h / 0.8);
  --color-subnav-bg:  oklch(from var(--color-accent) 0.372 0.068 h / 0.72);
  --color-glass-tint: oklch(from var(--color-accent) 0.208 0.055 h / 0.58);
  --color-menu-bg:    oklch(from var(--color-accent) 0.173 0.045 h);
  --color-curtain:    oklch(from var(--color-accent) 0.11  0.04  h / 0.45);
}


/* --------------------------------------------------------------------------
   3. Reset / Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;          /* heavier body — Inter SemiBold sitewide */
  line-height: var(--line-height-base);
  letter-spacing: -0.01em;   /* slight negative tracking, Framer-style */
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--transition-slow), color var(--transition-slow);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* Bold emphasis in body copy — weight 740 (bold-plus; needs the variable
   Inter import above, legacy browsers snap to 700) AND a color pop to full
   black (white in dark mode) against the tinted gray paragraph around it.
   This is deliberately the only pure black/white text on the page; headings
   stay hue-tinted via --color-heading. Body copy was lightened a step
   (#475569) at the same time to widen the gap. June 2026, per Bob
   (raised from 640 — wanted real weight contrast, not just the color). */
p strong, p b,
li strong, li b {
  font-weight: 740;
  color: var(--color-em);
}
/* Components that keep a dark surface even in light mode: bolds pop to
   white there, matching their light-on-dark copy. */
.hero--video,
.cta-band {
  --color-em: #fff;
}

h1, h2, h3, h4, h5, h6,
.hero__headline,
.hero__eyebrow,
.section__title,
.section__eyebrow,
.card__title,
.step__title,
.stat-item__number,
.cta-band__title,
.methodology-box__title,
.nav__logo,
.footer__logo,
.type-row__sample {
  font-family: var(--font-display);
}

/* Page headlines: keep multi-line wraps even, never let one word dangle. */
h1 { text-wrap: balance; }

/* Headline length tiers — see the fluid headline tokens in :root.
   h1.* specificity (0,1,1) intentionally beats the page-scoped base
   classes (0,1,0) regardless of stylesheet order. */
h1.headline-short       { font-size: var(--headline-short); }
h1.headline-long        { font-size: var(--headline-long); }
h1.headline-split-short { font-size: var(--headline-split-short); }
h1.headline-split-long  { font-size: var(--headline-split-long); }


/* --------------------------------------------------------------------------
   4. Layout Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.section {
  padding-block: var(--space-24);
  /* Apple-style flat panels: cards use --color-panel instead of borders or
     shadows. On a white section the panel is a soft gray; on a gray (alt)
     section it inverts to white, so cards always read without strokes. */
  --color-panel: var(--color-bg-subtle);
}

.section--alt {
  background-color: var(--color-bg-subtle);
  --color-panel: var(--color-bg);
}

.section--sm {
  padding-block: var(--space-16);
}


/* --------------------------------------------------------------------------
   5. Navigation — Floating Pill
   -------------------------------------------------------------------------- */

/* Override nav-height token for the floating pill */
:root {
  --nav-height:  79px;
  --nav-top:     23px;
  --nav-offset:  calc(var(--nav-height) + var(--nav-top) + 20px);
}

/* The pill itself */
.nav {
  position: fixed;
  top: var(--nav-top);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: var(--max-width);          /* match the content grid */
  height: var(--nav-height);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: none;
  z-index: 1000;
  transition: border-color var(--transition-slow), transform var(--transition-base),
              height var(--transition-base);
}

/* Compact pill once the page scrolls: thinner bar + smaller logo. Full size
   returns at the top. Docked bars are excluded (they hide on scroll instead). */
.nav:not(.nav--docked).is-scrolled { height: 62px; }
.nav:not(.nav--docked).is-scrolled .nav__logo-img { width: 128px; }
/* Apple-style glass pill, matching the sub-nav: translucent fill one tonal
   step off the page over a modest 7px backdrop blur, no shadow — the fill
   contrast alone separates it from the page. The glass lives on ::before
   (NOT on .nav itself): backdrop-filter on .nav would make it the backdrop
   root for its descendants, and the dropdown panels inside it could no
   longer blur the page behind them. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-nav-pill-bg);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: -1;
  opacity: 1;
  transition: opacity var(--transition-slow), background-color var(--transition-slow);
}
/* Docked bars draw no pill — their glass is the body-level strip below. */
.nav--docked::before { display: none; }

/* Overlay nav — transparent variant for pages with a dark/video hero (opt-in:
   add .nav--overlay and data-theme="dark" to the page's <nav>; the homepage
   uses it). At the top of the page the pill disappears entirely and a dark
   scrim gradient keeps the links readable over video. Once scrolled, the
   standard pill returns (and JS hands the nav back to the visitor's theme)
   while the scrim fades out. */
/* At the top the pill glass (::before) is hidden entirely; the scrim lives
   on ::after since ::before now belongs to the pill glass. */
.nav--overlay:not(.is-scrolled)::before { opacity: 0; }
.nav--overlay::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--nav-top));
  width: 100vw;
  height: calc(var(--nav-top) + var(--nav-height) + 90px);
  background: linear-gradient(to bottom,
    rgba(2, 6, 23, 0.85) 0%,
    rgba(2, 6, 23, 0.55) 45%,
    rgba(2, 6, 23, 0.25) 70%,
    rgba(2, 6, 23, 0) 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity var(--transition-slow);
}
.nav--overlay.is-scrolled::after { opacity: 0; }

/* Overlay + docked (sub-nav pages, e.g. EC Live): the nav's own scrim would
   paint inside the nav's stacking context (z 1000), i.e. ON TOP of the z-999
   sub-nav pill. So on these pages the scrim is drawn by the sub-nav instead —
   its ::before (z -1) sits behind the pill but still above the page content. */
.nav--docked.nav--overlay::after { display: none; }
body:has(.nav--docked.nav--overlay) .subnav::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * (var(--nav-height) + 12px));   /* reach back up to the viewport top */
  width: 100vw;
  height: calc(var(--nav-height) + 12px + 70px + 170px);   /* nav + gap + sub-nav + long fade tail */
  /* Eased (roughly exponential) falloff — evenly-spaced stops put a visible
     band edge just below the pill; these taper to zero imperceptibly. */
  background: linear-gradient(to bottom,
    rgba(2, 6, 23, 0.85) 0%,
    rgba(2, 6, 23, 0.68) 25%,
    rgba(2, 6, 23, 0.52) 42%,
    rgba(2, 6, 23, 0.38) 56%,
    rgba(2, 6, 23, 0.26) 68%,
    rgba(2, 6, 23, 0.16) 78%,
    rgba(2, 6, 23, 0.08) 87%,
    rgba(2, 6, 23, 0.03) 94%,
    rgba(2, 6, 23, 0) 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity var(--transition-slow);
}
body:has(.nav--docked.nav--overlay.is-scrolled) .subnav::before { opacity: 0; }

/* Docked — on pages with a sub-nav, the main nav becomes a full-width top bar
   (square, edge-to-edge) and the sub-nav becomes the floating pill below it. */
.nav.nav--docked {
  /* Breathing room above the bar. The sub-nav slot is at nav-height + 12px,
     so the fill below the bar (::after) automatically spans the remaining
     12px − top gap; change this one value and everything stays covered. */
  --docked-top: 5px;
  top: var(--docked-top);
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-width: 0;
  box-shadow: none;
  /* The docked bar never carries its own surface — it always blends with the
     page behind it. The sub-nav pill below is the persistent wayfinding bar;
     the docked bar simply hides once you scroll. */
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav--docked .nav__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
  width: 100%;
}
/* The docked bar's frosted glass is a fixed body-level layer, stacked just
   BELOW both bars (z 998 < sub-nav 999 < nav 1000) so the pill paints
   crisply on top of it. It can't live on the nav (its stacking context sits
   above the sub-nav and would frost the pill) nor on the sub-nav's own
   pseudo-elements (the pill's backdrop-filter makes it a backdrop root, so
   a child's backdrop-filter can't sample the page behind it). The glass
   runs full-width from the viewport top to ~28px below the pill's top
   edge, where a mask dissolves it gradually — no hard bottom line, and no
   sharp sliver of content beside the pill's corner radius. Pure blur, no
   tint or saturate(): those shift the color of even flat backgrounds and
   would draw a visible edge; pure blur leaves flat sections untouched and
   only shows itself where content scrolls underneath. Hidden at the top of
   the page and while the docked bar is hidden. */
body:has(.nav--docked)::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-height) + 12px + 28px);
  /* A moderate theme tint restores a text-contrast floor when bright (dark
     mode) or dark (light mode) imagery scrolls underneath — pure blur alone
     can't guarantee legibility. The mask dissolves tint and blur together,
     so the tint adds no hard edge over flat sections. */
  background-color: var(--color-glass-tint);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
  pointer-events: none;
  z-index: 998;
  opacity: 0;
  transition: opacity var(--transition-slow);
}
body:has(.nav--docked.is-scrolled:not(.nav--hidden))::after { opacity: 1; }

/* Docked bar slides up out of view on scroll-down (the sub-nav stays).
   The extra 12px clears the bar plus its full fill (top offset + gap below),
   so no sliver stays visible. */
.nav.nav--docked.nav--hidden { transform: translateY(calc(-100% - 12px)); }

/* Conference pages lock the nav to dark and hide the light/dark toggle */
.nav--lock-dark .theme-toggle { display: none; }

/* --------------------------------------------------------------------------
   Secondary section sub-nav — a smaller pill under the main pill.
   Breadcrumb (left) + in-page anchor links (right, with scroll-spy).
   On scroll-down the main pill hides and this raises into the top slot.
   -------------------------------------------------------------------------- */
.subnav {
  /* Apple-style glass pill (modeled on the "Compare iPhone cameras" pill on
     apple.com: translucent fill one tonal step off the page — darker than the
     page in light mode, lighter in dark — over a modest 7px backdrop blur,
     fully rounded, and NO shadow; the fill contrast alone separates it). */
  --sub-bg: var(--color-subnav-bg);          /* darker than the page in light, lighter in dark */
  --sub-fg: var(--color-text-strong);
  --sub-fg-muted: var(--color-text-muted);
  --sub-strong: #000;                        /* breadcrumb root — pure black in light */
  --sub-active-bg: var(--color-heading);     /* active link = inverted: near-black bg in light */
  --sub-active-fg: var(--color-bg);          /* ...with white text in light */
  --sub-border: var(--color-border);
  --sub-cta-bg: var(--color-magenta);
  --sub-cta-fg: #fff;

  position: fixed;
  top: calc(var(--nav-height) + 12px);   /* floats just below the docked full-width bar */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: calc(var(--max-width) - 10px);   /* 10px narrower than the full container */
  height: 70px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-full);
  box-shadow: none;
  z-index: 999;                   /* under the main nav (1000) */
  transition: top var(--transition-base), filter var(--transition-base);
}
/* Pill glass lives on ::after, NOT on .subnav itself: the conference scrim
   gradient is drawn on .subnav::before at z -1, and negative-z pseudos paint
   ABOVE the element's own background — so a fill on .subnav would sit under
   the gradient. ::after paints after ::before in tree order, so the glass
   clearly sits on top of the scrim (and any other backdrop). */
.subnav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--sub-bg);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: -1;
  pointer-events: none;
}

/* Dark variant of the sub-nav (used when the main nav is light) */
/* When the page (and main nav) is dark, the sub-nav is dark too — just a tone
   lighter than the main bar, not inverted. Other colors come from the page tokens. */
[data-theme="dark"] .subnav {
  --sub-strong: #fff;                  /* breadcrumb root — pure white in dark */
  /* --sub-active-bg/-fg invert automatically: white bg + near-black text in dark */
}

/* When the main bar hides on scroll-down, the sub-nav pill rises to the top */
.subnav.is-raised { top: 12px; }

.subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  height: 100%;
  padding: 0 9px 0 25px;   /* breadcrumb indented further right (left pad); 9px right pad matches the CTA's ~9px vertical gap so the button sits balanced in the pill's corner */
}

.subnav__crumb {
  display: flex;
  flex-direction: column;       /* stack: parent trail on top, current page below */
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  margin-left: 3px;   /* nudge the whole breadcrumb section 3px right */
  white-space: nowrap;
  flex-shrink: 0;
}
.subnav__crumb a { color: var(--sub-fg-muted); text-decoration: none; transition: color var(--transition-fast); }
.subnav__crumb a:hover { color: var(--sub-fg); }
.subnav__crumb-trail { display: inline-flex; align-items: center; gap: 6px; }   /* keep label + chevron on one line */
.subnav__crumb a.subnav__crumb-root { color: var(--sub-fg-muted); font-weight: 500; font-size: 13px; }   /* parent label, 2px smaller than the menu items */
.subnav__crumb-parent { color: var(--sub-fg-muted); font-weight: 600; }   /* lighter parent-category label preceding the bold section root */

/* On conference pages, "The Conference" swaps to the EC Live logo once the
   sub-nav raises (i.e., when the main nav has hidden on scroll-down). */
.subnav__crumb-logo { display: none; height: 51px; width: auto; vertical-align: middle; transform: translateY(4px); }   /* 70% larger than 30px, nudged down 4px */
.subnav--conf.is-raised .subnav__crumb-label { display: none; }
.subnav--conf.is-raised .subnav__crumb-logo { display: inline-block; transform: translateY(1px); height: 56px; }   /* nudged down 1px */
/* Once the logo swaps in, drop the stacked layout and put the logo + event
   title back on a single row (the tall logo would overflow the two-line stack). */
.subnav--conf.is-raised .subnav__crumb { flex-direction: row; align-items: center; gap: 6px; }
.subnav__crumb svg { width: 14px; height: 14px; color: var(--sub-fg-muted); flex-shrink: 0; }
.subnav__crumb-sep { color: var(--sub-fg-muted); opacity: 0.55; font-weight: 400; font-size: 13px; }   /* chevron after the parent label */
.subnav__crumb-current { color: var(--sub-strong); font-weight: 800; font-size: 18px; line-height: 1.1; }   /* current page: bold emphasis, dialed back so it doesn't rival the main nav */

.subnav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;   /* keep links + CTA grouped on the right (CTA is a sibling) */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.subnav__links::-webkit-scrollbar { display: none; }

.subnav__link {
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sub-fg-muted);
  text-decoration: none;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.subnav__link:hover { color: var(--sub-fg); }
.subnav__link.is-active { color: var(--sub-active-fg); background-color: var(--sub-active-bg); }

/* Register CTA button at the end of the links — colored to the sub-nav's own theme */
.subnav__cta { margin-left: var(--space-3); flex-shrink: 0; }
.subnav__cta.btn--nav-primary { background-color: var(--sub-cta-bg); color: var(--sub-cta-fg); padding-block: 14px; }   /* 10px taller than the base nav button (9px → 14px) */
.subnav__cta-arrow { margin-left: 7px; font-weight: 600; }   /* trailing arrow on the CTA */

/* Sections that the sub-nav jumps to clear the sticky pills */
.subnav-section { scroll-margin-top: 120px; }

/* --------------------------------------------------------------------------
   Sub-nav responsiveness
   ≤900px (tablet): the floating pill becomes a full-width squared bar flush
     under the main nav. Only the links scroll; the breadcrumb stays fixed on
     the left and the CTA pins to the right so it never hides in the scroll.
   ≤768px (mobile): drop the breadcrumb/title (links-only top bar); the CTA
     leaves the row and moves to a fixed bottom bar revealed after the hero.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .subnav {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    top: var(--nav-height);          /* flush under the docked main bar */
    border-radius: 0;
    box-shadow: none;
  }
  .subnav.is-raised { top: 0; }
  .subnav__inner {
    max-width: var(--max-width);     /* content tracks the page container */
    margin-inline: auto;
    padding: 0 var(--space-6);
  }
  /* The main nav is a hamburger by now, so drop the breadcrumb and give the
     links the full width of the bar (links left, CTA right). */
  .subnav__crumb { display: none; }
  .subnav__links { flex: 1 1 auto; min-width: 0; margin-left: 0; }
  .subnav__cta { flex-shrink: 0; margin-left: var(--space-3); }
}

@media (max-width: 809px) {
  .subnav__cta { display: none; }     /* CTA moves to the fixed bottom bar */
  .subnav__inner { padding: 0 var(--space-4); }
}

/* Mobile sticky bottom CTA bar — JS clones the sub-nav CTA into this and
   reveals it once the hero has scrolled out of view. */
.subnav-bottom-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: none;
  padding: 10px var(--space-4);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(110%);       /* parked off-screen until revealed */
  transition: transform var(--transition-base);
}
.subnav-bottom-cta.is-visible { transform: translateY(0); }
/* Descendant selector (higher specificity) so the button overrides the global
   `@media (max-width: 809px) .btn--nav-primary { display:none }` rule. */
.subnav-bottom-cta .subnav-bottom-cta__btn {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-block: 15px;
  font-size: 16px;
}
/* Hide the bottom bar while the mobile menu is open */
body:has(.nav__mobile.is-open) .subnav-bottom-cta { transform: translateY(110%); }

@media (max-width: 809px) {
  .subnav-bottom-cta { display: block; }
  body.cta-bar-visible { padding-bottom: 80px; }   /* clear content/footer when shown */
}

@media (prefers-reduced-motion: reduce) {
  .nav.nav--hidden { transform: translateX(-50%); }   /* don't animate the pill away */
}

/* Inner flex row */
.nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-5);
  position: relative;
}

/* Logo */
.nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  transform: translateX(10px);   /* nudge logo right 10px (visual, no reflow) */
}

.nav__logo-img {
  /* Size by a fixed WIDTH (not height): the light + dark SVGs share the same
     viewBox width but differ in height, so width-locking keeps the logo the
     same size and stops the nav from shifting when the theme toggles. */
  width: 155px;   /* was 138px */
  height: auto;
  display: block;
  transition: transform var(--transition-fast), width var(--transition-base);
}

.nav__logo:hover .nav__logo-img {
  transform: scale(1.06);
}

.nav__logo-img--light { display: block; }
.nav__logo-img--dark  { display: none; }

[data-theme="dark"] .nav__logo-img--light { display: none; }
[data-theme="dark"] .nav__logo-img--dark  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav__logo-img--light { display: none; }
  :root:not([data-theme="light"]) .nav__logo-img--dark  { display: block; }
}

/* Menu — flows left, just after the logo (sits between logo and CTAs) */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  white-space: nowrap;
  margin-left: calc(var(--space-5) + 45px);   /* logo gap + 45px right nudge (was 20px, +25px breathing room after logo) */
}

/* Trigger buttons */
.nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-muted);          /* subtle by default; active item gets full contrast */
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav__trigger:hover,
.nav__trigger[aria-expanded="true"] {
  color: var(--color-heading);             /* darker in light mode, lighter in dark mode */
  background-color: transparent;
}

/* "You are here" — full-contrast label, no background; the rest stay muted */
.nav__trigger.is-current {
  color: var(--color-heading);
}

.nav__trigger svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Right cluster */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--color-heading);
  background-color: var(--color-bg-subtle);
}

.theme-toggle svg { width: 16px; height: 16px; }

.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }

[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }

/* Nav CTA buttons */
.btn--nav-ghost {
  display: inline-flex;
  align-items: center;
  padding: 9px var(--space-4);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid var(--color-text-muted);   /* match the inactive nav items */
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: none;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn--nav-ghost:hover {
  color: var(--color-heading);
  border-color: var(--color-heading);
  background-color: transparent;
}

/* When the sub-nav has its own CTA, the nav's own CTAs (Free AI Diagnostic +
   Let's Talk) drop to plain muted text links so they don't compete with it.
   The body:has(.subnav__cta) variants apply this on first paint — before the
   JS adds .nav--demote-primary — so the CTAs never flash as full buttons. */
body:has(.subnav__cta) .nav__actions .btn--nav-ghost,
body:has(.subnav__cta) .nav__actions .btn--nav-primary,
.nav--demote-primary .nav__actions .btn--nav-ghost,
.nav--demote-primary .nav__actions .btn--nav-primary {
  background-color: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: 7px var(--space-3);
}
body:has(.subnav__cta) .nav__actions .btn--nav-ghost:hover,
body:has(.subnav__cta) .nav__actions .btn--nav-primary:hover,
.nav--demote-primary .nav__actions .btn--nav-ghost:hover,
.nav--demote-primary .nav__actions .btn--nav-primary:hover {
  color: var(--color-heading);
  background-color: transparent;
}
body:has(.subnav__cta) .nav__actions .btn--nav-primary::after,
.nav--demote-primary .nav__actions .btn--nav-primary::after { display: none; }   /* no shine */

.btn--nav-primary {
  display: inline-flex;
  align-items: center;
  padding: 9px var(--space-5);
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-magenta);   /* primary CTA = brand magenta */
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.btn--nav-primary:hover { background-color: var(--color-magenta-hover); }

/* Subtle gray shine that sweeps across, with a long pause between passes */
.btn--nav-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(203, 213, 225, 0.18), transparent);
  transform: skewX(-20deg);
  animation: navShine 6.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes navShine {
  0%, 72%  { left: -130%; }
  100%     { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--nav-primary::after { animation: none; }
}

/* Mobile hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-md);
}

.nav__hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background-color: var(--color-heading);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* --------------------------------------------------------------------------
   5b. Dropdowns
   -------------------------------------------------------------------------- */

.nav__item { position: relative; }

/* Base dropdown */
.nav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 28px);   /* lowered 3px (was 25px) */
  left: 0;
  /* Solid menu surface — white in light mode, near-black in dark (and the
     conference panel is locked near-black via its data-theme="dark"). No
     glass on the panel itself; the open-menu page curtain (body::before)
     handles calming the content behind. */
  background-color: var(--color-menu-bg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1001;
  min-width: 330px;
  padding: var(--space-3);
  animation: navDropIn 0.18s ease;
  /* Reset the nowrap inherited from .nav__menu so dropdown copy can wrap */
  white-space: normal;
}

.nav__dropdown.is-open  { display: block; }
.nav__dropdown--right   { left: auto; right: 0; }

/* Parent overview link — header at the top of a dropdown that goes to the
   section's landing page (Learn, How We Help, Our Team). Uppercase label with
   an arrow and a divider beneath, matching the section eyebrow style. */
.dd-parent {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  /* Horizontal spacing is margin (not padding) so the divider beneath insets to
     align with the item text, matching the in-column separators. */
  padding: 6px 0 var(--space-3);
  margin: 0 var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}
.dd-parent:hover { color: var(--color-heading); }

/* Bottom CTA row inside a dropdown (Learn: Subscribe to Our Content). Inset to
   the same edges as the featured tile / divider lines. */
.dd-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-2) var(--space-3) var(--space-1);
  padding: 10px var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-heading);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.dd-cta:hover { background: var(--color-bg-surface); }
.dd-cta .dd-icon { font-size: 17px; }
.dd-parent__arrow { transition: transform var(--transition-fast); }
.dd-parent:hover .dd-parent__arrow { transform: translateX(3px); }

/* In the 3-col mega-menu (padding:0 grid) the header spans every column and
   sits on its own row above them. */
.nav__dropdown--3col .dd-parent { grid-column: 1 / -1; padding-top: 0; }
.conf-logo-link { display: inline-block; line-height: 0; text-decoration: none; transition: opacity var(--transition-fast); }
.conf-logo-link:hover { opacity: 0.85; }

/* Two-column mega */
.nav__dropdown--wide {
  display: none;
  min-width: 500px;
}
.nav__dropdown--wide.is-open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}

/* Learn — featured card at top, 2-col grid below */
.nav__dropdown--learn {
  display: none;
  min-width: 720px;     /* widened to fit the larger dropdown text on one line */
  padding: var(--space-3);
  left: -170px;         /* shift the whole dropdown left */
}
.nav__dropdown--learn.is-open { display: block; }

.nav__dropdown--learn .dd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-1);
}

.nav__dropdown--learn .dd-col {
  padding: var(--space-1) var(--space-2);
}

.nav__dropdown--learn .dd-col + .dd-col {
  border-left: 1px solid var(--color-border);
}

/* Three-column mega (How We Help): coaching | services A | services B */
.nav__dropdown--3col {
  display: none;
  width: 1082px;         /* 1050 content + 32 inner padding, so service names stay on one line */
  min-width: 0;
  max-width: 1082px;
  left: -210px;          /* shift the whole mega-menu left so it isn't pushed right */
}
.nav__dropdown--3col.is-open {
  display: grid;
  /* col 1 fits the coaching title on one line; service columns fit names on one line */
  grid-template-columns: 380px minmax(0, 1fr) minmax(0, 1fr);
  /* Balanced inner padding (matches the other dropdowns) so the header is
     indented, the divider sits inset rather than full-bleed, and the bottom
     row has breathing room. Extra at the bottom for visual balance. */
  padding: var(--space-4) var(--space-4) var(--space-5);
}
/* Divider only between coaching and the services block — not between the two service columns */
.nav__dropdown--3col .dd-col:last-child { border-left: none; }

/* Coaching column: the hover backgrounds align their left edge with the divider
   lines, and the icons sit inset within them — mirroring the right column, where
   the section label sits on the line and the item icons are inset from it. The
   primary lifts via a negative top margin so its title stays level with the
   Additional Services label while its hover grows upward for balance. */
.nav__dropdown--3col .dd-col:has(.dd-primary) .dd-primary {
  padding: var(--space-3);
  margin-top: calc(-1 * var(--space-3));
}

/* Narrow-desktop safety: on viewports just above the 1199px tablet breakpoint
   the 1082px mega-menu could brush the screen edge, so cap it to the viewport.
   (The old 901–1180px fixed-centering rule is gone — the nav collapses to the
   hamburger at 1199px now, so dropdowns never render below 1200px.) */
.nav__dropdown--3col { max-width: min(1082px, calc(100vw - 24px)); }

/* Dropdown icon */
/* Our Team dropdown — wide enough that each item's sub copy stays on one line
   (e.g. "Where we came from and what we stand for"). */
#dd-team { min-width: 400px; }

.dd-icon {
  font-size: 17px;
  width: 20px;
  text-align: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
  transition: color var(--transition-fast);
}

.dd-item:hover .dd-icon,
.dd-svc:hover .dd-icon { color: var(--color-text-strong); }

/* SVG variants of the dropdown icons (EC circle mark, HubSpot sprocket) —
   sized to match the Tabler font icons they sit alongside. */
svg.dd-icon { width: 20px; height: 17px; }
.nav__dropdown svg.dd-icon { height: 20px; }
svg.dd-primary__icon { width: 22px; height: 20px; flex-shrink: 0; }
.nav__dropdown svg.dd-primary__icon { height: 23px; }

/* Conference dropdown */
.nav__dropdown--conference {
  display: none;
  min-width: 730px;
  padding: 0;
  overflow: hidden;
  right: -250px;           /* shift the whole dropdown well to the right */
}
.nav__dropdown--conference.is-open { display: flex; }

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Dropdown item cascade — Apple-style waterfall. While the panel itself does
   its quick navDropIn, the items inside fade in and settle top-to-bottom,
   each column cascading in parallel. Pure CSS: delays restart every time
   .is-open is applied.
   -------------------------------------------------------------------------- */
@keyframes ddCascade {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav__dropdown.is-open :is(.dd-parent, .dd-featured, .dd-label, .dd-primary,
  .dd-item, .dd-svc, .dd-cta, .dd-sep, .conf-image, .conf-logo-link, .conf-dates-label,
  .conf-date-row, .conf-link) {
  animation: ddCascade 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Top-to-bottom stagger: direct children of each column (and of flat menus
   like Our Team). Wrappers that aren't in the animated set above simply
   ignore their delay. */
.nav__dropdown.is-open > :nth-child(1),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(1) { animation-delay: 0.08s; }
.nav__dropdown.is-open > :nth-child(2),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(2) { animation-delay: 0.125s; }
.nav__dropdown.is-open > :nth-child(3),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(3) { animation-delay: 0.17s; }
.nav__dropdown.is-open > :nth-child(4),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(4) { animation-delay: 0.215s; }
.nav__dropdown.is-open > :nth-child(5),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(5) { animation-delay: 0.26s; }
.nav__dropdown.is-open > :nth-child(6),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(6) { animation-delay: 0.305s; }
.nav__dropdown.is-open > :nth-child(7),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(7) { animation-delay: 0.35s; }
.nav__dropdown.is-open > :nth-child(8),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(8) { animation-delay: 0.395s; }
.nav__dropdown.is-open > :nth-child(9),
.nav__dropdown.is-open :is(.dd-col, .conf-links) > :nth-child(9) { animation-delay: 0.44s; }

/* The section header leads, then the featured tile / conference photo. */
.nav__dropdown.is-open .dd-parent   { animation-delay: 0s; }
.nav__dropdown.is-open .dd-featured { animation-delay: 0.05s; }
.nav__dropdown.is-open .conf-image  { animation-delay: 0.05s; }

@media (prefers-reduced-motion: reduce) {
  .nav__dropdown.is-open :is(.dd-parent, .dd-featured, .dd-label, .dd-primary,
    .dd-item, .dd-svc, .dd-cta, .dd-sep, .conf-image, .conf-logo-link, .conf-dates-label,
    .conf-date-row, .conf-link) {
    animation: none;
  }
}

/* Open-menu curtain — the Apple pattern: while any dropdown is open, the
   whole page behind the nav is heavily blurred and gently dimmed, so the
   menu reads against calm frosted content instead of competing with it.
   Sits below all nav chrome (997 < glass strip 998 < sub-nav 999 < nav
   1000) and above the page. Always in the DOM so opacity can transition. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 997;
  background-color: var(--color-curtain);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}
body:has(.nav__dropdown.is-open)::before { opacity: 1; }

/* The sub-nav pill sits above the curtain (it must stay above the body-level
   glass strip, and the curtain must stay below the main nav). So while a
   menu is open the pill blurs itself to match the curtained page behind it. */
body:has(.nav__dropdown.is-open) .subnav { filter: blur(10px); }

/* Dropdown column */
.dd-col {
  padding: var(--space-3);
}

.dd-col + .dd-col {
  border-left: 1px solid var(--color-border);
}

/* Label */
.dd-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
  display: block;
}

/* Separator */
.dd-sep {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-3) 0;
}

/* Standard item */
.dd-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast);
}

.dd-item:hover { background-color: var(--color-bg-subtle); }

.dd-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.dd-item__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Featured (diagnostic) */
.dd-featured {
  display: block;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-blue-subtle);
  border: none;
  border-radius: var(--radius-md);
  /* Inset to align with the header divider above and the columns below. */
  margin: 0 var(--space-3) var(--space-3);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.dd-featured:hover { background-color: rgba(10, 108, 255, 0.16); }

.dd-featured__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.dd-featured__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.dd-featured__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Primary coaching item */
.dd-primary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.dd-primary:hover { background-color: var(--color-bg-subtle); }

.dd-primary__icon {
  font-size: 20px;
  width: 22px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.dd-primary:hover .dd-primary__icon { color: var(--color-heading); }

.dd-primary__body { min-width: 0; }

.dd-primary__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
  line-height: 1.2;
}

.dd-primary__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Pricing block */
.dd-pricing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.dd-pricing:hover {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-text-muted);
}

.dd-pricing__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.dd-pricing__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 1px;
}

.dd-pricing__arrow {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Service item (compact) */
.dd-svc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.dd-svc:hover { background-color: var(--color-bg-subtle); }

.dd-svc__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.dd-badge-new {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background-color: var(--color-accent-subtle);   /* follows page accent; blue by default */
  color: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  margin-left: var(--space-2);
}

/* External link icon */
.dd-ext {
  width: 12px;
  height: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Enlarged dropdown text (~15-20% larger than the compact base).
   Scoped under .nav__dropdown so ONLY the desktop mega-menus are affected —
   the global type scale, conference pages, and the mobile nav are untouched.
   Higher specificity (0,2,0) than the base rules means this always wins.
   -------------------------------------------------------------------------- */
.nav__dropdown .dd-label,
.nav__dropdown .dd-featured__eyebrow,
.nav__dropdown .dd-badge-new,
.nav__dropdown .conf-scene__tag,
.nav__dropdown .conf-dates-label        { font-size: 12px; }   /* was 10px */

.nav__dropdown .dd-item__sub,
.nav__dropdown .dd-featured__sub,
.nav__dropdown .dd-primary__sub,
.nav__dropdown .dd-pricing__sub,
.nav__dropdown .conf-date-when          { font-size: 13px; }   /* was 11px */

.nav__dropdown .conf-date-reg           { font-size: 14px; }   /* enlarged CTA */

.nav__dropdown .dd-item__title,
.nav__dropdown .dd-featured__title,
.nav__dropdown .dd-pricing__label,
.nav__dropdown .dd-svc__name,
.nav__dropdown .conf-scene__text,
.nav__dropdown .conf-heading,
.nav__dropdown .conf-date-city,
.nav__dropdown .conf-link__text         { font-size: 15px; }   /* was 13px */

.nav__dropdown .dd-primary__title       { font-size: 19px; }   /* was 16px */

.nav__dropdown .dd-icon                 { font-size: 20px; }   /* was 17px */
.nav__dropdown .dd-primary__icon        { font-size: 23px; }   /* was 20px */

/* --------------------------------------------------------------------------
   5c. Conference Dropdown
   -------------------------------------------------------------------------- */

.conf-image {
  width: 320px;
  flex-shrink: 0;
  position: relative;
  min-height: 320px;          /* roughly square against the links column */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
}

.conf-scene {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.conf-scene.is-active { opacity: 1; }

/* Slideshow progress indicator — segments fill as each photo advances */
.conf-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 5px;
  padding: var(--space-3) var(--space-4);
  z-index: 1;
}

.conf-progress__bar {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.conf-progress__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background-color: #fff;
}

/* Active segment fills over the cycle duration; completed segments stay full */
.conf-progress__bar.is-active i { width: 100%; transition: width 3s linear; }
.conf-progress__bar.is-done i   { width: 100%; }

.conf-scene__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-2);
}

.conf-scene__text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.conf-dots {
  display: flex;
  gap: 4px;
  margin-top: var(--space-3);
}

.conf-dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.3);
  transition: background-color var(--transition-base), width var(--transition-base);
}

.conf-dot.is-active {
  background-color: #fff;
  width: 10px;
}

.conf-links {
  flex: 1;
  padding: var(--space-4);
}

.conf-heading {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

/* EC Live logo (replaces the text heading). Transparent PNG with black
   wordmark + neon accents — sits directly on the white panel. */
.conf-logo {
  display: block;
  height: 77px;          /* 175% of the original 44px */
  width: auto;
  max-width: 100%;
  margin-bottom: var(--space-4);
}

.conf-dates-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.conf-date-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  margin-bottom: var(--space-1);
  transition: background-color var(--transition-fast);
}

.conf-date-row:hover { background-color: var(--color-bg-subtle); }

.conf-date-info { flex: 1; min-width: 0; }

.conf-date-city {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
}

.conf-date-when {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 1px;
}

.conf-date-reg {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.conf-date-row:hover .conf-date-reg {
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}

.conf-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.conf-link:hover { background-color: var(--color-bg-subtle); }

.conf-link__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-heading);
}

.conf-link svg {
  width: 15px;
  height: 15px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5d. Mobile Nav
   -------------------------------------------------------------------------- */

.nav__mobile {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  z-index: 999;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - var(--nav-height) - var(--nav-top) - 24px);
}

.nav__mobile.is-open { display: block; }

/* Drill-down panels: only the active one shows */
.nav__mobile-panel { display: none; }
.nav__mobile-panel.is-active { display: block; }
.nav__mobile-panel--sub,
.nav__mobile-panel[data-panel]:not([data-panel="main"]).is-active {
  animation: mobilePanelInRight 0.22s ease;
}
.nav__mobile-panel[data-panel="main"].is-active {
  animation: mobilePanelInLeft 0.22s ease;
}

@keyframes mobilePanelInRight {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mobilePanelInLeft {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Large top-level group buttons with chevron */
.nav__mobile-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
}
.nav__mobile-group:hover { background-color: var(--color-bg-subtle); }
.nav__mobile-chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); }

/* Back button + sub-panel heading */
.nav__mobile-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: var(--space-2);
}
.nav__mobile-back:hover { color: var(--color-heading); }
.nav__mobile-back .nav__mobile-chev { width: 16px; height: 16px; color: currentColor; }

.nav__mobile-subtitle {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 var(--space-3) var(--space-1);
  margin-bottom: var(--space-1);
}

/* Featured diagnostic card at the top of the main panel */
.nav__mobile-featured {
  display: block;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  text-decoration: none;
}
.nav__mobile-featured__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.nav__mobile-featured__title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-heading);
}

.nav__mobile-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.nav__mobile-link:hover { background-color: var(--color-bg-subtle); }

.nav__mobile-sep {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-3) 0;
}

.nav__mobile-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.nav__mobile-ctas .btn--nav-ghost,
.nav__mobile-ctas .btn--nav-primary {
  display: inline-flex;          /* override the responsive display:none on the bar buttons */
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
}

/* Cloned desktop dropdown content, re-flowed to a single vertical column on mobile */
.nav__mobile-dd,
.nav__mobile-dd .dd-cols { display: block; }
.nav__mobile-dd .dd-col { padding: 0; }
.nav__mobile-dd .dd-col + .dd-col {
  border-left: none;
  margin-top: var(--space-2);
}
.nav__mobile-dd .dd-label { margin-top: var(--space-2); }
.nav__mobile-dd .dd-label[style*="hidden"] { display: none; }   /* collapse the hidden "Continued" spacer label */

/* Conference: image on top (full width), links below */
.nav__mobile-dd .conf-image {
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.nav__mobile-dd .conf-links {
  border-left: none;
  padding: 0;
}

@media (max-width: 1199px) {
  .nav__menu           { display: none; }
  .btn--nav-ghost      { display: none; }
  .nav__hamburger      { display: flex; }
}

@media (max-width: 809px) {
  .btn--nav-primary    { display: none; }
}


/* --------------------------------------------------------------------------
   6. Footer — Mega Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background-color: var(--color-bg-surface);
  transition: background-color var(--transition-slow);
}

/* Gradient hairline removed — element kept in markup, hidden here */
.footer__accent { display: none; }

.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 2.6fr;
  gap: var(--space-16);
  padding-block: var(--space-16) var(--space-12);
  align-items: start;
}

/* ----- Brand block ----- */
.footer__brand { max-width: 360px; }

.footer__logo { display: inline-block; line-height: 0; }
.footer__logo-img { height: 38px; width: auto; }
.footer__logo-img--dark { display: none; }
[data-theme="dark"] .footer__logo-img--light { display: none; }
[data-theme="dark"] .footer__logo-img--dark  { display: inline-block; }

.footer__mission {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Newsletter */
.footer__news { margin-top: var(--space-6); }
.footer__news-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-strong);
  margin-bottom: var(--space-3);
}
.footer__news-row {
  display: flex;
  gap: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 4px 4px var(--space-5);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.footer__news-row:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.footer__news-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.footer__news-input::placeholder { color: var(--color-text-muted-faint); }
.footer__news-input:focus { outline: none; }
.footer__news-btn {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);   /* follows page accent; blue by default */
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  transition: background-color var(--transition-fast);
}
.footer__news-btn:hover { background: var(--color-accent-hover); }
.footer__news-fine {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Social */
.footer__social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: #000;
  border: none;
  color: #fff;
  font-size: 25px;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.footer__social-btn:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
/* Dark mode: invert so circles stay visible */
[data-theme="dark"] .footer__social-btn {
  background: #fff;
  color: #000;
}
[data-theme="dark"] .footer__social-btn:hover {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 255, 255, 0.15);
}

/* ----- Link columns ----- */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.footer__col-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
}
.footer__list { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.footer__link:hover { color: var(--color-accent); }
.footer__tag {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-green);
  background: var(--color-green-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  vertical-align: middle;
}

/* Mini CTA inside last column */
.footer__cta {
  display: block;
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.footer__cta:hover {
  border-color: var(--color-accent);
}
.footer__cta-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-magenta);
  margin-bottom: var(--space-1);
}
.footer__cta-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.35;
}

/* ----- Legal bar ----- */
.footer__legal {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: background-color var(--transition-slow), border-color var(--transition-slow);
}
.footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.footer__legal-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.footer__legal-link:hover { color: var(--color-text-strong); }
.footer__region {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted-faint);
}
.footer__inline-link { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer__inline-link:hover { color: var(--color-accent); }

/* ----- Responsive ----- */
@media (max-width: 1199px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-12); }
  .footer__brand { max-width: none; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
}
@media (max-width: 809px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__legal-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .footer__legal-links { gap: var(--space-4); }
}


/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: opacity var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}

/* Sizes */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn--lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-base);
}

/* Filled — dark/charcoal (primary) */
.btn--primary {
  background-color: var(--color-magenta);   /* primary CTA = brand magenta */
  color: #fff;
  border-color: var(--color-magenta);
}
.btn--primary:hover { background-color: var(--color-magenta-hover); border-color: var(--color-magenta-hover); }

/* Filled — Blue */
.btn--blue {
  background-color: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
}
.btn--blue:hover { background-color: var(--color-blue-hover); border-color: var(--color-blue-hover); }

/* Filled — Magenta */
.btn--magenta {
  background-color: var(--color-magenta);
  color: #fff;
  border-color: var(--color-magenta);
}
.btn--magenta:hover { background-color: var(--color-magenta-hover); border-color: var(--color-magenta-hover); }

/* Filled — Green */
.btn--green {
  background-color: var(--color-green);
  color: #fff;
  border-color: var(--color-green);
}
.btn--green:hover { background-color: var(--color-green-hover); border-color: var(--color-green-hover); }

/* Filled — HubSpot */
.btn--hubspot {
  background-color: var(--color-hubspot);
  color: #fff;
  border-color: var(--color-hubspot);
}
.btn--hubspot:hover { background-color: var(--color-hubspot-hover); border-color: var(--color-hubspot-hover); }

/* Shared shine sweep on all filled CTA buttons (matches the nav primary button) */
.btn--primary,
.btn--blue,
.btn--magenta,
.btn--green,
.btn--hubspot {
  position: relative;
  overflow: hidden;
}

.btn--primary::after,
.btn--blue::after,
.btn--magenta::after,
.btn--green::after,
.btn--hubspot::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(203, 213, 225, 0.18), transparent);
  transform: skewX(-20deg);
  animation: navShine 6.5s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after,
  .btn--blue::after,
  .btn--magenta::after,
  .btn--green::after,
  .btn--hubspot::after { animation: none; }
}

/* Ghost — THE standard secondary button, site-wide.
   Matches the nav's "Free AI Diagnostic" ghost style: transparent fill,
   1px muted outline, muted text; outline + text darken to heading on hover.
   The 1px line is drawn with an inset box-shadow (the .btn base keeps its
   2px transparent border) so ghost buttons stay exactly the same height as
   filled buttons beside them. */
.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-text-muted);
  color: var(--color-text-muted);
}
.btn--ghost:hover {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-heading);
  color: var(--color-heading);
}

/* Ghost on forced-dark surfaces (video hero, CTA band in light mode):
   same recipe, white at reduced opacity. */
.btn--ghost-light,
.hero--video .btn--ghost,
.cta-band .btn--ghost {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}
.btn--ghost-light:hover,
.hero--video .btn--ghost:hover,
.cta-band .btn--ghost:hover {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px #fff;
  color: #fff;
}

/* In dark mode the CTA band is a normal surface again — back to tokens */
[data-theme="dark"] .cta-band .btn--ghost {
  box-shadow: inset 0 0 0 1px var(--color-text-muted);
  color: var(--color-text-muted);
}
[data-theme="dark"] .cta-band .btn--ghost:hover {
  box-shadow: inset 0 0 0 1px var(--color-heading);
  color: var(--color-heading);
}

/* .btn--gradient-outline removed June 2026 — on dark surfaces its transparent
   fill let the gradient border-box layer read as a full gradient button.
   The secondary button is now .btn--ghost (above), matching the nav ghost. */


/* --------------------------------------------------------------------------
   8. Gradient Utilities
   -------------------------------------------------------------------------- */

/* NOTE: Gradients are reserved for BORDERS and LINES only — borders, outlines,
   dividers, underlines, progress bars (like the EC logo). Never as text fills
   or element/button fills. The .gradient-text and .gradient-bg utilities were
   removed June 2026. */

/* Gradient border on a container (uses ::before pseudo-element) */
.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-accent-135);
  z-index: -1;
}

/* Gradient progress bar */
.progress {
  width: 100%;
  height: 6px;
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  background-size: 200% 100%;
  transition: width 0.6s ease;
}

.progress__fill--animated {
  animation: gradientShift 2.5s linear infinite;
}

/* Gradient divider line */
.gradient-divider {
  height: 2px;
  background: var(--gradient-accent);
  border: none;
  border-radius: var(--radius-full);
}

/* Gradient glow on a card outline */
.card--gradient-glow {
  box-shadow: 0 0 0 1.5px transparent;
  transition: box-shadow var(--transition-base);
}
.card--gradient-glow:hover {
  box-shadow:
    0 0 0 1.5px rgba(227,97,183,0.4),
    0 4px 24px rgba(10,108,255,0.12);
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* --------------------------------------------------------------------------
   9. Cards & Surfaces
   -------------------------------------------------------------------------- */
.card {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-panel, var(--color-bg-subtle));
  transition: background-color var(--transition-slow), border-color var(--transition-slow),
              box-shadow var(--transition-base);
}

.card--elevated {
  border-color: transparent;
}

.card--elevated:hover {
  transform: translateY(-2px);
}

.card__eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  line-height: var(--leading-title);
}

.card__body {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-body);
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }


/* --------------------------------------------------------------------------
   10. Color Swatches (Style Guide component)
   -------------------------------------------------------------------------- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.swatch__color {
  height: 72px;
  width: 100%;
}

.swatch__info {
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg-surface);
}

.swatch__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-strong);
  display: block;
  margin-bottom: 2px;
}

.swatch__hex {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: "SF Mono", "Fira Code", monospace;
}


/* --------------------------------------------------------------------------
   11. Badge / Tag / Pill
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge--blue    { background-color: var(--color-blue-subtle);    color: var(--color-blue); }
.badge--magenta { background-color: var(--color-magenta-subtle); color: var(--color-magenta); }
.badge--green   { background-color: var(--color-green-subtle);   color: var(--color-green); }
.badge--hubspot { background-color: var(--color-hubspot-subtle); color: var(--color-hubspot); }
.badge--muted   { background-color: var(--color-bg-subtle);      color: var(--color-text-muted); }

/* .badge--gradient removed June 2026 — gradient fills are off-system.
   Use a solid accent badge (badge--magenta/blue/green) or badge--muted. */


/* --------------------------------------------------------------------------
   12. Hero Section
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: var(--nav-offset);
  padding-bottom: var(--space-24);
}

.hero__inner {
  text-align: center;
  max-width: 1000px; /* wide enough for the 2-line headline at the short-tier cap */
  margin-inline: auto;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.hero__headline {
  font-size: var(--headline-medium);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
  margin-bottom: var(--space-6);
}

.hero__subheadline {
  font-size: var(--text-lg);   /* large paragraph — the H1 subheadline */
  color: var(--color-text);
  margin-bottom: var(--space-10);
  line-height: var(--leading-lede);
  max-width: 580px;
  margin-inline: auto;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 809px) {
  .hero__subheadline    { font-size: var(--text-base); }
  .hero__actions .btn   { width: 100%; }
}

/* --------------------------------------------------------------------------
   12b. Hero — Background Video variant
   Full-bleed looping/muted footage behind the hero, with a dark gradient
   overlay so the headline stays legible. Text is forced light in BOTH
   themes. Falls back to a dark brand gradient before the video loads and
   when the visitor prefers reduced motion.
   -------------------------------------------------------------------------- */
.hero--video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(115% 90% at 50% 0%, #14224d 0%, #0a0f1f 55%, #070a14 100%);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;          /* dim the footage, matching the conference hero */
  z-index: -2;
  pointer-events: none;
}

/* Tint scrim — same recipe as the conference hero (.ecl-hero__scrim):
   a magenta brand glow in the upper area over a vertical dark gradient. */
.hero__video-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 70% 20%, rgba(227,97,183,0.22), transparent 45%),
    linear-gradient(180deg, rgba(11,16,32,0.42), rgba(11,16,32,0.80));
}

/* Legible light type over the footage, regardless of theme */
.hero--video .hero__eyebrow     { color: rgba(255,255,255,0.82); }
.hero--video .hero__headline    { color: #fff; }
.hero--video .hero__subheadline { color: rgba(255,255,255,0.90); }

/* Secondary CTA over footage: handled by the .hero--video .btn--ghost rule
   in section 7 (white ghost treatment). */

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}


/* --------------------------------------------------------------------------
   13. Section Headers
   -------------------------------------------------------------------------- */
.section__header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.section__header--left {
  text-align: left;
  margin-inline: 0;
}

.section__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.section__subtitle {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-body);
}


/* --------------------------------------------------------------------------
   14. Typography Scale (Style Guide)
   -------------------------------------------------------------------------- */
.type-specimen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.type-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.type-row__label {
  flex-shrink: 0;
  width: 80px;
  font-size: var(--text-xs);
  font-family: "SF Mono", "Fira Code", monospace;
  color: var(--color-text-muted);
}

.type-row__sample {
  color: var(--color-heading);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}


/* --------------------------------------------------------------------------
   15. Style Guide Section Header
   -------------------------------------------------------------------------- */
.guide-section {
  padding-block: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.guide-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}


/* --------------------------------------------------------------------------
   17. Page Offset & Utilities
   -------------------------------------------------------------------------- */
.page-body { padding-top: var(--nav-offset); }

.text-center  { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.text-strong  { color: var(--color-text-strong); }
.text-heading { color: var(--color-heading); }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap   { flex-wrap: wrap; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip link — first element in <body>; hidden until keyboard-focused, then
   appears top-left above the nav (z-index over the pill's 1000/1001). */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-4);
  z-index: 2000;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-menu-bg);
  color: var(--color-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}


/* --------------------------------------------------------------------------
   18. Homepage — Trust Bar
   -------------------------------------------------------------------------- */
.trust-bar {
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.trust-bar__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.trust-bar__divider {
  width: 1px;
  height: 20px;
  background-color: var(--color-border);
  flex-shrink: 0;
}

.trust-bar__item {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

@media (max-width: 809px) {
  .trust-bar__divider { display: none; }
  .trust-bar__inner   { gap: var(--space-6); }
}


/* --------------------------------------------------------------------------
   19. Homepage — Problem Section
   -------------------------------------------------------------------------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.problem-card {
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-elevated);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.problem-card:hover {
  border-color: var(--color-border-strong);
}

.problem-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  margin-top: 2px;
}

.problem-card__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-strong);
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   20. Homepage — Split / Two-Column Layout
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

@media (max-width: 1199px) {
  .split         { grid-template-columns: 1fr; gap: var(--space-10); }
  .split--reverse { direction: ltr; }
}

.split__content {}

.split__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   21. Homepage — Numbered Steps
   -------------------------------------------------------------------------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.step {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.step__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-bg);
  letter-spacing: -0.02em;
}

.step__content {}

.step__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  line-height: var(--leading-title);
}

.step__body {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-body);
}

.step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}


/* --------------------------------------------------------------------------
   22. Homepage — Stats
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background-color: var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.stat-item {
  background-color: var(--color-bg-surface);
  padding: var(--space-10) var(--space-8);
  text-align: center;
}

.stat-item__number {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  margin-bottom: var(--space-2);
  color: var(--color-heading);
}

.stat-item__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 809px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
}


/* --------------------------------------------------------------------------
   23. Homepage — Testimonials
   -------------------------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

.testimonial-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-panel, var(--color-bg-subtle));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: box-shadow var(--transition-base);
}

.testimonial-card:hover {
}

.testimonial-card--featured {
  background:
    linear-gradient(var(--color-bg-surface), var(--color-bg-surface)) padding-box,
    var(--gradient-accent-135) border-box;
  border: 1.5px solid transparent;
}

.testimonial-card__quote {
  font-size: var(--text-base);
  color: var(--color-text-strong);
  line-height: 1.45;
  font-style: italic;
  flex: 1;
}

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

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-subtle);   /* follows page accent; blue by default */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.testimonial-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 1px;
}

.testimonial-card__result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-green-subtle);
  color: var(--color-green);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: var(--space-1);
}


/* --------------------------------------------------------------------------
   24. Homepage — Who It's For (Industry Pills)
   -------------------------------------------------------------------------- */
.industry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.industry-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-strong);
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast);
  cursor: default;
}

.industry-pill:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background-color: var(--color-blue-subtle);
}

.industry-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-green);
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   25. Homepage — CTA Band (Dark)
   -------------------------------------------------------------------------- */
.cta-band {
  background-color: var(--color-heading);
  padding-block: var(--space-24);
  text-align: center;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .cta-band {
  background-color: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
}

.cta-band__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: #fff;
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .cta-band__title {
  color: var(--color-heading);
}

.cta-band__sub {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-10);
  max-width: 520px;
  margin-inline: auto;
  line-height: var(--leading-body);
}

[data-theme="dark"] .cta-band__sub {
  color: var(--color-text-muted);
}

.cta-band .btn--primary {
  background-color: var(--color-magenta);
  color: #fff;
  border-color: var(--color-magenta);
}

.cta-band .btn--primary:hover {
  background-color: var(--color-magenta-hover);
  border-color: var(--color-magenta-hover);
}

/* On accent-themed pages the band's CTA follows the page accent instead.
   (Higher specificity than the magenta rules above, so it wins.) */
[class*="page-accent--"] .cta-band .btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
[class*="page-accent--"] .cta-band .btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Secondary CTA in the band: handled by the .cta-band .btn--ghost rules
   in section 7 (white ghost in light mode, token ghost in dark mode). */


/* --------------------------------------------------------------------------
   26. Homepage — Methodology Callout Box
   -------------------------------------------------------------------------- */
.methodology-box {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-12);
  background: var(--color-panel, var(--color-bg-subtle));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 809px) {
  .methodology-box { grid-template-columns: 1fr; }
}

.methodology-box__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.methodology-box__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-title);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
  line-height: var(--leading-title);
}

.methodology-box__body {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-body);
}


/* ==========================================================================
   12. Content / Trust Pages  (pg- = shared page primitives)
   Used by: /security /reviews /editorial-process /editorial-policy
            /awards /faq /authors  and author detail pages
   ========================================================================== */

/* ----- Centered page hero ----- */
.pg-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: calc(var(--space-20) + 70px) var(--space-6) var(--space-12);
  background: var(--color-bg);
}
.pg-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(10,108,255,.10), transparent 55%),
    radial-gradient(80% 60% at 82% 8%, rgba(227,97,183,.10), transparent 50%);
}
.pg-hero__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.pg-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em;
  color: var(--color-blue); margin-bottom: var(--space-4);
}
.pg-hero__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-display);
  line-height: var(--leading-display); font-size: var(--headline-medium);
  color: var(--color-heading); margin: 0 0 var(--space-5);
}
.pg-hero__sub {
  font-size: var(--text-lg); color: var(--color-text-muted);
  max-width: 62ch; margin: 0 auto;
}
.pg-hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted);
}
.pg-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pg-hero__meta i { color: var(--color-green); font-size: 16px; }

/* ----- Readable prose column ----- */
.pg-prose { max-width: 760px; margin: 0 auto; }
.pg-prose h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-heading);
  font-size: var(--text-3xl); color: var(--color-heading);
  margin: var(--space-12) 0 var(--space-4); scroll-margin-top: 90px;
}
.pg-prose h2:first-child { margin-top: 0; }
.pg-prose h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); color: var(--color-heading);
  margin: var(--space-8) 0 var(--space-3);
}
.pg-prose p, .pg-prose li {
  font-size: var(--text-base); line-height: 1.45; color: var(--color-text);
}
.pg-prose p { margin: 0 0 var(--space-5); }
.pg-prose ul, .pg-prose ol { margin: 0 0 var(--space-6); padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.pg-prose a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 2px; }
.pg-prose a:hover { color: var(--color-blue-hover); }
.pg-prose strong { color: var(--color-text-strong); font-weight: 600; }
.pg-prose hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-10) 0; }

/* Lead paragraph */
.pg-lead { font-size: var(--text-xl); line-height: 1.4; color: var(--color-text-muted); margin-bottom: var(--space-8); }

/* ----- Callout / commitment box ----- */
.pg-callout { border-left: 3px solid var(--color-blue);
  background: var(--color-panel, var(--color-bg-subtle)); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); margin: var(--space-6) 0;
}
.pg-callout p:last-child { margin-bottom: 0; }
.pg-callout--green { border-left-color: var(--color-green); }
.pg-callout--magenta { border-left-color: var(--color-magenta); }

/* ----- Icon feature grid ----- */
.pg-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--space-5); }
.pg-feature { border-radius: var(--radius-lg);
  background: var(--color-panel, var(--color-bg-subtle)); padding: var(--space-6);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.pg-feature:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.pg-feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--color-blue-subtle); color: var(--color-blue);
  font-size: 24px; margin-bottom: var(--space-4);
}
.pg-feature__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-heading); margin: 0 0 var(--space-2); }
.pg-feature__text { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-text-muted); margin: 0; }

/* ----- Numbered process steps ----- */
.pg-process { display: flex; flex-direction: column; gap: var(--space-6); max-width: 800px; margin: 0 auto; }
.pg-pstep { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5); align-items: start; }
.pg-pstep__num {
  width: 56px; height: 56px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  color: var(--color-blue); background: var(--color-blue-subtle);
}
.pg-pstep__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-heading); margin: 4px 0 var(--space-2); }
.pg-pstep__text { font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-text-muted); margin: 0; }

/* ----- Stat strip ----- */
.pg-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-10); }
.pg-stat { text-align: center; }
.pg-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); color: var(--color-heading); line-height: 1; letter-spacing: var(--tracking-display);}
.pg-stat span { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ----- Star rating ----- */
.pg-stars { color: #f5a623; font-size: 20px; letter-spacing: 2px; }
.pg-stars--lg { font-size: 30px; }

/* ----- Review cards ----- */
.pg-reviews { columns: 3 300px; column-gap: var(--space-5); }
.pg-review {
  break-inside: avoid; margin-bottom: var(--space-5); border-radius: var(--radius-lg);
  background: var(--color-panel, var(--color-bg-subtle)); padding: var(--space-6);
}
.pg-review__stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; margin-bottom: var(--space-3); }
.pg-review__quote { font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-text); margin: 0 0 var(--space-4); }
.pg-review__who { display: flex; align-items: center; gap: var(--space-3); }
.pg-review__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; background: var(--color-bg-subtle); }
.pg-review__name { font-weight: 600; font-size: var(--text-sm); color: var(--color-heading); }
.pg-review__role { font-size: var(--text-xs); color: var(--color-text-muted); }
.pg-review__src { margin-left: auto; font-size: 20px; color: var(--color-text-muted-faint); }

/* ----- FAQ accordion (answer-focused, semantic) ----- */
.pg-faqcat { max-width: 820px; margin: 0 auto; }
.pg-faqcat__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--color-heading); margin: var(--space-10) 0 var(--space-4); }
.pg-faq { border-radius: var(--radius-md);
  background: var(--color-panel, var(--color-bg-subtle)); margin-bottom: var(--space-3); overflow: hidden;
}
.pg-faq[open] { border-color: var(--color-border-strong); }
.pg-faq > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-5) var(--space-6);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-heading);
}
.pg-faq > summary::-webkit-details-marker { display: none; }
.pg-faq__chev { flex-shrink: 0; transition: transform var(--transition-fast); color: var(--color-text-muted); font-size: 20px; }
.pg-faq[open] .pg-faq__chev { transform: rotate(180deg); }
.pg-faq__body { padding: 0 var(--space-6) var(--space-5); }
.pg-faq__body p, .pg-faq__body li { font-size: var(--text-base); line-height: 1.4; color: var(--color-text); margin: 0 0 var(--space-3); }
.pg-faq__body p:last-child { margin-bottom: 0; }
.pg-faq__body ul { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }

/* ----- Author / SME profile ----- */
.pg-author { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-12); align-items: start; max-width: 1000px; margin: 0 auto; }
.pg-author__aside { position: sticky; top: 90px; }
.pg-author__photo { width: 100%; max-width: 240px; aspect-ratio: 1; border-radius: var(--radius-xl); object-fit: cover; background: var(--color-bg-subtle); box-shadow: var(--shadow-md); }
.pg-author__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); letter-spacing: var(--tracking-heading); color: var(--color-heading); margin: var(--space-5) 0 var(--space-1); }
.pg-author__role { font-size: var(--text-base); color: var(--color-blue); font-weight: 600; margin: 0 0 var(--space-4); }
.pg-author__meta { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.pg-author__meta i { color: var(--color-text-muted); width: 18px; }
.pg-author__social { display: flex; gap: var(--space-2); }
.pg-author__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-bg-surface);
  color: var(--color-text-muted); font-size: 18px; transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pg-author__social a:hover { color: var(--color-blue); border-color: var(--color-blue); }
.pg-author__creds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* Author index grid */
.pg-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--space-6); }
.pg-person { text-align: center; border-radius: var(--radius-lg); background: var(--color-panel, var(--color-bg-subtle)); padding: var(--space-6); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.pg-person:hover { border-color: var(--color-border-strong); transform: translateY(-3px); }
.pg-person__photo { width: 96px; height: 96px; border-radius: var(--radius-full); object-fit: cover; margin: 0 auto var(--space-4); background: var(--color-bg-subtle); }
.pg-person__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-heading); margin: 0; }
.pg-person__role { font-size: var(--text-sm); color: var(--color-text-muted); margin: 2px 0 0; }

/* ----- Awards grid ----- */
.pg-awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--space-5); }
.pg-award { display: flex; gap: var(--space-4); align-items: flex-start; border-radius: var(--radius-lg); background: var(--color-panel, var(--color-bg-subtle)); padding: var(--space-5); }
.pg-award__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--color-magenta-subtle); color: var(--color-magenta); }
.pg-award__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-heading); margin: 0 0 2px; }
.pg-award__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* ----- Sticky TOC (optional, used on policy/process) ----- */
.pg-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-12); max-width: 1040px; margin: 0 auto; align-items: start; }
.pg-toc { position: sticky; top: 90px; font-size: var(--text-sm); }
.pg-toc__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.pg-toc a { display: block; padding: var(--space-2) 0; color: var(--color-text-muted); border-left: 2px solid transparent; padding-left: var(--space-3); transition: color var(--transition-fast), border-color var(--transition-fast); }
.pg-toc a:hover { color: var(--color-blue); border-left-color: var(--color-blue); }

@media (max-width: 1199px) {
  .pg-author { grid-template-columns: 1fr; gap: var(--space-8); }
  .pg-author__aside { position: static; text-align: center; }
  .pg-author__photo { margin: 0 auto; }
  .pg-author__meta, .pg-author__creds, .pg-author__social { justify-content: center; align-items: center; }
  .pg-layout { grid-template-columns: 1fr; }
  .pg-toc { display: none; }
  .pg-reviews { columns: 1; }
}