/* ============================================================
   RegLeg Solutions — Design Tokens
   System of record for color, type, spacing, radius, shadow,
   motion, and breakpoints. Extracted from the RegLeg Brand
   Guide (04012026). Every hi fi page imports this file first.
   Do not hardcode brand values in page CSS; reference tokens.

   File: design-system/tokens.css
   Stamp: (05102026)
   ============================================================ */

:root {
  /* -------- Brand color (raw) -------- */
  --rl-dark-navy: #2C4A5A;
  --rl-blue-slate: #3D5A6E;
  --rl-deep-teal: #2A6B6E;
  --rl-slate-teal: #5A7A82;
  --rl-medium-teal: #5B9EA6;
  --rl-soft-teal: #8DC4C8;
  --rl-pale-teal: #B5D5D1;
  --rl-ice-teal: #C5DDD9;
  --rl-mist: #D0E0DC;
  --rl-deep-green: #1B5E40;
  --rl-green: #2E7D32;
  --rl-green-mist: #E8F5E9;
  --rl-white: #FFFFFF;
  --rl-bg: #F7FAFA;

  /* -------- Semantic color aliases -------- */
  --color-bg: var(--rl-bg);
  --color-surface: var(--rl-white);
  --color-surface-raised: var(--rl-white);
  --color-surface-muted: #F1F5F6;
  --color-surface-tint: #EDF4F3;
  --color-surface-dark: var(--rl-dark-navy);
  --color-surface-dark-alt: var(--rl-blue-slate);

  --color-text-primary: #1E293B;
  --color-text-body: #475569;
  --color-text-muted: var(--rl-slate-teal);
  --color-text-light: #94A3B8;
  --color-text-on-dark: var(--rl-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-text-on-dark-faint: rgba(255, 255, 255, 0.52);

  --color-heading: var(--rl-dark-navy);
  --color-heading-on-dark: var(--rl-white);

  --color-link: var(--rl-deep-teal);
  --color-link-hover: var(--rl-dark-navy);
  --color-link-on-dark: var(--rl-soft-teal);
  --color-link-on-dark-hover: var(--rl-white);

  --color-accent: var(--rl-medium-teal);
  --color-accent-strong: var(--rl-deep-teal);
  --color-accent-soft: var(--rl-soft-teal);

  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-border-tint: var(--rl-ice-teal);
  --color-border-on-dark: rgba(255, 255, 255, 0.14);

  --color-focus: var(--rl-deep-green);
  --color-success: var(--rl-deep-green);
  --color-success-soft: var(--rl-green-mist);
  --color-danger: #B91C1C;
  --color-danger-soft: #FEE2E2;
  --color-warning: #92400E;
  --color-warning-soft: #FEF3C7;

  /* CTA palette */
  --color-cta-bg: var(--rl-deep-green);
  --color-cta-bg-hover: #154A33;
  --color-cta-text: var(--rl-white);
  --color-cta-secondary-bg: var(--rl-white);
  --color-cta-secondary-text: var(--rl-dark-navy);
  --color-cta-secondary-border: var(--rl-dark-navy);

  /* -------- Brand gradient -------- */
  --gradient-brand: linear-gradient(135deg, var(--rl-dark-navy) 0%, var(--rl-deep-teal) 60%, var(--rl-blue-slate) 100%);
  --gradient-brand-two: linear-gradient(135deg, var(--rl-dark-navy) 0%, var(--rl-deep-teal) 100%);
  --gradient-teal: linear-gradient(180deg, var(--rl-medium-teal) 0%, var(--rl-deep-teal) 100%);
  --gradient-soft: linear-gradient(180deg, var(--rl-pale-teal) 0%, var(--rl-soft-teal) 100%);
  --gradient-page-soft: linear-gradient(180deg, #FFFFFF 0%, var(--color-surface-tint) 100%);

  /* -------- Type families -------- */
  --font-display: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* -------- Type weights -------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* -------- Type size scale (rem; 1rem = 16px) -------- */
  --size-2xs: 0.6875rem;    /* 11px caption tiny */
  --size-xs: 0.75rem;       /* 12px caption, eyebrow */
  --size-sm: 0.875rem;      /* 14px small body, nav */
  --size-base: 1rem;        /* 16px body */
  --size-md: 1.125rem;      /* 18px lede, subhead, large body */
  --size-lg: 1.25rem;       /* 20px subhead large */
  --size-xl: 1.5rem;        /* 24px H3, small section head */
  --size-2xl: 1.875rem;     /* 30px H2 */
  --size-3xl: 2.25rem;      /* 36px section H1, mid hero */
  --size-4xl: 3rem;         /* 48px hero H1 */
  --size-5xl: 3.75rem;      /* 60px display, used sparingly */

  /* Mobile-first hero scale (auto downshift on small screens) */
  --hero-h1: clamp(2.25rem, 4.5vw + 1rem, 3.5rem);
  --hero-h2: clamp(1.625rem, 2.5vw + 0.75rem, 2.25rem);

  /* -------- Line heights -------- */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;
  --lh-loose: 1.85;

  /* -------- Letter spacing -------- */
  --ls-display: -0.02em;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-loose: 0.04em;
  --ls-eyebrow: 0.14em;
  --ls-button: 0.04em;
  --ls-mono: 0;

  /* -------- Spacing scale (8px base) -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -------- Radius -------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* -------- Shadow tiers -------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-2: 0 4px 8px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-4: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-banner: 0 24px 64px rgba(44, 74, 90, 0.32);
  --shadow-card-hover: 0 8px 20px rgba(44, 74, 90, 0.12);

  /* -------- Motion -------- */
  --motion-fast: 0.12s ease;
  --motion-default: 0.18s ease;
  --motion-slow: 0.28s ease;
  --motion-spring: 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  --motion-ease-out: 0.24s cubic-bezier(0.16, 1, 0.3, 1);

  /* -------- Container widths -------- */
  --container-marketing: 1200px;
  --container-prose: 880px;
  --container-narrow: 720px;
  --container-wide: 1320px;

  /* -------- Page rhythm -------- */
  --section-py: clamp(56px, 7vw, 96px);
  --section-py-tight: clamp(40px, 5vw, 64px);
  --header-h: 72px;
  --gutter: 24px;

  /* -------- Z layers -------- */
  --z-header: 50;
  --z-overlay: 60;
  --z-skip: 100;

  /* ============================================================
     Diagram tokens (v0.4.4, HR12)
     Information Designer SME references these explicitly. Any
     numeric value written into inline SVG markup must derive
     from this token set. The diagram_lint utility verifies.
     ============================================================ */

  /* Diagram-specific spacing tokens */
  --diagram-grid: 8px;             /* base grid unit; all diagram positions are multiples */
  --diagram-pad-sm: 16px;          /* tight node padding */
  --diagram-pad-md: 24px;          /* default node padding */
  --diagram-pad-lg: 32px;          /* generous node padding (hero diagrams) */
  --diagram-gap-sm: 16px;          /* tight inter-node gap */
  --diagram-gap-md: 24px;          /* default inter-node gap */
  --diagram-gap-lg: 40px;          /* generous inter-node gap (column separations) */
  --diagram-caption-margin: 16px;  /* distance from SVG bottom to caption */
  --diagram-edge-clearance: 16px;  /* minimum text-to-edge inside a node */

  /* Diagram type scale */
  --diagram-type-eyebrow: 11px;
  --diagram-type-eyebrow-weight: 800;
  --diagram-type-eyebrow-tracking: 2.4px;
  --diagram-type-heading: 14px;
  --diagram-type-heading-weight: 700;
  --diagram-type-body: 11px;
  --diagram-type-body-weight: 400;
  --diagram-type-micro: 10px;
  --diagram-type-micro-style: italic;

  /* Diagram strokes */
  --diagram-stroke-card: 1.5px;
  --diagram-stroke-divider: 1px;
  --diagram-stroke-accent: 2px;

  /* Diagram shadows */
  --diagram-shadow-card: 0 2px 6px rgba(0,0,0,0.08);
  --diagram-shadow-elevated: 0 4px 12px rgba(0,0,0,0.12);
}

/* -------- Reset and base body -------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html { overflow-x: hidden; }

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--motion-default);
}
a:hover { color: var(--color-link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-weight: var(--weight-black);
}
h3, h4, h5, h6 { letter-spacing: var(--ls-tight); }

p { color: var(--color-text-body); }

sup { font-size: 0.55em; vertical-align: super; line-height: 0; margin-left: 1px; }

/* Selection */
::selection { background: var(--rl-pale-teal); color: var(--rl-dark-navy); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
   RegLeg Solutions — Component CSS
   Built on tokens.css. Every component below is documented in
   design-system/README.md with anatomy, variants, and code.
   File: design-system/components.css
   Stamp: (05102026)
   ============================================================ */

@import url('tokens.css');

/* -------- Utility -------- */
.container {
  width: 100%;
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container.narrow { max-width: var(--container-prose); }
.container.tight { max-width: var(--container-narrow); }
.container.wide { max-width: var(--container-wide); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--rl-dark-navy); color: var(--rl-white);
  padding: 10px 14px; text-decoration: none; font-size: var(--size-sm);
  z-index: var(--z-skip); border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.skip-link:focus { left: 12px; top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* -------- Section frame -------- */
section {
  padding: var(--section-py) 0;
  position: relative;
}
section.tight { padding: var(--section-py-tight) 0; }

.section-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--hero-h2);
  font-weight: var(--weight-black);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
  max-width: 24ch;
}
.section-title.wide { max-width: 36ch; }
.section-title.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-intro {
  font-size: var(--size-md);
  color: var(--color-text-body);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
  margin-bottom: var(--space-10);
}
.section-intro.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: var(--space-4);
}
.eyebrow.on-dark { color: var(--rl-soft-teal); }

.surface-tint { background: var(--color-surface-tint); }
.surface-muted { background: var(--color-surface-muted); }
.surface-dark { background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.surface-dark .section-title { color: var(--color-heading-on-dark); }
.surface-dark .section-intro { color: var(--color-text-on-dark-muted); }
.surface-dark .section-label { color: var(--rl-soft-teal); }

/* -------- Header -------- */
header.site {
  background: var(--rl-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0;
  z-index: var(--z-header);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
header.site .bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px;
  padding: 12px 0;
}
header.site .logo-link {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
header.site .logo-link svg { width: 168px; height: auto; display: block; }
header.site nav.primary { flex: 1 1 auto; min-width: 0; }
nav.primary ul {
  list-style: none; display: flex; gap: 6px 4px; flex-wrap: wrap;
  justify-content: center; padding: 0; margin: 0;
}
nav.primary a {
  display: inline-block;
  text-decoration: none;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  transition: background var(--motion-default), color var(--motion-default);
}
nav.primary a:hover { background: var(--color-surface-tint); color: var(--color-accent-strong); }
nav.primary a[aria-current="page"] {
  color: var(--color-accent-strong);
  background: var(--color-surface-tint);
}
.nav-cta {
  flex: 0 0 auto;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-sm);
  color: var(--rl-white);
  background: var(--rl-deep-green);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--motion-default), transform var(--motion-default);
}
.nav-cta:hover { background: var(--color-cta-bg-hover); color: var(--rl-white); transform: translateY(-1px); }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-sm);
  line-height: 1.1;
  letter-spacing: var(--ls-button);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-default), color var(--motion-default),
              border-color var(--motion-default), transform var(--motion-default),
              box-shadow var(--motion-default);
  min-height: 44px;
}
.btn.primary {
  background: var(--rl-deep-green);
  color: var(--rl-white);
  border-color: var(--rl-deep-green);
  box-shadow: var(--shadow-1);
}
.btn.primary:hover {
  background: var(--color-cta-bg-hover);
  border-color: var(--color-cta-bg-hover);
  color: var(--rl-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.btn.secondary {
  background: var(--rl-white);
  color: var(--color-cta-secondary-text);
  border-color: var(--color-cta-secondary-border);
}
.btn.secondary:hover {
  background: var(--color-surface-tint);
  color: var(--color-cta-secondary-text);
  transform: translateY(-2px);
}
.btn.teal {
  background: var(--rl-deep-teal);
  color: var(--rl-white);
  border-color: var(--rl-deep-teal);
}
.btn.teal:hover { background: var(--rl-dark-navy); border-color: var(--rl-dark-navy); color: var(--rl-white); transform: translateY(-2px); }
.btn.ghost-on-dark {
  background: transparent;
  color: var(--rl-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn.ghost-on-dark:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--rl-white); color: var(--rl-white); transform: translateY(-2px); }
.btn.ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn.ghost:hover { background: var(--color-surface-tint); border-color: var(--color-accent); color: var(--color-accent-strong); }

/* -------- Primary CTA on dark hero (v0.4.1 contrast fix, v0.4.x widened) -------- */
/* Dark green on dark teal failed WCAG and looked muddy. Invert to
   white background with dark navy text on any dark hero or any
   section identified as dark. v0.4.x: also catches .featured (insights
   featured strip) and the trust-bar dark band. */
.hero .btn.primary, .hero .btn--primary,
.dark-band .btn.primary, .dark-band .btn--primary,
.diagram--dark .btn.primary, .diagram--dark .btn--primary,
.surface-dark .btn.primary, .surface-dark .btn--primary,
.featured .btn.primary, .featured .btn--primary,
.cta-band .btn.primary, .cta-band .btn--primary {
  background: var(--rl-white);
  color: var(--rl-dark-navy);
  border-color: var(--rl-white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.hero .btn.primary:hover, .hero .btn--primary:hover,
.dark-band .btn.primary:hover, .dark-band .btn--primary:hover,
.diagram--dark .btn.primary:hover, .diagram--dark .btn--primary:hover,
.surface-dark .btn.primary:hover, .surface-dark .btn--primary:hover,
.featured .btn.primary:hover, .featured .btn--primary:hover,
.cta-band .btn.primary:hover, .cta-band .btn--primary:hover {
  background: var(--rl-soft-teal);
  color: var(--rl-dark-navy);
  border-color: var(--rl-soft-teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

/* -------- Bare .btn default (v0.4.x contrast fix) -------- */
/* A .btn with no modifier on a light section was inheriting link color
   (deep-teal #2A6B6E) on the page background, producing 3.43:1 text
   contrast — below WCAG AA. Provide a sensible default that gives a
   solid bordered outline button. */
.btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost) {
  background: var(--rl-white);
  color: var(--rl-dark-navy);
  border-color: var(--rl-dark-navy);
}
.btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):hover {
  background: var(--rl-dark-navy);
  color: var(--rl-white);
  border-color: var(--rl-dark-navy);
  transform: translateY(-1px);
}

/* On dark sections, the bare .btn should invert (white outline on dark) */
/* HR10 fix (Chunk 3 v0.6.8): added BEM modifier exclusions so .btn--primary,
   .btn--ghost-on-dark, .btn--secondary, .btn--ghost, .btn--teal in hero
   contexts route to their dedicated dark-aware rules instead of this bare
   inversion. */
.hero .btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):not(.btn--primary):not(.btn--secondary):not(.btn--teal):not(.btn--ghost-on-dark):not(.btn--ghost),
.dark-band .btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):not(.btn--primary):not(.btn--secondary):not(.btn--teal):not(.btn--ghost-on-dark):not(.btn--ghost),
.featured .btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):not(.btn--primary):not(.btn--secondary):not(.btn--teal):not(.btn--ghost-on-dark):not(.btn--ghost),
.surface-dark .btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):not(.btn--primary):not(.btn--secondary):not(.btn--teal):not(.btn--ghost-on-dark):not(.btn--ghost) {
  background: transparent;
  color: var(--rl-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.hero .btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):not(.btn--primary):not(.btn--secondary):not(.btn--teal):not(.btn--ghost-on-dark):not(.btn--ghost):hover,
.dark-band .btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):not(.btn--primary):not(.btn--secondary):not(.btn--teal):not(.btn--ghost-on-dark):not(.btn--ghost):hover,
.featured .btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):not(.btn--primary):not(.btn--secondary):not(.btn--teal):not(.btn--ghost-on-dark):not(.btn--ghost):hover,
.surface-dark .btn:not(.primary):not(.secondary):not(.teal):not(.ghost-on-dark):not(.ghost):not(.btn--primary):not(.btn--secondary):not(.btn--teal):not(.btn--ghost-on-dark):not(.btn--ghost):hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--rl-white);
  color: var(--rl-white);
}

