/* Search Systems — Bootstrap 5.3 design system
   ═══════════════════════════════════════════════════════════
   CSS ARCHITECTURE (Bootstrap-first)
   Load order: bootstrap.min.css → main.css only.
   Prefer Bootstrap utilities/components; main.css holds tokens +
   reusable project components only (no page-only stylesheets).
   Units: rem (1px borders / media breakpoints may remain px).
   ═══════════════════════════════════════════════════════════ */

/* Inter variable (opsz + wght) for optical sizing; display=swap for performance */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..800&display=swap');

/* ── Design tokens ── */
:root {
  /* Brand — matched to searchsystems.argosinfotech.dev */
  --primary: #0e2d53;
  --primary-mid: #112d4e;
  --secondary: #112d4e;
  --accent: #00a8c2;
  --accent-cyan: #7ed6f7;
  --accent-mint: #b7e8d5;
  --accent-peach: #f6c9a8;
  --accent-blue: #d8f0ff;
  --accent-orange: #e8642c;
  --success: #1d7256;
  --warning: #c35322;
  --danger: #c35322;
  --dark: #001030;
  --footer-bg: #001030;
  --footer-dark: #000820;
  --light: #f7f8f8;
  --white: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f7f8f8;
  --background: #fcfcfb;
  --surface-grid-base: #fefefe;
  --surface-grid-fade: #fbfbf8;
  --text-primary: #0e2d53;
  --text-secondary: #67778c;
  --text-muted: #7b8999;
  --text-paragraph: var(--text-secondary); /* uniform body / paragraph copy */
  --text-inverse: #ffffff;
  --text-inverse-strong: rgba(255, 255, 255, 0.85);
  --text-inverse-body: rgba(255, 255, 255, 0.78);
  --text-inverse-muted: rgba(255, 255, 255, 0.72);
  --text-inverse-soft: rgba(255, 255, 255, 0.6);
  --text-inverse-faint: rgba(255, 255, 255, 0.55);
  --text-inverse-dim: rgba(255, 255, 255, 0.45);
  --icon-inverse: #b7b7b7;
  /* Borders — matched to searchsystems.argosinfotech.dev */
  --border: #dfe3e6;
  --border-color: var(--border);
  --border-light: #e7e9ea;
  --border-inverse: rgba(255, 255, 255, 0.1);
  --border-inverse-soft: rgba(255, 255, 255, 0.08);
  --border-inverse-faint: rgba(255, 255, 255, 0.06);
  --border-inverse-strong: rgba(255, 255, 255, 0.12);
  --border-inverse-hover: rgba(255, 255, 255, 0.2);
  --border-accent-green: color-mix(in srgb, var(--success) 42%, var(--border-light));
  --border-accent-orange: color-mix(in srgb, var(--warning) 42%, var(--border-light));
  --border-accent-cyan: color-mix(in srgb, var(--accent) 42%, var(--border-light));
  --navy-hover: #2e4c67;
  --primary-dark: #040e2b;

  /* Surfaces / tints — live site aliases */
  --surface-teal: #eef4f8;
  --surface-cyan: #d0f0fb;
  --surface-green: #e8efe5;
  --surface-orange: #fce6d9;
  --surface-pink: #fff3ec;
  --surface-purple: #f3f6fa;
  --surface-card-cyan: rgb(246 251 253);
  --surface-card-peach: rgb(253 249 246);
  --surface-card-pink: rgb(252 248 247);
  --surface-card-neutral: rgb(251 252 253);
  --surface-inverse-soft: rgba(255, 255, 255, 0.04);
  --surface-header: rgba(255, 255, 255, 0.98);
  --surface-header-blur: rgba(255, 255, 255, 0.92);
  --label-bg: rgba(14, 45, 83, 0.04);
  --label-border: rgba(14, 45, 83, 0.1);
  --label-text: rgba(14, 45, 83, 0.7);
  --snippet-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  --glow-accent: color-mix(in srgb, var(--accent) 18%, transparent);
  --glow-accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --glow-cyan: color-mix(in srgb, var(--accent-cyan) 14%, transparent);

  /* ═══════════════════════════════════════════
     Global spacing scale (4px base)
     Only use values from this scale.
     4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 56 · 64 · 80 · 96 · 128
     ═══════════════════════════════════════════ */
  --space-0: 0;
  --space-1: 0.25rem;     /* 4 */
  --space-2: 0.5rem;      /* 8 */
  --space-3: 0.75rem;     /* 12 */
  --space-4: 1rem;        /* 16 */
  --space-4_5: 1.25rem;   /* 20 */
  --space-5: 1.5rem;      /* 24 */
  --space-6: 2rem;        /* 32 */
  --space-6_5: 2.5rem;    /* 40 */
  --space-7: 3rem;        /* 48 */
  --space-7_5: 3.5rem;    /* 56 */
  --space-8: 4rem;        /* 64 */
  --space-9: 5rem;        /* 80 */
  --space-10: 6rem;       /* 96 */
  --space-11: 8rem;       /* 128 */

  /* Tailwind-named aliases (same px values) */
  --space-12: var(--space-7);    /* 48 */
  --space-14: var(--space-7_5);  /* 56 */
  --space-16: var(--space-8);    /* 64 */
  --space-20: var(--space-9);    /* 80 */
  --space-24: var(--space-10);   /* 96 */
  --space-32: var(--space-11);   /* 128 */

  /* Page layout rhythm */
  --header-height: 4.5rem;
  --container-max: 87.5rem;
  --section-padding-y: var(--space-7);
  --section-padding-y-sm: var(--space-6);
  --section-padding-y-lg: var(--space-9);
  --section-padding-y-xl: var(--space-10);
  --hero-padding-y: var(--space-8);
  --section-header-space: var(--space-6);
  --content-block-gap: var(--space-6);
  --stack-gap-sm: var(--space-2);
  --stack-gap-md: var(--space-4);
  --stack-gap-lg: var(--space-6);
  --flow-gap: var(--space-4);
  --flow-gap-lg: var(--space-6);
  --card-padding: var(--space-5);
  --card-gap: var(--space-4);
  --gap-grid: var(--space-4);
  --gap-grid-md: var(--space-5);
  --gap-grid-lg: var(--space-6);
  --gap-split: var(--space-7);
  --type-gap: var(--space-4);
  --type-gap-sm: var(--space-2);
  --type-gap-lg: var(--space-5);
  --btn-padding-y: var(--space-2);
  --btn-padding-x: var(--space-4_5);
  --btn-padding-y-sm: var(--space-1);
  --btn-padding-x-sm: var(--space-4);
  --btn-padding-y-lg: var(--space-3);
  --btn-padding-x-lg: var(--space-5);
  --form-gap: var(--space-5);
  --form-field-gap: var(--space-2);
  --list-gap: var(--space-2);
  --nav-item-gap: var(--space-2);
  --footer-gap: var(--space-6);
  --faq-inner-max: 62rem;
  --cta-banner-content-max: 62rem;


  /* ═══════════════════════════════════════════
     Typography Variables
     ═══════════════════════════════════════════ */
  --font-family-sans: "Inter", sans-serif;
  --font-family-base: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Weight scale: 300–800 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Legacy weight aliases — keep existing component refs working */
  --weight-light: var(--font-weight-light);
  --weight-regular: var(--font-weight-normal);
  --weight-medium: var(--font-weight-medium);
  --weight-semibold: var(--font-weight-semibold);
  --weight-bold: var(--font-weight-bold);
  --weight-extrabold: var(--font-weight-extrabold);

  /* Semantic aliases (Bootstrap-first design system) */
  --body-color: var(--text-paragraph);
  --text-color: var(--text-paragraph);
  --heading-color: var(--text-primary);
  --font-family: var(--font-family-base);
  --font-size-base: var(--text-body);
  --font-size-lg: var(--text-lg);
  --font-size-sm: var(--text-sm);
  --fw-light: var(--font-weight-light);
  --fw-normal: var(--font-weight-normal);
  --fw-medium: var(--font-weight-medium);
  --fw-semibold: var(--font-weight-semibold);
  --fw-bold: var(--font-weight-bold);
  --fw-extrabold: var(--font-weight-extrabold);
  --section-padding: var(--section-padding-y);
  --z-header: 1030;
  --z-offcanvas: 1045;
  --z-modal: 1055;

  /*
   * Inter OpenType — Tailwind Plus–style character variants.
   * Skip "dlig" globally (ornamental). Skip global word-spacing overrides.
   */
  --font-features-base:
    "cv02" 1,
    "cv03" 1,
    "cv04" 1,
    "cv11" 1,
    "ss01" 1,
    "ss02" 1,
    "liga" 1,
    "calt" 1;
  --font-features-heading: var(--font-features-base);
  --font-features-numeric:
    "tnum" 1,
    "lnum" 1,
    "cv02" 1,
    "cv03" 1,
    "cv04" 1,
    "cv11" 1,
    "ss01" 1,
    "ss02" 1;
  --font-features-code: "liga" 0, "calt" 0, "tnum" 1;

  /* Modular type scale — fluid via clamp (sizes preserved for layout stability) */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.813rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.938rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.063rem);
  --text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.4rem + 0.6vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.7rem + 0.8vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 2rem + 1vw, 3.5rem);
  --text-5xl: clamp(3rem, 2.7rem + 1.4vw, 4.5rem);

  /* Display / heading / body hierarchy — clear step-down (Tailwind Plus–style) */
  --text-display-xl: var(--text-5xl);
  --text-display-lg: clamp(2.5rem, 2.2rem + 1.4vw, 3.75rem);
  --text-display-md: var(--text-4xl);
  --text-display-sm: var(--text-3xl);
  --text-display: var(--text-display-xl);
  --text-h1: var(--text-5xl);
  --text-h2: var(--text-4xl);
  --text-h3: var(--text-xl);       /* subsection — below H2, above card title */
  --text-h4: var(--text-lg);       /* minor subsection */
  --text-h5: var(--text-base);
  --text-h6: var(--text-sm);
  --text-lead: var(--text-lg);
  --text-body-lg: var(--text-lg);
  --text-body: var(--text-base);
  --text-body-sm: var(--text-sm);
  --text-small: var(--text-sm);
  --text-caption: var(--text-xs);
  --text-label: var(--text-xs);
  --text-button: var(--text-sm);
  --text-card-title: 1.125rem; /* 18px — card / compact H3 */
  --text-faq-question: var(--text-card-title);

  /* Text roles — primary → support → meta (information priority) */
  --text-support: var(--text-muted);
  --text-meta: var(--text-muted);

  /* Line heights — display 1.0–1.1 · headings 1.1–1.2 · body 1.65–1.75 · small 1.5 */
  --leading-none: 1;
  --leading-display: 1.05;
  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-heading: 1.2;
  --leading-body: 1.7;
  --leading-relaxed: 1.75;
  --leading-loose: 1.8;
  --leading-small: 1.5;

  /* Letter spacing — displays/headings negative · body normal · labels/buttons positive */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-label: 0.05em;
  --tracking-button: 0.02em;

  /* Measure / readability — Tailwind Plus–style comfortable line lengths */
  --measure-prose: 40rem;
  --measure-narrow: 36rem;
  --measure-wide: 48rem;
  --measure-section: 42rem;

  /* Typography transition */
  --transition-text: color var(--duration-normal) var(--ease-out),
    text-decoration-color var(--duration-normal) var(--ease-out);

  /* Radius — uniform 4px (0.25rem); all aliases point here for multi-use */
  --radius: 0.25rem;
  --radius-sm: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);
  --radius-full: var(--radius);

  /* Border — uniform width + color */
  --border-width: 1px;
  --border-style: solid;
  --border-default: var(--border-width) var(--border-style) var(--border);

  /* Shadow — uniform base + one hover elevation */
  --shadow: 0 1px 0.1875rem rgba(1, 23, 56, 0.08);
  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow);
  --shadow-hover: 0 0.25rem 0.875rem rgba(1, 23, 56, 0.1);
  --shadow-lg: var(--shadow-hover);
  --shadow-xl: var(--shadow-hover);
  --transition: 0.2s ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-reveal: 0.7s;
  --duration-hero: 0.85s;
  --focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--accent) 25%, transparent);
  --grid-line: rgba(1, 23, 56, 0.03);
  --grid-line-inverse: rgba(255, 255, 255, 0.04);
  --grid-size: 2.25rem;
  --icon-box-size: 3rem;
  --icon-box-glyph: 1.5rem;
  --icon-box-size-sm: 2.5rem;
  --icon-box-glyph-sm: 1.25rem;
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-xs: 1rem;

  /* Bootstrap bridge — remaps Bootstrap utilities/components to brand tokens */
  --bs-font-sans-serif: var(--font-family-base);
  --bs-body-font-family: var(--font-family-base);
  --bs-body-font-size: var(--text-body);
  --bs-body-font-weight: var(--font-weight-normal);
  --bs-body-line-height: var(--leading-body);
  --bs-heading-font-family: var(--font-family-heading);
  --bs-body-color: var(--text-paragraph);
  --bs-body-bg: var(--background);
  --bs-heading-color: var(--text-primary);
  --bs-secondary-color: var(--text-paragraph);
  --bs-tertiary-color: var(--text-support);
  --bs-border-width: var(--border-width);
  --bs-border-style: var(--border-style);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(14, 45, 83, 0.08);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius);
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-xl: var(--radius);
  --bs-border-radius-xxl: var(--radius);
  --bs-border-radius-2xl: var(--radius);
  --bs-border-radius-pill: var(--radius);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 0, 168, 194;
  --bs-link-hover-color: var(--secondary);
  --bs-link-hover-color-rgb: 17, 45, 78;
  --bs-code-color: var(--primary);
  --bs-highlight-bg: var(--surface-cyan);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 14, 45, 83;
  --bs-primary-text-emphasis: var(--primary-dark);
  --bs-primary-bg-subtle: var(--surface-teal);
  --bs-primary-border-subtle: color-mix(in srgb, var(--primary) 30%, var(--border-light));
  --bs-secondary: var(--secondary);
  --bs-secondary-rgb: 17, 45, 78;
  --bs-secondary-text-emphasis: var(--primary);
  --bs-secondary-bg-subtle: var(--surface-purple);
  --bs-secondary-border-subtle: color-mix(in srgb, var(--secondary) 30%, var(--border-light));
  --bs-info: var(--accent);
  --bs-info-rgb: 0, 168, 194;
  --bs-info-text-emphasis: var(--accent);
  --bs-info-bg-subtle: var(--surface-cyan);
  --bs-info-border-subtle: var(--border-accent-cyan);
  --bs-success: var(--success);
  --bs-success-rgb: 29, 114, 86;
  --bs-success-text-emphasis: var(--success);
  --bs-success-bg-subtle: var(--surface-green);
  --bs-success-border-subtle: var(--border-accent-green);
  --bs-warning: var(--warning);
  --bs-warning-rgb: 195, 83, 34;
  --bs-warning-text-emphasis: var(--warning);
  --bs-warning-bg-subtle: var(--surface-orange);
  --bs-warning-border-subtle: var(--border-accent-orange);
  --bs-danger: var(--danger);
  --bs-danger-rgb: 195, 83, 34;
  --bs-danger-text-emphasis: var(--danger);
  --bs-danger-bg-subtle: var(--surface-pink);
  --bs-danger-border-subtle: var(--border-accent-orange);
  --bs-dark: var(--dark);
  --bs-dark-rgb: 0, 16, 48;
  --bs-dark-text-emphasis: var(--primary-dark);
  --bs-dark-bg-subtle: var(--surface-teal);
  --bs-dark-border-subtle: color-mix(in srgb, var(--dark) 20%, var(--border-light));
  --bs-light: var(--light);
  --bs-light-rgb: 247, 248, 248;
  --bs-light-text-emphasis: var(--text-primary);
  --bs-light-bg-subtle: var(--surface-alt);
  --bs-light-border-subtle: var(--border-light);
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 16, 48;
  --bs-focus-ring-color: color-mix(in srgb, var(--accent) 22%, transparent);
  --bs-box-shadow-sm: var(--shadow);
  --bs-box-shadow: var(--shadow);
  --bs-box-shadow-lg: var(--shadow-hover);
  --bs-form-valid-color: var(--success);
  --bs-form-valid-border-color: var(--success);
  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger);
}

