/* ==========================================================================
   TELSTAR — telstarhq.com
   Design system: 80% communications/satellite infrastructure,
   20% analog library / archival knowledge system.

   Token lineage: the *discipline* is inherited from the Eve design language —
   tight radii, 10.5px uppercase micro-labels at .085em tracking, monospaced
   metadata set apart from prose, the cubic-bezier(.2,.8,.2,1) instrument
   settle. The *skin* is deliberately not: no glass, no gradient field, no
   celestial accents.

   Sections
     01  Reset
     02  Tokens
     03  Typography & micro-label system
     04  Layout
     05  Kana accent layer
     06  Components
     07  Diagrams
     08  Motion
     09  Responsive
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Nav is sticky; anchor targets must clear it. */
  scroll-padding-top: 5.5rem;
  /* Safety net against any stray overflow on narrow screens.
     `clip` rather than `hidden`: `hidden` makes the element a scroll
     container, which silently breaks `position: sticky` on the nav. `clip`
     clips without creating one. The real containment is on `.has-ghost`
     below; this only catches regressions. */
  overflow-x: clip;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol[class], ul[class] { list-style: none; padding: 0; }

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

button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   02  TOKENS & MULTI-MATERIAL THEME SYSTEM
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  
  /* Explicit Surface Material Families (Prompt 4.2 & 4.3) */
  --surface-observatory:     #05060b;
  --surface-observatory-alt: #0a0e1a;
  --surface-archive-dark:    #0f121a;
  --surface-instrument:      #131722;
  --surface-signal-dark:     #090e24;
  --surface-paper:            #f3efe5;
  --surface-paper-alt:        #faf7ef;
  --surface-paper-deep:       #e4ddcf;
  --surface-instrument-light: #e0e4ec;
  --surface-archive-light:    #ece6d8;
  --surface-signal-light:     #e2e7f8;

  /* -- Material Environments ----------------------------------------------
     1. OBSERVATORY: Dark, technical, spatial depth */
  --obsidian:      #070910;
  --deep-navy:     #0b1020;
  --night-blue:    #10182a;
  --surface-obs-deep: #05070c;
  --border-obs:    #182136;
  --obs-star:      rgba(135, 151, 244, 0.16);

  /* 2. SLATE / INSTRUMENT: Precise, mechanical, calibration readouts */
  --slate-900:     #171b24;
  --slate-800:     #202632;
  --steel:         #313949;
  --surface-instrument-bg: #131722;
  --border-inst:   #252e40;
  --inst-panel:    #19202e;
  --inst-inset:    #0f131c;
  --inst-grid:     rgba(114, 179, 223, 0.05);

  /* 3. ARCHIVE: Warm dark paper, physical records, catalog ledger */
  --ink-brown:     #1c1916;
  --archive-dark:  #24201a;
  --surface-archive-bg: #1c1916;
  --border-archive:#383025;
  --archive-text:  #f5ede0;
  --archive-muted: #baa992;
  --archive-card:  #25201b;
  --archive-grain: rgba(192, 163, 103, 0.12);

  /* 4. SIGNAL / ACTIVE STATE */
  --periwinkle:    #8797f4;
  --periwinkle-soft: rgba(135, 151, 244, 0.16);
  --periwinkle-line: rgba(135, 151, 244, 0.38);

  --signal-blue:   #72b3df;
  --signal-soft:   rgba(114, 179, 223, 0.16);
  --signal-line:   rgba(114, 179, 223, 0.36);

  --surface-signal-bg: #0c101d;
  --border-signal: #222d4a;

  --brass:         #c0a367;
  --brass-bright:  #dfc285;
  --brass-muted:   #8a7346;
  --brass-dim:     rgba(192, 163, 103, 0.14);
  --brass-line:    rgba(192, 163, 103, 0.40);

  --amber:         #c59055;
  --amber-soft:    rgba(197, 144, 85, 0.16);
  --amber-dim:     rgba(197, 144, 85, 0.16);

  --muted-red:     #b86d6d;
  --dispute:       #b86d6d;
  --dispute-dim:   rgba(184, 109, 109, 0.16);
  --dispute-line:  rgba(184, 109, 109, 0.42);

  --violet:        #8775a8;
  --violet-dark:   #8775a8;
  --violet-dim:    rgba(135, 117, 168, 0.16);
  --violet-line:   rgba(135, 117, 168, 0.40);

  --ivory:         #f3efe5;
  --paper:         #f3efe5;
  --paper-muted:   #c2b59f;
  --paper-dim:     rgba(243, 239, 229, 0.12);
  --ink-on-paper:  #171a20;

  --human:         #c0a367;
  --human-soft:    rgba(192, 163, 103, 0.16);
  --human-line:    rgba(192, 163, 103, 0.40);
  --parchment:     #c9b491;
  --parchment-dim: rgba(201, 180, 145, 0.13);

  --resolved:      #6fbfa8;
  --resolved-dim:  rgba(111, 191, 168, 0.15);
  --resolved-line: rgba(111, 191, 168, 0.40);

  /* Canvas and Text */
  --bg:            var(--obsidian);
  --bg-deep:       #04050a;
  --surface:       var(--deep-navy);
  --surface-2:     var(--night-blue);
  --surface-3:     #172036;
  --panel:         var(--obsidian);

  --line:          #1b233a;
  --line-strong:   #2d3756;
  --line-soft:     rgba(199, 206, 255, .08);
  --line-ink:      #252e42;
  --navy:          var(--deep-navy);
  --slate:         var(--slate-900);

  --ink:           #f1f3fd;
  --ink-2:         #cbd2ec;
  --ink-3:         #8e98b7;
  --ink-4:         #5e6783;

  --accent:        var(--periwinkle);
  --accent-bright: #a1adff;
  --accent-soft:   var(--periwinkle-soft);
  --accent-line:   var(--periwinkle-line);

  --signal:        var(--signal-blue);
  --signal-dim:    var(--signal-soft);

  --moon:          #cbd2ec;
  --moon-dim:      rgba(203, 210, 236, .10);

  --warn:          var(--amber);
  --warn-dim:      var(--amber-dim);

  --lime:          var(--accent-bright);
  --lime-dim:      var(--accent-soft);
  --lime-line:     var(--accent-line);
  --cyan:          var(--signal);
  --cyan-dim:      var(--signal-dim);
  --cyan-line:     var(--signal-line);
  --coral:         var(--warn);
  --coral-dim:     var(--warn-dim);

  /* Theme Switcher */
  --theme-switch-bg: rgba(15, 23, 42, 0.75);
  --theme-switch-border: #232c45;
  --theme-switch-active: #2b3655;
  --theme-switch-text: #cbd2ec;

  /* Typography Roles */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-serif:   'Newsreader', 'Charter', 'Bitstream Charter', 'Iowan Old Style', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-kana:    'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;

  --t-micro:  10.5px;
  --t-label:  12px;
  --t-small:  13.5px;
  --t-body:   15.5px;
  --t-lead:   17.5px;
  --t-h4:     clamp(1rem, .95rem + .25vw, 1.125rem);
  --t-h3:     clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --t-h2:     clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --t-h1:     clamp(2.3rem, 1.5rem + 4.2vw, 4.6rem);

  --track-micro: .085em;
  --track-tight: -.014em;
  --track-display: -.028em;

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --ease:     cubic-bezier(.32, .72, 0, 1);
  --ease-lab: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-weight: cubic-bezier(.16, .84, .24, 1);

  --dur-scene: 1400ms;
  --dur-object: 1600ms;

  --dur: .28s;
  --dur-reveal: 450ms;
  --dur-prose: 500ms;
  --dur-cycle: 13s;

  --nav-h: 4.25rem;
  --measure: 68ch;
}

