/* =========================================================
   OpsATC.AI — design system
   Synthesized from Stripe, Linear, Vercel, Anthropic, Datadog,
   Palantir, Snowflake, HashiCorp, Notion. Dark canvas; cyan +
   lime accents; oversized typography; minimal borders; ambient
   depth via shadow + transparency.
   ========================================================= */

:root {
  /* === BLUEPRINT MID-BLUE CANVAS (Pass 1 of brand refresh) === */
  /* Background — mid-tone blue paper, lighter values are deeper-numbered
     for visual hierarchy. Same variable names as before so existing
     components cascade automatically. */
  --bg-0: #D8E1EE;          /* page bg — mid blueprint blue */
  --bg-1: #C9D4E4;          /* card / panel */
  --bg-2: #BAC7DA;          /* deeper panel */
  --bg-3: #ABBACE;          /* even deeper */
  --bg-4: #9CADC2;          /* deepest panel variant */

  /* Surface tints — now subtle dark-on-light overlays */
  --surface-glass: rgba(216, 225, 238, 0.85);
  --surface-glass-strong: rgba(216, 225, 238, 0.95);
  --surface-card: rgba(11, 23, 38, 0.04);
  --surface-card-hover: rgba(11, 23, 38, 0.07);

  /* Lines — navy with opacity, replacing white-with-opacity */
  --line-faint: rgba(11, 23, 38, 0.10);
  --line-soft: rgba(11, 23, 38, 0.18);
  --line-strong: rgba(11, 23, 38, 0.28);

  /* Text — deep navy series, inverted from the dark-mode near-whites */
  --text-1: #0B1726;        /* primary text — deep navy */
  --text-2: #243349;        /* secondary */
  --text-3: #506178;        /* muted */
  --text-4: #7A8AA0;        /* faint */

  /* Brand accents — deepened so cyan and lime pop on light bg.
     The old --cyan-400 (#22D3EE bright) becomes --cyan-400 (#0E7490 deep teal),
     etc. Existing component code that references --cyan-400 keeps working
     but renders in the new deeper hue. */
  --cyan-500: #155E75;       /* deepest teal — for dark accents */
  --cyan-400: #0E7490;       /* primary cyan-teal accent */
  --cyan-300: #0891B2;       /* secondary lighter teal */
  --cyan-glow: rgba(14, 116, 144, 0.25);

  --lime-500: #3F6212;       /* deepest forest */
  --lime-400: #4D7C0F;       /* primary lime-forest accent */
  --lime-300: #65A30D;       /* secondary lighter forest */
  --lime-glow: rgba(77, 124, 15, 0.22);

  /* Functional — unchanged, work on light or dark */
  --success: #10B981;
  --warn: #F59E0B;
  --error: #EF4444;
  --rose-300: #FCA5A5;       /* soft rose for negative/✗ accents in cards */

  /* Typography — added Crimson Pro serif (will land in Pass 5 for headlines) */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radius — unchanged for Pass 1 (button radius tightening lands in Pass 5) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation — softened for light bg (drop shadows less aggressive) */
  --shadow-1: 0 1px 2px rgba(11, 23, 38, 0.08);
  --shadow-2: 0 4px 12px rgba(11, 23, 38, 0.10);
  --shadow-3: 0 12px 32px rgba(11, 23, 38, 0.15);
  --shadow-glow-cyan: 0 0 40px var(--cyan-glow);
  --shadow-glow-lime: 0 0 40px var(--lime-glow);

  /* Motion */
  --ease-snappy: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --nav-h: 64px;
}

/* =================== reset & base ==================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ambient gradient mesh — sits behind everything.
   Tints adjusted for the lighter blueprint bg: keeps the cyan/lime/indigo
   energy but at slightly higher opacity since they're now layering over a
   light background instead of dark. */
body::before {
  content: "";
  position: fixed;
  inset: -10% -10% auto -10%;
  height: 80vh;
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(14, 116, 144, 0.10), transparent 60%),
    radial-gradient(50% 50% at 80% 0%, rgba(77, 124, 15, 0.08), transparent 60%),
    radial-gradient(50% 50% at 50% 0%, rgba(99, 102, 241, 0.06), transparent 70%);
  pointer-events: none;
  z-index: -1;
  filter: blur(20px);
}

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

a {
  color: var(--cyan-400);
  text-decoration: none;
  transition: color 200ms var(--ease-snappy);
}
a:hover { color: var(--cyan-500); }

::selection { background: rgba(14, 116, 144, 0.25); color: var(--text-1); }

/* =================== typography ====================== */
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--text-1);
}
/* H1 = page-level "moment" headlines. Crimson Pro serif gives them an
   editorial weight that lifts the brand away from generic-SaaS sans-serif.
   H2/H3 stay in Inter sans for skimmability across product/feature sections. */
.h1, h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.018em;
  font-weight: 600;
  line-height: 1.08;
}
.h2, h2 { font-size: clamp(1.875rem, 4vw, 3rem); text-wrap: balance; }
.h3, h3 { font-size: clamp(1.375rem, 2.5vw, 1.875rem); }
.h4, h4 { font-size: 1.125rem; }

/* Page-tight H1 variant — used by interior pages (approach, build, resources,
   platform) where the default 4.5rem H1 cap reads too monumentally against
   denser editorial content. Single canonical class replaces the per-page
   inline overrides. */
.h1-page-tight {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* === Training & enablement grid (approach.html) ===
   Three-card layout that visually distinguishes the training tracks from the
   stacked Six Commitments numbered-list later on the page. The pill is the
   focal element — color-coded (cyan = commitment, lime = recommendation),
   centered horizontally at the top of each card. */
.training-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.training-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.training-card:hover {
  border-color: rgba(14, 116, 144, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 116, 144, 0.08);
}
.training-pill {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-2);
}
.training-pill.cyan {
  color: var(--cyan-400);
  background: rgba(14, 116, 144, 0.10);
  border: 1px solid rgba(14, 116, 144, 0.32);
}
.training-pill.lime {
  color: var(--lime-400);
  background: rgba(77, 124, 15, 0.10);
  border: 1px solid rgba(77, 124, 15, 0.32);
}
.training-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-1);
  margin: 0;
  letter-spacing: -0.01em;
}
.training-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}
.training-body a {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px dotted rgba(14, 116, 144, 0.4);
}
.training-body a:hover { color: var(--cyan-300); }
@media (max-width: 880px) {
  .training-grid { grid-template-columns: 1fr; }
}

/* MCP-native section row patterns — consolidates 10 inline flex-row blocks
   in platform.html #mcp-native plus the 6 numbered architectural principles.
   Color / icon variants stay inline since they're semantic indicators
   (cyan-400 = "what we need / phase 1", lime-400 = "what we don't / roadmap"). */
.mcp-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
}
.mcp-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mcp-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan-400);
  padding-top: 3px;
  flex-shrink: 0;
}

/* Bare list — strips bullet/padding only. Use when a list should stack
   block-style without bullets and without forced spacing (platform portal
   feature lists). */
.list-bare {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Stripped list — bare-list base + grid layout with default 10px gap.
   Use for checklist/feature lists that need consistent vertical rhythm
   (demo deliverables list, approach commitment lists). */
.list-stripped {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* Soft body-text link — dotted cyan underline used in prose, FAQ answers,
   and inline references. Single utility replaces the hand-rolled inline
   variants across demo, resources, for-* pages. */
.link-soft {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px dotted rgba(14, 116, 144, 0.4);
  transition: color 0.15s, border-color 0.15s;
}
.link-soft:hover,
.link-soft:focus {
  color: var(--cyan-300);
  border-bottom-color: rgba(8, 145, 178, 0.6);
}

/* Drop-cap utility — opening paragraph of long-form content gets a serif
   first-letter flourish in the brand cyan. Apply to the parent element. */
.drop-cap > p:first-of-type::first-letter,
p.drop-cap::first-letter {
  font-family: var(--font-serif);
  font-size: 4em;
  float: left;
  line-height: 0.85;
  margin: 8px 12px 0 0;
  color: var(--cyan-400);
  font-weight: 600;
}

p { margin: 0 0 1em; color: var(--text-2); }
p.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 600;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 12px var(--cyan-glow);
}

.gradient-text {
  display: inline-block;
  background: linear-gradient(110deg, var(--cyan-400) 0%, var(--lime-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

/* =================== layout ========================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.container.narrow { max-width: var(--container-narrow); }
.container.wide   { max-width: 1400px; }

section { position: relative; }
/* Section padding is set in the grids block above using clamp() for consistent rhythm */

/* === Section dividers — brand-coherent transitions between sections.
   Three dividers, used in increasing order of "weight":

   • .divider-horizon     — thin cyan-tinted gradient line. Standard transition.
   • .divider-scope       — horizon line + centered scope dot. Major pivots.
   • .divider-asterism    — three-asterisk chapter break. Long-form content only.

   Place each divider as its OWN element BETWEEN <section>s, not inside them. === */

.divider-horizon {
  position: relative;
  height: 1px;
  margin: var(--s-7) auto;
  max-width: 720px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cyan-400) 50%,
    transparent 100%);
  opacity: 0.55;
}

.divider-scope {
  position: relative;
  height: 18px;
  margin: var(--s-7) auto;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.divider-scope::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cyan-400) 50%,
    transparent 100%);
  opacity: 0.55;
}
.divider-scope-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 1.5px solid var(--cyan-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(14, 116, 144, 0.20);
}
.divider-scope-dot::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan-400);
}

.divider-asterism {
  position: relative;
  height: 6px;
  margin: var(--s-2) auto;
  max-width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* legacy serif glyph hidden — replaced by thin rule + pulse */
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
}
.divider-asterism::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(14,116,144,0.32) 50%,
    transparent 100%);
}
.divider-asterism::after {
  content: '';
  position: relative;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-400);
  opacity: 0.55;
}

/* === Section tints — visual differentiation between major page sections.
   Apply as a class on the <section> element. Each tint produces a subtle
   shift from the page background so adjacent sections feel distinct
   without breaking the overall blueprint-blue brand environment. === */
section.tint-cyan {
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.045) 0%, transparent 80%);
}
section.tint-lime {
  background: linear-gradient(180deg, rgba(77, 124, 15, 0.045) 0%, transparent 80%);
}
section.tint-deeper {
  background: var(--bg-1);
}
section.tint-warm {
  background: linear-gradient(180deg, transparent 0%, rgba(11, 23, 38, 0.025) 100%);
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}

.hr-section {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-soft), transparent);
  border: 0;
  margin: 0;
}

/* ===================================================================
   BACKGROUND WATERMARK SYSTEM
   ===================================================================
   Subtle environmental graphics that sit BEHIND content. Apply as a
   class on a <section> element. Each watermark pseudo-element renders
   at low opacity (3-6%), pointer-events:none, z-index:0. Section
   children automatically lift above via .bg-watermark > * { z-index:1 }.

   Variants:
   • .bg-radar-tr      — half-radar concentric arcs in the top-right
   • .bg-radar-bl      — half-radar concentric arcs in the bottom-left
   • .bg-radar-tl      — half-radar concentric arcs in the top-left
   • .bg-radar-br      — half-radar concentric arcs in the bottom-right
   • .bg-lattice-fine  — fine cross-hatch lattice texture (whole section)
   • .bg-scope-ghost   — single faded scope sweep, off-center
   • .bg-horizon-faded — soft horizontal contour lines (CTA bands)

   Be sparing. Recommend 1 watermark per page max, 2 across long pages.
   Never combine on the same section. Respects prefers-reduced-motion
   (no animation in any watermark).
=================================================================== */
.bg-radar-tr,
.bg-radar-bl,
.bg-radar-tl,
.bg-radar-br,
.bg-lattice-fine,
.bg-scope-ghost,
.bg-horizon-faded {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.bg-radar-tr > *,
.bg-radar-bl > *,
.bg-radar-tl > *,
.bg-radar-br > *,
.bg-lattice-fine > *,
.bg-scope-ghost > *,
.bg-horizon-faded > * {
  position: relative;
  z-index: 1;
}
.bg-radar-tr::before,
.bg-radar-bl::before,
.bg-radar-tl::before,
.bg-radar-br::before,
.bg-lattice-fine::before,
.bg-scope-ghost::before,
.bg-horizon-faded::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
}

/* Half-radar — top-right corner.
   Encodes 5 concentric scope arcs + radial guide lines + scope dots as
   inline SVG data URI. Stroke is cyan-700 #0E7490 at 28% opacity.
   Larger, bolder, more visible than the original draft. */
.bg-radar-tr::before {
  top: -200px;
  right: -200px;
  width: 640px;
  height: 640px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.28' stroke-linecap='round'%3E%3Ccircle cx='640' cy='0' r='160' stroke-width='1.4'/%3E%3Ccircle cx='640' cy='0' r='240' stroke-width='1.2' stroke-dasharray='3 7'/%3E%3Ccircle cx='640' cy='0' r='320' stroke-width='1' stroke-dasharray='3 7'/%3E%3Ccircle cx='640' cy='0' r='400' stroke-width='0.9' stroke-dasharray='3 9'/%3E%3Ccircle cx='640' cy='0' r='480' stroke-width='0.7' stroke-dasharray='3 11'/%3E%3Ccircle cx='640' cy='0' r='560' stroke-width='0.6' stroke-dasharray='3 13'/%3E%3Cline x1='640' y1='0' x2='80' y2='0' stroke-width='0.7'/%3E%3Cline x1='640' y1='0' x2='200' y2='200' stroke-width='0.7'/%3E%3Cline x1='640' y1='0' x2='400' y2='400' stroke-width='0.7'/%3E%3Cline x1='640' y1='0' x2='640' y2='560' stroke-width='0.7'/%3E%3Cline x1='640' y1='0' x2='80' y2='400' stroke-width='0.7'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.5'%3E%3Ccircle cx='480' cy='0' r='3'/%3E%3Ccircle cx='640' cy='160' r='3'/%3E%3Ccircle cx='527' cy='113' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 640px 640px;
}

/* Half-radar — bottom-left corner */
.bg-radar-bl::before {
  bottom: -200px;
  left: -200px;
  width: 640px;
  height: 640px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.28' stroke-linecap='round'%3E%3Ccircle cx='0' cy='640' r='160' stroke-width='1.4'/%3E%3Ccircle cx='0' cy='640' r='240' stroke-width='1.2' stroke-dasharray='3 7'/%3E%3Ccircle cx='0' cy='640' r='320' stroke-width='1' stroke-dasharray='3 7'/%3E%3Ccircle cx='0' cy='640' r='400' stroke-width='0.9' stroke-dasharray='3 9'/%3E%3Ccircle cx='0' cy='640' r='480' stroke-width='0.7' stroke-dasharray='3 11'/%3E%3Ccircle cx='0' cy='640' r='560' stroke-width='0.6' stroke-dasharray='3 13'/%3E%3Cline x1='0' y1='640' x2='560' y2='640' stroke-width='0.7'/%3E%3Cline x1='0' y1='640' x2='400' y2='240' stroke-width='0.7'/%3E%3Cline x1='0' y1='640' x2='200' y2='440' stroke-width='0.7'/%3E%3Cline x1='0' y1='640' x2='560' y2='400' stroke-width='0.7'/%3E%3Cline x1='0' y1='640' x2='0' y2='80' stroke-width='0.7'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.5'%3E%3Ccircle cx='160' cy='640' r='3'/%3E%3Ccircle cx='0' cy='480' r='3'/%3E%3Ccircle cx='113' cy='527' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 640px 640px;
}

/* Half-radar — top-left corner */
.bg-radar-tl::before {
  top: -200px;
  left: -200px;
  width: 640px;
  height: 640px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.28' stroke-linecap='round'%3E%3Ccircle cx='0' cy='0' r='160' stroke-width='1.4'/%3E%3Ccircle cx='0' cy='0' r='240' stroke-width='1.2' stroke-dasharray='3 7'/%3E%3Ccircle cx='0' cy='0' r='320' stroke-width='1' stroke-dasharray='3 7'/%3E%3Ccircle cx='0' cy='0' r='400' stroke-width='0.9' stroke-dasharray='3 9'/%3E%3Ccircle cx='0' cy='0' r='480' stroke-width='0.7' stroke-dasharray='3 11'/%3E%3Ccircle cx='0' cy='0' r='560' stroke-width='0.6' stroke-dasharray='3 13'/%3E%3Cline x1='0' y1='0' x2='560' y2='0' stroke-width='0.7'/%3E%3Cline x1='0' y1='0' x2='400' y2='400' stroke-width='0.7'/%3E%3Cline x1='0' y1='0' x2='0' y2='560' stroke-width='0.7'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.5'%3E%3Ccircle cx='160' cy='0' r='3'/%3E%3Ccircle cx='0' cy='160' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 640px 640px;
}

/* Half-radar — bottom-right corner */
.bg-radar-br::before {
  bottom: -200px;
  right: -200px;
  width: 640px;
  height: 640px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.28' stroke-linecap='round'%3E%3Ccircle cx='640' cy='640' r='160' stroke-width='1.4'/%3E%3Ccircle cx='640' cy='640' r='240' stroke-width='1.2' stroke-dasharray='3 7'/%3E%3Ccircle cx='640' cy='640' r='320' stroke-width='1' stroke-dasharray='3 7'/%3E%3Ccircle cx='640' cy='640' r='400' stroke-width='0.9' stroke-dasharray='3 9'/%3E%3Ccircle cx='640' cy='640' r='480' stroke-width='0.7' stroke-dasharray='3 11'/%3E%3Ccircle cx='640' cy='640' r='560' stroke-width='0.6' stroke-dasharray='3 13'/%3E%3Cline x1='640' y1='640' x2='80' y2='640' stroke-width='0.7'/%3E%3Cline x1='640' y1='640' x2='240' y2='240' stroke-width='0.7'/%3E%3Cline x1='640' y1='640' x2='640' y2='80' stroke-width='0.7'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.5'%3E%3Ccircle cx='480' cy='640' r='3'/%3E%3Ccircle cx='640' cy='480' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 640px 640px;
}

/* Lattice — fine cross-hatch grid covering the whole section.
   Two crossed gradients keep this CSS-only (no SVG). 2x previous strength. */