/* -------- ghost-on-dark border contrast (v0.4.x) -------- */
/* rgba(255,255,255,0.4) on dark navy gives ~2.54:1 button-vs-section.
   WCAG 1.4.11 requires 3:1. Strengthen to 0.55 to hit ~3.0:1. */
.btn.ghost-on-dark { border-color: rgba(255, 255, 255, 0.55); }
.btn.ghost-on-dark:hover { border-color: var(--rl-white); }
.btn.lg { padding: 16px 26px; font-size: var(--size-base); min-height: 52px; }
.btn[aria-disabled="true"], .btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.text-link {
  font-weight: var(--weight-semibold);
  color: var(--color-accent-strong);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-default), color var(--motion-default);
}
.text-link:hover { border-bottom-color: var(--color-accent); color: var(--color-accent-strong); }
.text-link::after { content: " →"; transition: transform var(--motion-default); display: inline-block; }
.text-link:hover::after { transform: translateX(4px); }

/* -------- Hero -------- */
.hero {
  background: var(--gradient-brand);
  color: var(--rl-white);
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 120px) 0 clamp(72px, 9vw, 128px);
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 80%; height: 200%;
  background:
    radial-gradient(circle at 30% 70%, rgba(91, 158, 166, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(42, 107, 110, 0.12) 0%, transparent 55%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--rl-soft-teal); }