/* -- Real Light Mode: Scientific Archive / Observatory Notebook / Publication -- */
[data-theme="light"] {
  color-scheme: light;

  /* Archive / Paper Foundation */
  --paper:         #f3efe5;
  --paper-bright:  #faf7ef;
  --paper-deep:    #e4ddcf;
  --ink:           #171a20;
  --ink-2:         #343a42;
  --ink-3:         #555a61;
  --ink-4:         #7b828d;

  --bg:            var(--paper);
  --bg-deep:       var(--paper-deep);
  --surface:       var(--paper-bright);
  --surface-2:     var(--paper-deep);
  --surface-3:     #dad2c3;
  --panel:         var(--paper-bright);

  --line:          #c8c2b6;
  --line-strong:   #aba496;
  --line-soft:     rgba(23, 26, 32, .08);
  --line-ink:      #8f877a;

  /* Material Worlds */
  --surface-archive-bg: #f5f0e4;
  --border-archive:#dcd3c3;
  --archive-text:  #171a20;
  --archive-muted: #555a61;
  --archive-card:  #faf7ef;
  --archive-grain: rgba(153, 120, 68, 0.15);

  --slate-light:   #d6d9dc;
  --line-light:    #c8c2b6;
  --surface-instrument-bg: #e5e9f0;
  --border-inst:   #c3ccd8;
  --inst-panel:    #edf1f7;
  --inst-inset:    #d7dee9;
  --inst-grid:     rgba(45, 123, 184, 0.08);

  --surface-signal-bg: #eceff8;
  --border-signal: #cbd3ed;

  --surface-obs-deep: #1c2436;
  --border-obs:    #303d59;
  --obs-star:      rgba(255, 255, 255, 0.25);

  /* Accents */
  --brass:         #997844;
  --brass-bright:  #b69156;
  --brass-muted:   #72572e;
  --brass-dim:     rgba(153, 120, 68, 0.14);
  --brass-line:    rgba(153, 120, 68, 0.35);

  --periwinkle:    #536bd8;
  --periwinkle-soft: rgba(83, 107, 216, 0.12);
  --periwinkle-line: rgba(83, 107, 216, 0.35);

  --signal-blue:   #536bd8;
  --signal-soft:   rgba(83, 107, 216, 0.12);
  --signal-line:   rgba(83, 107, 216, 0.32);

  --accent:        var(--periwinkle);
  --accent-bright: #3c50b8;
  --accent-soft:   var(--periwinkle-soft);
  --accent-line:   var(--periwinkle-line);

  --signal:        var(--signal-blue);
  --signal-dim:    var(--signal-soft);

  --moon:          #2d3748;
  --moon-dim:      rgba(45, 55, 72, 0.12);

  --warn:          #ad7230;
  --warn-dim:      rgba(173, 114, 48, 0.14);
  --amber:         #ad7230;
  --amber-dim:     rgba(173, 114, 48, 0.14);

  --dispute:       #ab4b4b;
  --dispute-dim:   rgba(171, 75, 75, 0.14);
  --dispute-line:  rgba(171, 75, 75, 0.35);

  --resolved:      #2f856d;
  --resolved-dim:  rgba(47, 133, 109, 0.14);
  --resolved-line: rgba(47, 133, 109, 0.35);

  --human:         #997844;
  --human-soft:    rgba(153, 120, 68, 0.14);
  --human-line:    rgba(153, 120, 68, 0.35);

  --theme-switch-bg: rgba(228, 221, 207, 0.9);
  --theme-switch-border: #c8c2b6;
  --theme-switch-active: #faf7ef;
  --theme-switch-text: #171a20;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --paper:         #f3efe5;
    --paper-bright:  #faf7ef;
    --paper-deep:    #e4ddcf;
    --ink:           #171a20;
    --ink-2:         #343a42;
    --ink-3:         #555a61;
    --ink-4:         #7b828d;

    --bg:            var(--paper);
    --bg-deep:       var(--paper-deep);
    --surface:       var(--paper-bright);
    --surface-2:     var(--paper-deep);
    --surface-3:     #dad2c3;
    --panel:         var(--paper-bright);

    --line:          #c8c2b6;
    --line-strong:   #aba496;
    --line-soft:     rgba(23, 26, 32, .08);
    --line-ink:      #8f877a;

    --surface-archive-bg: #f5f0e4;
    --border-archive:#dcd3c3;
    --archive-text:  #171a20;
    --archive-muted: #555a61;
    --archive-card:  #faf7ef;
    --archive-grain: rgba(153, 120, 68, 0.15);

    --slate-light:   #d6d9dc;
    --line-light:    #c8c2b6;
    --surface-instrument-bg: #e5e9f0;
    --border-inst:   #c3ccd8;
    --inst-panel:    #edf1f7;
    --inst-inset:    #d7dee9;
    --inst-grid:     rgba(45, 123, 184, 0.08);

    --surface-signal-bg: #eceff8;
    --border-signal: #cbd3ed;

    --surface-obs-deep: #1c2436;
    --border-obs:    #303d59;
    --obs-star:      rgba(255, 255, 255, 0.25);

    --brass:         #997844;
    --brass-bright:  #b69156;
    --brass-muted:   #72572e;
    --brass-dim:     rgba(153, 120, 68, 0.14);
    --brass-line:    rgba(153, 120, 68, 0.35);

    --periwinkle:    #536bd8;
    --periwinkle-soft: rgba(83, 107, 216, 0.12);
    --periwinkle-line: rgba(83, 107, 216, 0.35);

    --signal-blue:   #536bd8;
    --signal-soft:   rgba(83, 107, 216, 0.12);
    --signal-line:   rgba(83, 107, 216, 0.32);

    --accent:        var(--periwinkle);
    --accent-bright: #3c50b8;
    --accent-soft:   var(--periwinkle-soft);
    --accent-line:   var(--periwinkle-line);

    --signal:        var(--signal-blue);
    --signal-dim:    var(--signal-soft);

    --moon:          #2d3748;
    --moon-dim:      rgba(45, 55, 72, 0.12);

    --warn:          #ad7230;
    --warn-dim:      rgba(173, 114, 48, 0.14);
    --amber:         #ad7230;
    --amber-dim:     rgba(173, 114, 48, 0.14);

    --dispute:       #ab4b4b;
    --dispute-dim:   rgba(171, 75, 75, 0.14);
    --dispute-line:  rgba(171, 75, 75, 0.35);

    --resolved:      #2f856d;
    --resolved-dim:  rgba(47, 133, 109, 0.14);
    --resolved-line: rgba(47, 133, 109, 0.35);

    --human:         #997844;
    --human-soft:    rgba(153, 120, 68, 0.14);
    --human-line:    rgba(153, 120, 68, 0.35);

    --theme-switch-bg: rgba(228, 221, 207, 0.9);
    --theme-switch-border: #c8c2b6;
    --theme-switch-active: #faf7ef;
    --theme-switch-text: #171a20;
  }
}

/* --------------------------------------------------------------------------
   03  TYPOGRAPHY & MICRO-LABEL SYSTEM
   -------------------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 500; }
h2 { font-size: var(--t-h2); letter-spacing: -.024em; }
h3 { font-size: var(--t-h3); letter-spacing: -.018em; line-height: 1.25; }
h4 { font-size: var(--t-h4); letter-spacing: -.012em; line-height: 1.35; }

p { max-width: var(--measure); }

a { color: inherit; text-decoration: none; }

strong { font-weight: 600; color: var(--ink); }

::selection { background: var(--lime-dim); color: var(--ink); }

/* Focus: visible, consistent, never removed. */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* -- The micro-label. The workhorse of the system's technical register. -- */
.micro,

.micro  { color: var(--ink-3); }

/* Prose vs. machine data must be typographically distinguishable. */
.data {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.sec-num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 200;
  background: var(--lime);
  color: var(--bg);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   04  LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - 3rem, 76rem);
  margin-inline: auto;
}

.wrap--narrow { width: min(100% - 3rem, 58rem); margin-inline: auto; }

section { position: relative; }

.sec { padding-block: clamp(4.5rem, 9vw, 8.5rem); }

.sec--line { border-top: 1px solid var(--line); }

/* Any section carrying an oversized background glyph must clip it, or the
   glyph expands the document and produces horizontal scroll. Applied
   explicitly rather than via :has(), which cannot be relied on everywhere. */
.has-ghost { overflow: hidden; }

.sec-head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 46rem;
}

.sec-head__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.sec-head__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: 1.5rem;
}

.sec-head h2 { max-width: 34ch; }

.sec-head p { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   05  KANA ACCENT LAYER
   Katakana appears in exactly two modes, both deliberate:
    (a) semantic — a correct, meaningful label beside its English pair;
    (b) graphic   — a cropped display glyph used as composition.
   Nothing here is random Japanese-looking string generation.
   -------------------------------------------------------------------------- */

/* (a) Semantic pairing: English primary, kana set as secondary metadata. */
.kana {
  font-family: var(--font-kana);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-4);
  font-size: var(--t-label);
  /* Slight optical nudge: kana sit small beside uppercase Latin. */
  vertical-align: .02em;
}

