/* =============================================================================
   Sempova — styles.css
   Design system for the Sempova brand site (a service of Billie Grant, LLC).

   CONCEPT: "The watch is always stood." A deep marine-navy field (the night
   watch) with a single warm teal signal light that never goes out (the beacon)
   — the honest fusion of a real Navy-veteran founder and the 24/7 promise.

   Built self-contained for a strict CSP: no external fonts, scripts, or assets.
   All color ramps constructed in OKLCH (perceptually uniform); every locked text
   pair is WCAG 2.1 AA verified in code (see contrast ratios noted per token).
   Author: Iris Mercer (design/media clone). 2026-07-19.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS — LIGHT (default) — the "day" surfaces.
   "Warm Editorial Authority" palette (Iris Mercer, from the Billie-Grant
   Homepage-Comp draft, 2026-07-20) — a warm paper ground with a single dark
   teal signal, replacing the earlier marine-blue-grey light theme. Dark mode
   below is UNCHANGED — this is the "day" surfaces only. Every ratio below is
   computed against the actual bg (#F7F6F2, relative luminance 0.9209), not
   copied from the source comp's comments.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Warm paper neutral ramp */
  --bg:            #F7F6F2;  /* page                              */
  --surface:       #FFFFFF;  /* raised card                       */
  --surface-2:     #EFEBDF;  /* alt section band                 */
  --ink:           #17191F;  /* headings     16.25:1              */
  --ink-body:      #2A2D35;  /* body         12.73:1              */
  --ink-muted:     #5C6069;  /* secondary     5.82:1              */
  --line:          #E3E1D8;  /* decorative hairline (not a UI border, no ratio floor) */
  --line-strong:   #8F887A;  /* UI border     3.25:1 — darkened vs. the source
                                 comp's --line2 (#D3D0C4, measured 1.43:1 — fails
                                 WCAG's 3:1 floor for UI components); fixed here */

  /* Dark teal — doubles as link color AND accent-fg (dark enough to read as
     text, unlike the old bright-teal token, so no blue substitute needed) */
  --brand:         #0A4A45;  /* link          9.35:1              */
  --brand-strong:  #073531;  /* link hover   ~11:1                */
  --on-brand:      #FFFFFF;  /* text on brand-fill (token kept for parity; --brand is not used as a fill in this build) */

  /* Signal teal — the beacon and the primary CTA fill */
  --accent:        #0C7A72;  /* CTA fill      4.80:1 as text, white-on-fill 5.20:1 */
  --accent-ink:    #FFFFFF;  /* text on accent fill                              */

  /* Fixed brand mark color — the logo/beacon graphic (NOT the CTA/text accent
     above). Billie's rule (2026-07-20): the mark is decorative branding, not
     text, so it must NOT re-contrast itself per theme — it stays the exact
     same teal on paper or on navy. Defined once here, outside both the light
     and dark token blocks, so no theme override can touch it. */
  --signal:        #17BEAC;

  /* accent-fg can now point straight at --accent: teal-d is dark enough to
     read as text on paper, so light mode no longer needs a blue stand-in. */
  --accent-fg:     var(--accent);

  --focus:         var(--accent);           /* focus ring on light surfaces */

  /* Shadows — neutral warm-ink, never a colored glow (glow is only the beacon) */
  --shadow-1: 0 1px 2px rgb(23 25 31 / 0.06), 0 2px 8px rgb(23 25 31 / 0.06);
  --shadow-2: 0 4px 12px rgb(23 25 31 / 0.08), 0 12px 32px rgb(23 25 31 / 0.10);

  /* --- Type scale: base 1rem, ratio 1.2 (minor third, editorial). 7 members --- */
  --fs-1: 0.833rem;   /* kickers, fine print   (1.2^-1) */
  --fs-2: 1rem;       /* small UI, meta        (1.2^0)  */
  --fs-3: 1.2rem;     /* body                  (1.2^1)  */
  --fs-4: 1.44rem;    /* lead / h3             (1.2^2)  */
  --fs-5: 1.728rem;   /* h2                    (1.2^3)  */
  --fs-6: clamp(2.074rem, 1.55rem + 2.6vw, 2.986rem);   /* section display (1.2^4→1.2^6) */
  --fs-7: clamp(2.6rem, 1.7rem + 4.5vw, 3.583rem);      /* hero h1        (→1.2^7) */

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-body:  1.45;

  /* --- Spacing scale (4 / 8 multiples) --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* --- Radii (nested = outer − padding where used) --- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* --- Measure (line-length caps) --- */
  --measure: 34rem;     /* ~66ch body prose */
  --measure-wide: 46rem;
  --container: 72rem;   /* 1152px content width */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   2. TOKENS — DARK — the "night watch". Theme = token re-aliasing only.
   Triggered by prefers-color-scheme, overridable by [data-theme] (JS toggle).
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           oklch(0.160 0.032 252);  /* #040e1a */
    --surface:      oklch(0.200 0.036 250);  /* #081726 */
    --surface-2:    oklch(0.245 0.038 250);  /* #122232 */
    --ink:          oklch(0.960 0.010 250);  /* #edf2f8  17.3:1 */
    --ink-body:     oklch(0.880 0.014 250);  /* #d1d8e1  13.5:1 */
    --ink-muted:    oklch(0.720 0.022 250);  /* #9ba6b2   7.8:1 */
    --line:         oklch(0.310 0.030 250);  /* #25323f */
    --line-strong:  oklch(0.520 0.032 250);  /* #5b6b7b   3.53:1 */
    --brand:        oklch(0.760 0.110 240);  /* #6bbaf0   9.2:1 */
    --brand-strong: oklch(0.840 0.090 240);
    --on-brand:     oklch(0.180 0.040 252);  /* dark ink on light-blue fill */
    --accent:       oklch(0.830 0.140 183);   /* #2fe4d0  teal */
    --accent-ink:   oklch(0.180 0.040 252);  /* #041223  11.76:1 (vs. amber's 10.9:1) */
    --accent-fg:    var(--accent);           /* teal pops on navy */
    --focus:        var(--accent);
    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.35);
    --shadow-2: 0 6px 18px oklch(0 0 0 / 0.45), 0 16px 40px oklch(0 0 0 / 0.45);
  }
}
/* Explicit dark via JS toggle (mirror of the block above) */
:root[data-theme="dark"] {
  --bg:           oklch(0.160 0.032 252);
  --surface:      oklch(0.200 0.036 250);
  --surface-2:    oklch(0.245 0.038 250);
  --ink:          oklch(0.960 0.010 250);
  --ink-body:     oklch(0.880 0.014 250);
  --ink-muted:    oklch(0.720 0.022 250);
  --line:         oklch(0.310 0.030 250);
  --line-strong:  oklch(0.520 0.032 250);
  --brand:        oklch(0.760 0.110 240);
  --brand-strong: oklch(0.840 0.090 240);
  --on-brand:     oklch(0.180 0.040 252);
  --accent:       oklch(0.830 0.140 183);
  --accent-ink:   oklch(0.180 0.040 252);
  --accent-fg:    var(--accent);
  --focus:        var(--accent);
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.35);
  --shadow-2: 0 6px 18px oklch(0 0 0 / 0.45), 0 16px 40px oklch(0 0 0 / 0.45);
}

