/* ============================================================
   DEADBAND LIFE — GLOBAL STYLESHEET
   db-global.css
   ------------------------------------------------------------
   LOAD THIS ON EVERY PAGE OF THE SITE. NO EXCEPTIONS.
   <link rel="stylesheet" href="db-global.css" />

   WHAT LIVES HERE:
   - The :root token system (the ONLY place colors, fonts,
     spacing, radius, and shadow values are defined). Every
     other stylesheet must consume these tokens via var(--token)
     and must never hardcode a hex value or font-family string.
   - Site-wide reset and base element styles.
   - The Navy Marketing Theme (homepage, about, legal pages,
     pricing, etc.) — this is the DEFAULT body theme.
   - Global chrome shared by every page: nav bar, footer,
     buttons, marketing cards, forms, layout grids.

   WHAT DOES NOT LIVE HERE:
   - Anything article-specific. Article page layout and
     typography belongs in db-article.css. Reusable diagnostic
     components (callouts, stat blocks, system diagrams, etc.)
     belong in db-components.css. If you are tempted to add a
     ".db-something-card" used only inside blog posts, it does
     NOT belong in this file.

   TWO-THEME SYSTEM (confirmed 2026):
   - NAVY MARKETING THEME: used on all non-article pages.
     Dark navy background, Inter typeface, soft rounded
     corners (4-8px), drop shadows, glow accents. This is the
     site's default look — set directly on `body` below.
   - WHITE EDITORIAL THEME: used only on article/blog pages.
     White background, Barlow Condensed + Source Serif 4,
     sharp 90-degree corners on diagnostic components. Defined
     in db-article.css via `body.db-article-page`, which
     overrides the navy defaults set in this file.

   SECTION 10 — MARKETING HOMEPAGE COMPONENTS:
   Added 2026 to support index.html (Phase 0 placeholder site),
   whose component classes (hero, stats bar, matrix comparison
   grid, schematic cards, lexicon teaser, audience cards,
   waitlist, footer breakdown, mobile nav menu, scroll-reveal
   animation) were missing from the prior version of this file.
   See Section 10's own header comment for full detail.

   OPEN FLAG FOR BRAND SOUL:
   This file introduces --db-amber as a new 5th accent color
   beyond Brand Soul V1.02's documented 4-color core. Brand
   Soul should be updated to a V1.03 that formally documents
   this addition before --db-amber is used beyond the homepage.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ------------------------------------------------------------
   Single source of truth. Every value any stylesheet on this
   site needs should be defined here, once, as a CSS custom
   property. db-article.css and db-components.css MUST reference
   these tokens (var(--token-name)) rather than redefining or
   hardcoding values. This is the fix for the token-mismatch bug
   found in the previous version of these files, where
   db-components.css referenced variables (--db-light, --db-text,
   --db-steel, --db-accent, --db-survival, etc.) that did not
   exist anywhere in :root and silently failed.
   ============================================================ */

:root {

  /* --- BRAND CORE (per DB Brand Soul V1.02) --- */
  --db-navy: #0B1F3B;       /* Stability, authority, foundation */
  --db-steel: #6B7280;      /* Framework, precision, historical data */
  --db-blue: #2563EB;       /* Active signal, setpoint, success */
  --db-white: #FFFFFF;      /* The literal Deadband — negative space */

  /* --- NAVY THEME SUPPORTING SHADES ---
     Derived tints/shades of brand core for the marketing theme.
     These exist so db-global.css never needs a raw hex outside
     this block. */
  --db-navy-deep: #071326;       /* page background, darker than --db-navy */
  --db-navy-raised: #102A4D;     /* card/panel surface on navy bg */
  --db-navy-border: #1E3A60;     /* hairline borders on navy surfaces */
  --db-blue-bright: #3B82F6;     /* hover/active state for links+buttons on navy */
  --db-blue-glow: rgba(37, 99, 235, 0.35); /* glow/ambient accent, navy theme only */
  --db-steel-light: #9CA3AF;     /* secondary text on navy backgrounds */
  --db-white-muted: rgba(255, 255, 255, 0.72); /* body text on navy, softer than pure white */

  /* --- WHITE EDITORIAL THEME SUPPORTING SHADES ---
     Used by db-article.css and db-components.css. Defined here
     so there is still only one source of truth. */
  --db-text: #1F2937;            /* primary body text, white theme */
  --db-light: #F3F4F6;           /* light gray surface, white theme */
  --db-light-alt: #F8FAFC;       /* alternate light surface (stat blocks etc.) */
  --db-border: #E5E7EB;          /* hairline border, white theme */
  --db-border-strong: #CBD5E1;   /* heavier border, white theme */

  /* --- PILLAR COLORS (binding spec, confirmed 2026) ---
     Source of truth: DB Blog Post Production Prompt V1.1,
     Section 3.2 (db-pillar-grid / db-cascade-diagram specs).
     These three values are now the ONLY correct pillar hex
     values site-wide. Any other pillar hex value found
     elsewhere in the codebase (e.g. #C2410C for Survival) is
     deprecated and must be replaced. */
  --pillar-survival: #1E5C3B;     /* Survival — Home, Food, Transportation, Emergency */
  --pillar-security: #1A3A6B;     /* Security — Money, Career, Legal, Digital */
  --pillar-vitality: #5B21B6;     /* Vitality — Health, Mental, Relationships, Civic */

  /* Dark-mode variants of the pillar colors — brightened so
     they retain WCAG-acceptable contrast against navy
     backgrounds. Math shown so future edits can reproduce the
     logic: each is the light value lightened ~30-35% in HSL
     lightness while preserving hue, so the pillar identity
     reads the same in both themes. */
  --pillar-survival-dark: #34A35F;   /* #1E5C3B lightened — passes 4.5:1 on navy */
  --pillar-security-dark: #4D7FE0;   /* #1A3A6B lightened — passes 4.5:1 on navy */
  --pillar-vitality-dark: #9D5BE0;   /* #5B21B6 lightened — passes 4.5:1 on navy */

  /* --- SEMANTIC / STATUS COLORS ---
     Used by callouts, action boxes, and warnings across both
     themes. */
  --db-success: #16A34A;
  --db-warning: #D97706;
  --db-danger: #DC2626;

  /* --- ACCENT: AMBER ---
     NEW TOKEN (added 2026, homepage rebuild). Distinct from
     --db-warning on purpose: --db-warning carries SEMANTIC
     meaning (errors, cautions, research-data flags) and must
     stay reserved for that. --db-amber is a decorative brand
     accent for highlighting a single standout stat or callout
     on marketing pages — visually adjacent to warning but not
     interchangeable with it. FLAG: this is a new addition to
     the brand palette beyond Brand Soul V1.02's documented
     4-color core (Navy/Steel/Blue/White) + 3 pillar colors.
     Brand Soul should be updated to a V1.03 that formally adds
     this as an approved 5th accent color before it's used
     beyond the homepage. */
  --db-amber: #F59E0B;
  --db-amber-bright: #FBBF24; /* dark-mode/hover variant, unused on this page but defined for consistency */

  /* --- TYPOGRAPHY: MARKETING THEME (navy pages) ---
     Per DB Brand Soul V1.02, unchanged. Inter remains the
     official marketing-page typeface. */
  --font-marketing-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-marketing-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- TYPOGRAPHY: WHITE EDITORIAL THEME (article pages) ---
     Approved deviation per DB Blog Post Production Prompt V1.1,
     Section 3 — confirmed as an ARTICLE-ONLY exception to Brand
     Soul's Inter spec (Brand Soul itself remains unchanged;
     see file header note in db-article.css for the rationale).
     Defined here as tokens so no file needs to hardcode the
     font-family string. */
  --font-article-display: "Barlow Condensed", sans-serif;
  --font-article-body: "Source Serif 4", Georgia, serif;
  --font-data: "JetBrains Mono", "Courier New", monospace;

  /* --- SPACING SCALE --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --- RADIUS SCALE ---
     Two scales by design. The navy marketing theme uses soft
     rounded corners (chrome-radius-*). Diagnostic/data
     components — in EITHER theme — use sharp 90-degree corners
     per Brand Soul's explicit visual rule and must use
     --radius-sharp (0) rather than any chrome radius token.
     This is a hard rule, not a default: confirmed 2026, no
     exceptions for data visualizations in light or dark mode. */
  --chrome-radius-sm: 4px;
  --chrome-radius-md: 6px;
  --chrome-radius-lg: 8px;
  --chrome-radius-pill: 999px;
  --radius-sharp: 0;

  /* --- BORDER WEIGHT ---
     Per Brand Soul: 1.5-2pt line weight for technical
     iconography / data visualizations. */
  --border-data: 1.5px;
  --border-data-heavy: 2px;
  --border-hairline: 1px;

  /* --- SHADOW SCALE (navy marketing theme only) ---
     The white editorial theme does not use drop shadows;
     it relies on borders and negative space per Brand Soul. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-glow: 0 0 48px var(--db-blue-glow);

  /* --- MOTION --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms; /* scroll-reveal fade-up, homepage */

  /* --- LAYOUT --- */
  --content-max-width: 1200px;
  --article-max-width: 780px;
}

