/* ════════════════════════════════════════════════════════════
   Block 1 — Font @font-face declarations (Geist · Geist Mono · Newsreader)
   ══════════════════════════════════════════════════════════ */
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistMono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistMono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistMono-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistMono-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;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistMono-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;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistMono-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/GeistMono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/GeistMono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/GeistMono-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/GeistMono-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;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/GeistMono-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;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/GeistMono-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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Newsreader-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Newsreader-italic-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;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Newsreader-italic-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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Newsreader-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Newsreader-italic-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;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Newsreader-italic-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;
}

/* ════════════════════════════════════════════════════════════
   Block 2 — stack-styles.css
     Design tokens (palette, type, density) + base layout + the
     force-dark defeat rules that hold the warm-paper palette under
     Chrome's force-dark heuristic.
   ══════════════════════════════════════════════════════════ */
/* stack-styles.css
 *
 * Design tokens + global styles for the HasteKit "Stack Diagram" hi-fi
 * landing page. Aesthetic: architectural blueprint / poster — warm cream
 * paper, deep ink, refined rust accent, with technical motifs (mono
 * coordinates, dashed boundaries, numbered surfaces).
 *
 * All colors and sizes are CSS custom properties so the Tweaks panel can
 * swap palette / density at runtime by mutating the :root.
 */

:root {
  /* ── Palette (warm cream "paper" default) ─────────────────────────── */
  --paper:   #f4efe5;   /* hero background */
  --paper-2: #ebe4d4;   /* alt section background */
  --paper-3: #ddd4bf;   /* deeper accent tone */
  --ink:     #14110b;   /* near-black, warm */
  --ink-2:   #2e2820;
  --mid:     #6d6354;
  --faint:   #b5ab98;
  --rule:    rgba(20, 17, 11, 0.14);
  --rule-2:  rgba(20, 17, 11, 0.28);

  /* Accent + supporting diagram colors. Diagram nodes use rust/blue/sage
     so different "kinds" (gateway / agent / workflow / connector) are
     instantly distinguishable in the architecture drawings. */
  --accent:    #d94e29;   /* rust — primary */
  --accent-2:  #f7d4c3;   /* tint */
  --blue:      #2d4d7a;   /* deep blue — system/internal nodes */
  --blue-2:    #c8d4e3;
  --green:     #4a6b3f;   /* forest — outbound/success */
  --green-2:   #d2dec9;
  --gold:      #c98e2b;   /* warm yellow — annotations/highlights */
  --gold-2:    #f3e0b8;
  --violet:    #6b4a82;
  --violet-2:  #d9cbe3;

  /* Dark "blueprint" panel — used for the traces section and CTA. */
  --dark:      #14110b;
  --dark-2:    #1f1c14;
  --dark-3:    #2e2820;
  --dark-ink:  #ebe4d4;
  --dark-mid:  #8a8170;

  /* ── Type ────────────────────────────────────────────────────────── */
  --sans:    "Geist", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif:   "Newsreader", "Source Serif Pro", Georgia, serif;

  /* ── Density (controlled by Tweaks) ──────────────────────────────── */
  --section-y: 140px;    /* vertical padding between sections */
  --container: 1280px;   /* content max-width */
  --pad-x:     72px;     /* container horizontal padding */
  --gutter:    24px;     /* grid gutter */
  --radius:    8px;
}

/* Compact density override (Tweak: density=compact) — tighter vertical
   rhythm without compressing horizontal grid. */
[data-density="compact"] {
  --section-y: 96px;
  --pad-x:     56px;
}
[data-density="roomy"] {
  --section-y: 180px;
}