.bg-lattice-fine::before {
  inset: 0;
  background-image:
    linear-gradient(0deg, rgba(14, 116, 144, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 116, 144, 0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
  /* fade outward so the lattice doesn't fight section edges */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 75%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 75%, transparent 100%);
}

/* Scope ghost — a faded scope/crosshair element off-center,
   like a watchtower silhouette in the distance. Right-side, vertically centered. */
.bg-scope-ghost::before {
  top: 50%;
  right: -120px;
  width: 440px;
  height: 440px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 440'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.22'%3E%3Ccircle cx='220' cy='220' r='200' stroke-width='1.3'/%3E%3Ccircle cx='220' cy='220' r='150' stroke-width='1' stroke-dasharray='3 7'/%3E%3Ccircle cx='220' cy='220' r='100' stroke-width='0.8' stroke-dasharray='2 5'/%3E%3Ccircle cx='220' cy='220' r='50' stroke-width='0.7'/%3E%3Cline x1='20' y1='220' x2='420' y2='220' stroke-width='0.6'/%3E%3Cline x1='220' y1='20' x2='220' y2='420' stroke-width='0.6'/%3E%3Cline x1='95' y1='95' x2='345' y2='345' stroke-width='0.5' stroke-dasharray='2 4' stroke-opacity='0.6'/%3E%3Cline x1='345' y1='95' x2='95' y2='345' stroke-width='0.5' stroke-dasharray='2 4' stroke-opacity='0.6'/%3E%3C/g%3E%3Ccircle cx='220' cy='220' r='6' fill='%230E7490' fill-opacity='0.4'/%3E%3Cg fill='%230E7490' fill-opacity='0.45'%3E%3Ccircle cx='280' cy='160' r='3'/%3E%3Ccircle cx='160' cy='280' r='3'/%3E%3Ccircle cx='320' cy='280' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 440px 440px;
}

/* Horizon faded — horizontal contour lines suggestive of distance.
   Best for CTA bands and footer-adjacent sections. 2x previous strength. */
.bg-horizon-faded::before {
  inset: 0;
  background-image:
    linear-gradient(180deg,
      transparent 0,
      transparent calc(50% - 80px),
      rgba(14, 116, 144, 0.16) calc(50% - 80px),
      rgba(14, 116, 144, 0.16) calc(50% - 79px),
      transparent calc(50% - 79px),
      transparent calc(50% - 40px),
      rgba(14, 116, 144, 0.12) calc(50% - 40px),
      rgba(14, 116, 144, 0.12) calc(50% - 39px),
      transparent calc(50% - 39px),
      transparent 50%,
      rgba(14, 116, 144, 0.18) 50%,
      rgba(14, 116, 144, 0.18) calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent calc(50% + 40px),
      rgba(14, 116, 144, 0.12) calc(50% + 40px),
      rgba(14, 116, 144, 0.12) calc(50% + 41px),
      transparent calc(50% + 41px),
      transparent calc(50% + 80px),
      rgba(14, 116, 144, 0.10) calc(50% + 80px),
      rgba(14, 116, 144, 0.10) calc(50% + 81px),
      transparent calc(50% + 81px));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.85) 20%, rgba(0,0,0,0.85) 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.85) 20%, rgba(0,0,0,0.85) 80%, transparent 100%);
}

/* ===================================================================
   HERO ZONE BACKGROUNDS — page-signature graphics
   ===================================================================
   Apply directly to a <header class="hero"> element. Each one is a
   bold, full-bleed graphic that gives the top section of a page a
   unique design identity. Sits behind the .container content so the
   eyebrow + H1 + lead remain primary.

   Stronger opacity (15-22%) than corner watermarks so they read as
   intentional design, not texture.

   Variants:
   • .hero-bg-watchtower   — monumental scope rings + sweep, centered (homepage)
   • .hero-bg-blueprint    — engineered grid + axis ticks (platform/build)
   • .hero-bg-topograph    — topographic contour lines (about/journey pages)
   • .hero-bg-network      — node graph mesh (distributors/integrators)
   • .hero-bg-flow         — directional flow arrows (contract manufacturers)
   • .hero-bg-vault        — ledger/audit lines (trust)
   • .hero-bg-transmission — emanating signal arcs (resources)
=================================================================== */
.hero.hero-bg-watchtower,
.hero.hero-bg-blueprint,
.hero.hero-bg-topograph,
.hero.hero-bg-network,
.hero.hero-bg-flow,
.hero.hero-bg-vault,
.hero.hero-bg-transmission,
.hero.hero-bg-constellation,
.hero.hero-bg-scaffold,
.hero.hero-bg-dotmatrix,
.hero.hero-bg-sonar,
.hero.hero-bg-circuit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero.hero-bg-watchtower > *,
.hero.hero-bg-blueprint > *,
.hero.hero-bg-topograph > *,
.hero.hero-bg-network > *,
.hero.hero-bg-flow > *,
.hero.hero-bg-vault > *,
.hero.hero-bg-transmission > *,
.hero.hero-bg-constellation > *,
.hero.hero-bg-scaffold > *,
.hero.hero-bg-dotmatrix > *,
.hero.hero-bg-sonar > *,
.hero.hero-bg-circuit > * {
  position: relative;
  z-index: 1;
}
.hero.hero-bg-watchtower::before,
.hero.hero-bg-blueprint::before,
.hero.hero-bg-topograph::before,
.hero.hero-bg-network::before,
.hero.hero-bg-flow::before,
.hero.hero-bg-vault::before,
.hero.hero-bg-transmission::before,
.hero.hero-bg-constellation::before,
.hero.hero-bg-scaffold::before,
.hero.hero-bg-dotmatrix::before,
.hero.hero-bg-sonar::before,
.hero.hero-bg-circuit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
}

/* WATCHTOWER — concentric scope rings, sweep beam, cardinal + diagonal tick
   marks, and scattered scope-contact dots. Reads as a fully-staged radar
   illustration at the page edges; an aggressive center-fade mask carves out
   the headline zone so the H1 sits in clear negative space. */
.hero.hero-bg-watchtower::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.46'%3E%3Ccircle cx='800' cy='400' r='720' stroke-width='1.2' stroke-dasharray='3 12'/%3E%3Ccircle cx='800' cy='400' r='560' stroke-width='1.4' stroke-dasharray='3 10'/%3E%3Ccircle cx='800' cy='400' r='420' stroke-width='1.5' stroke-dasharray='3 8'/%3E%3Ccircle cx='800' cy='400' r='280' stroke-width='1.5'/%3E%3Ccircle cx='800' cy='400' r='140' stroke-width='1.4' stroke-dasharray='2 6'/%3E%3Ccircle cx='800' cy='400' r='70' stroke-width='1.3'/%3E%3C/g%3E%3Cpath d='M 800 400 L 1423 40 A 720 720 0 0 1 1485 178 Z' fill='%230E7490' fill-opacity='0.14'/%3E%3Cg stroke='%230E7490' stroke-opacity='0.55' stroke-width='1.3'%3E%3Cline x1='800' y1='60' x2='800' y2='130'/%3E%3Cline x1='800' y1='670' x2='800' y2='740'/%3E%3Cline x1='60' y1='400' x2='130' y2='400'/%3E%3Cline x1='1470' y1='400' x2='1540' y2='400'/%3E%3Cline x1='574' y1='174' x2='620' y2='220'/%3E%3Cline x1='1026' y1='592' x2='980' y2='638'/%3E%3Cline x1='1026' y1='208' x2='980' y2='162'/%3E%3Cline x1='574' y1='626' x2='620' y2='580'/%3E%3C/g%3E%3Cg stroke='%230E7490' stroke-opacity='0.45' stroke-width='1'%3E%3Cline x1='730' y1='400' x2='870' y2='400'/%3E%3Cline x1='800' y1='330' x2='800' y2='470'/%3E%3C/g%3E%3Ccircle cx='800' cy='400' r='14' fill='%230E7490' fill-opacity='0.55'/%3E%3Ccircle cx='800' cy='400' r='6' fill='%2322D3EE' fill-opacity='0.75'/%3E%3Cg fill='%230E7490' fill-opacity='0.68'%3E%3Ccircle cx='160' cy='220' r='4'/%3E%3Ccircle cx='1440' cy='220' r='4'/%3E%3Ccircle cx='160' cy='580' r='4'/%3E%3Ccircle cx='1440' cy='580' r='4'/%3E%3Ccircle cx='280' cy='100' r='3'/%3E%3Ccircle cx='1320' cy='100' r='3'/%3E%3Ccircle cx='280' cy='700' r='3'/%3E%3Ccircle cx='1320' cy='700' r='3'/%3E%3Ccircle cx='480' cy='180' r='2.5'/%3E%3Ccircle cx='1120' cy='620' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  /* Composite mask: center-fade radial AND a corner-clearing radial anchored
     at the upper-left so the nav logo + slogan zone (~first 20% width, top
     25% height) stays clean. With mask-composite intersect, the watermark
     renders only where BOTH masks are opaque — so the transparent center of
     the corner mask carves out the upper-left. */
  -webkit-mask-image:
    radial-gradient(ellipse 50% 62% at center, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 12%, rgba(0,0,0,0.05) 38%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,1) 100%),
    radial-gradient(ellipse 22% 28% at 0% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,1) 100%);
          mask-image:
    radial-gradient(ellipse 50% 62% at center, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 12%, rgba(0,0,0,0.05) 38%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,1) 100%),
    radial-gradient(ellipse 22% 28% at 0% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,1) 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* BLUEPRINT — engineering-drawing scaffolding with proper presence. Bold frame
   border in cyan-800, edge tick marks every ~200 viewBox-px, and corner ruler
   measurement marks at all four corners. Stronger opacity so the watermark
   reads as intentional design at the page edges. Center mask-fade keeps the
   headline area clear. */
.hero.hero-bg-blueprint::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230B5566' stroke-opacity='0.80' stroke-width='1.8' fill='none'%3E%3Cline x1='80' y1='80' x2='80' y2='720'/%3E%3Cline x1='1520' y1='80' x2='1520' y2='720'/%3E%3Cline x1='80' y1='80' x2='1520' y2='80'/%3E%3Cline x1='80' y1='720' x2='1520' y2='720'/%3E%3C/g%3E%3Cg stroke='%230B5566' stroke-opacity='0.25' stroke-width='0.8' fill='none'%3E%3Cline x1='80' y1='160' x2='1520' y2='160'/%3E%3Cline x1='80' y1='240' x2='1520' y2='240'/%3E%3Cline x1='80' y1='320' x2='1520' y2='320'/%3E%3Cline x1='80' y1='400' x2='1520' y2='400'/%3E%3Cline x1='80' y1='480' x2='1520' y2='480'/%3E%3Cline x1='80' y1='560' x2='1520' y2='560'/%3E%3Cline x1='80' y1='640' x2='1520' y2='640'/%3E%3C/g%3E%3Cg stroke='%230B5566' stroke-opacity='0.70' stroke-width='1.2' fill='none'%3E%3Cline x1='240' y1='64' x2='240' y2='96'/%3E%3Cline x1='400' y1='64' x2='400' y2='96'/%3E%3Cline x1='560' y1='64' x2='560' y2='96'/%3E%3Cline x1='720' y1='64' x2='720' y2='96'/%3E%3Cline x1='880' y1='64' x2='880' y2='96'/%3E%3Cline x1='1040' y1='64' x2='1040' y2='96'/%3E%3Cline x1='1200' y1='64' x2='1200' y2='96'/%3E%3Cline x1='1360' y1='64' x2='1360' y2='96'/%3E%3Cline x1='240' y1='704' x2='240' y2='736'/%3E%3Cline x1='400' y1='704' x2='400' y2='736'/%3E%3Cline x1='560' y1='704' x2='560' y2='736'/%3E%3Cline x1='720' y1='704' x2='720' y2='736'/%3E%3Cline x1='880' y1='704' x2='880' y2='736'/%3E%3Cline x1='1040' y1='704' x2='1040' y2='736'/%3E%3Cline x1='1200' y1='704' x2='1200' y2='736'/%3E%3Cline x1='1360' y1='704' x2='1360' y2='736'/%3E%3Cline x1='64' y1='200' x2='96' y2='200'/%3E%3Cline x1='64' y1='320' x2='96' y2='320'/%3E%3Cline x1='64' y1='480' x2='96' y2='480'/%3E%3Cline x1='64' y1='600' x2='96' y2='600'/%3E%3Cline x1='1504' y1='200' x2='1536' y2='200'/%3E%3Cline x1='1504' y1='320' x2='1536' y2='320'/%3E%3Cline x1='1504' y1='480' x2='1536' y2='480'/%3E%3Cline x1='1504' y1='600' x2='1536' y2='600'/%3E%3C/g%3E%3Cg fill='%230B5566' fill-opacity='0.55' font-family='monospace' font-size='9' font-weight='700' letter-spacing='0.18em'%3E%3Ctext x='240' y='60' text-anchor='middle'%3E02%3C/text%3E%3Ctext x='400' y='60' text-anchor='middle'%3E03%3C/text%3E%3Ctext x='560' y='60' text-anchor='middle'%3E04%3C/text%3E%3Ctext x='720' y='60' text-anchor='middle'%3E05%3C/text%3E%3Ctext x='880' y='60' text-anchor='middle'%3E06%3C/text%3E%3Ctext x='1040' y='60' text-anchor='middle'%3E07%3C/text%3E%3Ctext x='1200' y='60' text-anchor='middle'%3E08%3C/text%3E%3Ctext x='1360' y='60' text-anchor='middle'%3E09%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,0.30) 38%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,0.30) 38%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%);
}
/* Blueprint — secondary layer: bold corner registration L-brackets + corner
   coordinate labels (A01 / A09 / J01 / J09), unmasked so they read
   consistently at all four corners. */
.hero.hero-bg-blueprint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%230B5566' fill-opacity='0.85' font-family='monospace' font-size='13' font-weight='700' letter-spacing='0.22em'%3E%3Ctext x='40' y='40'%3EA01%3C/text%3E%3Ctext x='1485' y='40'%3EA09%3C/text%3E%3Ctext x='40' y='770'%3EJ01%3C/text%3E%3Ctext x='1485' y='770'%3EJ09%3C/text%3E%3C/g%3E%3Cg stroke='%230B5566' stroke-opacity='0.85' stroke-width='2.2' fill='none'%3E%3Cpolyline points='30,90 30,30 100,30'/%3E%3Cpolyline points='1570,90 1570,30 1500,30'/%3E%3Cpolyline points='30,710 30,770 100,770'/%3E%3Cpolyline points='1570,710 1570,770 1500,770'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* TOPOGRAPH — flowing contour lines suggesting elevation/journey.
   Reduced stroke opacity + horizontal-fade mask carved out at center so the
   contour lines read at top/bottom edges of the hero but fade behind the
   body copy in the middle. */
.hero.hero-bg-topograph::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.30' stroke-linecap='round'%3E%3Cpath d='M -50 200 Q 200 140 400 220 Q 600 300 800 220 Q 1000 140 1200 240 Q 1400 340 1650 240' stroke-width='1.1'/%3E%3Cpath d='M -50 280 Q 200 220 400 300 Q 600 380 800 300 Q 1000 220 1200 320 Q 1400 420 1650 320' stroke-width='1.1'/%3E%3Cpath d='M -50 360 Q 200 300 400 380 Q 600 460 800 380 Q 1000 300 1200 400 Q 1400 500 1650 400' stroke-width='1.3'/%3E%3Cpath d='M -50 440 Q 200 380 400 460 Q 600 540 800 460 Q 1000 380 1200 480 Q 1400 580 1650 480' stroke-width='1.1'/%3E%3Cpath d='M -50 520 Q 200 460 400 540 Q 600 620 800 540 Q 1000 460 1200 560 Q 1400 660 1650 560' stroke-width='1'/%3E%3Cpath d='M -50 600 Q 200 540 400 620 Q 600 700 800 620 Q 1000 540 1200 640 Q 1400 740 1650 640' stroke-width='0.9'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.5'%3E%3Ccircle cx='200' cy='220' r='4'/%3E%3Ccircle cx='600' cy='460' r='4'/%3E%3Ccircle cx='1000' cy='300' r='4'/%3E%3Ccircle cx='1400' cy='580' r='4'/%3E%3C/g%3E%3Cg stroke='%230E7490' stroke-opacity='0.40' stroke-width='0.9' stroke-dasharray='3 5'%3E%3Cpath d='M 200 220 L 600 460 L 1000 300 L 1400 580' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,0.10) 38%, rgba(0,0,0,0.10) 62%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,0.10) 38%, rgba(0,0,0,0.10) 62%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%);
}

/* NETWORK — node + edge mesh, abstract supply chain web */
.hero.hero-bg-network::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230E7490' stroke-opacity='0.28' stroke-width='1' fill='none'%3E%3Cline x1='200' y1='200' x2='450' y2='180'/%3E%3Cline x1='200' y1='200' x2='380' y2='400'/%3E%3Cline x1='450' y1='180' x2='700' y2='250'/%3E%3Cline x1='450' y1='180' x2='600' y2='420'/%3E%3Cline x1='380' y1='400' x2='600' y2='420'/%3E%3Cline x1='700' y1='250' x2='950' y2='200'/%3E%3Cline x1='700' y1='250' x2='850' y2='450'/%3E%3Cline x1='600' y1='420' x2='850' y2='450'/%3E%3Cline x1='600' y1='420' x2='480' y2='620'/%3E%3Cline x1='950' y1='200' x2='1200' y2='240'/%3E%3Cline x1='950' y1='200' x2='1100' y2='420'/%3E%3Cline x1='850' y1='450' x2='1100' y2='420'/%3E%3Cline x1='850' y1='450' x2='720' y2='640'/%3E%3Cline x1='1200' y1='240' x2='1400' y2='180'/%3E%3Cline x1='1200' y1='240' x2='1340' y2='460'/%3E%3Cline x1='1100' y1='420' x2='1340' y2='460'/%3E%3Cline x1='1100' y1='420' x2='960' y2='600'/%3E%3Cline x1='480' y1='620' x2='720' y2='640'/%3E%3Cline x1='720' y1='640' x2='960' y2='600'/%3E%3Cline x1='1340' y1='460' x2='1480' y2='620'/%3E%3C/g%3E%3Cg fill='%23F2F5FA' stroke='%230B1726' stroke-width='1.2' stroke-opacity='0.45'%3E%3Ccircle cx='200' cy='200' r='6'/%3E%3Ccircle cx='450' cy='180' r='6'/%3E%3Ccircle cx='380' cy='400' r='6'/%3E%3Ccircle cx='700' cy='250' r='7'/%3E%3Ccircle cx='600' cy='420' r='6'/%3E%3Ccircle cx='950' cy='200' r='6'/%3E%3Ccircle cx='850' cy='450' r='7'/%3E%3Ccircle cx='1200' cy='240' r='6'/%3E%3Ccircle cx='1100' cy='420' r='6'/%3E%3Ccircle cx='1400' cy='180' r='6'/%3E%3Ccircle cx='480' cy='620' r='6'/%3E%3Ccircle cx='720' cy='640' r='6'/%3E%3Ccircle cx='960' cy='600' r='6'/%3E%3Ccircle cx='1340' cy='460' r='7'/%3E%3Ccircle cx='1480' cy='620' r='6'/%3E%3C/g%3E%3Cg fill='%2322D3EE' fill-opacity='0.5'%3E%3Ccircle cx='700' cy='250' r='3'/%3E%3Ccircle cx='850' cy='450' r='3'/%3E%3Ccircle cx='1340' cy='460' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 65% at center, transparent 0%, rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(ellipse 50% 65% at center, transparent 0%, rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,1) 100%);
}