/* ============================================================
   2. RESET
   ============================================================ */

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

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

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

body {
  margin: 0;
  min-height: 100vh;
}

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

button {
  font: inherit;
  cursor: pointer;
}

/* Visible keyboard focus everywhere on the site — required
   floor regardless of theme. Components may restyle this to
   match their own accent color, but must never remove it. */
:focus-visible {
  outline: 2px solid var(--db-blue-bright);
  outline-offset: 2px;
}

/* ============================================================
   3. NAVY MARKETING THEME — DEFAULT BODY STYLE
   ------------------------------------------------------------
   This is the default theme for every page on the site UNLESS
   that page's <body> carries the .db-article-page class, which
   is defined and overridden in db-article.css.
   ============================================================ */

body {
  background-color: var(--db-navy-deep);
  color: var(--db-white-muted);
  font-family: var(--font-marketing-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-marketing-display);
  color: var(--db-white);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}

p {
  margin: 0 0 var(--space-sm);
}

a {
  color: var(--db-blue-bright);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--db-blue);
  text-decoration: underline;
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

.db-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.db-section {
  padding: var(--space-3xl) 0;
}

.db-grid {
  display: grid;
  gap: var(--space-md);
}

.db-grid--2 { grid-template-columns: repeat(2, 1fr); }
.db-grid--3 { grid-template-columns: repeat(3, 1fr); }
.db-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .db-grid--3,
  .db-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .db-grid--2,
  .db-grid--3,
  .db-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   5. NAV BAR
   ============================================================ */

/* ============================================================
   5. NAV BAR
   ------------------------------------------------------------
   Base .db-navbar positioning/chrome only. The inner layout
   (logo, links, mobile toggle, CTA) uses the real component
   classes from the actual homepage markup — .db-nav-container,
   .db-logo, .db-nav-links, .db-nav-toggle, .db-nav-cta — defined
   in Section 10.1 below. (A previous pass of this file invented
   placeholder names, .db-navbar__logo / .db-navbar__links,
   before the real homepage HTML was available for reference;
   those were dead code and have been removed to avoid two
   parallel naming systems for the same nav bar.)
   ============================================================ */

.db-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  background: rgba(7, 19, 38, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-hairline) solid var(--db-navy-border);
}

/* ============================================================
   6. BUTTONS
   ------------------------------------------------------------
   Chrome radius values reviewed and tightened for consistency
   (2026 pass): primary/secondary share one radius scale step
   instead of three slightly different values found previously.
   ============================================================ */

.db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.75rem 1.5rem;
  border-radius: var(--chrome-radius-md);
  border: var(--border-hairline) solid transparent;
  font-family: var(--font-marketing-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.db-btn--primary {
  background: var(--db-blue);
  color: var(--db-white);
  box-shadow: var(--shadow-sm);
}

.db-btn--primary:hover {
  background: var(--db-blue-bright);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
}

.db-btn--secondary {
  background: transparent;
  border-color: var(--db-navy-border);
  color: var(--db-white);
}

.db-btn--secondary:hover {
  background: var(--db-navy-raised);
  text-decoration: none;
}

/* ============================================================
   7. MARKETING CARDS
   ============================================================ */

.db-card {
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.db-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.db-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-2xs);
}