/* Cool slate palette (Tweak: palette=slate). Same structure, cooler tones. */
[data-palette="slate"] {
  --paper:   #ecedef;
  --paper-2: #e2e5e9;
  --paper-3: #d1d6dc;
  --ink:     #0e1417;
  --ink-2:   #232a30;
  --mid:     #5b6670;
  --faint:   #9aa3ad;
  --rule:    rgba(14, 20, 23, 0.12);
  --rule-2:  rgba(14, 20, 23, 0.24);
  --accent:    #2c6cf6;
  --accent-2:  #cdddff;
  --blue:      #133a73;
  --blue-2:    #cad6e6;
  --green:     #1f6b4d;
  --green-2:   #c6e1d3;
  --gold:      #a36b1b;
  --gold-2:    #f1dcb6;
  --dark:      #0e1417;
  --dark-2:    #1a2228;
  --dark-3:    #2a333a;
  --dark-ink:  #d4dde4;
  --dark-mid:  #7a8590;
}

/* Forest palette — slightly olive-toned warm. */
[data-palette="forest"] {
  --paper:   #eeeee2;
  --paper-2: #e3e3d2;
  --paper-3: #d0d1ba;
  --accent:    #b66724;
  --accent-2:  #ecd2b6;
  --blue:      #2a5152;
  --blue-2:    #c4d7d4;
}

/* ── Reset / base ─────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* ── Force-dark defeat ─────────────────────────────────────────────
 * Chrome's iframe auto-dark heuristic ignores the <meta color-scheme>
 * AND `color-scheme: light only` AND `!important` on backgrounds alone —
 * it intercepts inherited `color` at the compositor. Opt every element
 * out via `forced-color-adjust: none`, and re-assert text color on the
 * surfaces that carry copy. Ugly, but the only thing that holds. */
html { color-scheme: light only; }
html, body, *, *::before, *::after { forced-color-adjust: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chrome's iframe force-dark heuristic still wins over the body color rule
   above on some hosts; force these tokens at paint time with !important on
   every color-bearing background so the warm-paper palette holds. We isolate
   this in its own block so the override is obvious + easy to delete if the
   host ever stops force-darkening. */
html, body { background-color: var(--paper) !important; color: var(--ink) !important; }
.section.alt { background-color: var(--paper-2) !important; }
.section.dark, .site-footer { background-color: var(--dark) !important; color: var(--dark-ink) !important; }
.tools-bottom, .gw-device, .skill-doc, .price.highlight { background-color: var(--ink) !important; color: var(--paper) !important; }
.trace-tree-card, .trace-metric, .trace-chart, .trace-filters { background-color: var(--dark-2) !important; }
.trace-filter { background-color: var(--dark) !important; }
.nav { background-color: color-mix(in srgb, var(--paper) 80%, transparent) !important; }
.wf-frame { background-color: var(--paper) !important; }
.wf-frame-head { background-color: var(--paper-3) !important; }
.wf-frame-foot { background-color: var(--paper-2) !important; }
.wf-canvas { background-color: var(--paper) !important; }
.wf-node { background-color: var(--paper) !important; }
.mem-card { background-color: var(--paper) !important; }
.mem-card-memory    { background-image: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--accent-2) 50%, var(--paper)) 100%) !important; }
.mem-card-knowledge { background-image: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--blue-2) 50%, var(--paper)) 100%) !important; }
.mem-card-skills    { background-image: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--green-2) 50%, var(--paper)) 100%) !important; }
.gw-prov, .gw-cons, .mem-item, .kb-config, .kb-preview, .skill-tree, .card, .price, .tool-col, .anatomy-callout { background-color: var(--paper) !important; }
.gw-prov.is-on { background-color: var(--accent-2) !important; }
.cta-inner { background-color: var(--paper-2) !important; }
.pill { background-color: var(--paper) !important; }
.pill.solid { background-color: var(--ink) !important; }
.pill.accent { background-color: var(--accent) !important; }
.pill.tint { background-color: var(--accent-2) !important; }
.pill.blue-tint { background-color: var(--blue-2) !important; }
.pill.green-tint { background-color: var(--green-2) !important; }
.pill.gold-tint { background-color: var(--gold-2) !important; }
.anatomy-core-inner { background-color: var(--ink) !important; }
.gw-mark { background-color: var(--ink) !important; }
.gw-mark[data-on="true"] { background-color: var(--accent) !important; }
.btn-primary { background-color: var(--ink) !important; }
.btn-accent { background-color: var(--accent) !important; }
.wf-tab.active { background-color: var(--paper) !important; }