/* ---------------------------------------------------------------------------
   3. RESET / BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* clear the sticky header on anchor jumps */
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  color: var(--ink-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: clip; /* clip (not hidden) so body never becomes a scroll container */
}

h1, h2, h3 { color: var(--ink); line-height: var(--lh-tight); text-wrap: balance; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-7); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-6); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-4); line-height: var(--lh-snug); letter-spacing: -0.01em; }
p  { text-wrap: pretty; }

a { color: var(--brand); text-underline-offset: 0.16em; text-decoration-thickness: from-font; }
a:hover { color: var(--brand-strong); }

img, svg { max-width: 100%; height: auto; display: block; }
strong { font-weight: 650; color: var(--ink); }

/* numerals align in any tabular context */
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* Focus — visible ring, ≥2px perimeter, clears 3:1 (brand on light / teal on dark) */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Skip link */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100%;
  z-index: 100; background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  font-weight: 650; text-decoration: none; transition: top var(--transition);
}
.skip-link:focus { top: var(--sp-4); color: var(--accent-ink); }

/* ---------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band { background: var(--surface-2); }

.stack > * + * { margin-top: var(--sp-4); }
.measure { max-width: var(--measure); }
.measure-wide { max-width: var(--measure-wide); }

/* Section kicker — a tracked-caps editorial label with a beacon dot.
   Deliberately NOT a pill/badge (avoids the badge-above-H1 monoculture tell). */