.db-card p {
  color: var(--db-white-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}
.hidden-field {
  display: none;
}

/* 1. Target the outer link wrapper */
.db-card-link {
    text-decoration: none; /* Strips the underline from the entire block */
    color: inherit;        /* Prevents text from turning default browser hyperlink blue */
    display: block;        /* Forces the anchor to behave like a full layout block */
    width: 100%;
}

/* 2. Explicitly safeguard nested typography components */
.db-card-link h3,
.db-card-link p,
.db-card-link span,
.db-card-link div {
    text-decoration: none !important; /* Overrides any stubborn browser-specific agent stylesheets */
}

/* 3. Re-apply the Electric Blue border focus signal on hover */
.db-card-link:hover .db-schematic-card {
    border-color: #2563EB;
    cursor: pointer;
}

/* ============================================================
   8. FORMS
   ============================================================ */

.db-input,
.db-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-sm);
  color: var(--db-white);
  font-family: var(--font-marketing-body);
  font-size: 0.95rem;
}

.db-input::placeholder,
.db-textarea::placeholder {
  color: var(--db-steel-light);
}

.db-input:focus,
.db-textarea:focus {
  border-color: var(--db-blue);
}

/* ============================================================
   9. FOOTER
   ============================================================ */

.db-footer {
  padding: var(--space-2xl) 0;
  border-top: var(--border-hairline) solid var(--db-navy-border);
  color: var(--db-steel-light);
  font-size: 0.875rem;
}

.db-footer a {
  color: var(--db-steel-light);
}

.db-footer a:hover {
  color: var(--db-white);
}

/* ---- Site footer: ARTICLE-PAGE variant ----
   The 18 already-written articles use a simpler site-footer
   markup (.db-footer__brand / .db-footer__links) than the
   homepage's (.db-footer__wordmark / .db-footer__legal,
   Section 10.9 above). Both describe the same site-wide footer
   concept with different class names — supporting both here
   rather than forcing a merge, since reconciling which name
   wins is an editorial decision for the structural review pass,
   not a CSS decision. */
.db-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.db-footer__brand {
  font-family: var(--font-marketing-display);
  font-weight: 800;
  color: var(--db-white);
}

.db-footer__brand span {
  color: var(--db-blue-bright);
}

.db-footer__links {
  display: flex;
  gap: var(--space-md);
}

.db-footer__links a {
  color: var(--db-steel-light);
  font-size: 0.85rem;
}

.db-footer__links a:hover {
  color: var(--db-white);
}

/* ============================================================
   10. MARKETING HOMEPAGE COMPONENTS
   ------------------------------------------------------------
   Added 2026 to support index.html (Phase 0 placeholder site).
   This section did not exist in the previous rebuild pass —
   the homepage was built against an earlier, undocumented
   version of this stylesheet whose component classes never
   made it into Brand Soul or the production-prompt spec, so
   they were dropped when this file was rebuilt from those two
   source documents. Restoring them here, consolidated under
   one heading so the homepage's full component set is easy to
   find and maintain as a unit.

   Scope note: these are MARKETING-page-only components (navy
   theme, Inter typeface, soft/glow chrome per db-global.css
   Section 3). They follow the same theme rules as the rest of
   this file and do not appear on article pages.
   ============================================================ */

/* ---- 10.1 NAV: LOGO, MOBILE TOGGLE, CTA ---- */

.db-nav-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.db-logo {
  font-family: var(--font-marketing-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--db-white);
}

.db-logo:hover {
  text-decoration: none;
  color: var(--db-white);
}

.db-nav-links {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.db-nav-links a {
  color: var(--db-white-muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.db-nav-links a:hover {
  color: var(--db-white);
  text-decoration: none;
}

.db-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  border-radius: var(--chrome-radius-md);
  background: var(--db-blue);
  color: var(--db-white) !important;
  font-size: 0.9rem;
  font-weight: 600;
  flex-shrink: 0;
}

.db-nav-cta:hover {
  background: var(--db-blue-bright);
  text-decoration: none !important;
}

/* Mobile hamburger toggle — hidden on desktop, shown <768px
   (see 10.10 below). Three <span> bars per the HTML markup. */
.db-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.db-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--db-white);
  border-radius: var(--chrome-radius-sm);
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

/* Hamburger -> X animation when menu is open */
.db-nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.db-nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.db-nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- 10.2 HERO ---- */

.db-hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  background:
    radial-gradient(circle at 50% 0%, var(--db-blue-glow), transparent 60%),
    var(--db-navy-deep);
}

.db-hero__inner {
  text-align: center;
  max-width: 760px;
}

.db-hero__eyebrow {
  display: inline-block;
  margin: 0 auto var(--space-md);
  padding: var(--space-3xs) var(--space-sm);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-pill);
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-blue-bright);
}

.db-hero__headline {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.db-accent {
  color: var(--db-blue-bright);
}

.db-hero__sub {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--db-white-muted);
  max-width: 600px;
  margin: 0 auto var(--space-lg);
}

.db-hero__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.db-btn--outline {
  background: transparent;
  border-color: var(--db-navy-border);
  color: var(--db-white);
}

.db-btn--outline:hover {
  background: var(--db-navy-raised);
  text-decoration: none;
}

.db-hero__signal {
  margin-top: var(--space-xl);
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--db-steel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}



.db-stats {
  padding: var(--space-2xl) 0;
  border-top: var(--border-hairline) solid var(--db-navy-border);
  border-bottom: var(--border-hairline) solid var(--db-navy-border);
}

.db-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.db-stat-item__number {
  font-family: var(--font-data);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--db-blue-bright);
  margin-bottom: var(--space-2xs);
}

.db-stat-item__label {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--db-white-muted);
}

.db-stat-item__label sup {
  color: var(--db-steel-light);
}

.db-stats-sources {
  grid-column: 1 / -1;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border-hairline) solid var(--db-navy-border);
  font-size: 0.75rem;
  color: var(--db-steel-light);
}

.db-stats-sources strong {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--db-white-muted);
  font-family: var(--font-data);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.db-stats-sources ol {
  margin: 0;
  padding-left: 1.25rem;
}

.db-stats-sources a {
  color: var(--db-steel-light);
}

.db-stats-sources a:hover {
  color: var(--db-blue-bright);
}

/* ---- 10.4 SECTION LABELS + HEADLINES (shared across sections) ---- */

.db-label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-blue-bright);
}

.db-headline-main {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}

.db-section-headline {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  margin-bottom: var(--space-md);
}

.db-body-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--db-white-muted);
}

.db-body {
  color: var(--db-white-muted);
  line-height: 1.7;
}

.db-quote-attribution {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--db-steel-light);
}

/* ---- 10.5 PROBLEM / MATRIX COMPARISON GRID ---- */

.db-grid-problem {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-xl);
  align-items: start;
}

.db-problem__anchor {
  position: sticky;
  top: var(--space-xl);
}

.db-matrix-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.db-matrix-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
}