/* (b) Graphic: oversized, cropped, low contrast. Never interferes with text.
   Sized in `rem` against a root-relative unit and positioned so the glyph
   overhangs its section, not the viewport: the parent `.has-ghost` clips it,
   which is what keeps the document from growing a horizontal scrollbar.

   Opacity is deliberately very low. At 3.5% over a near-black ground the
   glyphs read as a blurred smudge rather than as typography, which is the
   opposite of the intent — they should be legible *as characters* if you look
   for them, and invisible if you do not. 2% with a slight stroke weight keeps
   the letterform readable without gaining decorative presence. */
.kana-ghost {
  position: absolute;
  font-family: var(--font-kana);
  font-weight: 500;
  color: var(--ink);
  opacity: .022;
  line-height: .78;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  max-width: none;
}

/* Vertical equipment-marking mode: writing-mode: vertical-rl, as archival
   labeling rather than decoration. */
.kana-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-kana);
  font-weight: 400;
  letter-spacing: .42em;
  color: var(--ink-4);
  font-size: var(--t-micro);
  line-height: 1;
  user-select: none;
}

/* -- The 入力 → 判断 → 出力 architecture motif ---------------------------- */
.kana-flow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.kana-flow__word {
  font-family: var(--font-kana);
  font-size: var(--t-small);
  letter-spacing: .08em;
  color: var(--ink-3);
}

.kana-flow__gloss {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-4);
}

.kana-flow__arrow { color: var(--ink-4); font-size: var(--t-label); }

/* --------------------------------------------------------------------------
   06  COMPONENTS
   -------------------------------------------------------------------------- */

/* -- Nav --------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* The wordmark lockup: TELSTAR / テルスター. */
.brand {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-shrink: 0;
}

.brand__en {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand__kana {
  font-family: var(--font-kana);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .13em;
  color: var(--ink-4);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav__link:hover { background: var(--surface-2); }
.nav__link:hover .nav__link-en { color: var(--ink); }

.nav__link-en {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease);
}

/* The micro-label under the nav item: the restrained half of the kana layer. */

.nav__cta { margin-left: var(--sp-4); }

/* Mobile nav */
.nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .55rem .6rem;
  cursor: pointer;
  color: var(--ink-2);
}
.nav__toggle:hover { border-color: var(--line-strong); color: var(--ink); }

.nav__toggle-bars {
  display: block;
  width: 17px;
  height: 11px;
  position: relative;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav__toggle-bars::before { top: 0; }
.nav__toggle-bars::after  { top: 9px; }

.nav[data-open='true'] .nav__toggle-bars::before { top: 4.5px; transform: rotate(45deg); }
.nav[data-open='true'] .nav__toggle-bars::after  { top: 4.5px; transform: rotate(-45deg); }

/* -- Buttons: tight corners. Pills are reserved for statuses. ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:hover {
  background: var(--surface-3);
  border-color: var(--ink-4);
  transform: translateY(-1px);
}

/* Primary CTA. The label is the dark ground rather than moonlight: measured,
   `ink` on `--accent` is 4.44:1, just under the 4.5:1 AA floor for body text,
   and these labels are small uppercase mono. Dark-on-indigo measures 6.79:1
   and also reads as the accent being *lit* rather than as a filled box. */
.btn--primary {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--bg);
}
.btn--primary:hover {
  background: var(--moon);
  border-color: var(--moon);
  color: var(--bg);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }

/* -- Status pip. Small and operational, but NEVER animated to imply a
      running service. A pip states a build status, not liveness. --------- */
.pip {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
  flex-shrink: 0;
  display: inline-block;
}
.pip--impl { background: var(--lime);  box-shadow: 0 0 0 3px var(--lime-dim); }
.pip--dev  { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.pip--plan { background: var(--ink-4); box-shadow: 0 0 0 3px var(--moon-dim); }

/* -- Provenance. Every capability claim on this site carries one of these,
      so "we built this" and "we intend to build this" can never be
      confused. Square-ish on purpose: pills read as product status badges,
      and these are engineering labels. ---------------------------------- */
.prov {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.prov--impl { color: var(--lime);  border-color: var(--lime-line);  background: var(--lime-dim); }
.prov--dev  { color: var(--amber); border-color: var(--warn-dim); background: var(--amber-dim); }
.prov--plan { color: var(--ink-3); border-color: var(--line); background: transparent; }

/* -- Status columns: what exists vs. what is ahead -------------------- */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.status-col {
  background: var(--surface);
  padding: clamp(1.35rem, 2.6vw, 2rem);
}

.status-list {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.status-list li {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-3);
}

.status-list .pip { margin-top: .45rem; }
.status-list strong { color: var(--ink-2); font-weight: 600; }

/* Header row shared by the split and status cells. */
.cell-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

/* -- Build strip: the closing statement of intent --------------------- */
.build-strip {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime-line);
  border-radius: var(--r-md);
}

.build-strip__line {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--ink-2);
  max-width: 52ch;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* -- Tag / pill: statuses, states, and catalog marks only. ------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* -- Hero -------------------------------------------------------------- */
.hero {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.hero h1 { margin-bottom: var(--sp-5); }

.hero h1 .hero__h1-second {
  display: block;
  color: var(--ink-2);
  font-weight: 400;
}

.hero__copy {
  font-size: var(--t-lead);
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}

.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

/* -- 3. The problem: catalog / index cards ----------------------------- */
.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.card-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Deliberately catalogue-card: mono index number, rule, italic-free question. */
.card-index__item {
  background: var(--surface);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  position: relative;
  transition: background var(--dur) var(--ease);
}

.card-index__item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--line-strong);
  transition: background var(--dur) var(--ease);
}

.card-index__item:hover { background: var(--surface-2); }
.card-index__item:hover::before { background: var(--lime); }

.card-index__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.card-index__q {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.45;
  max-width: none;
}

.card-index__item:hover .card-index__q { color: var(--ink); }

.card-index__note {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-4);
  letter-spacing: .02em;
}

/* -- 5. Structured knowledge: the decision node record ------------------ */
.record {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 27rem;
}

.record__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
}

.record__id {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.record__body { padding: var(--sp-4); }

.record__claim {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  max-width: none;
}

.record__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
}

.record__key {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-4);
}

.record__val {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.record__foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Notation block: raw structured values, set as machine output.
   `white-space: pre` is load-bearing — these blocks are written as aligned
   key/value lines in the markup, and without it HTML collapses them onto a
   single run-on line, destroying the very structure being demonstrated. */
.notation {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: 1.8;
  color: var(--ink-3);
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}
.notation b { color: var(--lime); font-weight: 500; }
.notation i { color: var(--ink-4); font-style: normal; }

/* -- 6. Frontier reasoning: split panel -------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* The second option in a pair gets a slightly raised surface, so the
   two read as alternatives rather than as a sequence. */

.split__cell {
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.split__cell p { color: var(--ink-2); max-width: 38ch; font-size: var(--t-body); }

.inline-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* The `hidden` attribute is how the tabs hide inactive panels, but the UA rule
   `[hidden] { display: none }` loses to any class selector that sets display.
   Without this, every tab panel renders stacked at once. */
[hidden] { display: none !important; }

/* -- Founder / mission ------------------------------------------------- */
.mission {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.founder {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.founder__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.014em;
  color: var(--ink);
  max-width: none;
}

.founder__note {
  font-size: var(--t-small);
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  max-width: none;
}

/* -- Footer ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}

/* The vertical marking rail. Sits in the outer margin, clear of the content
   column, and is hidden below the desktop breakpoint where there is no
   margin to put it in. */
.footer__rail {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;
}

@media (max-width: 1100px) {
  .footer__rail { display: none; }
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.footer__brand { display: grid; gap: var(--sp-3); }

.footer__mark {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

.footer__mark-en {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer__mark-kana {
  font-family: var(--font-kana);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .15em;
  color: var(--ink-4);
}

.footer__desc {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: none;
}

.footer__meta {
  display: grid;
  gap: var(--sp-2);
  min-width: 15rem;
}

.footer__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
}
.footer__meta-row:last-child { border-bottom: 0; }

.footer__meta-k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-4);
}

.footer__meta-v {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
}

.footer__contact {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  width: fit-content;
}
.footer__contact:hover { color: var(--lime); border-color: var(--lime-line); }

.footer__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   07  DIAGRAMS
   Signal path diagrams. Infrastructure, not sci-fi concept art: hairlines,
   small nodes, hairline connectors.
   -------------------------------------------------------------------------- */

/* -- Hero strip: SOURCE -> POLARIS -> EVIDENCE -> DECISION -> AGENT ------ */









/* The connector: a hairline rail with a travelling pulse. */


/* The pulse travels the rail; extremely subtle. */



/* -- Tier ladder: the decision layer box ------------------------------- */
.ladder {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
}

.ladder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
}

.ladder__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1px;
  background: var(--line);
}

.tier {
  background: var(--panel);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  position: relative;
  transition: background var(--dur) var(--ease);
}
.tier:hover { background: var(--surface-2); }

.tier__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.tier__id {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}

.tier__name {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--lime);
  opacity: .85;
}