/* ═══════════════════════════════════════════
   Font Rendering
   ═══════════════════════════════════════════ */
html {
  font-family: var(--font-family-base);
  font-size: 100%;
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  overflow-x: clip;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-features-base);
  font-size-adjust: from-font;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
  overflow-x: clip;
  min-width: 0;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-features-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  color: var(--text-inverse);
  background-color: var(--primary);
}

::-moz-selection {
  color: var(--text-inverse);
  background-color: var(--primary);
}

/* Uniform Bootstrap chrome utilities (radius / border / shadow) */
.rounded,
.rounded-2 {
  border-radius: var(--radius) !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.border {
  border: var(--border-default) !important;
}

.border-0 {
  border: 0 !important;
}

.shadow-sm {
  box-shadow: var(--shadow) !important;
}

.container {
  max-width: var(--container-max);
}

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

/* ═══════════════════════════════════════════
   Font Scale / Headings / Paragraphs / Links
   ═══════════════════════════════════════════ */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-family: var(--font-family-heading);
  color: var(--text-primary);
  font-synthesis: none;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: var(--font-features-heading);
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  margin-bottom: var(--type-gap);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  margin-bottom: var(--type-gap);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

h3, .h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
}

h4, .h4 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
}

p {
  margin-bottom: var(--type-gap);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
}

.section-intro,
.prose,
.prose p,
.section-header .section-text {
  max-width: var(--measure-prose);
}

/* Text role utilities — Bootstrap bridge + hierarchy
   .text-secondary = primary body copy (not brand navy rgb)
   .text-muted / .text-support = supporting / meta */
.text-secondary {
  color: var(--text-paragraph) !important;
}

.text-muted {
  color: var(--text-support) !important;
}

small,
.small {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-small);
  letter-spacing: var(--tracking-normal);
  color: var(--text-support);
}

strong {
  font-weight: var(--font-weight-semibold);
}


i {
  font-style: italic;
  font-synthesis: none;
}

a {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  transition: var(--transition-text);
}

a:hover {
  text-decoration-thickness: 0.085em;
}

/* ═══════════════════════════════════════════
   Buttons (typography only)
   ═══════════════════════════════════════════ */
button,
.btn {
  font-family: var(--font-family-base);
  font-feature-settings: var(--font-features-base);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn {
  font-size: var(--text-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-button);
}

/* ═══════════════════════════════════════════
   Forms (typography only)
   ═══════════════════════════════════════════ */
input,
textarea,
select,
.form-control,
.form-select {
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: var(--font-features-base);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  font-family: inherit;
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-normal);
  opacity: 1;
}

label,
.form-label {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  font-feature-settings: var(--font-features-base);
  line-height: var(--leading-small);
}

/* ═══════════════════════════════════════════
   Lists — readable hierarchy (prose only)
   Do not style nav / chrome lists globally.
   ═══════════════════════════════════════════ */
.prose ul,
.prose ol,
.section-text ul,
.section-text ol,
.faq-answer ul,
.faq-answer ol,
.callout__text ul,
.callout__text ol,
.card-description ul,
.card-description ol {
  font-family: var(--font-family-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  list-style-position: outside;
  margin-bottom: var(--type-gap);
  padding-left: var(--space-5);
  color: var(--text-paragraph);
}

.prose ul li,
.prose ol li,
.section-text ul li,
.section-text ol li,
.faq-answer ul li,
.faq-answer ol li {
  line-height: var(--leading-relaxed);
  padding-left: var(--space-1);
}

.prose ul li + li,
.prose ol li + li,
.section-text ul li + li,
.section-text ol li + li,
.faq-answer ul li + li,
.faq-answer ol li + li {
  margin-top: var(--list-gap);
}

.prose ol,
.section-text ol,
.faq-answer ol {
  font-variant-numeric: tabular-nums;
}

/* Chrome / component lists — never inherit prose list rhythm */
.navbar-nav,
.dropdown-menu,
.list-unstyled,
.check-stack,
.site-footer__links,
.site-footer__contact,
.query-list {
  margin-bottom: 0;
  padding-left: 0;
}

.navbar-nav > .nav-item + .nav-item,
.dropdown-menu > li + li {
  margin-top: 0;
}

/* ═══════════════════════════════════════════
   Blockquotes
   ═══════════════════════════════════════════ */
blockquote,
.blockquote {
  font-family: var(--font-family-base);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  font-style: italic;
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
  font-feature-settings: var(--font-features-base);
  font-optical-sizing: auto;
  font-synthesis: none;
}

blockquote p,
.blockquote p {
  max-width: var(--measure-prose);
  line-height: inherit;
}

/* ═══════════════════════════════════════════
   Code Typography
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   Tables (typography only)
   ═══════════════════════════════════════════ */
table {
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  font-feature-settings: var(--font-features-base);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--leading-body);
}

th {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-small);
  text-align: inherit;
  vertical-align: bottom;
}

td {
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  vertical-align: top;
}

/* Numeric / stats — tabular alignment without changing layout */
.stats-value,
.card-num,
.count-up,
.status-value,
.score-ring__value,
.metric-tile__value .count-up {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--font-features-numeric);
  font-kerning: normal;
}

.count-up.is-counting {
  display: inline-block;
  min-width: 2ch;
}

/* ═══════════════════════════════════════════
   Typography Roles + Utility Typography
   ═══════════════════════════════════════════ */

/* Display */

.display-title {
  margin-bottom: var(--space-4);
  font-family: var(--font-family-heading);
  font-size: var(--text-display-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: var(--font-features-heading);
  color: var(--text-primary);
}

/* Headings */

.page-title {
  margin-bottom: var(--space-4);
  font-family: var(--font-family-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: var(--font-features-heading);
  color: var(--text-primary);
}


.section-title {
  margin-bottom: var(--type-gap);
  font-family: var(--font-family-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: var(--font-features-heading);
  color: var(--text-primary);
}

.card-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.card-description {
  margin-bottom: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
}

.card-title--sm {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-small);
  color: var(--text-support);
}

.faq-question {
  margin-bottom: var(--space-2);
  font-size: var(--text-faq-question);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.faq-answer {
  margin-bottom: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
}

.section-label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-small);
  text-transform: uppercase;
  color: var(--text-support);
}

.label-pill {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--type-gap);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-small);
  text-transform: uppercase;
  color: var(--text-support);
  background-color: var(--label-bg);
  border: var(--border-default);
  border-color: var(--label-border);
  border-radius: var(--radius);
}


.section-intro {
  margin-bottom: var(--type-gap);
  font-size: var(--text-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
  max-width: var(--measure-prose);
}

.section-text {
  margin-bottom: var(--type-gap);
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--section-header-space);
  max-width: var(--measure-wide);
}

.section-header.text-center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-header .section-label {
  margin-bottom: var(--space-3);
}

.section-header .section-title,
.section-header .display-title,
.section-header .page-title {
  margin-bottom: var(--type-gap);
}

.section-header .section-intro,
.section-header .section-text {
  margin-bottom: 0;
}

.section-header .section-intro:not(:last-child),
.section-header .section-text:not(:last-child) {
  margin-bottom: var(--type-gap);
}

.text-highlight {
  color: var(--accent);
}

.text-highlight--orange {
  color: var(--warning);
}

.text-info {
  color: var(--accent) !important;
}

.callout {
  margin: 0;
  padding: var(--card-padding);
  padding-left: calc(var(--card-padding) - 0.1875rem);
  background-color: var(--surface-green);
  border-left: 0.1875rem solid var(--secondary);
  border-radius: var(--radius);
}

.callout__label {
  display: block;
  margin-bottom: var(--type-gap-sm);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-small);
  text-transform: uppercase;
  color: var(--text-muted);
}

.callout__text {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.callout--panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

.callout--panel .callout__label {
  color: var(--warning);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

.callout--panel .callout__text {
  font-size: var(--text-base);
  max-width: 40rem;
}

.callout__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.lead {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-paragraph);
}

.stats-value {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* ── Section rhythm ── */
.section {
  padding-block: var(--section-padding-y);
}


.section.hero-section,
.section.surface-grid:first-of-type {
  padding-block: var(--hero-padding-y);
}

/* ═══════════════════════════════════════════
   Hero section — uniform across all pages
   Split:
   .section.hero-section.surface-grid > .container
     > .row.hero-section__grid
       > .col-*.hero-section__content
         > .label-pill
         > .hero-section__title (.display-title | .page-title)
         > .hero-section__subtitle
         > .hero-section__actions > .btn.hero-section__btn
         > .hero-section__note
       > .col-*.hero-section__visual
   Solo (no visual):
   .section.hero-section > .container > .hero-section__content--solo
   ═══════════════════════════════════════════ */
.hero-section__content {
  min-width: 0;
}

.hero-section__content--solo {
  max-width: var(--measure-wide);
}

/* Hero reading flow: eyebrow → title → subtitle → CTA → note */
.hero-section__content > .label-pill {
  margin-bottom: var(--space-3);
}

.hero-section__content > .hero-section__title {
  margin-bottom: var(--type-gap);
}

.hero-section__content > .hero-section__subtitle {
  margin-bottom: var(--type-gap);
}

.hero-section__content > .hero-section__actions {
  margin-bottom: var(--space-3);
}

.hero-section__content > .hero-section__note {
  margin-bottom: 0;
  color: var(--text-support);
}

.hero-section__visual {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.hero-section__title {
  margin-bottom: var(--type-gap);
}

.hero-section__subtitle {
  margin-bottom: var(--type-gap);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
  max-width: var(--measure-prose);
}

.hero-section__subtitle + .hero-section__subtitle {
  margin-top: calc(var(--space-3) * -1);
}

.hero-section__actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--stack-gap-sm);
  margin-bottom: var(--space-3);
}

.hero-section__actions:last-child {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .hero-section__actions {
    flex-direction: row;
    align-items: center;
  }
}

.hero-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stack-gap-sm);
}