.kicker {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-1); font-weight: 650; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.kicker::before {
  content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.800 0.140 183 / 0.22);
  flex: none;
}
.section-head { max-width: var(--measure-wide); margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .kicker { margin-bottom: var(--sp-4); }
.section-head p { margin-top: var(--sp-4); color: var(--ink-muted); font-size: var(--fs-4); line-height: 1.4; max-width: var(--measure); }

/* Horizon rule — the watch line. Decorative; hidden from AT. */
.horizon {
  block-size: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--accent) 50%, var(--line-strong) 80%, transparent);
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: 2.75rem; padding: 0.75rem 1.5rem;
  font: inherit; font-size: var(--fs-2); font-weight: 650; letter-spacing: 0.01em;
  border-radius: var(--r-md); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: oklch(0.75 0.145 183); color: var(--accent-ink); border-color: oklch(0.75 0.145 183); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }

.btn--lg { min-block-size: 3.25rem; padding: 0.95rem 2rem; font-size: var(--fs-3); }

/* Text link with arrow */
.link-arrow { font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; }
.link-arrow::after { content: "\2192"; transition: transform var(--transition); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   6. HEADER / NAV
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; gap: var(--sp-4); min-block-size: 4.25rem; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand .mark { inline-size: 2rem; block-size: 2rem; flex: none; }
.brand .wordmark { line-height: 1; }
.nav-links { list-style: none; padding: 0; display: flex; align-items: center; gap: var(--sp-2); }
.nav-links a { display: inline-flex; align-items: center; min-block-size: 2.5rem; padding: 0.4rem 0.85rem; color: var(--ink-body); text-decoration: none; font-size: var(--fs-2); font-weight: 600; border-radius: var(--r-sm); }
.nav-links a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }

/* Always-rendered desktop nav (see HTML note) — hidden below the desktop breakpoint. */
.nav-desktop { display: none; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* JS-injected theme toggle (no dead control without JS) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.5rem; block-size: 2.5rem; padding: 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  color: var(--ink-body); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.theme-toggle svg { inline-size: 1.15rem; block-size: 1.15rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun,
:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}

/* Mobile disclosure menu (no JS — native <details>) */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 2.5rem; padding: 0.4rem 0.85rem; cursor: pointer;
  color: var(--ink); font-weight: 650; font-size: var(--fs-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary .bars { inline-size: 1.1rem; block-size: 1.1rem; }

/* CTA that appears inside the open mobile menu (hidden on desktop). */
.nav-cta { display: none; }

@media (max-width: 52rem) {
  /* Closed menu: remove nav content from layout entirely (no off-screen overflow). */
  .nav-menu:not([open]) .nav { display: none; }
  .nav-menu[open] .nav {
    position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 60;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-2); padding: var(--sp-3); min-inline-size: 15rem;
  }
  .nav-menu[open] .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu[open] .nav-links a { min-block-size: 2.75rem; }
  .nav-menu[open] .nav-cta { display: flex; margin-top: var(--sp-2); }
  /* On mobile the header CTA moves into the menu, freeing the header row. */
  .header-actions .btn--primary { display: none; }
}
@media (min-width: 52.001rem) {
  /* Desktop: the hamburger/<details> menu is mobile-only — hide it entirely
     rather than trying to force its closed <details> content to render (that
     depends on inconsistent, version-specific ::details-content behavior
     across browsers). The always-rendered .nav-desktop above takes over. */
  .nav-menu { display: none; }
  .nav-desktop { display: flex; }
}

/* ---------------------------------------------------------------------------
   7. HERO — the night watch. Deep-navy field in BOTH themes (concept-locked):
   the watch is always at night; the beacon always glows.
   --------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  isolation: isolate;
  --focus: var(--accent);
}
/* --- LIGHT (default): plain paper field, matching the Homepage-Comp draft
   (Iris Mercer, 2026-07-20) — no dark plate, ink-on-paper like the rest of
   the page. Ratios: ink #17191F on --bg = 16.25:1, ink-body #2A2D35 = 12.73:1
   (both computed above in section 1), both far past AA. --- */
.hero { background: var(--bg); color: var(--ink-body); }
.hero .kicker { color: var(--accent-fg); }
.hero h1 { color: var(--ink); margin-block: var(--sp-5) var(--sp-5); max-width: 16ch; }
.hero .subhead { font-size: var(--fs-4); line-height: 1.42; color: var(--ink-body); max-width: 42ch; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-7); }
.hero-cta .btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.hero-cta .btn--ghost:hover { color: var(--ink); border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.hero-secondary { margin-top: var(--sp-4); font-size: var(--fs-2); color: var(--ink-muted); }
.hero-secondary a { color: var(--brand); }
.hero-secondary a:hover { color: var(--brand-strong); }
.hero-reassure {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--line); font-size: var(--fs-2);
  line-height: 1.5; color: var(--ink-muted); max-width: 46ch;
}
.hero-reassure strong { color: var(--ink); font-weight: 650; }