/* Explicit text colors — Chrome's inherited-color override at the compositor
   means we have to re-assert `color` on every text-bearing class on light
   surfaces, then re-re-assert on the dark surfaces to bring light text back. */
h1, h2, h3, h4, p, ul, li, span, div, a, button, label, code, pre,
.display-xl, .display-l, .display-m, .display-s, .lede,
.kicker, .eyebrow, .annot, .pill,
.brain-title, .brain-sub, .brain-lines, .brain-num,
.anatomy-part-label, .anatomy-part-meta,
.tool-col-title, .tool-col-sub, .tool-col-name, .tool-col-meta, .tool-col-badge,
.mem-card-title, .mem-card-sub, .mem-text, .mem-when, .kb-row-label, .kb-row-value,
.kb-preview-body, .tree-name, .tree-meta, .tree-icon,
.price-name, .price-num, .price-suffix, .price-sub, .price-features,
.fact-v, .fact-l, .fact-sub,
.nav-brand, .nav-brand-text, .nav-links a, .nav-link-sm,
.sec-index, .sec-head-title,
.gw-prov-name, .gw-prov-meta, .gw-col-label,
.wf-tab, .wf-node-label, .wf-node-meta, .wf-ruler-x, .wf-ruler-y,
.stack-band-name, .stack-band-sub, .band-item,
.trace-chart-legend, .trace-chart-legend span {
  color: var(--ink) !important;
}

/* Sections that are visually transparent need an explicit transparent
   background rule with !important — otherwise Chrome force-dark injects a
   dark fill onto them and the body's cream paper never shows through. */
.section, .hero, .container, .anatomy-stage, .anatomy-wrap,
.stack-wrap, .stack-frame, .gw-grid, .gw-center, .gw-flow,
.hero-row, .hero-ctas, .mem-grid, .tools-grid, .price-grid,
.trace-grid, .trace-chart-row, .fact-strip, .fact, .sec-head,
.gw-col-label, .gw-prov-list, .footer-top, .footer-bottom, .footer-cols,
.footer-col, .price-features, .mem-card-body, .mem-card-head, .mem-card-foot,
.brain-lines, .tool-col-items, .nav-inner, .nav-links, .nav-cta,
.hero-meta, .hero-meta-line, .cta-row, .cta-buttons {
  background-color: transparent !important;
}

/* Dark-surface descendants — pull text back to light. */
.section.dark, .section.dark h1, .section.dark h2, .section.dark h3, .section.dark p,
.section.dark span, .section.dark div, .section.dark a, .section.dark li, .section.dark code,
.section.dark .lede, .section.dark .display-xl, .section.dark .display-l,
.site-footer, .site-footer a, .site-footer .footer-brand-name, .site-footer .footer-col-title,
.site-footer span, .site-footer div, .site-footer li,
.gw-device, .gw-device *, .gw-device .gw-key-value,
.tools-bottom, .tools-bottom h1, .tools-bottom h2, .tools-bottom p,
.tools-bottom span, .tools-bottom div, .tools-bottom code, .tools-bottom .tools-hitl-body,
.price.highlight, .price.highlight *,
.skill-doc, .skill-doc .skill-md, .skill-doc .annot,
.trace-id, .trace-tree-stats strong, .trace-span-name, .trace-span-d,
.trace-metric-v, .trace-metric-l, .trace-filter-k {
  color: var(--dark-ink) !important;
}

/* Accent restores — these spans should stay rust, not get force-darkened to dark-ink. */
.em, .it.em, code.accent,
.kicker, .annot.accent,
.brain.highlight .brain-title, .brain.highlight .brain-num,
.gw-key-label, .tree-name.accent,
.price-check, .price.highlight .price-num,
.trace-id + .pill, .trace-filter-v,
.section.dark .em { color: var(--accent) !important; }