.db-matrix-cell {
  flex: 1;
  padding: var(--space-md);
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-left: var(--border-data-heavy) solid var(--db-steel);
  border-radius: var(--chrome-radius-md);
}

/* Two semantic cell types: the conventional myth being
   corrected (muted/steel accent) vs. the systems-thinking
   reality (blue accent) */
.db-matrix-cell.type-flaw {
  border-left-color: var(--db-steel);
}

.db-matrix-cell.type-system {
  border-left-color: var(--db-blue);
}

.matrix-label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--db-steel-light);
}

.db-matrix-cell h4 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2xs);
}

.db-matrix-cell p {
  font-size: 0.9rem;
  color: var(--db-white-muted);
  margin-bottom: 0;
}

.db-matrix-arrow-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  font-size: 1.5rem;
  color: var(--db-blue-bright);
}

/* ---- 10.6 SCHEMATIC CARDS (Framework / Protocol sections) ---- */

.db-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

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

.db-schematic-card {
  padding: var(--space-md);
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-top: var(--border-data-heavy) solid var(--db-steel);
  border-radius: var(--chrome-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Pillar accent variants — these reuse the same pillar tokens
   as the article system's tag/grid components, applied here as
   a plain top-border accent rather than a BEM modifier, to
   match this page's existing markup (class="... pillar-survival"
   rather than "db-schematic-card--survival"). Both naming
   patterns are supported site-wide; this is the marketing-page
   convention. */
.db-schematic-card.pillar-survival { border-top-color: var(--pillar-survival); }
.db-schematic-card.pillar-vitality { border-top-color: var(--pillar-vitality); }
.db-schematic-card.pillar-security { border-top-color: var(--pillar-security); }

.db-schematic__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.schematic-id {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--db-steel-light);
}

.db-schematic-card h3 {
  font-size: 1.4rem;
  margin: 0;
}

.db-schematic__desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--db-white-muted);
  margin: 0;
  flex-grow: 1;
}

.db-schematic__footer-node {
  padding-top: var(--space-sm);
  border-top: var(--border-hairline) solid var(--db-navy-border);
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--db-steel-light);
}

.db-audit-cta-section h3 {
  font-size: 1.5rem;
}

.db-audit-cta-section p {
  color: var(--db-white-muted);
}

/* ---- 10.7 LEXICON TEASER (homepage) ----
   NAMED DISTINCTLY from db-components.css's ".db-lexicon-item",
   which is the article-page glossary component with a
   different internal structure (technical/plain/definition).
   This is the marketing-page teaser version: term + glyph +
   prose definition, no technical/plain split. Two different
   components; two different names, by design. */

.db-lexicon-teaser {
  padding: var(--space-md) 0;
  border-bottom: var(--border-hairline) solid var(--db-navy-border);
}

.db-lexicon-teaser:last-child {
  border-bottom: none;
}

.db-lexicon-term {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-article-display, var(--font-marketing-display));
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--db-white);
  margin-bottom: var(--space-2xs);
}

.lexicon-node {
  color: var(--db-blue-bright);
  font-size: 0.7rem;
}

.db-lexicon-def p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--db-white-muted);
  margin: 0;
}

/* ---- 10.8 AUDIENCE CARDS ---- */

.db-audience-card {
  padding: var(--space-lg);
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-md);
}

.db-audience-badge {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  background: rgba(37, 99, 235, 0.12);
  border-radius: var(--chrome-radius-sm);
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--db-blue-bright);
}

.db-audience-card h4 {
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
}

.db-audience-card p {
  font-size: 0.92rem;
  color: var(--db-white-muted);
}

/* ---- 10.9 WAITLIST + FOOTER DETAIL ---- */

.waitlist {
  text-align: center;
}

.db-waitlist__inner {
  max-width: 560px;
  margin: 0 auto;
}

.db-waitlist-flex-wrapper {
  display: flex;
  justify-content: center;
  margin: var(--space-lg) 0;
}

.db-beehiiv-embed-container {
  width: 100%;
  max-width: 420px;
}

.db-waitlist__promise {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--db-steel-light);
}
.db-footer {
  padding: var(--space-2xl) 0;
  border-top: var(--border-hairline) solid var(--db-navy-border);
  background: var(--db-navy-deep); /* ADD THIS */
  color: var(--db-steel-light);
  font-size: 0.875rem;
}
.db-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
}

.db-footer__wordmark {
  font-family: var(--font-marketing-display);
  font-weight: 800;
  color: var(--db-white);
  margin: 0;
}

.db-footer__wordmark span {
  color: var(--db-blue-bright);
}

.db-footer__tagline {
  font-size: 0.85rem;
  color: var(--db-steel-light);
  margin: 0;
}

.db-footer__legal p {
  margin: 0;
  font-size: 0.85rem;
}

.db-footer__legal a {
  color: var(--db-steel-light);
  margin-left: var(--space-sm);
}

.db-footer__legal a:first-child {
  margin-left: 0;
  background: #071326
}

.db-footer__legal a:hover {
  color: var(--db-white);
}

/* ---- 10.10 SCROLL-REVEAL ANIMATION ----
   Pairs with the existing inline IntersectionObserver script in
   index.html, which adds .is-visible to .animate-on-scroll
   elements as they enter the viewport. Subtle fade-up, ~0.6s,
   no motion before reveal beyond a slight vertical offset. */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- 10.11 RESPONSIVE: MARKETING HOMEPAGE ---- */

@media (max-width: 900px) {
  .db-grid-problem {
    grid-template-columns: 1fr;
  }
  .db-problem__anchor {
    position: static;
  }
  .db-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .db-footer__inner {
    grid-template-columns: 1fr;
    text-align: left !important;
    gap: var(--space-lg);
  }
  .db-footer__legal {
    text-align: left !important;
  }
}

@media (max-width: 768px) {
  /* Show the hamburger, hide the desktop link row by default */
  .db-nav-toggle {
    display: flex;
  }

  .db-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--db-navy-deep);
    border-bottom: var(--border-hairline) solid var(--db-navy-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-standard);
  }

  .db-nav-links.is-open {
    max-height: 400px;
  }

  .db-nav-links a {
    padding: var(--space-sm) var(--space-md);
    border-top: var(--border-hairline) solid var(--db-navy-border);
  }

  .db-nav-cta {
    display: none; /* primary CTA lives inside the mobile menu instead */
  }

  .db-nav-links.is-open::after {
    content: "";
    display: block;
    padding: var(--space-sm) var(--space-md);
  }

  .db-matrix-row {
    flex-direction: column;
  }

  .db-matrix-arrow-right {
    width: auto;
    height: 32px;
    transform: rotate(90deg);
  }

  .db-stats__grid,
  .db-grid-2,
  .db-grid-3 {
    grid-template-columns: 1fr;
  }
}