.hero-section__btn .icon-sm,
.hero-section__btn-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
}

.hero-section__note {
  margin-bottom: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-small);
  letter-spacing: var(--tracking-normal);
  color: var(--text-support);
  max-width: var(--measure-prose);
}

@media (min-width: 768px) {
  :root {
    --section-padding-y: var(--space-8);
    --section-padding-y-sm: var(--space-7);
    --section-padding-y-lg: var(--space-10);
    --section-padding-y-xl: var(--space-11);
    --gap-split: var(--space-8);
    --gap-grid: var(--space-5);
    --gap-grid-lg: var(--space-7);
  }
}

@media (min-width: 992px) {
  :root {
    --section-padding-y: var(--space-10);
    --hero-padding-y: var(--space-10);
    --section-header-space: var(--space-7);
    --content-block-gap: var(--space-7);
    --flow-gap-lg: var(--space-7);
  }
}

/* ── Buttons ── */
.btn {
  min-height: 2.75rem;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--text-button);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-snug);
  border-radius: var(--radius);
  transition: background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible {
  box-shadow: var(--focus-ring);
}

.btn-lg {
  min-height: 3rem;
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
}

.btn-primary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--navy-hover);
  --bs-btn-hover-border-color: var(--navy-hover);
  --bs-btn-focus-shadow-rgb: 14, 45, 83;
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}








.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 14, 45, 83;
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
}



.btn-outline-light {
  font-weight: var(--weight-semibold);
  --bs-btn-color: var(--text-inverse);
  --bs-btn-border-color: var(--border-inverse-hover);
  --bs-btn-hover-color: var(--primary-dark);
  --bs-btn-hover-bg: var(--white);
  --bs-btn-hover-border-color: var(--white);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-active-color: var(--primary-dark);
  --bs-btn-active-bg: var(--white);
  --bs-btn-active-border-color: var(--white);
}

.link-primary {
  color: var(--accent) !important;
}

.link-primary:hover,
.link-primary:focus-visible {
  color: var(--secondary) !important;
}

/* ── Site header ── */
.site-header {
  z-index: var(--z-header);
  background-color: var(--surface-header);
  border-bottom-color: var(--border);
}

.site-header.border-bottom,
.offcanvas-header.border-bottom {
  border-bottom: var(--border-width) var(--border-style) var(--border) !important;
}

.site-header .dropdown-menu {
  --bs-dropdown-spacer: var(--space-2);
  margin-top: 0;
  padding: var(--space-2);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
}

.site-header .dropdown-menu .dropdown-item {
  border-radius: var(--radius);
}

@media (min-width: 992px) {
  .site-header {
    background-color: var(--surface-header-blur);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
  }

  .site-header .navbar-nav > .nav-item > .dropdown-menu {
    margin-top: var(--space-2);
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  gap: var(--nav-item-gap);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  line-height: 0;
}

.navbar-brand img {
  display: block;
  height: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem);
  width: auto;
  max-width: min(100%, 15rem);
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-6_5);
  padding: var(--space-2) var(--space-4_5);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--radius);
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white);
  box-shadow: none;
  transition: background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
  color: var(--white);
  background-color: var(--navy-hover);
  border-color: var(--navy-hover);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.site-header__cta:active {
  color: var(--white);
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: none;
  transform: none;
}

.site-header__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow);
}

.site-header .offcanvas-body > .site-header__cta {
  min-height: 2.75rem;
  width: 100%;
  margin-top: auto;
  padding-block: var(--space-3);
}

.site-header__mobile-footer {
  flex-shrink: 0;
  padding: var(--space-4);
  border-top: var(--border-width) var(--border-style) var(--border);
  background-color: var(--white);
  box-shadow: 0 -0.25rem 0.75rem rgba(1, 23, 56, 0.06);
}

.site-header__mobile-footer .site-header__cta {
  width: 100%;
  min-height: var(--space-7);
  margin: 0;
  padding-block: var(--space-3);
}

.site-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-7);
  height: var(--space-7);
  padding: 0;
  color: var(--primary);
  border: 0;
  background-color: transparent;
  box-shadow: none;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.site-header__icon-btn:hover {
  color: var(--accent);
  background-color: var(--light);
  border: 0;
  box-shadow: none;
}

.site-header__icon-btn:active {
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, var(--light));
  border: 0;
  box-shadow: none;
  transform: scale(0.96);
}

.site-header__icon-btn:focus,
.site-header__icon-btn:focus-visible {
  color: var(--primary);
  background-color: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.site-header__icon-btn:focus-visible {
  background-color: var(--light);
  color: var(--accent);
}

.site-header__toggle {
  display: inline-flex;
}

.site-header .navbar-toggler.site-header__icon-btn,
.site-header .navbar-toggler.site-header__icon-btn:hover,
.site-header .navbar-toggler.site-header__icon-btn:focus,
.site-header .navbar-toggler.site-header__icon-btn:focus-visible,
.site-header .navbar-toggler.site-header__icon-btn:active {
  padding: 0;
  font-size: inherit;
  line-height: 1;
  background-image: none;
  border: 0;
  outline: none;
  box-shadow: none;
}

.site-header__menu-icon {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  pointer-events: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header__menu-title {
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-small);
  text-transform: uppercase;
  color: var(--text-support);
}

.site-header .navbar {
  --bs-navbar-color: var(--text-paragraph);
  --bs-navbar-hover-color: var(--accent);
  --bs-navbar-active-color: var(--accent);
  --bs-navbar-brand-color: var(--primary);
  --bs-navbar-brand-hover-color: var(--primary);
  padding-block: 0;
}

.site-header .navbar-nav {
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

.site-header .nav-item {
  margin: 0;
}

.site-header .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-paragraph);
  white-space: nowrap;
}

@media (min-width: 992px) {
  .site-header .navbar-nav {
    gap: var(--space-2);
  }

  .site-header .nav-link {
    padding-inline: var(--space-3);
  }

  .site-header .navbar-toggler.site-header__toggle {
    display: none !important;
  }
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus-visible {
  color: var(--accent);
}

/* Open dropdown is not the same as current page */
.site-header .navbar-nav .nav-link.show:not(.active) {
  color: var(--text-paragraph);
}

.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .nav-link.active:hover,
.site-header .navbar-nav .nav-link.active:focus-visible,
.site-header .navbar-nav .nav-link.active.show {
  color: var(--accent);
}

.site-header .dropdown-item {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-paragraph);
  padding: var(--space-3) var(--space-4);
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
  color: var(--accent);
  background-color: var(--light);
}

.site-header .dropdown-item.active,
.site-header .dropdown-item.active:hover,
.site-header .dropdown-item.active:focus {
  color: var(--accent);
  background-color: transparent;
}

@media (max-width: 991.98px) {
  .site-header .offcanvas-lg {
    --bs-offcanvas-width: min(88vw, 22.5rem);
    border-left: var(--border-width) var(--border-style) var(--border);
    box-shadow: -0.5rem 0 2rem rgba(1, 23, 56, 0.12);
  }

  .site-header__actions {
    position: relative;
    flex-shrink: 0;
  }

  body.mobile-nav-open .site-header__actions {
    pointer-events: none;
  }

  .site-header .offcanvas-lg.show,
  .site-header .offcanvas-lg.showing {
    z-index: var(--z-offcanvas);
  }

  .site-header .offcanvas-header .site-header__menu-close {
    position: relative;
    z-index: 1;
    margin-left: auto;
  }

  .site-header .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - var(--space-7) - var(--space-4));
  }

  .site-header .navbar-brand img {
    max-width: 100%;
    height: clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem);
  }

  .site-header .navbar-toggler.site-header__toggle {
    display: inline-flex !important;
    flex-shrink: 0;
  }

  .site-header .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--header-height);
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface-header);
  }

  .site-header .offcanvas-header .offcanvas-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.mobile-nav-open .site-header__toggle {
    visibility: hidden;
    pointer-events: none;
  }

  .site-header .offcanvas-body {
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
  }

  .site-header .offcanvas-body > .navbar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) var(--space-4);
    margin-bottom: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  .site-header .navbar-nav {
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .site-header .navbar-nav > .nav-item {
    border-bottom: var(--border-width) var(--border-style) var(--border);
  }

  .site-header .navbar-nav > .nav-item:last-child {
    border-bottom: 0;
  }

  .site-header .navbar-nav .nav-link {
    width: 100%;
    min-height: var(--space-7);
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-body);
    justify-content: space-between;
    border-radius: var(--radius-sm, var(--radius));
    transition: background-color var(--duration-normal) var(--ease-out),
      color var(--duration-normal) var(--ease-out);
  }

  .site-header .navbar-nav .nav-link:hover,
  .site-header .navbar-nav .nav-link:focus-visible {
    background-color: var(--light);
  }

  .site-header .navbar-nav .nav-link.active {
    color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  }

  .site-header .navbar-nav .dropdown-toggle::after {
    flex-shrink: 0;
    margin-left: var(--space-3);
    margin-right: var(--space-1);
    vertical-align: middle;
    transition: transform var(--duration-normal) var(--ease-out);
  }

  .site-header .navbar-nav .dropdown-toggle.show::after {
    transform: rotate(180deg);
  }

  .site-header .dropdown-menu {
    position: static;
    float: none;
    margin: 0 0 var(--space-2) var(--space-3);
    border: 0;
    border-left: 0.125rem solid var(--accent);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 var(--space-2) var(--space-4);
  }

  .site-header .dropdown-menu .dropdown-item {
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-body-sm);
    border-radius: var(--radius);
    transition: background-color var(--duration-normal) var(--ease-out),
      color var(--duration-normal) var(--ease-out);
  }

  .site-header .dropdown-menu .dropdown-item:hover,
  .site-header .dropdown-menu .dropdown-item:focus-visible {
    background-color: var(--light);
  }

  .site-header .dropdown-menu .dropdown-item.active {
    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  }

  body.mobile-nav-open {
    overflow: hidden;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header .nav-link {
    font-size: var(--text-caption);
    padding-inline: var(--space-2);
  }
}

/* ── Forms ── */
.form-control,
.form-select {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.form-control::placeholder {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-normal);
}

.form-label {
  margin-bottom: var(--form-field-gap);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-small);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

/* ── Cards / tables ── */
.card {
  --bs-card-border-width: var(--border-width);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius);
  --bs-card-spacer-y: var(--card-padding);
  --bs-card-spacer-x: var(--card-padding);
  border: var(--border-default);
  transition: box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

/* Reference cards always show gray-200 hairline (overrides Bootstrap border-0) */
.feature-card:not(.bg-primary):not(.text-bg-primary),
.info-card {
  border: var(--border-default) !important;
  border-radius: var(--radius);
}

.feature-card:hover,
.info-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-hover);
  transform: translateY(-0.15rem);
}

.feature-card .card-body,
.info-card .card-body {
  padding: var(--card-padding);
}

.feature-card .card-body:has(> .card-title:first-child):not(:has(.dashboard-card__row, .row, .d-flex, .panel-grid, .snippet-bar)),
.info-card .card-body:has(> .card-title:first-child):not(:has(.dashboard-card__row, .row, .d-flex, .panel-grid)) {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.feature-card .card-body:has(> .card-title:first-child):not(:has(.dashboard-card__row, .row, .d-flex, .panel-grid, .snippet-bar)) > *,
.info-card .card-body:has(> .card-title:first-child):not(:has(.dashboard-card__row, .row, .d-flex, .panel-grid)) > * {
  margin-bottom: 0;
}

.table {
  --bs-table-color: var(--text-paragraph);
  --bs-table-border-color: var(--border);
  font-size: var(--text-body-sm);
}

.table-bordered {
  border-color: var(--border);
}

.table-bordered > :not(caption) > * {
  border-width: 1px;
  border-color: var(--border);
}

.table > :not(caption) > * > * {
  padding: var(--space-3) var(--space-4);
  border-color: var(--border);
}

.table thead th {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Dark surfaces — inverse borders like reference footer */

.badge.border {
  border-color: var(--border) !important;
}

/* ── Icon system ── */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  min-width: var(--icon-box-size);
  min-height: var(--icon-box-size);
  max-width: var(--icon-box-size);
  max-height: var(--icon-box-size);
  margin-bottom: var(--type-gap);
  padding: 0;
  border-radius: var(--radius);
  background-color: var(--surface-teal);
  color: var(--primary);
  line-height: 0;
}

.icon-box svg,
.icon-box .icon-sm,
.icon-box .icon-md,
.icon-box .icon-xs {
  display: block;
  flex-shrink: 0;
  width: var(--icon-box-glyph);
  height: var(--icon-box-glyph);
  min-width: var(--icon-box-glyph);
  min-height: var(--icon-box-glyph);
  max-width: var(--icon-box-glyph);
  max-height: var(--icon-box-glyph);
  stroke-width: 2;
}

.icon-box--teal { background-color: var(--surface-green); color: var(--success); }
.icon-box--orange { background-color: var(--surface-orange); color: var(--warning); }
.icon-box--cyan { background-color: var(--surface-cyan); color: var(--accent); }
.icon-box--pink { background-color: var(--surface-pink); color: var(--accent-peach); }
.icon-box--neutral {
  background-color: var(--background);
  color: var(--text-primary);
  border: var(--border-width) var(--border-style) var(--border-light);
}

/* Measure cards — cyan surface + navy icon (live local measure) */
.icon-box--measure {
  background-color: var(--surface-cyan);
  color: var(--secondary);
}

.measure-card.feature-card:hover {
  transform: none;
}

.measure-card .card-body {
  padding: var(--space-5);
}

.measure-card .card-title {
  margin-bottom: var(--space-2);
}

.measure-card--primary {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: 0 0.625rem 1.75rem color-mix(in srgb, var(--accent) 14%, transparent);
}

.measure-card__badge {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--secondary);
}

