/* =============================================================================
   frontlion Theme — Main Stylesheet
   Design tokens derived from frontlion branding + Figma Make prototype
   ============================================================================= */

/* ── CSS Custom Properties (Design Tokens) ───────────────────────────────── */

:root {
  /* Viewport width excluding the classic scrollbar.
     `100vw` is the viewport *including* the scrollbar gutter, so full-bleed
     blocks built on it overflow by the scrollbar width wherever scrollbars take
     up layout space (Windows/Linux, macOS set to "always show"). body's
     `overflow-x: clip` swallows the scrollbar but not the gap, which surfaces
     as a white strip down the right edge. Use var(--fl-vw) for full-bleed.
     Overridden below to the exact measured width where JS is available. */
  --fl-vw: 100vw;

  /* Brand Colors */
  --color-brand:           #4A4340;   /* Charcoal — primary dark / section bg */
  --color-brand-mid:       #2C2423;   /* Dark Charcoal — gradient / footer */
  --color-accent:          #D4764A;   /* Deep Coral — primary CTA */
  --color-accent-hover:    #C06030;
  --color-accent-2:        #4A9E9C;   /* Teal — secondary accent */
  --color-accent-2-hover:  #3A8E8C;

  /* Brand Palette */
  --color-coral:           #EDA480;   /* Coral — primary accent */
  --color-deep-coral:      #D4764A;   /* Deep Coral — CTA / Interactive */
  --color-charcoal:        #4A4340;   /* Charcoal — primary text */
  --color-warm-gray:       #8A817C;   /* Warm Gray — secondary text / UI */
  --color-teal:            #4A9E9C;   /* Teal — success / positive */
  --color-teal-light:      #C8E6E5;   /* Teal Light — success tint */
  --color-warm-beige:      #E4D9CC;   /* Warm Beige — neutral surface */
  --color-soft-peach:      #F5E6DC;   /* Soft Peach — warm background */
  --color-honey:           #E8C97A;   /* Honey — warning / highlight */
  --color-sage:            #9BB8A0;   /* Sage — growth / nature */
  --color-sky:             #3F7FA6;   /* Sky — info / trust */
  --color-sky-light:       #D7E7F1;   /* Sky Light — sky tint */
  --color-violet:          #6A6285;   /* Violet — creative / premium */
  --color-violet-light:    #E6E2EE;   /* Violet Light — violet tint */
  --color-slate:           #64748B;   /* Slate — neutral cool */
  --color-slate-light:     #E2E8F0;   /* Slate Light — cool tint */

  /* Pillar dark text variants — used for mega menu labels on light tint bgs */
  --color-teal-dark:       #1A6E6C;   /* Teal — darkened for text */
  --color-sky-dark:        #2F5F7D;   /* Sky — darkened for text */
  --color-violet-dark:     #4E4665;   /* Violet — darkened for text */
  --color-slate-dark:      #334155;   /* Slate — darkened for text */
  --color-sage-dark:       #3A6642;   /* Sage — darkened for text */
  --color-honey-dark:      #7A5810;   /* Honey — darkened for text */

  /* Background System */
  --bg-primary:            #FDFAF7;   /* Default page background */
  --bg-secondary:          #F7F3EE;   /* Alternating sections */
  --surface:               #FFFFFF;   /* Cards, modals, elevated containers */
  --bg-warm:               #FDF5EF;   /* Feature callouts, testimonials */
  --bg-cool:               #F4F9F9;   /* Data / analytics sections */
  --bg-tertiary:           #FFF9F5;   /* Subtle long-scroll variation */

  /* Neutrals */
  --color-white:           #FFFFFF;
  --color-black:           #000000;
  --color-gray-50:         #F9FAFB;
  --color-gray-100:        #F3F4F6;
  --color-gray-200:        #E5E7EB;
  --color-gray-300:        #D1D5DB;
  --color-gray-400:        #9CA3AF;
  --color-gray-500:        #6B7280;
  --color-gray-600:        #4B5563;
  --color-gray-700:        #374151;
  --color-gray-800:        #1F2937;
  --color-gray-900:        #111827;

  /* Semantic */
  --color-success:         #4A9E9C;   /* Teal */
  --color-warning:         #E8C97A;   /* Honey */
  --color-error:           #EF4444;
  --color-info:            #3B82F6;

  /* Feature Accent Colors — mapped to brand palette */
  --color-feat-blue:       #C8E6E5;   /* Teal Light */
  --color-feat-blue-icon:  #4A9E9C;   /* Teal */
  --color-feat-purple:     #F5E6DC;   /* Soft Peach */
  --color-feat-purple-icon:#EDA480;   /* Coral */
  --color-feat-green:      #DCE9DE;   /* Sage tint */
  --color-feat-green-icon: #9BB8A0;   /* Sage */
  --color-feat-orange:     #FDF5EF;   /* bg-warm */
  --color-feat-orange-icon:#D4764A;   /* Deep Coral */
  --color-feat-pink:       #F5E6DC;   /* Soft Peach */
  --color-feat-pink-icon:  #EDA480;   /* Coral */
  --color-feat-teal:       #C8E6E5;   /* Teal Light */
  --color-feat-teal-icon:  #4A9E9C;   /* Teal */
  --color-feat-honey:      #FDF0E0;   /* Honey tint */
  --color-feat-honey-icon: #C97B30;   /* Amber */
  --color-feat-sage:       #DCE9DE;   /* Sage tint */
  --color-feat-sage-icon:  #9BB8A0;   /* Sage */
  --color-feat-sky:        #BEE3F8;   /* Sky Light */
  --color-feat-sky-icon:   #0284C7;   /* Sky */
  --color-feat-violet:     #EDE9FE;   /* Violet Light */
  --color-feat-violet-icon:#7C3AED;   /* Violet */

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-2xs:     0.625rem;   /* 10px */
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px */
  --text-lg:      1.125rem;   /* 18px */
  --text-xl:      1.25rem;    /* 20px */
  --text-2xl:     1.5rem;     /* 24px */
  --text-3xl:     1.875rem;   /* 30px */
  --text-4xl:     2.25rem;    /* 36px */
  --text-5xl:     3rem;       /* 48px */
  --text-6xl:     3.75rem;    /* 60px */
  --text-7xl:     4.5rem;     /* 72px */

  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;
  --font-extra:   800;

  --leading-tight: 1.2;
  --leading-snug:  1.375;
  --leading-normal:1.5;
  --leading-relaxed:1.625;

  /* 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-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Section Vertical Padding */
  --section-pad-y:   5rem;
  --section-pad-y-sm:3rem;
  --section-pad-y-lg:8rem;

  /* Border Radius */
  --radius-sm:  0.375rem;  /* 6px */
  --radius-md:  0.5rem;    /* 8px */
  --radius-lg:  0.75rem;   /* 12px */
  --radius-xl:  1rem;      /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full:9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --container-max:    1280px;
  --container-px:     clamp(1rem, 4vw, 2rem);
  --header-height:    72px;
  /* Height of the sticky utility bar. Zeroed on pages where it does not render
     (see .no-utility-bar below) so everything anchored to the sticky nav stack
     — header top, mega menus, nav overlay — stays correct either way. */
  --utility-height:   36px;
  --utility-height-base: 36px; /* unchanging source for --utility-height resets */
  --max-width-content: 720px;
  --max-width-content-lg: 900px;
  /* Phone product screens render their device frame at a fixed 300px cap (see
     the phone branch in product-illustrations/_core.js and the interactive-v2
     rescale). Any wrapper holding one must match, or the box is larger than the
     frame and leaves dead space around it — a 1/2 wrapper at 420px wasted 240px
     of height. Keep this in sync if that cap ever changes. */
  --phone-embed-max: 300px;

  /* Gradients */
  --gradient-brand:   radial-gradient(ellipse 55% 90% at 88% 40%, color-mix(in srgb, var(--accent, #D4764A) 16%, var(--color-charcoal)) 0%, var(--color-charcoal) 62%);
  --gradient-cta:     linear-gradient(135deg, var(--color-deep-coral) 0%, var(--color-coral) 100%);
  --gradient-overlay: linear-gradient(to bottom, rgba(74,67,64,0) 0%, rgba(74,67,64,0.8) 100%);
}

/* ── Reset & Base ────────────────────────────────────────────────────────── */

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

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-charcoal);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: overflow-x:hidden forces overflow-y to compute to
     auto, making body a scroll container. Sticky descendants (.site-utility,
     .site-header) would then stick to body — which never scrolls — instead of
     the viewport, so they scroll away. `clip` suppresses the same horizontal
     overflow without creating that scroll container. */
  overflow-x: clip;
}

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

/* Screen reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ── Typography ──────────────────────────────────────────────────────────── */

h1, .h1 { font-family: var(--font-display); font-size: clamp(var(--text-4xl), 5vw, var(--text-7xl)); font-weight: var(--font-semi); line-height: var(--leading-tight); letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl)); font-weight: var(--font-semi); line-height: var(--leading-tight); letter-spacing: 0; }
h3, .h3 { font-family: var(--font-heading); font-size: clamp(var(--text-xl), 2vw, var(--text-3xl)); font-weight: var(--font-semi); line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--text-xl); font-weight: var(--font-semi); }
h5, .h5 { font-size: var(--text-lg); font-weight: var(--font-medium); }

p { max-width: 68ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: var(--font-semi);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Sizes */
.btn--sm  { padding: var(--space-2) var(--space-4);  font-size: var(--text-sm); }
.btn--md  { padding: var(--space-3) var(--space-6);  font-size: var(--text-base); }
.btn--lg  { padding: var(--space-4) var(--space-8);  font-size: var(--text-lg); }

/* Variants */
.btn--primary  { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn--secondary { background: var(--color-accent-2); color: var(--color-white); border-color: var(--color-accent-2); }
.btn--secondary:hover { background: var(--color-accent-2-hover); border-color: var(--color-accent-2-hover); }

.btn--outline  { background: transparent; color: var(--color-brand); border-color: var(--color-gray-300); }
.btn--outline:hover { border-color: var(--color-brand); background: var(--color-gray-50); }

.btn--outline.btn--on-dark { color: var(--color-white); border-color: rgba(255,255,255,0.4); }
.btn--outline.btn--on-dark:hover { border-color: var(--color-white); background: rgba(255,255,255,0.1); }

.btn--ghost  { background: transparent; color: var(--color-gray-700); border-color: transparent; }
.btn--ghost:hover { background: var(--color-gray-100); }

.site-header__actions .btn--ghost,
.section-hero--brand .btn--ghost,
.section--brand .btn--ghost {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

.site-header__actions .btn--ghost:hover,
.section-hero--brand .btn--ghost:hover,
.section--brand .btn--ghost:hover {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.16);
}

.btn--text { background: transparent; color: var(--color-accent); border-color: transparent; padding-inline: 0; }
.btn--text:hover { text-decoration: underline; transform: none; }

/* ── Gradient Text Accent ────────────────────────────────────────────────── */

.fl-gradient-text {
  background: var(--gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Color Scheme Utilities ──────────────────────────────────────────────── */

.section--light  { background: var(--bg-primary); color: var(--color-charcoal); }
.section--alt    { background: var(--bg-secondary); color: var(--color-charcoal); }
.section--dark   { background: var(--color-brand); color: var(--color-white); }
.section--brand  { background: var(--gradient-brand); color: var(--color-white); }

.section--dark  .eyebrow,
.section--brand .eyebrow { color: var(--color-accent); }

.section--dark  .btn--outline,
.section--brand .btn--outline { color: var(--color-white); border-color: rgba(255,255,255,0.4); }

.section--dark  .btn--outline:hover,
.section--brand .btn--outline:hover,
.section-hero--dark .btn--outline:hover,
.section-hero--brand .btn--outline:hover {
  color: var(--color-white);
  border-color: var(--color-white);
  background: rgba(255,255,255,0.1);
}

/* ── Section Shared Styles ───────────────────────────────────────────────── */

section { padding-block: var(--section-pad-y); position: relative; overflow: hidden; }
section.layout-code { overflow: visible; } /* sticky children need overflow: visible */

.section__header { margin-bottom: var(--space-12); }
.section__header--centered { text-align: center; display:flex; flex-direction: column; gap:0; align-items: center; margin-bottom: var(--space-12); }
.section__header--centered p.eyebrow { justify-content: center; margin-bottom: var(--space-2) !important; }
.section__heading { margin-bottom: var(--space-4); max-width: var(--max-width-content); }
.section__header--centered .section__heading { max-width: 960px; margin-inline: auto; margin-bottom: var(--space-4); }
.section__body { font-size: var(--text-lg); color: var(--color-warm-gray); max-width: 60ch; }
.section__header--centered .section__body { max-width: 70ch; margin-inline: auto; margin-bottom: 0; }
.section__subheading { font-size: var(--text-lg); color: var(--color-warm-gray); max-width: 60ch; }
.section__header--centered .section__subheading { max-width: 70ch; margin-inline: auto; margin-bottom: 0; }
.section__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.section__subactions { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-warm-gray); }
/* Alias used by comparison / team / timeline / video layouts */
.section-header--center { text-align: center; display:flex; flex-direction: column; gap:0; align-items: center; margin-bottom: var(--space-12); }
.section-header--center p.eyebrow { justify-content: center; margin-bottom: var(--space-2) !important; }
.section-header--center .section__heading { max-width: 960px; margin-inline: auto; margin-bottom: var(--space-4); }
.section-header--center .section__subheading { max-width: 70ch; margin-inline: auto; margin-bottom: 0; }
.section__actions--centered { justify-content: center; }

section.layout-code{
  padding: 0 !important;
}

/* ── Utility Bar ────────────────────────────────────────────────────────── */

.site-utility {
  position: sticky; top: 0; z-index: 102;
  background: var(--color-brand);
  color: var(--color-gray-300);
  font-size: var(--text-xs);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-utility__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* Tight: the utility links and the Ask AI button read as one cluster. The
     announcement is separated by its own auto margin below, not by this gap. */
  gap: var(--space-2);
  height: var(--utility-height);
}
.site-utility__banner {
  /* Auto right margin pins the announcement left and keeps everything after it
     grouped on the right. `space-between` on the inner would spread the menu
     and the Ask AI button apart instead. Declared here rather than in a
     separate rule so the `margin` shorthand can't silently reset it. */
  margin: 0 auto 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: #d8deec;
  white-space: nowrap;
  overflow: hidden;
}
/* The announcement yields first when the bar runs out of room; the utility
   links keep their intrinsic width. */
.site-utility__banner-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-utility__banner-text p { margin: 0; display: inline; }
.site-utility__banner-cta {
  color: var(--color-accent);
  font-weight: var(--font-semi);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.site-utility__banner-cta:hover { color: var(--color-white); }

/* AI search trigger, right of the utility links. */
.site-utility__search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  /* No margin — the inner's flex gap provides the spacing to the menu. */
  padding: var(--space-1) var(--space-3);
  min-height: 24px;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-white);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.site-utility__search:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.site-utility__search svg { width: 13px; height: 13px; stroke-width: 2; flex-shrink: 0; }
/* Match the theme's focus convention rather than falling back to the UA's
   blue ring, which is especially conspicuous on the dark utility bar. */
.site-utility__search:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Trigger placement variants ───────────────────────────────────────────
   Both variants below are desktop-only. Each is reset back to the default pill
   at the mobile breakpoint, where a centred field has no room and a viewport
   rail would sit over content. See the max-width: 900px block at the end. */

/* Centred search-field variant.
   Absolutely positioned rather than flexed into the row: the utility inner is
   justify-content:flex-end, and true centring must ignore the widths of the
   banner and menu on either side. */
@media (min-width: 901px) {
  .site-utility__inner:has(.site-utility__search--field) { position: relative; }

  .site-utility__search--field {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, 32vw);
    /* Reads as an input: left-aligned text, square-ish corners, quiet fill. */
    justify-content: flex-start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
    color: var(--color-gray-300);
    font-weight: var(--font-regular);
    cursor: text;
  }
  .site-utility__search--field:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.26);
    color: var(--color-white);
  }
  .site-utility__search--field span { opacity: 0.85; }

  /* Screen-edge rail: sparkle only, vertically centred against the viewport.
     Fixed, so it stays put as the page scrolls. */
  .site-utility__search--rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 101; /* Below the panel (which sits higher) but above page content. */
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: none;
    background: var(--color-brand);
    border-color: rgba(255,255,255,0.18);
    box-shadow: var(--shadow-lg);
  }
  .site-utility__search--rail svg { width: 18px; height: 18px; }
  .site-utility__search--rail:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }

  /* The label becomes a hover/focus tooltip. The span is the tooltip itself —
     visually hidden until hover, but still the accessible text, so no separate
     aria-label duplication is read out. */
  .site-utility__search--rail span {
    position: absolute;
    right: calc(100% + var(--space-2));
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-brand);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-semi);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }
  .site-utility__search--rail:hover span,
  .site-utility__search--rail:focus-visible span {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Admin-only stand-in when the API key is missing. Never shown to visitors. */
.site-utility__search-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: #ffd4bf;
  border: 1px dashed rgba(255,212,191,0.5);
  border-radius: 99px;
  white-space: nowrap;
  cursor: help;
}
.site-utility__search-notice svg { width: 13px; height: 13px; stroke-width: 2; flex-shrink: 0; }

/* Derived on body, not :root, so the .no-utility-bar override below feeds into
   the calc — a var() in a :root declaration would resolve against :root's own
   --utility-height and ignore it. */
body { --nav-stack-height: calc(var(--utility-height) + var(--header-height)); }

/* No utility bar on this page — collapse the token so the header sticks flush
   to the viewport top and the fixed nav panels line up with its bottom edge. */
body.no-utility-bar { --utility-height: 0px; }
.site-utility__menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-utility__menu .menu-item {
  position: relative;
}
.site-utility__menu .menu-item a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  min-height: 28px;
  color: #d8deec;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.site-utility__menu .menu-item a:hover {
  color: var(--color-white);
  background: var(--color-brand-mid)
}
.site-utility__menu .menu-item + .menu-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-1));
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.15);
}
.site-utility__menu .menu-item--has-separator::before {
  left: calc(-1 * var(--space-2));
  height: 16px;
  background: rgba(255,255,255,0.3);
}
.site-utility__menu .menu-item--primary > a {
  color: #ffd4bf;
  font-weight: var(--font-semi);
}
.site-utility__menu .menu-item--primary > a:hover {
  color: var(--color-white);
  background: transparent;
}
.site-utility__menu a svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* The announcement is no longer its own strip — it renders inside the utility
   bar as .site-utility__banner (see Utility Bar above). */

/* ── AI Search Panel ─────────────────────────────────────────────────────── */

/* Visually hidden but available to screen readers. */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Note: `body` has overflow-x: clip, which makes it the containing block for
   fixed-position descendants. Body spans the viewport, so inset:0 lands in the
   right place — but the panel slides in from translateX(100%), which starts
   outside that box. Clipping the drawer's overflow at this level keeps the
   off-screen start position from forcing or revealing anything. */
.ai-search {
  position: fixed; inset: 0; z-index: 300; overflow: hidden;
  /* Panel surface: a step below --color-brand-mid (#2C2423), same warm
     charcoal family, so the drawer reads as deeper than any page section. */
  --ai-surface: #1A1514;
  /* Muted text. --color-warm-gray (#8A817C) is too dim for the small text it
     carries (subheading, disclaimer, source meta); this tint is 6.88:1 here. */
  --ai-muted: #A79E98;
}
/* Dark scrim over the page, blurred so the site reads as pushed back rather
   than merely dimmed. -webkit- prefix for Safari. */
.ai-search__scrim {
  position: absolute; inset: 0;
  background: rgba(12,9,9,0.72);
  -webkit-backdrop-filter: blur(12px) saturate(0.85);
  backdrop-filter: blur(12px) saturate(0.85);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.ai-search.is-open .ai-search__scrim { opacity: 1; }
/* No blur support: darken further, since the blur was doing part of the
   separation between panel and page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ai-search__scrim { background: rgba(12,9,9,0.88); }
}

/* Right-hand drawer, dark. Full-height column: fixed head, scrolling thread,
   composer pinned to the bottom. Built on the theme's deep charcoal so it sits
   above the scrim as its own surface. */
.ai-search__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--ai-surface);
  color: var(--color-warm-beige);
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-2xl);
  transform: translateX(100%);
  transition: transform var(--transition-base);
}
.ai-search.is-open .ai-search__panel { transform: translateX(0); }

/* Centred modal variant, paired with the search-field trigger: the field is in
   the middle of the bar, so the panel opening from the middle follows from it.
   Desktop only — below 900px this reverts to the drawer, which uses the full
   width a phone actually has. */
@media (min-width: 901px) {
  .ai-search--centered .ai-search__panel {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(640px, calc(100vw - var(--space-8)));
    /* Tall enough to be useful, short enough to read as a dialog. */
    height: min(720px, calc(100vh - var(--space-10)));
    border-radius: var(--radius-lg);
    border-left: 1px solid rgba(255,255,255,0.10);
    /* Scale rather than slide: a centred dialog sliding from an edge reads as
       misplaced. Kept subtle so it does not feel bouncy. */
    transform: translate(-50%, -50%) scale(0.97);
    opacity: 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
  }
  .ai-search--centered.is-open .ai-search__panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  /* Round the head/composer corners to match the panel radius. */
  .ai-search--centered .ai-search__head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ai-search--centered .ai-search__form { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}

.ai-search__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.ai-search__title {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-white);
}
.ai-search__title svg { width: 18px; height: 18px; color: var(--color-coral); }
.ai-search__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  color: var(--ai-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ai-search__close:hover { background: rgba(255,255,255,0.10); color: var(--color-white); }

/* Head actions: "New chat" sits beside the close button and is hidden until
   there is a conversation to clear. */
.ai-search__head-actions {
  display: flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
}
.ai-search__reset {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ai-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.ai-search__reset:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
  color: var(--color-white);
}
.ai-search__reset svg { width: 14px; height: 14px; }
.ai-search__reset[hidden] { display: none; }

/* The intro is toggled, not removed, so the suggestions can come back. */
.ai-search__intro[hidden] { display: none; }

/* Narrow panels: keep the icon, drop the label rather than let the head wrap. */
@media (max-width: 380px) {
  .ai-search__reset span { display: none; }
  .ai-search__reset { padding: 0; width: 32px; justify-content: center; }
}

.ai-search__thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Default scrollbars render light-on-dark badly; theme them to the panel. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.20) transparent;
}
.ai-search__thread::-webkit-scrollbar { width: 8px; }
.ai-search__thread::-webkit-scrollbar-track { background: transparent; }
.ai-search__thread::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 99px;
}
.ai-search__thread::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* Empty state */
.ai-search__intro-lead {
  font-size: var(--text-lg);
  font-weight: var(--font-semi);
  color: var(--color-white);
  margin: 0 0 var(--space-2);
}
.ai-search__intro-sub {
  font-size: var(--text-sm);
  color: var(--ai-muted);
  margin: 0 0 var(--space-5);
}
.ai-search__suggestions {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.ai-search__suggestion {
  display: block; width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-warm-beige);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.ai-search__suggestion:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--color-coral);
  color: var(--color-white);
}

/* Messages */
.ai-search__msg { display: flex; flex-direction: column; }
.ai-search__msg--user { align-items: flex-end; }
/* User turn: coral fill — the brand charcoal would vanish against the panel.
   Deepened from --color-deep-coral so white body text clears AA (5.26:1;
   the token itself is only 3.24:1 under white). */
.ai-search__msg--user .ai-search__bubble {
  background: #A85528;
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  max-width: 85%;
  margin: 0;
  font-size: var(--text-sm);
}
/* Assistant turn: unboxed prose, near-white for comfortable long reading.
   No white-space: pre-wrap — the answer's Markdown is parsed into real block
   elements, so preserving source newlines would double every gap. */
.ai-search__msg--ai .ai-search__bubble {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: #EDE6DD;
}
.ai-search__msg.is-error .ai-search__bubble { color: var(--ai-muted); font-style: italic; }

/* Rendered Markdown inside an answer. Spacing is set with margins between
   siblings so the first and last blocks sit flush with the row. */
.ai-search__msg--ai .ai-search__bubble > * { margin: 0; }
.ai-search__msg--ai .ai-search__bubble > * + * { margin-top: var(--space-3); }

.ai-search__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  line-height: var(--leading-snug);
  color: var(--color-white);
}
/* Tighter above a heading that follows prose, so it groups with what follows. */
.ai-search__msg--ai .ai-search__bubble > * + .ai-search__heading { margin-top: var(--space-4); }

/* The global reset sets list-style: none on every ul/ol, so answers have to
   opt markers back in — without them the items read as orphaned lines. */
ul.ai-search__list { list-style: disc; }
ol.ai-search__list { list-style: decimal; }
.ai-search__list {
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ai-search__list li { margin: 0; }
.ai-search__list li::marker { color: var(--ai-muted); }

.ai-search__msg--ai .ai-search__bubble strong { font-weight: var(--font-semi); color: var(--color-white); }
.ai-search__msg--ai .ai-search__bubble code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.10);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Inline links in an answer, distinct from the superscript citation marker. */
.ai-search__link {
  color: var(--color-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-search__link:hover { color: var(--color-white); }

/* Inline citation marker */
.ai-search__cite {
  display: inline-block;
  vertical-align: super;
  font-size: 0.7em;
  font-weight: var(--font-semi);
  line-height: 1;
  padding: 0 2px;
  color: var(--color-coral);
  text-decoration: none;
}
.ai-search__cite:hover { text-decoration: underline; }

/* No-answer fallback: quieter than the limit prompt — it follows a reply that
   already said "I can't help with that", so it should read as a helpful aside
   rather than a second pitch. */
.ai-search__fallback {
  padding: var(--space-4);
  border-left: 2px solid var(--color-accent);
  background: rgba(255,255,255,0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ai-search__fallback-heading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-white);
}
.ai-search__fallback-body {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ai-muted);
}
.ai-search__fallback-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.ai-search__fallback-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-white);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ai-search__fallback-link:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
  color: var(--color-white);
}
.ai-search__fallback-link.is-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.ai-search__fallback-link.is-primary:hover { background: var(--color-deep-coral); border-color: var(--color-deep-coral); }
.ai-search__fallback-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Question-limit prompt: a card in the thread offering a route to a human
   once the visitor has asked enough to be genuinely interested. */
.ai-search__limit {
  padding: var(--space-5);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.05);
  text-align: center;
}
.ai-search__limit-heading {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  color: var(--color-white);
}
.ai-search__limit-body {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ai-muted);
}
.ai-search__limit-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-radius: 99px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.ai-search__limit-cta:hover { background: var(--color-deep-coral); color: var(--color-white); }
.ai-search__limit-cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Quieter than the CTA — this is the secondary path, not the ask. */
.ai-search__limit-more {
  display: block;
  margin: var(--space-3) auto 0;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--ai-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}
.ai-search__limit-more:hover { color: var(--color-white); }

/* Composer while the prompt is up: visibly inert rather than silently dead. */
.ai-search__form.is-blocked { opacity: 0.5; pointer-events: none; }

/* Typing indicator */
.ai-search__typing { display: flex; gap: 4px; padding: var(--space-2) 0; }
.ai-search__typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-coral);
  animation: ai-search-blink 1.4s infinite both;
}
.ai-search__typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-search__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-search-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}

/* Sources */
.ai-search__sources {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.ai-search__sources-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ai-muted);
  margin: 0 0 var(--space-2);
}
.ai-search__source-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ai-search__source {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-warm-beige);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ai-search__source:hover { background: rgba(255,255,255,0.07); color: var(--color-white); }
.ai-search__source-num {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: rgba(255,255,255,0.10);
  color: var(--color-coral);
  font-weight: var(--font-semi);
  font-size: 10px;
}
.ai-search__source-title { flex: 1; min-width: 0; }
.ai-search__source-type { flex-shrink: 0; color: var(--ai-muted); }

/* Composer */
.ai-search__form {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.10);
  background: var(--ai-surface);
}
.ai-search__input-wrap {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ai-search__input-wrap:focus-within {
  border-color: var(--color-coral);
  background: rgba(255,255,255,0.09);
}
.ai-search__input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; resize: none;
  padding: var(--space-2) 0;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-white);
  max-height: 160px;
}
.ai-search__input:focus { outline: none; }
/* Placeholder needs an explicit colour — the UA default is unreadable here. */
.ai-search__input::placeholder { color: var(--ai-muted); opacity: 1; }
.ai-search__submit {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-deep-coral);
  /* Dark glyph on the coral fill — white is only 3.24:1 against it. */
  color: var(--ai-surface);
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
/* Lighten on hover rather than darken — the glyph is dark, so the token's
   --color-accent-hover would reduce contrast instead of raising it. */
.ai-search__submit:hover { background: var(--color-coral); }
.ai-search__submit:disabled { opacity: 0.4; cursor: default; }
.ai-search__submit svg { width: 16px; height: 16px; stroke-width: 2.5; }
.ai-search__disclaimer {
  margin: var(--space-2) 0 0;
  font-size: 11px;
  color: var(--ai-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ai-search__scrim, .ai-search__panel { transition: none; }
  .ai-search__typing span { animation: none; opacity: 0.6; }
}

/* Mobile: every placement reverts to the default pill trigger and the drawer.
   A centred field has no room beside the menu, and a fixed viewport rail would
   sit over content on a small screen. The variant rules above are all scoped to
   min-width: 901px, so this block only has to undo the properties that are not
   inside a media query — plus the tooltip, which must become a plain label
   again rather than staying invisible. */
@media (max-width: 900px) {
  .site-utility__search--field,
  .site-utility__search--rail {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    padding: var(--space-1) var(--space-3);
    justify-content: center;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    color: var(--color-white);
    font-weight: var(--font-semi);
    box-shadow: none;
    cursor: pointer;
  }
  .site-utility__search--field svg,
  .site-utility__search--rail svg { width: 13px; height: 13px; }

  /* Undo the tooltip: back to an inline label sitting next to the icon. */
  .site-utility__search--rail span {
    position: static;
    transform: none;
    padding: 0;
    border: 0;
    background: none;
    opacity: 1;
    box-shadow: none;
    font-size: var(--text-xs);
  }
}

#hs-eu-policy-wording a {
  color: #0a0f2e !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Site Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: var(--utility-height); z-index: 100;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-gray-200);
  transition: box-shadow var(--transition-base);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  height: var(--header-height); position: relative;
}
a.site-logo {
    max-width: 150px;
}
.site-logo img { height: 36px; width: auto; }
.site-logo__text { font-size: var(--text-xl); font-weight: var(--font-extra); color: var(--color-brand); }
.site-nav { position: absolute; left: 0; right: 0; width: fit-content; margin-inline: auto; white-space: nowrap; }
.site-nav__menu { display: flex; align-items: center; gap: var(--space-1); }
.site-nav__menu .menu-item { position: relative; }
.site-nav__menu .nav-link {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--color-gray-700);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.site-nav__menu .nav-link:hover,
.site-nav__menu .is-active > .nav-link { color: var(--color-brand); background: var(--color-gray-50); }
.nav-chevron { transition: transform var(--transition-fast); }
.has-dropdown:hover > .nav-link .nav-chevron,
.has-mega-menu.is-open > .nav-link .nav-chevron { transform: rotate(180deg); }
/* Bridge the gap between the nav item's bottom edge and the mega menu panel top.
   Extended far left/right so diagonal mouse movement toward the full-width panel
   doesn't escape the element bounds and fire an unwanted mouseleave. */