.tier__desc {
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.55;
  max-width: none;
}

.tier--frontier .tier__name { color: var(--cyan); }

/* -- The full path diagram: knowledge -> Polaris -> evidence -> layer --- */
.path {
  display: grid;
  gap: 0;
  align-content: start;
}

.path__node {
  display: grid;
  place-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: center;
  /* Anchors the activation flash drawn by ::after below. */
  position: relative;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.path__node:hover { border-color: var(--line-strong); background: var(--surface-2); }

.path__node--source { background: var(--bg-deep); }

.path__node-label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.path__node-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--ink-4);
  margin-top: .3rem;
}

.path__link {
  height: 1.75rem;
  position: relative;
  justify-self: center;
}
.path__link::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-strong);
  transform: translateX(-50%);
}

.path__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   08  MOTION
   Motion communicates activity, routing, indexing, and state. Nothing here
   exists to decorate. Everything is disabled under prefers-reduced-motion.

   The governing rule: motion should look like a system thinking, indexing, or
   routing — never like a site showing off. Concretely that means

     * long idle cycles with real rest, not constant looping;
     * small amplitudes (8-16px, 1-3px on hover);
     * one thing moving at a time, never competing for attention;
     * only opacity and transform are animated, so the compositor does the
       work and nothing triggers layout.
   -------------------------------------------------------------------------- */

/* -- 08.1  The signal path -----------------------------------------------
   A pulse travels the rail, then the chain rests. The cycle is deliberately
   long: four pulses move through in the first ~5s, then nothing happens for
   ~8s. The earlier version cascaded every 4.2s without pause, which read as
   decoration rather than as a system doing work. */



/* NOTE: there is deliberately no pulsing "live" indicator anywhere on this
   site. A steady pip states a build status; a pulsing one asserts that a
   service is running, which is a claim Telstar cannot make yet. */

/* -- 08.2  Section reveals ----------------------------------------------
   The base state is visible, so a JS failure degrades to "everything is
   simply on screen" rather than a blank page. The `.js` prefix is added by
   telstar.js, so hiding only happens when JS is running. */
[data-reveal] { opacity: 1; }

.js [data-reveal],
.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms var(--ease-weight), transform 900ms var(--ease-weight);
}

.js [data-reveal].is-visible,
.js [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Body copy settles a beat after its heading. 450ms then 500ms, per the
   stated timing: the heading arrives, the prose follows. */
.js [data-reveal].is-visible { transition-duration: 900ms, 900ms; }
.js .sec-head[data-reveal] > p { transition-duration: 1050ms, 1050ms; }

/* -- 08.3  Staggered sequences -----------------------------------------
   Delays come from :nth-child rather than inline custom properties, because
   the CSP forbids inline `style` attributes and check.py enforces that. */
.js [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 560ms; }

/* -- 08.4  Rules draw in -------------------------------------------------
   The hairline between a section label and its kana extends from the label
   outward, the way a catalogue rule is drawn rather than stamped. */
.js .sec-head__rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-out);
}
.js [data-reveal].is-visible .sec-head__rule,
.js .sec-head.is-visible .sec-head__rule { transform: scaleX(1); }

/* -- 08.5  Ghost kana ---------------------------------------------------
   The oversized glyphs become slightly more present once their section is in
   view. This is the only place a large element changes, so it is kept to a
   small opacity step and nothing else moves. The sections carrying these
   glyphs get `data-reveal` in the markup so the observer has something to
   watch. */
.js .kana-ghost {
  opacity: .012;
  transition: opacity 1400ms var(--ease-out);
}
/* Scoped to sections that actually carry a reveal hook. The hero's glyph has
   no `data-reveal` ancestor (it is above the fold and already visible), so an
   unscoped rule would dim it to .012 and leave it there permanently. */
.js .has-ghost[data-reveal] .kana-ghost { opacity: .012; }
.js .has-ghost[data-reveal].is-visible .kana-ghost { opacity: .028; }

/* -- 08.6  The architecture path ---------------------------------------
   Staged activation, in order, then the structure rests. Each node lights in
   sequence as the signal reaches it — the diagram teaches the concept. */
.js .path__node {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out),
              border-color 500ms var(--ease-out);
}
.js .path.is-visible .path__node { opacity: 1; transform: none; }

.js .path.is-visible .path__node:nth-of-type(1) { transition-delay: 0ms; }
.js .path.is-visible .path__node:nth-of-type(2) { transition-delay: 220ms; }
.js .path.is-visible .path__node:nth-of-type(3) { transition-delay: 440ms; }
.js .path.is-visible .path__node:nth-of-type(4) { transition-delay: 660ms; }

/* The connector lines draw downward after their node. */
.js .path__link::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 300ms var(--ease-out);
}
.js .path.is-visible .path__link::before { transform: scaleY(1); }
.js .path.is-visible .path__link:nth-of-type(1)::before { transition-delay: 140ms; }
.js .path.is-visible .path__link:nth-of-type(2)::before { transition-delay: 360ms; }
.js .path.is-visible .path__link:nth-of-type(3)::before { transition-delay: 580ms; }

/* A node briefly brightens as the signal arrives, then settles back. This is
   the "current stage activates, then rests" behaviour — a single pass, no
   loop, so it cannot become a distraction.

   The flash is drawn on a pseudo-element rather than on the node's own
   border-color. Animating border-color here would need a fill mode that
   persists, and the animated value would then outrank the hover transition
   permanently — the node would stop responding to the pointer after the
   sequence finished. */
@keyframes nodeActivate {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

.path__node::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--lime-line);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.js .path.is-visible .path__node::after {
  animation: nodeActivate 1200ms var(--ease-out) both;
}
.js .path.is-visible .path__node:nth-of-type(2)::after { animation-delay: 220ms; }
.js .path.is-visible .path__node:nth-of-type(3)::after { animation-delay: 440ms; }
.js .path.is-visible .path__node:nth-of-type(4)::after { animation-delay: 660ms; }

/* -- 08.7  Kana sequence -------------------------------------------------
   入力 → 判断 → 出力 appears in reading order, like labels lighting on an
   instrument panel. Staggered but not looping.

   The trigger accepts either the flow itself carrying the reveal hook, or a
   revealed ancestor. The second instance sits inside `.build-strip`, and
   keying only on `.kana-flow.is-visible` would leave all seven of its
   children at opacity 0 forever — hidden by CSS with nothing to reveal them. */
.js .kana-flow__word,
.js .kana-flow__gloss,
.js .kana-flow__arrow {
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transform: translateX(-6px);
}
.js .kana-flow.is-visible .kana-flow__word,
.js .kana-flow.is-visible .kana-flow__gloss,
.js .kana-flow.is-visible .kana-flow__arrow,
.js .is-visible .kana-flow__word,
.js .is-visible .kana-flow__gloss,
.js .is-visible .kana-flow__arrow {
  opacity: 1;
  transform: none;
}
.js .kana-flow.is-visible > *:nth-child(1),
.js .is-visible .kana-flow > *:nth-child(1) { transition-delay: 0ms; }
.js .kana-flow.is-visible > *:nth-child(2),
.js .is-visible .kana-flow > *:nth-child(2) { transition-delay: 120ms; }
.js .kana-flow.is-visible > *:nth-child(3),
.js .is-visible .kana-flow > *:nth-child(3) { transition-delay: 240ms; }
.js .kana-flow.is-visible > *:nth-child(4),
.js .is-visible .kana-flow > *:nth-child(4) { transition-delay: 360ms; }
.js .kana-flow.is-visible > *:nth-child(5),
.js .is-visible .kana-flow > *:nth-child(5) { transition-delay: 480ms; }
.js .kana-flow.is-visible > *:nth-child(6),
.js .is-visible .kana-flow > *:nth-child(6) { transition-delay: 600ms; }
.js .kana-flow.is-visible > *:nth-child(7),
.js .is-visible .kana-flow > *:nth-child(7) { transition-delay: 720ms; }

/* The vertical footer marking reveals top-to-bottom, like a manufacturer's
   stamp drawn down a panel. `.footer__rail` is a sibling of `.wrap`, not a
   descendant of the revealed `.footer__brand`, so the reveal is keyed off a
   class the observer puts on the footer itself. */