.measure-note {
  max-width: 45rem;
  margin: var(--space-6) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.measure-note--sample {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-style: italic;
  line-height: var(--leading-body);
}

/* Compare table — basic SEO vs systems engineering */
.compare-header {
  max-width: 50rem;
}

.compare-header .section-title,
.compare-header .section-intro {
  max-width: 45rem;
}

.compare-table {
  border: var(--border-default);
  border-radius: var(--radius);
  overflow: hidden;
}

.compare-table__head,
.compare-table__row {
  display: grid;
  grid-template-columns: 1fr;
}

.compare-table__head {
  border-bottom: var(--border-default);
}

.compare-table__row:not(:last-child) {
  border-bottom: var(--border-default);
}

.compare-table__col-head,
.compare-table__cell {
  padding: var(--space-5) var(--space-6);
}

.compare-table__col-head {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
}

.compare-table__col-head--basic {
  color: var(--text-muted);
}

.compare-table__col-head--systems {
  color: var(--secondary);
}

.compare-table__cell--basic {
  display: flex;
  align-items: flex-start;
  padding-bottom: var(--space-2);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.compare-table__cell--systems {
  display: flex;
  align-items: flex-start;
  gap: var(--stack-gap-sm);
  padding-top: var(--space-0);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.compare-table__bullet {
  flex-shrink: 0;
  color: var(--accent);
  font-weight: var(--weight-medium);
}

@media (min-width: 640px) {
  .compare-table:not(.compare-table--cols-3) .compare-table__head,
  .compare-table:not(.compare-table--cols-3) .compare-table__row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .compare-table:not(.compare-table--cols-3) .compare-table__col-head--basic,
  .compare-table:not(.compare-table--cols-3) .compare-table__cell--basic {
    border-right: var(--border-default);
  }

  /* Stacked unmarked tables only — marked keeps equal cell padding */
  .compare-table:not(.compare-table--cols-3):not(.compare-table--marked) .compare-table__cell--basic {
    padding-bottom: var(--space-5);
  }

  .compare-table:not(.compare-table--cols-3):not(.compare-table--marked) .compare-table__cell--systems {
    padding-top: var(--space-5);
  }
}

@media (min-width: 768px) {
  .compare-table__col-head,
  .compare-table__cell {
    padding: var(--space-6) var(--space-6_5);
  }

  .compare-table:not(.compare-table--cols-3):not(.compare-table--marked) .compare-table__cell--basic {
    padding-bottom: var(--space-6);
  }

  .compare-table:not(.compare-table--cols-3):not(.compare-table--marked) .compare-table__cell--systems {
    padding-top: var(--space-6);
  }
}

/* Marked compare (status icons + tinted columns) */
.compare-table--marked {
  background-color: var(--white);
  margin-bottom: var(--gap-grid);
}

.compare-table--marked .compare-table__col-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  text-transform: none;
  color: var(--primary);
}

.compare-table--marked .compare-table__col-head .icon-box {
  --icon-box-size: 1.75rem;
  --icon-box-glyph: 1rem;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  min-width: var(--icon-box-size);
  min-height: var(--icon-box-size);
  max-width: var(--icon-box-size);
  max-height: var(--icon-box-size);
  margin-bottom: 0;
  align-self: center;
}

.compare-table--marked .compare-table__col-head h3,
.compare-table--marked .compare-table__col-head .h3 {
  margin: 0;
  align-self: center;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  letter-spacing: var(--tracking-normal);
  color: var(--primary);
}

.compare-table--marked .compare-table__col-head--basic {
  background-color: var(--surface-pink);
  color: var(--primary);
}

.compare-table--marked .compare-table__col-head--systems {
  background-color: var(--surface-green);
  color: var(--primary);
}

.compare-table--marked .compare-table__cell,
.compare-table.compare-table--marked .compare-table__cell--basic,
.compare-table.compare-table--marked .compare-table__cell--systems {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-2);
  row-gap: 0;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.compare-table--marked .compare-table__cell--basic {
  color: var(--text-paragraph);
}

.compare-table.compare-table--marked .compare-table__cell--systems {
  color: var(--primary);
  font-weight: var(--weight-medium);
  background-color: var(--surface-green);
}

.compare-table--marked .compare-table__cell > span:not(.status-marker) {
  min-width: 0;
}

.compare-table--marked .status-marker {
  --status-marker-size: 1.375rem;
  width: var(--status-marker-size);
  height: var(--status-marker-size);
  margin: 0;
  line-height: 0;
}

.status-marker {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  border: var(--border-width) var(--border-style) transparent;
  border-radius: 50%;
}

.status-marker svg {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.status-marker--negative {
  background-color: var(--light);
  color: var(--text-muted);
}

.status-marker--positive {
  background-color: var(--white);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 20%, transparent);
}

@media (min-width: 40rem) {
  .compare-table.compare-table--marked .compare-table__head,
  .compare-table.compare-table--marked .compare-table__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .compare-table.compare-table--marked .compare-table__col-head--basic,
  .compare-table.compare-table--marked .compare-table__cell--basic {
    border-right: var(--border-default);
  }

  .compare-table.compare-table--marked .compare-table__cell--basic,
  .compare-table.compare-table--marked .compare-table__cell--systems {
    padding: var(--space-5) var(--space-6);
  }
}

@media (min-width: 48rem) {
  .compare-table.compare-table--marked .compare-table__col-head,
  .compare-table.compare-table--marked .compare-table__cell,
  .compare-table.compare-table--marked .compare-table__cell--basic,
  .compare-table.compare-table--marked .compare-table__cell--systems {
    padding: var(--space-6) var(--space-6_5);
  }
}

/* 3-column compare (hybrid / national) */
.compare-table--cols-3 {
  background-color: var(--surface-alt);
}

.compare-table--cols-3 .compare-table__head {
  background-color: var(--surface-alt);
}

.compare-table--cols-3 .compare-table__col-head--muted,
.compare-table--cols-3 .compare-table__cell--muted {
  color: var(--text-muted);
}

.compare-table--cols-3 .compare-table__col-head--systems {
  color: var(--secondary);
}

.compare-table--cols-3 .compare-table__cell--systems {
  display: flex;
  align-items: flex-start;
  gap: var(--stack-gap-sm);
  padding-top: var(--space-0);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.compare-table--cols-3 .compare-table__cell--muted {
  display: flex;
  align-items: flex-start;
  padding-bottom: var(--space-2);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .compare-table--cols-3 .compare-table__head,
  .compare-table--cols-3 .compare-table__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compare-table--cols-3 .compare-table__col-head:not(:last-child),
  .compare-table--cols-3 .compare-table__cell:not(:last-child) {
    border-right: var(--border-default);
  }

  .compare-table--cols-3 .compare-table__cell--muted {
    padding-bottom: var(--space-6);
  }

  .compare-table--cols-3 .compare-table__cell--systems {
    padding-top: var(--space-6);
  }
}

@media (min-width: 900px) {
  .compare-table--cols-3 .compare-table__head,
  .compare-table--cols-3 .compare-table__row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
  }
}

/* Problem query chips (hybrid / national) */
.query-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.query-list__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

.query-list__label {
  min-width: 5.75rem;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--accent);
}

.query-list__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--border-light);
}

.query-list__text {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.query-list--chat {
  margin-bottom: var(--space-0);
}

.query-list--chat .query-list__item {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
  gap: var(--space-2);
}

.query-list--chat .query-list__icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  color: var(--accent);
}

.query-list--chat .query-list__text {
  font-style: italic;
  font-weight: var(--weight-regular, 400);
  line-height: var(--leading-heading, 1.25);
  color: var(--text-secondary);
}

/* Timeline / baseline note */
.note-callout {
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-6);
  padding-left: calc(var(--space-6) - 0.1875rem);
  background-color: var(--surface-alt);
  border-left: 0.1875rem solid var(--accent);
  border-radius: var(--radius);
}

.note-callout p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-paragraph);
}

/* First-30 checklist panel */
.checklist-panel {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  overflow: hidden;
}

.checklist-panel__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-default);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.checklist-panel__item:last-child {
  border-bottom: none;
}

.checklist-panel__num {
  flex-shrink: 0;
  width: 1.5rem;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.checklist-panel__check {
  width: 1.125rem;
  height: 1.125rem;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--accent);
}

.layer-check {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  color: var(--accent);
}

/* Soft panels — reusable form / sidebar cards */
.soft-panel {
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 992px) {
  .soft-panel--sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

.check-stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  margin: var(--space-0) 0 var(--content-block-gap);
  padding: var(--space-0);
  list-style: none;
}

.check-stack__item {
  display: flex;
  align-items: flex-start;
  gap: var(--list-gap);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-paragraph);
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
  min-width: 0;
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  width: 100%;
}

@media (min-width: 576px) {
  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.choice-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  margin: var(--space-0);
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  background-color: var(--background);
  border: var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.choice-tile span {
  flex: 1;
  min-width: 0;
}

.choice-tile:hover {
  border-color: var(--border);
}

.choice-tile:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background-color: var(--surface-cyan);
}

.choice-tile input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.choice-tile--full {
  grid-column: 1 / -1;
}

/* Solution split — hub visual + definition card + navy goal panel */
.solution-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--gap-split);
}

.solution-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
}

.solution-visual__img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  object-fit: contain;
}

.solution-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  order: 0;
  min-width: 0;
}

.solution-content > .section-label,
.solution-content > .section-title {
  margin-bottom: 0;
}

.solution-definition {
  padding: var(--space-5) var(--space-6);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

.solution-definition p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.solution-definition p + p {
  margin-top: var(--space-4);
}

.solution-goal {
  padding: var(--space-6);
  color: var(--text-inverse);
  background-color: var(--primary);
  border-radius: var(--radius);
}

.solution-goal__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--accent);
}

.solution-goal__lead {
  margin-bottom: var(--space-5);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--text-inverse);
}

.solution-goal__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution-goal__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-inverse-strong);
}

.solution-goal__check {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: var(--space-1);
  flex-shrink: 0;
  color: var(--accent);
}

@media (min-width: 768px) {
  .solution-goal__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

@media (min-width: 900px) {
  .solution-split {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .solution-visual {
    order: 0;
  }

  .solution-visual__img {
    max-width: 100%;
  }
}

.icon-sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
}

.icon-md {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
}

.icon-xs {
  width: var(--icon-xs);
  height: var(--icon-xs);
  flex-shrink: 0;
}

/* ── Meters / status ── */
.progress-xs { height: 0.375rem; }

.progress {
  border-radius: var(--radius);
  background-color: var(--border-light);
}

.progress-bar--muted {
  background-color: color-mix(in srgb, var(--text-muted) 72%, var(--primary));
}

.progress-bar[data-value="19"] { width: 19%; }
.progress-bar[data-value="28"] { width: 28%; }
.progress-bar[data-value="41"] { width: 41%; }

.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* ── Quote / surfaces ── */
.pull-quote {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-4);
  border-left: 0.25rem solid var(--primary);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  font-style: normal;
  line-height: var(--leading-heading);
  color: var(--text-primary);
}

.pull-quote--accent {
  border-left-color: var(--accent);
}

.pull-quote--marked {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left-width: 0.1875rem;
  padding-left: var(--space-6);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.pull-quote--bare {
  border-left: 0;
  padding-left: 0;
  margin: 0;
}

.pull-quote--lg {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  max-width: 28rem;
}

.pull-quote__mark {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  color: var(--accent);
}

.pull-quote__text {
  margin: 0;
}

.surface-grid {
  background-color: var(--surface-grid-base);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--surface-grid-base), var(--surface-grid-fade));
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), 100% 100%;
}

