/* ============================================================================
   TALANTON — style.css
   Structure, layout, colour, and typography for the Talanton landing page.

   Companion files:
     animations.css  — @keyframes and animation/transition declarations
     responsive.css  — defensive breakpoint rules only (see that file's header)

   ----------------------------------------------------------------------------
   BOX MODEL NOTE — read before editing

   This stylesheet deliberately does NOT apply a global
   `* { box-sizing: border-box }` reset.

   The approved v7 design was authored entirely with inline styles under the
   browser default content-box model. Several approved dimensions depend on it:

     - the logo mark is 22px + 1.5px border  -> 25px rendered
     - detail panels are min-height + 36px padding, additive
     - `.section.container` is max-width 1200px + 48px gutters, additive

   Switching to border-box would silently shrink all three. Since RC1's mandate
   is a visually identical reproduction, content-box is preserved as-is.
   Migrating to border-box is a Phase 2 candidate — see docs/ROADMAP.md.
   ----------------------------------------------------------------------------
   CONTENTS
     01  Fonts (generated)
     02  Design tokens
     03  Base & reset
     04  Utilities
     05  Layout primitives
     06  Components — buttons, cards, marks, meters, chips
     07  Navigation
     08  Hero
     09  01 Enterprise Reality
     10  02 Maturity Model
     11  Philosophy
     12  Ask the Institution
     13  03 Fragments to Memory
     14  04 The Loop
     15  05 The Stack
     16  06 Decision Trace
     17  07 Institutional Trust
     18  08 Impact
     19  09 Future
     20  10 CTA
     21  Footer
   ========================================================================== */


/* ============================================================================
   01  FONTS  —  GENERATED BLOCK, DO NOT HAND-EDIT

   Self-hosted from the approved v7 export. Subsets and unicode-ranges are
   reproduced verbatim from the original Google Fonts declarations so glyph
   coverage and per-subset loading behaviour are unchanged. Only the URLs are
   rewritten to local files.

   Regenerate with:  node tools/fonts.js  (see docs/WEBSITE_ARCHITECTURE.md)
   ========================================================================== */