.js .kana-vertical {
  opacity: 0;
  transition: opacity 900ms var(--ease-out), clip-path 900ms var(--ease-out);
  clip-path: inset(0 0 100% 0);
}
.js .footer.is-visible .kana-vertical { opacity: .5; clip-path: inset(0 0 0 0); }

/* -- 08.8  Hover micro-motion -------------------------------------------
   Precise rather than playful. Radii stay tight; nothing scales up. */
.kana {
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-index__item:hover .kana,
.record:hover .kana { transform: translateX(3px); }

/* The micro-label under a nav item slides 2px into place. */

/* Hovering a step dims its siblings slightly, so attention goes to one row —
   "one record becomes active while others dim". */

.status-list li { transition: opacity var(--dur) var(--ease); }
.status-list:hover li { opacity: .6; }
.status-list li:hover { opacity: 1; }

/* The record's claim gets a rule that extends on hover. */
.record__claim {
  transition: border-color var(--dur) var(--ease);
}
.record:hover .record__claim { border-bottom-color: var(--line-strong); }

/* Tiers: a hairline lights along the top edge rather than a border flashing. */
.tier { position: relative; }
.tier::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.tier:hover::before { transform: scaleX(1); }
.tier--frontier::before { background: var(--cyan); }

/* -- 08.9  Focus parity --------------------------------------------------
   Keyboard users get the same affordances as pointer users, since these are
   the only cues that a control is interactive. */
.card-index__item:focus-within .kana { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   09  RESPONSIVE
   Mobile is designed, not stacked: the nav becomes a real panel and the
   architecture diagrams collapse to single-column rails.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .problem__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .path__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .mission { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* The split and status columns are already auto-fit; only the tier ladder
     padding needs easing at this width. */
  .split__cell { padding: 1.25rem; }
}

@media (max-width: 880px) {
  .wrap, .wrap--narrow { width: min(100% - 2rem, 76rem); }

  /* Real mobile navigation: a panel, not a squeezed row. */
  .nav__toggle { display: block; }

  .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-2);
    margin-left: 0;
    display: none;
    box-shadow: 0 18px 40px rgba(4, 5, 14, .62);
  }
  .nav[data-open='true'] .nav__links { display: flex; }

  .nav__link {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-3);
    padding: .85rem var(--sp-3);
    border-radius: var(--r-sm);
  }
  /* Touch-sized rows. */

  .nav__cta {
    margin: var(--sp-2) 0 0;
    padding: 0 var(--sp-2) var(--sp-2);
  }
  .nav__cta .btn { width: 100%; justify-content: center; padding: .9rem 1rem; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .record { max-width: none; }
  .record__rows { grid-template-columns: 1fr; gap: .1rem; }
  .record__key { margin-top: var(--sp-2); }
  .record__key:first-child { margin-top: 0; }

  .card-index { grid-template-columns: 1fr; }

  /* Oversized glyphs shrink so they read as texture, not as a giant blob. */
  .kana-ghost { font-size: clamp(7rem, 34vw, 13rem); opacity: .03; }
}

@media (max-width: 420px) {
  :root { --t-body: 15px; --t-lead: 16.5px; }
  .brand__kana { display: none; }
}

/* -- Respect prefers-reduced-motion: remove motion, keep state readable.
      Every animated property above must be returned to its resting value
      here. Anything missed would leave an element stuck in its animated
      starting state — invisible, or mid-draw. ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }


  /* Reveals resolve instantly rather than animating in. */
  .js [data-reveal],
  .js [data-reveal-stagger] > *,
  .js .path__node,
  .js .kana-flow__word,
  .js .kana-flow__gloss,
  .js .kana-flow__arrow,
  .js .path__link::before {
    opacity: 1;
    transform: none;
  }

  /* These start hidden rather than merely offset, so opacity must be reset
     explicitly or they would never become visible. */
  .js .kana-ghost { opacity: .028; }
  .js .kana-vertical { opacity: .5; clip-path: none; }

  /* Rules start collapsed; restore their full length. */
  .js .sec-head__rule { transform: none; }

  /* The activation flash is a single pass, but it should not run at all. */
  .js .path__node::after { animation: none; opacity: 0; }
  /* Named explicitly as well, so the guard in check.py can prove every
     keyframe is addressed rather than inferring it from a selector. */
  /* nodeActivate: disabled above via .path__node::after */

  /* The hero fragments drift continuously; hold them still. */

  /* The orbit requests travel once and rest. Without the animation they would
     never leave the core, so they are hidden and the resting points — which
     carry the actual information — are shown instead. */

  /* The hero starfield fades in; show it immediately. */
  .js .hero__field { opacity: .7; transition: none; }
}

/* -- Print: the diagrams and records should survive a plain print-out. --- */
@media print {
  .nav, .kana-ghost, .kana-vertical, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}

/* -- Additions used by the status and hero sections --------------------- */

/* Hero text column: keeps the measure tight when the grid collapses. */
.hero__text { min-width: 0; }

/* The closing kana line in the footer — a plain statement, kept quiet. */

/* A record value that is a data shape rather than a scalar. */
.record__val--data { color: var(--cyan); }

/* ==========================================================================
   10  UTILITIES
   These exist so the markup carries no inline `style` attributes. A strict
   Content-Security-Policy cannot allow `style="..."`, and shipping one with
   `unsafe-inline` would defeat the point of having a CSP at all.
   ========================================================================== */

.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-4 { margin-bottom: var(--sp-4); }

.lh-relaxed { line-height: 1.7; }

/* Secondary prose. Still above the 4.5:1 contrast floor on --bg. */
.muted-sm {
  color: var(--ink-3);
  font-size: var(--t-small);
}

.body-2 { color: var(--ink-2); }

/* Closing rule inside the tier ladder: a top hairline and no bottom border. */
.ladder__foot { border-top: 1px solid var(--line); border-bottom: 0; }

/* -- Ghost glyph placement. Each is positioned to overhang its section, and
      the parent `.has-ghost` clips it. Sizes are viewport-relative so the
      character reads as texture rather than as a giant blob on mobile. ---- */
.kana-ghost--te { top: -18%; right: -16%; font-size: clamp(16rem, 44vw, 36rem); }
.kana-ghost--po { top: 12%;  left: -6%;  font-size: clamp(12rem, 32vw, 28rem); }
.kana-ghost--ob { bottom: 4%; right: -10%; font-size: clamp(11rem, 30vw, 26rem); }

/* ==========================================================================
   11  SERVICE PAGE COMPONENTS
   Additions for the commercial homepage. Same rules as everywhere else:
   tight radii, hairlines for structure, monospace metadata set apart from
   prose, and colour reserved for meaning.
   ========================================================================== */

/* -- Page-level hero (the /architecture page uses this, the homepage does
      not). Narrower measure, since it carries no diagram beside it. -- */