.has-mega-menu::after {
  content: ''; position: absolute; top: 100%; left: -200vw; right: -200vw; height: 40px;
  pointer-events: none;
}
.has-mega-menu.is-open::after {
  pointer-events: auto;
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

/* Standard Dropdown */
.dropdown-menu {
  position: absolute; top: calc(100% + var(--space-2)); left: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu .nav-link { border-radius: var(--radius-sm); display: block; }
.dropdown-menu .nav-link:hover { background: var(--color-gray-50); }

/* Mega Menu */
.mega-menu {
  position: fixed; top: var(--nav-stack-height); left: 0; right: 0;
  height: auto;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-2xl);
  padding-block: var(--space-8);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 101;
}
.has-mega-menu.is-open > .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu__inner { display: flex; gap: var(--space-12); max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.mega-menu__main { flex: 1; min-width: 0; overflow: hidden; }
.mega-menu__heading { font-size: var(--text-xs); font-weight: var(--font-semi); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gray-400); margin-bottom: var(--space-4); }
.mega-menu__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); }
.mega-menu__link {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.mega-menu__link:hover { background: var(--color-gray-50); }
.mega-menu__link-icon { width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: var(--radius-md); background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mega-menu__link-icon i,
.mega-menu__link-icon svg { width: 100%; height: 100%; }
.mega-menu__link-title { font-weight: var(--font-medium); font-size: var(--text-sm); color: var(--color-gray-900); display: block; }
.mega-menu__link-desc { font-size: var(--text-xs); color: var(--color-gray-500); display: block; margin-top: var(--space-1); }
.mega-menu__featured { width: 280px; flex-shrink: 0; min-width: 0; overflow: hidden; }
.mega-menu__featured-card { background: var(--color-gray-50); border-radius: var(--radius-xl); padding: var(--space-6); overflow: hidden; overflow-wrap: break-word; word-break: break-word; }
.mega-menu__featured-card .btn { display: flex; width: 100%; justify-content: center; white-space: normal; }
.mega-menu__featured-label { font-size: var(--text-xs); font-weight: var(--font-semi); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: var(--space-3); }
.mega-menu__featured-heading { font-size: var(--text-lg); font-weight: var(--font-bold); margin-bottom: var(--space-2); overflow-wrap: break-word; white-space: normal; word-break: break-word; }
.mega-menu__featured-text { font-size: var(--text-sm); color: var(--color-gray-600); margin-bottom: var(--space-4); overflow-wrap: break-word; white-space: normal; word-break: break-word; }
.mega-menu__featured-img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.mega-menu__featured-title { font-weight: var(--font-semi); font-size: var(--text-sm); color: var(--color-gray-900); }
.mega-menu__featured-type { font-size: var(--text-xs); color: var(--color-accent); font-weight: var(--font-semi); text-transform: uppercase; margin-bottom: var(--space-2); }
.mega-menu__quick-links { margin-top: var(--space-6); }
.mega-menu__quick-links .mega-menu__heading { margin-bottom: var(--space-3); }
.mega-menu__quick-link { display: block; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--color-gray-600); border-bottom: 1px solid var(--color-gray-100); transition: color var(--transition-fast); }
.mega-menu__quick-link:last-child { border-bottom: none; }
.mega-menu__quick-link:hover { color: var(--color-accent); }
.site-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); z-index: 100; top: var(--nav-stack-height); }
.site-nav-overlay.is-visible { opacity: 1; visibility: visible; }

/* ── Platform Mega Panel ─────────────────────────────────────────────────── */

/* Inner: stack header above the three-tier grid (inherits white bg from base) */
.mega-menu--platform {
  padding-block: 0;
}
.mega-menu--platform .mega-menu__inner {
  flex-direction: column;
  gap: 0;
  padding-block: 0 var(--space-6);
}
.mega-menu__platform-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.mega-menu__platform-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.mega-menu__platform-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mega-menu__deepdive-link.mega-menu__platform-pillar-card,
.mega-menu--outcomes .mega-menu__deepdive-link.outcomes-card-column__parent {
  margin-bottom: var(--space-1);
  padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + 8px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  transition: filter var(--transition-fast);
}
.mega-menu__platform-pillar-card .mega-menu__deepdive-icon,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  pointer-events: none;
  opacity: 0.28;
  line-height: 1;
  width: 96px;
  height: 96px;
  background: transparent;
}
.mega-menu__platform-pillar-card .mega-menu__deepdive-icon i,
.mega-menu__platform-pillar-card .mega-menu__deepdive-icon svg,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-icon i,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-icon svg {
  width: 96px;
  height: 96px;
}
.mega-menu__platform-pillar-card .mega-menu__deepdive-text,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-text {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.mega-menu__platform-pillar-card .mega-menu__deepdive-name,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-name {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--font-semi);
  color: var(--color-white);
}
.mega-menu__platform-pillar-card .mega-menu__deepdive-name.mega-menu__label--teal,
.mega-menu__platform-pillar-card .mega-menu__deepdive-name.mega-menu__label--sky,
.mega-menu__platform-pillar-card .mega-menu__deepdive-name.mega-menu__label--violet,
.mega-menu__platform-pillar-card .mega-menu__deepdive-name.mega-menu__label--sage,
.mega-menu__platform-pillar-card .mega-menu__deepdive-name.mega-menu__label--honey,
.mega-menu__platform-pillar-card .mega-menu__deepdive-name.mega-menu__label--slate,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-name.mega-menu__label--teal,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-name.mega-menu__label--sky,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-name.mega-menu__label--violet,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-name.mega-menu__label--sage,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-name.mega-menu__label--honey,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-name.mega-menu__label--slate {
  color: var(--color-white);
}
.mega-menu__platform-pillar-card .mega-menu__deepdive-desc,
.mega-menu--outcomes .outcomes-card-column__parent .mega-menu__deepdive-desc {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  color: rgba(255,255,255,0.88);
}
.mega-menu__platform-pillar-card--teal { background: linear-gradient(135deg, #4A9E9C 0%, #2E6866 100%); }
.mega-menu__platform-pillar-card--sky { background: linear-gradient(135deg, #0284C7 0%, #014F7A 100%); }
.mega-menu__platform-pillar-card--violet { background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%); }
.mega-menu__platform-pillar-card--sage { background: linear-gradient(135deg, #9BB8A0 0%, #607D65 100%); }
.mega-menu__platform-pillar-card--honey { background: linear-gradient(135deg, #E8C97A 0%, #B58B2E 100%); }
.mega-menu__platform-pillar-card--teal .mega-menu__deepdive-icon { color: #2E6866; }
.mega-menu__platform-pillar-card--sky .mega-menu__deepdive-icon { color: #014F7A; }
.mega-menu__platform-pillar-card--violet .mega-menu__deepdive-icon { color: #4C1D95; }
.mega-menu__platform-pillar-card--sage .mega-menu__deepdive-icon { color: #607D65; }
.mega-menu__platform-pillar-card--honey .mega-menu__deepdive-icon { color: #B58B2E; }
.mega-menu__platform-footer {
  border-top: 1px solid var(--color-gray-200);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mega-menu__platform-footer-btns {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mega-menu__platform-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-teal-dark);
  border: 1px solid var(--color-teal-light);
  border-radius: var(--radius-md);
  background: var(--color-teal-light);
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mega-menu__platform-footer-btn i,
.mega-menu__platform-footer-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mega-menu__platform-footer-btn:hover {
  border-color: var(--color-teal);
  color: var(--color-teal-dark);
  background: #b3dbda;
}
.mega-menu__platform-hint {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  flex: 1 1 1rem;
  min-width: 0;
}
.mega-menu__platform-view-all {
  color: var(--color-accent);
  font-weight: var(--font-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mega-menu__platform-view-all:hover {
  color: var(--color-charcoal);
}

@media (max-width: 900px) {
  .mega-menu__platform-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .mega-menu__platform-footer-btns {
    width: 100%;
    justify-content: flex-start;
  }

  .mega-menu__platform-footer-btn {
    flex: 1 1 13rem;
    justify-content: center;
  }
}

/* ── Header row ── */
.mega-menu__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-block: var(--space-6) var(--space-2);
  /* border-bottom: 1px solid var(--color-gray-200); */
}
.mega-menu__header.industries {
  display:flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
}
.mega-menu--resources .mega-menu__header,
.mega-menu--company .mega-menu__header { padding-block-start: 0; }

/* Resources and Company link icons use the brand teal accent, matching the
   Platform/Outcomes panels so the mega menu reads as one system. */
.mega-menu--resources .mega-menu__link-icon,
.mega-menu--company .mega-menu__link-icon {
  background: rgba(74, 158, 156, 0.12);
  color: var(--color-teal);
}
.mega-menu--resources .mega-menu__link:hover .mega-menu__link-title,
.mega-menu--company .mega-menu__link:hover .mega-menu__link-title {
  color: var(--color-teal-dark);
}
.mega-menu__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.mega-menu__header-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--font-regular);
  color: var(--color-charcoal);
  line-height: var(--leading-tight);
  margin: 0;
}
.mega-menu__overview-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.mega-menu__overview-link:hover {
  border-color: var(--color-gray-500);
  background: var(--color-gray-50);
}

/* ── Three-tier grid ── */
.mega-menu__platform-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 0;
}

/* Vertical column separators */
.mega-menu__platform-col {
  padding-inline: var(--space-6);
}
.mega-menu__platform-col:first-child { padding-left: 0; }
/* Only the pillars col gets a permanent right border */
.mega-menu__platform-col--pillars {
  border-right: 1px solid var(--color-gray-200);
}
.mega-menu__platform-col:not(:first-child) {
  padding-left: var(--space-6);
}
.mega-menu__platform-col--full { padding-inline: 0; }

/* ── Column headers ── */
.mega-menu__col-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.65rem;
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-400);
  margin-bottom: var(--space-4);
  padding-block: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}

/* ── Pillars ── */
.mega-menu__pillar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mega-menu__pillar-item { border-radius: var(--radius-md); }
.mega-menu__pillar-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  text-decoration: none;
  min-width: 0;
}
/* Pillar hover/active: light pillar colour (matches icon bg tint) */
.mega-menu__pillar-link:hover:has(.mega-menu__label--teal),
.mega-menu__pillar-item.is-active-pillar .mega-menu__pillar-link:has(.mega-menu__label--teal)   { background: rgba(74,158,156,0.12); }
.mega-menu__pillar-link:hover:has(.mega-menu__label--sky),
.mega-menu__pillar-item.is-active-pillar .mega-menu__pillar-link:has(.mega-menu__label--sky)    { background: rgba(56,189,248,0.12); }
.mega-menu__pillar-link:hover:has(.mega-menu__label--violet),
.mega-menu__pillar-item.is-active-pillar .mega-menu__pillar-link:has(.mega-menu__label--violet) { background: rgba(139,92,246,0.12); }
.mega-menu__pillar-link:hover:has(.mega-menu__label--sage),
.mega-menu__pillar-item.is-active-pillar .mega-menu__pillar-link:has(.mega-menu__label--sage)   { background: rgba(155,184,160,0.12); }
.mega-menu__pillar-link:hover:has(.mega-menu__label--honey),
.mega-menu__pillar-item.is-active-pillar .mega-menu__pillar-link:has(.mega-menu__label--honey)  { background: rgba(232,201,122,0.12); }
.mega-menu__pillar-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mega-menu__pillar-icon i,
.mega-menu__pillar-icon svg { width: 16px; height: 16px; }
.mega-menu__pillar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-menu__pillar-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  line-height: 1.3;
  overflow-wrap: break-word;
}
.mega-menu__pillar-desc {
  font-size: var(--text-2xs);
  color: var(--color-gray-500);
  line-height: 1.4;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Features ── */
.mega-menu__deepdive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}
.mega-menu__deepdive-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s ease, opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}
.mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):not(.outcomes-card-column__parent):hover { background: var(--color-gray-50); }
.mega-menu__deepdive-icon:not(.mega-menu__link-icon) {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mega-menu__deepdive-icon:not(.mega-menu__link-icon) i,
.mega-menu__deepdive-icon:not(.mega-menu__link-icon) svg { width: 14px; height: 14px; }
.mega-menu__deepdive-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-menu__deepdive-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color var(--transition-fast);
}
/* Default: lock name to dark regardless of label modifier class */
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card) .mega-menu__deepdive-name { color: var(--color-gray-900); }
/* Industries panel: teal name colour, teal hover bg, 3-column grid */
.mega-menu--industries .mega-menu__deepdive-name { color: var(--color-teal-dark); }
.mega-menu--industries .mega-menu__deepdive-link:hover { background: rgba(74,158,156,0.08); }
.mega-menu--industries .mega-menu__deepdive-grid { grid-template-columns: repeat(3, 1fr); }
.mega-menu__deepdive-desc {
  font-size: var(--text-2xs);
  color: var(--color-gray-500);
  line-height: 1.4;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Normalize card row sizing to company panel for deepdive rows that now use mega-menu__link markup. */
.mega-menu--platform .mega-menu__deepdive-link.mega-menu__link,
.mega-menu--outcomes .mega-menu__deepdive-link.mega-menu__link,
.mega-menu--industries .mega-menu__deepdive-link.mega-menu__link {
  gap: var(--space-3);
  padding: var(--space-3);
}

.mega-menu--platform .mega-menu__deepdive-link.mega-menu__link .mega-menu__link-icon,
.mega-menu--outcomes .mega-menu__deepdive-link.mega-menu__link .mega-menu__link-icon,
.mega-menu--industries .mega-menu__deepdive-link.mega-menu__link .mega-menu__link-icon {
  width: 40px;
  height: 40px;
}

.mega-menu--platform .mega-menu__deepdive-link.mega-menu__link .mega-menu__link-desc,
.mega-menu--outcomes .mega-menu__deepdive-link.mega-menu__link .mega-menu__link-desc,
.mega-menu--industries .mega-menu__deepdive-link.mega-menu__link .mega-menu__link-desc {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  color: var(--color-gray-500);
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  text-overflow: clip;
}

/* Industries should keep compact, truncated item descriptions. */
.mega-menu--industries .mega-menu__deepdive-link.mega-menu__link .mega-menu__link-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Functions row — displayed below the grid, hidden until pillar hover ── */
.mega-menu__platform-functions-row {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.mega-menu__platform-functions-row.is-active {
  max-height: 500px;
  opacity: 1;
  transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease 0.1s;
}

/* Per-pillar function panels */
.mega-menu__functions-panel {
  display: none;
}
.mega-menu__functions-panel.is-visible {
  display: block;
}

/* Pillar tagline above functions */
.mega-menu__functions-tagline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 1.6vw, var(--text-2xl));
  font-weight: var(--font-regular);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4);
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

/* ── Functions grid ── */
.mega-menu__functions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
}
.mega-menu__function {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: default;
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
}

/* ── Colour modifiers (icon bg + label colour) ── */
.mega-menu__icon--teal   { background: rgba(74,158,156,0.12);  color: var(--color-teal); }
.mega-menu__icon--sky    { background: rgba(63,127,166,0.14);  color: var(--color-sky); }
.mega-menu__icon--violet { background: rgba(106,98,133,0.14);  color: var(--color-violet); }
.mega-menu__icon--slate  { background: rgba(100,116,139,0.14); color: var(--color-slate); }
.mega-menu__icon--sage   { background: rgba(155,184,160,0.12); color: var(--color-sage); }
.mega-menu__icon--honey  { background: rgba(232,201,122,0.12); color: var(--color-honey); }
/* Generic label colours — dark variants for legibility on light tint bgs */
.mega-menu__label--teal   { color: var(--color-teal-dark); }
.mega-menu__label--sky    { color: var(--color-sky-dark); }
.mega-menu__label--violet { color: var(--color-violet-dark); }
.mega-menu__label--slate  { color: var(--color-slate-dark); }
.mega-menu__label--sage   { color: var(--color-sage-dark); }
.mega-menu__label--honey  { color: var(--color-honey-dark); }
/* Pillar name colours — compound selector (0,2,0) overrides any inherited default */
.mega-menu__pillar-name.mega-menu__label--teal   { color: var(--color-teal-dark); }
.mega-menu__pillar-name.mega-menu__label--sky    { color: var(--color-sky-dark); }
.mega-menu__pillar-name.mega-menu__label--violet { color: var(--color-violet-dark); }
.mega-menu__pillar-name.mega-menu__label--slate  { color: var(--color-slate-dark); }
.mega-menu__pillar-name.mega-menu__label--sage   { color: var(--color-sage-dark); }
.mega-menu__pillar-name.mega-menu__label--honey  { color: var(--color-honey-dark); }

/* ── Deep-dive title: reveal dark pillar colour on hover and pillar-hover ── */
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover .mega-menu__label--teal,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-dd-hovered .mega-menu__label--teal,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted .mega-menu__label--teal   { color: var(--color-teal-dark); }
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover .mega-menu__label--sky,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-dd-hovered .mega-menu__label--sky,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted .mega-menu__label--sky    { color: var(--color-sky-dark); }
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover .mega-menu__label--violet,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-dd-hovered .mega-menu__label--violet,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted .mega-menu__label--violet { color: var(--color-violet-dark); }
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover .mega-menu__label--sage,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-dd-hovered .mega-menu__label--sage,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted .mega-menu__label--sage   { color: var(--color-sage-dark); }
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover .mega-menu__label--honey,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-dd-hovered .mega-menu__label--honey,
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted .mega-menu__label--honey  { color: var(--color-honey-dark); }

/* ── Deep-dive background: light pillar colour on hover and pillar-hover ── */
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover:has(.mega-menu__label--teal),
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted:has(.mega-menu__label--teal)   { background: rgba(74,158,156,0.12); }
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover:has(.mega-menu__label--sky),
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted:has(.mega-menu__label--sky)    { background: rgba(56,189,248,0.12); }
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover:has(.mega-menu__label--violet),
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted:has(.mega-menu__label--violet) { background: rgba(139,92,246,0.12); }
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover:has(.mega-menu__label--sage),
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted:has(.mega-menu__label--sage)   { background: rgba(155,184,160,0.12); }
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):hover:has(.mega-menu__label--honey),
.mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card).is-highlighted:has(.mega-menu__label--honey)  { background: rgba(232,201,122,0.12); }

/* ── Hover filter: dim non-matching items ── */
.mega-menu__deepdive-link.is-dimmed { opacity: 0.3; transition: background 0.2s ease, opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.mega-menu__function.is-dimmed { opacity: 0.3; }

/* ── Fallback / empty state ── */
.mega-menu__empty { font-size: var(--text-sm); color: var(--color-gray-400); padding: var(--space-4) 0; }

/* ── Outcomes Mega Panel ──────────────────────────────────────────────────── */

.mega-menu--outcomes {
  padding-block: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--nav-stack-height));
}
.has-mega-menu.is-open > .mega-menu--outcomes { transform: translateY(0); }
.outcomes-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.outcomes-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-block: var(--space-6) var(--space-2);
  /* border-bottom: 1px solid var(--color-gray-200); */
}
.outcomes-panel__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.outcomes-panel__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--font-regular);
  color: var(--color-charcoal);
  line-height: var(--leading-tight);
}
.outcomes-panel__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-gray-500);
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}
.outcomes-panel__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-800);
}

/* Body / Columns */
.outcomes-panel__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  padding-bottom: var(--space-6);
  overflow-y: auto;
  overflow-x: hidden;
}
.outcomes-panel__body--cards {
  display: block;
}
.outcomes-panel__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.outcomes-card-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.outcomes-card-column__children {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mega-menu--outcomes .outcomes-card-column__parent--teal {
  background: linear-gradient(135deg, #4A9E9C 0%, #2E6866 100%);
}
.mega-menu--outcomes .outcomes-card-column__parent--sky {
  background: linear-gradient(135deg, #3F7FA6 0%, #2F5F7D 100%);
}
.mega-menu--outcomes .outcomes-card-column__parent--violet {
  background: linear-gradient(135deg, #6A6285 0%, #4E4665 100%);
}
.mega-menu--outcomes .outcomes-card-column__parent--slate {
  background: linear-gradient(135deg, #64748B 0%, #334155 100%);
}
.mega-menu--outcomes .outcomes-card-column__parent--sage {
  background: linear-gradient(135deg, #9BB8A0 0%, #607D65 100%);
}
.mega-menu--outcomes .outcomes-card-column__parent--honey {
  background: linear-gradient(135deg, #E8C97A 0%, #B58B2E 100%);
}
.mega-menu--outcomes .outcomes-card-column__parent--teal .mega-menu__deepdive-icon { color: #2E6866; }
.mega-menu--outcomes .outcomes-card-column__parent--sky .mega-menu__deepdive-icon { color: #2F5F7D; }
.mega-menu--outcomes .outcomes-card-column__parent--violet .mega-menu__deepdive-icon { color: #4E4665; }
.mega-menu--outcomes .outcomes-card-column__parent--slate .mega-menu__deepdive-icon { color: #334155; }
.mega-menu--outcomes .outcomes-card-column__parent--sage .mega-menu__deepdive-icon { color: #607D65; }
.mega-menu--outcomes .outcomes-card-column__parent--honey .mega-menu__deepdive-icon { color: #B58B2E; }
.mega-menu--outcomes .mega-menu__deepdive-name {
  color: var(--color-gray-900);
}
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover .mega-menu__label--teal { color: var(--color-teal-dark); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover .mega-menu__label--sky { color: var(--color-sky-dark); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover .mega-menu__label--violet { color: var(--color-violet-dark); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover .mega-menu__label--slate { color: var(--color-slate-dark); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover .mega-menu__label--sage { color: var(--color-sage-dark); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover .mega-menu__label--honey { color: var(--color-honey-dark); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover:has(.mega-menu__label--teal) { background: rgba(74,158,156,0.12); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover:has(.mega-menu__label--sky) { background: rgba(63,127,166,0.12); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover:has(.mega-menu__label--violet) { background: rgba(106,98,133,0.12); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover:has(.mega-menu__label--slate) { background: rgba(100,116,139,0.12); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover:has(.mega-menu__label--sage) { background: rgba(155,184,160,0.12); }
.mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):hover:has(.mega-menu__label--honey) { background: rgba(232,201,122,0.12); }
.outcomes-column__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.outcomes-column__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.outcomes-column__icon--teal  { background: rgba(74,158,156,0.12);  color: var(--color-teal); }
.outcomes-column__icon--sky   { background: rgba(63,127,166,0.15);  color: var(--color-sky); }
.outcomes-column__icon--violet{ background: rgba(106,98,133,0.15);  color: var(--color-violet); }
.outcomes-column__icon--slate { background: rgba(100,116,139,0.15); color: var(--color-slate); }
.outcomes-column__icon--honey { background: rgba(232,201,122,0.15); color: var(--color-honey); }
.outcomes-column__icon--sage  { background: rgba(155,184,160,0.15); color: var(--color-sage); }
.outcomes-column__title {
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  color: var(--color-charcoal);
  line-height: var(--leading-snug);
}
.outcomes-column__subtitle {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: var(--space-1);
  line-height: var(--leading-normal);
}
.outcomes-column__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Outcome Chip */
.outcome-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  text-align: left;
}
.outcome-chip__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
  line-height: var(--leading-snug);
}
.outcome-chip__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-gray-300);
}
.outcome-chip__check svg:last-child { display: none; }
.outcome-chip__check svg:first-child { display: block; }

.outcome-chip:hover {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 1px var(--color-teal);
}

/* Selected state */
.outcome-chip[aria-pressed="true"] {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}
.outcome-chip[aria-pressed="true"] .outcome-chip__label { color: var(--color-white); }
.outcome-chip[aria-pressed="true"] .outcome-chip__check { color: var(--color-coral); }
.outcome-chip[aria-pressed="true"] .outcome-chip__check svg:first-child { display: none; }
.outcome-chip[aria-pressed="true"] .outcome-chip__check svg:last-child { display: block; }
.outcome-chip[aria-pressed="true"] .outcome-chip__check svg:last-child { overflow: visible; }
.outcome-chip[aria-pressed="true"] .outcome-chip__check svg:last-child circle {
  stroke: rgba(255,255,255,0.6);
  stroke-width: 1.5px;
}
.outcome-chip[aria-pressed="true"]:hover {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  box-shadow: none;
}

/* Footer */
.outcomes-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}
.outcomes-panel__hint {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}
.outcomes-panel__view-all {
  color: var(--color-accent);
  font-weight: var(--font-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.outcomes-panel__view-all:hover { color: var(--color-charcoal); }
.outcomes-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.outcomes-panel__actions .btn[disabled],
.outcomes-panel__actions .btn[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}


/* Mobile toggle */
.site-nav-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); }
.site-nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--color-gray-700); border-radius: 99px; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.site-nav-toggle.is-active .site-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle.is-active .site-nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-nav-toggle.is-active .site-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav-mobile { background: var(--color-white); border-top: 1px solid var(--color-gray-200); position: fixed; top: var(--site-header-offset, var(--nav-stack-height)); left: 0; right: 0; bottom: 0; overflow-y: auto; z-index: 99; padding: var(--space-6); }
.site-nav-mobile__menu .menu-item { position: relative; }
.site-nav-mobile__menu .has-mega-menu::after { display: none; }
.site-nav-mobile__menu .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  border-bottom: 1px solid var(--color-gray-100);
}
.site-nav-mobile__menu .nav-chevron { display: none; }
.mobile-submenu-toggle {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  border-radius: var(--radius-md);
}
.mobile-submenu-toggle svg { transition: transform var(--transition-fast); }
.mobile-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav-mobile__menu .dropdown-menu,
.site-nav-mobile__menu .mega-menu {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  min-width: 0;
  height: auto;
  background: transparent;
  border: 0;
  border-top: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.site-nav-mobile__menu .dropdown-menu { padding-left: var(--space-4); }
.site-nav-mobile__menu .dropdown-menu .nav-link {
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  padding-right: var(--space-4);
}
.site-nav-mobile__menu .mega-menu__inner,
.site-nav-mobile__menu .outcomes-panel__body,
.site-nav-mobile__menu .outcomes-panel__header,
.site-nav-mobile__menu .outcomes-panel__footer {
  max-width: none;
  padding-inline: var(--space-4);
}
.site-nav-mobile__menu .mega-menu--outcomes {
  z-index: auto;
  max-height: none;
}
.site-nav-mobile__menu .outcomes-panel {
  overflow: visible;
}
.site-nav-mobile__menu .outcomes-panel__body {
  overflow: visible;
  padding-bottom: 0;
}
.site-nav-mobile__menu .mega-menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-3) var(--space-5);
}
.site-nav-mobile__menu .mega-menu__main,
.site-nav-mobile__menu .mega-menu__featured,
.site-nav-mobile__menu .outcomes-panel__columns,
.site-nav-mobile__menu .outcomes-card-column,
.site-nav-mobile__menu .mega-menu__platform-column {
  width: 100%;
  min-width: 0;
}
.site-nav-mobile__menu .mega-menu__featured { flex-shrink: 1; }
.site-nav-mobile__menu .mega-menu__list,
.site-nav-mobile__menu .mega-menu__deepdive-grid,
.site-nav-mobile__menu .mega-menu__platform-columns,
.site-nav-mobile__menu .outcomes-panel__columns {
  grid-template-columns: 1fr;
  display: grid;
  gap: var(--space-2);
}
.site-nav-mobile__menu .mega-menu__link,
.site-nav-mobile__menu .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):not(.outcomes-card-column__parent),
.site-nav-mobile__menu .mega-menu__platform-feature-list .mega-menu__deepdive-link,
.site-nav-mobile__menu .outcomes-card-column__children .mega-menu__deepdive-link {
  background: var(--color-gray-25, #fafafa);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):has(.mega-menu__label--teal),
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):has(.mega-menu__label--teal) {
  background: rgba(74,158,156,0.12);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):has(.mega-menu__label--sky),
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):has(.mega-menu__label--sky) {
  background: rgba(63,127,166,0.12);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):has(.mega-menu__label--violet),
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):has(.mega-menu__label--violet) {
  background: rgba(106,98,133,0.12);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):has(.mega-menu__label--slate),
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):has(.mega-menu__label--slate) {
  background: rgba(100,116,139,0.12);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):has(.mega-menu__label--sage),
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):has(.mega-menu__label--sage) {
  background: rgba(155,184,160,0.12);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card):has(.mega-menu__label--honey),
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent):has(.mega-menu__label--honey) {
  background: rgba(232,201,122,0.12);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card) .mega-menu__label--teal,
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent) .mega-menu__label--teal {
  color: var(--color-teal-dark);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card) .mega-menu__label--sky,
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent) .mega-menu__label--sky {
  color: var(--color-sky-dark);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card) .mega-menu__label--violet,
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent) .mega-menu__label--violet {
  color: var(--color-violet-dark);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card) .mega-menu__label--slate,
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent) .mega-menu__label--slate {
  color: var(--color-slate-dark);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card) .mega-menu__label--sage,
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent) .mega-menu__label--sage {
  color: var(--color-sage-dark);
}
.site-nav-mobile__menu .mega-menu--platform .mega-menu__deepdive-link:not(.mega-menu__platform-pillar-card) .mega-menu__label--honey,
.site-nav-mobile__menu .mega-menu--outcomes .mega-menu__deepdive-link:not(.outcomes-card-column__parent) .mega-menu__label--honey {
  color: var(--color-honey-dark);
}
.site-nav-mobile__menu .mega-menu__featured-card {
  padding: var(--space-5);
}
.site-nav-mobile__menu .mega-menu__header {
  padding-block: 0 var(--space-2);
}
.site-nav-mobile__menu .mega-menu__header-title,
.site-nav-mobile__menu .outcomes-panel__heading {
  font-size: clamp(var(--text-lg), 5vw, var(--text-2xl));
}
.site-nav-mobile__menu .outcomes-panel__footer {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3) 0;
}
.site-nav-mobile__menu .mega-menu__platform-footer {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}
.site-nav-mobile__menu .mega-menu--industries .mega-menu__deepdive-grid,
.site-nav-mobile__menu .mega-menu--platform .mega-menu__platform-columns,
.site-nav-mobile__menu .mega-menu--outcomes .outcomes-panel__columns {
  grid-template-columns: 1fr;
}
.site-nav-mobile__actions { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }

/* Utility nav, stacked under the main menu inside the drawer. The desktop bar
   is hidden at this breakpoint (see Responsive), so this is the only copy on
   screen — same links, restyled to match the drawer's list rhythm. */
.site-nav-mobile__utility {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.site-nav-mobile__utility .menu-item a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  border-bottom: 1px solid var(--color-gray-100);
}
.site-nav-mobile__utility .menu-item a:hover { color: var(--color-accent); background: transparent; }
.site-nav-mobile__utility .menu-item--primary > a { color: var(--color-accent); font-weight: var(--font-semi); }
.site-nav-mobile__utility a svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }

/* ── Hero Section ─────────────────────────────────────────────────────────── */

.section-hero {
  padding-block: 0;
  background: var(--color-brand);
  position: relative;
  overflow: clip;
  isolation: isolate;
  color: var(--color-white);
}
/* Background image layer — opacity & blend mode are controllable via CSS custom props */
.section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-bg-url);
  background-size: cover;
  background-position: var(--hero-bg-position, center);
  opacity: var(--hero-bg-opacity, 1);
  mix-blend-mode: var(--hero-bg-blend, normal);
}
.section-hero--light { background-color: var(--bg-primary); color: var(--color-charcoal); }
.section-hero--alt   { background-color: var(--bg-secondary); color: var(--color-charcoal); }
.section-hero--dark  { background-color: var(--color-brand);  color: var(--color-white); }
.section-hero--brand { background-image: var(--gradient-brand); color: var(--color-white); }

.section-hero--dark .section-hero__headline,
.section-hero--dark .section-hero__subheading { color: var(--color-white); }
.section-hero--dark .eyebrow { color: var(--color-accent); }
.section-hero--dark .btn--outline,
.section-hero--brand .btn--outline { color: var(--color-white); border-color: rgba(255,255,255,0.4); }