/* --- DARK: the original "night watch" navy field. Structurally identical
   to the light rules above, just re-aliased colors (same pattern as the
   token blocks in section 2) — the hero was ALWAYS dark-in-dark-mode; only
   the light-mode field changed today. --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background:
      radial-gradient(120% 90% at 82% 8%, oklch(0.28 0.06 250) 0%, transparent 46%),
      linear-gradient(180deg, oklch(0.185 0.04 252) 0%, oklch(0.145 0.032 254) 100%);
    color: oklch(0.90 0.014 250);
  }
  :root:not([data-theme="light"]) .hero .kicker { color: oklch(0.80 0.02 250); }
  :root:not([data-theme="light"]) .hero h1 { color: oklch(0.98 0.006 250); }
  :root:not([data-theme="light"]) .hero .subhead { color: oklch(0.88 0.014 250); }
  :root:not([data-theme="light"]) .hero-cta .btn--ghost { color: oklch(0.95 0.01 250); border-color: oklch(0.52 0.03 250); }
  :root:not([data-theme="light"]) .hero-cta .btn--ghost:hover { color: oklch(0.98 0.006 250); border-color: oklch(0.80 0.14 183); background: oklch(0.80 0.14 183 / 0.12); }
  :root:not([data-theme="light"]) .hero-secondary { color: oklch(0.78 0.02 250); }
  :root:not([data-theme="light"]) .hero-secondary a { color: oklch(0.83 0.14 183); }
  :root:not([data-theme="light"]) .hero-secondary a:hover { color: oklch(0.88 0.12 183); }
  :root:not([data-theme="light"]) .hero-reassure { border-top-color: oklch(0.42 0.03 250); color: oklch(0.80 0.02 250); }
  :root:not([data-theme="light"]) .hero-reassure strong { color: oklch(0.95 0.01 250); }
}
:root[data-theme="dark"] .hero {
  background:
    radial-gradient(120% 90% at 82% 8%, oklch(0.28 0.06 250) 0%, transparent 46%),
    linear-gradient(180deg, oklch(0.185 0.04 252) 0%, oklch(0.145 0.032 254) 100%);
  color: oklch(0.90 0.014 250);
}
:root[data-theme="dark"] .hero .kicker { color: oklch(0.80 0.02 250); }
:root[data-theme="dark"] .hero h1 { color: oklch(0.98 0.006 250); }
:root[data-theme="dark"] .hero .subhead { color: oklch(0.88 0.014 250); }
:root[data-theme="dark"] .hero-cta .btn--ghost { color: oklch(0.95 0.01 250); border-color: oklch(0.52 0.03 250); }
:root[data-theme="dark"] .hero-cta .btn--ghost:hover { color: oklch(0.98 0.006 250); border-color: oklch(0.80 0.14 183); background: oklch(0.80 0.14 183 / 0.12); }
:root[data-theme="dark"] .hero-secondary { color: oklch(0.78 0.02 250); }
:root[data-theme="dark"] .hero-secondary a { color: oklch(0.83 0.14 183); }
:root[data-theme="dark"] .hero-secondary a:hover { color: oklch(0.88 0.12 183); }
:root[data-theme="dark"] .hero-reassure { border-top-color: oklch(0.42 0.03 250); color: oklch(0.80 0.02 250); }
:root[data-theme="dark"] .hero-reassure strong { color: oklch(0.95 0.01 250); }

/* the beacon light — the ONE justified glow: a literal light source. Kept
   in both themes at the same low opacity — a soft teal wash reads fine on
   warm paper too (matches the Homepage-Comp's dark plate sitting on light page). */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  inline-size: min(42rem, 70vw); block-size: min(42rem, 70vw);
  right: -8rem; top: -14rem; border-radius: 50%;
  background: radial-gradient(circle, oklch(0.80 0.14 183 / 0.30) 0%, oklch(0.80 0.14 183 / 0.08) 34%, transparent 62%);
}
/* thin sonar-sweep horizon behind the content */
.hero::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.52 0.03 250) 15%, oklch(0.80 0.14 183) 50%, oklch(0.52 0.03 250) 85%, transparent);
  opacity: 0.6;
}
.hero .container { position: relative; padding-block: clamp(4rem, 10vw, 7.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; } }

/* The beacon panel — a signal-lamp emblem, the concept made literal */
.beacon-panel { display: none; }
@media (min-width: 60rem) { .beacon-panel { display: grid; place-items: center; } }
.beacon-emblem { inline-size: min(22rem, 100%); block-size: auto; filter: drop-shadow(0 0 40px oklch(0.80 0.14 183 / 0.20)); }

/* ---------------------------------------------------------------------------
   8. SERVICES — "watch log" rows: index + title + body, hairline-separated.
   Deliberately NOT icon-on-top uniform cards.
   --------------------------------------------------------------------------- */
.log { border-top: 1px solid var(--line); }
.log-entry {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3) var(--sp-6);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 46rem) { .log-entry { grid-template-columns: 4rem 1fr; } }
.log-index {
  font-variant-numeric: tabular-nums; font-size: var(--fs-4); font-weight: 700;
  color: var(--accent-fg); letter-spacing: -0.02em; line-height: 1;
}
.log-body h3 { margin-bottom: var(--sp-3); }
.log-body p { color: var(--ink-body); max-width: var(--measure-wide); }

.capability-note {
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r-md);
  color: var(--ink-body); max-width: var(--measure-wide);
}
.capability-note strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   9. HOW IT WORKS — watch rotation: horizon line + teal station markers.
   The sequence is content-true; the treatment is the differentiator.
   --------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.step { position: relative; padding-top: var(--sp-6); }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; block-size: 2px;
  background: var(--line-strong);
}
.step-marker {
  position: absolute; top: -0.5rem; left: 0;
  inline-size: 1.05rem; block-size: 1.05rem; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.step-num { display: block; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-3); }
.step h3 { margin-bottom: var(--sp-3); }
.step p { color: var(--ink-body); }