/* ============================================================
   11. RESPONSIVE — SITE-WIDE CHROME
   ------------------------------------------------------------
   General nav/section responsive rules that apply everywhere.
   Component-specific responsive rules for the homepage live
   inline within Section 10.11 above, next to the components
   they affect.
   ============================================================ */

@media (max-width: 768px) {
  .db-navbar {
    padding: var(--space-sm) var(--space-md);
  }

  .db-section {
    padding: var(--space-2xl) 0;
  }
}

/* ============================================================
   LEGAL DOCUMENT PAGES (Terms, Privacy Policy)
   ------------------------------------------------------------
   Two-column sticky-TOC layout for long-form legal documents.
   Navy marketing theme chrome, white content surface.
   ============================================================ */

.legal-wrapper {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  gap: var(--space-xl);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-3xl);
  background: var(--db-white);
  color: var(--db-text);
}

.legal-header {
  grid-area: header;
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-hairline) solid var(--db-border);
}

.legal-header__eyebrow {
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-steel);
  margin-bottom: var(--space-2xs);
}

.legal-header__title {
  font-family: var(--font-marketing-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--db-navy);
  margin-bottom: var(--space-sm);
}

.legal-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9rem;
  color: var(--db-steel);
}

.legal-header__meta-item strong {
  color: var(--db-navy);
}

.legal-header__meta-dot,
.pp-header__meta-dot {
  font-size: 0.5rem;
  color: var(--db-border-strong);
}

.legal-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: var(--space-lg);
  align-self: start;
  max-height: calc(100vh - var(--space-xl));
  overflow-y: auto;
  padding-right: var(--space-sm);
  border-right: var(--border-hairline) solid var(--db-border);
}

.legal-toc__label,
.legal-toc__compliance-label {
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-steel);
  margin-bottom: var(--space-sm);
}

.legal-toc__list {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.legal-toc__item {
  margin-bottom: var(--space-2xs);
}

.legal-toc__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: 0.88rem;
  color: var(--db-text);
  padding: var(--space-3xs) 0;
}

.legal-toc__link:hover {
  color: var(--db-blue);
  text-decoration: none;
}

.legal-toc__link.is-active {
  color: var(--db-blue);
  font-weight: 600;
  border-left: var(--border-data-heavy) solid var(--db-blue);
  padding-left: var(--space-2xs);
  margin-left: calc(-1 * var(--space-2xs) - var(--border-data-heavy));
}

.legal-toc__num {
  font-family: var(--font-data);
  color: var(--db-steel);
  flex-shrink: 0;
}

.legal-toc__warn {
  color: var(--db-warning);
  font-weight: 700;
  margin-left: var(--space-3xs);
}

.legal-toc__compliance {
  padding-top: var(--space-md);
  border-top: var(--border-hairline) solid var(--db-border);
}

.legal-toc__tag {
  display: inline-block;
  margin: 0 var(--space-3xs) var(--space-3xs) 0;
  padding: var(--space-3xs) var(--space-xs);
  background: var(--db-light);
  border-radius: var(--chrome-radius-sm);
  font-family: var(--font-data);
  font-size: 0.68rem;
  color: var(--db-steel);
}

.legal-main {
  grid-area: main;
  min-width: 0;
}

.legal-section {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: var(--border-hairline) solid var(--db-border);
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-section__id {
  font-family: var(--font-data);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-steel);
  margin-bottom: var(--space-2xs);
}

.legal-section h2 {
  font-family: var(--font-marketing-display);
  color: var(--db-navy);
  font-size: 1.6rem;
  margin-bottom: var(--space-sm);
}

.legal-section h3 {
  font-family: var(--font-marketing-display);
  color: var(--db-navy);
  font-size: 1.15rem;
  margin: var(--space-md) 0 var(--space-2xs);
}

.legal-section p,
.legal-section li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--db-text);
}

/* Definition lists, rights blocks, contact grids */

.legal-definition,
.legal-rights-block {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--db-light);
  border-left: var(--border-data-heavy) solid var(--db-steel);
}

.legal-definition__label,
.legal-rights-block__label {
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-steel);
  margin-bottom: var(--space-sm);
}

.legal-definition dl,
.legal-rights-block dl {
  margin: 0;
}

.legal-definition dt,
.legal-rights-block dt {
  font-weight: 700;
  color: var(--db-navy);
  margin-top: var(--space-sm);
}

.legal-definition dd,
.legal-rights-block dd {
  margin: var(--space-3xs) 0 0;
  color: var(--db-text);
}

.legal-contact-grid {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.legal-contact-item__method {
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--db-steel);
  margin-bottom: var(--space-3xs);
}

.legal-contact-item__value {
  color: var(--db-text);
}

/* Tables */

.legal-table-wrapper {
  margin: var(--space-md) 0;
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.legal-table th {
  background: var(--db-navy);
  color: var(--db-white);
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
}

.legal-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-hairline) solid var(--db-border);
  vertical-align: top;
}

.legal-table .td-bold {
  font-weight: 700;
  color: var(--db-navy);
  white-space: nowrap;
}

.legal-table .td-mono {
  font-family: var(--font-data);
  font-size: 0.82rem;
  color: var(--db-steel);
}

/* Callouts — two naming conventions across the two files
   (tc-callout in Terms, pp-callout in Privacy Policy) for the
   identical component. Both supported. */

.tc-callout,
.pp-callout {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  border-left: var(--border-data-heavy) solid;
}

.tc-callout--info,
.pp-callout--info {
  background: rgba(37, 99, 235, 0.05);
  border-left-color: var(--db-blue);
}

.tc-callout--warn,
.pp-callout--warn {
  background: rgba(217, 119, 6, 0.05);
  border-left-color: var(--db-warning);
}

.tc-callout--critical {
  background: rgba(220, 38, 38, 0.05);
  border-left-color: var(--db-danger);
}

.pp-callout--rights {
  background: rgba(22, 163, 74, 0.05);
  border-left-color: var(--db-success);
}

.legal-callout__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
}

.legal-callout__label {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--db-navy);
}