/* Geist 300 — cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/geist-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist 300 — cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist 300 — vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/geist-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist 300 — latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist 300 — latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist 400 — cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist 400 — cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist 400 — vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist 400 — latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist 400 — latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist 500 — cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist 500 — cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist 500 — vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist 500 — latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist 500 — latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist 600 — cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/geist-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist 600 — cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist 600 — vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/geist-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist 600 — latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist 600 — latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist 700 — cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/geist-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist 700 — cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist 700 — vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/geist-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist 700 — latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist 700 — latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono 400 — cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist Mono 400 — cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist Mono 400 — symbols */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-mono-symbols.woff2') format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* Geist Mono 400 — vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-mono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist Mono 400 — latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono 400 — latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono 500 — cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist Mono 500 — cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist Mono 500 — symbols */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-mono-symbols.woff2') format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* Geist Mono 500 — vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-mono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist Mono 500 — latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono 500 — latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================================
   02  DESIGN TOKENS
   Every colour below is lifted verbatim from the approved v7 export.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #05070A;
  --bg-alt:        #07090E;
  --surface:       #0A0D13;
  --surface-2:     #0B0E14;
  --surface-3:     #0E1117;

  /* Brand */
  --blue:          #2D7FF9;
  --blue-hover:    #3E8CFC;
  --cyan:          #39D0FF;
  --cyan-soft:     #9FD8FF;
  --green:         #30D158;

  /* Text ramp, brightest to dimmest */
  --white:         #FFFFFF;
  --text:          #F2F5F9;
  --text-1:        #E5EAF2;
  --text-2:        #D5DBE4;
  --text-3:        #B8C0CC;
  --text-4:        #8A94A3;
  --text-5:        #5B6470;
  --text-6:        #4A5361;
  --text-dim:      #2A313C;

  /* Hairlines — all derived from the same #B8C0CC base */
  --line-08:       rgba(184, 192, 204, 0.08);
  --line-10:       rgba(184, 192, 204, 0.10);
  --line-12:       rgba(184, 192, 204, 0.12);
  --line-14:       rgba(184, 192, 204, 0.14);
  --line-16:       rgba(184, 192, 204, 0.16);
  --line-18:       rgba(184, 192, 204, 0.18);
  --line-20:       rgba(184, 192, 204, 0.20);
  --line-22:       rgba(184, 192, 204, 0.22);
  --line-28:       rgba(184, 192, 204, 0.28);
  --line-30:       rgba(184, 192, 204, 0.30);
  --line-35:       rgba(184, 192, 204, 0.35);

  /* Brand tints */
  --blue-04:       rgba(45, 127, 249, 0.04);
  --blue-05:       rgba(45, 127, 249, 0.05);
  --blue-06:       rgba(45, 127, 249, 0.06);
  --blue-07:       rgba(45, 127, 249, 0.07);
  --blue-08:       rgba(45, 127, 249, 0.08);
  --blue-10:       rgba(45, 127, 249, 0.10);
  --blue-25:       rgba(45, 127, 249, 0.25);
  --blue-30:       rgba(45, 127, 249, 0.30);
  --blue-40:       rgba(45, 127, 249, 0.40);
  --blue-45:       rgba(45, 127, 249, 0.45);
  --blue-50:       rgba(45, 127, 249, 0.50);
  --blue-70:       rgba(45, 127, 249, 0.70);

  --cyan-03:       rgba(57, 208, 255, 0.03);
  --cyan-04:       rgba(57, 208, 255, 0.04);
  --cyan-05:       rgba(57, 208, 255, 0.05);
  --cyan-07:       rgba(57, 208, 255, 0.07);
  --cyan-10:       rgba(57, 208, 255, 0.10);
  --cyan-20:       rgba(57, 208, 255, 0.20);
  --cyan-28:       rgba(57, 208, 255, 0.28);
  --cyan-30:       rgba(57, 208, 255, 0.30);
  --cyan-35:       rgba(57, 208, 255, 0.35);
  --cyan-45:       rgba(57, 208, 255, 0.45);
  --cyan-50:       rgba(57, 208, 255, 0.50);
  --cyan-60:       rgba(57, 208, 255, 0.60);

  --green-05:      rgba(48, 209, 88, 0.05);
  --green-35:      rgba(48, 209, 88, 0.35);

  /* Type */
  --font-sans:     'Geist', system-ui, sans-serif;
  --font-mono:     'Geist Mono', monospace;

  /* Layout */
  --container:     1200px;
  --gutter:        48px;
  --section-y:     140px;
  --nav-h:         64px;
  --radius:        6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
}


/* ============================================================================
   03  BASE & RESET
   ========================================================================== */

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--text-3);
  text-decoration: none;
}

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

::selection {
  background: rgba(45, 127, 249, 0.35);
  color: #fff;
}

h1, h2, h3, p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

/* The approved design builds its controls out of plain divs; the port promotes
   them to real buttons for keyboard and screen-reader users. This strips the UA
   styling so a button lays out like that div did. Note that the UA sheet also
   sets `box-sizing: border-box` on buttons alone, and that is deliberately left
   alone here — the button rules below are all written against it. The one place
   it matters is the maturity bars, which size by percentage; see there. */
button {
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

/* Keyboard focus is visible everywhere. The approved design has no focus
   treatment of its own; this adds one without altering the resting state. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}


/* ============================================================================
   04  UTILITIES
   ========================================================================== */

.mono {
  font-family: var(--font-mono);
}

.cy {
  color: var(--cyan);
}

/* Visually hidden but available to assistive technology. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--blue);
  color: var(--white);
  font-size: 14px;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}


/* ============================================================================
   05  LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding: var(--section-y) var(--gutter);
}

/* Darker band with hairline rules — used by alternating sections. */
.section--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--line-08);
}

.section--bounded {
  border-bottom: 1px solid var(--line-08);
}

/* Sections that carry their own max-width instead of wrapping a .container.
   Under content-box the 48px gutters sit outside the 1200px, so the inner
   measure matches the wrapped sections exactly. */
.section.container {
  max-width: var(--container);
}