.hero h1 {
  font-size: var(--hero-h1);
  font-weight: var(--weight-black);
  color: var(--rl-white);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
  max-width: 18ch;
}
.hero .lede {
  font-size: var(--size-md);
  color: rgba(255, 255, 255, 0.86);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
  margin-bottom: var(--space-8);
}
.hero-ctas {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-6);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); } }
.hero-visual {
  position: relative;
  min-height: 340px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(91, 158, 166, 0.18), rgba(42, 107, 110, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-banner);
}

/* -------- Cards -------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-1);
  transition: border-color var(--motion-default), box-shadow var(--motion-default), transform var(--motion-default);
}
.card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
}
.card .num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.card h3 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}
.card p {
  font-size: var(--size-sm);
  color: var(--color-text-body);
  line-height: var(--lh-relaxed);
}
.card .meta {
  display: block;
  font-size: var(--size-xs);
  color: var(--color-text-light);
  letter-spacing: var(--ls-loose);
  margin-top: var(--space-4);
}

.card.feature {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border-color: var(--color-border-tint);
}
.card.tile {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card.tile h3 { color: var(--color-heading); }
.card.tile:hover { transform: translateY(-2px); }

.card.on-dark {
  background: var(--rl-blue-slate);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-on-dark);
  box-shadow: none;
}
.card.on-dark h3 { color: var(--rl-white); }
.card.on-dark p { color: var(--color-text-on-dark-muted); }
.card.on-dark .num { color: var(--rl-soft-teal); }

/* -------- Grids -------- */
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2-tight { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3-tight { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-mixed-2-1 { grid-template-columns: 2fr 1fr; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-3-tight { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-4, .grid-3, .grid-2, .grid-3-tight, .grid-2-tight, .grid-mixed-2-1 { grid-template-columns: 1fr; }
}

/* -------- Chips and pills -------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--color-border-tint);
  background: var(--rl-white);
  color: var(--rl-dark-navy);
  padding: 8px 14px;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  transition: background var(--motion-default), border-color var(--motion-default);
}
.chip:hover { background: var(--color-surface-tint); border-color: var(--color-accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.chip.solid { background: var(--rl-medium-teal); color: var(--rl-white); border-color: var(--rl-medium-teal); }
.chip.ghost-on-dark { background: rgba(255,255,255,0.08); color: var(--rl-white); border-color: rgba(255,255,255,0.18); }

/* -------- Trust chip -------- */
.trust-chip {
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  transition: border-color var(--motion-default), box-shadow var(--motion-default);
}
.trust-chip:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card-hover); }
.trust-chip strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
  line-height: var(--lh-snug);
}
.trust-chip span { font-size: var(--size-sm); color: var(--color-text-body); line-height: var(--lh-normal); }

/* -------- Banner CTA -------- */
.banner {
  background: var(--gradient-brand);
  color: var(--rl-white);
  border-radius: var(--radius-xl);
  padding: clamp(36px, 5vw, 56px);
  display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-banner);
}
.banner::before {
  content: '';
  position: absolute; top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(91,158,166,0.18), transparent 60%);
  pointer-events: none;
}
.banner * { position: relative; z-index: 1; }
.banner h3 {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: var(--weight-black);
  color: var(--rl-white);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  max-width: 24ch;
}
.banner p { color: rgba(255,255,255,0.86); max-width: 60ch; font-size: var(--size-md); }
.banner .btn.primary {
  background: var(--rl-white);
  color: var(--rl-dark-navy);
  border-color: var(--rl-white);
}
.banner .btn.primary:hover { background: var(--rl-soft-teal); color: var(--rl-dark-navy); border-color: var(--rl-soft-teal); }
.banner .btn.ghost-on-dark { background: transparent; }

/* -------- Final CTA centered -------- */
.cta-final {
  background: var(--color-surface-tint);
  text-align: center;
}
.cta-final h2 {
  font-size: var(--hero-h2);
  margin-bottom: var(--space-5);
  max-width: 24ch;
  margin-left: auto; margin-right: auto;
}
.cta-final p { max-width: 60ch; margin: 0 auto var(--space-6); font-size: var(--size-md); }

/* -------- Forms -------- */
.form-grid { display: grid; gap: var(--space-5); }
.form-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .form-grid.two { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-sm);
  color: var(--color-heading);
}
.field .required { color: var(--color-danger); margin-left: 2px; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--color-text-primary);
  background: var(--rl-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--motion-default), box-shadow var(--motion-default);
  width: 100%;
  min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; line-height: var(--lh-relaxed); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.field .helper { font-size: var(--size-xs); color: var(--color-text-muted); }
.field.error input, .field.error textarea, .field.error select { border-color: var(--color-danger); }
.field.error .helper { color: var(--color-danger); }

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

/* Visually hidden input (replaces relying on browser default for type=hidden styling) */
input[type="hidden"] { display: none !important; }

/* -------- Footer -------- */
footer.site {
  background: var(--rl-dark-navy);
  color: var(--color-text-on-dark);
  padding: var(--space-20) 0 var(--space-8);
  margin-top: 0;
  position: relative;
}
footer.site::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rl-deep-teal), var(--rl-medium-teal), var(--rl-deep-teal));
}
footer.site .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
}
@media (max-width: 1024px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.site .cols { grid-template-columns: 1fr; } }

footer.site h4 {
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  color: var(--rl-white);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: var(--space-4);
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: var(--space-2); }
footer.site a {
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  font-size: var(--size-sm);
  transition: color var(--motion-default);
}
footer.site a:hover { color: var(--rl-white); }