.section-hero .container { position: relative; z-index: 3; }

/* ---------- shortcodes / graphics opt out of the hero's color scheme ----------
   The scheme classes above set `color` on the section, which inherits into
   everything below it — including product illustrations and .flv graphics,
   whose own CSS only colors some elements and lets the rest inherit. On a dark
   hero that turned body text inside a white product card white-on-white. These
   containers render self-contained artwork on their own backgrounds, so they
   reset to the normal ink and let their internal CSS take over. Scoped to the
   container itself (not a blanket `*`) so descendants that do set a color keep
   winning. */
.section-hero__shortcode,
.section-hero__surface--shortcode,
.section-hero__surface-wrap .frontlion-product-illustration,
.section-hero__shortcode .flv,
.section-hero__surface--shortcode .flv {
  color: var(--color-charcoal);
}
/* The scheme rules also target .eyebrow directly, and shortcodes render their
   own eyebrows inside the artwork. Put those back to the accent the graphics
   are designed around instead of the hero's on-dark treatment. The overlay
   variants of those rules sit later in this file at equal specificity, so
   :where() on the section class raises this without inflating it further. */
.section-hero:where([class*="section-hero--"]) .section-hero__shortcode .eyebrow,
.section-hero:where([class*="section-hero--"]) .section-hero__surface--shortcode .eyebrow {
  color: var(--color-accent);
}
.section-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-24);
}
.section-hero--has-secondary .section-hero__inner { grid-template-columns: 1fr 1fr; }
.section-hero--cols-4-8 .section-hero__inner { grid-template-columns: 1fr 2fr; }
.section-hero--cols-8-4 .section-hero__inner { grid-template-columns: 2fr 1fr; }
.section-hero--cols-3-9 .section-hero__inner { grid-template-columns: 1fr 3fr; }
.section-hero--cols-9-3 .section-hero__inner { grid-template-columns: 3fr 1fr; }
.section-hero--cols-12  .section-hero__inner { grid-template-columns: 1fr; }
.section-hero--center .section-hero__inner { text-align: center; place-items: center; }
.section-hero--full { min-height: 100vh; }
.section-hero--medium { min-height: 70vh; }

.section-hero .eyebrow { font-size: var(--text-xs); }
.section-hero__feature-icon { width: 40px; height: 40px; margin-bottom: var(--space-4); color: var(--color-accent-2); }
/* Inline variant: sits to the right of the eyebrow text, scaled down to the
   eyebrow's cap height and inheriting its color so the pair reads as one mark.
   `currentColor` keeps it correct across every hero scheme override below. */
.section-hero__feature-icon--inline {
  width: 1.15em; height: 1.15em;
  margin-bottom: 0;
  color: currentColor;
  flex: 0 0 auto;
}
.section-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-6xl));
  font-weight: var(--font-semi);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}
.section-hero__subheading { font-size: clamp(var(--text-lg), 1.75vw, var(--text-xl)); opacity: 0.85; margin-bottom: var(--space-8); line-height: var(--leading-relaxed); }
.section-hero--center .section-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: var(--max-width-content-lg);
}
.section-hero__content .eyebrow { display: flex; }
.section-hero--center .section-hero__content .eyebrow { justify-content: center; }
.section-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.section-hero__media img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); }
.section-hero__form {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
.section--light .section-hero__form {
  background: rgba(255,255,255,0.55);
}
.section-hero__shortcode {
  position: relative;
  z-index: 4;
  border-radius: var(--radius-2xl);
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Gated on `.js`: the `is-loading` class is printed server-side, but only JS
   ever clears it. Without the gate, any failure to run main.js leaves the hero
   embed permanently invisible — a blank hero on an otherwise fine page. */
.js .section-hero__shortcode.is-loading {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985) translateY(8px);
  pointer-events: none;
  transition: none;
}

/* Failsafe: if the media never reports ready and the 1800ms JS timeout also
   never runs, reveal the embed anyway rather than hold a blank hero. */
.js .section-hero__shortcode.is-loading {
  animation: fl-hero-shortcode-failsafe 0.35s ease 3s forwards;
}
@keyframes fl-hero-shortcode-failsafe {
  to { opacity: 1; visibility: visible; transform: none; }
}
.section-hero__shortcode.is-ready {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ── Archive / Taxonomy Page Header ─────────────────────────────────────── */

.archive-header {
  padding-block: var(--space-16) var(--space-12);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.archive-header .eyebrow {
  justify-content: center;
  color: var(--color-accent);
}

.archive-header__title {
  color: var(--color-charcoal);
  margin-bottom: var(--space-4);
}

.archive-header__desc {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
  color: var(--color-warm-gray);
  max-width: 58ch;
  margin-inline: auto;
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
  text-align:center;
}

.archive-header.container p{
  align-self: center;
}

.archive-header__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (max-width: 768px) {
  .archive-header {
    padding-block: var(--space-10) var(--space-8);
  }
}

.section-hero__bg-video { position: absolute; inset: 0; z-index: 1; }
.section-hero__bg-video video { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.section-hero__bg-video::after { content: ''; position: absolute; inset: 0; background: rgba(74,67,64,0.5); }
/* With the mockup dark scrim the film carries its own contrast, so the legacy
   double-dim (0.3 opacity + flat wash) is dropped — otherwise the video is
   crushed to near-black. Other overlay styles keep the old dimming. */
.section-hero--overlay-dark .section-hero__bg-video video { opacity: 1; }
.section-hero--overlay-dark .section-hero__bg-video::after { display: none; }
.section-hero__overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Dark scrim — directional, matching the WebRefit mockups: heaviest behind the
   text on the left, clearing to transparent on the right so the photo/film
   reads. Falls back to a flat wash below 980px where the copy stacks over the
   image. (mockups: .fl-ac-hero-scrim, .fl-vhero-scrim, .fl-scrim) */
.section-hero--overlay-dark  .section-hero__overlay { background: linear-gradient(97deg, rgba(46,38,32,0.74) 0%, rgba(46,38,32,0.52) 42%, rgba(46,38,32,0.14) 74%, rgba(46,38,32,0) 100%); }
/* Video heroes carry a lighter scrim in the mockups — the film is already
   dimmed by .section-hero__bg-video, so a full-weight wash crushes it.
   (mockups: .fl-vhero-scrim / .fl-scrim on banking, public-sector,
   transportation, homepage) */
.section-hero--overlay-dark:has(.section-hero__bg-video) .section-hero__overlay { background: linear-gradient(100deg, rgba(30,22,18,0.62) 0%, rgba(30,22,18,0.34) 42%, rgba(30,22,18,0.06) 70%); }
@media (max-width: 980px) {
	.section-hero--overlay-dark .section-hero__overlay { background: linear-gradient(rgba(46,38,32,0.66), rgba(46,38,32,0.66)); }
	.section-hero--overlay-dark:has(.section-hero__bg-video) .section-hero__overlay { background: linear-gradient(rgba(30,22,18,0.58), rgba(30,22,18,0.58)); }
}
.section-hero--overlay-warm  .section-hero__overlay { background: linear-gradient(135deg, rgba(237,164,128,0.35), rgba(228,217,204,0.25)); mix-blend-mode: multiply; }
.section-hero--overlay-cool  .section-hero__overlay { background: linear-gradient(135deg, rgba(74,158,156,0.3), rgba(200,230,229,0.2)); }
.section-hero--overlay-coral .section-hero__overlay { background: linear-gradient(135deg, rgba(237,164,128,0.5), rgba(212,118,74,0.4)); mix-blend-mode: multiply; }

/* When inside a page with a theme color override (pillar / outcome / feature),
   use that accent color as the overlay gradient over any bg image or video. */
/* Theme-color overlay: suppress the section background so the photo shows through,
   then lay a semi-transparent accent-tinted gradient over it for text legibility. */
.pillar-page .section-hero--has-bg,
.outcome-layout-accent .section-hero--has-bg,
.feature-page .section-hero--has-bg { background: none; --hero-bg-opacity: 1; }
/* The accent tint is a DEFAULT, applied only when the hero has no explicit
   Overlay Style chosen in ACF. Picking an overlay (Dark Scrim, Cool Teal, …)
   emits .section-hero--overlay-* and must win — otherwise the field is
   silently ignored on every pillar/outcome/feature hero with a background. */
.pillar-page .section-hero--has-bg:not([class*="section-hero--overlay-"]) .section-hero__overlay,
.outcome-layout-accent .section-hero--has-bg:not([class*="section-hero--overlay-"]) .section-hero__overlay,
.feature-page .section-hero--has-bg:not([class*="section-hero--overlay-"]) .section-hero__overlay { background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 75%, #000 ) 0%, color-mix(in srgb, var(--color-accent) 40%, #000) 100%); opacity: 0.82; }
.pillar-page .section-hero--has-bg:not([class*="section-hero--overlay-"]) .section-hero__bg-video::after,
.outcome-layout-accent .section-hero--has-bg:not([class*="section-hero--overlay-"]) .section-hero__bg-video::after,
.feature-page .section-hero--has-bg:not([class*="section-hero--overlay-"]) .section-hero__bg-video::after { background: color-mix(in srgb, var(--color-accent) 60%, #000); opacity: 0.8; }

/* Feature page: bg-image hero — taller, image offset down */
.feature-page .section-hero--has-bg {
  min-height: 560px;
}
/*
.feature-page .section-hero--has-bg .section-hero__inner {
  padding-block: var(--space-32);
}
*/

/* Pillar hero floating function badges — light glassy pills drifting behind the text */
.hero-functions {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: auto;
}
.hero-function-badge {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  line-height: 1.1;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
  opacity: 0;
  pointer-events: auto;
  cursor: default;
  user-select: none;
  transition: opacity 0.5s ease, filter 0.4s ease, background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}
/* Resting state — light but readable */
.hero-functions.is-ready .hero-function-badge { opacity: 0.32; }
/* Hover lifts a single badge to full strength; transform keeps animating */
.hero-functions.is-ready .hero-function-badge:hover,
.hero-functions.is-ready .hero-function-badge.is-hovered {
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* Behind the hero copy — blurred and non-interactive */
.hero-function-badge.is-behind {
  filter: blur(4px);
}

@media (max-width: 768px) {
  .hero-function-badge { font-size: var(--text-xs); padding: 0.4rem 0.85rem; }
}

/* Overlay text colours — dark/coral force white; warm/cool force dark-brand */
.section-hero--overlay-dark  .eyebrow,
.section-hero--overlay-coral .eyebrow { color: rgba(255,255,255,0.8); }
.section-hero--overlay-warm  .eyebrow,
.section-hero--overlay-cool  .eyebrow { color: rgba(74,67,64,0.75); }

.section-hero--overlay-dark  .section-hero__headline,
.section-hero--overlay-coral .section-hero__headline { color: var(--color-white); }
.section-hero--overlay-warm  .section-hero__headline,
.section-hero--overlay-cool  .section-hero__headline { color: var(--color-brand); }

.section-hero--overlay-dark  .section-hero__subheading,
.section-hero--overlay-coral .section-hero__subheading { color: rgba(255,255,255,0.82); opacity: 1; }
.section-hero--overlay-warm  .section-hero__subheading,
.section-hero--overlay-cool  .section-hero__subheading { color: rgba(74,67,64,0.8); opacity: 1; }

/* Overlay button overrides — outline button */
.section-hero--overlay-dark  .btn--outline,
.section-hero--overlay-coral .btn--outline { color: var(--color-white); border-color: rgba(255,255,255,0.45); }
.section-hero--overlay-dark  .btn--outline:hover,
.section-hero--overlay-coral .btn--outline:hover { border-color: var(--color-white); background: rgba(255,255,255,0.1); }
.section-hero--overlay-warm  .btn--outline,
.section-hero--overlay-cool  .btn--outline { color: var(--color-brand); border-color: rgba(74,67,64,0.35); }
.section-hero--overlay-warm  .btn--outline:hover,
.section-hero--overlay-cool  .btn--outline:hover { background: rgba(74,67,64,0.08); border-color: rgba(74,67,64,0.6); }

/* When scheme is dark, always use white text — overrides warm/cool overlay color rules */
.section-hero--dark.section-hero--overlay-warm .eyebrow,
.section-hero--dark.section-hero--overlay-cool .eyebrow { color: var(--color-accent); }
.section-hero--dark.section-hero--overlay-warm .section-hero__headline,
.section-hero--dark.section-hero--overlay-cool .section-hero__headline { color: var(--color-white); }
.section-hero--dark.section-hero--overlay-warm .section-hero__subheading,
.section-hero--dark.section-hero--overlay-cool .section-hero__subheading { color: rgba(255,255,255,0.82); opacity: 1; }
.section-hero--dark.section-hero--overlay-warm .btn--outline,
.section-hero--dark.section-hero--overlay-cool .btn--outline { color: var(--color-white); border-color: rgba(255,255,255,0.4); }
.section-hero--dark.section-hero--overlay-warm .btn--outline:hover,
.section-hero--dark.section-hero--overlay-cool .btn--outline:hover { border-color: var(--color-white); background: rgba(255,255,255,0.1); }

.section-hero--center .section-hero__actions { justify-content: center; }

/* Feature + outcome hero variant */
.section-hero--feature,
.section-hero--outcome {
  color: var(--color-white);
}
.section-hero--feature .section-hero__headline,
.section-hero--feature .section-hero__subheading,
.section-hero--feature .eyebrow,
.section-hero--feature .section-hero__feature-icon,
.section-hero--outcome .section-hero__headline,
.section-hero--outcome .section-hero__subheading,
.section-hero--outcome .eyebrow,
.section-hero--outcome .section-hero__feature-icon {
  color: var(--color-white);
}
.section-hero--feature .section-hero__subheading,
.section-hero--outcome .section-hero__subheading {
  opacity: 0.92;
}
.section-hero--feature .section-hero__feature-icon,
.section-hero--outcome .section-hero__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.6rem;
}

.section-hero--feature-teal   { background: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-teal) 100%); }
.section-hero--feature-honey  { background: linear-gradient(135deg, var(--color-honey-dark) 0%, var(--color-honey) 100%); }
.section-hero--feature-sage   { background: linear-gradient(135deg, var(--color-sage-dark) 0%, var(--color-sage) 100%); }
.section-hero--feature-sky    { background: linear-gradient(135deg, var(--color-sky-dark) 0%, var(--color-sky) 100%); }
.section-hero--feature-violet { background: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-violet) 100%); }

.section-hero--outcome-teal   { background: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-teal) 100%); }
.section-hero--outcome-honey  { background: linear-gradient(135deg, var(--color-honey-dark) 0%, var(--color-honey) 100%); }
.section-hero--outcome-sage   { background: linear-gradient(135deg, var(--color-sage-dark) 0%, var(--color-sage) 100%); }
.section-hero--outcome-sky    { background: linear-gradient(135deg, var(--color-sky-dark) 0%, var(--color-sky) 100%); }
.section-hero--outcome-violet { background: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-violet) 100%); }
.section-hero--outcome-slate  { background: linear-gradient(135deg, var(--color-slate-dark) 0%, var(--color-slate) 100%); }

/* ── Platform Hero ────────────────────────────────────────────────────────── */
.section-hero--platform {
  padding-top: var(--space-20);
  padding-bottom: 0;
  overflow: hidden;
}
.section-hero--platform.section-hero--dark  { background-color: var(--color-brand); color: var(--color-white); }
.section-hero--platform.section-hero--brand { background-image: var(--gradient-brand); color: var(--color-white); }
.section-hero--platform.section-hero--light { background-color: var(--bg-primary); }

/* Two-column inner grid */
.hero-platform__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-16);
  align-items: center;
  padding-bottom: var(--space-12);
}

/* Left column */
.hero-platform__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* gap: var(--space-6); */
}
.hero-platform__content-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.hero-platform__right {
  min-width: 0;
}
.hero-platform__right > * {
  width: 100%;
  max-width: 100%;
}
.hero-platform__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem 0.35rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold, 700);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: rgba(212,118,74,0.15);
  color: var(--color-accent);
  width: fit-content;
}
.section-hero--platform.section-hero--light .hero-platform__eyebrow { background: rgba(212,118,74,0.1); }

/* Badge marquee */
.hero-platform__badge-marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.hero-platform__badge-track {
  display: flex;
  width: max-content;
  gap: var(--space-3);
  animation: hero-badge-scroll 30s linear infinite;
}
.hero-platform__badge-marquee:hover .hero-platform__badge-track { animation-play-state: paused; }
@keyframes hero-badge-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Each badge carries --badge-color (solid) and --badge-text (on solid bg).
   Resting state: tinted bg + colored icon. Hover: full solid bg + white text. */
.hero-platform__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.01em;
  /* default (no pillar color): white-tint resting */
  --badge-color: rgba(255,255,255,1);
  --badge-text: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hero-platform__badge i[data-lucide],
.hero-platform__badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
/* Default hover (no color) */
.hero-platform__badge:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* Pillar-colored variants — resting: tinted bg, colored icon, light label */
.hero-platform__badge--teal   { --badge-color: var(--color-teal);   --badge-text: #fff; background: rgba(74,158,156,0.18);  border-color: rgba(74,158,156,0.45);  color: #c8e6e5; }
/* Pillar colour variants — icon inherits text color via currentColor */
.hero-platform__badge--teal   { --badge-color: var(--color-teal);   --badge-text: #fff; background: rgba(74,158,156,0.18);  border-color: rgba(74,158,156,0.45);  color: var(--color-teal); }
.hero-platform__badge--sage   { --badge-color: var(--color-sage);   --badge-text: #fff; background: rgba(155,184,160,0.18); border-color: rgba(155,184,160,0.45); color: var(--color-sage); }
.hero-platform__badge--honey  { --badge-color: var(--color-honey);  --badge-text: var(--color-charcoal); background: rgba(232,201,122,0.18); border-color: rgba(232,201,122,0.45); color: var(--color-honey); }
.hero-platform__badge--sky    { --badge-color: var(--color-sky);    --badge-text: #fff; background: rgba(63,127,166,0.18);  border-color: rgba(63,127,166,0.45);  color: var(--color-sky); }
.hero-platform__badge--violet { --badge-color: var(--color-violet); --badge-text: #fff; background: rgba(106,98,133,0.18);  border-color: rgba(106,98,133,0.45);  color: var(--color-violet); }

/* Hover: fill with full pillar color, flip to --badge-text */
.hero-platform__badge--teal:hover,
.hero-platform__badge--sage:hover,
.hero-platform__badge--honey:hover,
.hero-platform__badge--sky:hover,
.hero-platform__badge--violet:hover {
  background: var(--badge-color);
  border-color: var(--badge-color);
  color: var(--badge-text);
}

/* Light scheme — resting */
.section-hero--platform.section-hero--light .hero-platform__badge {
  border-color: rgba(74,67,64,0.16);
  background: rgba(255,255,255,0.8);
  color: var(--color-charcoal);
}
.section-hero--platform.section-hero--light .hero-platform__badge:hover {
  background: rgba(74,67,64,0.1);
  border-color: rgba(74,67,64,0.35);
  color: var(--color-charcoal);
}
.section-hero--platform.section-hero--light .hero-platform__badge--teal   { background: rgba(74,158,156,0.1);  border-color: rgba(74,158,156,0.3);  color: var(--color-teal-dark); }
.section-hero--platform.section-hero--light .hero-platform__badge--sage   { background: rgba(155,184,160,0.1); border-color: rgba(155,184,160,0.3); color: var(--color-sage-dark); }
.section-hero--platform.section-hero--light .hero-platform__badge--honey  { background: rgba(232,201,122,0.1); border-color: rgba(232,201,122,0.3); color: var(--color-honey-dark); }
.section-hero--platform.section-hero--light .hero-platform__badge--sky    { background: rgba(63,127,166,0.1);  border-color: rgba(63,127,166,0.3);  color: var(--color-sky-dark); }
.section-hero--platform.section-hero--light .hero-platform__badge--violet { background: rgba(106,98,133,0.1);  border-color: rgba(106,98,133,0.3);  color: var(--color-violet-dark); }
/* Light scheme hover */
.section-hero--platform.section-hero--light .hero-platform__badge--teal:hover,
.section-hero--platform.section-hero--light .hero-platform__badge--sage:hover,
.section-hero--platform.section-hero--light .hero-platform__badge--honey:hover,
.section-hero--platform.section-hero--light .hero-platform__badge--sky:hover,
.section-hero--platform.section-hero--light .hero-platform__badge--violet:hover {
  background: var(--badge-color);
  border-color: var(--badge-color);
  color: var(--badge-text);
}

/* ── Right: Animated Scorecard ──────────────────────────────────────────── */
.hero-platform__scorecard {
  position: relative;
  align-self: flex-end;
}
.hero-platform__sc-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  right: -60px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,118,74,0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-platform__sc-panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(74,67,64,0.12);
  border-radius: var(--radius-2xl);
  box-shadow: 0 36px 70px -38px rgba(74,67,64,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
  color: var(--color-charcoal);
}

/* Scorecard header */
.hero-platform__sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.375rem;
  border-bottom: 1px solid rgba(74,67,64,0.1);
}
.hero-platform__sc-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-charcoal);
}
.hero-platform__sc-subtitle {
  font-size: var(--text-xs);
  color: rgba(74,67,64,0.55);
  margin-top: 2px;
}
.hero-platform__sc-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-2);
  background: var(--bg-cool, #F4F9F9);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
}
.hero-platform__sc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-2);
  animation: sc-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* KPI tiles */
.hero-platform__sc-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(74,67,64,0.1);
}
.hero-platform__sc-kpi {
  padding: 1rem 1.25rem;
}
.hero-platform__sc-kpi + .hero-platform__sc-kpi {
  border-left: 1px solid rgba(74,67,64,0.1);
}
.hero-platform__sc-kpi-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(74,67,64,0.5);
}
.hero-platform__sc-kpi-value {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.05;
  margin-top: 0.4rem;
  color: var(--color-charcoal);
}
.hero-platform__sc-kpi-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 0.35rem;
}
.hero-platform__sc-kpi-delta--up     { color: #2D9E6B; }
.hero-platform__sc-kpi-delta--down   { color: #2D9E6B; }
.hero-platform__sc-kpi-delta--neutral { color: rgba(74,67,64,0.5); }

/* Location progress rows */
.hero-platform__sc-rows {
  padding: 1rem 1.125rem 0.5rem;
}
.hero-platform__sc-rows-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(74,67,64,0.5);
  padding: 0 0.25rem;
  margin-bottom: 0.5rem;
}
.hero-platform__sc-rows-hint { font-weight: 400; }
.hero-platform__sc-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3rem 0.25rem;
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}
.hero-platform__sc-row:hover,
.hero-platform__sc-row.is-active { background: var(--bg-warm, #FDF5EF); }
.hero-platform__sc-row-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-charcoal);
  min-width: 7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-platform__sc-bar-track {
  flex: 1;
  height: 7px;
  background: rgba(74,67,64,0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.hero-platform__sc-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--bar-scale, 0));
  animation: sc-bar-grow 0.9s cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: calc(var(--bar-index, 0) * 150ms + 500ms);
}
@keyframes sc-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(var(--bar-scale, 0)); }
}
.hero-platform__sc-row-pct {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(74,67,64,0.65);
  min-width: 2.5rem;
  text-align: right;
}

/* AI insight card */
.hero-platform__sc-ai {
  margin: 0.75rem 1.125rem 1.125rem;
  background: var(--color-brand);
  border-radius: var(--radius-xl);
  padding: 0.9rem 1rem;
}
.hero-platform__sc-ai-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero-platform__sc-ai-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.14);
  color: #fff;
  flex-shrink: 0;
}
.hero-platform__sc-ai-icon i[data-lucide] { width: 14px; height: 14px; }
.hero-platform__sc-ai-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.hero-platform__sc-ai-text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #fff;
  margin-top: 0.65rem;
}
.hero-platform__sc-ai-bar {
  height: 3px;
  background: rgba(255,255,255,0.16);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 0.8rem;
}
.hero-platform__sc-ai-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transform-origin: left center;
  transform: scaleX(0);
  width: 100%;
  animation: sc-ai-progress 7s linear 1.5s infinite;
}
@keyframes sc-ai-progress {
  0%   { transform: scaleX(0); }
  85%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* ── Integrations strip ─────────────────────────────────────────────────── */
.hero-platform__integrations {
  padding: var(--space-8) 0 var(--space-10);
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.14);
}
.section-hero--platform.section-hero--light .hero-platform__integrations {
  border-top-color: rgba(74,67,64,0.1);
  background: var(--bg-secondary);
}
.hero-platform__integ-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.hero-platform__integ-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 560;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.9);
  margin: 0;
}
.section-hero--platform.section-hero--light .hero-platform__integ-heading { color: var(--color-charcoal); }
.hero-platform__integ-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin: 0;
}
.section-hero--platform.section-hero--light .hero-platform__integ-sub { color: rgba(74,67,64,0.55); }

/* Social proof line below CTAs */
.hero-platform__social-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin: 0;
}
.hero-platform__social-proof strong { color: rgba(255,255,255,0.75); font-weight: 600; }
.hero-platform__social-proof-sep { opacity: 0.4; }
.section-hero--platform.section-hero--light .hero-platform__social-proof { color: rgba(74,67,64,0.55); }
.section-hero--platform.section-hero--light .hero-platform__social-proof strong { color: var(--color-charcoal); }

/* Integrations footer note */
.hero-platform__integ-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}
.hero-platform__integ-footer svg { flex-shrink: 0; opacity: 0.6; }
.hero-platform__integ-footer strong { color: rgba(255,255,255,0.82); font-weight: 600; }
.hero-platform__integ-footer-note { color: rgba(255,255,255,0.45); }
.section-hero--platform.section-hero--light .hero-platform__integ-footer { color: rgba(74,67,64,0.55); }
.section-hero--platform.section-hero--light .hero-platform__integ-footer strong { color: var(--color-charcoal); }
.section-hero--platform.section-hero--light .hero-platform__integ-footer-note { color: rgba(74,67,64,0.45); }

/* Integration type cards — equal-width columns that always fill 100% */
.hero-platform__integ-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.hero-platform__integ-card {
  flex: 1 1 clamp(220px, calc(20% - var(--space-4)), 320px);
  min-width: 0;
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.055);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-platform__integ-card:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.22);
}
.section-hero--platform.section-hero--light .hero-platform__integ-card {
  border-color: rgba(74,67,64,0.1);
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(74,67,64,0.06);
}
.section-hero--platform.section-hero--light .hero-platform__integ-card:hover {
  border-color: rgba(74,67,64,0.22);
  box-shadow: 0 3px 10px rgba(74,67,64,0.1);
}

/* Type label — coral/teal accent via custom prop, falls back to coral */
.hero-platform__integ-type {
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--integ-accent, var(--color-accent));
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.hero-platform__integ-type-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
}
.hero-platform__integ-type-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.2;
}
.section-hero--platform.section-hero--light .hero-platform__integ-type { color: var(--integ-accent, var(--color-accent)); }

/* Integration names list — inline with bullet separators.
   Each <li> is nowrap so the bullet (via ::before) stays glued to its word
   and wrapping only ever happens between items, never mid-item. */
.hero-platform__integ-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.hero-platform__integ-list li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
}
.hero-platform__integ-list li:not(:last-child)::after {
  content: '·';
  margin: 0 0.35em;
  color: rgba(255,255,255,0.3);
}
.section-hero--platform.section-hero--light .hero-platform__integ-list li { color: rgba(74,67,64,0.72); }
.section-hero--platform.section-hero--light .hero-platform__integ-list li:not(:last-child)::after { color: rgba(74,67,64,0.3); }