/* Sections whose top padding is absorbed by the preceding section. */
.section--flush {
  padding-top: 0;
  padding-bottom: var(--section-y);
}

/* Section label ("01 — THE ENTERPRISE REALITY").

   This is intentionally an inline <span>, not a block. The approved design
   renders the label as an inline element inside the section container, so its
   line box is sized by the container's 16px strut rather than by the 12px
   label — 21px tall, not 16px. Making it block-level shortens every section by
   5px, which accumulates to a ~42px vertical drift by the foot of the page.
   Keeping it inline reproduces the approved geometry exactly and stays correct
   whatever metrics the loaded font reports. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--blue);
}

.eyebrow--cyan {
  color: var(--cyan);
}

.section__title {
  margin: 20px 0 0;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}

.section__title--w640 { max-width: 640px; }
.section__title--w700 { max-width: 700px; }
.section__title--w720 { max-width: 720px; }
.section__title--w760 { max-width: 760px; }

.section__lede {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-3);
}

.section__lede--w560 { max-width: 560px; }
.section__lede--w600 { max-width: 600px; }
.section__lede--w620 { max-width: 620px; }
.section__lede--tight {
  margin-top: 24px;
  text-wrap: pretty;
}

/* The mono one-liner that bridges each section to the next. */
.transition-note {
  margin: 40px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-5);
}

.transition-note--lg { margin-top: 64px; }
.transition-note--xl { margin-top: 72px; }

/* Small mono label used above panel content. */
.label-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-5);
}

.label-key--mid  { color: var(--text-4); }
.label-key--cyan { color: var(--cyan); }


/* ============================================================================
   06  COMPONENTS
   ========================================================================== */

/* --- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: var(--radius);
}

.btn--sm {
  font-size: 14px;
  padding: 9px 18px;
}

.btn--primary {
  color: var(--white);
  background: var(--blue);
}

.btn--primary:hover {
  background: var(--blue-hover);
  color: var(--white);
}

.btn--light {
  color: var(--bg);
  background: var(--white);
}

.btn--light:hover {
  background: var(--text-1);
  color: var(--bg);
}

.btn--ghost {
  color: var(--white);
  border: 1px solid var(--line-28);
}

.btn--ghost:hover {
  border-color: var(--blue);
  color: var(--white);
}

/* --- Logo mark ------------------------------------------------------------- */

.mark {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--blue);
  display: grid;
  place-items: center;
}

.mark__core {
  width: 8px;
  height: 8px;
  background: var(--cyan);
}

.mark--sm { width: 18px; height: 18px; }
.mark--sm .mark__core { width: 6px; height: 6px; }

.mark--lg { width: 26px; height: 26px; margin: 0 auto 12px; }
.mark--lg .mark__core { width: 9px; height: 9px; }

/* --- Cards ----------------------------------------------------------------- */

.card {
  border: 1px solid var(--line-12);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  background: var(--surface);
}

.card--tight {
  padding: 28px 24px;
}

.card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-5);
  margin-bottom: 16px;
}

.card__kicker--cyan {
  color: var(--cyan);
  margin-bottom: 14px;
}

.card__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
}

.card__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-4);
}

.card--tight .card__body {
  color: var(--text-3);
}

/* --- Detail panel (Loop / Stack / Trace share this) ------------------------ */

.detail-panel {
  border: 1px solid var(--line-12);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 36px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-panel--sticky {
  position: sticky;
  top: 96px;
  min-height: 340px;
}

.detail-panel--tall {
  min-height: 360px;
  gap: 18px;
}

.detail-panel__tag {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.detail-panel__title {
  font-size: 26px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
}

.detail-panel__title--sm {
  font-size: 24px;
}

.detail-panel__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-3);
}

.detail-panel__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* Pins the meta block to the bottom of the panel. */
.detail-panel__meta--push {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-10);
}

.detail-panel__note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-10);
  font-size: 12px;
  color: var(--text-5);
}

.meta-row {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.meta-row__key {
  color: var(--text-5);
  flex-shrink: 0;
}

.meta-row__val {
  color: var(--text-4);
}

/* --- Meter (confidence bars) ----------------------------------------------- */

.meter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meter__head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-5);
}

.meter-group .meter__head {
  font-size: 12px;
  letter-spacing: normal;
}