footer.site .brand-block { max-width: 42ch; }
footer.site .brand-block .logo-svg { width: 180px; margin-bottom: var(--space-4); display: block; }
footer.site .tagline {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-3);
  line-height: var(--lh-relaxed);
}
footer.site .entity {
  font-size: var(--size-xs);
  color: var(--color-text-on-dark-faint);
  letter-spacing: var(--ls-loose);
}
footer.site .fine {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--space-12);
  padding-top: var(--space-5);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--size-xs);
  color: var(--color-text-on-dark-faint);
}

/* -------- Breadcrumbs -------- */
.breadcrumbs {
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center;
}
.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--motion-default), border-color var(--motion-default);
}
.breadcrumbs a:hover { color: var(--color-accent-strong); border-bottom-color: var(--color-accent); }
.breadcrumbs .sep { color: var(--color-text-light); }
.breadcrumbs [aria-current="page"] { color: var(--color-heading); }

/* -------- Tables (mark tables, comparison) -------- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.data-table thead th {
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: var(--rl-white);
  background: var(--rl-dark-navy);
  padding: 14px 18px;
  text-align: left;
}
.data-table tbody td {
  padding: 14px 18px;
  font-size: var(--size-sm);
  color: var(--color-text-body);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody td.strong { color: var(--color-heading); font-weight: var(--weight-semibold); }
.data-table tbody tr:nth-child(even) td { background: var(--color-surface-muted); }

/* -------- Legal long form prose -------- */
.prose {
  max-width: var(--container-prose);
  margin: 0 auto;
  font-size: var(--size-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}
.prose h1 {
  font-size: var(--size-3xl);
  margin-bottom: var(--space-4);
  color: var(--color-heading);
}
.prose h2 {
  font-size: var(--size-xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  color: var(--color-heading);
  scroll-margin-top: 90px;
}
.prose h3 {
  font-size: var(--size-md);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-heading);
  font-weight: var(--weight-bold);
}
.prose p { margin-bottom: var(--space-4); max-width: 75ch; }
.prose ul, .prose ol { margin: var(--space-3) 0 var(--space-5) var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-10) 0; }
.prose strong { color: var(--color-heading); font-weight: var(--weight-semibold); }
.prose .effective {
  display: inline-block;
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  background: var(--color-surface-tint);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}

.legal-toc {
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin: var(--space-8) 0 var(--space-12);
}
.legal-toc h2 {
  font-family: var(--font-display);
  font-size: var(--size-sm);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  margin: 0 0 var(--space-3);
}
.legal-toc ol {
  margin: 0;
  padding-left: var(--space-5);
  columns: 2;
  column-gap: var(--space-8);
}
@media (max-width: 720px) { .legal-toc ol { columns: 1; } }
.legal-toc li {
  margin-bottom: var(--space-2);
  font-size: var(--size-sm);
}
.legal-toc a {
  color: var(--color-text-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.legal-toc a:hover { color: var(--color-accent-strong); border-bottom-color: var(--color-accent); }

/* -------- Legal hub tiles -------- */
.doc-tile {
  display: block;
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion-default), transform var(--motion-default), box-shadow var(--motion-default);
  height: 100%;
}
.doc-tile:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.doc-tile .doc-eyebrow {
  font-family: var(--font-display);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.doc-tile h3 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}
.doc-tile p {
  font-size: var(--size-sm);
  color: var(--color-text-body);
  line-height: var(--lh-relaxed);
}
.doc-tile .tile-cta {
  display: inline-block;
  margin-top: var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-strong);
  font-size: var(--size-sm);
}
.doc-tile .tile-cta::after { content: " →"; }
.doc-tile.request {
  background: var(--color-surface-tint);
  border-color: var(--color-border-tint);
}

/* -------- Pillar large cards (home) -------- */
.pillar-card {
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-7);
  position: relative;
  transition: border-color var(--motion-default), box-shadow var(--motion-default);
}
.pillar-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card-hover); }
.pillar-card .num {
  position: absolute;
  top: var(--space-6); right: var(--space-7);
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  font-weight: var(--weight-black);
  color: var(--color-border-tint);
  letter-spacing: var(--ls-display);
  line-height: 1;
}
.pillar-card h3 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  max-width: 18ch;
  line-height: var(--lh-snug);
}
.pillar-card p {
  font-size: var(--size-sm);
  color: var(--color-text-body);
  line-height: var(--lh-relaxed);
  max-width: 38ch;
}

/* -------- Inline icon (used in cards, lists) -------- */
.icon-inline {
  display: inline-block; vertical-align: middle;
  width: 18px; height: 18px;
  color: var(--color-accent);
  margin-right: var(--space-2);
}

/* -------- Leadership portrait -------- */
.leader {
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: left;
  transition: border-color var(--motion-default), box-shadow var(--motion-default);
}
.leader:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card-hover); }
.leader .portrait {
  min-height: 220px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, var(--rl-pale-teal) 0%, var(--rl-soft-teal) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  font-weight: var(--weight-black);
  color: var(--rl-white);
  text-shadow: 0 1px 2px rgba(44,74,90,0.2);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--space-4);
  position: relative;
  overflow: hidden;
}
.leader .portrait::before {
  content: '';
  position: absolute; left: 12%; right: 12%; bottom: 0;
  height: 40%;
  background:
    linear-gradient(180deg, transparent, rgba(44,74,90,0.18));
}
.leader h3 {
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-1);
}
.leader .role {
  font-size: var(--size-sm);
  color: var(--color-accent-strong);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}
.leader p { font-size: var(--size-sm); color: var(--color-text-body); line-height: var(--lh-relaxed); }

/* -------- Insights article cards -------- */
.article {
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--motion-default), box-shadow var(--motion-default), transform var(--motion-default);
}
.article:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.article .image {
  /* WeasyPrint compatibility: use min-height not aspect-ratio per v0.3.2 lesson */
  min-height: 180px;
  background: linear-gradient(135deg, var(--rl-soft-teal), var(--rl-deep-teal));
  position: relative;
  overflow: hidden;
}
.article .image::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(44,74,90,0.12), transparent 60%);
}
.article .body { padding: var(--space-6) var(--space-5); }
.article .topic {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-accent-strong);
  margin-bottom: var(--space-2);
}
.article h3 {
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}
.article p {
  font-size: var(--size-sm);
  color: var(--color-text-body);
  line-height: var(--lh-relaxed);
}
.article .byline {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}

/* -------- Featured article (large block) -------- */
.featured {
  background: var(--gradient-brand-two);
  color: var(--rl-white);
  border-radius: var(--radius-2xl);
  padding: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-banner);
}
.featured::before {
  content: '';
  position: absolute; top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(91,158,166,0.22), transparent 60%);
  pointer-events: none;
}
.featured * { position: relative; z-index: 1; }
@media (max-width: 880px) { .featured { grid-template-columns: 1fr; } }
.featured .eyebrow { color: var(--rl-soft-teal); }
.featured h3 {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: var(--weight-black);
  color: var(--rl-white);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
}
.featured p { color: rgba(255,255,255,0.86); font-size: var(--size-md); margin-bottom: var(--space-5); }
.featured .visual {
  min-height: 240px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)),
    linear-gradient(180deg, var(--rl-medium-teal), var(--rl-deep-teal));
  border: 1px solid rgba(255,255,255,0.16);
  position: relative; overflow: hidden;
}

/* -------- Subscribe form (insights) -------- */
.subscribe {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border-tint);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 48px);
}
.subscribe .form-row {
  display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4);
}
.subscribe .form-row input[type="email"] {
  flex: 1 1 280px;
  background: var(--rl-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--size-base);
  min-height: 48px;
}