/* Mid/muted text — restore the secondary grey tone where it appeared before. */
.sec-head .lede, .brain-sub, .tool-col-sub, .tool-col-meta, .mem-card-sub,
.kb-row-label, .mem-when, .gw-prov-meta, .annot:not(.accent),
.sec-index, .price-sub, .price-suffix, .fact-sub, .wf-node-meta,
.wf-ruler-x, .wf-ruler-y, .tree-meta, .footer-bottom { color: var(--mid) !important; }

.section.dark .annot:not(.accent),
.section.dark .sec-index,
.site-footer .footer-bottom,
.site-footer .footer-meta a { color: var(--dark-mid) !important; }

/* Footer column titles need to stay rust — the broad dark-surface rule above
   was painting them dark-ink. Specificity here beats the dark-surface block. */
.site-footer .footer-col-title { color: var(--accent) !important; }
.anatomy-core-label, .gw-key-label { color: var(--accent) !important; }
.anatomy-core-name { color: var(--paper) !important; }
.anatomy-core-version { color: var(--dark-mid) !important; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* ── Containers ───────────────────────────────────────────────────── */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
}

.section {
  padding: var(--section-y) 0;
  position: relative;
}

.section.alt {
  background: var(--paper-2);
  /* Hairline rules separate sections; we use 1px solid w/ low opacity rather
     than dashed so the hi-fi page reads as precise/printed, not sketchy. */
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.section.dark {
  background: var(--dark);
  color: var(--dark-ink);
}

/* ── Typography utilities ─────────────────────────────────────────── */

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}

/* Display sizes use heavy negative letter-spacing. .display-xl is the
   hero scale (~120px). Each step down narrows by ~30%. */
.display-xl { font-size: clamp(72px, 9.5vw, 132px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 500; }
.display-l  { font-size: clamp(56px, 6.5vw, 88px);  line-height: 0.96; letter-spacing: -0.035em; font-weight: 500; }
.display-m  { font-size: clamp(40px, 5vw, 64px);    line-height: 1.0;  letter-spacing: -0.025em; font-weight: 500; }
.display-s  { font-size: clamp(28px, 3.4vw, 40px);  line-height: 1.05; letter-spacing: -0.02em;  font-weight: 500; }

.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 580px;
  font-weight: 400;
}

.lede.center { margin-left: auto; margin-right: auto; }

/* Italic editorial accent — used inside display headlines. .em is the
   accent color, .it is italic Newsreader for an editorial pop. */
.display-xl .em, .display-l .em, .display-m .em { color: var(--accent); }
.display-xl .it, .display-l .it, .display-m .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }

/* Monospaced inline code. */
code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--paper-3);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink-2);
}

.dark code {
  background: var(--dark-3);
  color: var(--dark-ink);
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); }

.btn-accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

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

.dark .btn-ghost { color: var(--dark-ink); border-color: rgba(235, 228, 212, 0.2); }
.dark .btn-ghost:hover { border-color: var(--dark-ink); }

/* ── Pills / chips / micro-UI ─────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  letter-spacing: 0;
}

.pill .dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--mid);
}
.pill .dot.accent { background: var(--accent); }
.pill .dot.green { background: var(--green); }
.pill .dot.blue  { background: var(--blue); }

.pill.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.accent { background: var(--accent); color: white; border-color: var(--accent); }
.pill.tint   { background: var(--accent-2); border-color: transparent; color: var(--accent); }
.pill.blue-tint  { background: var(--blue-2); border-color: transparent; color: var(--blue); }
.pill.green-tint { background: var(--green-2); border-color: transparent; color: var(--green); }
.pill.gold-tint  { background: var(--gold-2); border-color: transparent; color: var(--gold); }

/* ── Card primitives ──────────────────────────────────────────────── */

.card {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
}