.meter {
  height: 6px;
  border-radius: 3px;
  background: var(--line-10);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

/* --- Pills, chips, tags ---------------------------------------------------- */

.pill {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-5);
  border: 1px solid var(--line-20);
  border-radius: 4px;
  padding: 4px 10px;
}

.chip {
  border: 1px solid var(--line-16);
  border-radius: var(--radius);
  padding: 10px 13px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
}

.chip--active {
  border-color: var(--cyan-35);
  background: var(--cyan-05);
  color: var(--white);
}

.chip--dashed {
  border: 1px dashed var(--line-30);
  color: var(--text-3);
}

.chip--ok {
  border-color: var(--green-35);
  background: var(--green-05);
  color: var(--text-2);
}

.chip__note {
  font-size: 10px;
  color: var(--text-5);
}

.tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cyan-soft);
  border: 1px solid var(--cyan-28);
  border-radius: 4px;
  padding: 8px 14px;
}


/* ============================================================================
   07  NAVIGATION
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  background: rgba(5, 7, 10, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-10);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--white);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  color: var(--text-3);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__action {
  font-size: 14px;
  color: var(--text-3);
  padding: 8px 14px;
}


/* ============================================================================
   08  HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px var(--gutter);
  overflow: hidden;
}

/* Faint 72px graph paper, masked to an ellipse behind the headline. */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(184, 192, 204, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 192, 204, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 75%);
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.hero__glow--blue {
  top: -10%;
  right: 5%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(45, 127, 249, 0.13), transparent 65%);
}

.hero__glow--cyan {
  bottom: -15%;
  left: 0;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(57, 208, 255, 0.07), transparent 65%);
}

.hero__inner {
  position: relative;
}

.hero__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);
}

.hero__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
}

.hero__title {
  font-size: 80px;
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 940px;
  text-wrap: balance;
}

.hero__lede {
  margin: 32px 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 660px;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 44px;
}


/* ============================================================================
   09  01 — ENTERPRISE REALITY
   ========================================================================== */

.reality__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.decay {
  margin-top: 56px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-6);
  line-height: 2;
}

.decay__count { color: var(--text-3); }
.decay__label { color: var(--text-4); }


/* ============================================================================
   10  02 — MATURITY MODEL
   ========================================================================== */

.maturity {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 72px;
  height: 320px;
}

.maturity__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  height: 100%;
}

.maturity__col--marked { position: relative; }
.maturity__col--wide   { flex: 1.2; }

.maturity__marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-5);
  white-space: nowrap;
}

/* Bar height comes from the --bar-h custom property set in the markup, so the
   approved proportions stay declarative rather than being computed in JS. */
/* The bar heights are percentages of the chart, and in the approved design they
   size a content box — the 1px cap sits on top of that percentage rather than
   inside it. Buttons default to border-box, which would eat the cap and leave
   every bar a pixel short, so this one control opts back into content-box. The
   width then has to discount the two side borders by hand to still fill the
   column. */
.maturity__bar {
  box-sizing: content-box;
  cursor: pointer;
  height: var(--bar-h);
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--line-12);
  border-bottom: none;
  background: rgba(184, 192, 204, 0.10);
  width: calc(100% - 2px);
  display: block;
}

.maturity__bar--t1   { background: var(--blue-08);  border-color: var(--blue-25); }
.maturity__bar--t2   { background: var(--blue-10);  border-color: var(--blue-30); }
.maturity__bar--t3   { background: rgba(45, 127, 249, 0.13); border-color: rgba(45, 127, 249, 0.35); }
.maturity__bar--t4   { background: var(--cyan-10);  border-color: var(--cyan-35); }

.maturity__bar--peak {
  background: linear-gradient(to top, rgba(45, 127, 249, 0.18), var(--cyan-10));
  border-color: var(--cyan-50);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
}

/* Selected stage — overrides every tier's resting border. */
.maturity__bar.is-active { border-color: var(--cyan); }

.maturity__peak-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.maturity__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-4);
  text-align: center;
}

.maturity__label--mid  { color: var(--text-3); }
.maturity__label--high { color: var(--text-2); }
.maturity__label--peak { color: var(--white); font-weight: 600; }