.media-frame {
  overflow: hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	/*   border: var(--border-default);
  border-radius: var(--radius);
  background-color: var(--surface-teal); */
}

.media-frame img {
  display: block;
  max-width: 90%;
  height: auto;
  
}

/* ── Platform / dashboard helpers ── */
.platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-4_5);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--white);
  border-radius: var(--radius);
  white-space: nowrap;
}

.platform-badge--navy { background-color: var(--primary); }
.platform-badge--cyan { background-color: var(--accent); }

.tag-soft {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius);
}

.tag-soft--cyan {
  color: var(--primary);
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tag-soft--muted {
  color: var(--text-secondary);
  background-color: var(--light);
}

.snippet-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  background-color: var(--snippet-bg);
  border-radius: var(--radius);
}

/* Nested dashboard panels — match reference gray-200 / hover gray-300 */
.card .border.rounded-2,
.feature-card .border {
  border-color: var(--border) !important;
  transition: border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.card .border.rounded-2:hover {
  border-color: var(--border-light) !important;
  box-shadow: var(--shadow);
}

.snippet-bar--plain {
  padding: 0;
  background-color: transparent;
}

.rating-stars {
  color: var(--accent);
}

.status-panel {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  color: var(--white);
  background-color: var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
}

.status-panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.status-panel .status-label {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--text-inverse-soft);
}

.status-panel .status-value {
  font-size: clamp(1.5rem, 1.35rem + 0.5vw, 2rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverse);
}

.status-panel .status-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--accent-cyan);
}

/* Hero tracked-monthly dashboard — status badge overlaps corner */
.dashboard-card {
  position: relative;
  overflow: visible;
  margin-bottom: var(--space-5);
}

.dashboard-card.card,
.dashboard-card.feature-card {
  overflow: visible;
}

.dashboard-card.feature-card:hover {
  transform: none;
}

.dashboard-card__body {
  padding-bottom: var(--space-6);
}

.dashboard-card__status {
  position: absolute;
  right: var(--space-2);
  bottom: calc(var(--space-5) * -1);
  z-index: 3;
  transform: none;
}

/* ── Shared section surfaces ── */
.surface-grid--muted {
  background-color: var(--surface-alt);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.panel-grid {
  padding: var(--card-padding);
  background-color: var(--white);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel-grid__card {
  box-shadow: none;
}

.panel-grid__card.feature-card:hover {
  transform: none;
  box-shadow: none;
}

.panel-grid__card .card-body {
  padding: var(--space-4);
}

.icon-box--sm {
  --icon-box-size: var(--icon-box-size-sm);
  --icon-box-glyph: var(--icon-box-glyph-sm);
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  min-width: var(--icon-box-size);
  min-height: var(--icon-box-size);
  max-width: var(--icon-box-size);
  max-height: var(--icon-box-size);
}

/* Card icons — uniform 48×48 container, 24×24 glyph */

:is(
  .feature-card,
  .info-card,
  .metric-card,
  .measure-card,
  .icon-row-card,
  .layer-card,
  .metric-tile,
  .timeline-card,
  .soft-panel,
  .panel-grid__card,
  .process-steps
) .icon-box:not(.process-note__icon) {
  --icon-box-size: 3rem;
  --icon-box-glyph: 1.5rem;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  min-width: var(--icon-box-size);
  min-height: var(--icon-box-size);
  max-width: var(--icon-box-size);
  max-height: var(--icon-box-size);
}

:is(
  .feature-card,
  .info-card,
  .metric-card,
  .measure-card,
  .icon-row-card,
  .layer-card,
  .metric-tile,
  .timeline-card,
  .soft-panel,
  .panel-grid__card,
  .process-steps
) .icon-box {
  margin-bottom: 0;
}

.feature-card > .icon-box,
.feature-card .card-body > .icon-box:first-child,
.soft-panel > .icon-box:first-child,
.measure-card .card-body > .icon-box:first-child {
  margin-bottom: var(--card-gap);
}

.metric-card .icon-box,
.panel-grid__card .icon-box,
.icon-row-card .icon-box,
.layer-card__head .icon-box {
  margin-bottom: 0;
}

.surface-bar {
  display: block;
  width: 55%;
  max-width: 6.5rem;
  height: 0.5rem;
  background-color: var(--border-light);
  border-radius: var(--radius);
}

.banner-gradient {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--white);
  background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 42%, var(--accent) 100%);
  border-radius: var(--radius);
}

.banner-gradient__copy {
  min-width: 0;
}

.banner-gradient .banner-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-inverse-soft);
}

.banner-gradient__title {
  display: block;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--text-inverse);
}

.banner-gradient__badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color: var(--text-inverse);
  background-color: var(--primary-dark);
  border-radius: var(--radius);
  white-space: nowrap;
}

/* Accent stripe cards — solid right edge + soft themed icon box */
.card-kicker {
  margin-bottom: var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.card-title:has(+ .card-kicker) {
  margin-bottom: var(--space-1);
}

.feature-card.feature-card--accent-green:not(.bg-primary):not(.text-bg-primary),
.feature-card.feature-card--accent-green:not(.bg-primary):not(.text-bg-primary):hover {
  border-right: 0.1875rem solid var(--success) !important;
}

.feature-card.feature-card--accent-orange:not(.bg-primary):not(.text-bg-primary),
.feature-card.feature-card--accent-orange:not(.bg-primary):not(.text-bg-primary):hover {
  border-right: 0.1875rem solid var(--warning) !important;
}

.feature-card.feature-card--accent-cyan:not(.bg-primary):not(.text-bg-primary),
.feature-card.feature-card--accent-cyan:not(.bg-primary):not(.text-bg-primary):hover {
  border-right: 0.1875rem solid var(--primary) !important;
}

.feature-card--accent-green .icon-box {
  background-color: var(--surface-green);
  color: var(--success);
}

.feature-card--accent-orange .icon-box {
  background-color: var(--surface-orange);
  color: var(--warning);
}

.feature-card--accent-cyan .icon-box {
  background-color: var(--accent-blue);
  color: var(--primary);
}

/* Method steps — open layout (no card chrome) */
.method-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .method-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.method-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}

.method-step__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.method-step__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border: var(--border-width) var(--border-style) var(--border-light);
  border-radius: var(--radius);
}

.method-step__line {
  width: 1px;
  flex: 1;
  min-height: 8.75rem;
  margin-top: var(--space-2);
  background-color: var(--border-light);
}

.method-step__body { padding-top: var(--space-1); }

/* Process rail — horizontal connected steps (reusable) */
.process-rail {
  --process-rail-icon: 3rem;
  margin-bottom: var(--section-header-space);
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  overflow-x: auto;
}

.process-rail__list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 36rem;
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.process-rail__item {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  text-align: center;
}

.process-rail__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--process-rail-icon) / 2);
  left: calc(50% + var(--process-rail-icon) / 2);
  width: calc(100% - var(--process-rail-icon));
  height: 1px;
  background-color: var(--border);
  pointer-events: none;
}

.process-rail .icon-box {
  --icon-box-size: var(--process-rail-icon);
  --icon-box-glyph: 1.5rem;
  position: relative;
  z-index: 1;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  min-width: var(--icon-box-size);
  min-height: var(--icon-box-size);
  max-width: var(--icon-box-size);
  max-height: var(--icon-box-size);
  margin-bottom: var(--space-0);
}

.process-rail__step {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--text-muted);
}

.process-rail__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.process-rail--enhanced {
  box-shadow: var(--shadow);
}

.process-rail--enhanced .process-rail__name {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}

.process-rail--enhanced .icon-box--round {
  border: var(--border-width) var(--border-style) transparent;
}

.process-rail--enhanced .icon-box--cyan.icon-box--round {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.process-rail--enhanced .icon-box--teal.icon-box--round {
  border-color: color-mix(in srgb, var(--success) 22%, transparent);
}

.process-rail--enhanced .icon-box--orange.icon-box--round {
  border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}

@media (max-width: 991.98px) {
  .process-rail {
    margin-inline: 0;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    overflow-x: visible;
  }

  .process-rail__list {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: 0;
  }

  .process-rail__item {
    display: grid;
    grid-template-columns: var(--process-rail-icon) minmax(0, 1fr);
    grid-template-rows: auto auto;
    flex: none;
    align-items: start;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding-bottom: var(--space-4);
    text-align: left;
  }

  .process-rail__item:last-child {
    padding-bottom: 0;
  }

  .process-rail__item .icon-box {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: center;
  }

  .process-rail__step {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .process-rail__name {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    max-width: none;
  }

  .process-rail__item:not(:last-child)::after {
    top: var(--process-rail-icon);
    left: calc(var(--process-rail-icon) / 2);
    width: 1px;
    height: calc(100% - var(--process-rail-icon));
    transform: translateX(-50%);
  }
}

.process-steps {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--content-block-gap);
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .process-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .process-steps > :nth-child(-n+3) {
    grid-column: span 2;
  }

  .process-steps > :nth-child(4) {
    grid-column: 2 / span 2;
  }

  .process-steps > :nth-child(5) {
    grid-column: 4 / span 2;
  }
}

.process-step-card {
  transition: border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.process-step-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}

.process-step-card--highlight {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background-color: color-mix(in srgb, var(--accent) 5%, var(--white));
}

.process-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: none;
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
}

.process-note__icon {
  flex-shrink: 0;
}

.process-note__text {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-paragraph);
}

.icon-box--outline {
  background-color: var(--white);
  color: var(--text-primary);
  border: var(--border-width) var(--border-style) var(--border);
}

.icon-box--outline-accent {
  background-color: var(--white);
  color: var(--accent);
  border: var(--border-width) var(--border-style) var(--border-light);
}

.icon-box--outline-warning {
  background-color: var(--white);
  color: var(--accent-orange);
  border: var(--border-width) var(--border-style) var(--border-light);
}

.icon-box--outline-success {
  background-color: var(--white);
  color: var(--success);
  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--success) 15%, transparent);
}

.card-num {
  font-family: var(--font-family-base);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--border);
  font-variant-numeric: tabular-nums;
}

.card-num--lg {
  font-size: var(--text-3xl);
}

.card-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-default);
}

.card-foot p {
  margin: var(--space-0);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.card-foot strong {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.soft-panel--flat {
  box-shadow: none;
}

.soft-panel--muted {
  background-color: var(--background);
  box-shadow: none;
}

.soft-panel .stats-value {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.illustration-md {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin-inline: auto;
}

@media (min-width: 1200px) {
  .process-rail__list {
    min-width: 0;
  }
}

/* Monitor / status list */
.monitor-card {
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.monitor-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) var(--border-style) var(--border);
}

.monitor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius);
}

.monitor-row + .monitor-row { margin-top: var(--space-2); }

.tag-soft--success {
  color: var(--success);
  background-color: color-mix(in srgb, var(--success) 12%, transparent);
}

.tag-soft--warning {
  color: var(--warning);
  background-color: color-mix(in srgb, var(--warning) 12%, transparent);
}

.tag-soft--danger {
  color: var(--danger);
  background-color: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* Audit sample panel (First 30 Days) */
.audit-sample.feature-card:hover {
  transform: none;
}

.audit-sample__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background-color: var(--white);
  border-bottom: var(--border-default);
}

.audit-sample__title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.audit-sample__meta {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.audit-panel {
  padding: var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius);
}

.audit-panel--cyan {
  background-color: var(--surface-card-cyan);
}

.audit-panel--peach {
  background-color: var(--surface-card-peach);
}

.score-ring {
  --score: 0;
  --ring-size: 4.25rem;
  --ring-thickness: 0.4rem;
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--score) * 1%), var(--border-light) 0);
}

.score-ring--62 {
  --score: 62;
}

.score-ring::before {
  content: "";
  position: absolute;
  inset: var(--ring-thickness);
  border-radius: 50%;
  background-color: var(--surface-card-cyan);
}

.score-ring__value {
  position: relative;
  z-index: 1;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--text-primary);
}

.score-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--success);
}

.score-delta svg {
  width: 0.85rem;
  height: 0.85rem;
}

.share-row + .share-row {
  margin-top: var(--space-3);
}

.share-row__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.source-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

.source-chip--active {
  color: var(--text-inverse);
  background-color: var(--accent);
  border-color: var(--accent);
}

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

.action-row + .action-row {
  margin-top: var(--space-3);
}

.action-row__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-inverse);
  background-color: var(--accent);
  border-radius: var(--radius);
}

.action-row__check svg {
  width: 0.7rem;
  height: 0.7rem;
}

.action-row__text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* Timeline tiles */
.timeline-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius);
}

.timeline-card--cyan {
  background-color: var(--surface-card-cyan);
}

.timeline-card--peach {
  background-color: var(--surface-card-peach);
}

.timeline-card--neutral {
  background-color: var(--surface-card-neutral);
}

.icon-box--round {
  border-radius: 50%;
  border: var(--border-width) var(--border-style) transparent;
}

.icon-box--outline.icon-box--round {
  border-color: var(--border);
}