/* ---------------------------------------------------------------------------
   10. WHY SEMPOVA — differentiator grid. Tracked-caps kicker + heading + body.
   No left-strip cards, no uniform icon tiles. The lead item spans wider.
   --------------------------------------------------------------------------- */
.why-lead { margin-bottom: clamp(2rem, 4vw, 3rem); font-size: var(--fs-4); line-height: 1.4; color: var(--ink-body); max-width: var(--measure-wide); }
.diff-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 40rem) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }
.diff {
  background: var(--surface); padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.diff .diff-kicker { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-fg); }
.diff h3 { font-size: var(--fs-4); }
.diff p { color: var(--ink-body); font-size: var(--fs-2); line-height: 1.5; }
/* lead differentiator gets the room */
@media (min-width: 40rem) { .diff--lead { grid-column: span 2; } .diff--lead p { max-width: var(--measure-wide); font-size: var(--fs-3); } }

.nolockin { margin-top: var(--sp-6); font-size: var(--fs-3); color: var(--ink-body); display: flex; gap: var(--sp-3); align-items: baseline; max-width: var(--measure-wide); }
.nolockin::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--accent); transform: translateY(-0.15em); }

/* ---------------------------------------------------------------------------
   10b. PRICING — three-tier ladder, reusing the .diff-grid hairline pattern's
   visual language (flat cards, tracked-caps kicker) at .price-card scale.
   FOUNDING prices only (Pricing-Source-of-Truth.html, locked 2026-07-16) — the
   $997/$1,497 STANDARD rates only apply after 3 case studies and are not shown
   here. The non-refundable note is deliberately fine print BELOW the cards,
   never on the price tag itself (Billie's explicit call, 2026-07-20).
   --------------------------------------------------------------------------- */
/* Wider section-head for the pricing headline specifically — the default
   .section-head max-width (--measure-wide, 46rem) was the actual bottleneck
   forcing "Start with a paid proof. Go monthly once you've seen it work." into
   3 choppy balanced lines; the h2's own max-width can never exceed its
   containing block, so the override belongs on the wrapper, not the h2. */
.section-head--wide { max-width: 58rem; }
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 56rem) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column;
}
.price-card--feature { border-color: var(--accent); border-width: 2px; position: relative; }
.price-card--feature .price-badge {
  position: absolute; top: -0.7rem; left: clamp(1.5rem, 3vw, 2rem);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.7rem; border-radius: var(--r-pill);
}
.price-tier { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-fg); }
.price-name { font-size: var(--fs-3); font-weight: 650; color: var(--ink); margin-top: 0.3rem; }
.price-amt { font-size: var(--fs-5); font-weight: 700; color: var(--ink); line-height: 1; margin-top: var(--sp-4); }
.price-amt small { font-size: var(--fs-2); font-weight: 600; color: var(--ink-muted); }
.price-card ul { list-style: none; padding: 0; margin: var(--sp-5) 0; flex: 1; display: flex; flex-direction: column; gap: 0; }
.price-card li {
  padding: 0.55rem 0 0.55rem 1.5rem; position: relative; font-size: var(--fs-2);
  color: var(--ink-body); border-bottom: 1px solid var(--line);
}
.price-card li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent-fg); }
.price-card .btn { margin-top: auto; width: 100%; }
/* No max-width: stretches to the same full width as .pricing-grid above it
   (both sit directly in .container, capped only by --container/72rem) —
   Billie's correction (2026-07-20): the fine print was narrower than the
   cards it explains, capped at --measure-wide (46rem) by default. */
.pricing-note { font-size: var(--fs-1); color: var(--ink-muted); margin-top: var(--sp-5); line-height: 1.6; }