.maturity__detail {
  margin-top: 40px;
  border: 1px solid var(--line-12);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 32px;
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.maturity__detail-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.maturity__detail-col:first-child { gap: 8px; }

.maturity__stage-name {
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
}

.maturity__detail-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-3);
}


/* ============================================================================
   11  PHILOSOPHY
   ========================================================================== */

.philosophy {
  padding-top: 160px;
  padding-bottom: 160px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.philosophy__statement {
  margin: 40px 0 0;
  font-size: 32px;
  line-height: 1.45;
  font-weight: 300;
  color: var(--text-1);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.philosophy__body {
  margin: 32px auto 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-4);
  max-width: 560px;
  text-wrap: pretty;
}


/* ============================================================================
   12  ASK THE INSTITUTION
   ========================================================================== */

.ask__layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  margin-top: 56px;
  align-items: start;
}

.ask__questions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ask__question-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ask__question {
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line-14);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-1);
}

.ask__question:hover { border-color: var(--cyan-50); }

.ask__question.is-active {
  border-color: var(--blue-70);
  background: var(--blue-10);
}

.ask__disclaimer {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--text-6);
  line-height: 1.7;
}

.ask__panel {
  border: 1px solid var(--line-12);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Steps reveal in sequence as the scripted answer plays. */
.ask__step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0.06;
  transform: translateY(10px);
}

.ask__step.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.ask__step--ruled {
  gap: 10px;
  border-top: 1px solid var(--line-08);
  padding-top: 20px;
}

/* The confidence step is spaced 8px, not 10px, in the approved design. */
.ask__step--meter {
  gap: 8px;
}

/* In the approved design the evidence rows are direct flex children of the
   step, so the step's 10px gap separates them. The port renders them into a
   container, so that container has to carry the same spacing — otherwise the
   rows sit flush and the step loses 10px per row. */
.ask__evidence {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ask__memory {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ask__memory-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.ask__memory-year {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-5);
  width: 44px;
  flex-shrink: 0;
}

.ask__memory-text {
  font-size: 14px;
  color: var(--text-3);
}

.ask__evidence-row {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--text-3);
}

.ask__evidence-bullet { color: var(--text-5); }

.ask__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-3);
}

.ask__gov {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-4);
}

.ask__rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ask__why {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-4);
  border: 1px solid var(--line-20);
  border-radius: 4px;
  padding: 4px 10px;
}

.ask__why:hover {
  color: var(--white);
  border-color: var(--cyan-50);
}

.ask__rec {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-1);
}

.ask__why-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--blue-25);
  border-radius: var(--radius);
  background: var(--blue-05);
  padding: 16px 18px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-4);
}

.ask__why-panel[hidden] { display: none; }

/* A single run of text, not a stack. Left as a flex column it would split the
   literal text and the record-id <span> into two flex items on separate lines. */
.ask__audit {
  display: block;
  font-size: 13px;
  color: var(--green);
}


/* ============================================================================
   13  03 — FRAGMENTS TO MEMORY
   ========================================================================== */

.flow {
  display: grid;
  grid-template-columns: 220px 1fr 220px 1fr 240px;
  margin-top: 72px;
  align-items: center;
}

.flow__sources {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flow__source {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-14);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-3);
}

.flow__source-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}

.flow__wire {
  position: relative;
  height: 8px;
  margin: 0 8px;
}

.flow__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--blue-25);
}

.flow__wire--cyan .flow__line { background: var(--cyan-30); }

.flow__pulse {
  position: absolute;
  top: 50%;
  margin-top: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

.flow__core {
  border: 1px solid var(--blue-50);
  border-radius: 10px;
  background: var(--blue-07);
  padding: 32px 20px;
  text-align: center;
}

.flow__core-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.flow__core-body {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-4);
  line-height: 1.5;
}

.flow__outputs {
  display: flex;
  flex-direction: column;
}

.flow__output {
  border: 1px solid var(--cyan-35);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--cyan-04);
}

.flow__output-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.flow__output-note {
  font-size: 12px;
  color: var(--text-4);
  margin-top: 4px;
}

.flow__drop {
  position: relative;
  height: 28px;
  margin: 0 auto;
  width: 1px;
  background: var(--cyan-30);
}