.timeline-card--cyan .icon-box--round {
  color: var(--accent);
  background-color: var(--surface-cyan);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.timeline-card--peach .icon-box--round {
  color: var(--warning);
  background-color: var(--surface-orange);
  border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}

.timeline-card--neutral .icon-box--round {
  color: var(--success);
  background-color: var(--surface-green);
  border-color: color-mix(in srgb, var(--success) 22%, transparent);
}

/* Metric tiles */
.metric-card {
  display: grid;
  grid-template-columns: var(--icon-box-size) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: center;
  height: 100%;
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

/* Centered stat tiles (no icon) — About "by the numbers" */
.metric-card:not(:has(.icon-box)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.metric-card:not(:has(.icon-box)) .stats-value {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
}

.metric-card .icon-box {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.metric-card .card-title {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
  align-self: center;
}

.metric-card .stats-value {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.metric-card .metric-card__text {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-bottom: 0;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

/* FAQ section — uniform across all pages
   Structure:
   .section.faq-section > .container > .row > .col-*
     > .section-header (+ .section-label / .section-title / .section-intro)
     > .faq-list
       > .faq-card > .faq-question + .faq-answer
*/
.faq-section .section-header {
  max-width: var(--faq-inner-max);
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--type-gap);
  max-width: var(--faq-inner-max);
  width: 100%;
  margin-inline: auto;
}

.faq-card {
  padding: var(--card-padding);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  transition: border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.faq-card:hover {
  border-color: var(--accent);
}

.faq-question {
  margin-bottom: var(--type-gap-sm);
  font-size: var(--text-faq-question);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.faq-answer,
.faq-card > p {
  margin-bottom: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
  max-width: none;
}

.faq-card .faq-question {
  margin-bottom: var(--type-gap-sm);
}

/* Inset CTA banner — uniform across all pages
   Structure:
   .section.cta-banner > .container > .cta-banner__panel > .cta-banner__content
     > .cta-banner__eyebrow (+ .cta-banner__eyebrow-dot)
     > .cta-banner__title (+ .cta-banner__title-accent)
     > .cta-banner__subtitle (optional stacked)
     > .cta-banner__actions > .btn.cta-banner__btn (+ .btn-cta-primary | .btn-outline-light)
     > .cta-banner__note (optional)
*/
.cta-banner {
  background-color: var(--white);
}

.cta-banner__panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--text-inverse);
  background-color: var(--primary-dark);
  background-image:
    linear-gradient(var(--surface-inverse-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-inverse-soft) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  border: var(--border-width) var(--border-style) var(--border-inverse-faint);
  border-radius: var(--radius);
}

@media (min-width: 768px) {
  .cta-banner__panel {
    padding: var(--space-9) var(--space-8);
  }
}

.cta-banner__panel::before,
.cta-banner__panel::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cta-banner__panel::before {
  top: -30%;
  right: -20%;
  width: min(30rem, 80vw);
  height: min(30rem, 80vw);
  background: radial-gradient(circle, var(--glow-accent) 0%, transparent 68%);
}

.cta-banner__panel::after {
  bottom: -30%;
  left: -15%;
  width: min(22.5rem, 70vw);
  height: min(22.5rem, 70vw);
  background: radial-gradient(circle, var(--glow-accent-soft) 0%, transparent 68%);
}

.cta-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 50rem;
  margin-inline: auto;
}

.cta-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-small);
  text-transform: uppercase;
  color: var(--accent-cyan);
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--radius);
}

.cta-banner__eyebrow-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--accent);
}

.cta-banner__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverse);
}

.cta-banner__title-accent {
  color: var(--accent);
}

.cta-banner__subtitle {
  margin-bottom: var(--type-gap-lg);
  max-width: 45rem;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-inverse-strong);
}

.cta-banner__subtitle + .cta-banner__subtitle {
  margin-top: calc(var(--space-3) * -1);
}

.cta-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--stack-gap-sm);
  width: 100%;
  max-width: 28rem;
  margin-bottom: var(--type-gap);
}

.cta-banner__actions:last-child {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .cta-banner__actions {
    flex-direction: row;
    align-items: center;
    max-width: none;
    width: auto;
  }
}

.cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stack-gap-sm);
  min-width: 12rem;
}

.cta-banner__btn-icon,
.cta-banner__btn .icon-sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
}

.cta-banner .btn-cta-primary {
  color: var(--text-inverse);
  background-color: var(--navy-hover);
  border-color: var(--border-inverse-strong);
}

.cta-banner .btn-cta-primary:hover {
  color: var(--text-inverse);
  background-color: var(--secondary);
  border-color: var(--border-inverse-hover);
}

.cta-banner__note {
  margin-bottom: 0;
  max-width: 36rem;
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--text-inverse-faint);
}

.card-img-top {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* Soften default card chrome to match reference */
.feature-card,
.info-card {
  box-shadow: var(--shadow);
}

.feature-card:hover,
.info-card:hover {
  box-shadow: var(--shadow-hover);
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  left: -100vmax;
  z-index: 1080;
  padding: var(--space-3) var(--space-4);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
}

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

/* ── Site footer (shared chrome) ── */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-8);
  color: var(--text-inverse-muted);
  background-color: var(--footer-bg);
  background-image:
    linear-gradient(180deg, var(--footer-bg) 0%, var(--footer-dark) 100%),
    linear-gradient(var(--grid-line-inverse) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-inverse) 1px, transparent 1px);
  background-size:
    100% 100%,
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size);
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(45rem, 140vw);
  height: min(45rem, 140vw);
  pointer-events: none;
  background: radial-gradient(circle, var(--glow-cyan) 0%, transparent 65%);
  transform: translate(-50%, -50%);
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--footer-gap);
  align-items: start;
  padding-bottom: var(--space-7);
}

.site-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) var(--border-style) var(--border-inverse);
}

.site-footer__logo-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--space-3) var(--space-5);
  background-color: var(--white);
  border-radius: var(--radius);
}

.site-footer__logo {
  display: block;
  width: auto;
  height: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

.site-footer__desc {
  max-width: 36rem;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-inverse-muted);
}

.site-footer__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-inverse);
}

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

.site-footer__links li {
  border-bottom: var(--border-width) var(--border-style) var(--border-inverse-faint);
}

.site-footer__links li:last-child {
  border-bottom: none;
}

.site-footer__link {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-inverse-body);
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer__link:hover {
  color: var(--text-inverse);
}

.site-footer__column--contact {
  grid-column: 1 / -1;
  padding: var(--space-5);
  background-color: var(--surface-inverse-soft);
  border: var(--border-width) var(--border-style) var(--border-inverse-soft);
  border-radius: var(--radius);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-inverse-body);
}

.site-footer__contact-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--icon-inverse);
}

.site-footer__contact-item a {
  color: var(--text-inverse-body);
  word-break: break-word;
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer__contact-item a:hover {
  color: var(--text-inverse);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: var(--border-width) var(--border-style) var(--border-inverse);
  text-align: center;
}

.site-footer__copyright {
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--text-inverse-dim);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__legal-link {
  font-size: var(--text-caption);
  color: var(--text-inverse-dim);
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer__legal-link:hover {
  color: var(--text-inverse);
}

.site-footer__legal-link + .site-footer__legal-link {
  position: relative;
  padding-left: var(--space-4);
}

.site-footer__legal-link + .site-footer__legal-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 0.75rem;
  background-color: var(--border-inverse-hover);
  transform: translateY(-50%);
}

@media (min-width: 640px) {
  .site-footer__top {
    gap: var(--space-6) var(--space-8);
  }

  .site-footer__column--contact {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .site-footer__column--contact .site-footer__title {
    margin-bottom: 0;
    padding-top: var(--space-1);
  }

  .site-footer__column--contact .site-footer__contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-8);
  }

  .site-footer__column--contact .site-footer__contact-item:last-child {
    grid-column: 1 / -1;
  }

  .site-footer__links li {
    border-bottom: none;
  }

  .site-footer__link {
    padding: var(--space-1) 0;
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .site-footer__legal {
    justify-content: flex-end;
  }
}

@media (min-width: 1100px) {
  .site-footer__top {
    grid-template-columns: 1.35fr 1fr 1fr 1fr 1.25fr;
    gap: var(--space-6);
  }

  .site-footer__brand {
    grid-column: auto;
    padding-bottom: 0;
    border-bottom: none;
  }

  .site-footer__column--contact {
    grid-column: auto;
    display: block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }

  .site-footer__column--contact .site-footer__title {
    margin-bottom: var(--space-4);
    padding-top: 0;
  }

  .site-footer__column--contact .site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .site-footer__column--contact .site-footer__contact-item:last-child {
    grid-column: auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   Content hierarchy system (Tailwind Plus–inspired)
   Eyebrow → Heading → Description → CTA → Secondary info
   Bootstrap first; these utilities fill gaps Bootstrap cannot.
   ═══════════════════════════════════════════════════════════ */

/* Section flow */


.section-header .section-intro:last-child {
  margin-bottom: 0;
}

/* Content width / stack */

.content-stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--content-block-gap);
  min-width: 0;
}

.content-stack-lg > .pull-quote {
  margin-top: 0;
}

.content-block {
  display: flex;
  flex-direction: column;
  gap: var(--type-gap);
  min-width: 0;
}

.content-block > .section-text,
.content-block > p,
.content-block > ul,
.content-block > ol,
.content-block > figure,
.content-block > blockquote {
  margin-bottom: 0;
}

/* Prose — long-form body copy (legal, policy, article-style sections) */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--type-gap);
  max-width: var(--measure-prose);
  min-width: 0;
}

.prose > * {
  margin-top: 0;
  margin-bottom: 0;
}

.prose > :is(h2, h3) {
  margin-top: var(--space-2);
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose .section-text {
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
}

.prose :is(h2) {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.prose :is(h3) {
  font-size: var(--text-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
}

.hero-section__content > .prose {
  margin-top: var(--type-gap);
}

/* Split-column body copy — stacked paragraphs without manual mb-* utilities */
.body-copy {
  display: flex;
  flex-direction: column;
  gap: var(--type-gap);
  min-width: 0;
}

.body-copy > .section-text,
.body-copy > p {
  margin-bottom: 0;
}

/* Panel / card body text — consistent size and line height */
.soft-panel p:not(.card-title):not(.section-label):not(.faq-question),
.info-card p:not(.card-title) {
  margin-bottom: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
}

/* CTA hierarchy — primary / secondary / text link */
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stack-gap-sm);
}

.button-group .btn-primary,
.button-group .btn-cta-primary {
  order: 0;
}

.button-group .btn-outline-primary,
.button-group .btn-outline-light,
.button-group .btn-outline {
  order: 1;
}


.button-group .btn-link {
  order: 2;
  padding-inline: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-button);
  color: var(--accent);
  text-decoration: none;
}


.button-group .btn-link:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/* Card internal hierarchy: icon → title → description → action */

.feature-card .card-title + .card-description,
.feature-card .card-title + .section-text,
.feature-card .card-title + p,
.info-card .card-title + .card-description,
.info-card .card-title + .section-text,
.info-card .card-title + p,
.feature-card--compact .card-title + p {
  margin-top: 0;
}


.feature-card p:not(.card-title):not(.measure-card__badge),
.info-card p:not(.card-title),
.feature-card--compact p:not(.card-title),
.feature-card--compact .section-text,
.feature-card--compact .card-description,
.card-description {
  margin-bottom: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
}

/* Reading flow helper — eyebrow already .section-label / .label-pill */
.reading-flow > .section-label,
.reading-flow > .label-pill {
  margin-bottom: var(--space-3);
}

.reading-flow > :is(h1, h2, h3, .section-title, .display-title, .page-title, .card-title) {
  margin-bottom: var(--type-gap);
}

.reading-flow > :is( .section-intro, .section-text, .hero-section__subtitle, .card-description) {
  margin-bottom: var(--type-gap) !important;
}

.reading-flow > :is( .section-intro, .section-text, .hero-section__subtitle, .card-description):last-child {
  margin-bottom: 0 !important;
}

.reading-flow > :is(.button-group, .hero-section__actions, .cta-banner__actions) {
  margin-bottom: var(--space-3);
}

.reading-flow > :last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   Spacing normalization — uniform content rhythm site-wide
   ═══════════════════════════════════════════════════════════ */

/* Bootstrap grid gutters → design tokens */
.feature-grid,
.plan-grid {
  --bs-gutter-x: var(--gap-grid);
  --bs-gutter-y: var(--gap-grid);
}

.row.g-3 {
  --bs-gutter-x: var(--gap-grid);
  --bs-gutter-y: var(--gap-grid);
}

.row.g-4 {
  --bs-gutter-x: var(--gap-grid-md);
  --bs-gutter-y: var(--gap-grid-md);
}


.row.g-lg-5 {
  --bs-gutter-x: var(--gap-grid-lg);
  --bs-gutter-y: var(--gap-grid-lg);
}