.legal-reg-badge {
  display: inline-block;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--db-navy);
  color: var(--db-white);
  font-family: var(--font-data);
  font-size: 0.65rem;
  border-radius: var(--chrome-radius-sm);
}

/* Responsive: collapse to single column below 900px */

@media (max-width: 900px) {
  .legal-wrapper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main";
  }

  .legal-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: var(--border-hairline) solid var(--db-border);
    padding-bottom: var(--space-md);
  }
}

/* ============================================================
   SYSTEMS PAGE — PILLAR CARDS + SYSTEM DIRECTORY CARDS
   ============================================================ */

.db-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.db-pillar-card {
  position: relative;
  padding: var(--space-lg);
  padding-top: calc(var(--space-lg) + var(--space-2xs));
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-lg);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.db-pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.db-pillar-card__indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--chrome-radius-lg) var(--chrome-radius-lg) 0 0;
}

.db-pillar-card[data-pillar="survival"] .db-pillar-card__indicator { background: var(--pillar-survival-dark); }
.db-pillar-card[data-pillar="vitality"] .db-pillar-card__indicator { background: var(--pillar-vitality-dark); }
.db-pillar-card[data-pillar="security"] .db-pillar-card__indicator { background: var(--pillar-security-dark); }

.db-pillar-card__title {
  font-size: 1.4rem;
  margin-bottom: var(--space-2xs);
}

.db-pillar-card__text {
  color: var(--db-white-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.db-system-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.db-system-card {
  position: relative;
  padding: var(--space-md);
  padding-top: calc(var(--space-md) + var(--space-3xs));
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-top: 3px solid var(--db-steel);
  border-radius: var(--chrome-radius-md);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-top-color var(--duration-base) var(--ease-standard);
}

.db-system-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.db-system-card[data-pillar="survival"] { border-top-color: var(--pillar-survival-dark); }
.db-system-card[data-pillar="vitality"] { border-top-color: var(--pillar-vitality-dark); }
.db-system-card[data-pillar="security"] { border-top-color: var(--pillar-security-dark); }

.db-system-card__badge {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--chrome-radius-sm);
  font-family: var(--font-data);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.db-system-card[data-pillar="survival"] .db-system-card__badge {
  background: rgba(52, 163, 95, 0.15);
  color: var(--pillar-survival-dark);
}
.db-system-card[data-pillar="vitality"] .db-system-card__badge {
  background: rgba(157, 91, 224, 0.15);
  color: var(--pillar-vitality-dark);
}
.db-system-card[data-pillar="security"] .db-system-card__badge {
  background: rgba(77, 127, 224, 0.15);
  color: var(--pillar-security-dark);
}

.db-system-card__title {
  font-size: 1.1rem;
  margin-bottom: var(--space-2xs);
}

.db-system-card__text {
  color: var(--db-white-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .db-pillar-grid {
    grid-template-columns: 1fr;
  }
  .db-system-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .db-system-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SYSTEMS PAGE — SYMPTOM LIST + SECTION BACKGROUND MODIFIERS
   ============================================================ */

.db-symptom-list {
  list-style: none;
  margin: var(--space-md) 0;
  padding: 0;
}

.db-symptom-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) 0;
  color: var(--db-white-muted);
  font-size: 0.95rem;
}

.db-symptom-bullet {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--db-warning);
  border-radius: 50%;
}

.db-section--border-top {
  border-top: var(--border-hairline) solid var(--db-navy-border);
}

.db-section--alt-bg {
  background: var(--db-navy-raised);
}

.db-section--embed-portal {
  background: radial-gradient(circle at 50% 100%, var(--db-blue-glow), transparent 60%),
              var(--db-navy);
  text-align: center;
}

.db-portal-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: var(--space-sm);
}

.db-portal-subtitle {
  color: var(--db-white-muted);
  font-size: 1.05rem;
  margin-bottom: var(--space-lg);
}

/* ============================================================
   CONTACT FORM CARD
   ============================================================ */

.db-contact-card-wrapper {
  max-width: 560px;
  margin: 0 auto var(--space-3xl);
  padding: var(--space-xl);
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-lg);
  box-shadow: var(--shadow-md);
}

.db-contact-card-title {
  font-family: var(--font-marketing-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--db-white);
  margin: var(--space-2xs) 0 var(--space-lg);
}

.db-form-row-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.db-form-label {
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--db-steel-light);
}

.db-form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--db-navy);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-sm);
  color: var(--db-white);
  font-family: var(--font-marketing-body);
  font-size: 0.95rem;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.db-form-input::placeholder {
  color: var(--db-steel);
}

.db-form-input:focus {
  outline: none;
  border-color: var(--db-blue);
  box-shadow: 0 0 0 3px var(--db-blue-glow);
}

.db-form-secure-footer {
  margin-top: var(--space-2xs);
  text-align: center;
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--db-steel);
}

.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .db-contact-card-wrapper {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
    padding: var(--space-lg);
  }
}

/* ============================================================
   ABOUT PAGE — LAYOUT SPLIT + TERMINAL BOX + PROCESS LIST
   ============================================================ */

.db-about-layout-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.db-about-terminal-box {
  padding: var(--space-lg);
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-lg);
}

.db-about-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-hairline) solid var(--db-navy-border);
}

.terminal-badge {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--db-blue-bright);
}

.terminal-status {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--db-steel-light);
}

/* Process-step list (Diagnose/Design/Implement/Iterate on the
   About page). Renamed from db-lexicon-item to avoid colliding
   with the article-page glossary component of the same name,
   which has a different structure and is reserved for the white
   editorial theme. */
.db-process-item {
  padding: var(--space-sm) 0;
  border-bottom: var(--border-hairline) solid var(--db-navy-border);
}

.db-process-item:last-child {
  border-bottom: none;
}

@media (max-width: 900px) {
  .db-about-layout-split {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   SECTION 1: CAROUSEL COMPONENT (HORIZONTAL AXIS TRACKING)
   ========================================================================== */

/* Structural container enforcing expanded negative space margins */
.db-carousel-container {
  position: relative;
  max-width: 800px;
  margin: 3.6rem auto; /* Sized exactly to meet +20% benchmark guidelines */
  padding: 1.8rem;
  background-color: var(--db-white);
  border: var(--db-stroke) solid var(--db-navy);
  box-sizing: border-box;
}

/* The structural mask isolating the active slide */
.db-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Flex track holding the slides linearly along the X-axis */
.db-carousel-track {
  display: flex;
  flex-direction: row; /* Enforces horizontal containment, preventing vertical stacks */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  padding: 0;
  margin: 0;
}

.db-carousel-slide {
  min-width: 100%;
  flex-shrink: 0; /* Prevents compression of image canvases */
  box-sizing: border-box;
  position: relative;
}

/* Strict geometry compliance: 90-degree corners on raw media */
.db-carousel-slide img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  border-radius: var(--db-sharp);
}

.db-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--db-navy);
  color: var(--db-white);
  border: none;
  width: 45px;
  height: 45px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.db-carousel-nav:hover {
  background-color: var(--db-electric);
}