.hero--page { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero--page .hero__copy { max-width: 58ch; }

/* -- Service phases: the four-step engagement --------------------------- */



/* The phase number is the spine of the sequence, so it is the largest thing
   in the header — bigger than the label, which is metadata. */



/* -- Quad: the four judgment questions ---------------------------------- */




/* -- CTA strip: hands the reader to the architecture page ---------------- */


/* -- Sectors: a quiet list, not badges. Deliberately plain while the
      vertical is still unknown. ------------------------------------------ */
.sectors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.sector {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .5rem .7rem;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sector:hover { border-color: var(--line-strong); color: var(--ink-2); }

/* -- Footer link inside a meta row -------------------------------------- */
.footer__meta-v a {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__meta-v a:hover { color: var(--lime); border-color: var(--lime-line); }
.footer__base a {
  transition: color var(--dur) var(--ease);
}
.footer__base a:hover { color: var(--ink-2); }

/* -- Nav: current page gets a quiet underline, not a loud pill ---------- */
.nav__link[aria-current="page"] .nav__link-en { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .3rem;
  height: 1px;
  background: var(--lime);
  opacity: .5;
}

@media (max-width: 720px) {
  .footer__meta-v a { display: inline-block; }
}

/* ==========================================================================
   12  REPOSITIONING COMPONENTS
   The commercial homepage: use cases, the decision model, the three orbits.
   These deliberately avoid box-with-badge treatment — the brief is explicit
   that the page should not read as a dashboard or as a card grid.
   ========================================================================== */

/* -- Hero: a faint field of points rather than a gradient glow ----------- */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Sparse, low-contrast starfield. Fixed positions, no parallax, no loop. */
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(199,206,255,.34), transparent),
    radial-gradient(1px 1px at 78% 14%, rgba(199,206,255,.22), transparent),
    radial-gradient(1px 1px at 34% 78%, rgba(199,206,255,.18), transparent),
    radial-gradient(1px 1px at 62% 62%, rgba(199,206,255,.26), transparent),
    radial-gradient(1px 1px at 88% 74%, rgba(199,206,255,.16), transparent),
    radial-gradient(1px 1px at 22% 52%, rgba(199,206,255,.20), transparent);
  opacity: .7;
}
.js .hero__field {
  opacity: 0;
  transition: opacity 1800ms var(--ease-out);
}
.js .hero__field.is-visible, .hero .hero__field { opacity: .7; }

.hero__tertiary { margin-top: var(--sp-5); font-family: var(--font-mono);
  font-size: var(--t-micro); letter-spacing: var(--track-micro); }
.hero__tertiary a {
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__tertiary a:hover { color: var(--signal); border-color: var(--signal-line); }

/* -- Scatter: the hero's fragments, unaligned on purpose ----------------- */


/* Fixed, irregular placement — the point is that nothing lines up. */


/* Gentle drift, then rest. Each fragment moves a couple of pixels on its own
   long cycle so the arrangement never looks frozen, but nothing travels far
   enough to read as animation for its own sake. */

/* -- Use cases: editorial list, NOT cards -------------------------------- */
.cases {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line);
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: baseline;
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: border-color var(--dur) var(--ease);
}
.case:hover { border-bottom-color: var(--line-strong); }

/* The complaint is the largest type in the section — it is the customer's
   own sentence, and recognising it is the whole job of this section. */
.case__said {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.018em;
  color: var(--ink-2);
  max-width: 26ch;
  transition: color var(--dur) var(--ease);
}
.case:hover .case__said { color: var(--ink); }

.case__do {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 44ch;
}

/* The entry offer — the one the brief calls the easiest first sale. Marked
   by a left rule rather than a badge. */
.case--entry { position: relative; }
.case--entry::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: clamp(1.4rem, 3vw, 2.1rem);
  bottom: clamp(1.4rem, 3vw, 2.1rem);
  width: 2px;
  background: var(--signal);
  opacity: .55;
}
.case--entry .case__said { color: var(--ink); }

/* -- Decision model ------------------------------------------------------ */
.model {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

.model__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.model__row:last-child { border-bottom: 0; }

.model__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-4);
}

.model__steps {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.model__step {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  padding: .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
/* The terminal step is lit; a human gate is marked separately, because the
   distinction between those two is the entire point of the model. */
.model__step--act  { color: var(--signal); border-color: var(--signal-line); background: var(--signal-dim); }
.model__step--human{ color: var(--moon);   border-color: var(--accent-line); background: var(--accent-soft); }

.model__arrow { color: var(--ink-4); font-size: var(--t-label); }

.model__note {
  margin-top: var(--sp-5);
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 62ch;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-line);
}

/* -- Orbits: the signature visual ---------------------------------------- */

@media (max-width: 900px) {
}

@media (max-width: 720px) {
  .case { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .case--entry::before { left: -0.6rem; }
  .model__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .model__steps { gap: var(--sp-2); }
}

/* ==========================================================================
   13  STAGES, DEPLOYMENT, WHY
   The five-stage engagement, where Build carries the deployment options, and
   the shortened decision-layer positioning.
   ========================================================================== */

.stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: stage;
}

/* Each stage is a two-column grid: a number column, and a content column
   holding the heading and the body together. Children are placed by area
   rather than by source order, because a plain two-column grid returns the
   third child to column one — which collapsed the body copy into the 72px
   number column and broke it into one word per line.
   The body area spans up to three rows so the Build stage, which adds a
   deployment list, does not stack its list on top of its paragraph. */
.stage {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-template-areas:
    "num  title"
    "num  body"
    "num  extra";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.2rem, 3vw, 2.5rem);
  row-gap: var(--sp-2);
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.stage:last-child { border-bottom: 1px solid var(--line); }
.stage:hover { border-top-color: var(--line-strong); }

.stage__head { grid-area: num; }
.stage h3      { grid-area: title; margin: 0 0 var(--sp-2); }
.stage p       { grid-area: body; margin: 0; }
.stage .deploy { grid-area: extra; margin-top: var(--sp-2); align-self: start; }

.stage__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* The number is the spine of the sequence, so it is the largest element in
   the row and the only one that lights on hover. */
.stage__num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink-4);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.stage:hover .stage__num { color: var(--signal); }

.stage__kana {
  font-family: var(--font-kana);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  color: var(--ink-4);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stage:hover .stage__kana { color: var(--ink-3); transform: translateX(3px); }

.stage h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--t-h3);
}

.stage p {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 60ch;
}

/* Deployment options sit inside Build, as a short definition list rather than
   as three more cards. */
.deploy {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  border-left: 2px solid var(--accent-line);
  padding-left: var(--sp-4);
}
.deploy li {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-3);
}
.deploy strong {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  margin-right: var(--sp-2);
}

/* -- The "why" section -------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.why-body {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
}
.why-body p {
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 52ch;
}

/* The hand-off to the architecture page. Underlined on hover rather than
   boxed as a button: this is a continuation, not a call to action. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  width: fit-content;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-arrow span { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--signal); border-color: var(--signal-line); }
.link-arrow:hover span { transform: translateX(4px); }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

@media (max-width: 720px) {
  /* Single column on mobile: the areas must be redefined too, or the
     desktop template would still try to place children in a second column
     that no longer exists. */
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "num"
      "title"
      "body"
      "extra";
    grid-template-rows: auto;
    row-gap: var(--sp-2);
  }
  .stage__head { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
  .stage__num { font-size: 1.125rem; }
}

/* ==========================================================================
   14  PRINCIPLES
   The non-negotiables, set as a hairline grid of statements rather than as a
   compliance list. Each is a term and a sentence, so it reads in the same
   register as the rest of the page.
   ========================================================================== */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0;
}

.principle {
  background: var(--surface);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  transition: background var(--dur) var(--ease);
}
.principle:hover { background: var(--surface-2); }

.principle dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--signal);
  opacity: .9;
}

.principle dd {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: none;
}

.principles__note {
  margin-top: var(--sp-5);
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 62ch;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-line);
}



/* ==========================================================================
   THEME REBUILD: MATERIAL WORLDS, ENVIRONMENT CHAPTERS & CARD FAMILIES
   ========================================================================== */

/* -- Theme Switcher Control --------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--theme-switch-bg);
  border: 1px solid var(--theme-switch-border);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.theme-btn:hover {
  color: var(--ink);
}

.theme-btn[aria-pressed="true"] {
  background: var(--theme-switch-active);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.theme-btn__icon {
  font-size: 11px;
  line-height: 1;
}

.theme-btn__text {
  font-size: 10px;
  text-transform: uppercase;
}

/* -- Section Environmental Worlds ---------------------------------------- */
.sec--archive {
  background-color: var(--surface-archive-bg);
  color: var(--archive-text);
  border-top: 1px solid var(--border-archive);
  border-bottom: 1px solid var(--border-archive);
  position: relative;
}
.sec--archive::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--archive-grain) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .45;
  pointer-events: none;
}

.sec--instrument {
  background-color: var(--surface-instrument-bg);
  border-top: 1px solid var(--border-inst);
  border-bottom: 1px solid var(--border-inst);
  position: relative;
}
.sec--instrument::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--inst-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--inst-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .5;
  pointer-events: none;
}

.sec--signal {
  background-color: var(--surface-signal-bg);
  border-top: 1px solid var(--border-signal);
  border-bottom: 1px solid var(--border-signal);
  position: relative;
}

.sec--observatory {
  background-color: var(--surface-obs-deep);
  border-top: 1px solid var(--border-obs);
  border-bottom: 1px solid var(--border-obs);
  position: relative;
  padding-inline: clamp(1rem, 3.5vw, 2.5rem);
}
.sec--observatory::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--obs-star) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .6;
  pointer-events: none;
}


/* Guarantee rock-solid contrast in observatory section regardless of spine or theme */
.sec--observatory .principle dt,
[data-theme="light"] .sec--observatory .principle dt,
.spine__flow .sec--observatory .principle dt,
[data-theme="light"] .spine__flow .sec--observatory .principle dt {
  color: #f1f3fd !important;
}

.sec--observatory .principle dd,
[data-theme="light"] .sec--observatory .principle dd,
.spine__flow .sec--observatory .principle dd,
[data-theme="light"] .spine__flow .sec--observatory .principle dd {
  color: #cbd2ec !important;
}