.flow__drop-pulse {
  position: absolute;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}


/* ============================================================================
   14  04 — THE LOOP
   ========================================================================== */

.loop {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 64px;
  margin-top: 64px;
  align-items: center;
}

.loop__dial {
  position: relative;
  width: 520px;
  height: 520px;
}

.loop__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--line-22);
  border-radius: 50%;
}

/* Nodes are absolutely placed from --x / --y set per node in components.js. */
.loop__node {
  cursor: pointer;
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.loop__node-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--line-35);
}

.loop__node.is-active .loop__node-dot {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 16px var(--cyan-60);
}

.loop__node-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-4);
  white-space: nowrap;
}

.loop__node.is-active .loop__node-label { color: var(--white); }

.loop__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid var(--blue-40);
  background: var(--blue-06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.loop__hub-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.loop__hub-note {
  font-size: 11px;
  color: var(--text-4);
  max-width: 100px;
  line-height: 1.4;
}


/* ============================================================================
   15  05 — THE STACK
   ========================================================================== */

.stack {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  margin-top: 56px;
  align-items: start;
}

.stack__list {
  position: relative;
  padding-left: 28px;
}

.stack__spine {
  position: absolute;
  left: 9px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, var(--cyan-50), rgba(45, 127, 249, 0.15));
}

.stack__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stack__row {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 17px 24px;
  border: 1px solid var(--line-12);
  background: var(--surface);
  border-radius: var(--radius);
  transform: translateX(0);
  opacity: 0.55;
}

.stack__row-dot {
  position: absolute;
  left: -24px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dim);
  transform: translateY(-50%);
}

.stack__row-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
}

.stack__row-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-5);
}

/* Layers wired to the current selection. */
.stack__row.is-adjacent {
  border-color: var(--cyan-30);
  background: var(--cyan-04);
  transform: translateX(3px);
  opacity: 1;
}

.stack__row.is-adjacent .stack__row-dot { background: var(--cyan-60); }

/* The current selection itself. */
.stack__row.is-selected {
  border-color: var(--blue-70);
  background: var(--blue-10);
  transform: translateX(8px);
  opacity: 1;
}

.stack__row.is-selected .stack__row-dot  { background: var(--cyan); }
.stack__row.is-selected .stack__row-code { color: var(--cyan); }


/* ============================================================================
   16  06 — DECISION TRACE
   ========================================================================== */

.trace {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  margin-top: 56px;
  align-items: start;
}

.trace__steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trace__step {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line-12);
  background: var(--surface);
}

.trace__step.is-active {
  border-color: var(--blue-70);
  background: var(--blue-10);
}

.trace__step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-5);
  width: 20px;
  flex-shrink: 0;
}

.trace__step.is-active .trace__step-num { color: var(--cyan); }

.trace__step-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}

.trace__step-check {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
}

.trace__disclaimer {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--text-6);
}

/* --- Institutional decision record ---------------------------------------- */

.record {
  margin-top: 56px;
  border: 1px solid var(--line-18);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  overflow: hidden;
}

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

.record__title {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--white);
}

.record__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.record__cell {
  padding: 24px 32px;
  border-bottom: 1px solid var(--line-08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.record__cell--split { border-right: 1px solid var(--line-08); }
.record__cell--full  { grid-column: 1 / -1; }
.record__cell--last  { border-bottom: none; }

.record__key {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-5);
}

.record__val {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
}

/* The two mono values (record id, timestamp) are single-line and carry no
   line-height in the approved design — they must not inherit the 1.6 used by
   the prose values, which would add ~4px to the record's first grid row. */
.record__val--mono { font-size: 13px; line-height: normal; color: var(--text-2); }
.record__val--lg   { font-size: 14px; }
.record__val--ok   { color: var(--green); }

.record__sig {
  padding: 18px 32px;
  border-top: 1px solid var(--line-12);
  font-size: 11px;
  color: var(--text-6);
}


/* ============================================================================
   17  07 — INSTITUTIONAL TRUST
   ========================================================================== */

.trust__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.trust__record {
  border: 1px solid var(--line-12);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 32px;
  font-size: 13px;
  line-height: 2;
  color: var(--text-3);
}

.trust__record-comment {
  color: var(--text-5);
  margin-bottom: 12px;
}

.trust__record-ok {
  margin-top: 12px;
  color: var(--green);
}

.pipeline { margin-top: 72px; }

.pipeline__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-5);
  margin-bottom: 24px;
}