/* FLOW — directional flow arrows, manufacturing/throughput motif */
.hero.hero-bg-flow::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cmarker id='ar' viewBox='0 0 10 10' refX='8' refY='5' markerWidth='6' markerHeight='6' orient='auto'%3E%3Cpath d='M 0 0 L 10 5 L 0 10 z' fill='%230E7490' fill-opacity='0.45'/%3E%3C/marker%3E%3C/defs%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.30' stroke-width='1.4' marker-end='url(%23ar)'%3E%3Cpath d='M 80 200 L 280 200'/%3E%3Cpath d='M 360 200 L 560 200'/%3E%3Cpath d='M 1040 200 L 1240 200'/%3E%3Cpath d='M 1320 200 L 1500 200'/%3E%3Cpath d='M 80 600 L 280 600'/%3E%3Cpath d='M 360 600 L 560 600'/%3E%3Cpath d='M 1040 600 L 1240 600'/%3E%3Cpath d='M 1320 600 L 1500 600'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.22' stroke='%230E7490' stroke-opacity='0.32' stroke-width='1'%3E%3Crect x='300' y='180' width='40' height='40' rx='3'/%3E%3Crect x='580' y='180' width='40' height='40' rx='3'/%3E%3Crect x='1260' y='180' width='40' height='40' rx='3'/%3E%3Crect x='300' y='580' width='40' height='40' rx='3'/%3E%3Crect x='580' y='580' width='40' height='40' rx='3'/%3E%3Crect x='1260' y='580' width='40' height='40' rx='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at center, transparent 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(ellipse 60% 75% at center, transparent 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,1) 100%);
}

/* VAULT — ledger-style horizontal audit-log lines with timestamps */
.hero.hero-bg-vault::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230E7490' stroke-opacity='0.24' stroke-width='0.9'%3E%3Cline x1='80' y1='100' x2='1520' y2='100'/%3E%3Cline x1='80' y1='160' x2='1520' y2='160'/%3E%3Cline x1='80' y1='220' x2='1520' y2='220'/%3E%3Cline x1='80' y1='280' x2='1520' y2='280'/%3E%3Cline x1='80' y1='340' x2='1520' y2='340'/%3E%3Cline x1='80' y1='400' x2='1520' y2='400'/%3E%3Cline x1='80' y1='460' x2='1520' y2='460'/%3E%3Cline x1='80' y1='520' x2='1520' y2='520'/%3E%3Cline x1='80' y1='580' x2='1520' y2='580'/%3E%3Cline x1='80' y1='640' x2='1520' y2='640'/%3E%3Cline x1='80' y1='700' x2='1520' y2='700'/%3E%3C/g%3E%3Cg fill='%234D7C0F' fill-opacity='0.5'%3E%3Ccircle cx='110' cy='100' r='3'/%3E%3Ccircle cx='110' cy='160' r='3'/%3E%3Ccircle cx='110' cy='220' r='3'/%3E%3Ccircle cx='110' cy='580' r='3'/%3E%3Ccircle cx='110' cy='640' r='3'/%3E%3Ccircle cx='110' cy='700' r='3'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.35' font-family='monospace' font-size='11' font-weight='500'%3E%3Ctext x='130' y='105'%3E14:02:11%3C/text%3E%3Ctext x='130' y='165'%3E14:02:14%3C/text%3E%3Ctext x='130' y='225'%3E14:02:18%3C/text%3E%3Ctext x='130' y='585'%3E14:02:38%3C/text%3E%3Ctext x='130' y='645'%3E14:02:42%3C/text%3E%3Ctext x='130' y='705'%3E14:02:45%3C/text%3E%3C/g%3E%3Cg stroke='%230E7490' stroke-opacity='0.14' stroke-width='0.6' stroke-dasharray='3 6'%3E%3Cline x1='320' y1='80' x2='320' y2='720'/%3E%3Cline x1='1280' y1='80' x2='1280' y2='720'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0.18) 62%, rgba(0,0,0,1) 85%, rgba(0,0,0,0.5) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0.18) 62%, rgba(0,0,0,1) 85%, rgba(0,0,0,0.5) 100%);
}

/* TRANSMISSION — emanating signal arcs from bottom, like radar broadcast */
.hero.hero-bg-transmission::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.40' stroke-linecap='round'%3E%3Cpath d='M 100 800 A 700 700 0 0 1 1500 800' stroke-width='1.6'/%3E%3Cpath d='M 200 800 A 600 600 0 0 1 1400 800' stroke-width='1.4' stroke-dasharray='4 8'/%3E%3Cpath d='M 300 800 A 500 500 0 0 1 1300 800' stroke-width='1.2' stroke-dasharray='3 7'/%3E%3Cpath d='M 400 800 A 400 400 0 0 1 1200 800' stroke-width='1.1' stroke-dasharray='3 6'/%3E%3Cpath d='M 500 800 A 300 300 0 0 1 1100 800' stroke-width='1' stroke-dasharray='2 5'/%3E%3Cpath d='M 600 800 A 200 200 0 0 1 1000 800' stroke-width='0.9'/%3E%3C/g%3E%3Cg stroke='%230E7490' stroke-opacity='0.36' stroke-width='1' stroke-dasharray='3 8'%3E%3Cline x1='800' y1='800' x2='800' y2='100'/%3E%3Cline x1='800' y1='800' x2='400' y2='200'/%3E%3Cline x1='800' y1='800' x2='1200' y2='200'/%3E%3Cline x1='800' y1='800' x2='200' y2='400'/%3E%3Cline x1='800' y1='800' x2='1400' y2='400'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.7'%3E%3Ccircle cx='800' cy='800' r='10'/%3E%3C/g%3E%3Cg fill='%230B1726' fill-opacity='0.9'%3E%3Ccircle cx='800' cy='800' r='6'/%3E%3C/g%3E%3Cg fill='%2322D3EE' fill-opacity='0.7'%3E%3Ccircle cx='800' cy='800' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.4) 100%);
          mask-image: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.4) 100%);
}

/* CONSTELLATION — scattered stars with connecting lines forming small constellations.
   Pairs with the Major Tom astronaut motif. Maps to "navigate by knowledge" — for resources. */
.hero.hero-bg-constellation::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230E7490' stroke-opacity='0.32' stroke-width='1' fill='none'%3E%3Cpath d='M 180 180 L 280 220 L 360 160 L 440 240 L 520 200'/%3E%3Cpath d='M 700 120 L 800 180 L 880 100 L 980 200'/%3E%3Cpath d='M 1100 280 L 1180 200 L 1280 320 L 1380 220'/%3E%3Cpath d='M 220 520 L 320 580 L 420 500 L 540 600'/%3E%3Cpath d='M 760 560 L 860 620 L 960 540'/%3E%3Cpath d='M 1180 600 L 1280 540 L 1400 660'/%3E%3C/g%3E%3Cg fill='%230B1726' fill-opacity='0.6' stroke='%2322D3EE' stroke-width='1' stroke-opacity='0.4'%3E%3Ccircle cx='180' cy='180' r='4'/%3E%3Ccircle cx='280' cy='220' r='5'/%3E%3Ccircle cx='360' cy='160' r='3'/%3E%3Ccircle cx='440' cy='240' r='4'/%3E%3Ccircle cx='520' cy='200' r='3.5'/%3E%3Ccircle cx='700' cy='120' r='4'/%3E%3Ccircle cx='800' cy='180' r='6'/%3E%3Ccircle cx='880' cy='100' r='3.5'/%3E%3Ccircle cx='980' cy='200' r='4'/%3E%3Ccircle cx='1100' cy='280' r='4'/%3E%3Ccircle cx='1180' cy='200' r='5'/%3E%3Ccircle cx='1280' cy='320' r='3.5'/%3E%3Ccircle cx='1380' cy='220' r='4'/%3E%3Ccircle cx='220' cy='520' r='4'/%3E%3Ccircle cx='320' cy='580' r='5'/%3E%3Ccircle cx='420' cy='500' r='3.5'/%3E%3Ccircle cx='540' cy='600' r='4'/%3E%3Ccircle cx='760' cy='560' r='3.5'/%3E%3Ccircle cx='860' cy='620' r='5'/%3E%3Ccircle cx='960' cy='540' r='4'/%3E%3Ccircle cx='1180' cy='600' r='4'/%3E%3Ccircle cx='1280' cy='540' r='5'/%3E%3Ccircle cx='1400' cy='660' r='3.5'/%3E%3C/g%3E%3Cg fill='%2322D3EE' fill-opacity='0.4'%3E%3Ccircle cx='280' cy='220' r='2'/%3E%3Ccircle cx='800' cy='180' r='2.5'/%3E%3Ccircle cx='1180' cy='200' r='2'/%3E%3Ccircle cx='320' cy='580' r='2'/%3E%3Ccircle cx='860' cy='620' r='2'/%3E%3Ccircle cx='1280' cy='540' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 65% at center, transparent 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(ellipse 50% 65% at center, transparent 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,1) 100%);
}

/* SCAFFOLD — vertical structural beams with horizontal cross-bracing and diagonal supports.
   Construction/build-phase metaphor — for build.html. */
.hero.hero-bg-scaffold::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230E7490' stroke-opacity='0.28' stroke-width='1.4'%3E%3Cline x1='100' y1='40' x2='100' y2='760'/%3E%3Cline x1='340' y1='40' x2='340' y2='760'/%3E%3Cline x1='580' y1='40' x2='580' y2='760'/%3E%3Cline x1='820' y1='40' x2='820' y2='760'/%3E%3Cline x1='1060' y1='40' x2='1060' y2='760'/%3E%3Cline x1='1300' y1='40' x2='1300' y2='760'/%3E%3Cline x1='1500' y1='40' x2='1500' y2='760'/%3E%3C/g%3E%3Cg stroke='%230E7490' stroke-opacity='0.22' stroke-width='1.1'%3E%3Cline x1='80' y1='160' x2='1520' y2='160'/%3E%3Cline x1='80' y1='320' x2='1520' y2='320'/%3E%3Cline x1='80' y1='480' x2='1520' y2='480'/%3E%3Cline x1='80' y1='640' x2='1520' y2='640'/%3E%3C/g%3E%3Cg stroke='%230E7490' stroke-opacity='0.16' stroke-width='0.8' stroke-dasharray='4 6'%3E%3Cline x1='100' y1='160' x2='340' y2='320'/%3E%3Cline x1='340' y1='160' x2='100' y2='320'/%3E%3Cline x1='1060' y1='160' x2='1300' y2='320'/%3E%3Cline x1='1300' y1='160' x2='1060' y2='320'/%3E%3Cline x1='100' y1='480' x2='340' y2='640'/%3E%3Cline x1='340' y1='480' x2='100' y2='640'/%3E%3Cline x1='1060' y1='480' x2='1300' y2='640'/%3E%3Cline x1='1300' y1='480' x2='1060' y2='640'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.32'%3E%3Crect x='95' y='155' width='10' height='10'/%3E%3Crect x='335' y='155' width='10' height='10'/%3E%3Crect x='1295' y='155' width='10' height='10'/%3E%3Crect x='1495' y='155' width='10' height='10'/%3E%3Crect x='95' y='635' width='10' height='10'/%3E%3Crect x='335' y='635' width='10' height='10'/%3E%3Crect x='1295' y='635' width='10' height='10'/%3E%3Crect x='1495' y='635' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at center, transparent 5%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(ellipse 55% 70% at center, transparent 5%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,1) 100%);
}

/* DOT-MATRIX (philosopher's-notebook treatment for Approach) — quiet ruled
   paper with a margin column. Eight horizontal rules spaced evenly across the
   hero, a deeper-cyan vertical margin rule on the left where annotations
   would live in a real thinking notebook, and small mono-cap section labels.
   Different visual vocabulary from anything else on the site. */
.hero.hero-bg-dotmatrix::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230B5566' stroke-opacity='0.32' stroke-width='0.8' fill='none'%3E%3Cline x1='80' y1='110' x2='1520' y2='110'/%3E%3Cline x1='80' y1='190' x2='1520' y2='190'/%3E%3Cline x1='80' y1='270' x2='1520' y2='270'/%3E%3Cline x1='80' y1='350' x2='1520' y2='350'/%3E%3Cline x1='80' y1='430' x2='1520' y2='430'/%3E%3Cline x1='80' y1='510' x2='1520' y2='510'/%3E%3Cline x1='80' y1='590' x2='1520' y2='590'/%3E%3Cline x1='80' y1='670' x2='1520' y2='670'/%3E%3C/g%3E%3Cg stroke='%230B5566' stroke-opacity='0.55' stroke-width='1.5' fill='none'%3E%3Cline x1='180' y1='80' x2='180' y2='720'/%3E%3C/g%3E%3Cg fill='%230B5566' fill-opacity='0.40' font-family='monospace' font-size='9' font-weight='600' letter-spacing='0.10em'%3E%3Ctext x='90' y='114'%3E01%3C/text%3E%3Ctext x='90' y='194'%3E02%3C/text%3E%3Ctext x='90' y='274'%3E03%3C/text%3E%3Ctext x='90' y='354'%3E04%3C/text%3E%3Ctext x='90' y='434'%3E05%3C/text%3E%3Ctext x='90' y='514'%3E06%3C/text%3E%3Ctext x='90' y='594'%3E07%3C/text%3E%3Ctext x='90' y='674'%3E08%3C/text%3E%3C/g%3E%3Cg fill='%230B5566' fill-opacity='0.65' font-family='monospace' font-size='10' font-weight='700' letter-spacing='0.30em'%3E%3Ctext x='200' y='62'%3EAPPROACH %C2%B7 NOTEBOOK%3C/text%3E%3Ctext x='1520' y='62' text-anchor='end'%3EFOLIO 01%3C/text%3E%3C/g%3E%3Cg stroke='%230B5566' stroke-opacity='0.45' stroke-width='0.8' fill='none'%3E%3Cline x1='80' y1='80' x2='1520' y2='80'/%3E%3Cline x1='80' y1='720' x2='1520' y2='720'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 22%, rgba(0,0,0,0.08) 38%, rgba(0,0,0,0.08) 62%, rgba(0,0,0,0.85) 78%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 22%, rgba(0,0,0,0.08) 38%, rgba(0,0,0,0.08) 62%, rgba(0,0,0,0.85) 78%, rgba(0,0,0,1) 100%);
}
/* No secondary overlay — the ruled-paper treatment doesn't need it. */
.hero.hero-bg-dotmatrix::after {
  content: none;
}

/* SONAR — single emanating pulse from upper-left corner, like sonar from a ship's bow.
   Approachable, "ping us" feel — for demo.html. */
.hero.hero-bg-sonar::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.42' stroke-linecap='round'%3E%3Cpath d='M 200 200 L 260 100' stroke-width='1.2'/%3E%3Cpath d='M 200 200 L 200 80' stroke-width='1' stroke-dasharray='3 6'/%3E%3Cpath d='M 200 200 L 320 140' stroke-width='1' stroke-dasharray='3 6'/%3E%3Cpath d='M 200 200 L 360 200' stroke-width='1' stroke-dasharray='3 6'/%3E%3Cpath d='M 200 200 L 320 280' stroke-width='1' stroke-dasharray='3 6'/%3E%3Cpath d='M 200 200 L 80 200' stroke-width='1' stroke-dasharray='3 6'/%3E%3C/g%3E%3Cg fill='none' stroke='%230E7490' stroke-opacity='0.5'%3E%3Cpath d='M 200 200 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0' stroke-width='1.2'/%3E%3Cpath d='M 200 200 m -200 0 a 200 200 0 1 0 400 0 a 200 200 0 1 0 -400 0' stroke-width='1' stroke-dasharray='3 7'/%3E%3Cpath d='M 200 200 m -320 0 a 320 320 0 1 0 640 0 a 320 320 0 1 0 -640 0' stroke-width='0.9' stroke-dasharray='3 9'/%3E%3Cpath d='M 200 200 m -480 0 a 480 480 0 1 0 960 0 a 480 480 0 1 0 -960 0' stroke-width='0.8' stroke-dasharray='3 11'/%3E%3Cpath d='M 200 200 m -680 0 a 680 680 0 1 0 1360 0 a 680 680 0 1 0 -1360 0' stroke-width='0.7' stroke-dasharray='3 13'/%3E%3C/g%3E%3Cg fill='%2322D3EE' fill-opacity='0.6'%3E%3Ccircle cx='320' cy='140' r='3.5'/%3E%3Ccircle cx='360' cy='200' r='3.5'/%3E%3Ccircle cx='320' cy='280' r='3'/%3E%3Ccircle cx='420' cy='320' r='3'/%3E%3Ccircle cx='560' cy='240' r='2.5'/%3E%3Ccircle cx='620' cy='420' r='2.5'/%3E%3Ccircle cx='820' cy='340' r='2'/%3E%3Ccircle cx='980' cy='480' r='2'/%3E%3Ccircle cx='1180' cy='400' r='2'/%3E%3Ccircle cx='1340' cy='560' r='1.5'/%3E%3C/g%3E%3Cg fill='%230B1726' fill-opacity='0.85' stroke='%2322D3EE' stroke-width='1.2' stroke-opacity='0.7'%3E%3Ccircle cx='200' cy='200' r='8'/%3E%3C/g%3E%3Cg fill='%2322D3EE' fill-opacity='0.7'%3E%3Ccircle cx='200' cy='200' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse at 12% 25%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.4) 100%);
          mask-image: radial-gradient(ellipse at 12% 25%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.4) 100%);
}

/* CIRCUIT — printed circuit board traces with right-angle paths and solder pads.
   Integration / connector / wire metaphor — for for-integrators.html. */
.hero.hero-bg-circuit::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230E7490' stroke-opacity='0.30' stroke-width='1.3' fill='none'%3E%3Cpath d='M 80 120 L 280 120 L 280 240 L 480 240'/%3E%3Cpath d='M 1120 240 L 1320 240 L 1320 120 L 1520 120'/%3E%3Cpath d='M 80 680 L 280 680 L 280 560 L 480 560'/%3E%3Cpath d='M 1120 560 L 1320 560 L 1320 680 L 1520 680'/%3E%3Cpath d='M 200 60 L 200 100 L 360 100 L 360 60'/%3E%3Cpath d='M 1240 60 L 1240 100 L 1400 100 L 1400 60'/%3E%3Cpath d='M 200 720 L 200 760 L 360 760 L 360 720'/%3E%3Cpath d='M 1240 720 L 1240 760 L 1400 760 L 1400 720'/%3E%3C/g%3E%3Cg fill='%230E7490' fill-opacity='0.45' stroke='%230B1726' stroke-width='0.8' stroke-opacity='0.3'%3E%3Ccircle cx='280' cy='120' r='5'/%3E%3Ccircle cx='280' cy='240' r='5'/%3E%3Ccircle cx='480' cy='240' r='5'/%3E%3Ccircle cx='1120' cy='240' r='5'/%3E%3Ccircle cx='1320' cy='240' r='5'/%3E%3Ccircle cx='1320' cy='120' r='5'/%3E%3Ccircle cx='280' cy='680' r='5'/%3E%3Ccircle cx='280' cy='560' r='5'/%3E%3Ccircle cx='480' cy='560' r='5'/%3E%3Ccircle cx='1120' cy='560' r='5'/%3E%3Ccircle cx='1320' cy='560' r='5'/%3E%3Ccircle cx='1320' cy='680' r='5'/%3E%3C/g%3E%3Cg fill='%2322D3EE' fill-opacity='0.5'%3E%3Ccircle cx='480' cy='240' r='2.5'/%3E%3Ccircle cx='1120' cy='240' r='2.5'/%3E%3Ccircle cx='480' cy='560' r='2.5'/%3E%3Ccircle cx='1120' cy='560' r='2.5'/%3E%3C/g%3E%3Cg fill='%234D7C0F' fill-opacity='0.4'%3E%3Crect x='195' y='55' width='10' height='10'/%3E%3Crect x='355' y='55' width='10' height='10'/%3E%3Crect x='1235' y='55' width='10' height='10'/%3E%3Crect x='1395' y='55' width='10' height='10'/%3E%3Crect x='195' y='715' width='10' height='10'/%3E%3Crect x='355' y='715' width='10' height='10'/%3E%3Crect x='1235' y='715' width='10' height='10'/%3E%3Crect x='1395' y='715' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at center, transparent 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(ellipse 55% 70% at center, transparent 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,1) 100%);
}