/* -------- Route chooser (contact) -------- */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 1024px) { .route-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .route-grid { grid-template-columns: 1fr; } }
.route-tile {
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion-default), transform var(--motion-default), box-shadow var(--motion-default);
  display: flex; flex-direction: column;
  min-height: 168px;
}
.route-tile:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.route-tile .route-label {
  font-family: var(--font-display);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.route-tile h3 {
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}
.route-tile p { font-size: var(--size-sm); color: var(--color-text-body); line-height: var(--lh-relaxed); }

/* -------- Stat block -------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 1024px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat .value {
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  font-weight: var(--weight-black);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat .label {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  font-weight: var(--weight-semibold);
}

/* -------- Dashboard composite (abstract product preview) -------- */
.dashboard {
  position: relative;
  min-height: 360px;
  background: var(--rl-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.dashboard::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 32px;
  background: var(--color-surface-tint);
  border-bottom: 1px solid var(--color-border);
}
.dashboard::after {
  content: '\2022 \2022 \2022';
  position: absolute; top: 10px; left: 14px;
  letter-spacing: 4px;
  color: var(--color-text-light);
  font-size: 11px;
  line-height: 1;
}
.dashboard .ds-inner {
  margin-top: 32px; display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-4);
  align-items: stretch;
}
@media (max-width: 720px) { .dashboard .ds-inner { grid-template-columns: 1fr; } }
.dashboard .ds-list { display: flex; flex-direction: column; gap: var(--space-2); }
.dashboard .ds-list .ds-item {
  height: 28px; border-radius: var(--radius-sm);
  background: var(--color-surface-tint);
  border-left: 3px solid var(--rl-medium-teal);
}
.dashboard .ds-list .ds-item.alt { border-left-color: var(--rl-deep-teal); }
.dashboard .ds-list .ds-item.warn { border-left-color: var(--rl-deep-green); }
.dashboard .ds-chart {
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(91,158,166,0.06) 28px, rgba(91,158,166,0.06) 29px),
    linear-gradient(180deg, var(--rl-white), var(--color-surface-tint));
  border: 1px solid var(--color-border);
  position: relative; overflow: hidden;
}
.dashboard .ds-chart::after {
  content: '';
  position: absolute; left: 8%; right: 8%; bottom: 12%;
  height: 60%;
  background:
    linear-gradient(180deg, rgba(91,158,166,0.34), rgba(91,158,166,0.04)),
    linear-gradient(90deg, transparent 0%, var(--rl-medium-teal) 30%, var(--rl-deep-teal) 60%, var(--rl-medium-teal) 90%, transparent 100%);
  -webkit-mask: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
          mask: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  clip-path: polygon(0% 80%, 8% 70%, 16% 74%, 24% 60%, 32% 64%, 40% 48%, 48% 52%, 56% 40%, 64% 44%, 72% 30%, 80% 36%, 88% 22%, 100% 26%, 100% 100%, 0% 100%);
}

/* -------- List with checkmarks -------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-7);
  font-size: var(--size-base);
  color: var(--color-text-body);
  line-height: var(--lh-relaxed);
}
.check-list li::before {
  content: '';
  position: absolute; left: 0; top: 12px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rl-deep-green);
  background-image:
    linear-gradient(45deg, transparent 35%, var(--rl-white) 35%, var(--rl-white) 38%, transparent 38%),
    linear-gradient(135deg, transparent 55%, var(--rl-white) 55%, var(--rl-white) 60%, transparent 60%);
}
.check-list.on-dark li { color: rgba(255,255,255,0.86); }
.check-list.on-dark li::before { background: var(--rl-soft-teal); }

/* -------- Wireframe transform helpers --------
   The wireframe HTML uses class names like .lede, .form-full, etc.
   that the transformer carries through unchanged. These rules give
   them brand-correct styling. Keep additive only.
   ----------------------------------------------------------------- */

/* Wireframe-original .lede paragraphs inside hero and section bodies */
.lede {
  font-size: var(--size-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}
.hero .lede { color: rgba(255, 255, 255, 0.86); max-width: 60ch; margin-bottom: var(--space-8); }

/* Wireframe .eyebrow becomes hero eyebrow when inside .hero */
.hero .eyebrow { color: var(--rl-soft-teal); margin-bottom: var(--space-4); }
.hero h1 {
  font-size: var(--hero-h1);
  font-weight: var(--weight-black);
  color: var(--rl-white);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
  max-width: 22ch;
}

/* When transformed wireframes have <section><div class="container"><div class="section-label">...
   <h2>...</h2><p class="lede">..., we want h2 to behave like .section-title */
section .container > h2 {
  font-family: var(--font-display);
  font-size: var(--hero-h2);
  font-weight: var(--weight-black);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
  max-width: 36ch;
}
section .container > p {
  max-width: 70ch;
  font-size: var(--size-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
  margin-bottom: var(--space-4);
}
section .container > p strong { color: var(--color-heading); }
section .container > .grid { margin-top: var(--space-8); }
section .container > .chip-row { margin-top: var(--space-5); }

/* Surface a dark surface for hero, but section bodies stay light */
section.hero .container > h1 { /* already styled */ }

/* Small banner variant for callouts inside body content */
.banner.small-banner {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
}
.banner.small-banner h3 { font-size: var(--size-xl); }
.banner.small-banner p { font-size: var(--size-base); }

/* Tier card label + divider + subhead */
.tier-card { display: flex; flex-direction: column; }
.tier-card .level {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.tier-card .desc {
  font-size: var(--size-sm);
  color: var(--color-text-body);
  margin-bottom: var(--space-4);
  font-style: italic;
}
.tier-card .divider {
  border-top: 1px solid var(--color-border);
  margin: var(--space-3) 0;
}
.tier-card .subhead {
  font-family: var(--font-display);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-2);
}
.tier-card ul {
  list-style: none; padding: 0; margin: 0;
}
.tier-card ul li {
  position: relative;
  padding: 4px 0 4px var(--space-4);
  font-size: var(--size-sm);
  color: var(--color-text-body);
  line-height: var(--lh-snug);
}
.tier-card ul li::before {
  content: '';
  position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Partner featured tile (wide) */
.partner-featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--color-surface-tint), var(--rl-white));
  border-color: var(--color-border-tint);
}
.partner-featured .label,
.tier-card .label,
.card .label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* Bucket card (coverage) */
.card.bucket h3 { font-size: var(--size-lg); margin-bottom: var(--space-3); }
.card.bucket .chip-row { margin-top: var(--space-4); }

/* Card list bullets (where modules / tier benefits / etc. include <ul>) */
.card ul:not(.check-list):not(.no-style) {
  list-style: none; padding: 0; margin: var(--space-3) 0 0;
}
.card ul:not(.check-list):not(.no-style) li {
  position: relative;
  padding: 4px 0 4px var(--space-5);
  font-size: var(--size-sm);
  color: var(--color-text-body);
  line-height: var(--lh-snug);
}
.card ul:not(.check-list):not(.no-style) li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Form helpers (transformer adds these classes) */
.form-full { grid-column: 1 / -1; }
.form-check { display: flex; align-items: flex-start; gap: var(--space-3); }
.form-check input[type="checkbox"] {
  margin-top: 4px;
  width: 18px; height: 18px;
  accent-color: var(--rl-deep-green);
  flex-shrink: 0;
}
.form-check label { font-weight: var(--weight-regular); font-size: var(--size-sm); color: var(--color-text-body); }
.form-submit { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.form-submit button { font: inherit; }
.form-note {
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-3);
}
.form-note code {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  padding: 1px 4px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-xs);
}

/* Field auto-style for transformer-detected fields */
.field { display: flex; flex-direction: column; gap: 6px; }

/* Forms wrapping under .form-grid: render as 2-column on desktop, stacking */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid > .field { /* keep default field layout */ }

/* Hero with no grid (transformed hero pages that lack a .hero-grid container) */
.hero > .container > .eyebrow,
.hero > .container > h1,
.hero > .container > .lede,
.hero > .container > .hero-ctas { position: relative; z-index: 1; }
.hero > .container > h1 { max-width: 22ch; }