.card.bordered { border-color: var(--ink); }
.card.dark { background: var(--dark-2); color: var(--dark-ink); border-color: var(--dark-3); }

/* ── Grid blueprint corner ticks ──────────────────────────────────── */
/* Tiny coordinate marks at the corners of major diagrams, to push the
   "architectural drawing" feel. Inserted via ::before/::after on the
   diagram frame. */

.coord {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
  text-transform: uppercase;
}

/* Numbered section index — appears at the corner of each major section
   for the "page of a poster" feel. */
.sec-index {
  position: absolute;
  top: 16px;
  right: var(--pad-x);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
}

.sec-index .slash {
  color: var(--accent);
  margin: 0 6px;
}

/* ── Diagram primitives ───────────────────────────────────────────── */

/* Generic diagram node — used in the stack diagram, workflow, HITL etc.
   Inset 1px border + subtle paper background. Variants tint via class. */
.node {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.node .lbl { font-family: var(--sans); font-weight: 500; font-size: 13px; }
.node .meta { color: var(--mid); font-size: 11px; }

.node.accent  { background: var(--accent-2); border-color: var(--accent); color: var(--accent); }
.node.accent .meta, .node.accent .lbl { color: var(--accent); }
.node.blue    { background: var(--blue-2); border-color: var(--blue); }
.node.blue .meta, .node.blue .lbl { color: var(--blue); }
.node.green   { background: var(--green-2); border-color: var(--green); }
.node.green .meta, .node.green .lbl { color: var(--green); }
.node.solid   { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.node.solid .meta { color: var(--faint); }
.node.dashed  { background: transparent; border-style: dashed; }

/* ── Misc ─────────────────────────────────────────────────────────── */

.hairline { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* "Annotation" — small dashed-bracket callout used to label diagram parts.
   Mimics a draftsperson's dimension annotation. */
.annot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mid);
  text-transform: uppercase;
}

.annot.accent { color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   Block 3 — features.css
     Hero, feature section, canvas, outro layout + responsive rules.
   ══════════════════════════════════════════════════════════ */
/* features.css — feature-tour landing
 *
 * Dark theme matching agent-graph.css. Reuses --sans/--mono/--serif type
 * stack and display-* sizes from stack-styles.css.
 */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────────
   * paper is the page bg. paper-2/3 are progressively lifted card tones.
   * deep is darker than paper — used for the agent puck and gateway so
   * they sit visually below the cards. */
  --paper:   #0a0910;
  --paper-2: #14111c;
  --paper-3: #1f1a2a;
  --deep:    #05040a;

  /* ── Text ─────────────────────────────────────────────────────────
   * Cool slate-cream so it reads neutral on the purple-black bg without
   * clashing with the teal-green accent. */
  --ink:     #ecebf2;
  --ink-2:   #c2c0cc;
  --mid:     #807d8c;
  --faint:   #4a4757;

  --rule:    rgba(236, 235, 242, 0.08);
  --rule-2:  rgba(236, 235, 242, 0.18);

  /* ── Primary accent — teal-green ──────────────────────────────── */
  --accent:    #10a37f;
  --accent-2:  rgba(16, 163, 127, 0.20);

  /* ── Secondary — lavender-blue ───────────────────────────────── */
  --blue:      #8888ff;
  --blue-2:    rgba(136, 136, 255, 0.18);

  /* ── Differentiation tones — mint, warm yellow, lavender.
       Repositioned away from the accent's hue so success/warning/info
       indicators inside canvases stay legible against the new primary. */
  --green:     #6ad48a;
  --green-2:   rgba(106, 212, 138, 0.16);
  --gold:      #e6b04a;
  --gold-2:    rgba(230, 176, 74, 0.18);
  --violet:    #b292d8;
  --violet-2:  rgba(178, 146, 216, 0.15);
}

html { color-scheme: dark; }
html, body, *, *::before, *::after { forced-color-adjust: none !important; }

html, body {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  margin: 0; padding: 0;
  font-family: var(--sans);
}

/* ── Scroll-snap ──────────────────────────────────────────────────
 * Snap each full-height section to the top of the viewport. We use
 * `proximity` rather than `mandatory` so the user can still pause
 * between snaps when reading mid-section content — the snap kicks in
 * only when they're already nearly aligned. Snap is applied to <html>
 * because that's the canonical scroll container in this layout. */
html {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
  scroll-behavior: smooth;
}

.fx-page {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.fx-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 72px 80px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

.fx-hero .display-l { margin: 24px 0 28px; max-width: 920px; }
.fx-hero .lede { max-width: 660px; }

.fx-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.fx-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mid);
}
.fx-stat strong { color: var(--accent); font-weight: 500; font-size: 16px; }