/* Responsive */
@media (max-width: 1024px) {
  .hero-platform__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding-bottom: var(--space-8);
  }
  .hero-platform__scorecard { align-self: auto; }
  .hero-platform__sc-glow { display: none; }
  .hero-platform__integ-card { flex-basis: clamp(220px, calc(33.333% - var(--space-4)), 360px); }
}
@media (max-width: 768px) {
  .section-hero--platform { padding-top: var(--space-12); }
  .hero-platform__sc-kpi-value { font-size: 1.35rem; }
  .hero-platform__content-stack { gap: var(--space-6); }
  .hero-platform__right {
    width: 100%;
  }
  .hero-platform__integ-card { flex-basis: min(100%, 280px); }
  .hero-platform__integ-list {
    display: block;
  }
  .hero-platform__integ-list li {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .hero-platform__integ-list li:not(:last-child)::after {
    content: none;
  }
  .hero-platform__integ-list li + li {
    margin-top: 0.2rem;
  }
  .hero-platform__integ-heading { font-size: var(--text-lg); }
}

/* Shared feature grids/cards used by archive + single templates */
.features-grid {
  display: grid;
  gap: var(--space-6);
}
.features-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feature-item--card {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.feature-item--linked {
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.feature-item--linked:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.feature-item__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.feature-item__icon-wrap i,
.feature-item__icon-wrap svg {
  width: 24px;
  height: 24px;
}
.feature-item__icon--blue {
  background: var(--color-feat-blue);
  color: var(--color-feat-blue-icon);
}
.feature-item__title {
  margin: 0;
  color: var(--color-brand);
}
.feature-item__body {
  margin: 0;
  color: var(--color-warm-gray);
}

/* ── Features Section ─────────────────────────────────────────────────────── */

.section-features .features-grid {
  display: grid;
  gap: var(--space-6);
}
.features-grid--grid-3 { grid-template-columns: repeat(3, 1fr); }
.features-grid--grid-4 { grid-template-columns: repeat(4, 1fr); }
.features-grid--grid-2 { grid-template-columns: repeat(2, 1fr); }
.features-grid--list   { grid-template-columns: 1fr; max-width: 800px; margin-inline: auto; }

.feature-card {
  position: relative;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  padding: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: #f3f4f6;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); border-color: rgba(15,23,42,0.08); }

.feature-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
}

.feature-card__icon-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: linear-gradient(160deg, var(--feature-accent-start, var(--color-teal-dark)) 0%, var(--feature-accent-end, var(--color-teal)) 100%);
}
.feature-card__icon-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, var(--feature-accent-muted-start, #cfdedc) 0%, var(--feature-accent-muted-end, #eef3f2) 100%);
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.feature-card:hover .feature-card__icon-bg::before { opacity: 0; }
.feature-card__icon-bg i,
.feature-card__icon-bg svg {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  color: var(--feature-icon-color, #fff);
  stroke-width: 1.8;
  transition: color 0.25s ease;
}
.feature-card:hover .feature-card__icon-bg i,
.feature-card:hover .feature-card__icon-bg svg { color: var(--feature-icon-hover-color, #fff); }
.section--dark .feature-card__icon-bg,
.section--brand .feature-card__icon-bg { color: #fff; }
.section--dark .feature-card,
.section--brand .feature-card { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); }

.feature-card__icon-wrap {
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 24px;
}
.feature-card--circle .feature-card__icon-wrap { border-radius: var(--radius-full); }

/* Icon accent colors */
.feature-card--blue   .feature-card__icon-wrap { background: var(--color-feat-blue);   color: var(--color-feat-blue-icon); }
.feature-card--purple .feature-card__icon-wrap { background: var(--color-feat-purple); color: var(--color-feat-purple-icon); }
.feature-card--green  .feature-card__icon-wrap { background: var(--color-feat-green);  color: var(--color-feat-green-icon); }
.feature-card--orange .feature-card__icon-wrap { background: var(--color-feat-orange); color: var(--color-feat-orange-icon); }
.feature-card--pink   .feature-card__icon-wrap { background: var(--color-feat-pink);   color: var(--color-feat-pink-icon); }
.feature-card--teal   .feature-card__icon-wrap { background: var(--color-feat-teal);   color: var(--color-feat-teal-icon); }
.feature-card--honey  .feature-card__icon-wrap { background: var(--color-feat-honey);  color: var(--color-feat-honey-icon); }
.feature-card--sage   .feature-card__icon-wrap { background: var(--color-feat-sage);   color: var(--color-feat-sage-icon); }
.feature-card--sky    .feature-card__icon-wrap { background: var(--color-feat-sky);    color: var(--color-feat-sky-icon); }
.feature-card--violet .feature-card__icon-wrap { background: var(--color-feat-violet); color: var(--color-feat-violet-icon); }

.feature-card--teal   { --feature-accent-muted-start: #c4d7d6; --feature-accent-muted-end: #eaf1f1; --feature-accent-start: var(--color-teal-dark);   --feature-accent-end: var(--color-teal);   --feature-icon-color: #f5fafa; }
.feature-card--sage   { --feature-accent-muted-start: #c2d3c5; --feature-accent-muted-end: #eaf0eb; --feature-accent-start: var(--color-sage-dark);   --feature-accent-end: var(--color-sage);   --feature-icon-color: #f6faf7; }
.feature-card--honey  { --feature-accent-muted-start: #d9be7e; --feature-accent-muted-end: #f3e8c8; --feature-accent-start: var(--color-honey-dark);  --feature-accent-end: var(--color-honey);  --feature-icon-color: #fdf8ec; }
.feature-card--sky    { --feature-accent-muted-start: #acc3d4; --feature-accent-muted-end: #e2ecf4; --feature-accent-start: var(--color-sky-dark);    --feature-accent-end: var(--color-sky);    --feature-icon-color: #f2f7fb; }
.feature-card--violet { --feature-accent-muted-start: #bab5c9; --feature-accent-muted-end: #e9e7f0; --feature-accent-start: var(--color-violet-dark); --feature-accent-end: var(--color-violet); --feature-icon-color: #f5f4f8; }
.feature-card--slate  { --feature-accent-muted-start: #b0bac5; --feature-accent-muted-end: #e0e6ec; --feature-accent-start: var(--color-slate-dark);  --feature-accent-end: var(--color-slate);  --feature-icon-color: #f2f5f8; }

/* Promo (filled dark pillar) card — used when grid needs padding */
.feature-card--promo {
  display: flex;
  flex-direction: column;
  border-color: transparent;
}
.feature-card--promo .feature-card__body { display: flex; flex-direction: column; flex: 1; }
.feature-card--promo .feature-card__title-lg,
.feature-card--promo .feature-card__title-lg a { color: #fff; font-size: var(--text-2xl); font-weight: var(--font-semi);}
.feature-card--promo .feature-card__desc { color: rgba(255,255,255,0.8); font-size: var(--text-base); line-height: var(--leading-normal);}
.feature-card--promo .feature-card__link { color: rgba(255,255,255,0.9); margin-top: auto; padding-top: var(--space-6); }
.feature-card--promo .feature-card__link:hover { color: #fff; }
.feature-card--teal.feature-card--promo   { background: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-teal) 100%); }
.feature-card--sage.feature-card--promo   { background: linear-gradient(135deg, var(--color-sage-dark) 0%, var(--color-sage) 100%); }
.feature-card--honey.feature-card--promo  { background: linear-gradient(135deg, var(--color-honey-dark) 0%, var(--color-honey) 100%); }
.feature-card--sky.feature-card--promo    { background: linear-gradient(135deg, var(--color-sky-dark) 0%, var(--color-sky) 100%); }
.feature-card--violet.feature-card--promo { background: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-violet) 100%); }

.feature-card__title { font-size: var(--text-base); font-weight: var(--font-semi); color: var(--color-charcoal); line-height: 1.2; margin-bottom: 0; }
.feature-card__desc  { font-size: var(--text-xs); color: var(--color-charcoal); line-height: var(--leading-relaxed); }
.section--dark .feature-card__desc,
.section--brand .feature-card__desc { color: rgba(255,255,255,0.7); }
.feature-card__link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xs); text-transform: uppercase; font-weight: var(--font-medium); color: var(--color-charcoal); margin-top: auto; padding-top: var(--space-2); }
.feature-card__link:hover { text-decoration: underline; }

.feature-card__link--stretched { position: static; }
.feature-card__link--stretched::after { content: ''; position: absolute; inset: 0; z-index: 1; }

@media (max-width: 680px) {
  .feature-card {
    grid-template-columns: 100px minmax(0, 1fr);
  }
  .feature-card__icon-bg i,
  .feature-card__icon-bg svg {
    width: 44px;
    height: 44px;
  }
  .feature-card__title {
    font-size: var(--text-xl);
  }
  .feature-card__desc,
  .feature-card__link {
    font-size: var(--text-sm);
  }
}

/* ── Features: Pillar column layout (grid-3 + CPT source) ──────────────────── */
/*
  Subgrid: each .features-pillar spans 2 implicit parent rows
  (header row + items row) so all headers share the same row height.
*/
.features-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-6);
}
@media (max-width: 900px) {
  .features-pillars { grid-template-columns: 1fr; }
}

.features-pillar {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.features-pillar__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + 8px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.features-pillar--teal   .features-pillar__header { background: linear-gradient(135deg, #4A9E9C 0%, #2E6866 100%); }
.features-pillar--sky    .features-pillar__header { background: linear-gradient(135deg, #0284C7 0%, #014F7A 100%); }
.features-pillar--violet .features-pillar__header { background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%); }
.features-pillar--sage   .features-pillar__header { background: linear-gradient(135deg, #9BB8A0 0%, #607D65 100%); }
.features-pillar--honey  .features-pillar__header { background: linear-gradient(135deg, #E8C97A 0%, #B58B2E 100%); }

.features-pillar__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  pointer-events: none;
  opacity: 0.28;
  line-height: 1;
}
.features-pillar__icon svg { width: 96px; height: 96px; }
.features-pillar--teal   .features-pillar__icon { color: #2E6866; }
.features-pillar--sky    .features-pillar__icon { color: #014F7A; }
.features-pillar--violet .features-pillar__icon { color: #4C1D95; }
.features-pillar--sage   .features-pillar__icon { color: #607D65; }
.features-pillar--honey  .features-pillar__icon { color: #B58B2E; }

.features-pillar__title-wrap { position: relative; z-index: 1; min-width: 0; }
.features-pillar__name { font-size: var(--text-lg); font-weight: var(--font-semi); margin: 0; color: inherit; }
.features-pillar__name a { color: inherit; text-decoration: none; }
.features-pillar__name a:hover { text-decoration: underline; }
.features-pillar__desc { font-size: var(--text-sm); margin: var(--space-1) 0 0; color: rgba(255,255,255,0.82); }

.features-pillar__items { list-style: none; margin: 0; padding: var(--space-5) var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-4); align-self: start; }

/* ── Content + Media ──────────────────────────────────────────────────────── */

.section-content-media__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.section-partners-hero .section-content-media__grid {
  grid-template-columns: 2fr 1fr;
}

/* ── Partners Why ─────────────────────────────────────────────────────────── */
.why-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.why-panel {
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
}
.why-panel--light {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--shadow-sm);
}
.why-panel--dark {
  background: #3D2E24;
  color: #fff;
}
.why-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.why-panel__icon-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-panel--light .why-panel__icon-badge { background: #CCE9D8; color: #2E7D5A; }
.why-panel--dark  .why-panel__icon-badge { background: #5C3B2A; color: #E8B99E; }
.why-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: 0;
  line-height: 1.2;
}
.why-panel__checklist { margin-bottom: 0; }
.why-panel--dark .check-list__item { color: #fff; }
.why-panel--dark .check-list__icon { color: #6ECBA0; }
@media (max-width: 768px) {
  .why-panels { grid-template-columns: 1fr; }
}

/* ── Partners Platform ────────────────────────────────────────────────────── */
.section-partners-platform .section__header--centered { margin-bottom: var(--space-12); }

.platform-cards { list-style: none; margin: 0; padding: 0; }

.platform-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: var(--bg-secondary);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-xl);
}

/* Partners Who: white bg + horizontal (icon left, text right) */
.section-partners-who .platform-card {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  background: #fff;
}
.section-partners-who .platform-card__badge { flex-shrink: 0; }

.platform-card__badge {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.platform-card__badge i,
.platform-card__badge svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

/* Badge color cycling */
.platform-card:nth-child(3n+1) .platform-card__badge { background: var(--color-feat-pink);  color: var(--color-feat-pink-icon); }
.platform-card:nth-child(3n+2) .platform-card__badge { background: var(--color-feat-teal);  color: var(--color-feat-teal-icon); }
.platform-card:nth-child(3n+3) .platform-card__badge { background: var(--color-feat-sage);  color: var(--color-feat-sage-icon); }

.platform-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-charcoal);
  margin: 0;
  line-height: var(--leading-snug);
}

.platform-card__desc {
  font-size: var(--text-base);
  color: var(--color-charcoal);
  line-height: var(--leading-relaxed);
  margin: 0;
}

@media (max-width: 767px) {
  .platform-cards.features-grid--grid-3 { grid-template-columns: 1fr; }
}

.section-content-media__content,
.section-content-media__media { min-width: 0; }
.section-content-media--align-center .section-content-media__grid { align-items: center; }
.section-content-media--title-center .section-content-media__content { text-align: center; }
.section-content-media--title-center .section-content-media__content {
  max-width: min(62ch, 100%);
  margin-inline: auto;
}
.section-content-media--title-center .section-content-media__actions { display: flex; justify-content: center; }
.section-content-media--left .section-content-media__media { order: -1; }
.section-content-media--top .section-content-media__grid,
.section-content-media--bottom .section-content-media__grid { grid-template-columns: 1fr; }
.section-content-media--top .section-content-media__media { order: -1; }
.section-content-media--shortcode-stacked .section-content-media__grid { gap: 0; }
/* Full-bleed via --fl-vw, not 100vw: 100vw is the viewport *including* the
   classic scrollbar, so on Windows/Linux (and any always-visible-scrollbar
   setup) it overflows the content box by the scrollbar width. body's
   `overflow-x: clip` hides the resulting scrollbar but not the gap itself,
   which is what shows up as the white strip down the right side. */
.section-content-media--shortcode-full-bleed.section-content-media--top .section-content-media__media,
.section-content-media--shortcode-full-bleed.section-content-media--bottom .section-content-media__media {
  width: var(--fl-vw);
  max-width: var(--fl-vw);
  margin-inline: calc(50% - var(--fl-vw) / 2);
}

.section-content-media__heading { margin-bottom: var(--space-5); }
.section-content-media__body { margin-bottom: var(--space-6); }
.section-content-media__figure {
  min-height: 400px;
  height: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}
.section-content-media__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.section-content-media__figure--overlay-dark-scrim::after {
  background: linear-gradient(to top, rgba(74,67,64,0.72), rgba(74,67,64,0.2));
}
.section-content-media__figure--overlay-warm-coral::after {
  background: linear-gradient(135deg, rgba(237,164,128,0.38), rgba(228,217,204,0.28));
  mix-blend-mode: multiply;
}
.section-content-media__figure--overlay-cool-teal::after {
  background: linear-gradient(135deg, rgba(74,158,156,0.34), rgba(200,230,229,0.24));
}
.section-content-media__figure--overlay-coral-duotone::after {
  background: linear-gradient(135deg, rgba(237,164,128,0.5), rgba(212,118,74,0.4));
  mix-blend-mode: multiply;
}
.section-content-media__figure--overlay-none::after { display: none; }
.section-content-media__figure img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); }

.check-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); margin-top: var(--space-6); }
.check-list__item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); }
.check-list__icon { color: var(--color-success); flex-shrink: 0; margin-top: 3px; }
.check-list__content { display: flex; flex-direction: column; gap: var(--space-1); }
.check-list__title { font-weight: var(--font-bold); line-height: 1.3; }
.check-list__text { line-height: 1.5; }

/* Content + Media bullets scroller (media_type=bullets) */
.check-list--bullet-scroller {
  will-change: transform;
  position: relative;
  isolation: isolate;
}
.check-list--bullet-scroller .check-list__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.check-list--bullet-scroller.is-revealed .check-list__item {
  opacity: 1;
  transform: translateY(0);
}
.check-list--bullet-scroller .check-list__item.is-slot-top,
.check-list--bullet-scroller .check-list__item.is-slot-bottom {
  opacity: 0;
}
.check-list--bullet-scroller.is-revealed .check-list__item.is-slot-top,
.check-list--bullet-scroller.is-revealed .check-list__item.is-slot-bottom {
  opacity: 1;
}
.check-list--bullet-scroller .check-list__item.is-slot-middle {
  opacity: 0;
}
.check-list--bullet-scroller.is-revealed .check-list__item.is-slot-middle {
  opacity: 1;
}

/* Two-column bullet grid */
.check-list--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-10);
}
.check-list--two-col .check-list__content { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; }
.check-list--two-col .check-list__title + .check-list__text::before { content: '— '; }
.check-list--two-col .check-list__item { padding-bottom: var(--space-4); border-bottom: 1px solid rgba(0,0,0,0.08); }

/* Bullet Slider (media_type=bullet_slider) — timed carousel, one bullet per slide */
.bullet-slider.testimonials-swiper {
  width: 100%;
  max-width: 100%;
  padding-bottom: var(--space-12) !important;
  box-sizing: border-box;
  overflow: hidden;
}
.bullet-slider .swiper-slide { height: auto; }
.bullet-slider__slide {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 480px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.bullet-slider__figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bullet-slider__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bullet-slider__content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-10) var(--space-6) var(--space-5);
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
  color: #fff;
  text-align: left;
}
.bullet-slider__title { font-weight: var(--font-bold); font-size: var(--text-lg); line-height: 1.3; }
.bullet-slider__text { line-height: 1.5; color: rgba(255,255,255,0.85); }

/* The image subfield is optional. With no image there is nothing to scrim over,
   so the slide becomes an ordinary flow card instead of a bottom-pinned overlay
   floating in an empty 4:3 box. */
.bullet-slider__slide--no-image {
  aspect-ratio: auto;
  max-height: none;
  display: flex;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}
.section--dark .bullet-slider__slide--no-image,
.section--brand .bullet-slider__slide--no-image {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
}
.bullet-slider__slide--no-image .bullet-slider__content {
  position: static;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  background: none;
  color: inherit;
}
.bullet-slider__slide--no-image .bullet-slider__text { color: inherit; opacity: 0.8; }
/* White arrows are only legible over the image scrim. */
.bullet-slider:has(.swiper-slide-active .bullet-slider__slide--no-image) .swiper-button-prev,
.bullet-slider:has(.swiper-slide-active .bullet-slider__slide--no-image) .swiper-button-next {
  color: inherit !important;
}
/* Centre on the slide itself, not the box — the wrapper carries --space-12 of
   bottom padding for the pagination, which would otherwise push the arrows low. */
.bullet-slider .swiper-button-prev,
.bullet-slider .swiper-button-next {
  color: #fff !important;
  top: calc((100% - var(--space-12)) / 2);
  transform: translateY(-50%);
  margin-top: 0;
}
.bullet-slider .swiper-button-prev { left: var(--space-4); }
.bullet-slider .swiper-button-next { right: var(--space-4); }
.bullet-slider .swiper-pagination { bottom: 0; }

/* ── Content + Scroll ────────────────────────────────────────────────────── */

.section-content-scroll__intro {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}
.section-content-scroll__intro .eyebrow { margin-bottom: var(--space-2) !important; }
.section-content-scroll__heading {
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}
.section-content-scroll__body { max-width: 70ch; margin-inline: auto; margin-bottom: 0; }

/* Track */
.section-content-scroll__track-wrap {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--scroll-mask-left, 0%), black calc(100% - var(--scroll-mask-right, 0%)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black var(--scroll-mask-left, 0%), black calc(100% - var(--scroll-mask-right, 0%)), transparent 100%);
}
.section-content-scroll__track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-4);
  cursor: grab;
}
.section-content-scroll__track::-webkit-scrollbar { display: none; }
.section-content-scroll__track.is-dragging { cursor: grabbing; user-select: none; }

/* Cards */
.section-content-scroll__card {
  flex: 0 0 clamp(260px, 30vw, 360px);
  scroll-snap-align: start;
  background: var(--bg-secondary, #f8f8f8);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.section-content-scroll__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.section-content-scroll__card-image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.section-content-scroll__card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.section-content-scroll__card-title {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  font-size: var(--text-xl);
  line-height: 1.2;
  margin: 0;
}
.section-content-scroll__card-text {
  font-size: var(--text-base);
  line-height: 1.6;
  opacity: 0.85;
  margin: 0;
}

/* Dark / brand scheme card overrides */
.section--dark .section-content-scroll__card,
.section--brand .section-content-scroll__card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}

/* Dot navigation */
.section-content-scroll__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.section-content-scroll__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-charcoal, #2c2c2c);
  opacity: 0.25;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
.section-content-scroll__dot.is-active {
  opacity: 1;
  width: 24px;
  border-radius: 4px;
}
.section--dark .section-content-scroll__dot,
.section--brand .section-content-scroll__dot { background: var(--color-white, #fff); }

/* ── Content + Grid ───────────────────────────────────────────────────────── */

.section-content-grid { padding-block: var(--space-20); }
.section-content-grid__header { text-align: center; margin-bottom: var(--space-12); }
.section-content-grid__header .eyebrow { margin-bottom: var(--space-2) !important; }
.section-content-grid__heading { max-width: 960px; margin-inline: auto; margin-bottom: var(--space-4); }
.section-content-grid__intro { font-size: var(--text-lg); opacity: 0.8; max-width: 70ch; margin-inline: auto; margin-bottom: 0; }
.section-content-grid__footer { margin-top: var(--space-10); }

.section-content-grid__grid {
  display: grid;
  gap: 1px;
  background: var(--color-border, #e5e7eb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.section-content-grid__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.section-content-grid__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.section-content-grid__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Card: bordered (default — white cells separated by hairline grid gaps) */
.content-grid-card { padding: var(--space-8); background: var(--bg-primary, #fff); }

/* Card: filled — subtle tinted surface */
.content-grid-card--filled { background: var(--bg-secondary, #f9fafb); }

/* Card: minimal — no background differentiation, gap lines only */
.content-grid-card--minimal { background: transparent; }

.content-grid-card__title { font-size: var(--text-base); font-weight: var(--font-semibold); margin-bottom: var(--space-3); color: var(--color-deep-coral); }
.section--dark .content-grid-card__title,
.section--brand .content-grid-card__title { color: var(--color-coral); }
.content-grid-card__price-row { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.content-grid-card__price { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl)); font-weight: var(--font-bold); line-height: 1; }
.content-grid-card__price-note { font-size: var(--text-sm); opacity: 0.6; }
.content-grid-card__desc { font-size: var(--text-sm); opacity: 0.75; line-height: 1.6; margin-top: var(--space-3); }
.content-grid-card__link { display: inline-block; margin-top: var(--space-5); font-size: var(--text-sm); font-weight: var(--font-medium); text-decoration: underline; text-underline-offset: 3px; }

/* Dark / brand scheme overrides */
.section--dark .section-content-grid__grid,
.section--brand .section-content-grid__grid { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.12); }
.section--dark .content-grid-card,
.section--brand .content-grid-card { background: rgba(255,255,255,0.06); }
.section--dark .content-grid-card--filled,
.section--brand .content-grid-card--filled { background: rgba(255,255,255,0.1); }

/* Responsive: stack to 2-col then 1-col */
@media (max-width: 900px) {
  .section-content-grid__grid--cols-3,
  .section-content-grid__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .section-content-grid__grid--cols-2,
  .section-content-grid__grid--cols-3,
  .section-content-grid__grid--cols-4 { grid-template-columns: 1fr; }
}

/* ── Content + Columns ────────────────────────────────────────────────────── */

.section-content-columns { padding-block: var(--space-20); }
.section-content-columns__header { text-align: center; margin-bottom: var(--space-12); }
.section-content-columns__header .eyebrow { margin-bottom: var(--space-2) !important; }
.section-content-columns__heading { max-width: 960px; margin-inline: auto; margin-bottom: var(--space-4); }
.section-content-columns__intro { font-size: var(--text-lg); opacity: 0.8; max-width: 70ch; margin-inline: auto; margin-bottom: 0; }

.section-content-columns__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
}
.section-content-columns__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.section-content-columns__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

.content-column { min-width: 0; }
.content-column__headline { font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); }
.content-column__subheadline { font-size: var(--text-base); opacity: 0.75; margin-bottom: var(--space-4); }
.content-column__body { margin-bottom: var(--space-5); }
.content-column .check-list { margin-bottom: 0; }

@media (max-width: 900px) {
  .section-content-columns__grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .section-content-columns__grid--cols-2,
  .section-content-columns__grid--cols-3 { grid-template-columns: 1fr; }
}

/* ── CTA Band ─────────────────────────────────────────────────────────────── */

/* ── Partners: Ways To Partner ───────────────────────────────────────────── */

.section-partners-ways { padding-block: var(--space-20); }
.section-partners-ways__header { text-align: center; margin-bottom: var(--space-12); }
.section-partners-ways__header .eyebrow { margin-bottom: var(--space-2) !important; }

.section-partners-ways__intro { font-size: var(--text-lg); opacity: 0.8; max-width: 70ch; margin-inline: auto; margin-bottom: 0; }

/* Tier cards grid */
.partners-ways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.partners-way-card {
  position: relative;
  background: var(--color-white, #fff);
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6);
}

.partners-way-card--featured {
  border-color: var(--color-accent, #F97316);
  border-width: 2px;
}

/* Badge (top-right corner) */
.partners-way-card__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--color-accent, #F97316);
  color: #fff;
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-semibold, 600);
  letter-spacing: 0.03em;
  padding: var(--space-1) var(--space-3);
  border-radius: 0 var(--radius-lg, 12px) 0 var(--radius-md, 8px);
}

/* Tier label row */
.partners-way-card__tier {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.partners-way-card__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.partners-way-card__tier-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-semibold, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.partners-way-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-bold, 700);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.partners-way-card__body {
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.65;
  opacity: 0.75;
  margin-bottom: 0;
}

/* "Every Partner Gets" panel */
.partners-epg {
  background: var(--color-white, #fff);
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6) var(--space-8);
}

.partners-epg__eyebrow {
  color: var(--color-accent, #F97316) !important;
  margin-bottom: var(--space-4) !important;
}

.partners-epg__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3) var(--space-6);
}

.partners-epg__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
}

.partners-epg__check {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent, #F97316);
}

@media (max-width: 900px) {
  .partners-ways-grid { grid-template-columns: repeat(2, 1fr); }
  .partners-epg__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .partners-ways-grid { grid-template-columns: 1fr; }
  .partners-epg__list { grid-template-columns: 1fr; }
  .partners-epg { padding: var(--space-5) var(--space-5); }
}

/* ── Partners: Program Tiers ─────────────────────────────────────────────── */

.section-partners-tiers { padding-block: var(--space-20); }
.section-partners-tiers .section__header { margin-bottom: var(--space-12); }

.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.tier-card {
  background: #FAF6F1;
  border: 1px solid #E8DDD3;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  min-width: 0;
}

.tier-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.tier-card__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bronze */
.tier-card--0 .tier-card__dot { background-color: #9C7248; }
/* Gold */
.tier-card--1 .tier-card__dot { background-color: #C9A227; }
/* Platinum */
.tier-card--2 .tier-card__dot { background-color: var(--color-gray-400); }

.tier-card__tagline {
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
  margin-bottom: var(--space-3);
}

.tier-card__body {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  margin-bottom: 0;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .tier-cards { grid-template-columns: 1fr; }
}


.section-cta { text-align: center; }
.section-cta--split .section-cta__inner { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: var(--space-12); }
.section-cta__content .eyebrow { margin-bottom: var(--space-2) !important; }
.section-cta__heading { margin-bottom: var(--space-4); max-width: 960px; margin-inline: auto; }
.section-cta--split .section-cta__heading { margin-inline: 0; }
.section-cta__body { font-size: var(--text-lg); opacity: 0.85; margin-bottom: var(--space-8); max-width: 70ch; margin-inline: auto; }
.section-cta--split .section-cta__body { margin-inline: 0; }
.section-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.section-cta--split .section-cta__actions { justify-content: flex-start; flex-shrink: 0; }

/* Feature context CTA color carry-through */
.section-cta--feature-color {
  color: var(--color-white);
}
.section-cta--feature-color .eyebrow {
  color: rgba(255,255,255,0.70);
}
.section-cta--feature-color .section-cta__heading,
.section-cta--feature-color .section-cta__body {
  color: var(--color-white);
}
.section-cta--feature-color .section-cta__body {
  opacity: 0.92;
}
.section-cta--feature-color .btn--outline {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.45);
}
.section-cta--feature-color .btn--outline:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.1);
}

.section-cta--outcome-color {
  color: var(--color-white);
}
.section-cta--outcome-color .eyebrow {
  color: rgba(255,255,255,0.70);
}
.section-cta--outcome-color .section-cta__heading,
.section-cta--outcome-color .section-cta__body {
  color: var(--color-white);
}
.section-cta--outcome-color .section-cta__body {
  opacity: 0.92;
}
.section-cta--outcome-color .btn--outline {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.45);
}
.section-cta--outcome-color .btn--outline:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.1);
}

.section-cta--feature-teal   { background: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-teal) 100%); }
.section-cta--feature-honey  { background: linear-gradient(135deg, var(--color-honey-dark) 0%, var(--color-honey) 100%); }
.section-cta--feature-sage   { background: linear-gradient(135deg, var(--color-sage-dark) 0%, var(--color-sage) 100%); }
.section-cta--feature-sky    { background: linear-gradient(135deg, var(--color-sky-dark) 0%, var(--color-sky) 100%); }
.section-cta--feature-violet { background: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-violet) 100%); }

.section-cta--outcome-teal   { background: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-teal) 100%); }
.section-cta--outcome-honey  { background: linear-gradient(135deg, var(--color-honey-dark) 0%, var(--color-honey) 100%); }
.section-cta--outcome-sage   { background: linear-gradient(135deg, var(--color-sage-dark) 0%, var(--color-sage) 100%); }
.section-cta--outcome-sky    { background: linear-gradient(135deg, var(--color-sky-dark) 0%, var(--color-sky) 100%); }
.section-cta--outcome-violet { background: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-violet) 100%); }
.section-cta--outcome-slate  { background: linear-gradient(135deg, var(--color-slate-dark) 0%, var(--color-slate) 100%); }

/* ── Stats ────────────────────────────────────────────────────────────────── */

.stats-grid { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: var(--space-12); }
.stat-item { flex: 1; min-width: 0; text-align: center; }
.section-stats--no-padding { padding-block: 0; }
.section--no-padding { padding-block: 0 !important; }
.stats-grid--borders { gap: 0; border-top: 1px solid rgba(0,0,0,0.12); border-bottom: 1px solid rgba(0,0,0,0.12); }
.stats-grid--borders .stat-item { padding: var(--space-8) var(--space-10); }
.stats-grid--borders .stat-item + .stat-item { border-left: 1px solid rgba(0,0,0,0.12); }
.stat-item__icon { font-size: 2rem; margin-bottom: var(--space-2); }
.stat-item__value { font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); font-weight: var(--font-extra); line-height: 1; margin-bottom: var(--space-2); color: var(--color-white); }
.section--light .stat-item__value { color: var(--color-brand); }
.stat-item__prefix { font-size: clamp(var(--text-xl), 2vw, var(--text-3xl)); vertical-align: baseline; color: var(--color-accent) !important; font-weight: var(--font-semi); }
.stat-item__suffix { font-size: clamp(var(--text-xl), 2vw, var(--text-3xl)); vertical-align: baseline; color: var(--color-accent) !important; font-weight: var(--font-semi); }
.stat-item__label { font-size: var(--text-sm); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }

/* ── Testimonials ─────────────────────────────────────────────────────────── */

.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
.testimonials-swiper { padding-bottom: var(--space-12) !important; }
.testimonials-swiper .swiper-wrapper { transition-property: transform, height; }
.testimonials-swiper--carousel {
  position: relative;
  max-width: min(100%, 1040px);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
}
.testimonials-swiper--carousel .swiper-slide {
  display: flex;
  justify-content: center;
}
.testimonials-swiper--carousel .swiper-button-prev,
.testimonials-swiper--carousel .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}
.testimonials-swiper--carousel .swiper-button-prev { left: 0; }
.testimonials-swiper--carousel .swiper-button-next { right: 0; }
.testimonial-display-quote {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(var(--space-8), 2.8vw, var(--space-12));
}
.testimonial-display-quote__text {
  position: relative;
  display: inline-block;
  margin: 0 0 var(--space-8);
  padding-inline: clamp(var(--space-8), 5vw, var(--space-14));
  font-size: 2rem;
  line-height: var(--leading-tight);
  font-family: var(--font-display);
  font-weight: var(--font-regular);
}
.testimonial-display-quote__text::before,
.testimonial-display-quote__text::after {
  position: absolute;
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  line-height: 1;
  color: color-mix(in srgb, currentColor 35%, transparent);
  pointer-events: none;
}
.testimonial-display-quote__text::before {
  content: '\201C';
  left: 0;
  top: 0;
  transform: translate(-16%, -8%);
}
.testimonial-display-quote__text::after {
  content: '\201D';
  right: 0;
  bottom: 0;
  transform: translate(30%, 45%);
}
.testimonial-display-quote__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.testimonial-display-quote__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: var(--space-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
}
.testimonial-display-quote__name {
  font-size: var(--text-base);
  font-style: normal;
  font-weight: var(--font-semi);
}
.testimonial-display-quote__role {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}
.section--dark .testimonial-display-quote__role,
.section--brand .testimonial-display-quote__role { color: rgba(255,255,255,0.68); }
.testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.section--dark .testimonial-card,
.section--brand .testimonial-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--color-white); }
.testimonial-card__stars { display: flex; gap: var(--space-1); }
.star--filled { color: #FBBF24; }
.star--empty  { color: var(--color-gray-300); }
.testimonial-card__quote { font-size: var(--text-lg); line-height: var(--leading-relaxed); flex: 1; font-style: italic; }
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-card__avatar { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; }
.testimonial-card__name { font-weight: var(--font-semi); font-size: var(--text-sm); display: block; }
.testimonial-card__role { font-size: var(--text-xs); color: var(--color-gray-500); }
.section--dark .testimonial-card__role,
.section--brand .testimonial-card__role { color: rgba(255,255,255,0.6); }
.testimonial-card__logo { height: 28px; width: auto; margin-left: auto; filter: grayscale(1); opacity: 0.7; }

/* Feature context testimonial color carry-through */
.section-testimonials--feature-teal   { background: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-teal) 100%); }
.section-testimonials--feature-honey  { background: linear-gradient(135deg, var(--color-honey-dark) 0%, var(--color-honey) 100%); }
.section-testimonials--feature-sage   { background: linear-gradient(135deg, var(--color-sage-dark) 0%, var(--color-sage) 100%); }
.section-testimonials--feature-sky    { background: linear-gradient(135deg, var(--color-sky-dark) 0%, var(--color-sky) 100%); }
.section-testimonials--feature-violet { background: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-violet) 100%); }
.section-testimonials--feature-color .eyebrow { color: rgba(255,255,255,0.70); }