/* Print -------- */
@media print {
  @page { size: letter; margin: 0.5in; }
  header.site { position: static; }
  .hero, .banner, footer.site { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  section { padding: 32px 0; break-inside: avoid; page-break-inside: avoid; }
  .card, .pillar-card, .trust-chip, .doc-tile, .leader, .article, .route-tile { break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================
   v0.6.8 — Additional component layer
   Specific to the v0.6.8 designed pages. Built on tokens.css
   and reuses base components.css. Class names are deliberately
   namespaced so HR11 (class name consistency) can detect drift.
   ============================================================ */

/* Header */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); gap: var(--space-6); }
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__nav { display: flex; gap: var(--space-5); align-items: center; }
.site-header__nav a { color: var(--color-text-primary); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.site-header__nav a:hover { color: var(--color-link); }
.site-header__cta { background: var(--rl-dark-navy); color: var(--rl-white) !important; padding: 10px 18px; border-radius: var(--radius-md); font-weight: 700; font-family: var(--font-display); font-size: 0.95rem; }
.site-header__cta:hover { background: var(--rl-deep-teal); }
@media (max-width: 900px) {
  .site-header__nav { display: none; }
  .site-header__inner { gap: var(--space-3); }
}

/* Hero variants */
.hero { padding-block: var(--space-12) var(--space-12); }
.hero--gradient { background: linear-gradient(135deg, var(--rl-dark-navy) 0%, var(--rl-deep-teal) 60%, var(--rl-blue-slate) 100%); color: var(--rl-white); position: relative; overflow: hidden; }
.hero--gradient::before { content: ""; position: absolute; top: -40%; right: -10%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(91,158,166,0.18) 0%, transparent 60%); pointer-events: none; }
.hero--solid { background: var(--color-surface-tint); color: var(--color-text-body); }
.hero--solid::before { display: none; }
.hero--solid h1, .hero--solid h2 { color: var(--color-heading); }
.hero--solid .lede { color: var(--color-text-body); }
.hero--solid .eyebrow { color: var(--rl-medium-teal); }
.hero--legal { background: var(--color-surface-tint); color: var(--color-text-body); padding-block: var(--space-10) var(--space-8); }
.hero--legal::before { display: none; }
.hero--legal h1, .hero--legal h2 { color: var(--color-heading); }
.hero--legal .lede { color: var(--color-text-body); }
.hero--legal .eyebrow { color: var(--rl-medium-teal); }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-10); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(2.25rem, 4.8vw, 3.5rem); margin-bottom: var(--space-3); position: relative; }
.hero--gradient h1, .hero--gradient .lede { color: var(--rl-white); }
.lede { font-size: var(--size-lg); color: var(--color-text-body); line-height: 1.55; max-width: 60ch; margin-bottom: var(--space-5); }
.lede--on-dark { color: var(--color-text-on-dark-muted); }
.hero-visual { position: relative; align-self: stretch; min-height: 360px; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--rl-dark-navy); }
.hero-grid { align-items: stretch; }
.hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; border-radius: inherit; }
@media (max-width: 900px) { .hero-visual { aspect-ratio: 16 / 9; min-height: 240px; } }
.eyebrow { font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl-medium-teal); margin-bottom: var(--space-2); }
.eyebrow--on-dark { color: var(--rl-soft-teal); }
.eyebrow--accent { color: var(--rl-deep-teal); }
.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.cta-row--center { justify-content: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: all var(--motion-default); text-decoration: none; }
.btn--primary { background: var(--rl-dark-navy); color: var(--rl-white); border-color: var(--rl-dark-navy); }
.btn--primary:hover { background: var(--rl-deep-teal); color: var(--rl-white); border-color: var(--rl-deep-teal); }
.btn--ghost-on-dark { background: transparent; color: var(--rl-white); border-color: rgba(255,255,255,0.6); }
.btn--ghost-on-dark:hover { background: rgba(255,255,255,0.12); color: var(--rl-white); border-color: var(--rl-white); }
.btn--lg { padding: 14px 28px; font-size: 1rem; }

/* Sections */
section { padding-block: var(--space-10); }
.surface-tint { background: var(--color-surface-tint); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.25rem); color: var(--color-heading); margin-bottom: var(--space-4); max-width: 28ch; }
.section-intro { font-size: var(--size-md); color: var(--color-text-body); max-width: 65ch; margin-bottom: var(--space-6); line-height: 1.7; }
.section-footer-link { margin-top: var(--space-5); }
.section-footer-link a { font-family: var(--font-display); font-weight: 700; color: var(--rl-deep-teal); }
.prose { font-size: var(--size-md); color: var(--color-text-body); line-height: 1.7; max-width: 70ch; }
.prose + .prose { margin-top: var(--space-4); }
.caption { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-3); font-style: italic; }

/* Grids */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) and (min-width: 901px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }

/* Cards */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); position: relative; transition: box-shadow var(--motion-default), transform var(--motion-default); }
.card:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)); }
.card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--color-heading); margin-bottom: var(--space-2); line-height: 1.3; }
.card p { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-body); }
.card .num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: var(--rl-pale-teal); position: absolute; top: 14px; right: 18px; }

/* Pillar/persona/module/trust/commitment/route/notice cards share base .card */
.pillar-card, .persona-card, .module-card, .trust-card, .commitment-card, .route-card, .notice-card, .doc-card, .sector-card { display: flex; flex-direction: column; }
.sector-card .sector-uses { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-3); }
.doc-card ul { list-style: none; padding-left: 0; margin-top: var(--space-2); }
.doc-card li { padding-block: 8px; border-top: 1px solid var(--color-border); font-size: 0.95rem; }
.doc-card li:first-child { border-top: 0; }
.doc-card--partner { background: var(--color-surface-muted); border-style: dashed; }

/* Tier cards */
.tier-card { border-width: 1.5px; }
.tier-card--auth { border-color: var(--rl-soft-teal); }
.tier-card--adv { border-color: var(--rl-medium-teal); }
.tier-card--prem { border-color: var(--rl-deep-teal); }
.tier-badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.18em; margin-bottom: var(--space-3); }
.tier-badge--auth { background: var(--rl-mist); color: var(--rl-dark-navy); }
.tier-badge--adv { background: var(--rl-medium-teal); color: var(--rl-white); }
.tier-badge--prem { background: var(--rl-deep-teal); color: var(--rl-white); }
.tier-bullets { list-style: none; padding-left: 0; margin: var(--space-3) 0; }
.tier-bullets li { padding: 5px 0; padding-left: 22px; position: relative; font-size: 0.92rem; color: var(--color-text-body); }
.tier-bullets li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 2px; background: var(--rl-medium-teal); }
.tier-discount { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--rl-deep-teal); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

/* Band table */
.band-table { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.band-row { display: grid; grid-template-columns: 200px 1fr 200px; gap: var(--space-4); padding: var(--space-4) var(--space-5); align-items: center; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.band-row:first-child { border-top: 0; }
.band-row--head { background: var(--color-surface-muted); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--color-text-muted); letter-spacing: 0.06em; }
.band-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; }
.band-pill--auth { background: var(--rl-mist); color: var(--rl-dark-navy); }
.band-pill--adv { background: var(--rl-medium-teal); color: var(--rl-white); }
.band-pill--prem { background: var(--rl-deep-teal); color: var(--rl-white); }
.band-num { text-align: right; font-family: var(--font-display); color: var(--color-heading); }
@media (max-width: 700px) { .band-row { grid-template-columns: 1fr; gap: var(--space-2); } .band-num { text-align: left; } }

/* CTA banner */
.cta-banner { padding-block: var(--space-12); text-align: center; background: var(--color-surface); color: var(--color-text-body); }
.cta-banner h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--space-4); max-width: 38ch; margin-inline: auto; color: var(--color-heading); }
.cta-banner.cta-banner--gradient { background: linear-gradient(135deg, var(--rl-dark-navy) 0%, var(--rl-deep-teal) 100%); color: var(--rl-white); }
.cta-banner.cta-banner--gradient h2 { color: var(--rl-white); }
.cta-sub { color: var(--color-text-on-dark-muted); max-width: 60ch; margin: 0 auto var(--space-4); }