.db-carousel-nav.prev { left: 2rem; }
.db-carousel-nav.next { right: 2rem; }

.db-carousel-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--db-stroke);
}

.db-carousel-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.8rem;
  font-family: var(--font-sans);
}

.db-carousel-counter {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--db-navy);
  font-weight: bold;
}

.db-carousel-indicators {
  display: flex;
  gap: 0.5rem;
}

.db-indicator {
  width: 24px;
  height: 4px;
  background-color: var(--db-steel);
  border: none;
  cursor: pointer;
  border-radius: var(--db-sharp);
  transition: background-color 0.2s ease;
}

.db-indicator.active {
  background-color: var(--db-electric);
}
/* ==========================================================================
   ISOLATED DEADBAND SYSTEM CASCADE PIPELINE STYLES
   ========================================================================== */

.db-trace-pipeline-section {
  padding: var(--space-2xl) var(--space-md);
  background-color: var(--db-navy-deep);
  color: var(--db-white-muted);
}

.db-trace-pipeline-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.db-trace-pipeline-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.db-tr-badge {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--db-blue-bright);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-xs);
}

.db-trace-pipeline-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: var(--space-xs);
  color: var(--db-white);
}

.db-tr-intro {
  max-width: 580px;
  margin: 0 auto;
  font-size: 1rem;
  opacity: 0.85;
  line-height: 1.5;
}

/* Pipeline Track Layout: Clean Linear Stream */
.db-trace-track-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: var(--space-xl) auto;
}

/* Highly Compact Schematic Node Cards */
.db-tr-node-card {
  flex: 1;
  background: var(--db-navy-raised);
  border: var(--border-data) solid var(--db-navy-border);
  border-radius: var(--radius-sharp); /* Forced sharp 90° corners */
  padding: var(--space-md);
  min-width: 240px;
  max-width: 320px;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Highlight Anchor Node Spec */
.db-tr-node-card.db-tr-node-active {
  border-color: var(--db-danger);
  animation: dbTrackPulse 3s infinite ease-in-out;
}

.db-tr-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.db-tr-num {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--db-steel-light);
  letter-spacing: 0.05em;
}

/* Scope-Isolated Status Indicators */
.db-tr-status-tag {
  font-family: var(--font-data);
  font-size: 0.65rem;
  font-weight: bold;
  padding: 1px var(--space-3xs);
  border-radius: var(--radius-sharp);
}

.db-tr-status-tag.status-critical {
  background: rgba(220, 38, 38, 0.15);
  color: var(--db-danger);
  border: var(--border-hairline) solid var(--db-danger);
}

.db-tr-status-tag.status-fault {
  background: rgba(217, 119, 6, 0.15);
  color: var(--db-warning);
  border: var(--border-hairline) solid var(--db-warning);
}

.db-tr-node-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--db-white);
  margin-bottom: var(--space-2xs);
}

.db-tr-node-card p {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--db-white-muted);
  margin-bottom: var(--space-sm);
  min-height: 58px; /* Holds vertical baseline uniform alignment */
}

/* Isolated Metrics Tracking Graph Elements */
.db-tr-meter {
  width: 100%;
  height: 4px;
  background-color: var(--db-navy-deep);
  border-radius: var(--radius-sharp);
  margin-bottom: 4px;
  overflow: hidden;
}

.db-tr-fill {
  height: 100%;
}
.db-tr-fill.fill-danger { background-color: var(--db-danger); }
.db-tr-fill.fill-warning { background-color: var(--db-warning); }

.db-tr-data-readout {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--db-steel-light);
}

/* Visual Flow Pipeline Arrows */
.db-trace-pipeline-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.arrow-vector {
  position: relative;
  width: 100%;
  max-width: 60px;
  height: var(--border-data);
  background-color: var(--db-steel);
}

.arrow-vector::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--db-steel);
}

/* Dynamic Mobile/Cross-Device Stacking Framework Rules */
@media (max-width: 960px) {
  .db-trace-track-layout {
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .db-tr-node-card {
    max-width: 100%;
    width: 100%;
  }

  .db-tr-node-card p {
    min-height: auto;
  }

  .db-trace-pipeline-arrow {
    transform: rotate(90deg);
    padding: var(--space-2xs) 0;
    margin: var(--space-3xs) 0;
  }
}

/* Call to Action Module Block */
.db-trace-pipeline-footer {
  margin-top: var(--space-xl);
  text-align: center;
  border-top: var(--border-hairline) solid var(--db-navy-border);
  padding-top: var(--space-lg);
}

.db-trace-pipeline-footer p {
  max-width: 540px;
  margin: 0 auto var(--space-md);
  font-size: 0.95rem;
}

.db-tr-btn-compact {
  display: inline-block;
  background-color: var(--db-blue);
  color: var(--db-white);
  font-family: var(--font-marketing-display);
  font-weight: 700;
  font-size: 0.9rem;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--chrome-radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.db-tr-btn-compact:hover {
  background-color: var(--db-blue-bright);
}

@keyframes dbTrackPulse {
  0%, 100% { border-color: var(--db-navy-border); }
  50% { border-color: var(--db-danger); }
}
/* ==========================================================================
   DEADBAND TRUST MATRIX & TELEMETRY COMPONENT
   ========================================================================== */

.trust-matrix-section {
  padding: var(--space-3xl) var(--space-md); /* Strict +20% negative space layout rule */
  background-color: var(--db-navy-deep);
  color: var(--db-white-muted);
  border-top: var(--border-data) solid var(--db-navy-border);
  border-bottom: var(--border-data) solid var(--db-navy-border);
}

.trust-matrix-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.trust-matrix-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.trust-matrix-badge {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--db-blue-bright);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-sm);
}

.trust-matrix-header h2 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 800;
  margin-bottom: var(--space-md);
  color: var(--db-white);
}