/* ── Feature section ──────────────────────────────────────────────── */

.fx-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 72px;
  /* Flex (not grid) so the canvas column sits at its intrinsic width and
     the text column flexes to fill whatever's left. A grid template using
     fr units would let a wide canvas-wrap overflow its track and overlap
     the adjacent text. */
  display: flex;
  align-items: center;
  gap: 72px;
  position: relative;
  border-top: 1px solid var(--rule);
  min-height: 100vh;
  scroll-snap-align: start;
}

.fx-text {
  flex: 1 1 0;
  min-width: 0;
}

.fx-canvas {
  flex: 0 0 auto;
  min-width: 0;
}

.fx-section[data-side="left"] .fx-text   { order: 2; }
.fx-section[data-side="left"] .fx-canvas { order: 1; }

/* Entrance animation — the text + canvas softly slide up + fade in when
   the section's section-num pill enters the viewport. JS sets an
   `data-entered` attribute on the section once IO fires; CSS animates
   the transition. */
.fx-section .fx-text,
.fx-section .fx-canvas {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fx-section[data-entered="true"] .fx-text,
.fx-section[data-entered="true"] .fx-canvas {
  opacity: 1;
  transform: translateY(0);
}
/* Slight stagger — text leads, canvas follows by 120ms. */
.fx-section[data-entered="true"] .fx-canvas { transition-delay: 0.12s; }

/* Side ordering handled in the .fx-section flex block above. */

.fx-section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fx-section-num::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

.fx-section-title {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 22px;
  color: var(--ink);
  max-width: 560px;
}
.fx-section-title .em { color: var(--accent); }
.fx-section-title .it { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Bulletproof .em coloring for THIS page. stack-styles.css's force-dark
   defeat block uses `span { color: var(--ink) !important }` which has
   low specificity but with !important it sometimes wins against the
   shorter `.em { color: var(--accent) !important }` rule depending on
   load order edge cases. Anchoring the selector with `.fx-page` boosts
   specificity to (0,2,0) + !important, which always wins. */
.fx-page .em,
.fx-page .it.em { color: var(--accent) !important; }

.fx-section-body {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 520px;
  margin: 0;
}
.fx-section-body code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--paper-3) !important;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent) !important;
  margin: 0 2px;
}

.fx-section-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
  max-width: 520px;
}

.fx-chip {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

/* ── Canvas surface ───────────────────────────────────────────────── */

.fx-canvas-wrap {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 360px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5);
  /* Fill the column width, capped at the inline maxWidth (canvasW + 40).
     On viewports narrower than that cap, the wrap shrinks; the canvas
     inside scales proportionally via max-width:100% + height:auto. */
  width: 100%;
}

/* The corner stripe — a subtle accent line in the upper-left of every
   canvas. Reinforces the "this is a window into the system" feel. */
.fx-canvas-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px;
  height: 3px;
  background: var(--accent);
  opacity: 0.7;
}

.fx-canvas {
  display: block;
  max-width: 100%;
  /* height:auto pairs with max-width:100% so the canvas keeps its
     intrinsic aspect ratio (canvasW:canvasH) when the column is too
     narrow to fit canvasW pixels. */
  height: auto;
}