/* ---------------------------------------------------------------------------
   11. ABOUT — editorial prose + non-photographic founder monogram.
   --------------------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 56rem) { .about-grid { grid-template-columns: 0.9fr 1.1fr; } }
.about-aside { display: flex; flex-direction: column; gap: var(--sp-5); }
.monogram {
  inline-size: 5.5rem; block-size: 5.5rem; border-radius: var(--r-lg);
  display: grid; place-items: center; flex: none;
  background: linear-gradient(155deg, oklch(0.22 0.05 250), oklch(0.16 0.035 254));
  color: var(--accent); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em;
  border: 1px solid oklch(0.42 0.03 250);
}
.portrait {
  inline-size: 11rem; block-size: 11rem; border-radius: 50%; flex: none;
  object-fit: cover; display: block;
  border: 1px solid oklch(0.42 0.03 250);
  box-shadow: 0 0 0 6px oklch(0.16 0.035 254), 0 8px 28px -8px oklch(0.05 0.02 254 / 0.6);
}
.about-facts { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.about-facts li { display: flex; gap: var(--sp-3); align-items: baseline; color: var(--ink-body); font-size: var(--fs-2); }
.about-facts li::before { content: ""; flex: none; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: var(--accent); transform: translateY(-0.1em); }
.about-body > * + * { margin-top: var(--sp-4); }
.about-body p { color: var(--ink-body); max-width: var(--measure); }
.about-body .lead { font-size: var(--fs-4); line-height: 1.4; color: var(--ink); }
.about-entity { margin-top: var(--sp-5); font-size: var(--fs-2); color: var(--ink-muted); }

/* ---------------------------------------------------------------------------
   12. FAQ — native <details> accordion (accessible, no JS).
   --------------------------------------------------------------------------- */