.section-testimonials--outcome-teal   { background: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-teal) 100%); }
.section-testimonials--outcome-honey  { background: linear-gradient(135deg, var(--color-honey-dark) 0%, var(--color-honey) 100%); }
.section-testimonials--outcome-sage   { background: linear-gradient(135deg, var(--color-sage-dark) 0%, var(--color-sage) 100%); }
.section-testimonials--outcome-sky    { background: linear-gradient(135deg, var(--color-sky-dark) 0%, var(--color-sky) 100%); }
.section-testimonials--outcome-violet { background: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-violet) 100%); }
.section-testimonials--outcome-slate  { background: linear-gradient(135deg, var(--color-slate-dark) 0%, var(--color-slate) 100%); }
.section-testimonials--outcome-color .eyebrow { color: rgba(255,255,255,0.70); }

/* Display variant — large centered testimonial with dot navigation */
.testimonials-swiper--display { 
  padding-bottom: var(--space-16) !important; 
  position: relative;
}
.testimonials-swiper--display .swiper-button-prev,
.testimonials-swiper--display .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}
.testimonials-swiper--display .swiper-button-prev { left: var(--space-4); }
.testimonials-swiper--display .swiper-button-next { right: var(--space-4); }
.testimonials-swiper--display .swiper-pagination {
  bottom: var(--space-8);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}
.testimonials-swiper--display .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: color-mix(in srgb, currentColor 20%, transparent);
  opacity: 1;
  transition: background 0.3s ease, width 0.3s ease;
  margin: 0 !important;
}
.testimonials-swiper--display .swiper-pagination-bullet:hover {
  background: color-mix(in srgb, currentColor 45%, transparent);
}
.testimonials-swiper--display .swiper-pagination-bullet-active {
  width: 24px;
  background: currentColor;
}
.testimonial-card--display {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  max-width: 900px;
  margin: 0 auto;
}
.testimonial-card--display .testimonial-card__quote {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  line-height: var(--leading-snug);
  font-style: normal;
  font-family: var(--font-display);
}
.testimonial-card--display .testimonial-card__author {
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
}
.testimonial-card--display .testimonial-card__avatar {
  width: 64px;
  height: 64px;
}
.testimonial-card--display .testimonial-card__author-info {
  text-align: center;
}
.testimonial-card--display .testimonial-card__name {
  font-size: var(--text-base);
}
.testimonial-card--display .testimonial-card__logo {
  margin-left: 0;
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .testimonials-swiper--display .swiper-button-prev { left: var(--space-8); }
  .testimonials-swiper--display .swiper-button-next { right: var(--space-8); }
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */

.layout-pricing__header { text-align: center; margin-bottom: var(--space-12); }
.layout-pricing__header .eyebrow { margin-bottom: var(--space-2) !important; }
.layout-pricing__heading { max-width: 960px; margin-inline: auto; margin-bottom: var(--space-4); }
.layout-pricing__body { font-size: var(--text-lg); color: var(--color-warm-gray); max-width: 70ch; margin-inline: auto; margin-bottom: 0; }

.pricing-toggle { display: inline-flex; background: var(--color-gray-100); border-radius: var(--radius-full); padding: var(--space-1); margin-bottom: var(--space-10); gap: var(--space-1); }
.pricing-toggle__btn { padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-600); transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--space-2); }
.pricing-toggle__btn.is-active { background: var(--color-white); color: var(--color-brand); box-shadow: var(--shadow-sm); }
.pricing-toggle__badge { background: var(--color-success); color: var(--color-white); font-size: var(--text-xs); font-weight: var(--font-semi); padding: 2px 6px; border-radius: var(--radius-full); }

.section-pricing { text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); text-align: left; }
.pricing-card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: var(--color-white);
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.pricing-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.pricing-card--featured {
  border-color: var(--color-accent);
  background: var(--color-brand);
  color: var(--color-white);
  transform: scale(1.04);
  box-shadow: var(--shadow-2xl);
}
.pricing-card--featured:hover { transform: scale(1.04) translateY(-4px); }
.pricing-card__badge { display: inline-flex; background: var(--color-accent); color: var(--color-white); font-size: var(--text-xs); font-weight: var(--font-semi); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: 0.06em; }
.pricing-card__name { font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); }
.pricing-card__desc { font-size: var(--text-sm); color: var(--color-gray-500); margin-bottom: var(--space-6); }
.pricing-card--featured .pricing-card__desc { color: rgba(255,255,255,0.7); }
.pricing-card__amount { font-size: var(--text-4xl); font-weight: var(--font-extra); line-height: 1; margin-bottom: var(--space-6); }
.pricing-card__features { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.pricing-card__feature { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.pricing-card__feature--excluded { opacity: 0.5; text-decoration: line-through; }
.pricing-card__action { margin-top: auto; }
.pricing-card__cta { width: 100%; justify-content: center; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.section-faq__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.section-faq__header { text-align: center; max-width: 640px; }
.section-faq__content { width: 100%; max-width: 860px; }
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-accordion__item { border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,0.55); backdrop-filter: blur(6px); }
.faq-accordion__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base); font-weight: var(--font-medium); text-align: left;
  color: var(--color-gray-900);
  background: transparent;
  transition: background var(--transition-fast);
}
.faq-accordion__question:hover { background: rgba(255,255,255,0.25); }
.faq-accordion__question[aria-expanded="true"] { background: rgba(255,255,255,0.25); color: var(--color-accent); font-weight: var(--font-bold); }
.faq-accordion__question[aria-expanded="true"] .faq-accordion__icon { transform: rotate(180deg); }
.faq-accordion__icon { transition: transform var(--transition-fast); flex-shrink: 0; color: var(--color-gray-400); }
.faq-accordion__answer-inner { padding: 0 var(--space-6) var(--space-6); font-size: var(--text-base); color: var(--color-gray-600); line-height: var(--leading-relaxed); }

/* ── Logo Marquee ─────────────────────────────────────────────────────────── */

.logo-marquee__label { text-align: center; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-accent); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-8); }
/* --fl-vw, not 100vw — see the full-bleed note above: 100vw includes the
   scrollbar and pushes a white gap past the right edge. */
.logo-marquee { overflow: hidden; position: relative; width: var(--fl-vw); left: 50%; transform: translateX(-50%); }
.logo-marquee--static { width: auto; left: auto; transform: none; }
.logo-marquee--static .logo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
.logo-marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-speed, 40s) linear infinite; }
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item { display: flex; align-items: center; padding-inline: var(--space-10); }
.logo-marquee__item img { height: 48px; width: auto; filter: grayscale(1); opacity: 0.5; transition: opacity var(--transition-fast), filter var(--transition-fast); }
.logo-marquee__item img:hover { opacity: 1; filter: none; }
.logo-marquee__item--text { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.5; white-space: nowrap; }
.section--brand .logo-marquee__item img { filter: brightness(0) invert(1); opacity: 0.6; }
.section--brand .logo-marquee__item img:hover { opacity: 1; }
.section--brand .logo-marquee__item--text { color: var(--color-white); }

/* Logo tooltips — the partner/customer name on hover, since a bare logo mark
   carries no visible label. Charcoal pill, matching the site's dark tooltip
   pattern. The tooltip sits *below* the mark: the marquee wrapper clips with
   overflow:hidden, and the track's bottom padding is the only room available
   for it inside the clip box. */
.logo-marquee { padding-block: var(--space-2) var(--space-8); }
.logo-marquee__item[data-tooltip] { position: relative; }
.logo-marquee__item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  white-space: nowrap;
  background: var(--color-charcoal);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-semi);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.logo-marquee__item[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

p.logo-marquee__label {
    align-self: center;
    display: flex;
    justify-self: center;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.tabs-component__nav { display: flex; gap: var(--space-2); margin-bottom: var(--space-8); }
.tabs-component__tab {
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--color-gray-600); background: var(--color-gray-100);
  transition: all var(--transition-fast);
}
.tabs-component__tab.is-active { background: var(--color-brand); color: var(--color-white); }
.tabs-component__tab--underline .tabs-component__tab { background: none; border-bottom: 2px solid transparent; border-radius: 0; }
.tabs-component__tab--underline .tabs-component__tab.is-active { border-bottom-color: var(--color-accent); color: var(--color-brand); }
.tabs-component__panel { display: none; }
.tabs-component__panel.is-active { display: block; }
.tabs-component__panel-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.tabs-component__panel-heading { font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-4); }
.tabs-component__panel-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

/* ── Video Lightbox ───────────────────────────────────────────────────────── */

.video-lightbox { position: relative; overflow: hidden; border-radius: var(--radius-2xl); cursor: pointer; background: var(--color-gray-900); }
.video-lightbox__poster { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: opacity var(--transition-base); }
.video-lightbox:hover .video-lightbox__poster { opacity: 0.5; }
.video-lightbox__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-white); }
.video-lightbox__label { font-weight: var(--font-semi); font-size: var(--text-sm); }
.video-lightbox__modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; }
.video-lightbox__close { position: absolute; top: var(--space-6); right: var(--space-6); color: var(--color-white); background: rgba(255,255,255,0.1); border-radius: var(--radius-full); padding: var(--space-3); }
.video-lightbox__embed-wrap { width: 90vw; max-width: 960px; aspect-ratio: 16/9; }
.video-lightbox__embed-wrap iframe { width: 100%; height: 100%; border: none; border-radius: var(--radius-xl); }

/* ── CTA Inline ───────────────────────────────────────────────────────────── */

.cta-inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap;
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-2xl);
}
.cta-inline--brand { background: var(--gradient-brand); color: var(--color-white); }
.cta-inline--light { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); }
.cta-inline__heading { font-size: var(--text-2xl); font-weight: var(--font-bold); }
.cta-inline__body { font-size: var(--text-base); opacity: 0.85; }
.cta-inline__actions { display: flex; gap: var(--space-3); flex-shrink: 0; }

/* ── Countdown ────────────────────────────────────────────────────────────── */

.countdown-timer { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.countdown-timer__unit { text-align: center; }
.countdown-timer__value { font-size: var(--text-4xl); font-weight: var(--font-extra); line-height: 1; display: block; color: var(--color-brand); }
.countdown-timer__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-gray-500); }
.countdown-timer__sep { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--color-gray-300); align-self: flex-start; margin-top: var(--space-2); }
.countdown-timer__message { width: 100%; font-size: var(--text-sm); color: var(--color-gray-600); }

/* ── Notification Banner ──────────────────────────────────────────────────── */

.notification-banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg); border-left: 4px solid;
  margin-bottom: var(--space-4);
}
.notification-banner--info    { background: #EFF6FF; border-color: var(--color-info); }
.notification-banner--success { background: #ECFDF5; border-color: var(--color-success); }
.notification-banner--warning { background: #FFFBEB; border-color: var(--color-warning); }
.notification-banner--error   { background: #FEF2F2; border-color: var(--color-error); }
.notification-banner__close { margin-left: auto; color: var(--color-gray-400); padding: var(--space-1); }

/* ── Site Footer ──────────────────────────────────────────────────────────── */

.site-footer { background: var(--color-brand-mid); color: var(--color-gray-300); }
.site-footer__main { padding-block: var(--space-20); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-12); }
.site-footer__brand .site-logo__text { color: var(--color-white); }
.site-footer__tagline { font-size: var(--text-sm); color: var(--color-gray-400); margin-top: var(--space-3); max-width: 28ch; line-height: var(--leading-relaxed); }
.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: rgba(255,255,255,0.08); color: var(--color-gray-400); transition: background var(--transition-fast), color var(--transition-fast); }
.social-link:hover { background: var(--color-accent); color: var(--color-white); }
.site-footer__disclaimer { margin-top: var(--space-5); }
.disclaimer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--color-gray-300);
  font-size: 11px;
  font-weight: var(--font-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
}
.disclaimer-badge:hover,
.disclaimer-badge:focus-visible {
  background: rgba(249,115,22,0.2);
  border-color: rgba(249,115,22,0.6);
  color: var(--color-white);
}

/* Brand-transition menu items are anchors with href="#" acting as buttons —
   the pointer cursor keeps them reading as interactive. The modal itself
   reuses .disclaimer-modal below. */
[data-brand-transition-open] { cursor: pointer; }

.disclaimer-modal[hidden] { display: none; }
.disclaimer-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(7, 25, 39, 0.72);
}
.disclaimer-modal__dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: min(80vh, 780px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%), var(--color-brand-mid);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  padding: var(--space-8);
}
.disclaimer-modal__title {
  margin: 0 0 var(--space-4);
  color: var(--color-white);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}
.disclaimer-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--color-gray-200);
  background: rgba(255,255,255,0.08);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.disclaimer-modal__close:hover,
.disclaimer-modal__close:focus-visible {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.45);
}
.disclaimer-modal__body {
  color: var(--color-gray-300);
}
.disclaimer-modal__body.entry-content a { color: var(--color-accent); }
.disclaimer-modal__body.entry-content h1,
.disclaimer-modal__body.entry-content h2,
.disclaimer-modal__body.entry-content h3,
.disclaimer-modal__body.entry-content h4,
.disclaimer-modal__body.entry-content h5,
.disclaimer-modal__body.entry-content h6 { color: var(--color-white); }
.site-footer__col-heading { font-size: var(--text-sm); font-weight: var(--font-semi); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-white); margin-bottom: var(--space-4); }
.site-footer__nav { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__nav a { font-size: var(--text-sm); color: var(--color-gray-400); transition: color var(--transition-fast); }
.site-footer__nav a:hover { color: var(--color-white); }

.site-footer__bar { border-top: 1px solid rgba(255,255,255,0.1); padding-block: var(--space-6); }
.site-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__copyright { font-size: var(--text-sm); color: var(--color-gray-500); }
.site-footer__legal-nav ul { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-footer__legal-nav a { font-size: var(--text-xs); color: var(--color-gray-500); }
.site-footer__legal-nav a:hover { color: var(--color-white); }

ul#menu-legal { display: flex; gap: var(--space-4);}

/* ── Spacer ───────────────────────────────────────────────────────────────── */

.section-spacer--sm  { padding-block: var(--space-8); }
.section-spacer--md  { padding-block: var(--space-16); }
.section-spacer--lg  { padding-block: var(--space-24); }
.section-spacer--xl  { padding-block: var(--space-32); }
.section-spacer--divider { border-top: 1px solid var(--color-gray-200); }

/* ── Swiper Overrides ─────────────────────────────────────────────────────── */

.swiper-pagination-bullet { background: var(--color-gray-300) !important; }
.swiper-pagination-bullet-active { background: var(--color-brand) !important; }
.swiper-button-prev, .swiper-button-next { color: var(--color-brand) !important; }

/* Keep testimonial controls legible on feature/outcome gradient overrides */
.section-testimonials--feature-color .swiper-button-prev,
.section-testimonials--feature-color .swiper-button-next,
.section-testimonials--outcome-color .swiper-button-prev,
.section-testimonials--outcome-color .swiper-button-next {
  color: rgba(255,255,255,0.9) !important;
}

.section-testimonials--feature-color .swiper-pagination-bullet,
.section-testimonials--outcome-color .swiper-pagination-bullet {
  background: rgba(255,255,255,0.38) !important;
}

.section-testimonials--feature-color .swiper-pagination-bullet-active,
.section-testimonials--outcome-color .swiper-pagination-bullet-active {
  background: rgba(255,255,255,0.95) !important;
}

/* ── Entry Content (WYSIWYG) ──────────────────────────────────────────────── */

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5 { margin-bottom: var(--space-4); margin-top: var(--space-8); }
.entry-content p { margin-bottom: var(--space-4); max-width: none; }
.entry-content ul, .entry-content ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content a { color: var(--color-accent-2); text-decoration: underline; }
.entry-content blockquote { border-left: 4px solid var(--color-accent); padding-left: var(--space-6); font-style: italic; color: var(--color-gray-600); margin-block: var(--space-6); }
.entry-content img { border-radius: var(--radius-lg); margin-block: var(--space-6); }
.entry-content table { width: 100%; border-collapse: collapse; margin-block: var(--space-6); }
.entry-content th, .entry-content td { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-gray-200); }
.entry-content th { background: var(--color-gray-50); font-weight: var(--font-semi); text-align: left; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .site-nav, .site-header__actions { display: none; }
  .site-nav-toggle { display: flex; margin-left: auto; }
  /* Utility links move inside the drawer here (.site-nav-mobile__utility), so
     hide the list — but keep the bar itself when it still carries something
     with nowhere else to go (the announcement, the AI search trigger). The
     body class is set server-side for exactly those cases; zero the token
     otherwise, or the header sticks 36px below a bar that is not rendered. */
  .site-utility__menu { display: none; }
  .site-utility { display: none; }
  body.utility-bar-on-mobile .site-utility { display: block; }
  body { --utility-height: 0px; }
  body.utility-bar-on-mobile { --utility-height: var(--utility-height-base); }
  /* Menu is hidden here, so the banner's auto margin (set in the base rule)
     already pins it left and keeps the trigger right — nothing to override. */
  .site-utility__banner { white-space: normal; }
  .site-utility__search span { display: none; } /* icon-only to save room */
  .site-utility__search { padding: var(--space-1) var(--space-2); }
  .site-utility__search-notice { display: none; } /* admin hint is desktop-only */
  .section-content-media__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .section-partners-hero .section-content-media__grid { grid-template-columns: 1fr; }
  .section-content-media--left .section-content-media__media { order: 0; }
  .section-hero--has-secondary .section-hero__inner,
  .section-hero--cols-4-8 .section-hero__inner,
  .section-hero--cols-8-4 .section-hero__inner,
  .section-hero--cols-3-9 .section-hero__inner,
  .section-hero--cols-9-3 .section-hero__inner { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .features-grid--grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section-faq__inner { gap: var(--space-8); }
  .tabs-component__panel-inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad-y: 3rem; }
  .section-hero__inner { padding-block: var(--space-16); }
  .features-grid--3 { grid-template-columns: 1fr; }
  .features-grid--grid-3 { grid-template-columns: 1fr; }
  .features-grid--grid-2 { grid-template-columns: 1fr; }
  .section-features .feature-card__desc { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card--featured { transform: none; }
  .stats-grid { flex-wrap: wrap; gap: var(--space-10); }
  .stats-grid--borders { gap: 0; }
  .stats-grid--borders .stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(0,0,0,0.12); }
  .stat-item { flex: 1 1 40%; }
  .cta-inline { flex-direction: column; text-align: center; }
  .cta-inline__actions { justify-content: center; }
  .section-cta--split .section-cta__inner { flex-direction: column; text-align: center; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .disclaimer-modal { padding: var(--space-4); }
  .disclaimer-modal__dialog { padding: var(--space-6); }
  .section-hero__actions { flex-direction: column; }
  .site-nav-mobile .mega-menu { display: block; }
  .site-nav-mobile .mega-menu[hidden],
  .site-nav-mobile .dropdown-menu[hidden] { display: none; }
  .site-nav-mobile__menu .nav-link { font-size: var(--text-base); }
  .tabs-component__nav { flex-wrap: wrap; }
  .section__actions { flex-direction: column; align-items: flex-start; }
  .section__header--centered .section__actions { align-items: center; }
}

@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
  .section-hero__headline { font-size: var(--text-3xl); }
  .pricing-card { padding: var(--space-6); }
  .site-footer__bar-inner { flex-direction: column; text-align: center; }
}

/* ── Animation Utilities ──────────────────────────────────────────────────── */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.6s ease both; }

/* Cards start hidden so there's no flash before the IntersectionObserver fires.
   Gated on .js so the hidden state only ever applies once main.js has actually
   booted and claimed responsibility for revealing them. If the script 404s,
   is blocked, or throws before initScrollReveal(), .js is never set and the
   cards stay visible instead of leaving a blank page. */
.js .feature-card, .js .pricing-card, .js .testimonial-card, .js .case-study-card,
.js .resource-card, .js .post-card, .js .stat-item, .js .team-card {
  opacity: 0;
}

/* Last-resort net: if .js is set but the observer never reveals a card (an
   init threw, IntersectionObserver never fired, the element sat outside the
   root margin), fade it in anyway rather than leaving a blank region.
   Scoped to cards still awaiting reveal, so it cannot override or cancel the
   real fade-in-up animation once that class lands. */
.js .feature-card:not(.animate-fade-in-up):not(.has-animated),
.js .pricing-card:not(.animate-fade-in-up):not(.has-animated),
.js .testimonial-card:not(.animate-fade-in-up):not(.has-animated),
.js .case-study-card:not(.animate-fade-in-up):not(.has-animated),
.js .resource-card:not(.animate-fade-in-up):not(.has-animated),
.js .post-card:not(.animate-fade-in-up):not(.has-animated),
.js .stat-item:not(.animate-fade-in-up):not(.has-animated),
.js .team-card:not(.animate-fade-in-up):not(.has-animated) {
  animation: fl-reveal-failsafe 0.3s ease 3s forwards;
}
@keyframes fl-reveal-failsafe { to { opacity: 1; } }
.feature-card.animate-fade-in-up, .pricing-card.animate-fade-in-up,
.testimonial-card.animate-fade-in-up, .case-study-card.animate-fade-in-up,
.resource-card.animate-fade-in-up, .post-card.animate-fade-in-up,
.stat-item.animate-fade-in-up, .team-card.animate-fade-in-up,
.feature-card.has-animated, .pricing-card.has-animated,
.testimonial-card.has-animated, .case-study-card.has-animated,
.resource-card.has-animated, .post-card.has-animated,
.stat-item.has-animated, .team-card.has-animated {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ── Flexible Timeline ───────────────────────────────────────────────────── */

.section-timeline .timeline {
  position: relative;
  display: grid;
  gap: var(--space-5);
  max-width: 1080px;
  margin-inline: auto;
  margin-top: var(--space-8);
}

.section-timeline .timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--color-gray-200);
}

.section-timeline .timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 112px;
}

.section-timeline .timeline__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  z-index: 2;
}

.section-timeline .timeline__marker-num,
.section-timeline .timeline__marker-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  border: 3px solid var(--color-white);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  line-height: 1;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.section-timeline .timeline__marker-num::after,
.section-timeline .timeline__marker-icon::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: var(--radius-full);
  border: 2px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
  opacity: 0;
  transform: scale(0.75);
}

.section-timeline .timeline__item.is-active .timeline__marker-num::after,
.section-timeline .timeline__item.is-active .timeline__marker-icon::after {
  animation: timeline-pulse 1.7s ease-out infinite;
}

.section-timeline .timeline__content {
  background: color-mix(in srgb, var(--color-white) 94%, var(--color-brand));
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  width: 100%;
}

.section-timeline .timeline__item:nth-child(odd) .timeline__content {
  grid-column: 1;
  justify-self: stretch;
  text-align: right;
  align-self: center;
}

.section-timeline .timeline__item:nth-child(even) .timeline__content {
  grid-column: 2;
  justify-self: stretch;
  text-align: left;
  align-self: center;
}

.section-timeline .timeline__step-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: var(--font-semi);
}

.section-timeline .timeline__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.25;
}

.section-timeline .timeline__body {
  margin-top: var(--space-3);
  color: var(--color-warm-gray);
}

.section-timeline .timeline__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-accent);
  font-weight: var(--font-semi);
}

.section-timeline .timeline.has-reveal .timeline__content,
.section-timeline .timeline.has-reveal .timeline__body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.55s ease;
}

.section-timeline .timeline.has-reveal .timeline__item:nth-child(odd) .timeline__content {
  transform: translateX(-28px);
}

.section-timeline .timeline.has-reveal .timeline__item:nth-child(even) .timeline__content {
  transform: translateX(28px);
}

.section-timeline .timeline.has-reveal .timeline__item.is-revealed .timeline__content,
.section-timeline .timeline.has-reveal .timeline__item.is-revealed .timeline__body {
  opacity: 1;
  transform: translate(0, 0);
}

.section--dark .timeline__content,
.section--brand .timeline__content {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}

.section--dark .timeline__body,
.section--brand .timeline__body {
  color: rgba(255, 255, 255, 0.86);
}

.section--dark .timeline__marker-num,
.section--dark .timeline__marker-icon,
.section--brand .timeline__marker-num,
.section--brand .timeline__marker-icon {
  border-color: rgba(255, 255, 255, 0.22);
}

@keyframes timeline-pulse {
  0% {
    opacity: 0.55;
    transform: scale(0.75);
  }
  70% {
    opacity: 0;
    transform: scale(1.35);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@media (max-width: 900px) {
  .section-timeline .timeline::before {
    left: 28px;
    transform: none;
  }

  .section-timeline .timeline__item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-4);
  }

  .section-timeline .timeline__marker {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 1;
    justify-content: flex-start;
  }

  .section-timeline .timeline__item .timeline__content,
  .section-timeline .timeline__item:nth-child(odd) .timeline__content,
  .section-timeline .timeline__item:nth-child(even) .timeline__content {
    grid-column: 2;
    justify-self: stretch;
    text-align: left;
  }

  .section-timeline .timeline.has-reveal .timeline__item:nth-child(odd) .timeline__content,
  .section-timeline .timeline.has-reveal .timeline__item:nth-child(even) .timeline__content {
    transform: translateY(20px);
  }
}

/* ── Comparison Table ─────────────────────────────────────────────────────── */

.comparison-table { overflow-x: auto; }
.comparison-table table { width: 100%; border-collapse: collapse; }
.comparison-table th, .comparison-table td { padding: var(--space-4) var(--space-5); text-align: center; border-bottom: 1px solid var(--color-gray-200); }
.comparison-table th[scope="row"] { text-align: left; font-weight: var(--font-medium); }
.comparison-table th.is-featured { background: var(--color-brand); color: var(--color-white); }
.comparison-table td:has(.check-icon) { color: var(--color-success); }
.comparison-table td:has(.cross-icon) { color: var(--color-gray-300); }

/* ── Team Grid ────────────────────────────────────────────────────────────── */

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.team-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.team-featured { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-8); align-items: center; margin-bottom: var(--space-10); }
.team-featured__media { border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-gray-100); }
.team-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.team-featured__name { font-size: var(--text-3xl); line-height: 1.15; }
.team-featured__position { color: var(--color-gray-500); margin-bottom: var(--space-4); }
.team-featured__social { margin-bottom: var(--space-4); }
.team-featured__social a { color: var(--color-gray-400); font-weight: var(--font-semi); }
.team-featured__social a:hover { color: var(--color-brand); }
.team-featured__body { color: var(--color-gray-700); }

.team-card { display: flex; align-items: center; gap: var(--space-4); text-align: left; }
.team-card__photo { flex: 0 0 120px; width: 120px; margin-right: 0; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 3/4; margin-bottom: 0; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { font-size: var(--text-lg); font-weight: var(--font-semi); }
.team-card__role { font-size: var(--text-sm); color: var(--color-gray-500); margin-bottom: var(--space-3); }
.team-card__social { display: flex; justify-content: flex-start; gap: var(--space-3); }
.team-card__social a { color: var(--color-gray-400); transition: color var(--transition-fast); }
.team-card__social a:hover { color: var(--color-brand); }

@media (max-width: 1024px) {
  .team-grid,
  .team-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-featured {
    grid-template-columns: 1fr;
  }

  .team-card {
    flex-direction: column;
    text-align: center;
  }

  .team-card__photo {
    margin-inline: auto;
    margin-bottom: var(--space-4);
  }

  .team-card__social {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .team-grid,
  .team-grid--cols-3 {
    grid-template-columns: 1fr;
  }
}

/* ── Case Study Cards ─────────────────────────────────────────────────────── */

.case-study-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  padding: var(--space-2);
  margin: calc(-1 * var(--space-2));
}
.case-study-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.case-study-grid:has(> .case-study-card:only-child) {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.case-study-grid:has(> .case-study-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-study-card { position: relative; width: 100%; margin-inline: auto; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.case-study-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.case-study-card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.case-study-card__type-icon { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-gray-100); color: var(--color-gray-400); transition: background var(--transition-base), color var(--transition-base); }
.case-study-card:hover .case-study-card__type-icon { background: rgba(249,115,22,0.12); color: var(--color-accent); }
.case-study-card__type-icon i, .case-study-card__type-icon svg { width: 16px; height: 16px; }
.case-study-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.case-study-card:hover .case-study-card__img { transform: scale(1.05); }
.case-study-card__body { padding: var(--space-6); }
.case-study-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-8); }
.case-study-card__eyebrow { font-size: var(--text-xs); margin-bottom: var(--space-2) !important; }
.cs-badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semi); line-height: 1; padding: 3px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.cs-badge--accent { background: rgba(249,115,22,0.12); color: var(--color-accent); }
.cs-badge--purple { background: rgba(99,102,241,0.12); color: var(--color-accent-2); }
.cs-badge--teal   { background: #C8E6E5; color: #4A9E9C; }
.cs-badge--honey  { background: #FDF0E0; color: #C97B30; }
.case-study-card__title { font-size: var(--text-lg); font-weight: var(--font-semi); margin-bottom: var(--space-2); }
.case-study-card__title a:hover { color: var(--color-accent); }
.case-study-card__excerpt { font-size: var(--text-sm); color: var(--color-gray-600); }
.case-study-card__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-gray-100); }
.case-study-card__logo { height: 24px; width: auto; opacity: 0.6; }

@media (max-width: 1024px) {
  .case-study-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .case-study-grid,
  .case-study-grid--cols-2 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .case-study-grid:has(> .case-study-card:only-child) {
    grid-template-columns: 1fr;
  }

  .case-study-card__body {
    padding: var(--space-5);
  }

  .case-study-card__footer {
    padding: var(--space-3) var(--space-5);
  }

  .case-study-card__title {
    font-size: var(--text-base);
  }
}

/* ── Resource Cards ───────────────────────────────────────────────────────── */

.archive-page {
  padding-block: var(--space-12) var(--space-16);
}

.archive-filters {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--color-white);
}

.archive-filters .searchandfilter ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  list-style: none;
}

.archive-filters .searchandfilter ul > li:not(.sf-field-reset) {
  flex: 0 0 280px;
}

.archive-filters .searchandfilter li {
  margin: 0;
  padding: 0;
}

.archive-filters .searchandfilter h4 {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2) 0;
  color: var(--color-gray-500);
}

.archive-filters .searchandfilter label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  margin-bottom: var(--space-2);
  color: var(--color-brand);
}

.archive-filters .searchandfilter .sf-field-reset {
  display: flex;
  align-items: flex-end;
  margin-left: auto;
  align-self: flex-end;
}

.archive-filters .searchandfilter .sf-field-reset a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-gray-600);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.archive-filters .searchandfilter .sf-field-reset a:hover {
  background: var(--bg-secondary);
  border-color: var(--color-gray-400);
  color: var(--color-brand);
}

.archive-filters .searchandfilter input[type="search"],
.archive-filters .searchandfilter input[type="text"],
.archive-filters .searchandfilter select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-brand);
}

.archive-filters .searchandfilter input[type="submit"] {
  min-height: 44px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: var(--font-semi);
  padding: 0 18px;
  cursor: pointer;
  transition: filter var(--transition-base), transform var(--transition-base);
}

.archive-filters .searchandfilter input[type="submit"]:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.archive-filters .searchandfilter .sf-field-taxonomy-resource_type ul,
.archive-filters .searchandfilter .sf-field-taxonomy-resource_topic ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.archive-filters .searchandfilter .sf-field-taxonomy-resource_type li,
.archive-filters .searchandfilter .sf-field-taxonomy-resource_topic li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.resource-card { border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); overflow: hidden; transition: box-shadow var(--transition-base), transform var(--transition-base); }
.resource-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.resource-card__media { aspect-ratio: 16/9; overflow: hidden; }
.resource-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.resource-card:hover .resource-card__img { transform: scale(1.05); }
.resource-card__body { padding: var(--space-6); }
.resource-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.resource-card__type { font-size: var(--text-xs); font-weight: var(--font-semi); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-2); }
.resource-card__gated-badge { font-size: var(--text-xs); font-weight: var(--font-semi); background: var(--color-accent); color: var(--color-white); padding: 2px 8px; border-radius: var(--radius-full); }
.resource-card__read-time { font-size: var(--text-xs); color: var(--color-gray-400); }
.resource-card__title { font-size: var(--text-lg); font-weight: var(--font-semi); margin-bottom: var(--space-2); }
.resource-card__title a:hover { color: var(--color-accent-2); }
.resource-card__excerpt { font-size: var(--text-sm); color: var(--color-gray-600); }