/* ── Outro ────────────────────────────────────────────────────────── */

.fx-outro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 72px 140px;
  text-align: center;
  border-top: 1px solid var(--rule);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
}

.fx-outro .display-l { margin: 24px auto 28px; max-width: 760px; }
.fx-outro .lede { max-width: 540px; margin: 0 auto; }

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

/* ── Responsive ───────────────────────────────────────────────────── */

/* Tablet — stack text + canvas into a single column. Each section
   still fills a viewport; content centers vertically. */
@media (max-width: 1280px) {
  .fx-section {
    flex-wrap: wrap;
    gap: 40px;
    padding: 64px 48px;
  }
  .fx-text   { flex: 1 1 100%; }
  .fx-canvas { flex: 1 1 100%; display: flex; justify-content: center; }
  /* In the stacked layout the desktop "alternate sides" ordering becomes
     visual noise — half the sections put the canvas on top, half on the
     bottom, so the reader sees the canvas slip "between" text blocks as
     they scroll. Reset the order so every section reads text → canvas. */
  .fx-section[data-side="left"] .fx-text   { order: 0; }
  .fx-section[data-side="left"] .fx-canvas { order: 0; }
  .fx-hero, .fx-outro { padding-left: 48px; padding-right: 48px; }
}

/* Mobile — disable scroll-snap (jarring on touch), drop the forced
   100vh height so the user isn't stuck staring at giant blank gaps,
   tighten padding, scale section titles, shrink canvas chrome. The
   canvas itself shrinks naturally via the maxWidth + max-width:100%
   pair set up earlier. */
@media (max-width: 720px) {
  html { scroll-snap-type: none; }
  .fx-hero, .fx-section, .fx-outro {
    min-height: auto;
    padding: 56px 20px;
  }
  .fx-section { gap: 28px; }
  .fx-section-title { font-size: clamp(28px, 8vw, 36px); }
  .fx-canvas-wrap { padding: 12px; min-height: auto; border-radius: 10px; }
  .fx-section-num { font-size: 10px; }
  .fx-section-body { font-size: 15px; }
  .fx-section-chips { margin-top: 16px; }
  .fx-chip { padding: 4px 10px; font-size: 10.5px; }
  .fx-hero-meta { gap: 10px; row-gap: 12px; }
  /* Hero headline uses clamp already — but the 9.5vw clamp can blow up
     on phones in portrait. Re-cap it lower. */
  .fx-hero .display-l { font-size: clamp(36px, 9vw, 56px); }
  .fx-outro-cta { flex-direction: column; align-items: stretch; }
  .fx-outro-cta .btn { justify-content: center; }
}

/* Very narrow (<420px) — strip remaining horizontal padding so the
   canvas wrap maxes out at the viewport width. */
@media (max-width: 420px) {
  .fx-hero, .fx-section, .fx-outro { padding: 48px 16px; }
  .fx-canvas-wrap { padding: 10px; }
}

/* ════════════════════════════════════════════════════════════
   Block 4 — .em accent color override
     Hardcoded so the auto-dark cascade can't drop these spans to
     --ink. Detail in the comment above this block in the original.
   ══════════════════════════════════════════════════════════ */
    .fx-page .em,
    .fx-page .it.em,
    .fx-page h1 .em,
    .fx-page h1 .it.em,
    .fx-page h2 .em,
    .fx-page h2 .it.em,
    .fx-page .fx-stat strong { color: #10a37f !important; }
  


/* ════════════════════════════════════════════════════════════
   Block 5 — Header / Footer / Section bullets / Centered hero
     Originally injected at runtime by features-page.js when the
     page was React-driven. Moved here so the styles load with
     the rest of the sheet now that the page is static HTML.
   ══════════════════════════════════════════════════════════ */

/* ── Sticky paper-toned nav ───────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-nav.is-scrolled {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.nav-brand-text,
.footer-brand-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
}
/* Brand mark — the HasteKit SVG logo. Sized large enough that the
   internal detail (two pillars + lightning bolt) reads as a logo and
   not a single colored blob. The SVG's intrinsic colors render
   identically on the paper header and the dark footer, so no per-
   context override is needed. */
.nav-brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}
.nav-cta .btn {
  font-size: 13px;
  padding: 8px 14px;
}
.nav-cta-github {
  padding: 8px 10px !important;
  display: inline-flex;
  align-items: center;
}
.nav-icon { width: 16px; height: 16px; }