/* Section interior — lead copy → content blocks */
.section > .container > :is(.section-text, .section-intro, p.section-text):first-child {
  margin-bottom: var(--section-header-space);
}

.section > .container > .section-header + :is(.small, p.small) {
  margin-top: 0;
  margin-bottom: var(--type-gap) !important;
}

/* Normalize ad-hoc row / card tail spacing inside sections */
.section > .container > .row.mb-5,
.section > .container > .row.mb-4,
.section > .container > :is(.feature-card, .card)[class*="mb-"] {
  margin-bottom: var(--section-header-space) !important;
}

.section > .container > .row + .row:not([class*="mt-"]) {
  margin-top: var(--content-block-gap);
}

.section > .container > .row[class*="mb-"] + .row {
  margin-top: 0;
}

.section > .container > .row + :is(.feature-card, .card):not([class*="mt-"]) {
  margin-top: var(--content-block-gap);
}

.section > .container > :is(.feature-card, .row) + .btn,
.section > .container > :is(.feature-card, .row) + .button-group {
  margin-top: var(--type-gap-lg);
}

/* Column intros without .section-header wrapper */
[class*="col"] > .section-label:first-child {
  margin-bottom: var(--space-3);
}

[class*="col"] > .section-label:first-child + .section-title,
[class*="col"] > .section-title:first-child {
  margin-bottom: var(--type-gap);
}

[class*="col"] > .section-title.mb-0 {
  margin-bottom: var(--type-gap) !important;
}

/* Stack wrappers — gap only, no stacked margins */

.content-stack-lg > *,
.body-copy > * {
  margin-bottom: 0;
}


.content-stack-lg > :is(.section-text, .section-intro, p) {
  margin-bottom: 0 !important;
}

/* Soft panels in flex columns */
.soft-panel:is(.d-flex, .flex-column, [class*="flex-column"]) {
  gap: var(--card-gap);
}

.soft-panel:is(.d-flex, .flex-column, [class*="flex-column"]) > * {
  margin-bottom: 0 !important;
}

/* Card title → body spacing */
:is(.feature-card, .info-card, .soft-panel, .faq-card) .card-title:not(:last-child):not(.card-title--sm) {
  margin-bottom: var(--space-2);
}

.metric-card .card-title {
  margin-bottom: 0;
}

/* Forms — uniform field rhythm */
.section form {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}

.section form > .mb-3,
.section form > .mb-4,
.section form > .row {
  margin-bottom: 0 !important;
}

.section form .form-label {
  margin-bottom: var(--form-field-gap);
}

/* Contact / sidebar blocks with label + value pairs */
.feature-card .card-body:has(.section-label) {
  gap: var(--type-gap-lg);
}

.feature-card .card-body:has(.section-label) .section-label {
  margin-bottom: var(--space-1);
}

.feature-card .card-body:has(.section-label) > div {
  margin-bottom: 0 !important;
}

/* Split layouts — header in column, no double gap */
.section-header.mb-0 {
  margin-bottom: 0 !important;
}

/* Shadow helpers */
.card-shadow {
  box-shadow: var(--shadow);
}

/* Images */
.image-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.image-contain {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.media-frame--illustration {
  padding: var(--space-4);
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
}

.media-frame--illustration .image-contain,
.media-frame--illustration img:not(.image-cover) {
  object-fit: contain;
  height: auto;
}

.engagement-visual {
  width: 100%;
}

.feature-card .card-img-top {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.media-frame--shadow {
  box-shadow: var(--shadow);
}

.media-frame--ratio-1x1 {
  aspect-ratio: 1 / 1;
}

.media-frame--ratio-1x1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Buttons — aliases */
.btn-outline {
  --bs-btn-color: var(--primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 14, 45, 83;
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary);
}


.btn:disabled {
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}



/* Contrast cards — Not this / This instead */
.contrast-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius);
}

.contrast-card--not {
  background-color: var(--white);
}

.contrast-card--instead {
  color: var(--text-inverse);
  background-color: var(--primary);
  border-color: var(--primary);
}

.contrast-card__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-tight);
}

.contrast-card__label--not {
  color: var(--warning);
}

.contrast-card__label--instead {
  color: var(--accent);
}

.contrast-card__label-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.contrast-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contrast-card__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.contrast-card--not .contrast-card__list > li {
  color: var(--text-secondary);
}

.contrast-card--instead .contrast-card__list > li {
  color: var(--text-inverse-strong);
}

.contrast-card__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.contrast-card--not .contrast-card__icon {
  color: var(--warning);
}

.contrast-card--instead .contrast-card__icon {
  color: var(--accent);
}

.contrast-card__text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.contrast-card--not .contrast-card__text {
  color: var(--text-secondary);
}

.contrast-card--instead .contrast-card__text {
  color: var(--text-inverse-strong);
}

.contrast-card__quote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 0.25rem solid currentColor;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  font-style: normal;
  line-height: var(--leading-heading);
}



/* Scroll / entrance fades — pair with .is-visible (js/main.js) */
.reveal {
  --reveal-delay: 0ms;
  --reveal-distance: 1.25rem;
  opacity: 0;
  transition:
    opacity var(--duration-reveal) var(--ease-out) var(--reveal-delay),
    transform var(--duration-reveal) var(--ease-out) var(--reveal-delay);
  will-change: opacity, transform;
}

.reveal--up,
.reveal {
  transform: translateY(var(--reveal-distance));
}


.reveal--left {
  transform: translateX(calc(var(--reveal-distance) * -1));
}

.reveal--right {
  transform: translateX(var(--reveal-distance));
}

.reveal--scale {
  transform: scale(0.97);
}

.reveal.is-visible,
.reveal--scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero entrance (applied by js/main.js) */
.hero-animate {
  --hero-delay: 0ms;
  opacity: 0;
  transform: translateY(1.25rem);
  animation: hero-enter var(--duration-hero) var(--ease-out) var(--hero-delay) forwards;
}

.hero-animate--right {
  transform: translateX(1.5rem);
  animation-name: hero-enter-right;
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-enter-right {
  from {
    opacity: 0;
    transform: translateX(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-float {
  animation: float-soft 6s var(--ease-in-out, ease-in-out) infinite;
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.375rem); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--up,
  .reveal--left,
  .reveal--right,
  .btn:hover,
  .hero-animate,
  .animate-float {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* Table polish */
.table > :not(caption) > * > * {
  padding: var(--space-3) var(--space-4);
}

.table thead th {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  background-color: var(--surface-alt);
  border-bottom-color: var(--border);
}

.post-detail__image{
	margin-bottom:30px;
}
.post-detail__image img{
	border-radius:8px;
}
/* ── Track switcher (tabbed plan tracks) ── */
.track-switcher {
  background-color: var(--surface-alt);
}

.track-switcher__header {
  max-width: var(--faq-inner-max);
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.track-switcher__header .section-text--muted {
  margin-inline: auto;
}

.track-switcher__tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--content-block-gap);
}

.track-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 42rem;
  padding: var(--space-1);
  border: var(--border-default);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .track-tabs {
    width: auto;
    max-width: none;
  }
}

.track-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family-base);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-button);
  color: var(--text-secondary);
  background-color: transparent;
  border: var(--border-width) var(--border-style) transparent;
  border-radius: calc(var(--radius) - 0.125rem);
  cursor: pointer;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

.track-tab svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.track-tab:hover {
  color: var(--primary);
  background-color: var(--surface-alt);
}

.track-tab.is-active,
.track-tab.is-active:hover {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.track-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.track-panels {
  display: flex;
  flex-direction: column;
  gap: var(--content-block-gap);
  width: 100%;
  margin-inline: auto;
}

.track-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .track-panel {
    padding: var(--space-6);
  }
}

.track-panel.is-active {
  display: flex;
}

.track-panel[hidden] {
  display: none !important;
}

.track-desc {
  margin: 0;
  max-width: var(--measure-prose);
  margin-inline: auto;
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  text-align: center;
  color: var(--text-paragraph);
}

.plan-grid {
  --bs-gutter-y: var(--space-4);
}

/* ── Plan cards (Foundation / Scale) ── */
.plan-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  border-radius: var(--radius);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

@media (min-width: 768px) {
  .plan-card {
    padding: var(--space-6);
  }
}

.plan-card--light {
  background-color: var(--white);
  border: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.plan-card--light:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}

.plan-card--dark {
  position: relative;
  background-color: var(--primary);
  border: var(--border-width) var(--border-style) var(--primary);
  color: var(--white);
  box-shadow: var(--shadow);
}

.plan-card--dark:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-0.125rem);
}

.plan-card__tier {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--label-text);
  background-color: var(--label-bg);
  border: var(--border-width) var(--border-style) var(--label-border);
  border-radius: var(--radius-sm);
}

.plan-card--dark .plan-card__tier {
  color: var(--text-inverse-soft);
  background-color: color-mix(in srgb, var(--white) 12%, transparent);
  border-color: color-mix(in srgb, var(--white) 18%, transparent);
}

.plan-card__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-small);
  color: var(--primary);
  background-color: var(--accent);
  border-radius: var(--radius-sm);
}

.plan-card__name {
  margin: var(--space-3) 0 0;
  font-family: var(--font-family-base);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.plan-card--dark .plan-card__name {
  color: var(--white);
}

.plan-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--text-support);
  border-bottom: var(--border-default);
}

.plan-card--dark .plan-card__price {
  color: var(--text-inverse-muted);
  border-bottom-color: color-mix(in srgb, var(--white) 16%, transparent);
}

.plan-card__amount {
  font-family: var(--font-family-base);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--primary);
}

.plan-card--dark .plan-card__amount {
  color: var(--white);
}

.plan-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-4);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-paragraph);
  background-color: var(--surface-alt);
  border-radius: var(--radius-sm);
}

.plan-card--dark .plan-card__meta {
  color: var(--text-inverse-soft);
  background-color: color-mix(in srgb, var(--white) 8%, transparent);
}

.plan-card__meta-accent {
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
}

.plan-card--dark .plan-card__meta-accent {
  color: var(--accent);
}

.plan-card__section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-default);
}

.plan-card--dark .plan-card__section {
  border-top-color: color-mix(in srgb, var(--white) 14%, transparent);
}

.plan-card--dark .eyebrow-label {
  color: var(--accent);
}

.track-switcher .callout {
  width: 100%;
  margin-inline: auto;
  background-color: var(--surface-alt);
  border: var(--border-default);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: none;
}

.track-switcher .callout--sm .callout__text {
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

/* ── Spec list (label / value rows) ── */
.spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.spec-list__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.spec-list__row dt {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.plan-card--dark .spec-list__row dt {
  color: var(--text-inverse-strong);
}

.spec-list__row dd {
  flex: 0 0 auto;
  max-width: 52%;
  margin: 0;
  text-align: right;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.plan-card--dark .spec-list__row dd {
  color: var(--white);
}

.plan-card .spec-list__row {
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) var(--border-style) var(--border);
}

.plan-card .spec-list__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.plan-card--dark .spec-list__row {
  border-bottom-color: color-mix(in srgb, var(--white) 12%, transparent);
}

/* ── Inverse includes panel ── */
.includes-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--primary);
  border: var(--border-width) var(--border-style) var(--primary);
  border-radius: var(--radius);
}

.includes-panel .eyebrow-label {
  margin-bottom: 0;
  color: var(--accent);
}

.includes-panel .check-stack__item {
  color: var(--white);
}

.includes-panel .layer-check {
  color: var(--accent);
}

/* ── Note stack (sticky header + stacked cards) ── */
.note-stack {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--section-header-space);
}

.note-stack__cards {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
  min-width: 0;
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius);
}

.note-card--light {
  background-color: var(--white);
  border: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.note-card--dark {
  background-color: var(--primary);
  border: var(--border-width) var(--border-style) var(--primary);
}

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

.note-card__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
}

.note-card__label {
  font-family: var(--font-family-base);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--label-text);
}

.note-card--dark .note-card__label {
  color: var(--accent);
}

.note-card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.note-card--dark .note-card__text {
  color: var(--text-inverse-strong);
}

@media (min-width: 56.25rem) {
  .note-stack {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--gap-grid);
    align-items: start;
  }

  .note-stack__header {
    position: sticky;
    top: calc(var(--header-height, 4.5rem) + var(--space-5));
  }
}

.callout--accent {
  border-left-color: var(--accent);
}

.callout--sm .callout__label {
  margin-bottom: var(--space-1);
  color: var(--label-text);
  letter-spacing: var(--tracking-wide);
}

.callout--sm .callout__text {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-paragraph);
}

.section-text--muted {
  max-width: var(--measure-narrow);
  margin-bottom: 0;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-support);
}

/* ═══════════════════════════════════════════════════════════
   Reusable composition patterns (Bootstrap-first)
   ═══════════════════════════════════════════════════════════ */

.eyebrow-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-family-base);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-small);
  text-transform: uppercase;
  color: var(--label-text);
}