/* Diagrams */
.diagram-host { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-3); box-shadow: var(--diagram-shadow-card, 0 2px 6px rgba(0,0,0,0.08)); }

/* Featured / category covers (insights) */
.featured-strip { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-5); }
@media (max-width: 900px) { .featured-strip { grid-template-columns: 1fr; } }
.featured-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-7); }
.featured-card--lead { background: linear-gradient(135deg, var(--rl-dark-navy) 0%, var(--rl-deep-teal) 100%); color: var(--rl-white); border: 0; }
.featured-card--lead h3, .featured-card--lead p, .featured-card--lead .link-arrow { color: var(--rl-white); }
.featured-card--lead .featured-eyebrow { color: var(--rl-soft-teal); }
.featured-eyebrow { font-family: var(--font-display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl-medium-teal); margin-bottom: var(--space-2); }
.featured-card h3 { font-size: 1.4rem; line-height: 1.3; margin-bottom: var(--space-3); }
.featured-card p { margin-bottom: var(--space-3); line-height: 1.65; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; color: var(--rl-deep-teal); }

.category-grid { gap: var(--space-4); }
.category-cover { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); padding: var(--space-5); display: flex; align-items: flex-end; color: var(--rl-white); position: relative; overflow: hidden; }
.category-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(44,74,90,0.18) 0%, rgba(42,107,110,0.55) 100%); pointer-events: none; }
.category-cover--01 { background: linear-gradient(135deg, #2C4A5A 0%, #3D5A6E 100%); }
.category-cover--02 { background: linear-gradient(135deg, #2A6B6E 0%, #5B9EA6 100%); }
.category-cover--03 { background: linear-gradient(135deg, #1B5E40 0%, #2E7D32 100%); }
.category-cover--04 { background: linear-gradient(135deg, #3D5A6E 0%, #5A7A82 100%); }
.category-cover--05 { background: linear-gradient(135deg, #5B9EA6 0%, #2A6B6E 100%); }
.category-cover__inner { position: relative; z-index: 1; }
.category-num { font-family: var(--font-display); font-weight: 900; font-size: 2.5rem; opacity: 0.65; margin-bottom: var(--space-2); line-height: 1; }
.category-cover h3 { color: var(--rl-white); font-size: 1.25rem; margin-bottom: var(--space-2); }
.category-cover p { color: rgba(255,255,255,0.85); font-size: 0.9rem; line-height: 1.5; }

/* Events */
.event-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.event-card { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--rl-medium-teal); border-radius: var(--radius-md); }
.event-date { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--rl-deep-teal); align-self: center; }
.event-body h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
@media (max-width: 700px) { .event-card { grid-template-columns: 1fr; } }

/* Leadership */
.leader-grid { gap: var(--space-5); }
.leader-card { padding: 0; overflow: hidden; }
.leader-portrait { position: relative; background: var(--rl-ice-teal); }
.leader-portrait svg { display: block; width: 100%; height: auto; }
.leader-portrait__caption { position: absolute; bottom: 8px; right: 12px; font-size: 0.7rem; color: var(--rl-slate-teal); background: rgba(255,255,255,0.9); padding: 3px 8px; border-radius: 999px; font-style: italic; }
.leader-body { padding: var(--space-5); }
.leader-body h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.leader-portrait img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.leader-title { font-family: var(--font-body, 'Inter', sans-serif); font-size: var(--size-sm, 0.875rem); font-weight: 600; color: var(--rl-medium-teal, #5B9EA6); margin-bottom: var(--space-2); letter-spacing: 0.01em; }

/* Form */
.form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-7); max-width: 800px; }
.form-card--narrow { max-width: 520px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.form-grid label { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--color-text-primary); gap: 6px; }
.form-grid__full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); font-family: var(--font-body); font-size: 0.95rem; background: var(--color-surface); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 2px solid var(--rl-deep-green); outline-offset: 2px; border-color: var(--rl-deep-teal); }
.form-grid textarea { resize: vertical; min-height: 80px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Route jumplinks (contact) */
.route-jumplinks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.route-jumplinks a { padding: 6px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--color-text-primary); }
.route-jumplinks a:hover { background: var(--rl-pale-teal); border-color: var(--rl-medium-teal); color: var(--rl-dark-navy); }

/* Legal hub tiles */
.legal-tile-grid { gap: var(--space-4); }
.legal-tile { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); color: var(--color-text-primary); transition: all var(--motion-default); text-decoration: none; }
.legal-tile:hover { border-color: var(--rl-medium-teal); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); color: var(--color-text-primary); }
.legal-tile h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; margin-bottom: 6px; color: var(--color-heading); }
.legal-tile p { font-size: 0.88rem; color: var(--color-text-body); line-height: 1.5; }
.legal-tile--partner { background: var(--color-surface-muted); border-style: dashed; }

/* Legal long form */
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: flex-start; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } .legal-aside { order: 2; } }
.legal-aside { position: sticky; top: 90px; }
.legal-toc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.legal-toc__title { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rl-slate-teal); margin-bottom: var(--space-3); }
.legal-toc ol { list-style: decimal inside; padding-left: 0; margin: 0; }
.legal-toc ol li { padding: 4px 0; font-size: 0.85rem; line-height: 1.4; }
.legal-toc a { color: var(--color-text-primary); }
.legal-toc a:hover { color: var(--rl-deep-teal); }
.legal-article { max-width: 70ch; }
.legal-article h1, .legal-article h2, .legal-article h3 { color: var(--color-heading); font-family: var(--font-display); }
.legal-article h2 { font-size: 1.35rem; margin-top: var(--space-7); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.legal-article h2:first-child { margin-top: 0; }
.legal-num { color: var(--rl-medium-teal); margin-right: 8px; }
.legal-article p { font-size: 0.98rem; line-height: 1.75; color: var(--color-text-body); margin-bottom: var(--space-4); }
.legal-section + .legal-section { margin-top: var(--space-2); }

/* Breadcrumbs */
.breadcrumbs ol { list-style: none; padding-left: 0; display: flex; gap: var(--space-2); font-size: 0.85rem; color: var(--color-text-muted); }
.breadcrumbs li::after { content: "/"; margin-left: var(--space-2); color: var(--color-text-light); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-link); }

/* Footer */
.site-footer { background: var(--rl-dark-navy); color: var(--rl-white); padding-block: var(--space-10) var(--space-7); margin-top: var(--space-10); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl-soft-teal); margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-grid a { color: rgba(255,255,255,0.78); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--rl-white); }
.footer-bottom { padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.footer-bottom p { color: rgba(255,255,255,0.62); font-size: 0.82rem; }
.footer-fine { color: rgba(255,255,255,0.45) !important; }

/* Misc */
section { padding-inline: 0; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--space-5); }
@media (min-width: 1200px) { .container { padding-inline: var(--space-6); } }

/* ============================================================
   v0.6.8 — Modifier and identity classes (HR11 documentation)
   These classes are referenced from HTML/SVG for HR12 lint and
   for visual differentiation / page identity. They inherit
   from the base classes; the empty rulesets exist to document
   the class names and prevent HR11 "undefined" flagging.
   ============================================================ */

.architecture-diagram,
.zra-diagram,
.channel-flow,
.band-viz {
  /* HR12 inline-SVG identity classes; styling delegated to inline attributes */
}

/* HR12 exempt brand identity */
.brand-mark { /* see data-lint-exempt; asymmetric design is the identity */ }

/* Section-scoped grid modifiers (inherit from .grid) */
.module-grid,
.tier-grid,
.sector-grid,
.company-grid,
.leader-grid {
  /* page-identity grid modifiers; layout from base .grid */
}

/* Legal body section wrapper */
.legal-body {
  background: var(--color-bg);
  padding-block: var(--space-8) var(--space-12);
}