/* Resource type variants: same component structure with lightweight visual differences. */
.resource-card--type-webinar .resource-card__type,
.resource-card--type-video .resource-card__type {
  color: #0f766e;
}

.resource-card--type-report .resource-card__type,
.resource-card--type-white-paper .resource-card__type,
.resource-card--type-whitepaper .resource-card__type {
  color: #1d4ed8;
}

.resource-card--type-ebook .resource-card__type,
.resource-card--type-guide .resource-card__type {
  color: #7c3aed;
}

.resource-card--type-webinar .resource-card__media,
.resource-card--type-video .resource-card__media {
  position: relative;
}

.resource-card--type-webinar .resource-card__media::after,
.resource-card--type-video .resource-card__media::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: rgba(10, 15, 46, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

@media (max-width: 1024px) {
  .archive-filters .searchandfilter ul {
    flex-wrap: wrap;
  }

  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .archive-page {
    padding-block: var(--space-8) var(--space-12);
  }

  .archive-filters {
    padding: var(--space-4);
  }

  .archive-filters .searchandfilter ul > li:not(.sf-field-reset),
  .archive-filters .searchandfilter .sf-field-reset {
    flex: 1 1 100%;
    margin-left: 0;
    align-self: auto;
  }

  .archive-filters .searchandfilter .sf-field-reset a {
    width: 100%;
    justify-content: center;
  }

  .resource-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .resource-card__body {
    padding: var(--space-5);
  }
}

/* ── Archive Pagination & Empty State ───────────────────────────────────── */

.archive-pagination { margin-top: var(--space-12); display: flex; justify-content: center; }
.archive-empty { text-align: center; color: var(--color-warm-gray); padding-block: var(--space-16); font-size: var(--text-lg); }

/* WordPress outputs .nav-links > .page-numbers */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-8);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base);
  border: 1px solid transparent;
}

.page-numbers:hover {
  background: var(--bg-secondary);
  border-color: var(--color-gray-200);
}

.page-numbers.current {
  background: var(--color-brand);
  color: var(--color-white);
  border-color: var(--color-brand);
}

.page-numbers.dots {
  border: none;
  color: var(--color-gray-400);
  pointer-events: none;
}

.page-numbers.prev,
.page-numbers.next {
  gap: var(--space-1);
  padding-inline: var(--space-4);
  border-color: var(--color-gray-200);
}

.page-numbers.prev:hover,
.page-numbers.next:hover {
  background: var(--bg-secondary);
  border-color: var(--color-gray-300);
}

/* ── Single Post Header ──────────────────────────────────────────────────── */

.single-post__header {
  position: relative;
  overflow: hidden;
}

.single-post__header--overlay {
  background-color: var(--color-brand);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* Image layer — sits behind scrim, subdued via opacity + blend mode like section-hero */
.single-post__header--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--post-hero-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  mix-blend-mode: overlay;
}

.single-post__header-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(74,67,64,0.55) 0%, rgba(74,67,64,0.10) 60%, transparent 100%);
  pointer-events: none;
}

.single-post__header--overlay .single-post__header-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}

.single-post__header--overlay .single-post__title {
  color: #fff;
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.single-post__header--overlay .single-post__excerpt {
  color: rgba(255,255,255,0.85);
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
}

.single-post__header--overlay .single-post__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
}

.single-post__header--overlay .single-post__cat {
  color: var(--color-accent);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  text-decoration: none;
}

/* Standalone eyebrow use (resource/case study — direct child of header-inner) */
.single-post__header-inner > .single-post__cat {
  margin-bottom: var(--space-3);
}

.single-post__header--overlay .single-post__cat:hover {
  color: #fff;
}

.single-post__header--overlay .single-post__sep {
  color: rgba(255,255,255,0.4);
}

.single-post__header--overlay .single-post__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.tag-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  transition: background var(--transition-base), border-color var(--transition-base);
  backdrop-filter: blur(4px);
}

.tag-pill:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.55);
}

.single-post__body {
  padding-block: var(--space-16);
}

.single-post__content {
  max-width: var(--max-width-content-lg);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

@media (max-width: 768px) {
  .single-post__header--overlay {
    min-height: 50vh;
  }

  .single-post__header--overlay .single-post__title {
    font-size: var(--text-2xl);
  }

  .single-post__header--overlay .single-post__excerpt {
    font-size: var(--text-base);
  }

  .single-post__body {
    padding-block: var(--space-10);
  }
}

/* ── Single: Resource & Case Study shared styles ── */

.single-post__client-logo {
  margin-top: var(--space-6);
}

.resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.resource-gated-wall {
  text-align: center;
  padding: var(--space-10);
  background: var(--color-soft);
  border-radius: var(--radius-xl);
  margin-block: var(--space-8);
}
.resource-gated-wall__icon { font-size: 2.5rem; margin-bottom: var(--space-4); }
.resource-gated-wall__heading { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.resource-gated-wall__body { color: var(--color-text-muted); margin-bottom: var(--space-6); }

.case-study-section {
  margin-bottom: var(--space-10);
}
.case-study-section h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

.case-study-quote {
  border-left: 4px solid var(--color-brand);
  padding-left: var(--space-6);
  margin-block: var(--space-8);
}
.case-study-quote__text {
  font-size: var(--text-xl);
  font-style: italic;
  line-height: 1.55;
  margin-bottom: var(--space-3);
}
.case-study-quote__footer { font-size: var(--text-sm); color: var(--color-text-muted); }

.case-study-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-soft);
  border-radius: var(--radius-xl);
  margin-top: var(--space-10);
}
.case-study-meta-bar__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.case-study-meta-bar__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.case-study-meta-bar__value {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-text);
}

/* ── Case Study: Hero (light, left-aligned) ──────────────────────────────── */

.cs-hero {
  background: var(--bg-primary);
  padding-block: var(--space-20) var(--space-16);
}
.cs-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-16);
  align-items: center;
}
.cs-hero__cat {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--font-semi);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-accent); margin-bottom: var(--space-4);
}
.cs-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3.8vw, var(--text-5xl));
  font-weight: var(--font-semi); line-height: var(--leading-tight);
  color: var(--color-charcoal); margin-bottom: var(--space-5); max-width: 22ch;
}
.cs-hero__excerpt {
  font-size: var(--text-lg); line-height: var(--leading-relaxed);
  color: var(--color-warm-gray); margin-bottom: var(--space-8); max-width: 58ch;
}
.cs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Client aside card */
.cs-hero__aside {
  width: 240px; flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--color-gray-200); border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  box-shadow: var(--shadow-md);
}
.cs-hero__logo-wrap { display: flex; align-items: center; justify-content: center; min-height: 56px; }
.cs-hero__logo-placeholder {
  width: 100%; height: 56px; border-radius: var(--radius-md);
  background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); color: var(--color-gray-400); font-weight: var(--font-semi);
  text-align: center;
}
.cs-hero__divider { width: 100%; height: 1px; background: var(--color-gray-200); }
.cs-hero__client-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--font-semi); text-transform: uppercase; letter-spacing: 0.06em; }
.cs-hero__client-name  { font-size: var(--text-sm); font-weight: var(--font-semi); text-align: center; color: var(--color-charcoal); }
.cs-hero__tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.cs-hero__tag {
  font-size: var(--text-xs); font-weight: var(--font-semi);
  padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--bg-secondary); color: var(--color-warm-gray);
  border: 1px solid var(--color-gray-200);
}

@media (max-width: 820px) {
  .cs-hero__inner { grid-template-columns: 1fr; }
  .cs-hero__aside { display: none; }
}

/* ── Stats bar: light-bg bordered variant ────────────────────────────────── */

.stats-grid--bordered {
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
  gap: 0;
}
.stats-grid--bordered .stat-item { padding: var(--space-8) var(--space-12); }
.stats-grid--bordered .stat-item + .stat-item { border-left: 1px solid var(--color-gray-200); }
.section--light .stat-item__value,
.section--alt  .stat-item__value { color: var(--color-brand); }

@media (max-width: 640px) {
  .stats-grid--bordered .stat-item + .stat-item { border-left: none; border-top: 1px solid var(--color-gray-200); }
  .stats-grid--bordered .stat-item { flex: 1 1 40%; }
}

/* ── Quotes carousel section ─────────────────────────────────────────────── */

.cs-quotes-section {
  padding-block: var(--space-16);
}
.cs-quotes-section .container {
  display:flex; flex-direction: column; align-items: center; ;
}
.cs-quote-swiper {
  position: relative;
  padding-bottom: var(--space-16);
}
.cs-quote-swiper .swiper-button-prev,
.cs-quote-swiper .swiper-button-next {
  color: var(--color-brand) !important;
  top: 40%; transform: translateY(-50%); margin-top: 0;
}
.cs-quote-swiper .swiper-button-prev { left: var(--space-4); }
.cs-quote-swiper .swiper-button-next { right: var(--space-4); }
.cs-quote-swiper .swiper-pagination {
  bottom: var(--space-8);
  display: flex; justify-content: center; align-items: center; gap: var(--space-2);
}
.cs-quote-swiper .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: 100px;
  background: color-mix(in srgb, var(--color-brand) 20%, transparent);
  opacity: 1; margin: 0 !important;
  transition: background 0.3s ease, width 0.3s ease;
}
.cs-quote-swiper .swiper-pagination-bullet:hover {
  background: color-mix(in srgb, var(--color-brand) 45%, transparent);
}
.cs-quote-swiper .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--color-brand);
}

/* ── Customer Snapshot ───────────────────────────────────────────────────── */

.cs-snapshot {
  background: var(--bg-warm); border-radius: var(--radius-xl); padding: var(--space-8);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);
  margin-top: var(--space-4);
}
@media (max-width: 640px) { .cs-snapshot { grid-template-columns: 1fr; } }
.cs-snapshot__text p + p { margin-top: var(--space-3); }
.cs-snapshot__facts { display: flex; flex-direction: column; gap: var(--space-3); }
.cs-snapshot__fact {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
}
.cs-snapshot__fact-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--color-teal-light); color: var(--color-teal);
  display: flex; align-items: center; justify-content: center;
}
.cs-snapshot__fact-body { display: flex; flex-direction: column; gap: 2px; }
.cs-snapshot__fact-label { font-size: var(--text-xs); font-weight: var(--font-semi); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.cs-snapshot__fact-value { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-charcoal); }

/* ── Pain point check-list variant ──────────────────────────────────────── */
.check-list__icon--x { color: #EF4444; }

/* ── Why Frontlion reason cards ──────────────────────────────────────────── */

.cs-reasons { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.cs-reason {
  display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
}
.cs-reason__icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--color-soft-peach); color: var(--color-deep-coral);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.cs-reason__title { font-weight: var(--font-semi); font-size: var(--text-base); margin-bottom: var(--space-1); }
.cs-reason__text { font-size: var(--text-sm); color: var(--color-warm-gray); line-height: var(--leading-normal); }

/* ── Solution feature grid ───────────────────────────────────────────────── */

/* Grid columns/gap come from .section-cross-links__grid (feature-refit.css);
   this only adds the spacing below the section's intro copy. */
.cs-solution-grid {
  margin-top: var(--space-6);
}

/* ── Rollout timeline ────────────────────────────────────────────────────── */

.cs-timeline { display: flex; flex-direction: column; margin-top: var(--space-6); position: relative; }
.cs-timeline::before { content: ''; position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: var(--color-gray-200); }
.cs-timeline__item { display: flex; gap: var(--space-5); position: relative; padding-bottom: var(--space-6); }
.cs-timeline__item:last-child { padding-bottom: 0; }
.cs-timeline__dot {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-full);
  background: var(--color-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--font-bold); font-size: var(--text-sm); position: relative; z-index: 1;
}
.cs-timeline__dot--accent { background: var(--color-accent); }
.cs-timeline__body { padding-top: var(--space-2); }
.cs-timeline__title { font-weight: var(--font-semi); margin-bottom: var(--space-1); }
.cs-timeline__text { font-size: var(--text-sm); color: var(--color-warm-gray); line-height: var(--leading-normal); }

/* ── Outcome cards grid ──────────────────────────────────────────────────── */

.cs-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5); margin-top: var(--space-6);
}
@media (max-width: 700px) { .cs-outcomes-grid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) and (min-width: 701px) { .cs-outcomes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-outcome-card {
  background: var(--surface); border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.cs-outcome-card__accent { height: 3px; border-radius: var(--radius-full); margin-bottom: var(--space-1); }
.cs-outcome-card__accent--teal  { background: var(--color-teal); }
.cs-outcome-card__accent--coral { background: var(--color-deep-coral); }
.cs-outcome-card__accent--honey { background: var(--color-honey); }
.cs-outcome-card__stat { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-extra); color: var(--color-brand); line-height: 1; }
.cs-outcome-card__stat span { font-size: 60%; color: var(--color-accent); }
.cs-outcome-card__icon { font-size: 1.25rem; color: var(--color-accent-2); margin-bottom: var(--space-1); }
.cs-outcome-card__title { font-weight: var(--font-semi); font-size: var(--text-base); }
.cs-outcome-card__text { font-size: var(--text-sm); color: var(--color-warm-gray); line-height: var(--leading-normal); }

/* ── Post Cards (overlay style — used everywhere: archive, tag, related, index) ── */

.post-card { position: relative; border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

/* Image layer via CSS custom property, subdued with opacity + blend mode */
.post-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  text-decoration: none;
  background-color: var(--color-brand);
  isolation: isolate;
}

.post-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--post-card-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  mix-blend-mode: overlay;
  transition: opacity var(--transition-slow);
}

.post-card:hover .post-card__media::before { opacity: 0.65; }

.post-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  background: linear-gradient(to top, rgba(74,67,64,0.72) 0%, rgba(74,67,64,0.15) 65%, transparent 100%);
}

.post-card__title { font-size: var(--text-lg); font-weight: var(--font-semi); color: #fff; margin-bottom: var(--space-2); text-align: left; }
.post-card__excerpt { font-size: var(--text-sm); color: rgba(255,255,255,0.85); text-align: left; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.post-card__type-icon { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); color: #fff; }
.post-card__type-icon i, .post-card__type-icon svg { width: 16px; height: 16px; }

/* Resource type icon tooltips */
.post-card__type-icon[data-tooltip],
.case-study-card__type-icon[data-tooltip] { overflow: visible; }
a.post-card__type-icon:focus-visible,
a.case-study-card__type-icon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
a.post-card__type-icon:focus-visible::after,
a.case-study-card__type-icon:focus-visible::after { opacity: 1; transform: translateY(0); }
.post-card__type-icon[data-tooltip]::after,
.case-study-card__type-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-semi);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.post-card__type-icon[data-tooltip]:hover::after,
.case-study-card__type-icon[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.post-card__gated-badge { display: inline-block; margin-top: var(--space-2); padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semi); background: var(--color-accent); color: #fff; }

.post-card__meta { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); font-size: var(--text-xs); color: var(--color-gray-500); }
.post-card__cat { color: var(--color-accent-2); font-weight: var(--font-semi); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; }
.post-card__cat:hover { text-decoration: underline; }
.post-card__sep { color: var(--color-gray-300); }

/* ── Utility / Page Content ───────────────────────────────────────────────── */

.page-content { padding-block: var(--space-20); }
.page-header { margin-bottom: var(--space-10); }
.page-header__title { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }

/* =============================================================================
   Associate Workflow  [frontlion_associate_workflow]
   ============================================================================= */

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */

.associate-workflow {
  position: relative;
}

/* .associate-workflow height is set in JS (initDesktopScroll) based on viewport so it adapts on resize. */

/* ── Background gradient ───────────────────────────────────────────────────── */

.associate-workflow__bg-cover {
  display: none;
}
@media (min-width: 768px) {
  .associate-workflow__bg-cover {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
  }
}
.associate-workflow__bg-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.associate-workflow__bg-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #9BB8A0; /* sage — matches shortcode theme */
  mix-blend-mode: color;
  pointer-events: none;
}
.associate-workflow__bg-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 40%, transparent 60%, var(--bg-primary) 100%);
  z-index: 1;
  pointer-events: none;
}

.associate-workflow__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(155, 184, 160, 0.08) 0%,
    rgba(155, 184, 160, 0.12) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Edge fades (desktop only) ─────────────────────────────────────────────── */

.associate-workflow__fade { display: none; }

@media (min-width: 768px) {
  .associate-workflow__fade {
    display: block;
    position: absolute;
    left: 0; right: 0;
    height: 8rem;
    z-index: 1;
    pointer-events: none;
  }
  .associate-workflow__fade--top    { top: 0;    background: linear-gradient(to bottom, var(--bg-primary), transparent); }
  .associate-workflow__fade--bottom { bottom: 0; background: linear-gradient(to top,   var(--bg-primary), transparent); }
}

/* ── Sticky viewport ───────────────────────────────────────────────────────── */

.associate-workflow__sticky {
  position: relative;
  padding-block: var(--section-pad-y);
  background: linear-gradient(135deg, rgba(155, 184, 160, 0.06) 0%, rgba(155, 184, 160, 0.1) 60%, transparent 100%);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .associate-workflow__sticky {
    position: sticky;
    top: var(--wf-sticky-top, 0px);
    height: calc(100vh - var(--wf-sticky-top, 0px));
    /* padding-block: 0; */
    overflow: hidden;
    background: none;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }
}

/* Background images — fixed-position crossfade layer */
.associate-workflow__bg-images {
  display: none;
}

@media (min-width: 768px) {
  .associate-workflow__bg-images {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }
}

.associate-workflow__bg-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.associate-workflow__bg-image[data-workflow-bg="0"] { opacity: 1; }

.associate-workflow__bg-image img {
  display: block;
  max-width: none;
  width: auto;
  height: auto;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── Section header ────────────────────────────────────────────────────────── */

.associate-workflow__header {
  text-align: center;
  padding: 0 var(--space-6) var(--space-8);
  animation: wf-fade-in 0.6s ease 0.25s both;
  justify-items: center;
}

.associate-workflow__header h2 { max-width: 960px; margin-inline: auto; margin-bottom: var(--space-4); }
.associate-workflow__header .eyebrow { color: var(--color-sage); margin-bottom: var(--space-2) !important; }

@media (min-width: 768px) {
  .associate-workflow__header {
    position: relative;
    padding: 40px var(--space-6) var(--space-6);
    flex-shrink: 0;
    z-index: 20;
  }
}

/* ── Horizontal track ──────────────────────────────────────────────────────── */

.associate-workflow__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-inline: var(--space-4);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .associate-workflow__track {
    flex-direction: row;
    gap: 0;
    padding: 0;
    width: 400vw;
    flex: 1;
    min-height: 0;
    align-items: center;
    will-change: transform;
    position: relative;
    z-index: 2;
  }
}

/* ── Individual panel ──────────────────────────────────────────────────────── */

.associate-workflow__panel { width: 100%; }

@media (min-width: 768px) {
  .associate-workflow__panel {
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-8);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  /* First panel visible on load; JS manages rest */
  .associate-workflow__panel[data-step="0"] { opacity: 1; }
  .associate-workflow__panel.is-active { opacity: 1; }
}

/* ── Inner 2-col grid ──────────────────────────────────────────────────────── */

.associate-workflow__inner {
  display: grid;
  gap: var(--space-8);
  width: 100%;
}

@media (min-width: 1024px) {
  .associate-workflow__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    max-width: 1100px;
  }
}

/* width="full" — expand inner to 80vw */
@media (min-width: 1024px) {
  .associate-workflow--width-full .associate-workflow__inner { max-width: 80vw; }
}

/* image_position: left / right — align bg image horizontally */
.associate-workflow--visual-left  .associate-workflow__bg-image { justify-content: flex-start; }
.associate-workflow--visual-right .associate-workflow__bg-image { justify-content: flex-end; }

/* ── Content column ────────────────────────────────────────────────────────── */

.associate-workflow__content { display: flex; flex-direction: column; gap: var(--space-6); }

.associate-workflow__visual { display: flex; justify-content: flex-end; align-items: center; width: 100%; }

/* No bg images — both columns converge toward the center gap */
@media (min-width: 1024px) {
  .associate-workflow--no-bg .associate-workflow__visual  { margin-right: auto; }
}

/* ── Dot navigation ────────────────────────────────────────────────────────── */

.associate-workflow__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-8);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

@media (max-width: 767px) {
  .associate-workflow__dots { display: none; }
}

.associate-workflow__dot {
  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: background 0.3s ease, width 0.3s ease;
  flex-shrink: 0;
  position: relative;
  margin-inline: -10px;
}

.associate-workflow__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--color-sage) 20%, transparent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, width 0.3s ease;
}

.associate-workflow__dot:hover::before { background: color-mix(in srgb, var(--color-sage) 45%, transparent); }

.associate-workflow__dot.is-active {
  width: 44px;
}

.associate-workflow__dot.is-active::before {
  width: 24px;
  background: var(--color-sage);
}

.associate-workflow__step-meta { display: flex; align-items: flex-start; gap: var(--space-4); }

.associate-workflow__icon-wrap {
  flex-shrink: 0;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: rgba(155, 184, 160, 0.1);
  border: 1px solid rgba(155, 184, 160, 0.2);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.associate-workflow__icon-wrap i,
.associate-workflow__icon-wrap svg { width: 2rem; height: 2rem; color: var(--color-sage); }

.associate-workflow__step-num {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-1);
}

.associate-workflow__step-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  font-weight: var(--font-semi);
  line-height: var(--leading-tight);
  margin: 0;
}

.associate-workflow__step-subtitle {
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
  margin: var(--space-1) 0 0;
}

.associate-workflow__description {
  font-size: var(--text-base);
  color: var(--color-warm-gray);
  line-height: var(--leading-relaxed);
  max-width: 70ch;
}

.associate-workflow__features, .persona-panels__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.associate-workflow__feature, .persona-panels__feature { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.associate-workflow__feature-dot, .persona-panels__feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-sage); flex-shrink: 0; }

/* ── Shared mockup chrome ──────────────────────────────────────────────────── */

.wf-mockup {
  position: relative;
  width: 100%;
  max-width: 410px;
  margin-inline: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 60px rgba(74, 158, 156, 0.06);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
  margin-right:0;
}

/* Triggered by IntersectionObserver (mobile) or .is-active (desktop) */
.associate-workflow__visual.is-visible .wf-mockup,
.associate-workflow__panel.is-active  .wf-mockup { opacity: 1; transform: translateY(0); }

@media (max-width: 767px) {
  .wf-mockup { opacity: 1; transform: none; transition: none; }
}

/* ── v2: Product Screen Iframe Visual ──────────────────────────────────────── */

.wf-screen-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 1200 / 675;
  margin-inline: auto;
  margin-right: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.associate-workflow__visual.is-visible .wf-screen-wrap,
.associate-workflow__panel.is-active   .wf-screen-wrap { opacity: 1; transform: translateY(0); }

@media (max-width: 767px) { .wf-screen-wrap { opacity: 1; transform: none; transition: none; } }

.wf-screen-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.associate-workflow__visual .frontlion-product-illustration {
  width: 100%;
  max-width: 100%;
  pointer-events: auto;
}

.associate-workflow__visual .frontlion-product-illustration .ps-shell {
  padding-top: 0 !important;
}

.associate-workflow__visual .frontlion-product-illustration .ps-toggle {
  display: none !important;
}

.associate-workflow__visual .frontlion-product-illustration .ps-frame-phone,
.associate-workflow__visual .frontlion-product-illustration .ps-frame-desktop {
  max-width: 100%;
}

.wf-mockup__titlebar {
  display: flex; align-items: center; gap: var(--space-2);
  height: 40px;
  background: rgba(74, 67, 64, 0.05);
  border-bottom: 1px solid var(--color-gray-200);
  padding-inline: var(--space-4);
}
.wf-mockup__dots { display: flex; gap: 6px; }
.wf-mockup__dots span { width: 10px; height: 10px; border-radius: 50%; }
.wf-mockup__dots span:nth-child(1) { background: rgba(239,  68,  68, 0.6); }
.wf-mockup__dots span:nth-child(2) { background: rgba(234, 179,   8, 0.6); }
.wf-mockup__dots span:nth-child(3) { background: rgba( 34, 197,  94, 0.6); }
.wf-mockup__title { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--color-warm-gray); }

.wf-mockup__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Badges ────────────────────────────────────────────────────────────────── */

.wf-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px; white-space: nowrap; flex-shrink: 0;
}
.wf-badge--amber       { background: rgba(232,201,122,0.2); border: 1px solid rgba(232,201,122,0.3); color: #b8913a; }
.wf-badge--teal        { background: rgba( 74,158,156,0.2); border: 1px solid rgba( 74,158,156,0.3); color: var(--color-teal); }
.wf-badge--teal-outline{ background: rgba( 74,158,156,0.1); border: 1px solid rgba( 74,158,156,0.2); color: var(--color-teal); }

/* ── Action buttons (mockup) ───────────────────────────────────────────────── */

.wf-actions { display: flex; gap: var(--space-2); }
.wf-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs); font-weight: var(--font-medium);
  cursor: default; border: none;
  transition: background var(--transition-fast);
}
.wf-btn--teal  { flex: 1; background: rgba(74,158,156,0.2); border: 1px solid rgba(74,158,156,0.3); color: var(--color-teal); }
.wf-btn--ghost { background: rgba(74,67,64,0.05); border: 1px solid var(--color-gray-200); color: var(--color-warm-gray); }

/* ── Metrics (Command Center) ──────────────────────────────────────────────── */

.wf-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2); }
.wf-metric  { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-3); background: rgba(253,250,247,0.5); }
.wf-metric__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-warm-gray); }
.wf-metric__row   { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); }
.wf-metric__number { font-size: var(--text-xl); font-weight: var(--font-light); }
.wf-metric__trend  { font-size: 10px; }
.wf-metric__trend--up   { color: var(--color-honey); }
.wf-metric__trend--down { color: var(--color-teal); }

/* ── Queue (Command Center) ────────────────────────────────────────────────── */

.wf-queue { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.wf-queue__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: rgba(74,67,64,0.05);
  font-size: var(--text-xs); font-weight: var(--font-medium);
}
.wf-queue__header i,
.wf-queue__header svg { width: 14px; height: 14px; color: var(--color-teal); }
.wf-queue__list { list-style: none; margin: 0; padding: 0; }
.wf-queue__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3);
  border-top: 1px solid rgba(229,231,235,0.5);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity   0.4s ease calc(0.8s + var(--anim-delay, 0ms)),
    transform 0.4s ease calc(0.8s + var(--anim-delay, 0ms));
}
.associate-workflow__visual.is-visible .wf-queue__item,
.associate-workflow__panel.is-active   .wf-queue__item { opacity: 1; transform: translateX(0); }
@media (max-width: 767px) { .wf-queue__item { opacity: 1; transform: none; transition: none; } }

.wf-queue__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wf-queue__dot--high { background: var(--color-honey); }
.wf-queue__dot--mid  { background: var(--color-teal); }
.wf-queue__dot--low  { background: var(--color-teal-light); }

.wf-queue__info { flex: 1; min-width: 0; }
.wf-queue__name    { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-queue__service { font-size: 10px; color: var(--color-warm-gray); }
.wf-queue__wait    { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--color-warm-gray); }
.wf-queue__wait i,
.wf-queue__wait svg { width: 12px; height: 12px; }
.wf-queue__arrow { flex-shrink: 0; color: var(--color-teal); }
.wf-queue__arrow svg,
.wf-queue__arrow i { width: 14px; height: 14px; display: block; }

/* ── Smart Routing ─────────────────────────────────────────────────────────── */

.wf-routing-card { border-radius: var(--radius-xl); padding: var(--space-4); }
.wf-routing-card--customer { background: linear-gradient(135deg, rgba(74,158,156,0.08), rgba(200,230,229,0.04)); border: 1px solid rgba(74,158,156,0.25); }
.wf-routing-card--match    { background: linear-gradient(135deg, rgba(74,158,156,0.08), rgba(74,158,156,0.04)); border: 1px solid rgba(74,158,156,0.25); }

.wf-routing-card__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.wf-routing-card__meta   { flex: 1; min-width: 0; }
.wf-routing-card__name   { font-size: var(--text-sm); font-weight: var(--font-medium); }
.wf-routing-card__sub    { font-size: 10px; color: var(--color-warm-gray); }

.wf-routing-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.wf-routing-avatar--teal {
  background: rgba(74,158,156,0.2);
  border: 1px solid rgba(74,158,156,0.3);
}
.wf-routing-avatar i,
.wf-routing-avatar svg { width: 16px; height: 16px; color: var(--color-teal); }

.wf-routing-card__details {
  display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-2); font-size: 10px;
}
.wf-routing-card__details > div {
  background: rgba(253,250,247,0.3); border-radius: var(--radius-lg); padding: 6px 10px;
}
.wf-detail-label { color: var(--color-warm-gray); }

.wf-routing-card__skills { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2); font-size: 10px; }
.wf-routing-card__skills span { background: rgba(253,250,247,0.3); border-radius: var(--radius-lg); padding: 6px var(--space-2); text-align: center; }

/* Routing flow animation */
.wf-routing-flow { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding-block: var(--space-2); }
.wf-routing-flow__dot { width: 8px; height: 8px; border-radius: 50%; }
.wf-routing-flow__dot--left  { background: var(--color-teal); animation: wf-pulse 1.5s ease-in-out infinite; }
.wf-routing-flow__dot--right { background: var(--color-teal); animation: wf-pulse 1.5s ease-in-out infinite 0.5s; }
.wf-routing-flow__line { width: 56px; height: 1px; background: linear-gradient(to right, var(--color-teal), var(--color-teal-light)); }
.wf-routing-flow i,
.wf-routing-flow svg { width: 16px; height: 16px; color: var(--color-teal-light); }

/* ── Guided Service ────────────────────────────────────────────────────────── */

.wf-stepper { display: flex; align-items: center; }
.wf-stepper__step { display: flex; align-items: center; flex: 1; }
.wf-stepper__step:last-child { flex: none; }

.wf-stepper__icon {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--color-warm-gray);
  background: rgba(74,67,64,0.05);
  border: 1px solid var(--color-gray-200);
}
.wf-stepper__step--complete .wf-stepper__icon { background: rgba(74,158,156,0.15); border-color: rgba(74,158,156,0.4); }
.wf-stepper__step--complete .wf-stepper__icon i,
.wf-stepper__step--complete .wf-stepper__icon svg { width: 14px; height: 14px; color: var(--color-teal); }
.wf-stepper__step--active .wf-stepper__icon {
  background: rgba(74,158,156,0.15); border-color: rgba(74,158,156,0.4); color: var(--color-teal);
  animation: wf-pulse-ring 1.5s ease-in-out infinite;
}

.wf-stepper__line { flex: 1; height: 1px; background: var(--color-gray-200); margin: 0 4px; }
.wf-stepper__step--complete .wf-stepper__line { background: rgba(74,158,156,0.4); }