.sec--observatory .orbit-key__name,
[data-theme="light"] .sec--observatory .orbit-key__name,
.spine__flow .sec--observatory .orbit-key__name,
[data-theme="light"] .spine__flow .sec--observatory .orbit-key__name {
  color: #f1f3fd !important;
}

.sec--observatory .orbit-key__desc,
[data-theme="light"] .sec--observatory .orbit-key__desc,
.spine__flow .sec--observatory .orbit-key__desc,
[data-theme="light"] .spine__flow .sec--observatory .orbit-key__desc {
  color: #cbd2ec !important;
}

.sec--observatory .principles__note,
[data-theme="light"] .sec--observatory .principles__note,
.spine__flow .sec--observatory .principles__note,
[data-theme="light"] .spine__flow .sec--observatory .principles__note {
  color: #8e98b7 !important;
}

.sec--observatory .model__note,
[data-theme="light"] .sec--observatory .model__note,
.spine__flow .sec--observatory .model__note,
[data-theme="light"] .spine__flow .sec--observatory .model__note {
  color: #cbd2ec !important;
}

/* -- Customer Inquiry Automation Demo Card ------------------------------ */
.demo-box {
  background: rgba(14, 21, 38, 0.75);
  border: 1px solid rgba(82, 107, 168, 0.32);
  border-radius: var(--r-sm);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-top: var(--sp-6);
  position: relative;
}
.demo-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--signal), var(--human));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.demo-box__header {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.demo-box__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  color: var(--signal-bright);
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.demo-box__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
  font-weight: 500;
  color: #f1f3fd;
  margin: 0;
}
.demo-box__steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.demo-step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  background: rgba(22, 32, 56, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xs);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.demo-step:hover {
  background: rgba(22, 32, 56, 0.85);
  border-color: rgba(161, 173, 255, 0.35);
}
.demo-step--human {
  border-left: 3px solid var(--human);
  background: rgba(45, 32, 20, 0.4);
}
.demo-step--human:hover {
  background: rgba(45, 32, 20, 0.6);
  border-color: var(--human);
}
.demo-step__num {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--signal);
  letter-spacing: -.02em;
  padding-top: 2px;
}
.demo-step--human .demo-step__num {
  color: var(--human);
}
.demo-step__body {
  min-width: 0;
}
.demo-step__title {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 500;
  color: #f1f3fd;
  margin: 0 0 4px;
}
.demo-step__desc {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: #cbd2ec;
  margin: 0;
  line-height: 1.5;
}
.demo-box__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: #8e98b7;
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Observatory Theme & Contrast Overrides (Rock-solid in both Day & Night) */
.sec--observatory .principle dt {
  color: #f1f3fd;
}
.sec--observatory .principle dd {
  color: #cbd2ec;
}
.sec--observatory .orbit-key__name {
  color: #f1f3fd;
}
.sec--observatory .orbit-key__desc {
  color: #cbd2ec;
}
.sec--observatory .principles__note {
  color: #8e98b7;
}
.sec--observatory .principle {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.sec--observatory .orbit-key__row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Light mode overrides for Observatory contrast room */
[data-theme="light"] .sec--observatory {
  color: #f1f3fd;
}
[data-theme="light"] .sec--observatory .sec-head h2 {
  color: #f1f3fd;
}
[data-theme="light"] .sec--observatory .sec-head p {
  color: #cbd2ec;
}
[data-theme="light"] .sec--observatory .model__label {
  color: #a1adff;
}
[data-theme="light"] .sec--observatory .model__step {
  color: #f1f3fd;
  background: #172036;
  border-color: #2a3556;
}
[data-theme="light"] .sec--observatory .model__arrow {
  color: var(--brass-bright);
}
[data-theme="light"] .sec--observatory .model__note {
  color: #cbd2ec;
}
[data-theme="light"] .sec--observatory .principle dt {
  color: #f1f3fd;
}
[data-theme="light"] .sec--observatory .principle dd {
  color: #cbd2ec;
}
[data-theme="light"] .sec--observatory .orbit-key__name {
  color: #f1f3fd;
}
[data-theme="light"] .sec--observatory .orbit-key__desc {
  color: #cbd2ec;
}
[data-theme="light"] .sec--observatory .principles__note {
  color: #8e98b7;
}

/* -- Archive Cards Enhancement ------------------------------------------- */
.sec--archive .cases {
  background: transparent;
  border-top: none;
  gap: var(--sp-4);
}
.sec--archive .case {
  background: var(--archive-card);
  border: 1px solid var(--border-archive);
  border-top: 2px solid var(--brass);
  border-radius: var(--r-xs);
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sec--archive .case:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
.sec--archive .case__said {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.05rem + .8vw, 1.55rem);
  font-style: normal;
  color: var(--archive-text);
}
.sec--archive .case__do {
  color: var(--archive-muted);
}
.sec--archive .case::before {
  content: 'SOURCE // REF RECORD';
  display: block;
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--sp-2);
}
.sec--archive .case--entry::before {
  content: 'PROPOSED DISCOVERY // SCOPE';
  color: var(--signal);
}

/* -- Instrument Panels Enhancement --------------------------------------- */
.sec--instrument .card-index {
  background: var(--border-inst);
  border-color: var(--border-inst);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}
.sec--instrument .card-index__item {
  background: var(--inst-panel);
  border-radius: 0;
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sec--instrument .card-index__item:hover {
  background: var(--surface-2);
}
.sec--instrument .card-index__num {
  color: var(--brass);
  font-weight: 500;
}

/* -- Signal Cards Enhancement ------------------------------------------- */
.sec--signal .stage {
  border-top-color: var(--border-signal);
  position: relative;
}
.sec--signal .stage:hover .stage__num {
  color: var(--accent-bright);
}

/* -- Editorial Typography for Principles --------------------------------- */
.principle dt {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem);
  font-style: normal;
}

/* ==========================================================================
   10  ROOM ENVIRONMENTS & EVOLVED COMPONENT FAMILIES
   ========================================================================== */

/* -- Room Banners & Chapter Identity ------------------------------------- */
.room-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.room-badge {
  color: var(--brass);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.room-coord {
  color: var(--ink-4);
}

/* -- Hero Observatory Console ------------------------------------------- */
.hero__text.hero__console {
  background: rgba(11, 16, 32, 0.45);
  border: 1px solid var(--border-obs);
  border-radius: var(--r-xs);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  backdrop-filter: blur(6px);
}
.hero__text.hero__console::before,
.hero__text.hero__console::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--brass-line);
  border-style: solid;
}
.hero__text.hero__console::before { top: 3px; left: 3px; border-width: 1px 0 0 1px; }
.hero__text.hero__console::after { bottom: 3px; right: 3px; border-width: 0 1px 1px 0; }
[data-theme="light"] .hero__text.hero__console {
  background: rgba(250, 247, 239, 0.7);
  border-color: var(--line-light);
}

/* -- Room 01: Archive Wall & Case Specimen Lab Grid ---------------------- */
.archive-room__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: var(--sp-4);
}
@media (max-width: 900px) {
  .archive-room__grid {
    grid-template-columns: 1fr;
  }
}

.archive-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.archive-stack__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-archive);
}
.archive-stack__label {
  color: var(--brass);
  font-weight: 600;
}
.archive-stack__status {
  color: var(--archive-muted);
}

/* Evolved Case Cards with tabs & metadata */
.case__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.case__id {
  color: var(--brass);
  font-weight: 600;
}
.case__category {
  color: var(--archive-muted);
}
.case__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border-archive);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.case__status {
  color: var(--archive-muted);
}
.case__tier {
  color: var(--brass-bright);
  font-weight: 600;
}
.case--active {
  border-color: var(--brass);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  position: relative;
}
.case--active::after {
  content: 'ACTIVE SELECTION';
  position: absolute;
  top: -9px;
  right: 14px;
  background: var(--brass);
  color: var(--obsidian);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 2px 6px;
  border-radius: 1px;
}

/* -- Active Case Specimen Board (Right Side of Archive Room) ------------- */
.case-specimen {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.specimen-board {
  background: var(--surface-instrument-bg);
  border: 1px solid var(--border-inst);
  border-radius: var(--r-xs);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  position: relative;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .25);
}
.specimen-board::before,
.specimen-board::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--brass-muted);
  border-style: solid;
}
.specimen-board::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
.specimen-board::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }

.specimen-header {
  border-bottom: 1px solid var(--border-inst);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.specimen-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.specimen-tag {
  color: var(--brass);
  font-weight: 600;
}
.specimen-sep {
  color: var(--line-strong);
}
.specimen-coord {
  color: var(--ink-4);
}
.specimen-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  color: var(--ink);
  font-weight: 600;
  margin-top: var(--sp-1);
}