/* =================== buttons ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-sm);    /* tighter than --r-md — less SaaS-pill, more deliberate */
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 200ms var(--ease-bounce), box-shadow 250ms var(--ease-snappy), background 200ms var(--ease-snappy), color 200ms var(--ease-snappy);
  user-select: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(180deg, var(--cyan-400) 0%, var(--cyan-500) 100%);
  color: #fff;                   /* white reads cleanly on the new deep-teal gradient */
  box-shadow: 0 0 0 1px rgba(21, 94, 117, 0.6) inset, 0 8px 24px rgba(21, 94, 117, 0.25);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(21, 94, 117, 0.8) inset, 0 12px 32px rgba(21, 94, 117, 0.4);
  color: #fff;
}

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-1);
  border-color: var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: var(--surface-card-hover);
  border-color: var(--cyan-400);
  color: var(--text-1);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  padding: 10px 14px;
}
.btn-ghost:hover { color: var(--text-1); background: var(--surface-card); }

.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-xl { padding: 16px 32px; font-size: 17px; }

.btn .arrow {
  transition: transform 240ms var(--ease-bounce);
}
.btn:hover .arrow { transform: translateX(4px); }

/* =================== nav ============================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background 200ms var(--ease-snappy), border-color 200ms var(--ease-snappy);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--line-faint);
}
.nav-inner {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 17px;
}
.nav-brand:hover { color: var(--text-1); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color 180ms var(--ease-snappy), background 180ms var(--ease-snappy);
}
.nav-link:hover, .nav-link.active {
  color: var(--text-1);
  background: var(--surface-card);
}

/* === nav dropdown menu === */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-item .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-chev {
  display: inline-block;
  font-size: 9px;
  opacity: 0.7;
  transition: transform 180ms var(--ease-snappy);
}
.nav-item:hover .nav-chev,
.nav-item:focus-within .nav-chev {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45),
              0 0 0 1px rgba(14,116,144,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms var(--ease-snappy),
              transform 160ms var(--ease-snappy),
              visibility 0s 160ms;
  z-index: 100;
}
/* Invisible bridge so cursor can move from nav link to dropdown */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 160ms var(--ease-snappy),
              transform 160ms var(--ease-snappy),
              visibility 0s 0s;
}
.nav-dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  font-family: var(--font-sans, Inter, sans-serif);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 140ms, background 140ms;
}
.nav-dropdown a:hover {
  background: rgba(14,116,144,0.10);
  color: var(--cyan-300);
}
.nav-dropdown .nav-dropdown-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 8px 12px 4px;
}
.nav-dropdown .nav-dropdown-divider {
  height: 1px;
  background: var(--line-faint);
  margin: 4px 8px;
}

.nav-cta { display: inline-flex; align-items: center; gap: 8px; }

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--text-1);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta .btn-secondary { display: none; }
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 99;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(20px);
  padding: var(--s-6) var(--s-5);
  display: none;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-1);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-faint);
}
.mobile-menu a.mobile-sub {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
  padding: 8px 0 8px 18px;
  border-bottom: 1px solid var(--line-faint);
}
.mobile-menu .mobile-section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 16px 0 6px;
  border-bottom: 0;
}

/* =================== hero ============================ */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + var(--s-8)) 0 var(--s-7);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: var(--s-5);
  align-items: start;
}
.hero-grid > * { min-width: 0; }
/* Visual aligns to the top of the text column (next to the eyebrow line) instead of floating mid-column */
.hero-grid > .hero-visual {
  margin-top: var(--s-5);
  align-self: start;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); align-items: stretch; }
  .hero-grid > .hero-visual { margin-top: 0; }
}

.hero h1 .setup {
  display: block;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-2);
  line-height: 1.25;
  margin-bottom: 0.35em;
}
.hero h1 .accent {
  display: block;
  background: linear-gradient(110deg, var(--cyan-400) 0%, var(--lime-400) 60%, var(--cyan-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Sized so the full sentence "Start letting it run your operation." fits on one line */
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .hero h1 .accent { white-space: normal; }
}
.hero p.lead { margin-top: var(--s-5); }

.hero-ctas {
  margin-top: var(--s-6);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.hero-meta {
  margin-top: var(--s-6);
  font-size: 13px;
  color: var(--text-3);
}
.hero-meta strong { color: var(--text-2); font-weight: 600; }

/* hero visual: control-tower viz */
.hero-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  background:
    linear-gradient(160deg, rgba(21, 94, 117, 0.08), rgba(77, 124, 15, 0.04) 60%, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line-soft);
  padding: var(--s-5);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(21, 94, 117, 0.08) 90deg, transparent 180deg);
  animation: spin 20s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =================== logo strip ====================== */
.logo-strip {
  padding: var(--s-7) 0;
  border-block: 1px solid var(--line-faint);
}
.logo-strip-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--text-3);
  margin-bottom: var(--s-5);
}
.logo-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
  align-items: center;
}
.logo-row .logo-cell {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 14px;
  opacity: 0.85;
  transition: opacity 200ms;
  text-align: center;
}
.logo-row .logo-cell:hover { opacity: 1; color: var(--text-2); }
@media (max-width: 760px) { .logo-row { grid-template-columns: repeat(2, 1fr); } }

/* =================== card system ===================== */
.card {
  background: var(--surface-card);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5);
  position: relative;
  transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-snappy), box-shadow 240ms var(--ease-snappy), background 240ms var(--ease-snappy);
}
.card:hover {
  transform: translateY(-3px);
  background: var(--surface-card-hover);
  border-color: var(--line-soft);
  box-shadow: var(--shadow-2);
}

.card.featured {
  border-color: rgba(21, 94, 117, 0.30);
  box-shadow: 0 0 0 1px rgba(21, 94, 117, 0.10), var(--shadow-2);
}

.card .top-accent {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-400), var(--lime-400));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0.7;
}

.card .icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 94, 117, 0.12);
  color: var(--cyan-300);
  margin-bottom: var(--s-4);
  border: 1px solid rgba(21, 94, 117, 0.18);
}
.card .icon.lime {
  background: rgba(77, 124, 15, 0.12);
  color: var(--lime-300);
  border-color: rgba(77, 124, 15, 0.18);
}
.card .icon.violet {
  background: rgba(139, 92, 246, 0.12);
  color: #C4B5FD;
  border-color: rgba(139, 92, 246, 0.20);
}

.card h3 { margin-bottom: var(--s-2); font-size: 1.25rem; }
.card p { color: var(--text-3); font-size: 15px; }

/* =================== grids =========================== */
.grid {
  display: grid;
  gap: var(--s-5);
  /* Auto-equalize row heights so cards in the same row match */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* Cards inside grids: use flex column so content distributes consistently */
.grid > .card,
.grid > .pillar,
.grid > .portal-card,
.grid > .kpi,
.split-2 > .split-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0; /* Prevents content overflow in grid cells */
}

/* Push CTA elements (button rows / final list) to card bottom for alignment.
   Note: previously also pushed the last <p> in cards down, but that created
   dead space above paragraphs in single-body cards. Removed — only push
   ULs (used by pillar bullet lists where bottom-alignment matters). */
.grid > .pillar > ul:last-child {
  margin-top: auto;
}

/* Section padding clamp — tighter on mobile, generous on desktop, consistent vertically */
section {
  padding-block: clamp(var(--s-7), 6vw, var(--s-9));
}
section.tight {
  padding-block: clamp(var(--s-6), 4vw, var(--s-7));
}
section.flush-top { padding-top: var(--s-5); }

/* Container queries for cards that adapt to their grid column width */
@supports (container-type: inline-size) {
  .grid > .card,
  .grid > .pillar {
    container-type: inline-size;
  }
  /* When a card is in a narrow column (e.g., 4-up grid on tablet), tighten padding */
  @container (max-width: 280px) {
    .card, .pillar {
      padding: var(--s-4);
    }
  }
}

/* Compact cards in 5-up grid (home Five Portals teaser): reduce padding for breathing room */
.grid-5 > .card {
  padding: var(--s-5) var(--s-3);
}
.grid-5 > .card .icon { margin-bottom: var(--s-3); }

/* Visual blocks (figures with SVG diagrams) get consistent treatment */
figure {
  margin: 0;
}
figure > svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Section header consistency — ensure consistent breathing space across all sections */
.section-header {
  margin-bottom: clamp(var(--s-5), 4vw, var(--s-7));
}

/* CTA strip — ensure consistent inner alignment */
.cta-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-strip > * { max-width: 64ch; }
.cta-strip .ctas { max-width: none; }

/* =================== section header ================== */
.section-header {
  max-width: 760px;
  margin: 0 auto var(--s-7);
  text-align: center;
}
.section-header.left {
  text-align: left;
  margin-inline: 0;
}
.section-header.full {
  max-width: none;
}

/* Anchor-link scroll offset — accounts for the sticky main nav so jump-links
   land at the section's eyebrow/title area instead of behind the nav bar */
section[id], div[id^="internal"], div[id^="customer"], div[id^="onboarding"], div[id^="service"], div[id^="admin"] {
  scroll-margin-top: calc(var(--nav-h) + var(--s-2));
}

/* Platform-page sections — align jump-target eyebrow with sidebar's first label.
   Sidebar sticky-top is calc(--nav-h + --s-5) + its own padding-top (--s-6 to --s-7).
   Match the section's scroll-offset and top-padding so eyebrow and PLATFORM SPECS label
   land at the same y-coordinate when a sidebar link is clicked. */
.platform-content > section[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--s-5));
  padding-top: clamp(var(--s-6), 4vw, var(--s-7));
}

/* =================== platform sticky sidebar layout ================== */
.platform-wrap {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: var(--s-6);
  align-items: start;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.platform-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-5));
  align-self: start;
  /* Match .tight section padding so sidebar label aligns with first content item (the honest-stage tile) */
  padding-block: clamp(var(--s-6), 4vw, var(--s-7));
}
.platform-sidebar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 var(--s-3);
  padding-left: var(--s-3);
  font-weight: 600;
}
.platform-sidebar-link {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  padding: 9px var(--s-3);
  border-left: 2px solid var(--line-faint);
  transition: all 200ms var(--ease-snappy);
  font-weight: 500;
  line-height: 1.3;
}
.platform-sidebar-link:hover {
  color: var(--text-1);
  border-left-color: var(--line-soft);
  background: var(--surface-card);
}
.platform-sidebar-link.active {
  color: var(--cyan-300);
  border-left-color: var(--cyan-400);
  background: rgba(21, 94, 117, 0.08);
}
.platform-content {
  min-width: 0;
}
/* Sections inside the platform-wrap have their default/wide containers normalized
   to fill the column. Inline padding gives content breathing room from the column
   edge — important when tinted sections render full-bleed backgrounds within the
   content column and text would otherwise crash the tint border. */
.platform-content > section > .container,
.platform-content > section > .container.wide {
  max-width: none;
  padding-inline: clamp(var(--s-5), 4vw, var(--s-7));
  margin-inline: 0;
  width: 100%;
}
/* Narrow containers (e.g., the honest-stage tile) stay narrow but center within the content column */
.platform-content > section > .container.narrow {
  max-width: var(--container-narrow);
  padding-inline: clamp(var(--s-5), 4vw, var(--s-7));
  margin-inline: auto;
}
/* Widen the column-gap so the sidebar feels distinctly separate from the content column */
@media (min-width: 981px) {
  .platform-wrap {
    column-gap: clamp(var(--s-7), 5vw, var(--s-8, 88px));
  }
}
@media (max-width: 980px) {
  .platform-wrap {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .platform-sidebar {
    position: static;
    padding-block: var(--s-5);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--line-faint);
  }
  .platform-sidebar-label {
    width: 100%;
    padding-left: 0;
    margin-bottom: var(--s-2);
  }
  .platform-sidebar-link {
    padding: 6px 12px;
    border-left: 0;
    border-radius: var(--r-pill);
    background: var(--surface-card);
  }
}

/* =================== sticky page nav (in-page section nav) ================== */
.page-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--line-faint);
}
.page-nav-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 12px var(--s-5);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.page-nav-inner::-webkit-scrollbar { display: none; }
.page-nav-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all 200ms var(--ease-snappy);
  flex-shrink: 0;
  font-weight: 500;
}
.page-nav-link:hover {
  background: var(--surface-card);
  color: var(--text-1);
  border-color: var(--line-soft);
}
.page-nav-link.active {
  background: rgba(21, 94, 117, 0.10);
  color: var(--cyan-300);
  border-color: rgba(21, 94, 117, 0.30);
}
.section-header h2 { margin-top: var(--s-3); }
.section-header p { margin-top: var(--s-4); color: var(--text-2); }

/* =================== problem split =================== */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 880px) { .split-2 { grid-template-columns: 1fr; } }

.split-card {
  border-radius: var(--r-lg);
  padding: var(--s-6);
  border: 1px solid var(--line-faint);
  position: relative;
}
.split-card.before {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
}
.split-card.after {
  background:
    linear-gradient(180deg, rgba(21,94,117,0.08), rgba(77,124,15,0.04)),
    rgba(255, 255, 255, 0.4);
  border-color: rgba(21, 94, 117, 0.25);
  box-shadow: var(--shadow-2);
}
.split-card .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.split-card.after .label { color: var(--cyan-300); }
.split-card h3 { font-size: 1.5rem; margin-bottom: var(--s-3); }
.split-card ul {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
}
.split-card ul li {
  padding: 10px 0;
  border-top: 1px solid var(--line-faint);
  color: var(--text-2);
  font-size: 15px;
  display: flex;
  gap: 10px;
}
.split-card ul li::before {
  content: "—";
  color: var(--text-4);
  flex-shrink: 0;
}
.split-card.after ul li::before { content: "✓"; color: var(--lime-400); }

/* =================== pillars (3-up) ================== */
.pillar {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  border: 1px solid var(--line-faint);
  position: relative;
  overflow: hidden;
  transition: all 280ms var(--ease-out);
  display: flex;
  flex-direction: column;
}
.pillar::after {
  content: "";
  position: absolute;
  inset: auto -40% -40% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--cyan-glow), transparent 60%);
  opacity: 0;
  transition: opacity 320ms var(--ease-snappy);
}
.pillar:hover { transform: translateY(-4px); border-color: var(--line-soft); }
.pillar:hover::after { opacity: 0.6; }

/* Drain-card icons (industry pages) */
.drain-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-3);
  color: var(--cyan-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drain-icon svg {
  width: 52px;
  height: 52px;
  display: block;
}
.layer-card {
  position: relative;
}
.layer-card .layer-avatar {
  display: block;
  margin: 0 0 var(--s-3);
  border-radius: 50%;
}
.workflow-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-3);
  color: var(--cyan-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.workflow-icon svg {
  width: 60px;
  height: 60px;
  display: block;
}

/* Iconed pillar variant — icon at top, then eyebrow / title / body / bullets */
.pillar-iconed .pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-4);
}
.pillar-iconed .pillar-icon.cyan {
  background: rgba(14,116,144,0.10);
  border: 1px solid rgba(14,116,144,0.32);
  color: var(--cyan-300);
}
.pillar-iconed .pillar-icon.lime {
  background: rgba(77,124,15,0.10);
  border: 1px solid rgba(77,124,15,0.32);
  color: var(--lime-300);
}

.pillar .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-4);
  margin-bottom: var(--s-3);
}
.pillar h3 {
  font-size: 1.875rem;
  margin-bottom: var(--s-3);
}
.pillar h3 .accent {
  background: linear-gradient(110deg, var(--cyan-400), var(--lime-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pillar p {
  color: var(--text-2);
  /* Reserve the longest paragraph's footprint (~4 lines) so shorter paragraphs
     render with trailing whitespace. This — combined with margin-top: 0 below —
     keeps the top edge of each bullet list aligned across all three cards. */
  min-height: 6em;
}
.pillar ul {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
}
/* Neutralize the legacy "pin bullets to the bottom" rule. We now align bullet
   START position by giving every paragraph a uniform min-height instead. */
.grid > .pillar > ul:last-child {
  margin-top: var(--s-4);
}
.pillar ul li {
  font-size: 14px;
  color: var(--text-3);
  padding: 6px 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.pillar ul li::before {
  content: "▸";
  color: var(--cyan-400);
  flex-shrink: 0;
}

/* =================== portals showcase ================ */
.portal-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-card);
  border: 1px solid var(--line-faint);
  transition: all 220ms var(--ease-snappy);
}
.portal-card:hover {
  background: var(--surface-card-hover);
  border-color: var(--line-soft);
  transform: translateX(4px);
}
.portal-card .portal-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(21,94,117,0.15), rgba(77,124,15,0.10));
  border: 1px solid rgba(21, 94, 117, 0.20);
  color: var(--cyan-300);
  flex-shrink: 0;
}
.portal-card h4 { font-size: 1.0625rem; margin-bottom: 4px; }
.portal-card p { color: var(--text-3); font-size: 14px; margin: 0; }
.portal-card .arrow-end {
  color: var(--text-4);
  transition: transform 220ms var(--ease-bounce), color 220ms;
}
.portal-card:hover .arrow-end { transform: translateX(4px); color: var(--cyan-400); }

@media (max-width: 640px) {
  .portal-card { grid-template-columns: auto 1fr; }
  .portal-card .arrow-end { display: none; }
}