/* ── Dark blueprint footer ────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: var(--dark-ink);
  margin-top: 80px;
  border-top: 1px solid rgba(235, 228, 212, 0.08);
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px var(--pad-x) 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 72px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(235, 228, 212, 0.08);
}
.footer-brand .nav-brand { color: var(--dark-ink); }
.footer-tagline {
  margin: 18px 0 24px;
  color: var(--dark-mid);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.footer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-kicker-rule {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--accent);
  font-weight: 500;
}
.footer-col a {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--dark-ink);
  opacity: 0.75;
  text-decoration: none;
  transition: opacity .15s ease;
}
.footer-col a:hover { opacity: 1; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dark-mid);
}
.footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-meta a {
  color: var(--dark-mid);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-meta a:hover { color: var(--dark-ink); }
.footer-meta-dot { opacity: 0.5; }

/* ── Per-section docs link ────────────────────────────────── */
/* A subdued ghost-style link sits under each section's bullets when a
   docs page exists. Slightly tighter than the page-level CTAs so it
   reads as a tertiary "learn more" affordance, not a primary action. */
.fx-section-cta {
  margin-top: 24px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--mid);
  border-color: var(--rule);
  background: transparent;
  text-decoration: none;
}
.fx-section-cta:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ── Section bullets (rust dash markers) ──────────────────── */
.fx-section-bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fx-bullet {
  position: relative;
  padding-left: 26px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.fx-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 1px;
}

/* ── Centered hero ────────────────────────────────────────── */
.fx-hero {
  text-align: center;
  align-items: center;
}
.fx-hero .display-l { margin-left: auto; margin-right: auto; }
.fx-hero .lede { margin-left: auto; margin-right: auto; max-width: 960px; }
.fx-hero-meta { justify-content: center; }
.fx-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ── Chrome responsive ────────────────────────────────────── */
@media (max-width: 720px) {
  /* On mobile, --pad-x is 72px which would consume ~144px of the
     viewport and bunch the header content into the centre. Drop the
     horizontal padding to the same 16px used by .fx-hero / .fx-section
     so the brand sits flush left and the CTAs sit flush right. */
  .nav-inner {
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
    justify-content: space-between;
  }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .footer-inner { padding: 56px 16px 24px; }
  .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
  .fx-hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .fx-hero-cta .btn { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   Block 6 — Legal pages (Privacy, Terms)
     Long-form reading layout. Constrains line length, restores
     standard typographic rhythm for h2/h3/lists, and ensures the
     content sits between the header and footer regardless of the
     .fx-page flex/snap rules that the landing page uses.
   ══════════════════════════════════════════════════════════ */

.legal-page {
  scroll-snap-type: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.legal-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px var(--pad-x) 96px;
  flex: 1;
  width: 100%;
}

.legal-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 32px;
  margin-bottom: 48px;
}
.legal-header .kicker { margin-bottom: 14px; }
.legal-header .display-l {
  font-size: clamp(40px, 5vw, 64px);
  margin-bottom: 14px;
}
.legal-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.legal-content {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
.legal-content h2 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 56px 0 16px;
  color: var(--ink);
}
.legal-content h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  margin: 32px 0 12px;
  color: var(--ink);
}
.legal-content p { margin: 0 0 18px; }
.legal-content ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.legal-content li { margin-bottom: 8px; }
.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover { text-decoration: none; }
.legal-content strong { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .legal-article { padding: 56px 16px 64px; }
  .legal-content h2 { margin-top: 40px; font-size: 20px; }
}