.specimen-flow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.specimen-stage--source .specimen-card {
  border-left: 2px solid var(--brass);
}
.specimen-stage--analysis .specimen-card {
  border-left: 2px solid var(--signal-blue);
}
.specimen-stage--opp .specimen-card {
  border-left: 2px solid var(--accent-bright);
}
.specimen-stage--boundary .specimen-card {
  border-left: 2px solid var(--brass-bright);
}
.specimen-stage {
  position: relative;
}
.specimen-phase {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.specimen-step {
  color: var(--brass);
  font-weight: 700;
}
.specimen-phase-name {
  color: var(--ink-3);
}

.specimen-card {
  background: var(--inst-panel);
  border: 1px solid var(--border-inst);
  border-radius: var(--r-xs);
  padding: var(--sp-3) var(--sp-4);
}
.specimen-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.specimen-card-id {
  color: var(--ink-4);
}
.specimen-badge {
  font-size: 8.5px;
  padding: 2px 5px;
  border-radius: 1px;
  font-weight: 600;
}
.specimen-badge--archive {
  background: var(--brass-dim);
  color: var(--brass);
  border: 1px solid var(--brass-line);
}
.specimen-badge--inst {
  background: var(--inst-inset);
  color: var(--signal-blue);
  border: 1px solid var(--border-inst);
}
.specimen-badge--signal {
  background: var(--signal-soft);
  color: var(--signal-blue);
  border: 1px solid var(--signal-line);
}
.specimen-badge--brass {
  background: var(--brass-dim);
  color: var(--brass-bright);
  border: 1px solid var(--brass-line);
}

.specimen-quote {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
.specimen-text {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.45;
}

.specimen-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 18px;
  color: var(--brass-muted);
  line-height: 1;
}
.specimen-connector-line {
  width: 1px;
  height: 8px;
  background: var(--brass-line);
}
.specimen-connector-arrow {
  font-size: 11px;
  color: var(--brass);
}

.specimen-spec {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.specimen-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.4;
}
.specimen-k {
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.specimen-v {
  color: var(--ink-2);
  font-weight: 500;
  text-align: right;
}

.specimen-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.specimen-action-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.specimen-pip {
  flex-shrink: 0;
}

.specimen-rule-box {
  background: var(--inst-inset);
  border-left: 2px solid var(--brass);
  padding: var(--sp-2) var(--sp-3);
}
.specimen-rule-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 2px;
}
.specimen-rule-desc {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.4;
  margin: 0;
}

/* Light mode overrides for Archive Room Specimen Board */
[data-theme="light"] .specimen-board {
  background: var(--surface-paper-alt);
  border-color: var(--border-inst);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}
[data-theme="light"] .specimen-card {
  background: var(--surface-paper);
  border-color: var(--border-inst);
}
[data-theme="light"] .specimen-rule-box {
  background: var(--surface-paper-deep);
}

/* ==========================================================================
   11  COMMERCIAL REPOSITIONING & FOUNDER TRUST STYLES
   ========================================================================== */

/* -- Hero Reassurance ---------------------------------------------------- */
.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
}
.hero__reassurance {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--brass-bright);
  margin-bottom: var(--sp-4);
  line-height: 1.4;
}
[data-theme="light"] .hero__reassurance {
  color: var(--brass);
}

/* -- Familiar Asymmetric Layout (Scannable in 5 Seconds) ----------- */
.familiar-asym {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.familiar-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 680px) {
  .familiar-pair {
    grid-template-columns: 1fr;
  }
}
.familiar-full {
  width: 100%;
}

.familiar-card {
  background: var(--archive-card);
  border: 1px solid var(--border-archive);
  border-top: 2px solid var(--border-archive);
  border-radius: var(--r-xs);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.familiar-card:hover {
  transform: translateY(-2px);
  border-top-color: var(--brass);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
.familiar-card--wide {
  border-left: 2px solid var(--brass-line);
}
.familiar-card--featured {
  background: var(--surface-2);
  border-color: var(--brass-line);
  border-top: 2px solid var(--brass);
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
[data-theme="light"] .familiar-card--featured {
  background: var(--paper-bright);
}

.familiar-card__badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  background: var(--brass-dim);
  border: 1px solid var(--brass-line);
  padding: 2px 7px;
  border-radius: 1px;
  margin-bottom: var(--sp-2);
}

.familiar-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.05rem + .3vw, 1.35rem);
  font-weight: 600;
  color: var(--archive-text);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}
.familiar-card__desc {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--archive-muted);
  line-height: 1.45;
  margin-bottom: var(--sp-3);
}

/* Visual Workflow Cue in Middle */
.card-flow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
}
.card-flow__pill {
  background: var(--surface-3);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  font-weight: 600;
}
.card-flow__pill--person {
  background: var(--brass-dim);
  color: var(--brass-bright);
  border-color: var(--brass-line);
}
[data-theme="light"] .card-flow__pill--person {
  color: var(--brass);
}
.card-flow__arrow,
.card-flow__plus,
.card-flow__vs {
  color: var(--ink-4);
  font-size: 11px;
}
.card-flow__tag {
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 700;
}
.card-flow__tag--warn {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid var(--amber-dim);
}
.card-flow__tag--alert {
  background: var(--dispute-dim);
  color: var(--dispute);
  border: 1px solid var(--dispute-line);
}
.card-flow__tag--brass {
  background: var(--brass-dim);
  color: var(--brass-bright);
  border: 1px solid var(--brass-line);
}
[data-theme="light"] .card-flow__tag--brass {
  color: var(--brass);
}

/* Telstar Outcome (3-6 words, high contrast) */
.card-outcome {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border-archive);
  font-family: var(--font-mono);
  font-size: 11.5px;
  margin-top: auto;
}
.card-outcome__k {
  color: var(--brass);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 10px;
}
.card-outcome__v {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .02em;
}
.card-outcome--featured .card-outcome__v {
  color: var(--signal-blue);
  font-weight: 700;
}

/* Conversion Bridge */
.familiar-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2);
  border: 1px solid var(--border-archive);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-xs);
}
[data-theme="light"] .familiar-bridge {
  background: var(--paper-bright);
}
.familiar-bridge__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.familiar-bridge__cue {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.familiar-bridge__sub {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--archive-muted);
}
.familiar-bridge__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* -- Case Result in Archive Stack ---------------------------------------- */
.case__result {
  margin-top: var(--sp-2);
  font-size: var(--t-small);
  color: var(--brass-bright);
  font-family: var(--font-body);
}
[data-theme="light"] .case__result {
  color: var(--brass);
}

/* -- Discovery Starter Product Box --------------------------------------- */
.discovery-box {
  background: var(--surface-signal-bg);
  border: 1px solid var(--border-signal);
  border-radius: var(--r-sm);
  padding: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
}
.discovery-box::before,
.discovery-box::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: var(--signal-blue);
  border-style: solid;
}
.discovery-box::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
.discovery-box::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }

.discovery-box__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal-blue);
  background: var(--signal-soft);
  border: 1px solid var(--signal-line);
  padding: 3px 8px;
  border-radius: 1px;
  margin-bottom: var(--sp-3);
}
.discovery-box__header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.discovery-box__lead {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  color: var(--ink-2);
  max-width: 48ch;
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}

.discovery-deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.deliverable-item {
  background: rgba(15, 22, 40, 0.5);
  border: 1px solid var(--border-signal);
  border-radius: var(--r-xs);
  padding: var(--sp-4);
}
[data-theme="light"] .deliverable-item {
  background: var(--surface-paper-alt);
}
.deliverable-item__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--signal-blue);
  font-weight: 700;
  display: block;
  margin-bottom: var(--sp-1);
}
.deliverable-item__title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.deliverable-item__desc {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.45;
  margin: 0;
}

.discovery-box__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-signal);
}
.discovery-box__reassurance {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* -- Founder Card & About Section Contrast Fix --------------------------- */
#about .body-2 {
  color: #d8deee;
  font-size: var(--t-body);
  line-height: 1.65;
}
#about .muted-sm {
  color: #b0bad4;
  font-size: var(--t-small);
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: .02em;
}
[data-theme="light"] #about .body-2 {
  color: #d8deee;
}
[data-theme="light"] #about .muted-sm {
  color: #b0bad4;
}

.founder__quote {
  font-family: var(--font-serif);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: var(--ink-2);
  line-height: 1.5;
  font-style: italic;
  margin: var(--sp-2) 0;
}