/* =================== Major Tom panel ================= */
.major-tom {
  background:
    radial-gradient(70% 100% at 0% 0%, rgba(21, 94, 117, 0.12), transparent 60%),
    radial-gradient(70% 100% at 100% 100%, rgba(77, 124, 15, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  position: relative;
  overflow: hidden;
}
.major-tom-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (max-width: 880px) { .major-tom-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.chat-bubble {
  background: var(--surface-glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.5;
  position: relative;
  backdrop-filter: blur(8px);
}
.chat-bubble.user {
  background: rgba(21, 94, 117, 0.08);
  border-color: rgba(21, 94, 117, 0.30);
  color: var(--text-1);
  margin-left: auto;
  max-width: 80%;
}
.chat-bubble.assistant {
  margin-right: auto;
  max-width: 92%;
}
.chat-bubble.assistant::before {
  content: "Major Tom";
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime-400);
  margin-bottom: 6px;
  font-weight: 600;
}

/* =================== integration grid ================ */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s-3);
}
@media (max-width: 980px) { .integration-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .integration-grid { grid-template-columns: repeat(2, 1fr); } }

.integration-tile {
  aspect-ratio: 1.4 / 1;
  border-radius: var(--r-md);
  background: var(--surface-card);
  border: 1px solid var(--line-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.01em;
  text-align: center;
  padding: var(--s-2);
  transition: all 200ms var(--ease-snappy);
}
.integration-tile:hover {
  background: var(--surface-card-hover);
  color: var(--text-1);
  border-color: var(--line-soft);
  transform: scale(1.03);
}

/* =================== integration categories (Platform page) ====== */
.integration-categories {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.integration-category {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-3);
  border-top: 1px solid var(--line-faint);
}
.integration-category:first-child {
  border-top: 0;
  padding-top: 0;
}
.integration-category-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-300);
  margin: 0;
  padding-top: 10px;
  font-weight: 600;
  line-height: 1.4;
}
.integration-category-label .label-sub {
  display: block;
  color: var(--text-4);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 10px;
  margin-top: 3px;
  text-transform: none;
}
.integration-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.integration-row .integration-tile {
  aspect-ratio: auto;
  flex: 0 0 auto;
  padding: 10px var(--s-4);
  min-width: 120px;
  gap: 8px;
}

/* Category color variants */
.integration-category.cat-cyan .integration-category-label{color:var(--cyan-400)}
.integration-category.cat-cyan .integration-tile{border-color:rgba(14,116,144,0.20)}
.integration-category.cat-cyan .integration-tile:hover{border-color:rgba(14,116,144,0.50);background:rgba(14,116,144,0.05)}
.integration-category.cat-cyan .ti-icon{color:var(--cyan-400)}

.integration-category.cat-lime .integration-category-label{color:var(--lime-400)}
.integration-category.cat-lime .integration-tile{border-color:rgba(77,124,15,0.20)}
.integration-category.cat-lime .integration-tile:hover{border-color:rgba(77,124,15,0.50);background:rgba(77,124,15,0.05)}
.integration-category.cat-lime .ti-icon{color:var(--lime-400)}

/* Tile category icon (sourced from <symbol> defs at top of integration section) */
.ti-icon{
  width:14px;
  height:14px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0.9;
}
@media (max-width: 760px) {
  .integration-category {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .integration-category-label { padding-top: 0; }
}

/* =================== KPI strip ======================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
@media (max-width: 880px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi {
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line-faint);
  background: var(--surface-card);
  position: relative;
}
/* Centered KPI variant — used on the home Design-partner outcomes section */
.kpi-grid.kpi-centered .kpi {
  text-align: center;
}
.kpi-grid.kpi-centered .kpi .delta {
  justify-content: center;
}
.kpi .v {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-1);
  line-height: 1;
}
.kpi .v .unit { color: var(--cyan-400); font-size: 0.7em; }
.kpi .label {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.kpi .delta {
  margin-top: var(--s-2);
  font-size: 12px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

/* =================== CTA strip ======================= */
.cta-strip {
  background:
    radial-gradient(80% 100% at 0% 50%, rgba(21, 94, 117, 0.15), transparent 50%),
    radial-gradient(80% 100% at 100% 50%, rgba(77, 124, 15, 0.10), transparent 50%),
    rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip h2 { font-size: clamp(1.875rem, 4vw, 3rem); }
.cta-strip p.lead { margin: var(--s-4) auto 0; }
.cta-strip .ctas { margin-top: var(--s-6); display: inline-flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }

/* =================== screenshot frame ================ */
.shot-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
  box-shadow: var(--shadow-3);
  position: relative;
  aspect-ratio: 16 / 10;
  /* Top-align inside grid cell so frame lines up with the start of the text in the sibling column */
  align-self: start;
  width: 100%;
}
.shot-frame .chrome {
  height: 28px;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  padding-inline: var(--s-4);
  gap: 6px;
  border-bottom: 1px solid var(--line-faint);
}
.shot-frame .chrome .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}
.shot-frame .chrome .url {
  margin-left: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.shot-frame .body {
  padding: var(--s-5);
  height: calc(100% - 28px);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 16px),
    var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}
.shot-frame .body .placeholder-stack { display: flex; flex-direction: column; gap: 6px; align-items: center; opacity: 0.7; }

/* === shot-frame mocks: stylized in-frame UI for each portal === */
.shot-frame .body.mock {
  display: block;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.4;
  overflow: hidden;
}
.mock-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 8px;
}
.mock-eyebrow .mock-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime-300);
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(163,230,53,0.6);
}
.mock-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.mock-kpi {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line-faint);
  border-radius: 4px;
  padding: 8px 10px;
}
.mock-kpi .k {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 4px;
}
.mock-kpi .v {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.mock-kpi .v .delta {
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.mock-kpi .v .delta.up { color: var(--lime-300); }
.mock-kpi .v .delta.down { color: #FCA5A5; }
.mock-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  background: rgba(255,255,255,0.4);
  border: 1px solid var(--line-faint);
  border-radius: 3px;
  font-size: 11px;
}
.mock-row .pip-sm {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mock-row .pip-sm.crit { background: #FCA5A5; box-shadow: 0 0 6px rgba(252,165,165,0.5); }
.mock-row .pip-sm.warn { background: #FCD34D; }
.mock-row .pip-sm.ok   { background: var(--lime-300); }
.mock-row .pip-sm.info { background: var(--cyan-300); }
.mock-row .label {
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-row .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}
.mock-row.us { border-color: rgba(14,116,144,0.35); background: rgba(21,94,117,0.06); }
.mock-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mock-pill.transit { background: rgba(14,116,144,0.15); color: var(--cyan-300); }
.mock-pill.delivered { background: rgba(77,124,15,0.18); color: var(--lime-300); }
.mock-pill.hold { background: rgba(245,158,11,0.18); color: #FCD34D; }
.mock-pill.exception { background: rgba(239,68,68,0.18); color: #FCA5A5; }
.mock-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10.5px;
}
.mock-table th {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-faint);
  font-weight: 500;
}
.mock-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-faint);
  color: var(--text-2);
}
.mock-table tr:last-child td { border-bottom: 0; }
.mock-table td.id { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.mock-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.mock-progress .step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-3);
}
.mock-progress .step.done { background: var(--lime-300); }
.mock-progress .step.active { background: var(--cyan-300); box-shadow: 0 0 6px rgba(14,116,144,0.5); }
.mock-edi {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4px 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.mock-edi .src, .mock-edi .tgt {
  padding: 5px 8px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line-faint);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-edi .tgt { border-color: rgba(14,116,144,0.3); color: var(--cyan-300); }
.mock-edi .arr { color: var(--text-4); font-size: 11px; }
.mock-ticket {
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line-faint);
  border-left: 3px solid var(--cyan-300);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.mock-ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.mock-ticket-head .id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.mock-ticket-head .pri {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FCA5A5;
}
.mock-ticket .subject {
  color: var(--text-1);
  font-weight: 600;
  font-size: 11.5px;
  margin-bottom: 6px;
}
.mock-ticket .ctx {
  font-size: 10.5px;
  color: var(--text-3);
  line-height: 1.5;
  border-top: 1px dashed var(--line-faint);
  padding-top: 6px;
  margin-top: 4px;
}
.mock-ticket .ctx .src {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--cyan-300);
  letter-spacing: 0.06em;
}
.mock-log {
  font-family: var(--font-mono);
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-2);
}
.mock-log .entry {
  display: grid;
  grid-template-columns: 64px 14px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line-faint);
}
.mock-log .entry:last-child { border-bottom: 0; }
.mock-log .ts { color: var(--text-4); font-size: 9.5px; }
.mock-log .pip-sm { width: 7px; height: 7px; border-radius: 50%; }
.mock-log .pip-sm.ok { background: var(--lime-300); }
.mock-log .pip-sm.warn { background: #FCD34D; }
.mock-log .pip-sm.err { background: #FCA5A5; }
.mock-log .msg { color: var(--text-2); }
.mock-log .code { color: var(--cyan-300); font-size: 9.5px; }

/* === Gantt chart mock (Onboarding Portal screenshot) === */
.gantt {
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.gantt-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 24px 4px 168px;
  font-size: 9px;
  color: var(--text-4);
  letter-spacing: 0.16em;
  border-bottom: 1px dashed var(--line-faint);
}
.gantt-row {
  display: grid;
  grid-template-columns: 160px 1fr 24px;
  align-items: center;
  gap: 8px;
}
.gantt-label {
  font-size: 10px;
  color: var(--text-2);
  font-family: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-track {
  position: relative;
  height: 12px;
  background: rgba(14,116,144,0.06);
  border-radius: 3px;
}
.gantt-bar {
  position: absolute;
  top: 0;
  height: 12px;
  border-radius: 3px;
}
.gantt-bar.done { background: var(--lime-300); }
.gantt-bar.active { background: var(--cyan-300); }
.gantt-bar.pending { background: rgba(122, 138, 160, 0.30); }
.gantt-bar.target {
  background: transparent;
  border: 1.5px dashed var(--cyan-300);
}
.gantt-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 16px;
  background: var(--cyan-400);
  opacity: 0.85;
}
.gantt-status {
  font-size: 11px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
}
.gantt-status.done { color: var(--lime-300); }
.gantt-status.active { color: var(--cyan-300); }
.gantt-status.pending { color: var(--text-4); }

/* === RBAC table mock (Admin Portal screenshot) === */
.rbac {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
}
.rbac-header {
  display: grid;
  grid-template-columns: 110px 100px 1fr;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 6px 0;
  border-bottom: 1px solid var(--line-faint);
}
.rbac-row {
  display: grid;
  grid-template-columns: 110px 100px 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-faint);
}
.rbac-row:last-child { border-bottom: 0; }
.rbac-user {
  color: var(--text-1);
  font-weight: 600;
  font-size: 10.5px;
}
.rbac-role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.rbac-role.admin {
  color: var(--lime-300);
  font-weight: 700;
}
.rbac-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rbac-pill {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(14,116,144,0.20);
  background: rgba(14,116,144,0.06);
  color: var(--cyan-300);
  white-space: nowrap;
}
.rbac-pill.on {
  background: rgba(14,116,144,0.14);
  color: var(--cyan-300);
}
.rbac-pill.view {
  background: rgba(122, 138, 160, 0.10);
  border-color: rgba(122, 138, 160, 0.25);
  color: var(--text-3);
}
.rbac-pill.audit {
  background: rgba(77,124,15,0.10);
  border-color: rgba(77,124,15,0.30);
  color: var(--lime-300);
}
.rbac-pill.off {
  background: rgba(185,28,28,0.06);
  border-color: rgba(185,28,28,0.25);
  color: #B91C1C;
  text-decoration: line-through;
}

/* =================== forms =========================== */
.form-card {
  background: var(--surface-glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-3);
}
.form-row {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--s-4);
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  font-family: var(--font-sans);
}
.form-field label .req { color: var(--cyan-400); }
.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(255, 255, 255, 0.55);
  color: var(--text-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  transition: border-color 180ms var(--ease-snappy), box-shadow 180ms var(--ease-snappy);
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 0;
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(21, 94, 117, 0.18);
}
.form-help { font-size: 12.5px; color: var(--text-4); margin-top: 4px; }

.form-message {
  display: none;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  margin-top: var(--s-4);
  font-size: 14px;
  border: 1px solid transparent;
}
.form-message.success {
  display: block;
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6EE7B7;
}
.form-message.error {
  display: block;
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
  color: #FCA5A5;
}

/* =================== FAQ ============================= */
.faq {
  border-block: 1px solid var(--line-faint);
  padding: var(--s-4) 0;
}
.faq + .faq { border-top: 0; }
.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  padding: var(--s-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.faq-q .chev {
  transition: transform 220ms var(--ease-snappy);
  color: var(--text-3);
  flex-shrink: 0;
}
.faq.open .faq-q .chev { transform: rotate(180deg); color: var(--cyan-400); }
.faq-a {
  display: none;
  padding: 0 0 var(--s-4) 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
  max-width: 75ch;
}
.faq.open .faq-a { display: block; animation: fadeUp 240ms var(--ease-out); }

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

/* =================== about page ====================== */
.about-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.about-hero > .brian-portrait { justify-self: end; }
@media (max-width: 880px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero > .brian-portrait { justify-self: start; order: -1; }
}

/* === About hero: magazine-style float-wrap === */
/* Thesis statement — sits inside .about-intro between the "Meet the Founder"
   eyebrow and the lead paragraph, wrapping naturally around the floated photo.
   Sized as a sub-headline for the founder hero. */
.about-thesis {
  margin: 0 0 var(--s-4);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-weight: 700;
  color: var(--text-1);
  text-wrap: balance;
}
/* Resolution clause — larger for emphasis, locked to one line on desktop */
.about-thesis .gradient-text {
  display: inline-block;
  font-size: 1.32em;
  line-height: 1.15;
  letter-spacing: -0.018em;
  white-space: nowrap;
  margin-top: 4px;
}
/* Two-column grid: text content on left, photo on right stretching to match
   the full text-stack height (top of eyebrow → bottom of CTAs). */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 32%, 380px);
  gap: var(--s-6);
  align-items: stretch;     /* photo stretches to row height */
}
.about-intro-text {
  /* All text content stacks vertically inside this grid cell */
  display: flex;
  flex-direction: column;
}
.about-intro-text .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s-3);
  align-self: flex-start;
}
.about-portrait-float {
  /* No longer floated — it's now a grid item that stretches */
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;       /* override .brian-portrait 4/5 so it stretches */
  align-self: stretch;
}
/* Reframe the founder photo: ~5% cropped from right edge, ~8% cropped from top.
   Scale 1.08 with origin (37.5%, 100%) gives that crop without distorting. */
.about-portrait-float img {
  object-position: center;
  transform: scale(1.08);
  transform-origin: 37.5% 100%;
}
.about-intro-text .lead {
  margin: 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-2);
}
.about-intro-text .hero-ctas {
  margin-top: var(--s-5);
}

/* Mobile: collapse to single column, photo stacks above text */
@media (max-width: 760px) {
  .about-intro {
    grid-template-columns: 1fr;
  }
  .about-portrait-float {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 4 / 5;     /* restore 4:5 frame on mobile */
    margin: 0 0 var(--s-5);
    order: -1;                /* photo above text on mobile */
  }
  .about-thesis {
    font-size: clamp(1.25rem, 5.2vw, 1.75rem);
    margin-bottom: var(--s-5);
  }
  /* On narrow viewports, drop the forced line breaks so the thesis can
     wrap naturally to fit small screens */
  .thesis-break { display: none; }
  /* Release the one-line lock on mobile so the gradient clause can wrap */
  .about-thesis .gradient-text {
    font-size: 1.15em;
    white-space: normal;
    margin-top: 2px;
  }
  .about-intro-text .hero-ctas { margin-top: var(--s-5); }
}

.brian-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 360px;
  border-radius: var(--r-xl);
  background:
    linear-gradient(160deg, rgba(21, 94, 117, 0.20), rgba(77, 124, 15, 0.10)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 18px),
    var(--bg-2);
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  padding: var(--s-5);
  box-shadow: var(--shadow-3);
}
.brian-portrait .pin {
  position: absolute;
  bottom: var(--s-3); right: var(--s-3);
  z-index: 2;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cyan-200);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(21, 94, 117, 0.36);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
/* When the portrait contains a photo, hide the placeholder background and let the image fill */
.brian-portrait.has-photo {
  background: var(--bg-2);
}
.brian-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
}

/* Baseline story-block (used in terms, privacy, and about). */
.story-block {
  margin-block: var(--s-7);
  padding-left: var(--s-5);
  border-left: 2px solid var(--cyan-500);
}
.story-block h3 { margin-bottom: var(--s-3); }
.story-block p { color: var(--text-2); font-size: 16.5px; line-height: 1.7; }

/* === Legal pages — visual layout (privacy.html, terms.html) === */
.legal-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
}
.legal-hero-text { min-width: 0; }
.legal-hero-visual {
  margin: 0;
  width: 100%;
  background: rgba(15, 23, 42, 0.045);
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 12px;
  padding: var(--s-3);
}
.legal-hero-visual svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 760px) {
  .legal-hero { grid-template-columns: 1fr; gap: var(--s-5); }
}

.legal-glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
  margin-bottom: var(--s-6);
}
.legal-glance-card {
  padding: var(--s-4) var(--s-5);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line-faint);
  border-top: 3px solid var(--cyan-400);
}
.legal-glance-yes { border-top-color: var(--cyan-400); }
.legal-glance-no { border-top-color: #B91C1C; }
.legal-glance-right { border-top-color: var(--lime-400); }
.legal-glance-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.legal-glance-yes .legal-glance-label { color: var(--cyan-400); }
.legal-glance-no .legal-glance-label { color: #B91C1C; }
.legal-glance-right .legal-glance-label { color: var(--lime-400); }
.legal-glance-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legal-glance-card li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  padding: 6px 0;
  border-top: 1px dashed var(--line-faint);
}
.legal-glance-card li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 760px) {
  .legal-glance { grid-template-columns: 1fr; }
}

.legal-section {
  position: relative;
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 56px);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line-faint);
  border-left: 3px solid var(--cyan-400);
  border-radius: 8px;
}
.legal-section::before {
  content: attr(data-num);
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cyan-400);
  background: rgba(14, 116, 144, 0.10);
  border: 1px solid rgba(14, 116, 144, 0.30);
}
.legal-section-icon {
  position: absolute;
  top: calc(var(--s-5) + 44px);
  left: calc(var(--s-5) + 7px);
  color: var(--cyan-400);
  opacity: 0.6;
}
.legal-section h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
  line-height: 1.3;
}
.legal-section p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.legal-section p + p { margin-top: var(--s-3); }
.legal-section a {
  color: var(--cyan-400);
  text-decoration: underline;
  text-decoration-color: rgba(14, 116, 144, 0.32);
  text-underline-offset: 2px;
}

.legal-pullout {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.06) 0%, rgba(77, 124, 15, 0.04) 100%);
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 12px;
}
.legal-pullout-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: var(--s-3);
}
.legal-pullout p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-1);
  margin: 0;
}

/* === Founder narrative — chapter format (about page only) === */
/* Each .story-block becomes a numbered chapter (01, 02, 03...) with the
   number above the H3 as a mono micro-label. Single-column flow, paragraphs
   span wider, generous breathing room between chapters. */
/* About page: tighten the gap between founder hero and the first chapter */
.about-hero-v2 { padding-bottom: var(--s-5); }
.founder-story { padding-top: var(--s-5); }

/* Halve the gap between the last founder-story chapter and the closing CTA */
.founder-story { padding-bottom: var(--s-5); }
.founder-story .story-block:last-of-type { margin-bottom: var(--s-5); }

/* About-page CTA section: tightened top spacing, and force the headline and
   lead to land on a single line each on desktop. */