.icon-row-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.5rem;
  height: 100%;
  padding: var(--space-4) var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

.icon-row-card__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--primary);
}

.layer-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
}

.layer-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

.layer-card__side,
.layer-card__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.layer-card__side { gap: var(--space-4); }
.layer-card__main { gap: var(--space-5); }

.layer-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.layer-card__head .icon-box {
  margin-bottom: 0;
}

.layer-card__head .card-num {
  color: var(--border-light);
}

.layer-card__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--primary);
}

.layer-card__summary {
  margin: 0;
  max-width: 17.5rem;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-paragraph);
}

.layer-card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-paragraph);
}

/* Includes block — CSS grid (not Bootstrap row) so gutters don't bleed */
.layer-card__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.layer-card__includes .eyebrow-label {
  margin-bottom: 0;
}

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

.layer-card__includes .check-stack {
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.layer-card__includes .check-stack__item {
  color: var(--secondary);
}

.layer-card__includes .layer-check {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: var(--space-1);
  color: var(--accent);
}

.layer-card__output {
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

.layer-card__output .eyebrow-label {
  margin-bottom: var(--space-1);
}

.layer-card__output-text {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--primary);
}

@media (min-width: 40rem) {
  .layer-card__includes-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56.25rem) {
  .layer-card {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.15fr);
    gap: var(--gap-grid);
    align-items: start;
  }
}

.feature-card--compact {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  height: 100%;
  padding: var(--card-padding);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: none;
}

.feature-card--compact:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.feature-card--compact.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.feature-card--compact.shadow-sm:hover {
  box-shadow: var(--shadow-sm);
}

.feature-card--compact .card-title {
  margin: 0;
}

.media-frame--pad {
  max-width: 35rem;
  padding: var(--space-4);
  background-color: var(--white);
}

.media-frame--pad-sm {
  max-width: 22rem;
  padding: var(--space-4);
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 992px) {
  .media-frame--pad-sm {
    max-width: 100%;
  }
}

.metric-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
}

.metric-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.metric-tile__head .icon-box {
  margin-bottom: 0;
}

.metric-delta {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  line-height: var(--leading-body);
  color: var(--success);
  background-color: var(--surface-green);
  border-radius: var(--radius);
}

.metric-tile__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  color: var(--primary);
}

.metric-tile__unit {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.metric-tile__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--primary);
}

.metric-tile__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.spark-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 1.25rem;
}

.spark-bars__bar {
  flex: 1;
  height: 0.45rem;
  border-radius: var(--radius);
  background-color: var(--border);
}

.spark-bars__bar--active {
  height: 0.85rem;
}

.metric-tile--orange .spark-bars__bar--active { background-color: var(--warning); }
.metric-tile--teal .spark-bars__bar--active { background-color: var(--success); }
.metric-tile--cyan .spark-bars__bar--active { background-color: var(--accent); }
.metric-tile--pink .spark-bars__bar--active { background-color: var(--accent-peach); }

.roster-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--border-default);
}

.roster-list__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--gap-grid);
  align-items: start;
  padding: var(--space-6) 0;
  border-bottom: var(--border-default);
}

.roster-list__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.roster-list__meta-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.roster-list__meta-head .icon-box {
  margin-bottom: 0;
}

.roster-list__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--primary);
}

.roster-list__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.track-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  line-height: var(--leading-body);
  color: var(--text-muted);
  border: var(--border-default);
  border-radius: var(--radius);
}

@media (min-width: 40rem) {
  .roster-list__item {
    grid-template-columns: 3.5rem minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: var(--gap-grid);
    padding: var(--space-6_5) 0;
  }
}

.scroll-anchor {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.check-stack--tight {
  margin-bottom: 0;
}

/* Post listing — insights / archive pages */

.hero-section--article {
  padding-bottom: var(--space-6);
}

.hero-section--article .hero-section__content--solo {
  text-align: left;
}

.hero-section--article .hero-section__title {
  max-width: none;
  margin-bottom: 0;
  text-align: left;
}

.hero-section--article + .insights-layout {
  padding-top: var(--space-6);
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--content-block-gap);
  min-width: 0;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

@media (min-width: 768px) {
  .post-card.post-card--horizontal {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .post-card.post-card--horizontal > .post-card__media,
  .post-card.post-card--horizontal > .post-card__body {
    display: table-cell;
    vertical-align: top;
  }

  .post-card.post-card--horizontal > .post-card__body {
    justify-content: center;
    padding: var(--space-6);
  }

  .post-card.post-card--horizontal .post-card__title {
    margin-bottom: var(--space-4);
  }

  .post-card.post-card--horizontal .post-card__footer {
    margin-top: var(--space-4);
  }
}

.post-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-hover);
  transform: translateY(-0.15rem);
}

.post-card__media {
  display: block;
  overflow: hidden;
  border-bottom: var(--border-default);
  background-color: var(--surface-teal);
}

.post-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

.post-card:hover .post-card__media img {
  transform: scale(1.02);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-5);
  min-width: 0;
  height: 100%;
}

.post-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

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

.post-card__title a:hover {
  color: var(--accent);
}

.post-card__excerpt {
  margin: 0;
  max-width: var(--measure-prose);
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  margin-top: auto;
  border-top: var(--border-default);
}

@media (max-width: 767px) {
  .post-card__footer {
    margin-top: var(--space-5);
  }
}

.post-card__action {
  margin: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-button);
}

@media (min-width: 768px) {
  .post-card.post-card--horizontal > .post-card__media {
    position: relative;
    width: 42%;
    overflow: hidden;
    border-bottom: none;
    border-right: var(--border-default);
  }

  .post-card.post-card--horizontal .post-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    object-fit: cover;
    object-position: center;
  }
}

.sidebar-panel {
  padding: var(--space-6);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.sidebar-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--type-gap);
}

.sidebar-widget__title {
  margin-bottom: 0;
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.sidebar-widget__count {
  display: inline-flex;
  align-items: center;
  min-width: 1.5rem;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--text-support);
  background-color: var(--surface-alt);
  border-radius: var(--radius-full);
}

@media (min-width: 992px) {
  .sidebar-panel--sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

.sidebar-widget + .sidebar-widget {
  padding-top: var(--stack-gap-lg);
  margin-top: var(--stack-gap-lg);
  border-top: var(--border-default);
}

.link-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-stack__item + .link-stack__item {
  border-top: var(--border-default);
}

.link-stack__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
  text-decoration: none;
  transition: var(--transition-text);
}

.link-stack__link:hover {
  color: var(--accent);
}

.link-stack__link[aria-current="page"] {
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
}

.link-stack__icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--text-support);
}

.link-stack__link:hover .link-stack__icon,
.link-stack__link[aria-current="page"] .link-stack__icon {
  color: var(--accent);
}

.recent-posts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-posts__item {
  margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
}

.recent-posts__item + .recent-posts__item {
  border-top: var(--border-default);
}

.recent-posts__link-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3) var(--space-2);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  transition: background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

.recent-posts__link-wrap:hover {
  background-color: var(--surface-alt);
}

.recent-posts__item--active .recent-posts__link-wrap {
  background-color: color-mix(in srgb, var(--accent) 8%, var(--white));
}

.recent-posts__thumb {
  flex: 0 0 3.75rem;
  width: 3.75rem;
  height: 3.75rem;
  overflow: hidden;
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-teal);
}

.recent-posts__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

.recent-posts__link-wrap:hover .recent-posts__thumb img {
  transform: scale(1.04);
}

.recent-posts__text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-paragraph);
  transition: var(--transition-text);
}

.recent-posts__link-wrap:hover .recent-posts__text,
.recent-posts__item--active .recent-posts__text {
  color: var(--accent);
}

.post-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow-x: clip;
  padding: var(--space-5);
  background-color: var(--white);
  border: var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .post-detail {
    padding: var(--space-8);
  }
}

.post-detail__media {
  margin: 0 0 var(--space-6);
  overflow: hidden;
  border: var(--border-default);
  border-radius: var(--radius);
  background-color: var(--surface-teal);
}

.post-detail__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.post-detail__content.prose,
.post-detail__content.prose p {
  max-width: none;
}

.post-detail__content.prose {
  gap: var(--space-4);
  width: 100%;
}

.post-detail__content.prose > :is(h2) {
  margin-top: var(--space-8);
}

.post-detail__content.prose > :is(h3) {
  margin-top: var(--space-6);
}

.post-detail__content.prose > h2 + :is(h3),
.post-detail__content.prose > h3 + :is(h4) {
  margin-top: var(--space-3);
}

.post-detail__content.prose > :first-child {
  margin-top: 0;
}

.post-detail__content.prose :is(h2, h3, h4) {
  text-align: left;
}

.post-detail__content .post-lead,
.post-detail__content .post-callout {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-4);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--surface-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.post-detail__content .post-lead {
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.post-detail__content .post-callout {
  font-weight: var(--font-weight-semibold);
}

.post-detail__content.prose :is(ul, ol) {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}

.post-detail__content.prose :is(ul, ol) li + li {
  margin-top: var(--list-gap);
}

.post-detail__content.prose a:not(.btn) {
  color: var(--accent);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
}

.post-detail__content.prose a:not(.btn):hover {
  color: var(--secondary);
}

.post-detail__content.prose strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.post-detail__content .post-table {
  width: 100%;
  margin: var(--space-5) 0;
  font-size: var(--text-body-sm);
  border-color: var(--border);
}

.post-detail__content .post-table :is(th, td) {
  vertical-align: top;
  line-height: var(--leading-relaxed);
}

.post-detail__content .post-table thead th {
  background-color: var(--surface-alt);
  font-size: var(--text-label);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .post-detail__content .post-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .post-detail__content .post-table thead,
  .post-detail__content .post-table tbody {
    display: table;
    width: 100%;
    min-width: 32rem;
  }

  .post-detail__content .post-table tr {
    display: table-row;
  }
}

.post-detail__faq {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: var(--border-default);
  text-align: left;
}

.post-detail__faq-title {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  text-align: left;
}

.post-detail__faq .faq-list {
  gap: var(--space-3);
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.post-detail__faq .faq-question,
.post-detail__faq .faq-answer {
  text-align: left;
}

.post-detail__faq .faq-card {
  background-color: var(--surface-alt);
  border-color: transparent;
}

.post-detail__faq .faq-card:hover {
  border-color: var(--border-default);
  box-shadow: none;
}

.post-detail__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: var(--border-default);
}

.post-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-button);
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition-text);
}

.post-detail__back:hover {
  color: var(--text-primary);
}

.post-detail__back-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   Responsive foundation — site-wide mobile / tablet polish
   ═══════════════════════════════════════════════════════════ */

#main-content {
  overflow-x: clip;
  min-width: 0;
}

.row > [class*="col"] {
  min-width: 0;
}

.hero-section__content,
.hero-section__visual,
.hero-section__grid {
  min-width: 0;
}

.snippet-bar,
.dashboard-card__row .small,
.platform-badge + .small {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  :root {
    --section-padding-y: var(--space-6);
    --section-padding-y-lg: var(--space-8);
    --hero-padding-y: var(--space-6);
    --section-header-space: var(--space-5);
    --content-block-gap: var(--space-5);
  }

  .container {
    padding-inline: var(--space-4);
  }

  .post-detail {
    padding: var(--space-4);
  }

  .hero-section__actions,
  .button-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-section__btn,
  .button-group .btn,
  .cta-banner__btn {
    width: 100%;
    min-width: 0;
  }

  .spec-list__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .spec-list__row dd {
    max-width: none;
    text-align: left;
  }

  .dashboard-card {
    margin-bottom: var(--space-8);
  }

  .dashboard-card__status {
    position: static;
    width: fit-content;
    margin-top: var(--space-4);
    margin-inline-start: auto;
  }

  .dashboard-card__body {
    padding-bottom: var(--space-4);
  }

  .compare-table__col-head,
  .compare-table__cell {
    padding: var(--space-4);
  }

  .cta-banner__panel {
    padding: var(--space-6) var(--space-4);
  }

  .soft-panel,
  .layer-card,
  .metric-card,
  .icon-row-card {
    padding: var(--space-4);
  }

  .plan-card {
    padding: var(--space-4);
  }
}

@media (max-width: 767.98px) {
  .track-tabs {
    flex-direction: column;
    width: 100%;
    max-width: none;
  }

  .track-tab {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
  }

  .track-panel {
    padding: var(--space-4);
  }

  .process-rail {
    margin-inline: 0;
    padding-inline: var(--space-4);
  }

  .layer-card {
    gap: var(--space-5);
  }

  .plan-card--dark:hover,
  .feature-card:hover,
  .post-card:hover {
    transform: none;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.success-message {
    display: block;
    padding: 1rem;
    margin-bottom: 1rem;
    color: #0e864e;
    background-color: #caf5e1;
    border: 1px solid #badbcc;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
}
.ss-error{
	color: red;
    font-size: 14px;
    padding-top: 5px;
}