.wf-stepper-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--color-warm-gray);
  margin-top: var(--space-1);
}
.wf-stepper-labels span { text-align: center; width: 16.6%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wf-service-panel { border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.wf-service-panel__header { display: flex; align-items: center; justify-content: space-between; }
.wf-service-panel__title  { font-size: var(--text-sm); font-weight: var(--font-semi); margin: 0; }

.wf-systems { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-2); }
.wf-system {
  display: flex; align-items: center; gap: var(--space-2);
  background: rgba(74,67,64,0.04); border-radius: var(--radius-lg); padding: var(--space-2) 10px;
  opacity: 0; transform: translateX(-4px);
  transition:
    opacity   0.4s ease calc(0.8s + var(--anim-delay, 0ms)),
    transform 0.4s ease calc(0.8s + var(--anim-delay, 0ms));
}
.associate-workflow__visual.is-visible .wf-system,
.associate-workflow__panel.is-active   .wf-system { opacity: 1; transform: translateX(0); }
@media (max-width: 767px) { .wf-system { opacity: 1; transform: none; transition: none; } }

.wf-system i,
.wf-system svg { width: 14px; height: 14px; color: var(--color-teal); flex-shrink: 0; }
.wf-system__name   { font-size: 10px; line-height: 1.2; }
.wf-system__status { font-size: 9px; color: var(--color-teal); }

.wf-compliance-banner {
  display: flex; align-items: center; gap: var(--space-2);
  background: rgba(74,158,156,0.08); border: 1px solid rgba(74,158,156,0.2); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.4s ease 1.3s, transform 0.4s ease 1.3s;
}
.associate-workflow__visual.is-visible .wf-compliance-banner,
.associate-workflow__panel.is-active   .wf-compliance-banner { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) { .wf-compliance-banner { opacity: 1; transform: none; transition: none; } }

.wf-compliance-banner i,
.wf-compliance-banner svg { width: 14px; height: 14px; color: var(--color-teal); flex-shrink: 0; }
.wf-compliance-banner p   { font-size: 10px; color: var(--color-teal); margin: 0; max-width: none; }

/* ── Performance Insights ──────────────────────────────────────────────────── */

.wf-scores { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-2); }
.wf-score  { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-3); background: rgba(253,250,247,0.5); }
.wf-score__label  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-warm-gray); }
.wf-score__row    { display: flex; align-items: baseline; gap: var(--space-1); margin-top: var(--space-1); }
.wf-score__number { font-size: var(--text-2xl); font-weight: var(--font-light); }
.wf-score__suffix { font-size: var(--text-xs); color: var(--color-warm-gray); }
.wf-score__trend  { font-size: 10px; color: var(--color-teal); margin-left: auto; }

.wf-chart { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-3); background: rgba(253,250,247,0.5); }
.wf-chart__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); font-size: var(--text-xs); }
.wf-chart__header i,
.wf-chart__header svg { width: 14px; height: 14px; color: var(--color-teal); }
.wf-chart__bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.wf-chart__bar {
  flex: 1; border-radius: 2px;
  background: rgba(74,67,64,0.1);
  height: 0;
  transition: height 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) calc(var(--bar-delay, 0.8s));
}
.associate-workflow__visual.is-visible .wf-chart__bar,
.associate-workflow__panel.is-active   .wf-chart__bar { height: var(--bar-h); }
@media (max-width: 767px) { .wf-chart__bar { height: var(--bar-h); transition: none; } }

.wf-chart__bar--highlight { background: linear-gradient(to top, var(--color-teal), var(--color-teal-light)); }
.wf-chart__labels { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: 9px; color: var(--color-warm-gray); }

.wf-coaching {
  border: 1px solid rgba(74,158,156,0.25);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(74,158,156,0.08), rgba(200,230,229,0.04));
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease 1.2s, transform 0.4s ease 1.2s;
}
.associate-workflow__visual.is-visible .wf-coaching,
.associate-workflow__panel.is-active   .wf-coaching { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) { .wf-coaching { opacity: 1; transform: none; transition: none; } }

.wf-coaching__header { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-teal); }
.wf-coaching__icon   { width: 20px; height: 20px; border-radius: 50%; background: rgba(74,158,156,0.15); display: flex; align-items: center; justify-content: center; }
.wf-coaching__icon i,
.wf-coaching__icon svg { width: 12px; height: 12px; color: var(--color-teal); }
.wf-coaching p { font-size: 11px; color: var(--color-warm-gray); line-height: var(--leading-relaxed); margin: 0; max-width: none; }

.wf-goals { display: flex; gap: var(--space-2); }
.wf-goal  { flex: 1; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 10px; background: rgba(253,250,247,0.5); }
.wf-goal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-size: 10px; color: var(--color-warm-gray); }
.wf-goal__header span:last-child { color: var(--color-charcoal); }
.wf-goal__track { height: 6px; background: rgba(74,67,64,0.1); border-radius: var(--radius-full); overflow: hidden; }
.wf-goal__fill  {
  height: 100%; width: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-teal), var(--color-teal-light));
  transition: width 0.7s ease 1.5s;
}
.associate-workflow__visual.is-visible .wf-goal__fill,
.associate-workflow__panel.is-active   .wf-goal__fill { width: var(--goal-pct); }
@media (max-width: 767px) { .wf-goal__fill { width: var(--goal-pct); transition: none; } }

/* ── Customer Journey ──────────────────────────────────────────────────────── */

.customer-journey {
  position: relative;
  --cj-inner-max: 1100px;
  --cj-grid-gap: var(--space-12);
  margin-bottom: var(--space-12);
}

/* Height set by JS (initCustomerJourney) on desktop. */

.customer-journey__bg-cover {
  display: none;
}
@media (min-width: 768px) {
  .customer-journey__bg-cover {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
  }
}
.customer-journey__bg-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.customer-journey__bg-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #4A9E9C; /* teal — matches shortcode theme */
  mix-blend-mode: color;
  pointer-events: none;
}
.customer-journey__bg-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 40%, transparent 60%, var(--bg-primary) 100%);
  z-index: 1;
  pointer-events: none;
}

.customer-journey__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74,158,156,0.08) 0%, rgba(74,158,156,0.12) 50%, transparent 100%);
  pointer-events: none;
}

.customer-journey__fade { display: none; }

@media (min-width: 768px) {
  .customer-journey__fade {
    display: block;
    position: absolute;
    left: 0; right: 0;
    height: 8rem;
    z-index: 1;
    pointer-events: none;
  }
  .customer-journey__fade--top    { top: 0;    background: linear-gradient(to bottom, var(--bg-primary), transparent); }
  .customer-journey__fade--bottom { bottom: 0; background: linear-gradient(to top,   var(--bg-primary), transparent); }
}

.customer-journey__sticky {
  position: relative;
  padding-block: var(--section-pad-y);
  background: linear-gradient(135deg, rgba(74,158,156,0.06) 0%, rgba(74,158,156,0.10) 60%, transparent 100%);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .customer-journey__sticky {
    position: sticky;
    top: var(--cj-sticky-top, 0px);
    height: calc(100vh - var(--cj-sticky-top, 0px));
    /* padding-block: 0; */
    overflow: hidden;
    background: none;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }
}

.customer-journey__header {
  text-align: center;
  padding: 0 var(--space-6) var(--space-8);
  animation: wf-fade-in 0.6s ease 0.25s both;
  justify-items: center;
}

.customer-journey__header h2 { max-width: 960px; margin-inline: auto; margin-bottom: var(--space-4); }
.customer-journey__header .eyebrow { color: var(--color-teal); margin-bottom: var(--space-2) !important; }

@media (min-width: 768px) {
  .customer-journey__header {
    padding: clamp(var(--space-4), 4vh, 40px) var(--space-6) var(--space-4);
    flex-shrink: 0;
    z-index: 20;
  }
}

/* Background images — fixed-position crossfade layer */
.customer-journey__bg-images {
  display: none;
}

@media (min-width: 768px) {
  .customer-journey__bg-images {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }
}

.customer-journey__bg-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* First image visible before JS takes over */
.customer-journey__bg-image[data-journey-bg="0"] { opacity: 1; }

.customer-journey__bg-image img {
  display: block;
  max-width: none;
  width: auto;
  height: auto;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.customer-journey__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-inline: var(--space-4);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .customer-journey__track {
    flex-direction: row;
    gap: 0;
    padding: 0;
    width: 400vw;
    flex: 1;
    min-height: 0;
    align-items: center;
    overflow: hidden;
    will-change: transform;
    position: relative;
    z-index: 2;
  }
}

.customer-journey__panel { width: 100%; }

@media (min-width: 768px) {
  .customer-journey__panel {
    width: 100vw;
    height: auto;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-8);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .customer-journey__panel[data-journey-step="0"] { opacity: 1; }
  .customer-journey__panel.is-active              { opacity: 1; }
}

.customer-journey__inner { display: grid; gap: var(--space-8); width: 100%; }

@media (min-width: 768px) {
  .customer-journey__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--cj-grid-gap);
    align-items: stretch;
    max-width: var(--cj-inner-max);
    height: 100%;
  }
  .customer-journey__visual { order: -1; }
}

@media (min-width: 1024px) {
  .customer-journey { --cj-grid-gap: var(--space-16); }
}

/* width="full" — expand inner to 80vw */
@media (min-width: 768px) {
  .customer-journey--width-full { --cj-inner-max: 80vw; }
}

/* image_position: left / right — align bg image horizontally */
.customer-journey--visual-left  .customer-journey__bg-image { justify-content: flex-start; }
.customer-journey--visual-right .customer-journey__bg-image { justify-content: flex-end; }

.customer-journey__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  min-height: 100%;
}

.customer-journey__visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  min-height: 100%;
}

/* ── Dot navigation ────────────────────────────────────────────────────────── */

.customer-journey__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-8);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

@media (max-width: 767px) {
  .customer-journey__dots { display: none; }
}

@media (min-width: 768px) {
  .customer-journey__dots {
    width: min(var(--cj-inner-max), calc(100vw - (var(--space-8) * 2)));
    margin-inline: auto;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-8);
  }
}

.customer-journey__dot {
  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: background 0.3s ease, width 0.3s ease;
  flex-shrink: 0;
  position: relative;
  margin-inline: -10px;
}

.customer-journey__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--color-teal) 20%, transparent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, width 0.3s ease;
}

.customer-journey__dot:hover::before { background: color-mix(in srgb, var(--color-teal) 45%, transparent); }

.customer-journey__dot.is-active {
  width: 44px;
}

.customer-journey__dot.is-active::before {
  width: 24px;
  background: var(--color-teal);
}

.customer-journey__step-meta { display: flex; align-items: flex-start; gap: var(--space-4); }

.customer-journey__icon-wrap {
  flex-shrink: 0;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: rgba(74,158,156,0.10);
  border: 1px solid rgba(74,158,156,0.20);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.customer-journey__icon-wrap i,
.customer-journey__icon-wrap svg { width: 2rem; height: 2rem; color: var(--color-teal); }

.customer-journey__step-num {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-1);
}

.customer-journey__step-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  font-weight: var(--font-semi);
  line-height: var(--leading-tight);
  margin: 0;
}

.customer-journey__step-subtitle {
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
  margin: var(--space-1) 0 0;
}

.customer-journey__description {
  font-size: var(--text-base);
  color: var(--color-warm-gray);
  line-height: var(--leading-relaxed);
  max-width: 70ch;
  justify-items: center;
}

.customer-journey__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.customer-journey__feature  { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.customer-journey__feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-teal); flex-shrink: 0; }

/* ── Phone frame (shared by all 4 visuals) ─────────────────────────────────── */

/* ── Product Screen Iframe Visual ──────────────────────────────────────────── */

.cj-screen-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 400px;
  margin-inline: auto 0;
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

@media (min-width: 768px) {
  .cj-screen-wrap {
    max-width: 100%;
    opacity: 0;
    transform: translateY(16px);
  }
}

.customer-journey__visual.is-visible .cj-screen-wrap,
.customer-journey__panel.is-active   .cj-screen-wrap { opacity: 1; transform: translateY(0); }

.cj-screen-wrap {
  border-radius: 0;
  overflow: visible;
}

.customer-journey__visual .frontlion-product-illustration {
  width: 100%;
  max-width: 400px;
  pointer-events: auto;
}

.customer-journey__visual .frontlion-product-illustration .ps-shell {
  padding-top: 0 !important;
}

.customer-journey__visual .frontlion-product-illustration .ps-toggle {
  display: none !important;
}

.customer-journey__visual .frontlion-product-illustration .ps-frame-phone,
.customer-journey__visual .frontlion-product-illustration .ps-frame-desktop {
  max-width: 100%;
}

.cj-screen-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;
  border-radius: inherit;
}

/* ── Display Zoom Ghost ────────────────────────────────────────────────────── */

.cj-screen-wrap,
.wf-screen-wrap {
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}
.cj-screen-wrap.is-hovered,
.wf-screen-wrap.is-hovered {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.14);
  cursor: zoom-in;
}

.dz-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.dz-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.dz-ghost {
  position: fixed;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.dz-ghost > * {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  border-radius: inherit;
}
.dz-ghost iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  pointer-events: none;
}

/* ── Persona Panels ────────────────────────────────────────────────────────── */

.persona-panels { position: relative; }

/* .persona-panels height is set in JS (initDesktopScroll) based on viewport so it adapts on resize. */

.persona-panels__bg-cover {
  display: none;
}
@media (min-width: 768px) {
  .persona-panels__bg-cover {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
  }
}
.persona-panels__bg-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.persona-panels__bg-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #D4764A; /* coral — matches shortcode theme */
  mix-blend-mode: color;
  pointer-events: none;
}
.persona-panels__bg-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 40%, transparent 60%, var(--bg-primary) 100%);
  z-index: 1;
  pointer-events: none;
}

.persona-panels__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(213, 116, 74, 0.07) 0%,
    rgba(237, 164, 128, 0.10) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.persona-panels__fade { display: none; }

@media (min-width: 768px) {
  .persona-panels__fade {
    display: block;
    position: absolute;
    left: 0; right: 0;
    height: 8rem;
    z-index: 1;
    pointer-events: none;
  }
  .persona-panels__fade--top    { top: 0;    background: linear-gradient(to bottom, var(--bg-primary), transparent); }
  .persona-panels__fade--bottom { bottom: 0; background: linear-gradient(to top,   var(--bg-primary), transparent); }
}

.persona-panels__sticky {
  position: relative;
  padding-block: var(--section-pad-y);
  background: linear-gradient(135deg, rgba(213, 116, 74, 0.05) 0%, rgba(237, 164, 128, 0.08) 60%, transparent 100%);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .persona-panels__sticky {
    position: sticky;
    top: var(--pp-sticky-top, 0px);
    height: calc(100vh - var(--pp-sticky-top, 0px));
    /* padding-block: 0; */
    overflow: hidden;
    background: none;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }
}

/* Background images — fixed-position crossfade layer */
.persona-panels__bg-images {
  display: none;
}

@media (min-width: 768px) {
  .persona-panels__bg-images {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }
}

.persona-panels__bg-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.persona-panels__bg-image[data-persona-bg="0"] { opacity: 1; }

.persona-panels__bg-image img {
  display: block;
  max-width: none;
  width: auto;
  height: auto;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.persona-panels__header {
  text-align: center;
  padding: 0 var(--space-6) var(--space-8);
  animation: pp-fade-in 0.6s ease 0.25s both;
}

.persona-panels__header h2 { max-width: 960px; margin-inline: auto; margin-bottom: var(--space-4); }
.persona-panels__header .eyebrow { color: var(--color-coral); margin-bottom: var(--space-2) !important; }

@media (min-width: 768px) {
  .persona-panels__header {
    position: relative;
    padding: 40px var(--space-6) var(--space-6);
    flex-shrink: 0;
    z-index: 20;
  }
}

.persona-panels__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-inline: var(--space-4);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .persona-panels__track {
    flex-direction: row;
    gap: 0;
    padding: 0;
    width: 300vw;
    flex: 1;
    min-height: 0;
    align-items: center;
    will-change: transform;
    position: relative;
    z-index: 2;
  }
}

.persona-panels__panel { width: 100%; }

@media (min-width: 768px) {
  .persona-panels__panel {
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-8);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .persona-panels__panel[data-persona-panel="0"] { opacity: 1; }
  .persona-panels__panel.is-active              { opacity: 1; }
}

.persona-panels__inner { display: grid; gap: var(--space-8); width: 100%; }

@media (min-width: 1024px) {
  .persona-panels__inner {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-16);
    align-items: center;
    max-width: 1100px;
  }
}

/* width="full" — expand inner to 80vw */
@media (min-width: 1024px) {
  .persona-panels--width-full .persona-panels__inner { max-width: 80vw; }
}

/* image_position: left / right — align bg image horizontally */
.persona-panels--visual-left  .persona-panels__bg-image { justify-content: flex-start; }
.persona-panels--visual-right .persona-panels__bg-image { justify-content: flex-end; }

.persona-panels__content { display: flex; flex-direction: column; gap: var(--space-6); }

.persona-panels__visual { display: flex; justify-content: flex-end; }

/* ── Dot navigation ────────────────────────────────────────────────────────── */

.persona-panels__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-8);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

@media (max-width: 767px) {
  .persona-panels__dots { display: none; }
}

.persona-panels__dot {
  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: background 0.3s ease, width 0.3s ease;
  flex-shrink: 0;
  position: relative;
  margin-inline: -10px;
}

.persona-panels__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--color-coral) 20%, transparent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, width 0.3s ease;
}

.persona-panels__dot:hover::before { background: color-mix(in srgb, var(--color-coral) 45%, transparent); }

.persona-panels__dot.is-active {
  width: 44px;
}

.persona-panels__dot.is-active::before {
  width: 24px;
  background: var(--color-coral);
}

.persona-panels__badge { display: flex; flex-direction: column; gap: var(--space-1); }

.persona-panels__persona-role {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-coral);
}

.persona-panels__persona-sub {
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
}

.persona-panels__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--font-semi);
  line-height: var(--leading-tight);
  margin: 0;
}

.persona-panels__description {
  font-size: var(--text-base);
  color: var(--color-warm-gray);
  line-height: var(--leading-relaxed);
  max-width: 50ch;
}

/* ── Metrics grid (economic panel) ─────────────────────────────────────────── */

.persona-panels__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pp-metric-card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}

.pp-metric-card__label {
  font-size: var(--text-xs);
  color: var(--color-warm-gray);
  margin: 0 0 var(--space-1);
}

.pp-metric-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
  margin: 0;
}

.pp-metric-card__trend {
  font-size: var(--text-xs);
  color: #dc2626;
  margin: var(--space-1) 0 0;
}

/* ── Shared card chrome ────────────────────────────────────────────────────── */

.pp-card {
  position: relative;
  width: 100%;
  max-width: 410px;
  margin-inline: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(213, 116, 74, 0.05);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.persona-panels__visual.is-visible .pp-card,
.persona-panels__panel.is-active   .pp-card { opacity: 1; transform: translateY(0); }

@media (max-width: 767px) { .pp-card { opacity: 1; transform: none; transition: none; } }

@media (max-width: 767px) {
  .associate-workflow__visual,
  .customer-journey__visual,
  .persona-panels__visual .pp-card {
    display: none !important;
  }
}

.pp-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pp-card__title {
  font-size: var(--text-base);
  margin: 0;
}

.pp-card__icon { width: 1.25rem; height: 1.25rem; color: var(--color-warm-gray); flex-shrink: 0; }

.pp-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-warm-gray);
  border-top: 1px solid var(--color-gray-200);
  padding-top: var(--space-4);
  margin-top: var(--space-1);
}

.pp-card__footer i,
.pp-card__footer svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.pp-card__divider {
  height: 1px;
  background: var(--color-gray-200);
  margin-block: var(--space-1);
}

/* ── Dashboard bar chart ───────────────────────────────────────────────────── */

.pp-bar-chart { display: flex; flex-direction: column; gap: var(--space-4); }

.pp-bar-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.pp-bar-item__label { font-size: var(--text-xs); color: var(--color-warm-gray); }
.pp-bar-item__value { font-size: var(--text-sm); font-weight: var(--font-light); }

.pp-bar-item__track {
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pp-bar-item__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  transition: width 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: calc(var(--bar-idx, 0) * 0.12s + 0.2s);
}

.pp-bar-item__fill--red   { background: #ef4444; }
.pp-bar-item__fill--amber { background: var(--color-honey); }
.pp-bar-item__fill--coral { background: var(--color-coral); }

/* Animate bars when visual becomes visible */
.persona-panels__visual.is-visible .pp-bar-item__fill,
.persona-panels__panel.is-active   .pp-bar-item__fill { width: var(--bar-h); }

@media (max-width: 767px) { .pp-bar-item__fill { width: var(--bar-h); transition: none; } }

/* ── Staffing heatmap ──────────────────────────────────────────────────────── */

.pp-heatmap { display: flex; flex-direction: column; gap: var(--space-2); }

.pp-heatmap__row { display: flex; align-items: center; gap: var(--space-2); }

.pp-heatmap__day { width: 2.5rem; font-size: var(--text-xs); color: var(--color-warm-gray); flex-shrink: 0; }

.pp-heatmap__cells { display: flex; flex: 1; gap: 4px; }

.pp-heatmap__cell {
  flex: 1;
  height: 2rem;
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--cell-delay, 0ms);
}

.pp-heatmap__cell--optimal  { border-color: rgba(74,158,156,0.4); background: rgba(74,158,156,0.15); }
.pp-heatmap__cell--moderate { border-color: rgba(232,201,122,0.5); background: rgba(232,201,122,0.2); }
.pp-heatmap__cell--critical { border-color: rgba(239, 68, 68,0.4); background: rgba(239, 68, 68,0.2); }

.persona-panels__visual.is-visible .pp-heatmap__cell,
.persona-panels__panel.is-active   .pp-heatmap__cell { opacity: 1; transform: scale(1); }

@media (max-width: 767px) { .pp-heatmap__cell { opacity: 1; transform: none; transition: none; } }

.pp-heatmap__legend {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-200);
}

.pp-heatmap__legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-warm-gray); }

.pp-heatmap__swatch { display: block; width: 14px; height: 14px; border-radius: var(--radius-sm); flex-shrink: 0; }
.pp-heatmap__swatch--optimal  { background: var(--color-teal); }
.pp-heatmap__swatch--moderate { background: var(--color-honey); }
.pp-heatmap__swatch--critical { background: #ef4444; }

/* ── Infrastructure visual ─────────────────────────────────────────────────── */

.pp-infra { display: flex; flex-direction: column; gap: var(--space-2); }

.pp-component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: calc(var(--comp-idx, 0) * 0.08s + 0.15s);
}

.persona-panels__visual.is-visible .pp-component,
.persona-panels__panel.is-active   .pp-component { opacity: 1; transform: translateX(0); }

@media (max-width: 767px) { .pp-component { opacity: 1; transform: none; transition: none; } }

.pp-component__left { display: flex; align-items: center; gap: var(--space-2); }

.pp-component__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pp-pulse-dot 2s ease-in-out infinite;
}

.pp-component__icon { width: 0.875rem; height: 0.875rem; color: var(--color-warm-gray); }

.pp-component__name { font-size: var(--text-sm); font-weight: var(--font-light); }

.pp-component__status {
  font-size: 10px;
  font-weight: var(--font-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #22c55e;
}

.pp-compliance { display: flex; flex-direction: column; gap: var(--space-3); }

.pp-compliance__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-light);
  color: var(--color-charcoal);
}

.pp-compliance__header i,
.pp-compliance__header svg { width: 1rem; height: 1rem; color: var(--color-warm-gray); flex-shrink: 0; }

.pp-compliance__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pp-compliance__badge {
  padding: var(--space-1) var(--space-3);
  background: rgba(213, 116, 74, 0.08);
  border: 1px solid rgba(213, 116, 74, 0.25);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: var(--font-light);
  color: var(--color-accent);
}

/* ── Persona Panels keyframes ──────────────────────────────────────────────── */

@keyframes pp-fade-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pp-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);   }
}

/* ── Keyframes ─────────────────────────────────────────────────────────────── */

@keyframes wf-fade-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wf-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.7; }
}

@keyframes wf-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0   rgba(74, 158, 156, 0.35); }
  50%       { box-shadow: 0 0 0 4px rgba(74, 158, 156, 0);    }
}

/* ── Break / Video Break Layout ─────────────────────────────────────────────── */

.section-break {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-break--contained {
  border-radius: var(--radius-2xl);
  margin-inline: clamp(1rem, 4vw, 2rem);
}

/* Background layers */
.section-break__video-wrap {
  position: absolute;
  inset: -15%;
  will-change: transform;
  pointer-events: none;
}

.section-break__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}

.section-break__video.is-active { opacity: 0.45; }

.section-break__image {
  position: absolute;
  inset: -15%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.section-break__fallback {
  position: absolute;
  inset: -15%;
  background: linear-gradient(135deg, #2a1f1a 0%, #1a2928 45%, #1e1b2a 100%);
  animation: sb-pulse 10s ease-in-out infinite;
  will-change: transform;
  transition: opacity 1.2s ease;
}

@keyframes sb-pulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.14); }
}

/* Overlay treatments */
.section-break__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.section-break--dark  .section-break__overlay { background: linear-gradient(to top, rgba(74,67,64,0.85), rgba(74,67,64,0.2)); }
.section-break--warm  .section-break__overlay { background: linear-gradient(135deg, rgba(237,164,128,0.35), rgba(228,217,204,0.25)); mix-blend-mode: multiply; }
.section-break--cool  .section-break__overlay { background: linear-gradient(135deg, rgba(74,158,156,0.3), rgba(200,230,229,0.2)); }
.section-break--coral .section-break__overlay { background: linear-gradient(135deg, rgba(237,164,128,0.5), rgba(212,118,74,0.4)); mix-blend-mode: multiply; }
.section-break--soft  .section-break__overlay { background: linear-gradient(to top, rgba(253,250,247,0.92), rgba(253,250,247,0.6)); }
.section-break--transparent .section-break__overlay { background: transparent; }

/* Soft / Transparent: no forced dark fallback backdrop — let the page background show through */
.section-break--soft .section-break__fallback {
  background: var(--bg-primary);
  animation: none;
}

.section-break--transparent .section-break__fallback {
  background: transparent;
  animation: none;
}

/* Film grain texture */
.section-break__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
}

/* Content */
.section-break__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 960px;
  padding: 80px 48px;
}

.section-break__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 11px;
  font-weight: var(--font-semi);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-2);
}

.section-break__eyebrow::before,
.section-break__eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section-break--warm .section-break__eyebrow,
.section-break--cool .section-break__eyebrow,
.section-break--soft .section-break__eyebrow,
.section-break--transparent .section-break__eyebrow { color: rgba(74,67,64,0.75); }

.section-break__heading {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.section-break--warm .section-break__heading,
.section-break--cool .section-break__heading,
.section-break--soft .section-break__heading,
.section-break--transparent .section-break__heading { color: var(--color-brand); }

.section-break__body {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.82);
  max-width: 70ch;
  margin-inline: auto;
  margin-bottom: 0;
}

.section-break__body p { margin-bottom: var(--space-4); }
.section-break__body p:last-child { margin-bottom: 0; }

.section-break--warm .section-break__body,
.section-break--cool .section-break__body,
.section-break--soft .section-break__body,
.section-break--transparent .section-break__body { color: rgba(74,67,64,0.8); }

.section-break__actions { margin-top: var(--space-10); }

/* Button overrides — dark background default */
.section-break .btn--outline              { color: var(--color-white); border-color: rgba(255,255,255,0.45); }
.section-break .btn--outline:hover        { border-color: var(--color-white); background: rgba(255,255,255,0.1); }

/* Button overrides — light overlay variants */
.section-break--warm .btn--outline,
.section-break--cool .btn--outline,
.section-break--soft .btn--outline,
.section-break--transparent .btn--outline        { color: var(--color-brand); border-color: rgba(74,67,64,0.35); }
.section-break--warm .btn--outline:hover,
.section-break--cool .btn--outline:hover,
.section-break--soft .btn--outline:hover,
.section-break--transparent .btn--outline:hover  { background: rgba(74,67,64,0.08); border-color: rgba(74,67,64,0.6); }

@media ( max-width: 700px ) {
  .section-break__content   { padding: 64px 24px; }
  .section-break--contained { margin-inline: var(--space-4); }
}

/* ── Live Service Queue Widget [frontlion_live_queue] ───────────────────── */

.lsq-widget {
  background: var(--color-white);
  border-radius: 12px;
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 4px 6px -1px rgba(74,67,64,0.07), 0 12px 32px -8px rgba(74,67,64,0.10);
  overflow: hidden;
  font-family: inherit;
}

/* Header */
.lsq-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lsq-title { font-size: 12.5px; font-weight: 600; color: var(--color-charcoal); }
.lsq-sub   { font-size: 10.5px; color: var(--color-warm-gray); margin-top: 1px; }

/* Live badge */
.lsq-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-teal);
  background: rgba(74,158,156,0.08);
  border: 1px solid rgba(74,158,156,0.2);
  padding: 3px 9px;
  border-radius: 100px;
}
.lsq-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
  animation: lsqPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Column headers */
.lsq-col-heads {
  display: grid;
  grid-template-columns: 1fr 110px 80px;
  padding: 7px 18px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}
.lsq-col-head {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-warm-gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Rows container — fixed height so the widget never shifts the layout */
.lsq-rows {
  overflow: hidden;
  height: 294px; /* fits 7 rows at ~42px each; rows animate in/out within this box */
}

/* Individual row */
.lsq-row {
  display: grid;
  grid-template-columns: 1fr 110px 80px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--color-gray-100);
  align-items: center;
  max-height: 60px;
  overflow: hidden;
  /* Transitions driven by JS-added classes */
  transition: opacity 0.32s ease, transform 0.32s ease,
              max-height 0.32s ease, padding-block 0.32s ease,
              border-color 0.32s ease;
}
.lsq-row:last-child { border-bottom: none; }

/* Row enter state (JS adds, then removes to trigger transition) */
.lsq-row--enter {
  opacity: 0;
  transform: translateY(12px);
  max-height: 0;
  padding-block: 0;
}

/* Row exit state */
.lsq-row--exiting {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0 !important;
  padding-block: 0 !important;
  border-color: transparent !important;
}

/* Visitor name cell */
.lsq-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-charcoal);
}

/* Avatar circle */
.lsq-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.lsq-av-coral      { background: var(--color-coral); }
.lsq-av-teal       { background: var(--color-teal); }
.lsq-av-honey      { background: var(--color-honey); color: var(--color-charcoal); }
.lsq-av-sage       { background: var(--color-sage); }
.lsq-av-warm-gray  { background: var(--color-warm-gray); }
.lsq-av-charcoal   { background: var(--color-charcoal); }
.lsq-av-deep-coral { background: var(--color-deep-coral); }

/* Service name */
.lsq-row-service { font-size: 11px; color: var(--color-warm-gray); }

/* Status cell */
.lsq-row-status-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lsq-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.lsq-status--waiting  { background: rgba(138,129,124,0.10); color: var(--color-warm-gray); }
.lsq-status--serving  { background: rgba(212,118,74,0.10);  color: var(--color-deep-coral); }
.lsq-status--complete { background: rgba(74,158,156,0.10);  color: var(--color-teal); }

/* Pulsing dot inside serving badge */
.lsq-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: lsqPulse 1.8s ease-in-out infinite;
}
.lsq-check { font-style: normal; }

/* Status pop (scale-bounce on transition) */
.lsq-status--pop { animation: lsqStatusPop 0.38s ease forwards; }

/* Complete flash (green ring) */
.lsq-status--flash { animation: lsqFlash 0.55s ease forwards; }