.about-cta-section {
  padding-top: var(--s-5);
}
.about-cta-section .cta-strip > * { max-width: none; }
.about-cta-section .cta-strip h2 {
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  white-space: nowrap;
}
.about-cta-section .cta-strip p.lead {
  font-size: clamp(0.95rem, 1.25vw, 1.0625rem);
  white-space: nowrap;
}
@media (max-width: 980px) {
  .about-cta-section .cta-strip h2,
  .about-cta-section .cta-strip p.lead {
    white-space: normal;
  }
  .about-cta-section .cta-strip h2 { font-size: clamp(1.25rem, 4.5vw, 1.625rem); }
  .about-cta-section .cta-strip p.lead { font-size: clamp(0.9rem, 2.6vw, 1rem); }
}

.founder-story { counter-reset: chapter; }

.founder-story .story-block {
  counter-increment: chapter;
  margin-block: var(--s-8, 96px);
  padding: 0;
  border: 0;
  display: block;
}
.founder-story .story-block:first-of-type { margin-top: 0; }

.founder-story .story-block > h3 {
  position: relative;
  margin: 0 0 var(--s-4) 0;
  padding-top: var(--s-2);
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--text-1);
  text-wrap: balance;
}
/* Numbered chapter prefix above each H3 — eg. "01"  */
.founder-story .story-block > h3::before {
  content: counter(chapter, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--cyan-300);
  margin-bottom: var(--s-3);
  text-transform: uppercase;
}
.founder-story .story-block > p {
  margin: 0 0 var(--s-3) 0;
  /* Spans full container width — no max-width cap */
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.7;
}
.founder-story .story-block > p:last-child { margin-bottom: 0; }

/* Mobile */
@media (max-width: 880px) {
  .founder-story .story-block { margin-block: var(--s-7); }
  .founder-story .story-block > h3 { font-size: 1.4rem; }
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (max-width: 760px) { .fact-grid { grid-template-columns: 1fr; } }

.fact {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-card);
  border: 1px solid var(--line-faint);
}
.fact .k { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.fact .v { font-size: 1.125rem; color: var(--text-1); font-weight: 600; }

/* =================== footer ========================== */
.footer {
  border-top: 1px solid var(--line-faint);
  margin-top: var(--s-6);
  padding: var(--s-6) 0 var(--s-6);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6));
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
@media (max-width: 1180px) { .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-6); } }
@media (max-width: 880px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .footer-grid { grid-template-columns: 1fr; } }

.footer h5 {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
  font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin: var(--s-2) 0; }
.footer a { color: var(--text-2); font-size: 14px; }
.footer a:hover { color: var(--text-1); }
.footer .legal {
  border-top: 1px solid var(--line-faint);
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--text-4);
}

/* =================== scroll reveal =================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =================== utility ========================= */
.center      { text-align: center; }
.muted       { color: var(--text-3); }
.small       { font-size: 14px; }
.mt-3        { margin-top: var(--s-3); }
.mt-4        { margin-top: var(--s-4); }
.mt-5        { margin-top: var(--s-5); }
.mt-6        { margin-top: var(--s-6); }
.mt-7        { margin-top: var(--s-7); }
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.gap-2       { gap: var(--s-2); }
.gap-3       { gap: var(--s-3); }
.gap-4       { gap: var(--s-4); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(77, 124, 15, 0.12);
  color: var(--lime-300);
  border: 1px solid rgba(77, 124, 15, 0.30);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.badge.cyan {
  background: rgba(21, 94, 117, 0.12);
  color: var(--cyan-300);
  border-color: rgba(21, 94, 117, 0.30);
}

/* =================== timeline =========================== */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-400) 15%, var(--lime-400) 85%, transparent);
  opacity: 0.5;
  z-index: 0;
}
.tl-step {
  position: relative;
  z-index: 1;
  padding: 0 var(--s-3);
  text-align: center;
}
.tl-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--cyan-400);
  margin: 14px auto 12px;
  box-shadow: 0 0 18px rgba(21, 94, 117, 0.4);
}
.tl-step:last-child .tl-dot {
  border-color: var(--lime-400);
  box-shadow: 0 0 18px rgba(77, 124, 15, 0.4);
}
.tl-when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 600;
  margin-bottom: 4px;
}
.tl-step:last-child .tl-when { color: var(--lime-300); }
.tl-what {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 4px;
}
.tl-detail {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.4;
}
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: var(--s-4); }
  .timeline::before { display: none; }
  .tl-step { text-align: left; padding: 0; border-left: 2px solid var(--cyan-400); padding-left: var(--s-4); }
  .tl-dot { display: none; }
}

/* =================== admin vs ops diagram ============ */
.admin-ops-diagram {
  margin: 0 0 var(--s-7);
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 100% at 100% 50%, rgba(21, 94, 117, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.4);
  border: 1px solid var(--line-faint);
  box-shadow: var(--shadow-2);
}
.admin-ops-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .admin-ops-diagram { padding: var(--s-4) var(--s-3); }
}

/* =================== compare table =================== */
.compare-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-faint);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
}
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11.5px;
  min-width: 920px;
  table-layout: fixed;
}
.compare thead th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  padding: 12px 10px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.35;
}
.compare thead th:first-child { width: 24%; padding-left: 14px; }
.compare thead th:not(:first-child) { width: 12.66%; }
.compare thead th span {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text-3);
  text-transform: none;
}
.compare thead th.us {
  color: var(--cyan-300);
  background: linear-gradient(180deg, rgba(21,94,117,0.10), rgba(21,94,117,0.04));
}
.compare tbody td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line-faint);
  color: var(--text-2);
  vertical-align: middle;
  line-height: 1.4;
  word-break: break-word;
  height: 56px;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody td.criterion {
  color: var(--text-1);
  font-weight: 600;
  font-size: 11.5px;
  padding-left: 14px;
  padding-right: 14px;
  word-break: normal;
  hyphens: auto;
  vertical-align: middle;
  text-align: left;
}
.compare tbody td.us {
  background: rgba(21, 94, 117, 0.05);
  color: var(--text-1);
}
.compare tbody td:not(.criterion) {
  text-align: left;
  font-size: 11px;
}
.compare .pip {
  display: inline-flex;
  width: 14px; height: 14px;
  min-width: 14px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: -2px;
  flex-shrink: 0;
}
.compare tbody tr.compare-footer td {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-4);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.4);
  border-top: 1px solid var(--line-soft);
  border-bottom: 0;
  text-align: right;
}
.compare .pip.full   { background: rgba(77, 124, 15, 0.18); color: var(--lime-300); }
.compare .pip.partial { background: rgba(245, 158, 11, 0.18); color: #FCD34D; }
.compare .pip.none   { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; }
.compare .pip.us-full { background: var(--cyan-500); color: #04131A; box-shadow: 0 0 12px var(--cyan-glow); }

/* =================== architecture stack =================== */
.arch-figure {
  margin: var(--s-7) 0;
  background: linear-gradient(180deg, rgba(21,94,117,0.04), rgba(77,124,15,0.03));
  border: 1px solid rgba(21, 94, 117, 0.15);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
}
.arch-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arch-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: stretch;
  gap: var(--s-4);
  position: relative;
}
.arch-flow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: right;
  padding-right: var(--s-2);
  align-self: center;
}
.arch-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 28px;
  border-radius: 8px;
  border: 1px solid;
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 160ms ease, background 160ms ease;
}
.arch-card:hover {
  background: rgba(255, 255, 255, 0.55);
}
.arch-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.arch-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.85;
  flex-shrink: 0;
}
.arch-name {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.arch-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-3);
}
.arch-cyan .arch-card { border-color: rgba(14, 116, 144, 0.45); }
.arch-cyan .arch-num  { color: var(--cyan-300); }
.arch-lime .arch-card { border-color: rgba(163, 230, 53, 0.45); }
.arch-lime .arch-num  { color: var(--lime-300); }
/* Connector line between rows */
.arch-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(130px + var(--s-4) + 36px);
  top: 100%;
  width: 1px;
  height: 8px;
  background: rgba(14, 116, 144, 0.5);
  pointer-events: none;
}
.arch-caption {
  margin-top: var(--s-5);
  max-width: 980px;
  margin-inline: auto;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-3);
  text-align: center;
}
.arch-caption a {
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px dotted rgba(14,116,144,0.3);
  transition: color 140ms, border-color 140ms;
}
.arch-caption a:hover {
  color: var(--cyan-200);
  border-bottom-color: var(--cyan-300);
}

@media (max-width: 880px) {
  .arch-row { grid-template-columns: 96px 1fr; gap: var(--s-3); }
  .arch-row:not(:last-child)::after { left: calc(96px + var(--s-3) + 30px); }
  .arch-flow { font-size: 11px; letter-spacing: 0.18em; }
  .arch-card { padding: 18px 22px; }
  .arch-name { font-size: 16px; }
  .arch-desc { font-size: 14px; }
}
@media (max-width: 640px) {
  .arch-row { grid-template-columns: 72px 1fr; gap: var(--s-2); }
  .arch-row:not(:last-child)::after { left: calc(72px + var(--s-2) + 24px); }
  .arch-flow { font-size: 9px; letter-spacing: 0.14em; }
  .arch-card { padding: 14px 16px; }
  .arch-card-head { gap: var(--s-2); }
  .arch-name { font-size: 14px; }
  .arch-desc { font-size: 12.5px; }
}

/* =================== process intelligence engine =================== */
.pie-figure {
  margin: var(--s-7) 0;
  background: linear-gradient(180deg, rgba(77,124,15,0.04), rgba(21,94,117,0.04));
  border: 1px solid rgba(77,124,15,0.15);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
}
/* Compact icon-flow variant of pie cycle */
.pie-figure-compact { padding: var(--s-5) var(--s-4); }
.pie-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s-2);
}
.pie-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-3) var(--s-2);
  background: var(--surface-card, rgba(255,255,255,0.55));
  border: 1px solid rgba(77,124,15,0.18);
  border-radius: var(--r-md);
}
.pie-step-icon {
  color: var(--cyan-300, #155E75);
  margin-bottom: 10px;
}
.pie-step:nth-child(odd) .pie-step-icon { color: var(--cyan-300, #155E75); }
.pie-step:nth-child(even) .pie-step-icon { color: var(--lime-500, #4D7C0F); }
.pie-step-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 6px;
}
.pie-step-caption {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-3);
}
.pie-step-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--lime-400, #84CC16);
  opacity: 0.7;
  padding: 0 4px;
  list-style: none;
}
@media (max-width: 900px) {
  .pie-flow { flex-wrap: wrap; }
  .pie-step { flex-basis: calc(33% - var(--s-2)); }
  .pie-step-arrow { display: none; }
}
@media (max-width: 560px) {
  .pie-step { flex-basis: 100%; }
}
/* Trust badges — compact security/posture cells */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--s-4);
  background: var(--surface-card, rgba(255,255,255,0.6));
  border: 1px solid rgba(21,94,117,0.18);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.trust-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-400, #22D3EE), var(--lime-400, #A3E635));
  opacity: 0.7;
}
.trust-badge-icon {
  color: var(--cyan-500, #0E7490);
  margin-bottom: 4px;
}
.trust-badge-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.2;
}
.trust-badge-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lime-600, #4D7C0F);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(132,204,22,0.12);
  border: 1px solid rgba(132,204,22,0.3);
}
.trust-badge-status.status-progress {
  color: var(--cyan-600, #155E75);
  background: rgba(34,211,238,0.10);
  border-color: rgba(34,211,238,0.3);
}
@media (max-width: 900px) {
  .trust-badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .trust-badges { grid-template-columns: 1fr; }
}
.pie-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: stretch;
}
.pie-stage {
  display: flex;
  align-items: stretch;
  position: relative;
}
.pie-card {
  flex: 1;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(77,124,15,0.25);
  border-radius: 6px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pie-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pie-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lime-300);
  flex-shrink: 0;
}
.pie-name {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.pie-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}
.pie-eg {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-3);
  border-top: 1px dashed var(--line-faint);
  padding-top: 8px;
  margin-top: auto;
}
.pie-eg-label {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-300);
  margin-right: 6px;
}
.pie-arrow {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--lime-300);
  opacity: 0.7;
}
.pie-arrow.loop {
  font-size: 20px;
  color: var(--cyan-300);
  opacity: 0.9;
}
.pie-caption {
  margin-top: var(--s-5);
  max-width: 880px;
  margin-inline: auto;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
  text-align: center;
}

@media (max-width: 1080px) {
  .pie-stack {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .pie-stage { flex-direction: column; }
  .pie-arrow { flex: 0 0 16px; transform: rotate(90deg); margin: 4px auto; }
  .pie-arrow.loop { transform: rotate(0); }
  .pie-stage:last-child .pie-arrow.loop { position: static; transform: none; margin-top: 8px; }
}

@media (max-width: 640px) {
  .pie-stack { grid-template-columns: 1fr; }
  .pie-card { padding: 12px; }
  .pie-name { font-size: 14px; }
  .pie-desc { font-size: 11.5px; }
}

/* =================== trust center =================== */
.trust-num {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}
.trust-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.trust-toc li {
  border-left: 2px solid var(--line-faint);
  padding: 6px 0 6px 14px;
  transition: border-color 160ms ease, background 160ms ease;
}
.trust-toc li:hover {
  border-left-color: var(--cyan-400);
  background: rgba(14,116,144,0.04);
}
.trust-toc a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  letter-spacing: 0.02em;
  display: block;
}
.trust-toc a:hover {
  color: var(--cyan-300);
}
.trust-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.4);
}
.trust-table thead th {
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.trust-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-faint);
  color: var(--text-2);
  vertical-align: middle;
}
.trust-table tbody tr:last-child td { border-bottom: 0; }
.trust-table tbody td:first-child {
  color: var(--text-1);
  font-weight: 600;
}
.trust-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}
/* Residency & Sub-processors: center status pills inside their column cells.
   Any td that directly contains a .trust-pill gets centered. */
#data-residency .trust-table td:has(> .trust-pill) {
  text-align: center;
  vertical-align: middle;
}
.trust-pill.in-progress {
  background: rgba(14,116,144,0.15);
  color: #155E75;
  border: 1px solid rgba(14,116,144,0.30);
}
.trust-pill.planned {
  background: rgba(245,158,11,0.18);
  color: #92400E;
  border: 1px solid rgba(180,83,9,0.35);
}
.trust-pill.na {
  background: rgba(148,163,184,0.12);
  color: #475569;
  border: 1px solid rgba(100,116,139,0.30);
}
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trust-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.trust-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cyan-400);
  opacity: 0.7;
}
.trust-list li strong {
  color: var(--text-1);
  font-weight: 600;
}
.trust-contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.trust-contact {
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  padding: 16px 18px;
}
.trust-contact .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 6px;
}
.trust-contact .v {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
}
.trust-contact .v a {
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px dotted rgba(14,116,144,0.3);
}
.trust-contact .v a:hover {
  border-bottom-color: var(--cyan-300);
}

@media (max-width: 720px) {
  .trust-toc { grid-template-columns: 1fr; }
  .trust-contacts { grid-template-columns: 1fr; }
  .trust-table { font-size: 12px; }
  .trust-table thead th, .trust-table tbody td { padding: 9px 10px; }
}

@media (max-width: 880px) {
  .compare { font-size: 13px; }
  .compare tbody td { padding: 12px 10px; }
  .compare thead th { padding: 12px 10px 10px; }
  .compare thead th:first-child,
  .compare tbody td.criterion { padding-left: 12px; }
}

/* =================== mobile sweep — narrow viewports =================== */

/* Tighten compare table at narrower widths */
@media (max-width: 768px) {
  .compare {
    min-width: 720px;
    font-size: 11px;
  }
  .compare tbody td,
  .compare thead th {
    padding: 10px 8px;
  }
  .compare thead th span {
    font-size: 8.5px;
  }
}

/* Trust table 480px polish */
@media (max-width: 480px) {
  .trust-table { font-size: 11px; }
  .trust-table thead th,
  .trust-table tbody td { padding: 6px 8px; }
}

/* Shot-frame mocks readable on small screens */
@media (max-width: 640px) {
  .shot-frame .body.mock {
    font-size: 10px;
    padding: 10px 12px;
  }
  .mock-kpis { gap: 6px; }
  .mock-kpi { padding: 6px 8px; }
  .mock-kpi .v { font-size: 14px; }
  .mock-table { font-size: 9.5px; }
  .mock-table th,
  .mock-table td { padding: 5px 6px; }
}

/* Architecture stack: hide flow rail label at very narrow */
@media (max-width: 480px) {
  .arch-row { grid-template-columns: 0 1fr; gap: 0; }
  .arch-flow { display: none; }
  .arch-row:not(:last-child)::after { left: 24px; }
}

/* PIE: keep stages stacked but revert arrow to inline at very narrow */
@media (max-width: 480px) {
  .pie-stack { gap: 8px; }
  .pie-stage { flex-direction: column; }
  .pie-arrow {
    transform: none;
    margin: 4px auto;
    width: 16px;
    flex: 0 0 16px;
    font-size: 16px;
  }
  .pie-card { padding: 10px 12px; }
}

/* Integration tiles tighter at narrow */
@media (max-width: 640px) {
  .integration-row { gap: var(--s-1); }
  .integration-row .integration-tile {
    min-width: 100px;
    padding: 8px 12px;
    font-size: 10.5px;
  }
}