.trust-matrix-intro {
  max-width: 740px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Three Column Trust Layout Framework */
.trust-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

@media (max-width: 960px) {
  .trust-matrix-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* Core Technical Grid Cards */
.trust-matrix-card {
  background: var(--db-navy-raised);
  border: var(--border-data) solid var(--db-navy-border);
  border-radius: var(--radius-sharp); /* Strictly overrides rounding to force 90° corners */
  padding: var(--space-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  box-shadow: var(--shadow-md);
}

.card-indicator-tag {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-data);
  font-size: 0.65rem;
  font-weight: bold;
  padding: 2px var(--space-3xs);
  border-radius: var(--radius-sharp);
}

.tag-peer-reviewed {
  background-color: rgba(37, 99, 235, 0.15);
  color: var(--db-blue-bright);
  border: var(--border-hairline) solid var(--db-blue-bright);
}

.tag-live-telemetry {
  background-color: rgba(217, 119, 6, 0.15);
  color: var(--db-warning);
  border: var(--border-hairline) solid var(--db-warning);
}

.tag-transformation {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981; /* High compliance output green marker */
  border: var(--border-hairline) solid #10b981;
}

.matrix-card-num {
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: var(--db-steel-light);
  margin-bottom: var(--space-xs);
}

.trust-matrix-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--db-white);
  margin-bottom: var(--space-sm);
  padding-right: 90px; /* Protects headline from colliding with badge tracking text */
}

.trust-matrix-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--db-white-muted);
  flex-grow: 1;
  margin-bottom: var(--space-lg);
}

.trust-matrix-card  .matrix-card-footer {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--db-steel-light);
  border-top: var(--border-hairline) solid var(--db-navy-border);
  padding-top: var(--space-sm);
}

/* ==========================================================================
   GRAPHICAL DATA COMPONENT: TELEMETRY OUTCOMES
   ========================================================================== */

.trust-telemetry-panel {
  background: var(--db-navy-deep);
  border: var(--border-data) solid var(--db-steel); /* Uses heavier steel border signature */
  border-radius: var(--radius-sharp);
  padding: var(--space-xl);
  box-sizing: border-box;
}

.panel-header-label {
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: var(--db-steel-light);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xl);
  border-bottom: var(--border-hairline) solid var(--db-navy-border);
  padding-bottom: var(--space-sm);
}

.telemetry-row-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 900px) {
  .telemetry-row-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.telemetry-metric-box {
  display: flex;
  flex-direction: column;
}

.telemetry-metric-box h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db-white);
  margin-bottom: var(--space-xs);
}

/* Strict Blueprint Track Frame Geometry */
.telemetry-track-frame {
  width: 100%;
  height: 10px;
  background-color: #050e1b; /* Deep variance background shade */
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--radius-sharp);
  margin-bottom: var(--space-xs);
  overflow: hidden;
  position: relative;
}

.telemetry-track-fill {
  height: 100%;
}

.fill-electric {
  background-color: var(--db-blue-bright); /* High contrast active signal setpoint */
}

.telemetry-labels-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.label-mono {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--db-steel-light);
}

.label-mono-bold {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--db-white);
}

.telemetry-desc {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--db-white-muted);
}

/* Trust Statement Footer Section */
.trust-matrix-footer {
  margin-top: var(--space-3xl);
  text-align: center;
  border-top: var(--border-hairline) solid var(--db-navy-border);
  padding-top: var(--space-2xl);
}

.footer-lock-icon {
  font-size: 1.75rem;
  margin-bottom: var(--space-sm);
}

.trust-matrix-footer h3 {
  font-size: 1.5rem;
  color: var(--db-white);
  margin-bottom: var(--space-sm);
}

.trust-matrix-footer p {
  max-width: var(--content-width-text);
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
}
/* ============================================================
   NAV: MEMBERS DROPDOWN
   ------------------------------------------------------------
   Added to support a "Members" dropdown in .db-nav-links,
   listing Login / Account / Purchases / Dashboard. Uses the
   same chrome-radius / navy-raised token pattern as other
   floating chrome (e.g. db-card, db-nav-cta) — this is UI
   chrome, not a data visualization, so the sharp-corner rule
   does not apply here.
 
   Behavior: toggled via JS (adds/removes .is-open on
   .db-nav-dropdown). Desktop: floats below the trigger.
   Mobile (<768px): becomes an inline expanding accordion
   instead of an absolutely-positioned menu, because the
   parent .db-nav-links uses overflow:hidden for its own
   open/close animation — an absolute child would be clipped.
   ============================================================ */
 
.db-nav-dropdown {
  position: relative;
}
 
.db-nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  background: transparent;
  border: none;
  padding: 0;
  color: var(--db-white-muted);
  font-family: var(--font-marketing-body);
  font-size: 0.95rem;
  font-weight: 500;
}
 
.db-nav-dropdown__trigger:hover,
.db-nav-dropdown.is-open .db-nav-dropdown__trigger {
  color: var(--db-white);
}
 
.db-nav-dropdown__chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}
 
.db-nav-dropdown.is-open .db-nav-dropdown__chevron {
  transform: rotate(180deg);
}
 
.db-nav-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  min-width: 180px;
  background: var(--db-navy-raised);
  border: var(--border-hairline) solid var(--db-navy-border);
  border-radius: var(--chrome-radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xs);
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast);
  z-index: 200;
}
 
.db-nav-dropdown.is-open .db-nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
 
.db-nav-dropdown__menu li + li {
  margin-top: 2px;
}
 
.db-nav-dropdown__menu a {
  display: block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--chrome-radius-sm);
  color: var(--db-white-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}
 
.db-nav-dropdown__menu a:hover {
  background: var(--db-navy-border);
  color: var(--db-white);
  text-decoration: none;
}
 
@media (max-width: 768px) {
  /* Nested accordion instead of a floating menu — see comment
     above. Visual pattern matches the existing mobile
     .db-nav-links a treatment (full-width, hairline dividers). */
  .db-nav-dropdown {
    width: 100%;
  }
 
  .db-nav-dropdown__trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-top: var(--border-hairline) solid var(--db-navy-border);
  }
 
  .db-nav-dropdown__menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }
 
  .db-nav-dropdown.is-open .db-nav-dropdown__menu {
    display: block;
  }
 
  .db-nav-dropdown__menu li + li {
    margin-top: 0;
  }
 
  .db-nav-dropdown__menu a {
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-lg);
    border-top: var(--border-hairline) solid var(--db-navy-border);
    border-radius: 0;
  }
}