/* Product usage gallery (Imagery Refresh 05312026) */
.usage-grid { gap: var(--space-5); }
.usage-card { padding: 0; overflow: hidden; }
.usage-card img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--rl-ice-teal, #C5DDD9); }
.usage-card figcaption { padding: var(--space-4, 1rem); font-size: var(--size-sm, 0.875rem); color: var(--color-text-body, #3D5A6E); line-height: var(--lh-relaxed, 1.6); }
.usage-card figcaption strong { color: var(--rl-dark-navy, #2C4A5A); }


/* ---- Edits 06022026: number clearance, discount cards, two-column header ---- */
.module-card h3, .commitment-card h3, .route-card h3 { padding-right: 2.9rem; }
.disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-5); align-items: stretch; }
@media (max-width: 1080px) { .disc-grid { grid-template-columns: 1fr; } }
.disc-card { padding: var(--space-7); }
.disc-sub { font-size: 0.92rem; color: var(--color-text-muted); margin: 4px 0 0; }
.disc-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-6) 0 var(--space-4); }
.disc-level { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.disc-badge { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; padding: 5px 13px; border-radius: 999px; }
.disc-badge--silver { background: #E6EDED; color: #3D5A6E; }
.disc-badge--gold { background: #B5D5D1; color: #234A4A; }
.disc-badge--plat { background: #2A6B6E; color: #FFFFFF; }
.disc-pct { font-family: var(--font-display); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--rl-dark-navy); }
.disc-foot { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-3); }
.section-head-2col { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-9); align-items: start; }
.section-head-2col .section-intro, .section-head-2col .lede, .section-head-2col .prose { max-width: none; margin: 6px 0 0; }
@media (max-width: 880px) { .section-head-2col { grid-template-columns: 1fr; gap: var(--space-5); } }


/* ---- Edits 06022026b: spread heading body text wider; revert two-column ---- */
.section-intro, .lede, .hero .lede, .prose, .prose p { max-width: none; }
.prose { margin-left: 0; margin-right: 0; }

/* make-it-so batch 06042026 */
.caption { text-align: center; }
.section-centered .eyebrow, .section-centered .section-title, .section-centered .section-intro, .section-centered .prose { text-align: center; }
.section-centered .prose { margin-left: auto; margin-right: auto; max-width: 80ch; }
.cta-banner h2 { font-weight: 600; }

.pricing-figure{margin-top:var(--space-6);border-radius:16px;overflow:hidden;box-shadow:0 18px 50px -30px rgba(44,74,90,.55);border:1px solid var(--color-border,#C5DDD9)}
.pricing-figure img{display:block;width:100%;height:auto}

/* Chris preference 06042026: body text spans the full content pane. No half-page max-width on prose/intro/lede/caption. */
.section-intro, .lede, .hero .lede, .prose, .prose p, .caption { max-width: none !important; }
.section-centered .prose { max-width: none; }

.data-table-wrap { overflow-x: auto; margin-top: var(--space-4); }

/* ---- Legal document layout (06112026) ---- */
main.legal-doc .lede { text-align: left; }
.legal-doc h2 { margin: 1.15em 0 0.25em; }
.legal-doc h3 { margin: 0.8em 0 0.2em; }
.legal-doc p { margin: 0 0 0.8em; text-align: justify; }
.legal-doc ol.romanette { list-style: none; counter-reset: rom; margin: 0 0 0.85em; padding-left: 2.4em; }
.legal-doc ol.romanette > li { counter-increment: rom; margin: 0 0 0.35em; position: relative; text-align: justify; }
.legal-doc ol.romanette > li::before { content: "(" counter(rom, lower-roman) ")"; position: absolute; left: -2.4em; width: 2em; text-align: right; color: var(--rl-deep-teal, #2A6B6E); }
.legal-doc table { border-collapse: collapse; width: 100%; margin: 0.6em 0 1.1em; font-size: 0.95rem; }
.legal-doc table th, .legal-doc table td { border: 1px solid #2C4A5A; padding: 7px 11px; text-align: left; vertical-align: top; }
.legal-doc table thead th { background: #ECF5F4; color: #2C4A5A; font-weight: 700; }
.legal-doc table td.row-label, .legal-doc table .row-label { font-weight: 600; }
.legal-doc dl { margin: 0 0 0.8em; }

/* ---- Contact selectable pane (06112026) ---- */
.cpane > input[type="radio"] { position: absolute; left: -9999px; }
.cpane-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--rl-ice-teal, #C5DDD9); margin-bottom: var(--space-7); }
.cpane-tabs label { cursor: pointer; padding: 12px 20px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--rl-slate-teal, #5A7A82); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.cpane-tabs label:hover { color: var(--rl-deep-teal, #2A6B6E); }
.cpane-panels .cpanel { display: none; }
#ct-demo:checked ~ .cpane-panels .cpanel--demo,
#ct-partner:checked ~ .cpane-panels .cpanel--partner,
#ct-trust:checked ~ .cpane-panels .cpanel--trust,
#ct-press:checked ~ .cpane-panels .cpanel--press,
#ct-general:checked ~ .cpane-panels .cpanel--general { display: block; }
#ct-demo:checked ~ .cpane-tabs label[for="ct-demo"],
#ct-partner:checked ~ .cpane-tabs label[for="ct-partner"],
#ct-trust:checked ~ .cpane-tabs label[for="ct-trust"],
#ct-press:checked ~ .cpane-tabs label[for="ct-press"],
#ct-general:checked ~ .cpane-tabs label[for="ct-general"] { color: var(--rl-dark-navy, #2C4A5A); border-bottom-color: var(--rl-medium-teal, #5B9EA6); }
.cpane-tabs label:focus-within, .cpane > input[type="radio"]:focus ~ .cpane-tabs label { outline: 2px solid var(--rl-medium-teal,#5B9EA6); }

/* ---- Legal tight spacing (06112026) ---- */
.legal-tight .policy-body { padding-block: var(--space-5) var(--space-8); }
.legal-tight section[id] { padding-block: 0; }
.legal-tight section[id] h2 { margin: 0.55em 0 0.1em; }
.legal-tight section[id] h3 { margin: 0.4em 0 0.08em; }
.legal-tight p { margin: 0 0 0.6em; }
.legal-tight ol.romanette { margin: 0.15em 0 0.6em; }
.legal-tight ol.romanette > li { margin: 0 0 0.2em; }
.legal-tight table { margin: 0.4em 0 0.7em; }

/* ---- cta-banner gradient text legibility (06112026) ---- */
.cta-banner--gradient { color: #FFFFFF; }
.cta-banner--gradient h2 { color: #FFFFFF; }
.cta-banner--gradient .cta-sub { color: rgba(255,255,255,0.9); }

/* Insights category covers now clickable (Fable #6) */
a.category-cover { text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.category-cover:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(44,74,90,0.18); }
a.category-cover:focus-visible { outline: 3px solid #005c2e; outline-offset: 3px; }

/* Multi-select listboxes -> checkbox groups (Fable #7) */
.checkbox-group { border: 1px solid var(--rl-ice-teal, #C5DDD9); border-radius: 10px; padding: var(--space-4) var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.checkbox-group legend { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--rl-slate-teal, #5A7A82); padding: 0 6px; }
.checkbox-group .checkbox { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 0; cursor: pointer; }
.checkbox-group .checkbox input { width: 18px; height: 18px; accent-color: #2A6B6E; flex: 0 0 auto; }
@media (max-width: 640px) { .checkbox-group { grid-template-columns: 1fr; } }

/* HubSpot form submit states */
.form-success { background: var(--rl-pale-teal, #B5D5D1); border: 1px solid var(--rl-ice-teal, #C5DDD9); border-radius: 12px; padding: var(--space-7); }
.form-success h3 { margin: 0 0 0.4em; color: #1B5E40; font-family: var(--font-display); }
.form-success p { margin: 0; color: #2C4A5A; }
.form-error { margin: var(--space-4) 0 0; color: #b3261e; font-weight: 600; }