/* Platform sidebar: order/full width at very narrow */
@media (max-width: 480px) {
  .platform-sidebar {
    width: 100%;
    margin-bottom: var(--s-4);
    order: -1;
  }
  .platform-sidebar-link {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* Global 480px and 360px polish */
@media (max-width: 480px) {
  body { font-size: 14px; }
  .container { padding-inline: var(--s-3); }
  .grid > * { min-width: 0; }
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5 { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.875rem, 5vw, 2.25rem); }
  h2 { font-size: clamp(1.5rem, 4.5vw, 1.875rem); }
  h3 { font-size: 1.125rem; }
  .lead { font-size: 15px; }
  .btn-xl { font-size: 14px; padding: 12px 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (max-width: 360px) {
  .container { padding-inline: var(--s-2); }
  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.375rem; }
  .btn { font-size: 13px; padding: 10px 14px; }
  .compare { min-width: 100%; font-size: 10px; }
  .compare thead th { padding: 6px 6px 4px; }
  .compare tbody td { padding: 8px 6px; }
}

/* =================== how we fit your stack =================== */
.fit-figure {
  margin: var(--s-7) 0 var(--s-3);
}
.fit-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Top: OpsATC.AI orchestration layer */
.fit-top {
  background: linear-gradient(180deg, rgba(14,116,144,0.10), rgba(77,124,15,0.06));
  border: 1.5px solid rgba(14,116,144,0.5);
  border-radius: 8px;
  padding: 18px 22px;
  position: relative;
  box-shadow: 0 0 24px rgba(14,116,144,0.12);
}
.fit-top-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cyan-300);
  margin-bottom: 6px;
}
.fit-top-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.fit-top-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  max-width: 720px;
}
/* Connectors row: 3 upward arrows */
.fit-connectors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 8px 0;
}
.fit-connector {
  display: flex;
  justify-content: center;
}
.fit-arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--cyan-300);
  opacity: 0.85;
  line-height: 1;
}
/* Foundation row: 3 existing-investment blocks */
.fit-foundation {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.fit-block {
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.fit-block-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.fit-block-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.fit-block-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
}
.fit-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(14,116,144,0.07);
  border: 1px solid rgba(14,116,144,0.18);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.fit-caption {
  margin-top: var(--s-4);
  max-width: 820px;
  margin-inline: auto;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
  text-align: center;
}

@media (max-width: 880px) {
  .fit-foundation {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fit-connectors {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .fit-connector { padding: 4px 0; }
  .fit-top { padding: 14px 16px; }
  .fit-top-title { font-size: 16px; }
}

/* === fits-pillar: aligned 3-card row with icon at top === */
.fits-pillar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.fits-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-4);
  flex-shrink: 0;
}
.fits-icon svg {
  width: 28px;
  height: 28px;
}
.fits-icon.cyan {
  background: rgba(14,116,144,0.10);
  border: 1px solid rgba(14,116,144,0.28);
  color: var(--cyan-300);
}
.fits-icon.lime {
  background: rgba(77,124,15,0.10);
  border: 1px solid rgba(77,124,15,0.30);
  color: var(--lime-300);
}
.fits-pillar .num {
  margin: 0 0 var(--s-2);
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
}
.fits-pillar .fits-title {
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 var(--s-4);
  /* Fixed-height box (2 lines = 56px). Anchor title to the TOP so all single-line
     headings sit at the same y-position across cards and the visual "header line"
     reads as aligned. Two-line titles still fill the box without overflow. */
  height: 56px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.fits-pillar p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}

@media (max-width: 880px) {
  .fits-pillar .fits-title { height: auto; min-height: 0; }
  .fits-icon { width: 48px; height: 48px; }
  .fits-icon svg { width: 24px; height: 24px; }
}

/* === career-progression timeline (about page) === */
.career-timeline {
  margin: var(--s-7) 0;
  padding: var(--s-6) var(--s-5);
  background: linear-gradient(180deg, rgba(14,116,144,0.04), rgba(77,124,15,0.03));
  border: 1px solid rgba(14,116,144,0.18);
  border-radius: var(--r-lg);
}
.career-eyebrow {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 700;
  margin-bottom: var(--s-6);
}
.career-eyebrow span {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(14,116,144,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.career-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
}
/* Horizontal connecting line behind all dots */
.career-track::before {
  content: '';
  position: absolute;
  top: 86px;
  left: 7%;
  right: 7%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(14,116,144,0.4) 6%,
    rgba(14,116,144,0.55) 50%,
    rgba(77,124,15,0.55) 94%,
    transparent 100%);
  z-index: 0;
}
.career-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--s-2);
}
.career-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-4);
  margin-bottom: var(--s-2);
}
.career-years {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cyan-300);
  margin-bottom: var(--s-3);
}
.career-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 2px solid var(--cyan-400);
  box-shadow: 0 0 16px rgba(14,116,144,0.45);
  margin-bottom: var(--s-4);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.career-dot-current {
  background: var(--cyan-400);
  border-color: var(--lime-400);
  box-shadow: 0 0 20px rgba(77,124,15,0.55), 0 0 40px rgba(14,116,144,0.35);
  width: 22px;
  height: 22px;
  margin-top: -2px;
  margin-bottom: calc(var(--s-4) - 2px);
}
/* Education milestone — hollow ring (no fill), dashed-feel border, signals
   "intentional pause for credentials" rather than another industry stop */
.career-dot-edu {
  background: transparent;
  border: 2px dashed var(--cyan-400);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(14,116,144,0.3) inset, 0 0 12px rgba(14,116,144,0.25);
}
.career-step-edu .career-years {
  color: var(--lime-300);
}
.career-step:hover .career-dot {
  transform: scale(1.18);
}
.career-label {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-1);
  letter-spacing: -0.005em;
  max-width: 18ch;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.career-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-transform: none;
}
.career-caption {
  margin-top: var(--s-6);
  max-width: 680px;
  margin-inline: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  text-align: center;
}

/* Mobile: switch to vertical timeline */
@media (max-width: 880px) {
  .career-track {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding-left: var(--s-5);
  }
  .career-track::before {
    top: 0;
    bottom: 0;
    left: 9px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(14,116,144,0.55) 0%,
      rgba(77,124,15,0.55) 100%);
  }
  .career-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 0;
    gap: var(--s-4);
    display: grid;
    grid-template-columns: 22px auto 1fr;
    grid-template-areas:
      "dot years label"
      "dot num   label";
    column-gap: var(--s-4);
  }
  .career-num   { grid-area: num;   margin: 0; align-self: start; }
  .career-years { grid-area: years; margin: 0; align-self: end; }
  .career-dot   { grid-area: dot; margin: 0; }
  .career-label { grid-area: label; max-width: none; align-self: center; align-items: flex-start; text-align: left; }
}

/* === Vertical career timeline (about page, beside conviction) === */
.career-timeline-vertical { padding: var(--s-5) var(--s-5); }
.career-timeline-vertical .career-eyebrow {
  text-align: left;
  margin-bottom: var(--s-5);
}
.career-timeline-vertical .career-track {
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding-left: var(--s-5);
  display: grid;
}
.career-timeline-vertical .career-track::before {
  top: 4px;
  bottom: 4px;
  left: 9px;
  right: auto;
  width: 2px;
  height: auto;
  background: linear-gradient(180deg,
    rgba(14,116,144,0.55) 0%,
    rgba(77,124,15,0.55) 100%);
}
.career-timeline-vertical .career-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas:
    "dot years"
    "dot label";
  column-gap: var(--s-4);
  row-gap: 4px;
  align-items: start;
  text-align: left;
  padding: 0;
}
.career-timeline-vertical .career-num { display: none; }
.career-timeline-vertical .career-years {
  grid-area: years;
  margin: 0;
  align-self: start;
  font-size: 11.5px;
}
.career-timeline-vertical .career-dot   {
  grid-area: dot;
  margin: 0;
  align-self: start;
  margin-top: 4px;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 12px rgba(14,116,144,0.4);
}
.career-timeline-vertical .career-dot-current {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.career-timeline-vertical .career-label {
  grid-area: label;
  max-width: none;
  align-items: flex-start;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  line-height: 1.3;
}
.career-timeline-vertical .career-sub {
  font-size: 10.5px;
  color: var(--text-3);
}
/* Role label — new class, sits below company sub-label */
.career-role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cyan-300);
  text-transform: none;
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
/* Sub-year range tucked beside a role title (used for the Seagate progression) */
.career-role-years {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-4);
  text-transform: none;
}

/* === Portrait column (photo + caption stack in hero) === */
.about-portrait-column {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  width: 100%;
}
.about-portrait-column .brian-portrait {
  flex: 1;
  height: auto;          /* override the inherited height: 100% */
  min-height: 380px;     /* keeps the photo a respectable size when caption is short */
  width: 100%;
}
.portrait-caption {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  font-style: italic;
  color: var(--text-3);
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .about-portrait-column {
    height: auto;
    max-width: 360px;
    margin: 0 auto;            /* center the column on the page */
    gap: var(--s-2);            /* tighten gap between photo and caption */
  }
  .about-portrait-column .brian-portrait { min-height: 0; }
  .portrait-caption {
    max-width: 320px;           /* match the photo's mobile max-width */
    margin: 0 auto;             /* center the caption to align with photo */
    font-size: 14px;            /* slightly larger — reads as personal note, not footnote */
    line-height: 1.55;
    color: var(--text-2);       /* lift one shade lighter from text-3 */
    font-style: normal;         /* drop italic — it's what made it feel footnote-y */
    text-align: center;         /* matches the photo's centered position */
  }
}

/* === Floated career timeline (about page) === */
/* Timeline floats right; conviction + Why now? wrap around it on the left and
   continue at full container width once they extend below the timeline. */
.career-timeline-float {
  float: right;
  width: clamp(280px, 30%, 360px);
  margin: 0 0 var(--s-5) var(--s-6);
}
/* clear-float is applied to the first story-block that should always start
   below the floated timeline (in our case, "What I'm building.") */
.founder-story .clear-float { clear: both; }
/* The conviction sits as the first .story-block but is no longer the *first
   sibling* (the floated figure precedes it). Override the chapter-style
   first-of-type margin reset accordingly. */
.founder-story .story-block:first-of-type { margin-top: 0; }
.founder-story .career-timeline-float + .story-block { margin-top: 0; }

@media (max-width: 980px) {
  .career-timeline-float {
    float: none;
    width: 100%;
    margin: var(--s-6) 0;
  }
}

/* === "Why now" three-things-changed diagram === */
.why-now-three {
  clear: right;                       /* always render below the floated timeline */
  margin: var(--s-5) 0 var(--s-6);    /* controlled gap above; preserves below */
  padding: var(--s-5);
  background: linear-gradient(180deg, rgba(14,116,144,0.04), rgba(77,124,15,0.03));
  border: 1px solid rgba(14,116,144,0.18);
  border-radius: var(--r-lg);
}
.why-now-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 700;
  margin-bottom: var(--s-5);
}
.why-now-eyebrow span {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(14,116,144,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.why-now-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.why-now-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(14,116,144,0.14);
  border-radius: var(--r-md);
}
.why-now-icon {
  width: 64px;
  height: 64px;
  color: var(--cyan-400);
  margin-bottom: var(--s-3);
}
.why-now-icon svg { width: 100%; height: 100%; display: block; }
.why-now-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan-400);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.why-now-title {
  margin: 0 0 var(--s-1, 4px);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.why-now-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
@media (max-width: 760px) {
  .why-now-grid { grid-template-columns: 1fr; }
}

/* === Atmospheric image break (about page) === */
/* Sits between chapters as a wide, full-bleed photographic break. No caption.
   Subtle gradient overlay integrates the image with the dark page background. */
.atmosphere-image {
  margin: var(--s-7) 0;
  width: 100%;
  height: clamp(220px, 26vw, 320px);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line-faint);
}
.atmosphere-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Gradient overlay — subtle darkening at top/bottom edges helps the image
   integrate with the dark page background and feel less like a "stock photo
   inset." Cyan tint on the lower-left adds brand alignment. */
.atmosphere-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 25%, transparent 75%, rgba(255,255,255,0.45) 100%),
    radial-gradient(60% 80% at 0% 100%, rgba(14,116,144,0.10), transparent 60%);
  pointer-events: none;
}
@media (max-width: 760px) {
  .atmosphere-image {
    margin: var(--s-6) 0;
    height: clamp(160px, 38vw, 220px);
  }
}

/* === First-conversation journey (in section 6) === */
.conversation-journey {
  margin: var(--s-6) 0 0;
  padding: var(--s-5);
  background: linear-gradient(180deg, rgba(14,116,144,0.04), rgba(77,124,15,0.03));
  border: 1px solid rgba(14,116,144,0.18);
  border-radius: var(--r-lg);
}
.journey-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 700;
  margin-bottom: var(--s-5);
}
.journey-eyebrow span {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(14,116,144,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  position: relative;
}
/* Connector line behind the step cards */
.journey-steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 4%;
  right: 4%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(14,116,144,0.4) 8%, rgba(77,124,15,0.5) 92%, transparent);
  z-index: 0;
}
.journey-step {
  position: relative;
  z-index: 1;
  padding: var(--s-4);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(14,116,144,0.16);
  border-radius: var(--r-md);
}
.journey-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan-400);
  font-weight: 700;
  display: block;
  margin-bottom: var(--s-2);
}
.journey-title {
  margin: 0 0 var(--s-2) 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.25;
}
.journey-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
@media (max-width: 880px) {
  .journey-steps { grid-template-columns: repeat(2, 1fr); }
  .journey-steps::before { display: none; }
}
@media (max-width: 480px) {
  .journey-steps { grid-template-columns: 1fr; }
}

/* === Three-roles tiles (in section 7) === */
.three-roles {
  margin: var(--s-6) 0 0;
}
.three-roles-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.three-roles-eyebrow span {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(14,116,144,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.three-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.role-tile {
  padding: var(--s-5);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(14,116,144,0.14);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.role-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14,116,144,0.10);
  border: 1px solid rgba(14,116,144,0.32);
  color: var(--cyan-300);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-2);
}
.role-tile:nth-child(2) .role-icon {
  background: rgba(77,124,15,0.10);
  border-color: rgba(77,124,15,0.32);
  color: var(--lime-400);
}
.role-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.role-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
@media (max-width: 760px) {
  .three-roles-grid { grid-template-columns: 1fr; }
}

/* === "What I've actually run" stat grid === */
.actually-run-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin: var(--s-5) 0;
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(14, 116, 144, 0.18);
  border-bottom: 1px solid rgba(14, 116, 144, 0.18);
}
.actually-run-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.actually-run-stat .stat-value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cyan-300);
  line-height: 1;
}
.actually-run-stat .stat-label {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
  max-width: 28ch;
}

@media (max-width: 760px) {
  .actually-run-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
}

/* === Anthropic 4 D's framework === */
.four-ds-figure {
  margin: 0;
  padding: var(--s-6) var(--s-5);
  background: linear-gradient(180deg, rgba(14,116,144,0.04), rgba(77,124,15,0.03));
  border: 1px solid rgba(14,116,144,0.18);
  border-radius: var(--r-lg);
}
.four-ds-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cyan-300);
  text-align: center;
  margin-bottom: var(--s-5);
}
.four-ds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.four-d {
  display: block;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line-faint);
  border-left: 4px solid var(--cyan-400);
  border-radius: 8px;
  padding: var(--s-5);
}
/* Per-card brand color accents — different left border + subtle tint per D */
.four-d:nth-child(1) {
  border-left-color: var(--cyan-400);
  background: linear-gradient(180deg, rgba(14,116,144,0.06), rgba(255,255,255,0.5));
}
.four-d:nth-child(2) {
  border-left-color: var(--lime-400);
  background: linear-gradient(180deg, rgba(77,124,15,0.06), rgba(255,255,255,0.5));
}
.four-d:nth-child(3) {
  border-left-color: #0B5566;
  background: linear-gradient(180deg, rgba(11,85,102,0.07), rgba(255,255,255,0.5));
}
.four-d:nth-child(4) {
  border-left-color: #4D7C0F;
  background: linear-gradient(180deg, rgba(77,124,15,0.05), rgba(255,255,255,0.5));
}
.four-d-letter {
  display: none;
}
.four-d-name {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.015em;
  margin-bottom: var(--s-3);
  line-height: 1.15;
}
.four-d:nth-child(1) .four-d-name { color: var(--cyan-400); }
.four-d:nth-child(2) .four-d-name { color: #4D7C0F; }
.four-d:nth-child(3) .four-d-name { color: #0B5566; }
.four-d:nth-child(4) .four-d-name { color: #3F6610; }
.four-d-desc {
  margin: 0;
  font-size: clamp(0.9375rem, 1.1vw, 1rem);
  line-height: 1.55;
  color: var(--text-2);
}
.four-ds-attribution {
  margin-top: var(--s-5);
  margin-bottom: 0;
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
}

/* === Buyer's Dilemma — long-form narrative section with a pull-quote and
   an illustrative Major Tom recommendation card mockup. Used on Approach. === */
.buyers-dilemma-narrative {
  max-width: none;
}

/* Partner-section hero — 2-column layout: text + visual, used on build.html
   sections (Thesis, Pilot Partners, Capital Partners, Technical Co-Founder). */
.partner-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
  margin-bottom: var(--s-6);
}
.partner-hero-text { min-width: 0; }
.partner-hero-visual {
  margin: 0;
  width: 100%;
  background: rgba(15, 23, 42, 0.045);
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 12px;
  padding: var(--s-4);
}
.partner-hero-visual svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 880px) {
  .partner-hero {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

/* Hero block — eyebrow + H2 on left, story visual on right */
.dilemma-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
  margin-bottom: var(--s-6);
}
.dilemma-hero-text { min-width: 0; }
.dilemma-hero-visual {
  margin: 0;
  width: 100%;
}
.dilemma-hero-visual svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 880px) {
  .dilemma-hero {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}
.buyers-dilemma-narrative p {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 var(--s-4);
}
.buyers-dilemma-narrative p strong {
  color: var(--text-1);
  font-weight: 700;
}
.dilemma-pullquote {
  margin: var(--s-6) 0;
  padding: var(--s-5) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cyan-400);
  text-align: center;
  position: relative;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}
.dilemma-pullquote-mark {
  font-family: var(--font-serif);
  font-size: 1.4em;
  color: var(--cyan-400);
  opacity: 0.55;
  font-style: normal;
  line-height: 0;
  position: relative;
  top: 0.18em;
  margin: 0 0.04em;
}

/* Major Tom recommendation card — illustrative app-UI mockup */
.major-tom-rec {
  margin: var(--s-6) 0 0;
  max-width: 920px;
}
.major-tom-rec-frame {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: 0 12px 32px -16px rgba(11, 23, 38, 0.18), 0 2px 6px -2px rgba(11, 23, 38, 0.10);
}
.major-tom-rec-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.06) 0%, transparent 30%);
}
.major-tom-rec-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-faint);
  margin-bottom: var(--s-4);
  position: relative;
}
.major-tom-rec-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.major-tom-rec-meta { min-width: 0 }
.major-tom-rec-name-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.major-tom-rec-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.major-tom-rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(220, 38, 38, 0.10);
  color: #B91C1C;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.major-tom-rec-context {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-top: 3px;
}
.major-tom-rec-dots {
  color: var(--text-3);
  font-size: 18px;
  letter-spacing: 0.1em;
  user-select: none;
}
.major-tom-rec-body { position: relative }
.major-tom-rec-headline {
  margin: 0 0 var(--s-4);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-1);
}
.major-tom-rec-headline strong { color: var(--text-1); font-weight: 700 }
.major-tom-rec-evidence {
  display: grid;
  gap: 6px;
  background: rgba(14, 116, 144, 0.04);
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.major-tom-rec-evidence-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
}
.major-tom-rec-evidence-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text-3);
  text-transform: uppercase;
}
.major-tom-rec-evidence-supplier {
  color: var(--text-2);
  font-size: 13px;
}
.major-tom-rec-evidence-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.major-tom-rec-evidence-status.status-late {
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
}
.major-tom-rec-evidence-status.status-late-deep {
  background: rgba(220, 38, 38, 0.10);
  color: #B91C1C;
}
.major-tom-rec-evidence-status.status-neutral {
  background: rgba(11, 23, 38, 0.06);
  color: var(--text-2);
}
.major-tom-rec-recommendation {
  margin: 0 0 var(--s-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.02em;
}
.major-tom-rec-options {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.major-tom-rec-options > li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.major-tom-rec-option-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan-400);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.major-tom-rec-options strong { color: var(--text-1); font-weight: 700 }
.major-tom-rec-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-faint);
}
.major-tom-rec-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.major-tom-rec-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface-card);
  color: var(--text-1);
  cursor: pointer;
  transition: background 150ms, transform 100ms;
}
.major-tom-rec-btn:hover { background: var(--bg-1) }
.major-tom-rec-btn:active { transform: translateY(1px) }
.major-tom-rec-btn-primary {
  background: var(--cyan-400);
  border-color: var(--cyan-400);
  color: #fff;
}
.major-tom-rec-btn-primary:hover { background: #0B5566; border-color: #0B5566 }
.major-tom-rec-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-3);
}
.major-tom-rec-btn-ghost:hover { color: var(--text-2); background: var(--bg-1) }
.major-tom-rec-sources a,
.major-tom-rec-sources-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px dotted rgba(14, 116, 144, 0.3);
}
.major-tom-rec-sources a:hover { color: var(--cyan-400) }
.major-tom-rec-sources-icon { margin-right: 4px }
.major-tom-rec-mockup-tag {
  position: absolute;
  top: -10px;
  right: var(--s-5);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: var(--bg-0);
  color: var(--text-3);
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
}