.pipeline__track {
  display: flex;
  align-items: center;
  gap: 8px;
  row-gap: 20px;
  flex-wrap: wrap;
}

.pipeline__wire {
  position: relative;
  flex: 1;
  min-width: 20px;
  height: 1px;
  background: var(--blue-30);
}

.pipeline__pulse {
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

.trust__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}


/* ============================================================================
   18  08 — IMPACT
   ========================================================================== */

.impact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
}

.impact__panel {
  border: 1px solid var(--line-12);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.impact__panel--with {
  border-color: var(--cyan-35);
  background: var(--cyan-03);
}

.impact__head {
  padding: 24px 32px;
  border-bottom: 1px solid var(--line-10);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--text-4);
}

.impact__head--with {
  border-bottom-color: var(--cyan-20);
  color: var(--cyan);
}

.impact__stage {
  position: relative;
  height: 240px;
}

.impact__stage--net {
  display: grid;
  place-items: center;
}

/* Drifting fragments in the "without" panel. */
.scatter {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* --x/--y place the fragment's centre, so it has to be pulled back by half
     its own size. The nodeDrift keyframes carry the same offset, but the
     resting value has to exist here too — otherwise the fragment jumps by half
     its width and height whenever the animation isn't running, which is exactly
     what happens under prefers-reduced-motion. */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.scatter__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
}

.scatter__label {
  font-size: 10px;
  color: var(--text-6);
}

/* Connected graph in the "with" panel. */
.net {
  position: relative;
  width: 360px;
  height: 230px;
}

.net__edge {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--len);
  height: 1px;
  background: var(--cyan-45);
  transform-origin: 0 0;
  transform: rotate(var(--deg));
}

.net__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.net__node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-50);
}

.net__node-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan-soft);
  white-space: nowrap;
}

.impact__foot {
  padding: 24px 32px;
  border-top: 1px solid var(--line-10);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--text-4);
}

.impact__foot--with {
  border-top-color: var(--cyan-20);
  color: var(--text-2);
}

.measures { margin-top: 48px; }

.measures__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-5);
  margin-bottom: 20px;
}

.measures__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* ============================================================================
   19  09 — FUTURE
   ========================================================================== */

.era {
  display: flex;
  align-items: stretch;
  margin-top: 64px;
}

.era__item {
  flex: 1;
  border-top: 2px solid rgba(184, 192, 204, 0.15);
  padding: 28px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.era__item--now {
  flex: 1.2;
  border-top-color: var(--cyan);
}

.era__item--ahead {
  border-top-color: var(--blue-30);
  padding-right: 0;
}

.era__year {
  font-size: 11px;
  color: var(--text-5);
}

.era__year--now { color: var(--cyan); }

.era__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-4);
}

.era__name--mid { color: var(--text-3); }
.era__name--now { color: var(--white); }

.era__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-5);
}

.era__note--now { color: var(--text-3); }


/* ============================================================================
   20  10 — CTA
   ========================================================================== */

.cta {
  border: 1px solid var(--blue-30);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--blue-08), var(--cyan-04));
  padding: 90px var(--gutter);
  text-align: center;
}

.cta__title {
  margin: 24px auto 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 760px;
  line-height: 1.15;
  text-wrap: balance;
}

.cta__lede {
  margin: 20px auto 0;
  font-size: 17px;
  color: var(--text-3);
  max-width: 520px;
  line-height: 1.7;
}

.cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
}


/* ============================================================================
   21  FOOTER
   ========================================================================== */

.footer {
  border-top: 1px solid var(--line-10);
  padding: 64px var(--gutter) 48px;
  background: var(--bg);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gutter);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__wordmark {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--white);
}

.footer__tagline {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-5);
  max-width: 280px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.footer__col-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-5);
}

.footer__legal {
  display: block;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-08);
  font-size: 12px;
  color: var(--text-6);
}