.faq { max-width: var(--measure-wide); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--sp-4);
  padding-block: var(--sp-5); font-size: var(--fs-4); font-weight: 650; color: var(--ink);
  line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex: none; inline-size: 1.5rem; block-size: 1.5rem; position: relative; margin-top: 0.15em; color: var(--accent-fg); transition: transform var(--transition); }
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-answer { padding-bottom: var(--sp-5); color: var(--ink-body); max-width: var(--measure); }
.faq-answer p + p { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------------
   13. CTA BAND — repeat the night-watch panel, close the loop.
   --------------------------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, oklch(0.185 0.04 252), oklch(0.15 0.033 254));
  color: oklch(0.90 0.014 250); text-align: center; isolation: isolate;
  /* Always-navy field in both themes — teal focus ring clears 3:1 (blue does not). */
  --focus: var(--accent);
}
.cta::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(60% 120% at 50% -10%, oklch(0.80 0.14 183 / 0.20), transparent 60%);
}
.cta .container { padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.cta h2 { color: oklch(0.98 0.006 250); }
.cta p { margin: var(--sp-4) auto 0; max-width: 48ch; color: oklch(0.86 0.016 250); font-size: var(--fs-4); line-height: 1.4; }
.cta .hero-cta { justify-content: center; margin-top: var(--sp-7); }
.cta .btn--ghost { color: oklch(0.95 0.01 250); border-color: oklch(0.52 0.03 250); }
.cta .btn--ghost:hover { color: oklch(0.98 0.006 250); border-color: oklch(0.80 0.14 183); background: oklch(0.80 0.14 183 / 0.12); }
.cta-note { margin-top: var(--sp-5); font-size: var(--fs-2); color: oklch(0.78 0.02 250); max-width: 42ch; margin-inline: auto; }
.cta-secondary { margin-top: var(--sp-4); font-size: var(--fs-2); color: oklch(0.80 0.02 250); }
.cta-secondary a { color: oklch(0.83 0.14 183); }

/* ---------------------------------------------------------------------------
   14. FOOTER — deep-navy anchor, entity disclosure.
   --------------------------------------------------------------------------- */
.site-footer {
  background: oklch(0.145 0.032 254); color: oklch(0.82 0.02 250);
  padding-block: clamp(2.5rem, 5vw, 3.5rem); font-size: var(--fs-2);
}
.footer-top { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); justify-content: space-between; align-items: flex-start; }
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 30ch; }
.footer-brand .brand { color: oklch(0.96 0.008 250); font-size: 1.25rem; }
.footer-tagline { color: oklch(0.72 0.02 250); font-size: var(--fs-1); line-height: 1.5; }
.footer-nav { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.footer-nav a { color: oklch(0.86 0.016 250); text-decoration: none; min-block-size: 2.5rem; display: inline-flex; align-items: center; }
.footer-nav a:hover { color: oklch(0.83 0.14 183); }
.footer-bottom { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid oklch(0.30 0.03 250); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; }
.footer-entity { color: oklch(0.90 0.014 250); font-weight: 600; }
.footer-legal { color: oklch(0.66 0.02 250); font-size: var(--fs-1); }
.footer-veteran { color: oklch(0.72 0.02 250); font-size: var(--fs-1); display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer-veteran::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: var(--accent); flex: none; }
.footer-fineprint { margin-top: var(--sp-4); color: oklch(0.58 0.02 250); font-size: var(--fs-1); line-height: 1.5; max-width: var(--measure-wide); }
.footer-fineprint a { color: oklch(0.66 0.02 250); }
.footer-fineprint a:hover { color: oklch(0.83 0.14 183); }

/* ---------------------------------------------------------------------------
   15. LEGAL PAGES (privacy.html / terms.html)
   --------------------------------------------------------------------------- */
.legal-wrap { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal { max-width: 46rem; margin-inline: auto; }
.draft-stamp {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: color-mix(in oklab, var(--accent) 16%, var(--surface));
  border: 1px solid var(--accent); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-7);
  color: var(--ink); font-size: var(--fs-2); line-height: 1.5;
}
.draft-stamp .tag {
  font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 0.3rem 0.6rem; border-radius: var(--r-sm); flex: none;
}
.legal h1 { font-size: var(--fs-6); margin-bottom: var(--sp-3); }
.legal .updated { color: var(--ink-muted); font-size: var(--fs-2); margin-bottom: var(--sp-6); }
.legal h2 { font-size: var(--fs-4); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.legal p, .legal li { color: var(--ink-body); max-width: none; }
.legal > p + p, .legal p + p { margin-top: var(--sp-4); }
.legal ul, .legal ol { margin-top: var(--sp-4); padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.legal .note { font-style: italic; color: var(--ink-muted); }
.legal .back-link { margin-top: var(--sp-8); display: inline-flex; }

/* ---------------------------------------------------------------------------
   16. MOTION — restraint. One beacon pulse; honor reduced-motion.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .beacon-live { animation: beacon 3.6s ease-in-out infinite; transform-origin: center; }
  @keyframes beacon {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.35; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------------
   16b. IDENTITY MARK + BEACON EMBLEM (inline SVG, styled from here — no inline CSS)
   The mark is a self-contained signal beacon: a warm teal core broadcasting
   from a deep-navy field. It carries its own background so it reads on any theme.
   --------------------------------------------------------------------------- */
.mark-bg   { fill: oklch(0.185 0.04 252); }
.mark-core { fill: var(--signal); }
.mark-arc  { fill: none; stroke: var(--signal); stroke-linecap: round; }

.beacon-emblem .em-field   { fill: none; }
.beacon-emblem .em-ring    { fill: none; stroke: oklch(0.42 0.03 250); }
.beacon-emblem .em-arc     { fill: none; stroke: var(--signal); stroke-linecap: round; }
.beacon-emblem .em-core    { fill: var(--signal); }
.beacon-emblem .em-halo    { fill: oklch(0.80 0.14 183 / 0.14); }
.beacon-emblem .em-label   { fill: oklch(0.70 0.02 250); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 7px; font-weight: 600; letter-spacing: 2px; }

/* ---------------------------------------------------------------------------
   17. PRINT
   --------------------------------------------------------------------------- */
@media print {
  .site-header, .theme-toggle, .hero::before, .cta::before, .beacon-panel { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}