/* Progress bar */
.lsq-progress-wrap {
  height: 3px;
  background: rgba(212,118,74,0.12);
  border-radius: 100px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lsq-row--progress-active .lsq-progress-wrap { opacity: 1; }
.lsq-progress-fill {
  height: 100%;
  width: 0%;
  /* gradient tip: coral → teal as service concludes */
  background: linear-gradient(to right, var(--color-deep-coral) 0%, var(--color-teal) 100%);
  border-radius: 100px;
  transition: width linear; /* duration injected by JS */
}

/* Footer */
.lsq-footer {
  padding: 9px 18px;
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--color-warm-gray);
}
.lsq-footer strong {
  color: var(--color-charcoal);
  font-weight: 600;
}

/* ── Keyframes ────────────────────────────────────────────────────────────── */

@keyframes lsqPulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.78); }
}

@keyframes lsqStatusPop {
  0%   { transform: scale(0.82); }
  55%  { transform: scale(1.14); }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes lsqFlash {
  0%   { box-shadow: 0 0 0 0   rgba(74,158,156,0.5); }
  60%  { box-shadow: 0 0 0 6px rgba(74,158,156,0);   }
  100% { box-shadow: none; }
}

/* ── Form / Contact Layout ───────────────────────────────────────────────── */

/* Split: two equal columns, content left, form right */
.form-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-16);
  align-items: start;
}

.form-split__content,
.form-split__form {
  min-width: 0;
  width: 100%;
}

.form-split__content {
  padding-top: var(--space-2);
}

/* No card background — form sits directly on section */
.form-card {
  padding: 0;
}

/* Centered variant */
.form-centered {
  max-width: 680px;
  margin-inline: auto;
}

/* Trust row */
.form-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}

.form-trust-row--center {
  justify-content: center;
  margin-top: var(--space-10);
}

.form-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
}

.section--dark .form-trust-item,
.section--brand .form-trust-item {
  color: rgba(255,255,255,0.8);
}

.form-trust-item svg {
  color: var(--color-accent-2);
  flex-shrink: 0;
}

/* Responsive: stack on tablet and below */
@media (max-width: 1024px) {
  .form-split {
    grid-template-columns: 1fr !important;
    gap: var(--space-10);
  }
}

/* ── Ninja Forms — Light (default) ───────────────────────────────────────── */

.ninja-forms-form-wrap .nf-field-label label,
.ninja-forms-form-wrap .nf-label-span {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
  line-height: 1.4;
}

.ninja-forms-form-wrap .nf-field-element input[type="text"],
.ninja-forms-form-wrap .nf-field-element input[type="email"],
.ninja-forms-form-wrap .nf-field-element input[type="tel"],
.ninja-forms-form-wrap .nf-field-element input[type="number"],
.ninja-forms-form-wrap .nf-field-element input[type="url"],
.ninja-forms-form-wrap .nf-field-element input[type="date"],
.ninja-forms-form-wrap .nf-field-element input[type="search"],
.ninja-forms-form-wrap .nf-field-element input[type="password"],
.ninja-forms-form-wrap .nf-field-element textarea,
.ninja-forms-form-wrap .nf-field-element select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--color-charcoal);
  background: var(--surface);
  border: 1.5px solid var(--color-warm-beige);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  line-height: 1.625;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.ninja-forms-form-wrap .nf-field-element input::placeholder,
.ninja-forms-form-wrap .nf-field-element textarea::placeholder {
  color: var(--color-warm-gray);
}

.ninja-forms-form-wrap .nf-field-element input[type="text"]:focus,
.ninja-forms-form-wrap .nf-field-element input[type="email"]:focus,
.ninja-forms-form-wrap .nf-field-element input[type="tel"]:focus,
.ninja-forms-form-wrap .nf-field-element input[type="number"]:focus,
.ninja-forms-form-wrap .nf-field-element input[type="url"]:focus,
.ninja-forms-form-wrap .nf-field-element input[type="date"]:focus,
.ninja-forms-form-wrap .nf-field-element input[type="search"]:focus,
.ninja-forms-form-wrap .nf-field-element input[type="password"]:focus,
.ninja-forms-form-wrap .nf-field-element textarea:focus,
.ninja-forms-form-wrap .nf-field-element select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 118, 74, 0.15);
}

.ninja-forms-form-wrap .nf-error .nf-field-element input,
.ninja-forms-form-wrap .nf-error .nf-field-element textarea,
.ninja-forms-form-wrap .nf-error .nf-field-element select {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.ninja-forms-form-wrap .nf-error-msg {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.ninja-forms-form-wrap .ninja-forms-req-symbol {
  color: var(--color-accent);
}

.ninja-forms-form-wrap .nf-field-element input:disabled,
.ninja-forms-form-wrap .nf-field-element textarea:disabled,
.ninja-forms-form-wrap .nf-field-element select:disabled {
  background: var(--bg-secondary);
  color: var(--color-warm-gray);
  border-color: var(--color-gray-200);
  cursor: not-allowed;
}

.ninja-forms-form-wrap .nf-field-element textarea {
  min-height: 140px;
  resize: vertical;
}

.ninja-forms-form-wrap input[type="submit"],
.ninja-forms-form-wrap button[type="submit"] {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--font-semi);
  line-height: 1.375;
  color: var(--color-white);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-8);
  cursor: pointer;
  width: auto;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ninja-forms-form-wrap input[type="submit"]:hover,
.ninja-forms-form-wrap button[type="submit"]:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.ninja-forms-form-wrap input[type="submit"]:active,
.ninja-forms-form-wrap button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

.ninja-forms-form-wrap .checkbox-wrap label,
.ninja-forms-form-wrap .listcheckbox-wrap label,
.ninja-forms-form-wrap .listradio-wrap label {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
}

.ninja-forms-form-wrap .nf-field-container {
  margin-bottom: var(--space-5);
}

.ninja-forms-form-wrap .nf-field-container:last-of-type {
  margin-bottom: 0;
}

/* ── HubSpot Forms — Light (default) ─────────────────────────────────────── */

.hs-form {
  font-family: var(--font-sans);
}

.hs-form fieldset {
  max-width: none !important;
}

.hs-form .hs-form-field {
  margin-bottom: var(--space-5);
}

.hs-form .hs-form-field:last-of-type {
  margin-bottom: 0;
}

.hs-form label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.hs-form .hs-form-required {
  color: var(--color-accent);
}

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="url"],
.hs-form input[type="password"],
.hs-form textarea,
.hs-form select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--color-charcoal);
  background: var(--surface);
  border: 1.5px solid var(--color-warm-beige);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  line-height: 1.625;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.hs-form input::placeholder,
.hs-form textarea::placeholder {
  color: var(--color-warm-gray);
  opacity: 1;
}

.hs-form input[type="text"]:focus,
.hs-form input[type="email"]:focus,
.hs-form input[type="tel"]:focus,
.hs-form input[type="number"]:focus,
.hs-form input[type="url"]:focus,
.hs-form input[type="password"]:focus,
.hs-form textarea:focus,
.hs-form select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 118, 74, 0.15);
}

.hs-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A817C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 1rem;
  padding-right: var(--space-8);
}

.hs-form textarea {
  min-height: 140px;
  resize: vertical;
}

.hs-form .hs-input.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.hs-form .hs-error-msgs {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
}

.hs-form .hs-error-msgs label {
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  color: var(--color-error);
  margin-bottom: 0;
}

.hs-form .hs-input:disabled {
  background: var(--bg-secondary);
  color: var(--color-warm-gray);
  border-color: var(--color-gray-200);
  cursor: not-allowed;
}

.hs-form .hs-button {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--font-semi);
  line-height: 1.375;
  color: var(--color-white);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-8);
  cursor: pointer;
  width: auto;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hs-form .hs-button:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.hs-form .hs-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.hs-form .hs-form-checkbox label,
.hs-form .hs-form-radio label,
.hs-form .hs-form-booleancheckbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
}

.hs-form .hs-form-checkbox input,
.hs-form .hs-form-radio input,
.hs-form .hs-form-booleancheckbox input {
  margin-top: 0.2em;
  accent-color: var(--color-accent);
}

.hs-form .submitted-message {
  font-family: var(--font-sans);
  color: var(--color-charcoal);
}

.hs-form .grecaptcha-badge {
  box-shadow: none !important;
}

/* ── Ninja Forms — Dark / Brand scheme ───────────────────────────────────── */

.section--dark .ninja-forms-form-wrap .nf-field-label label,
.section--dark .ninja-forms-form-wrap .nf-label-span,
.section--brand .ninja-forms-form-wrap .nf-field-label label,
.section--brand .ninja-forms-form-wrap .nf-label-span {
  color: rgba(255,255,255,0.85);
}

.section--dark .ninja-forms-form-wrap .nf-field-element input[type="text"],
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="email"],
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="tel"],
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="number"],
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="url"],
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="date"],
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="search"],
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="password"],
.section--dark .ninja-forms-form-wrap .nf-field-element textarea,
.section--dark .ninja-forms-form-wrap .nf-field-element select,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="text"],
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="email"],
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="tel"],
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="number"],
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="url"],
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="date"],
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="search"],
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="password"],
.section--brand .ninja-forms-form-wrap .nf-field-element textarea,
.section--brand .ninja-forms-form-wrap .nf-field-element select {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: var(--color-white);
}

.section--dark .ninja-forms-form-wrap .nf-field-element input::placeholder,
.section--dark .ninja-forms-form-wrap .nf-field-element textarea::placeholder,
.section--brand .ninja-forms-form-wrap .nf-field-element input::placeholder,
.section--brand .ninja-forms-form-wrap .nf-field-element textarea::placeholder {
  color: rgba(255,255,255,0.4);
}

.section--dark .ninja-forms-form-wrap .nf-field-element input[type="text"]:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="email"]:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="tel"]:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="number"]:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="url"]:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="date"]:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="search"]:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element input[type="password"]:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element textarea:focus,
.section--dark .ninja-forms-form-wrap .nf-field-element select:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="text"]:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="email"]:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="tel"]:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="number"]:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="url"]:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="date"]:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="search"]:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element input[type="password"]:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element textarea:focus,
.section--brand .ninja-forms-form-wrap .nf-field-element select:focus {
  outline: none;
  background: rgba(255,255,255,0.12);
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgba(237, 164, 128, 0.2);
}

.section--dark .ninja-forms-form-wrap .nf-field-element input:disabled,
.section--dark .ninja-forms-form-wrap .nf-field-element textarea:disabled,
.section--dark .ninja-forms-form-wrap .nf-field-element select:disabled,
.section--brand .ninja-forms-form-wrap .nf-field-element input:disabled,
.section--brand .ninja-forms-form-wrap .nf-field-element textarea:disabled,
.section--brand .ninja-forms-form-wrap .nf-field-element select:disabled {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.3);
}

.section--dark .ninja-forms-form-wrap .nf-error-msg,
.section--brand .ninja-forms-form-wrap .nf-error-msg {
  color: #FCA5A5;
}

.section--dark .ninja-forms-form-wrap .checkbox-wrap label,
.section--dark .ninja-forms-form-wrap .listcheckbox-wrap label,
.section--dark .ninja-forms-form-wrap .listradio-wrap label,
.section--brand .ninja-forms-form-wrap .checkbox-wrap label,
.section--brand .ninja-forms-form-wrap .listcheckbox-wrap label,
.section--brand .ninja-forms-form-wrap .listradio-wrap label {
  color: rgba(255,255,255,0.85);
}

/* ── HubSpot Forms — Dark / Brand scheme ─────────────────────────────────── */

.section--dark .hs-form label,
.section--brand .hs-form label {
  color: rgba(255,255,255,0.85);
}

.section--dark .hs-form .hs-form-required,
.section--brand .hs-form .hs-form-required {
  color: var(--color-coral);
}

.section--dark .hs-form input[type="text"],
.section--dark .hs-form input[type="email"],
.section--dark .hs-form input[type="tel"],
.section--dark .hs-form input[type="number"],
.section--dark .hs-form input[type="url"],
.section--dark .hs-form input[type="password"],
.section--dark .hs-form textarea,
.section--dark .hs-form select,
.section--brand .hs-form input[type="text"],
.section--brand .hs-form input[type="email"],
.section--brand .hs-form input[type="tel"],
.section--brand .hs-form input[type="number"],
.section--brand .hs-form input[type="url"],
.section--brand .hs-form input[type="password"],
.section--brand .hs-form textarea,
.section--brand .hs-form select {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: var(--color-white);
}

.section--dark .hs-form select,
.section--brand .hs-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 1rem;
  padding-right: var(--space-8);
}

.section--dark .hs-form select option,
.section--brand .hs-form select option {
  color: var(--color-charcoal);
}

.section--dark .hs-form input::placeholder,
.section--dark .hs-form textarea::placeholder,
.section--brand .hs-form input::placeholder,
.section--brand .hs-form textarea::placeholder {
  color: rgba(255,255,255,0.4);
}

.section--dark .hs-form input[type="text"]:focus,
.section--dark .hs-form input[type="email"]:focus,
.section--dark .hs-form input[type="tel"]:focus,
.section--dark .hs-form input[type="number"]:focus,
.section--dark .hs-form input[type="url"]:focus,
.section--dark .hs-form input[type="password"]:focus,
.section--dark .hs-form textarea:focus,
.section--dark .hs-form select:focus,
.section--brand .hs-form input[type="text"]:focus,
.section--brand .hs-form input[type="email"]:focus,
.section--brand .hs-form input[type="tel"]:focus,
.section--brand .hs-form input[type="number"]:focus,
.section--brand .hs-form input[type="url"]:focus,
.section--brand .hs-form input[type="password"]:focus,
.section--brand .hs-form textarea:focus,
.section--brand .hs-form select:focus {
  outline: none;
  background: rgba(255,255,255,0.12);
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgba(237, 164, 128, 0.2);
}

.section--dark .hs-form .hs-input:disabled,
.section--brand .hs-form .hs-input:disabled {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.3);
}

.section--dark .hs-form .hs-input.error,
.section--brand .hs-form .hs-input.error {
  border-color: #FCA5A5;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.2);
}

.section--dark .hs-form .hs-error-msgs label,
.section--brand .hs-form .hs-error-msgs label {
  color: #FCA5A5;
}

.section--dark .hs-form .hs-form-checkbox label,
.section--dark .hs-form .hs-form-radio label,
.section--dark .hs-form .hs-form-booleancheckbox label,
.section--brand .hs-form .hs-form-checkbox label,
.section--brand .hs-form .hs-form-radio label,
.section--brand .hs-form .hs-form-booleancheckbox label {
  color: rgba(255,255,255,0.85);
}

.section--dark .hs-form .submitted-message,
.section--brand .hs-form .submitted-message {
  color: var(--color-white);
}

/* ── Ninja Forms — Hero form (transparent, inherits scheme colors) ── */

.section-hero__form .ninja-forms-form-wrap .nf-field-label label,
.section-hero__form .ninja-forms-form-wrap .nf-label-span {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.4;
}

.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="text"],
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="email"],
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="tel"],
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="number"],
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="url"],
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="date"],
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="search"],
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="password"],
.section-hero__form .ninja-forms-form-wrap .nf-field-element textarea,
.section-hero__form .ninja-forms-form-wrap .nf-field-element select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  line-height: 1.625;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* Light hero: standard light-surface field styles */
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-label label,
.section--light .section-hero__form .ninja-forms-form-wrap .nf-label-span {
  color: var(--color-charcoal);
}

.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="text"],
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="email"],
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="tel"],
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="number"],
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="url"],
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="date"],
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="search"],
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="password"],
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element textarea,
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element select {
  color: var(--color-charcoal);
  background: var(--surface);
  border: 1.5px solid var(--color-warm-beige);
}

.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element input::placeholder,
.section--light .section-hero__form .ninja-forms-form-wrap .nf-field-element textarea::placeholder {
  color: var(--color-warm-gray);
}

.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="text"]:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="email"]:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="tel"]:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="number"]:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="url"]:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="date"]:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="search"]:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element input[type="password"]:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element textarea:focus,
.section-hero__form .ninja-forms-form-wrap .nf-field-element select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 118, 74, 0.15);
}

.section-hero__form .ninja-forms-form-wrap .nf-error .nf-field-element input,
.section-hero__form .ninja-forms-form-wrap .nf-error .nf-field-element textarea,
.section-hero__form .ninja-forms-form-wrap .nf-error .nf-field-element select {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.section-hero__form .ninja-forms-form-wrap .nf-error-msg {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.section-hero__form .ninja-forms-form-wrap .ninja-forms-req-symbol {
  color: var(--color-accent);
}

.section-hero__form .ninja-forms-form-wrap .nf-field-element input:disabled,
.section-hero__form .ninja-forms-form-wrap .nf-field-element textarea:disabled,
.section-hero__form .ninja-forms-form-wrap .nf-field-element select:disabled {
  background: var(--bg-secondary);
  color: var(--color-warm-gray);
  border-color: var(--color-gray-200);
  cursor: not-allowed;
}

.section-hero__form .ninja-forms-form-wrap .nf-field-element textarea {
  min-height: 140px;
  resize: vertical;
}

.section-hero__form .ninja-forms-form-wrap input[type="submit"],
.section-hero__form .ninja-forms-form-wrap button[type="submit"] {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--font-semi);
  line-height: 1.375;
  color: var(--color-white);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-8);
  cursor: pointer;
  width: auto;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.section-hero__form .ninja-forms-form-wrap input[type="submit"]:hover,
.section-hero__form .ninja-forms-form-wrap button[type="submit"]:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.section-hero__form .ninja-forms-form-wrap input[type="submit"]:active,
.section-hero__form .ninja-forms-form-wrap button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

.section-hero__form .ninja-forms-form-wrap .checkbox-wrap label,
.section-hero__form .ninja-forms-form-wrap .listcheckbox-wrap label,
.section-hero__form .ninja-forms-form-wrap .listradio-wrap label {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
}

.section--light .section-hero__form .ninja-forms-form-wrap .checkbox-wrap label,
.section--light .section-hero__form .ninja-forms-form-wrap .listcheckbox-wrap label,
.section--light .section-hero__form .ninja-forms-form-wrap .listradio-wrap label {
  color: var(--color-charcoal);
}

.section-hero__form .ninja-forms-form-wrap .nf-field-container {
  margin-bottom: var(--space-5);
}

.section-hero__form .ninja-forms-form-wrap .nf-field-container:last-of-type {
  margin-bottom: 0;
}

/* ── Partners Network ─────────────────────────────────────────────────────── */
.partners-network__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1024px) {
  .partners-network__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .partners-network__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .partners-network__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Partners Studio ─────────────────────────────────────────────────────── */
.section-partners-studio {
  padding-block: var(--section-pad-y);
}

.ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-12), 8vw, var(--space-20));
  align-items: center;
}

/* Orange dot before the eyebrow */
.ps-eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.ps-heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: var(--font-semi);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

.ps-body {
  font-size: var(--text-lg);
  color: var(--color-charcoal);
  margin-bottom: 0;
}

.ps-checklist {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

.ps-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.ps-actions__note {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* Preview image */
.ps-media__img {
  width: 100%;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

/* Inline UI mockup */
.ps-mockup {
  background: #F5F0EB;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(0,0,0,0.06);
}

.ps-mockup__chrome {
  background: #EDE8E3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ps-mockup__dots {
  display: flex;
  gap: 6px;
}

.ps-mockup__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ps-mockup__dot--red    { background: #FF5F57; }
.ps-mockup__dot--yellow { background: #FFBD2E; }
.ps-mockup__dot--green  { background: #28C840; }

.ps-mockup__title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
  flex: 1;
}

.ps-mockup__badge {
  background: var(--color-charcoal);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.ps-mockup__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ps-mockup__prompt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
}

.ps-mockup__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #C0633A;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ps-mockup__prompt-text {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  line-height: var(--leading-relaxed);
  max-width: 100%;
  margin: 0;
  padding-top: 5px;
}

.ps-mockup__status {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ps-mockup__status-label {
  font-size: var(--text-2xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  text-transform: uppercase;
}

.ps-mockup__tasks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-mockup__task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-charcoal);
}

.ps-mockup__task-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ps-mockup__task--done    .ps-mockup__task-icon { color: var(--color-success); }
.ps-mockup__task--loading .ps-mockup__task-icon { color: var(--color-accent); }

@keyframes ps-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ps-mockup__spinner { animation: ps-spin 1.2s linear infinite; }

@media (max-width: 900px) {
  .ps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* ── Partners Proof & Trust ─────────────────────────────────────────────── */
.section-partners-proof {
  padding-block: var(--section-pad-y);
}

.proof-header {
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.proof-header__body {
  font-size: var(--text-lg);
  color: var(--color-gray-500);
  margin-top: var(--space-4);
  margin-bottom: 0;
  max-width: 60ch;
  margin-inline: auto;
}

/* Trust badge pills */
.proof-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
}

.proof-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
  background: var(--color-white);
  white-space: nowrap;
}

.proof-badge i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-warm-gray);
}

/* Dark global card */
.proof-global {
  background: var(--color-brand);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-10), 5vw, var(--space-16));
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: center;
}

.proof-global__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.proof-global__eyebrow i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.proof-global__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl));
  font-weight: var(--font-semi);
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin-bottom: var(--space-5);
  white-space: pre-line;
}

.proof-global__body {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.proof-global__body p { margin-bottom: var(--space-3); }
.proof-global__body p:last-child { margin-bottom: 0; }

/* Company card */
.proof-company-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.proof-company-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.proof-company-card__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.proof-company-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-charcoal);
}

.proof-company-card__region {
  font-size: var(--text-2xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

.proof-company-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

.proof-company-card__divider {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin: 0 0 var(--space-5);
}

.proof-company-card__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.proof-company-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.proof-company-card__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-soft-peach);
  flex-shrink: 0;
  margin-top: 2px;
}

.proof-company-card__item-icon i {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
}

.proof-company-card__item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.proof-company-card__item-text strong {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-charcoal);
  display: block;
}

.proof-company-card__item-text span {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

@media (max-width: 900px) {
  .proof-global {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .proof-badges {
    margin-bottom: var(--space-8);
  }
}

/* ── Partners: Become a Partner ─────────────────────────────────────────── */

.section-partners-become {
  padding-block: var(--section-pad-y);
}

/* Centered header */
.become-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.become-header .eyebrow {
  margin-bottom: var(--space-3) !important;
}

.become-header__heading {
  color: var(--color-charcoal);
  margin-bottom: var(--space-4);
}

.become-header__body {
  font-size: var(--text-lg);
  color: var(--color-warm-gray);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 0;
}

/* Step cards grid */
.become-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-10);
  padding: 0;
}

.become-step {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.become-step__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-soft-peach);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  align-self: flex-start;
}

.become-step__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-charcoal);
  line-height: var(--leading-snug);
}

.become-step__body {
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Form card */
.become-form-wrap {
  display: flex;
  justify-content: center;
}

.become-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  width: 100%;
  max-width: 720px;
  box-shadow: var(--shadow-md);
}

.become-form-card__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.become-form-card__intro {
  font-size: var(--text-base);
  color: var(--color-warm-gray);
  margin-bottom: var(--space-6);
}

.become-form-card__body {
  margin-top: var(--space-4);
}

/* Responsive */
@media (max-width: 900px) {
  .become-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .become-steps {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   COMPARISON RESOURCE TEMPLATE  (single-resource-comparison)
   ============================================================ */

/* ── Layout ─────────────────────────────────────────────────── */
.cmp-page .cmp-section {
  padding: var(--space-20) 0;
}
.cmp-section--light {
  background: var(--bg-primary, #FDFAF7);
}
.cmp-section--alt {
  background: var(--bg-secondary, #F7F3EE);
  border-top: 1px solid var(--color-warm-beige);
  border-bottom: 1px solid var(--color-warm-beige);
}
.cmp-section--closing {
  background: var(--color-charcoal);
  color: #F3EEE9;
  padding: var(--space-20) 0;
}
.cmp-section--closing .cmp-section__heading {
  color: #fff;
}

/* ── Hero ────────────────────────────────────────────────────── */
.cmp-hero {
  background: var(--color-soft-peach, #F5E6DC);
  border-bottom: 1px solid var(--color-warm-beige);
  padding: var(--space-16) 0 var(--space-20);
}
.cmp-breadcrumbs {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  margin-bottom: var(--space-10);
}
.cmp-breadcrumbs a {
  color: var(--color-charcoal);
  text-decoration: none;
}
.cmp-breadcrumbs a:hover {
  color: var(--color-deep-coral);
  text-decoration: underline;
}
.cmp-breadcrumbs span {
  margin: 0 var(--space-2);
  color: var(--color-warm-beige);
}
.cmp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl));
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.1;
  max-width: 920px;
  margin-bottom: var(--space-6);
}
.cmp-hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: 500;
  color: var(--color-deep-coral);
  line-height: 1.2;
  margin-bottom: var(--space-6);
  max-width: 900px;
}
.cmp-hero__sub {
  font-size: var(--text-lg);
  max-width: 72ch;
  color: var(--color-charcoal);
  margin-bottom: var(--space-10);
  line-height: 1.65;
}

/* ── CTA Row ─────────────────────────────────────────────────── */
.cmp-cta-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

/* ── Section Heading ─────────────────────────────────────────── */
.cmp-section__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-8);
  max-width: 860px;
}

/* ── Answer Card ──────────────────────────────────────────────── */
.cmp-answer-card {
  background: var(--color-white);
  border: 1px solid var(--color-warm-beige);
  border-left: 4px solid var(--color-deep-coral);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-10);
  max-width: 860px;
}
.cmp-answer-card__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-deep-coral);
  margin-bottom: var(--space-4);
}
.cmp-answer-card p {
  font-size: var(--text-xl);
  line-height: 1.55;
  color: var(--color-charcoal);
  margin: 0;
}

/* ── Wedge Grid ───────────────────────────────────────────────── */
.cmp-wedge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.cmp-wedge {
  background: var(--color-white);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.cmp-wedge__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}
.cmp-wedge__body {
  font-size: var(--text-base);
  color: var(--color-warm-gray);
  line-height: 1.6;
  margin: 0;
}

/* ── Prose ────────────────────────────────────────────────────── */
.cmp-prose {
  max-width: 72ch;
  line-height: 1.65;
}
.cmp-prose p {
  margin-bottom: var(--space-4);
}
.cmp-prose p:last-child {
  margin-bottom: 0;
}
.cmp-prose--lead {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--color-charcoal);
}
.cmp-prose--closing {
  max-width: 72ch;
  font-size: var(--text-lg);
  color: #EDE7E0;
  margin-bottom: var(--space-10);
}

/* ── Bullets ──────────────────────────────────────────────────── */
.cmp-bullets {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  max-width: 780px;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.cmp-bullets li {
  background: var(--color-white);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-charcoal);
}

/* ── Tile Row ─────────────────────────────────────────────────── */
.cmp-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.cmp-tile {
  background: var(--color-white);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.cmp-tile__key {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-2);
}
.cmp-tile p {
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
  color: var(--color-charcoal);
}

/* ── Capability Table ─────────────────────────────────────────── */
.cmp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.cmp-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: var(--text-sm);
}
.cmp-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.cmp-table thead th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  background: var(--color-white);
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-warm-beige);
}
.cmp-table thead th.cmp-table__col-fl {
  background: #F4F9F9;
  box-shadow: inset 0 -3px 0 var(--color-teal);
}
.cmp-table tbody .cmp-table__feature {
  font-weight: 600;
  text-align: left;
  padding: var(--space-4) var(--space-6);
  min-width: 200px;
  color: var(--color-charcoal);
}
.cmp-table tbody td {
  padding: var(--space-4) var(--space-6);
  color: var(--color-warm-gray);
  vertical-align: middle;
}
.cmp-table tbody td.cmp-table__col-fl {
  background: #F4F9F9;
  font-weight: 500;
  color: var(--color-charcoal);
}
.cmp-table tbody tr:nth-child(even) td,
.cmp-table tbody tr:nth-child(even) th {
  background: var(--bg-secondary, #F7F3EE);
}
.cmp-table tbody tr:nth-child(even) td.cmp-table__col-fl {
  background: #EEF6F5;
}
.cmp-table-note {
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
  margin: var(--space-4) 2px 0;
  max-width: 860px;
}

/* ── Status Pills ─────────────────────────────────────────────── */
.cmp-pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.6;
  padding: 2px var(--space-3);
  border-radius: 20px;
  white-space: nowrap;
}
.cmp-pill--yes { background: var(--color-teal-light); color: var(--color-teal-dark, #1A6E6C); }
.cmp-pill--partial { background: #FBEAD7; color: #9A5B1E; }
.cmp-pill--no { background: var(--bg-secondary, #EFEAE4); color: var(--color-warm-gray); }
.cmp-pill--unconfirmed { background: var(--bg-secondary, #EFEAE4); color: var(--color-warm-gray); }
.cmp-pill-note {
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
}
.cmp-text-value {
  font-size: var(--text-sm);
}

/* ── Proof Cards ──────────────────────────────────────────────── */
.cmp-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.cmp-proof-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8) var(--space-6);
  color: var(--color-charcoal);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cmp-proof-card:hover {
  border-color: var(--color-teal);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(74, 67, 64, .09);
}
.cmp-proof-card:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
}
.cmp-proof-card__who {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}
.cmp-proof-card__ctx {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-warm-gray);
}
.cmp-proof-card__chip {
  align-self: flex-start;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-teal-dark, #1A6E6C);
  background: var(--color-teal-light);
  border-radius: 20px;
  padding: 3px var(--space-3);
}
.cmp-proof-card__go {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-deep-coral);
}
.cmp-proof-card:hover .cmp-proof-card__go {
  text-decoration: underline;
}

/* ── Eval List ────────────────────────────────────────────────── */
.cmp-eval {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  max-width: 820px;
  counter-reset: q;
  padding: 0;
}
.cmp-eval li {
  counter-increment: q;
  position: relative;
  padding: var(--space-5) var(--space-6) var(--space-5) 64px;
  background: var(--color-white);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-charcoal);
}
.cmp-eval li::before {
  content: counter(q);
  position: absolute;
  left: var(--space-5);
  top: var(--space-4);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-soft-peach);
  color: var(--color-charcoal);
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.cmp-faq-list {
  display: grid;
  gap: var(--space-4);
  max-width: 860px;
}
.cmp-faq {
  background: var(--color-white);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-md);
}
.cmp-faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) var(--space-6);
}
.cmp-faq summary::-webkit-details-marker { display: none; }
.cmp-faq summary h3 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-charcoal);
  flex: 1;
  line-height: 1.4;
  margin: 0;
}
.cmp-faq__chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-warm-gray);
  border-bottom: 2px solid var(--color-warm-gray);
  transform: rotate(45deg);
  transition: transform .15s;
  flex: none;
  margin-top: -4px;
}
.cmp-faq[open] .cmp-faq__chev {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.cmp-faq__body {
  padding: 0 var(--space-6) var(--space-6);
  max-width: 72ch;
}
.cmp-faq__body p {
  font-size: var(--text-base);
  color: var(--color-warm-gray);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}
.cmp-faq__body p:last-child { margin-bottom: 0; }

/* ── Legal ────────────────────────────────────────────────────── */
.cmp-legal {
  background: var(--color-charcoal);
  padding: 0 0 var(--space-2);
}
.cmp-legal p {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-style: italic;
  color: rgba(255, 255, 255, .55);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: var(--space-6);
  max-width: 860px;
  margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cmp-page .cmp-section { padding: var(--space-16) 0; }
  .cmp-hero { padding: var(--space-12) 0 var(--space-16); }
  .cmp-answer-card { padding: var(--space-8) var(--space-6); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
  .cmp-answer-card p { font-size: var(--text-lg); }
  .cmp-cta-row .btn { width: 100%; }
  .cmp-wedge { padding: var(--space-6); }
  .cmp-table thead th,
  .cmp-table tbody td,
  .cmp-table tbody .cmp-table__feature { padding-left: var(--space-4); padding-right: var(--space-4); }
}