@media (max-width: 720px) {
  .major-tom-rec-evidence-row { grid-template-columns: 1fr; gap: 4px }
  .major-tom-rec-evidence-status { justify-self: start }
  .major-tom-rec-footer { flex-direction: column; align-items: stretch }
  .major-tom-rec-buttons { width: 100% }
}

/* === Hero split layout — illustration on the left, eyebrow+H1 on the right,
   lead paragraph spans full width below. Used on Platform, Approach,
   Resources, Build With Us. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.2fr);
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-5);
}
.hero-split-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-split-illustration > svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.hero-split-headline {
  text-align: left;
  min-width: 0;
}
.hero-split-headline .eyebrow { margin-bottom: var(--s-3); }
@media (max-width: 880px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .hero-split-headline { text-align: center; }
}

/* === Numbered editorial list — alternative to "3 cards in a row" for content
   that reads as a sequence of commitments. Mono numeral on the left, title +
   body on the right, hairline rule between rows. Used on the Approach page. */
.numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-faint);
}
.numbered-list > li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-faint);
  align-items: start;
}
.numbered-list-num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cyan-400);
  line-height: 1;
}
.numbered-list > li:nth-child(2) .numbered-list-num { color: #4D7C0F; }
.numbered-list > li:nth-child(3) .numbered-list-num { color: #0B5566; }
.numbered-list > li:nth-child(4) .numbered-list-num { color: var(--cyan-400); }
.numbered-list > li:nth-child(5) .numbered-list-num { color: #4D7C0F; }
.numbered-list > li:nth-child(6) .numbered-list-num { color: #0B5566; }
.numbered-list-body {
  min-width: 0;
}
.numbered-list-body h3 {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-2);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.numbered-list-marker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.numbered-list-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-400);
  background: rgba(14, 116, 144, 0.08);
  border: 1px solid rgba(14, 116, 144, 0.28);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: 1.2;
  align-self: flex-start;
}
.numbered-list-body p {
  margin: 0;
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  line-height: 1.6;
  color: var(--text-2);
}
.numbered-list-body p a {
  color: var(--cyan-400);
  border-bottom: 1px dotted rgba(14, 116, 144, 0.4);
}
@media (max-width: 720px) {
  .numbered-list > li { grid-template-columns: 56px 1fr; gap: var(--s-3); }
  .numbered-list-num { font-size: 1.75rem; }
  .numbered-list-tag { font-size: 10px; padding: 4px 10px; letter-spacing: 0.10em; }
}
.four-ds-attribution a {
  color: var(--cyan-300);
  border-bottom: 1px dotted rgba(14,116,144,0.4);
}

@media (max-width: 1080px) {
  .four-ds-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .four-ds-grid { grid-template-columns: 1fr; }
  .four-d-letter { font-size: 36px; }
  .four-d { grid-template-columns: 48px 1fr; padding: var(--s-3); }
}

/* === hero brand display — canonical wordmark + slogan, centered === */
.hero-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--s-4);
  padding-bottom: var(--s-7);
  position: relative;
}
.hero-brand::after {
  /* Subtle separator line beneath the brand block — divides brand "splash"
     from the hero content that follows */
  content: '';
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(14,116,144,0.4) 50%,
    transparent 100%);
}
.hero-brand-mark {
  height: 168px;
  width: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 0 28px rgba(14,116,144,0.22))
    drop-shadow(0 0 72px rgba(77,124,15,0.10));
}

@media (max-width: 1080px) {
  .hero-brand-mark { height: 140px; }
}
@media (max-width: 880px) {
  .hero-brand-mark { height: 108px; }
  .hero-brand { padding-bottom: var(--s-6); }
  .hero-brand::after { bottom: var(--s-3); }
}
@media (max-width: 480px) {
  .hero-brand-mark { height: 84px; }
}

/* =================== dispatch (newsletter) pages =================== */
.dispatch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.dispatch-list li { list-style: none; }
/* Whole entry tile is a single clickable anchor */
a.dispatch-entry {
  display: block;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line-faint);
  border-radius: 10px;
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms, background 180ms, transform 180ms;
}
a.dispatch-entry:hover,
a.dispatch-entry:focus-visible {
  border-color: rgba(14,116,144,0.45);
  background: rgba(14,116,144,0.05);
  transform: translateY(-1px);
}
a.dispatch-entry:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}
.dispatch-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dispatch-num {
  color: var(--cyan-300);
  font-weight: 700;
}
.dispatch-date { color: var(--text-4); }
.dispatch-sep { color: var(--text-4); margin: 0 6px; }
.dispatch-title {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 var(--s-3);
  letter-spacing: -0.01em;
  color: var(--text-1);
  transition: color 160ms;
}
a.dispatch-entry:hover .dispatch-title {
  color: var(--cyan-200);
}
.dispatch-excerpt {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 var(--s-3);
}
.dispatch-read {
  display: inline-block;
  color: var(--cyan-300);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
a.dispatch-entry:hover .dispatch-read { color: var(--cyan-200); }

/* === single-issue article layout === */
.dispatch-article {
  padding-bottom: var(--s-7);
}
.dispatch-header {
  padding: calc(var(--nav-h) + var(--s-7)) 0 var(--s-5);
  border-bottom: 1px solid var(--line-faint);
}
.dispatch-meta-row {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.dispatch-header h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.dispatch-preheader {
  color: var(--text-3);
  font-size: 14.5px;
  border-left: 2px solid var(--line-soft);
  padding-left: var(--s-3);
}
.dispatch-body {
  padding-top: var(--s-6);
  padding-bottom: var(--s-5);
}
.dispatch-section {
  margin-bottom: var(--s-4);
}
.dispatch-section:last-child { margin-bottom: 0; }
.dispatch-section h2 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.dispatch-section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan-300);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  background: rgba(14,116,144,0.12);
  border: 1px solid rgba(14,116,144,0.28);
  border-radius: 4px;
  padding: 4px 0;
  align-self: center;
}
.dispatch-section p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 var(--s-4);
}
.dispatch-section p:last-child { margin-bottom: 0; }
.dispatch-section p strong {
  color: var(--text-1);
}
.dispatch-section a {
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px dotted rgba(14,116,144,0.4);
}
.dispatch-section a:hover {
  color: var(--cyan-200);
  border-bottom-color: var(--cyan-300);
}
.dispatch-quote {
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-5);
  background: rgba(77,124,15,0.05);
  border-left: 3px solid var(--lime-400);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-1);
  font-style: italic;
}

/* Drop cap on the opening paragraph of every dispatch article — gives the
   long-form newsletter pages an editorial first-impression. */
.dispatch-body .dispatch-section:first-of-type > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.6em;
  float: left;
  line-height: 0.85;
  margin: 6px 10px 0 0;
  color: var(--cyan-400);
  font-weight: 600;
}
.dispatch-divider {
  border: 0;
  border-top: 1px dashed var(--line-soft);
  margin: var(--s-6) 0;
}
.dispatch-signoff {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--cyan-300);
  margin-top: var(--s-5);
}

/* === in-article figures — flow with prose, no chrome === */
.dispatch-figure {
  margin: var(--s-4) 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.dispatch-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: 0 auto;
}
.dispatch-figure-caption {
  display: block;
  margin: var(--s-2) auto 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--text-3);
  line-height: 1.55;
  max-width: 56ch;
  text-align: left;
}

/* === continue-reading footer cards === */
.dispatch-continue {
  padding: var(--s-6) 0 var(--s-3);
  border-top: 1px solid var(--line-faint);
}
.dispatch-continue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.dispatch-continue-card {
  display: block;
  padding: var(--s-4) var(--s-5);
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 180ms, background 180ms;
}
.dispatch-continue-card:hover {
  border-color: rgba(14,116,144,0.32);
  background: rgba(14,116,144,0.04);
}
.dispatch-continue-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-300);
  margin-bottom: 6px;
}
.dispatch-continue-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.4;
}

@media (max-width: 720px) {
  .dispatch-continue-grid { grid-template-columns: 1fr; }
  .dispatch-section h2 { font-size: 1.25rem; }
  .dispatch-section p { font-size: 14.5px; }
}

/* === Major Tom avatar animations (global — work anywhere the avatar is rendered) === */
.mt-eye-l { transform-origin: 84px 92px; animation: mt-blink 4.5s ease-in-out infinite; }
.mt-eye-r { transform-origin: 116px 92px; animation: mt-blink 4.5s ease-in-out infinite; animation-delay: 0.05s; }
@keyframes mt-blink {
  0%, 86%, 100% { transform: scaleY(1); }
  92% { transform: scaleY(0.06); }
  96% { transform: scaleY(1); }
}
.mt-glow { animation: mt-pulse 3.5s ease-in-out infinite; }
@keyframes mt-pulse { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.55; } }
.mt-antenna-pulse {
  transform-origin: 100px 12px;
  transform-box: fill-box;
  animation: mt-ant-ping 2.6s ease-out infinite;
}
@keyframes mt-ant-ping {
  0% { transform: scale(0.8); opacity: 1; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-eye-l, .mt-eye-r, .mt-glow, .mt-antenna-pulse { animation: none; }
}

/* =================== visual contrast system =================== */
/* Tinted section backgrounds to break up the all-dark-slate monotony.
   Use sparingly — every other content section, not every section. */

.band-cyan,
.band-lime,
.band-deep,
.band-glass {
  position: relative;
  border-block: 1px solid var(--line-faint);
}
.band-cyan {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(14,116,144,0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(14,116,144,0.04) 50%, rgba(255,255,255,0.0) 100%);
}
.band-lime {
  background:
    radial-gradient(ellipse at 70% 0%, rgba(77,124,15,0.07) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(77,124,15,0.04) 50%, rgba(255,255,255,0.0) 100%);
}
.band-deep {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
}
.band-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.0));
  backdrop-filter: blur(4px);
}
/* Subtle scan-line decoration on banded sections */
.band-cyan::before,
.band-lime::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,0.012) 3px,
    rgba(255,255,255,0.012) 4px
  );
  opacity: 0.5;
}

/* Pull-quote — oversized italic callout to break dense text blocks */
.pull-quote {
  position: relative;
  margin: var(--s-7) auto;
  max-width: 880px;
  padding: var(--s-6) var(--s-5) var(--s-6) var(--s-7);
  border-left: 3px solid var(--cyan-400);
  background: linear-gradient(90deg, rgba(14,116,144,0.05) 0%, transparent 100%);
}
.pull-quote.lime {
  border-left-color: var(--lime-400);
  background: linear-gradient(90deg, rgba(77,124,15,0.05) 0%, transparent 100%);
}
.pull-quote::before {
  content: '"';
  position: absolute;
  top: -16px;
  left: 12px;
  font-family: 'Inter', serif;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--cyan-400);
  opacity: 0.18;
  pointer-events: none;
}
.pull-quote.lime::before { color: var(--lime-400); }
.pull-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  color: var(--text-1);
  letter-spacing: -0.01em;
  margin: 0;
}
.pull-quote-text em,
.pull-quote-text strong {
  background: linear-gradient(110deg, var(--cyan-400), var(--lime-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: inherit;
}
.pull-quote-attr {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Stat display — oversized numbers for breaking up paragraphs */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-5);
  border-block: 1px solid var(--line-faint);
}
.stat-cell {
  text-align: center;
}
.stat-cell .num {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--cyan-300), var(--cyan-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: var(--s-2);
}
.stat-cell.lime .num {
  background: linear-gradient(180deg, var(--lime-300), var(--lime-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-cell .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

/* Banner statement — full-width bold proclamation between sections */
.banner-statement {
  position: relative;
  padding: var(--s-7) var(--s-5);
  margin-block: var(--s-7);
  border-block: 1px solid;
  text-align: center;
  overflow: hidden;
}
.banner-statement.cyan {
  border-color: rgba(14,116,144,0.35);
  background: linear-gradient(135deg, rgba(14,116,144,0.06) 0%, rgba(255,255,255,0) 60%, rgba(14,116,144,0.04) 100%);
}
.banner-statement.lime {
  border-color: rgba(77,124,15,0.35);
  background: linear-gradient(135deg, rgba(77,124,15,0.06) 0%, rgba(255,255,255,0) 60%, rgba(77,124,15,0.04) 100%);
}
.banner-statement.split {
  border-image: linear-gradient(90deg, var(--cyan-400), var(--lime-400)) 1;
  background: linear-gradient(90deg, rgba(14,116,144,0.05), rgba(77,124,15,0.05));
}
.banner-statement-text {
  position: relative;
  z-index: 1;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-1);
  max-width: 920px;
  margin: 0 auto;
  text-wrap: balance;
}
.banner-statement-text .accent {
  background: linear-gradient(110deg, var(--cyan-400), var(--lime-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.banner-statement-eyebrow {
  display: inline-block;
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 700;
}
.banner-statement.lime .banner-statement-eyebrow { color: var(--lime-300); }

/* Section divider — geometric SVG-pattern accent between major sections */
.section-divider {
  height: 1px;
  margin: var(--s-7) auto;
  max-width: 480px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--line-soft) 25%,
    var(--cyan-400) 50%,
    var(--line-soft) 75%,
    transparent 100%);
  opacity: 0.8;
}
.section-divider.lime {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--line-soft) 25%,
    var(--lime-400) 50%,
    var(--line-soft) 75%,
    transparent 100%);
}

@media (max-width: 640px) {
  .pull-quote {
    padding: var(--s-5) var(--s-4) var(--s-5) var(--s-5);
    margin: var(--s-5) auto;
  }
  .pull-quote::before { font-size: 64px; top: -8px; }
  .banner-statement { padding: var(--s-5) var(--s-4); }
  .stat-row { padding: var(--s-4) var(--s-3); gap: var(--s-3); }
}

/* === resources hub layout === */
.resources-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
  align-items: stretch;
}
.resources-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.resources-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.resources-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
a.resources-card,
a.resources-card-feature,
a.resources-card-row,
a.resources-card-sm {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line-faint);
  border-radius: 10px;
  transition: border-color 180ms, background 180ms, transform 180ms;
}
a.resources-card { padding: var(--s-5); }
a.resources-card-feature {
  padding: var(--s-6);
  background: linear-gradient(180deg, rgba(14,116,144,0.06), rgba(77,124,15,0.03));
  border-color: rgba(14,116,144,0.28);
}
a.resources-card-row { padding: var(--s-5); }
a.resources-card-sm { padding: var(--s-4) var(--s-4); }
a.resources-card:hover,
a.resources-card-feature:hover,
a.resources-card-row:hover,
a.resources-card-sm:hover,
a.resources-card:focus-visible,
a.resources-card-feature:focus-visible,
a.resources-card-row:focus-visible,
a.resources-card-sm:focus-visible {
  border-color: rgba(14,116,144,0.5);
  background: rgba(14,116,144,0.06);
  transform: translateY(-1px);
}
a.resources-card:focus-visible,
a.resources-card-feature:focus-visible,
a.resources-card-row:focus-visible,
a.resources-card-sm:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}
.resources-card-eyebrow,
.resources-card-row-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.resources-card-eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-400);
}
.resources-card-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--s-2);
}
.resources-card-meta .dispatch-num { color: var(--cyan-300); }
.resources-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-3);
  line-height: 1.3;
  color: var(--text-1);
}
a.resources-card-feature .resources-card-title { font-size: 1.5rem; }
a.resources-card-row h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 0 0 var(--s-2);
  color: var(--text-1);
}
a.resources-card-sm h4 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  color: var(--text-1);
}
.resources-card-desc,
a.resources-card-row p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-3);
  margin: 0 0 var(--s-3);
}
a.resources-card-feature .resources-card-desc { font-size: 14.5px; }
.resources-card-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-300);
  transition: color 160ms;
}
a.resources-card:hover .resources-card-cta,
a.resources-card-feature:hover .resources-card-cta,
a.resources-card-row:hover .resources-card-cta {
  color: var(--cyan-200);
}
a.resources-card-archive {
  text-align: center;
  background: transparent;
  border-style: dashed;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-300);
  padding: var(--s-3) var(--s-4);
}
a.resources-card-archive:hover { color: var(--cyan-200); }

@media (max-width: 980px) {
  .resources-grid { grid-template-columns: 1fr; }
  .resources-grid-3 { grid-template-columns: 1fr 1fr; }
  .resources-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .resources-grid-3 { grid-template-columns: 1fr; }
  a.resources-card-feature .resources-card-title { font-size: 1.25rem; }
}

/* === dispatch tile (newsletter form-card with Major Tom avatar) === */
.dispatch-tile {
  position: relative;
  text-align: center;
  padding-top: var(--s-7);
}
.dispatch-tile-avatar {
  width: 180px;
  height: 180px;
  margin: 0 auto var(--s-5);
  filter: drop-shadow(0 0 32px rgba(14,116,144,0.35)) drop-shadow(0 0 64px rgba(77,124,15,0.10));
}
.dispatch-tile-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dispatch-tile .eyebrow {
  justify-content: center;
}
.dispatch-tile h2,
.dispatch-tile p {
  text-align: center;
}
.dispatch-tile .lead { max-width: none; }
.dispatch-tile form { text-align: left; }

@media (max-width: 640px) {
  .dispatch-tile-avatar { width: 140px; height: 140px; }
  .dispatch-tile { padding-top: var(--s-5); }
}

/* =================== utility classes — common patterns =================== */
.footer-tagline {
  letter-spacing: 0.04em;
}
.disclaimer-note {
  font-size: 14px;
  color: var(--text-3);
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
.disclaimer-note em { color: var(--text-3); }
.h2-section {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
}
.card-warning {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}

/* =================== skip-to-main accessibility link =================== */
/* Visually hidden until keyboard-focused. First focusable element in the
   document order so screen-reader and keyboard users can bypass the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--cyan-400);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.skip-link:focus {
  left: 12px;
  outline: 2px solid var(--lime-400);
  outline-offset: 2px;
}

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

/* =================== legend ========================== */
.legend {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-3);
  margin-top: var(--s-4);
  align-items: center;
  justify-content: center;
}
.legend .item { display: inline-flex; align-items: center; gap: 6px; }