/* ==========================================================================
   Simple Startup — Landing Page
   Sections: Split-Screen Hero · 2x2 Bento Feature Grid
   BEM · CSS Custom Properties · Dark-first with a full light token set
   ========================================================================== */

/* Registered custom properties — required to animate gradient angles / lengths */
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --sheen-x {
  syntax: "<percentage>";
  initial-value: -40%;
  inherits: false;
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — light is the default surface
   -------------------------------------------------------------------------- */

:root {
  /* ---- Surfaces ---- */
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f8fa;
  --color-elevated: rgba(9, 12, 20, 0.022);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  --color-well: #f5f7fb;
  --color-surface-solid: #ffffff;
  --color-canvas: #eef2f9;
  --color-canvas-dot: rgba(9, 12, 20, 0.13);
  --panel-sheen: rgba(255, 255, 255, 0.75);

  /* ---- Artwork palette (drives every resource thumbnail) ---- */
  --art-paper: #ffffff;
  --art-tint: #eef0ff;
  --art-line: #dfe1f5;
  --art-mute: #c3c6e8;
  --art-ink: #8a8fc0;
  --art-navy: #1a1a3e;
  --art-accent: #4f46e5;
  --art-accent-soft: #e3e4ff;
  --art-accent-pale: #a9a3ff;
  --art-deep-a: #241c7a;
  --art-deep-b: #5b52f0;
  --art-flat-a: #1e1b5c;
  --art-flat-b: #3b32b8;
  --art-cover-a: #eef0fe;
  --art-cover-b: #e0e0fa;
  --art-cover-ink: #1a1a3e;
  --art-cover-card: #ffffff;
  --art-cover-sub: #8a8fc0;
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(9, 12, 20, 0.045),
    inset 0 12px 22px -16px rgba(9, 12, 20, 0.4);

  /* ---- Text ---- */
  --color-fg: #0b0d12;
  --color-fg-display-soft: #414855;
  --color-fg-secondary: #4d5461;
  --color-fg-muted: #6f7684;
  --color-fg-subtle: #9aa1ad;
  --color-fg-inverse: #ffffff;

  /* ---- Borders ---- */
  --color-border: rgba(9, 12, 20, 0.08);
  --color-border-strong: rgba(9, 12, 20, 0.15);
  --color-border-accent: rgba(79, 70, 229, 0.34);
  --color-hairline: rgba(9, 12, 20, 0.055);

  /* ---- Accent ---- */
  --color-accent: #4f46e5;
  --color-accent-bright: #6c63f5;
  --color-accent-solid: #4f46e5;
  --color-accent-solid-hover: #4038c7;
  --color-accent-subtle: rgba(79, 70, 229, 0.08);
  --color-accent-fg: #ffffff;

  /* ---- Semantic ---- */
  --color-success: #0f9d63;
  --color-success-subtle: rgba(15, 157, 99, 0.1);

  /* ---- Effects ---- */
  --color-spotlight: rgba(79, 70, 229, 0.06);
  --color-glow: rgba(79, 70, 229, 0.14);
  --color-glow-warm: rgba(108, 99, 245, 0.1);

  /* ---- Hero atmosphere ---- */
  --aurora-1: rgba(79, 70, 229, 0.17);
  --aurora-2: rgba(129, 140, 248, 0.15);
  --aurora-3: rgba(255, 212, 186, 0.20);
  --aurora-4: rgba(167, 139, 250, 0.12);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #fbfbff 46%, #f6f6fe 100%);
  --horizon: rgba(79, 70, 229, 0.28);
  --hero-grain: 0.03;
  --contour: rgba(79, 70, 229, 0.13);
  --contour-2: rgba(79, 70, 229, 0.07);
  --bg-page: rgba(79, 70, 229, 0.035);
  --bg-mark: rgba(79, 70, 229, 0.30);
  --color-top-highlight: rgba(255, 255, 255, 0.9);
  --grain-opacity: 0.022;
  --grain-blend: multiply;

  /* ---- Type ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-display: clamp(2.5rem, 5.4vw, 4.5rem);
  --font-size-h2: clamp(2rem, 3.6vw, 3rem);
  --font-size-h3: 1.25rem;   /* card titles */
  --font-size-h4: 1.0625rem; /* compact list titles — was three accidental sizes */
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-2xs: 0.6875rem;

  --tracking-display: -0.02em;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.02em;
  --tracking-widest: 0.09em;
  --leading-display: 1.1;
  --leading-heading: 1.25;
  --leading-body: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Spacing ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(7.5rem, 11vw, 10.5rem);

  /* Section rhythm. Every gap used to be an identical 317px, so nothing grouped
     and nothing felt more important than anything else. Three sizes, assigned by
     meaning. Design audit 2026-07-25, item 3. */
  --pad-tight: clamp(3rem, 4.5vw, 4rem);
  --pad-std:   clamp(4.5rem, 6.5vw, 6rem);
  --pad-wide:  clamp(6rem, 9vw, 8.5rem);

  /* ---- Layout ---- */
  /* Six two-column sections used to carry six different splits (49/51, 43/57,
     52/48, 45/55, 40/60, 34/66) — each tuned by eye, none sharing a structure.
     Everything now snaps to a 12-column grid. Design audit 2026-07-25, item 1. */
  --grid-5-7: minmax(0, 5fr) minmax(0, 7fr);
  --grid-6-6: minmax(0, 1fr) minmax(0, 1fr);
  --grid-7-5: minmax(0, 7fr) minmax(0, 5fr);
  --grid-gutter: clamp(3rem, 5vw, 4.5rem);

  --container-max: 1200px;
  --container-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-inset-top: inset 0 1px 0 0 var(--color-top-highlight);
  --shadow-sm:
    0 1px 1px rgba(9, 12, 20, 0.035),
    0 2px 6px -2px rgba(9, 12, 20, 0.05),
    0 6px 14px -6px rgba(9, 12, 20, 0.05);
  --shadow-md:
    0 1px 1px rgba(9, 12, 20, 0.035),
    0 6px 14px -5px rgba(9, 12, 20, 0.06),
    0 16px 30px -10px rgba(9, 12, 20, 0.08),
    0 28px 52px -18px rgba(9, 12, 20, 0.08);
  --shadow-lg:
    0 1px 1px rgba(9, 12, 20, 0.04),
    0 8px 18px -6px rgba(9, 12, 20, 0.06),
    0 24px 44px -14px rgba(9, 12, 20, 0.09),
    0 48px 84px -24px rgba(9, 12, 20, 0.11),
    0 80px 140px -40px rgba(9, 12, 20, 0.1);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(79, 70, 229, 0.28),
    0 6px 14px -4px rgba(79, 70, 229, 0.32),
    0 14px 30px -10px rgba(79, 70, 229, 0.3);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
}

/* --------------------------------------------------------------------------
   2. DARK THEME — <html data-theme="dark">
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  /* Deep indigo with real range between layers — depth, not a wash */
  --color-bg: #0a0920;
  --color-bg-subtle: #100e2e;
  --color-elevated: rgba(160, 152, 255, 0.05);
  --color-card: linear-gradient(180deg, rgba(160, 152, 255, 0.09) 0%, rgba(160, 152, 255, 0.025) 100%);
  --color-well: rgba(160, 152, 255, 0.045);
  --color-surface-solid: #17153c;
  --color-canvas: #07061a;
  --panel-sheen: rgba(160, 152, 255, 0.075);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(160, 152, 255, 0.08),
    inset 0 14px 28px -16px rgba(2, 1, 14, 0.95);

  --color-fg: #f0eeff;
  --color-fg-display-soft: #b3adea;
  --color-fg-secondary: #b6b1e6;
  --color-fg-muted: #8d88c4;
  --color-fg-subtle: #625da0;
  --color-fg-inverse: #0a0920;

  --color-border: rgba(160, 152, 255, 0.15);
  --color-border-strong: rgba(160, 152, 255, 0.28);
  --color-border-accent: rgba(167, 159, 255, 0.48);
  --color-hairline: rgba(160, 152, 255, 0.09);

  --color-accent: #a79fff;
  --color-accent-bright: #c7c2ff;
  --color-accent-solid: #6155f5;
  --color-accent-solid-hover: #7568ff;
  --color-accent-subtle: rgba(167, 159, 255, 0.15);

  --color-success: #45e0a8;
  --color-success-subtle: rgba(69, 224, 168, 0.15);

  --color-spotlight: rgba(160, 152, 255, 0.09);
  --color-glow: rgba(97, 85, 245, 0.42);
  --color-glow-warm: rgba(167, 159, 255, 0.22);

  --aurora-1: rgba(97, 85, 245, 0.46);
  --aurora-2: rgba(139, 92, 246, 0.3);
  --aurora-3: rgba(255, 158, 130, 0.09);
  --aurora-4: rgba(46, 38, 150, 0.42);
  --hero-wash: linear-gradient(180deg, #100e2e 0%, #0c0b25 54%, #0a0920 100%);
  --horizon: rgba(167, 159, 255, 0.5);
  --hero-grain: 0.055;
  --contour: rgba(167, 159, 255, 0.16);
  --contour-2: rgba(199, 194, 255, 0.09);
  --bg-page: rgba(167, 159, 255, 0.055);
  --bg-mark: rgba(167, 159, 255, 0.42);

  --art-paper: #17153c;
  --art-tint: #241f5e;
  --art-line: #35306f;
  --art-mute: #4e4894;
  --art-ink: #a6a1d8;
  --art-navy: #f0eeff;
  --art-accent: #a79fff;
  --art-accent-soft: rgba(167, 159, 255, 0.26);
  --art-accent-pale: #a9a3ff;
  --art-deep-a: #241c7a;
  --art-deep-b: #5b52f0;
  --art-flat-a: #1e1b5c;
  --art-flat-b: #3b32b8;
  --art-cover-a: #26215f;
  --art-cover-b: #1a1745;
  --art-cover-ink: #f0eeff;
  --art-cover-card: rgba(255, 255, 255, 0.07);
  --art-cover-sub: #a6a1d8;

  --color-top-highlight: rgba(255, 255, 255, 0.07);
  --grain-opacity: 0.03;
  --grain-blend: overlay;

  --shadow-sm:
    0 1px 2px rgba(2, 1, 14, 0.55),
    0 4px 10px -3px rgba(2, 1, 14, 0.5);
  --shadow-md:
    0 1px 2px rgba(2, 1, 14, 0.55),
    0 10px 20px -6px rgba(2, 1, 14, 0.55),
    0 24px 44px -14px rgba(2, 1, 14, 0.6);
  --shadow-lg:
    0 1px 2px rgba(2, 1, 14, 0.55),
    0 12px 24px -8px rgba(2, 1, 14, 0.55),
    0 32px 60px -18px rgba(2, 1, 14, 0.65),
    0 64px 120px -32px rgba(2, 1, 14, 0.7);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(2, 1, 14, 0.5),
    0 8px 24px -8px rgba(97, 85, 245, 0.8);
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */

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

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








/* ============================================================
   DARK PALETTE OPTIONS
   [data-dark] on <html>, layered over [data-theme="dark"].
   ============================================================ */

/* ---- slate: Neutral graphite. The chrome goes quiet so the indigo is the only colour on the page. ---- */
[data-theme="dark"][data-dark="slate"] {
  --color-bg: #0e1015;
  --color-bg-subtle: #14161d;
  --color-surface-solid: #1a1d26;
  --color-canvas: #08090c;
  --color-elevated: rgba(148, 158, 180, 0.05);
  --color-card: linear-gradient(180deg, rgba(148, 158, 180, 0.09) 0%, rgba(148, 158, 180, 0.025) 100%);
  --color-well: rgba(148, 158, 180, 0.045);
  --panel-sheen: rgba(148, 158, 180, 0.075);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(148, 158, 180, 0.08),
    inset 0 14px 28px -16px rgba(3, 4, 8, 0.95);

  --color-fg: #eef0f5;
  --color-fg-display-soft: #a9afbe;
  --color-fg-secondary: #b4bac8;
  --color-fg-muted: #878da0;
  --color-fg-subtle: #5c6274;
  --color-fg-inverse: #0e1015;

  --color-border: rgba(148, 158, 180, 0.15);
  --color-border-strong: rgba(148, 158, 180, 0.28);
  --color-border-accent: rgba(97, 85, 245, 0.55);
  --color-hairline: rgba(148, 158, 180, 0.09);

  --color-accent: #8b83ff;
  --color-accent-bright: #b7b1ff;
  --color-accent-solid: #6155f5;
  --color-accent-solid-hover: #7568ff;
  --color-accent-subtle: rgba(97, 85, 245, 0.18);

  --color-success: #3ddc97;
  --color-success-subtle: rgba(61, 220, 151, 0.15);

  --color-spotlight: rgba(148, 158, 180, 0.09);
  --color-glow: rgba(97, 85, 245, 0.26);
  --color-glow-warm: rgba(148, 158, 180, 0.20);

  --aurora-1: rgba(97, 85, 245, 0.20);
  --aurora-2: rgba(148, 158, 180, 0.07);
  --aurora-3: rgba(148, 163, 184, 0.04);
  --aurora-4: rgba(22, 25, 34, 0.6);
  --hero-wash: linear-gradient(180deg, #14161d 0%, #0e1015 58%, #0e1015 100%);
  --horizon: rgba(139, 131, 255, 0.42);

  --contour: rgba(148, 158, 180, 0.16);
  --contour-2: rgba(148, 158, 180, 0.09);
  --bg-page: rgba(148, 158, 180, 0.055);
  --bg-mark: rgba(148, 158, 180, 0.42);

  --art-paper: #1a1d26;
  --art-tint: #242833;
  --art-line: #333845;
  --art-mute: #4c5364;
  --art-ink: #9ba2b4;
  --art-navy: #eef0f5;
  --art-accent: #8b83ff;
  --art-accent-pale: #b7b1ff;
  --art-deep-a: #6155f5;
  --art-deep-b: #b7b1ff;
  --art-flat-a: #6155f5;
  --art-flat-b: #b7b1ff;
  --art-accent-soft: rgba(97, 85, 245, 0.30);
  --art-cover-a: #242a38;
  --art-cover-b: #171a24;
  --art-cover-ink: #eef0f5;
  --art-cover-card: rgba(255, 255, 255, 0.07);
  --art-cover-sub: #9ba2b4;

  --shadow-sm:
    0 1px 2px rgba(3, 4, 8, 0.55),
    0 4px 10px -3px rgba(3, 4, 8, 0.5);
  --shadow-md:
    0 1px 2px rgba(3, 4, 8, 0.55),
    0 10px 20px -6px rgba(3, 4, 8, 0.55),
    0 24px 44px -14px rgba(3, 4, 8, 0.6);
  --shadow-lg:
    0 1px 2px rgba(3, 4, 8, 0.55),
    0 12px 24px -8px rgba(3, 4, 8, 0.55),
    0 32px 60px -18px rgba(3, 4, 8, 0.65),
    0 64px 120px -32px rgba(3, 4, 8, 0.7);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(3, 4, 8, 0.5),
    0 8px 24px -8px rgba(97, 85, 245, 0.8);
}


/* ---- ink: Deep navy. Blueprint at night — colder, bluer, and it lets the indigo read as light rather than paint. ---- */
[data-theme="dark"][data-dark="ink"] {
  --color-bg: #081026;
  --color-bg-subtle: #0c1733;
  --color-surface-solid: #12203f;
  --color-canvas: #050a18;
  --color-elevated: rgba(130, 160, 245, 0.05);
  --color-card: linear-gradient(180deg, rgba(130, 160, 245, 0.09) 0%, rgba(130, 160, 245, 0.025) 100%);
  --color-well: rgba(130, 160, 245, 0.045);
  --panel-sheen: rgba(130, 160, 245, 0.075);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(130, 160, 245, 0.08),
    inset 0 14px 28px -16px rgba(1, 5, 18, 0.95);

  --color-fg: #eaf0ff;
  --color-fg-display-soft: #9aacd8;
  --color-fg-secondary: #adbfe6;
  --color-fg-muted: #8296c0;
  --color-fg-subtle: #566a97;
  --color-fg-inverse: #081026;

  --color-border: rgba(130, 160, 245, 0.15);
  --color-border-strong: rgba(130, 160, 245, 0.28);
  --color-border-accent: rgba(81, 69, 240, 0.55);
  --color-hairline: rgba(130, 160, 245, 0.09);

  --color-accent: #9d9dff;
  --color-accent-bright: #c6c6ff;
  --color-accent-solid: #5145f0;
  --color-accent-solid-hover: #6357ff;
  --color-accent-subtle: rgba(81, 69, 240, 0.18);

  --color-success: #38dbb0;
  --color-success-subtle: rgba(56, 219, 176, 0.15);

  --color-spotlight: rgba(130, 160, 245, 0.09);
  --color-glow: rgba(81, 69, 240, 0.46);
  --color-glow-warm: rgba(130, 160, 245, 0.20);

  --aurora-1: rgba(59, 90, 246, 0.42);
  --aurora-2: rgba(97, 85, 245, 0.26);
  --aurora-3: rgba(56, 219, 176, 0.07);
  --aurora-4: rgba(10, 26, 68, 0.55);
  --hero-wash: linear-gradient(180deg, #0c1733 0%, #081026 58%, #081026 100%);
  --horizon: rgba(157, 157, 255, 0.5);

  --contour: rgba(130, 160, 245, 0.16);
  --contour-2: rgba(130, 160, 245, 0.09);
  --bg-page: rgba(130, 160, 245, 0.055);
  --bg-mark: rgba(130, 160, 245, 0.42);

  --art-paper: #12203f;
  --art-tint: #1b2d55;
  --art-line: #2a3f6e;
  --art-mute: #425c92;
  --art-ink: #9db0d8;
  --art-navy: #eaf0ff;
  --art-accent: #9d9dff;
  --art-accent-pale: #c6c6ff;
  --art-deep-a: #5145f0;
  --art-deep-b: #c6c6ff;
  --art-flat-a: #5145f0;
  --art-flat-b: #c6c6ff;
  --art-accent-soft: rgba(81, 69, 240, 0.30);
  --art-cover-a: #1e3160;
  --art-cover-b: #132342;
  --art-cover-ink: #eaf0ff;
  --art-cover-card: rgba(255, 255, 255, 0.07);
  --art-cover-sub: #9db0d8;

  --shadow-sm:
    0 1px 2px rgba(1, 5, 18, 0.55),
    0 4px 10px -3px rgba(1, 5, 18, 0.5);
  --shadow-md:
    0 1px 2px rgba(1, 5, 18, 0.55),
    0 10px 20px -6px rgba(1, 5, 18, 0.55),
    0 24px 44px -14px rgba(1, 5, 18, 0.6);
  --shadow-lg:
    0 1px 2px rgba(1, 5, 18, 0.55),
    0 12px 24px -8px rgba(1, 5, 18, 0.55),
    0 32px 60px -18px rgba(1, 5, 18, 0.65),
    0 64px 120px -32px rgba(1, 5, 18, 0.7);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(1, 5, 18, 0.5),
    0 8px 24px -8px rgba(81, 69, 240, 0.8);
}


/* ---- obsidian: Near-black. Maximum contrast, editorial weight, and the accent hits like a light source. ---- */
[data-theme="dark"][data-dark="obsidian"] {
  --color-bg: #0a0a0d;
  --color-bg-subtle: #101014;
  --color-surface-solid: #17171e;
  --color-canvas: #050506;
  --color-elevated: rgba(170, 168, 195, 0.05);
  --color-card: linear-gradient(180deg, rgba(170, 168, 195, 0.09) 0%, rgba(170, 168, 195, 0.025) 100%);
  --color-well: rgba(170, 168, 195, 0.045);
  --panel-sheen: rgba(170, 168, 195, 0.075);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(170, 168, 195, 0.08),
    inset 0 14px 28px -16px rgba(0, 0, 0, 0.95);

  --color-fg: #f5f5f8;
  --color-fg-display-soft: #a4a4b2;
  --color-fg-secondary: #b8b8c6;
  --color-fg-muted: #8a8a99;
  --color-fg-subtle: #5e5e6c;
  --color-fg-inverse: #0a0a0d;

  --color-border: rgba(170, 168, 195, 0.15);
  --color-border-strong: rgba(170, 168, 195, 0.28);
  --color-border-accent: rgba(109, 92, 255, 0.55);
  --color-hairline: rgba(170, 168, 195, 0.09);

  --color-accent: #a89bff;
  --color-accent-bright: #d0c8ff;
  --color-accent-solid: #6d5cff;
  --color-accent-solid-hover: #7f70ff;
  --color-accent-subtle: rgba(109, 92, 255, 0.18);

  --color-success: #4ae5a5;
  --color-success-subtle: rgba(74, 229, 165, 0.15);

  --color-spotlight: rgba(170, 168, 195, 0.09);
  --color-glow: rgba(109, 92, 255, 0.40);
  --color-glow-warm: rgba(170, 168, 195, 0.20);

  --aurora-1: rgba(109, 92, 255, 0.36);
  --aurora-2: rgba(160, 90, 255, 0.16);
  --aurora-3: rgba(255, 255, 255, 0.03);
  --aurora-4: rgba(18, 16, 34, 0.5);
  --hero-wash: linear-gradient(180deg, #101014 0%, #0a0a0d 58%, #0a0a0d 100%);
  --horizon: rgba(168, 155, 255, 0.55);

  --contour: rgba(170, 168, 195, 0.16);
  --contour-2: rgba(170, 168, 195, 0.09);
  --bg-page: rgba(170, 168, 195, 0.055);
  --bg-mark: rgba(170, 168, 195, 0.42);

  --art-paper: #17171e;
  --art-tint: #221f2f;
  --art-line: #312e42;
  --art-mute: #48445e;
  --art-ink: #9d99ae;
  --art-navy: #f5f5f8;
  --art-accent: #a89bff;
  --art-accent-pale: #d0c8ff;
  --art-deep-a: #6d5cff;
  --art-deep-b: #d0c8ff;
  --art-flat-a: #6d5cff;
  --art-flat-b: #d0c8ff;
  --art-accent-soft: rgba(109, 92, 255, 0.30);
  --art-cover-a: #241f3a;
  --art-cover-b: #161426;
  --art-cover-ink: #f5f5f8;
  --art-cover-card: rgba(255, 255, 255, 0.07);
  --art-cover-sub: #9d99ae;

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 4px 10px -3px rgba(0, 0, 0, 0.5);
  --shadow-md:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 10px 20px -6px rgba(0, 0, 0, 0.55),
    0 24px 44px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 12px 24px -8px rgba(0, 0, 0, 0.55),
    0 32px 60px -18px rgba(0, 0, 0, 0.65),
    0 64px 120px -32px rgba(0, 0, 0, 0.7);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 24px -8px rgba(109, 92, 255, 0.8);
}


/* ---- tide: Navy with a cyan undertow. Two hues instead of one, so the atmosphere has range without going purple. ---- */
[data-theme="dark"][data-dark="tide"] {
  --color-bg: #071726;
  --color-bg-subtle: #0b2033;
  --color-surface-solid: #102b41;
  --color-canvas: #04101c;
  --color-elevated: rgba(120, 185, 220, 0.05);
  --color-card: linear-gradient(180deg, rgba(120, 185, 220, 0.09) 0%, rgba(120, 185, 220, 0.025) 100%);
  --color-well: rgba(120, 185, 220, 0.045);
  --panel-sheen: rgba(120, 185, 220, 0.075);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(120, 185, 220, 0.08),
    inset 0 14px 28px -16px rgba(1, 10, 20, 0.95);

  --color-fg: #e9f4fb;
  --color-fg-display-soft: #95b6c9;
  --color-fg-secondary: #a9c9da;
  --color-fg-muted: #7fa0b4;
  --color-fg-subtle: #547287;
  --color-fg-inverse: #071726;

  --color-border: rgba(120, 185, 220, 0.15);
  --color-border-strong: rgba(120, 185, 220, 0.28);
  --color-border-accent: rgba(91, 87, 242, 0.55);
  --color-hairline: rgba(120, 185, 220, 0.09);

  --color-accent: #96a6ff;
  --color-accent-bright: #c3ccff;
  --color-accent-solid: #5b57f2;
  --color-accent-solid-hover: #6d69ff;
  --color-accent-subtle: rgba(91, 87, 242, 0.18);

  --color-success: #35dfc4;
  --color-success-subtle: rgba(53, 223, 196, 0.15);

  --color-spotlight: rgba(120, 185, 220, 0.09);
  --color-glow: rgba(91, 87, 242, 0.38);
  --color-glow-warm: rgba(120, 185, 220, 0.20);

  --aurora-1: rgba(56, 189, 248, 0.26);
  --aurora-2: rgba(91, 87, 242, 0.36);
  --aurora-3: rgba(45, 212, 191, 0.10);
  --aurora-4: rgba(5, 32, 56, 0.55);
  --hero-wash: linear-gradient(180deg, #0b2033 0%, #071726 58%, #071726 100%);
  --horizon: rgba(103, 214, 240, 0.46);

  --contour: rgba(120, 185, 220, 0.16);
  --contour-2: rgba(120, 185, 220, 0.09);
  --bg-page: rgba(120, 185, 220, 0.055);
  --bg-mark: rgba(120, 185, 220, 0.42);

  --art-paper: #102b41;
  --art-tint: #173b58;
  --art-line: #22506f;
  --art-mute: #37708f;
  --art-ink: #8fb6cc;
  --art-navy: #e9f4fb;
  --art-accent: #96a6ff;
  --art-accent-pale: #c3ccff;
  --art-deep-a: #5b57f2;
  --art-deep-b: #c3ccff;
  --art-flat-a: #5b57f2;
  --art-flat-b: #c3ccff;
  --art-accent-soft: rgba(91, 87, 242, 0.30);
  --art-cover-a: #153b57;
  --art-cover-b: #0d2739;
  --art-cover-ink: #e9f4fb;
  --art-cover-card: rgba(255, 255, 255, 0.07);
  --art-cover-sub: #8fb6cc;

  --shadow-sm:
    0 1px 2px rgba(1, 10, 20, 0.55),
    0 4px 10px -3px rgba(1, 10, 20, 0.5);
  --shadow-md:
    0 1px 2px rgba(1, 10, 20, 0.55),
    0 10px 20px -6px rgba(1, 10, 20, 0.55),
    0 24px 44px -14px rgba(1, 10, 20, 0.6);
  --shadow-lg:
    0 1px 2px rgba(1, 10, 20, 0.55),
    0 12px 24px -8px rgba(1, 10, 20, 0.55),
    0 32px 60px -18px rgba(1, 10, 20, 0.65),
    0 64px 120px -32px rgba(1, 10, 20, 0.7);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(1, 10, 20, 0.5),
    0 8px 24px -8px rgba(91, 87, 242, 0.8);
}


/* ---- void: True black. No atmosphere at all - just black, hairlines, and the accent. ---- */
[data-theme="dark"][data-dark="void"] {
  --color-bg: #000000;
  --color-bg-subtle: #060607;
  --color-surface-solid: #0c0c0e;
  --color-canvas: #000000;
  --color-elevated: rgba(152, 152, 164, 0.05);
  --color-card: linear-gradient(180deg, rgba(152, 152, 164, 0.09) 0%, rgba(152, 152, 164, 0.025) 100%);
  --color-well: rgba(152, 152, 164, 0.045);
  --panel-sheen: rgba(152, 152, 164, 0.075);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(152, 152, 164, 0.08),
    inset 0 14px 28px -16px rgba(0, 0, 0, 0.95);

  --color-fg: #fafafa;
  --color-fg-display-soft: #96969f;
  --color-fg-secondary: #b0b0b9;
  --color-fg-muted: #85858f;
  --color-fg-subtle: #56565f;
  --color-fg-inverse: #000000;

  --color-border: rgba(152, 152, 164, 0.15);
  --color-border-strong: rgba(152, 152, 164, 0.28);
  --color-border-accent: rgba(109, 92, 255, 0.55);
  --color-hairline: rgba(152, 152, 164, 0.09);

  --color-accent: #9c8fff;
  --color-accent-bright: #cac1ff;
  --color-accent-solid: #6d5cff;
  --color-accent-solid-hover: #7e6eff;
  --color-accent-subtle: rgba(109, 92, 255, 0.18);

  --color-success: #3ee39f;
  --color-success-subtle: rgba(62, 227, 159, 0.15);

  --color-spotlight: rgba(152, 152, 164, 0.09);
  --color-glow: rgba(109, 92, 255, 0.20);
  --color-glow-warm: rgba(152, 152, 164, 0.20);

  --aurora-1: rgba(109, 92, 255, 0.14);
  --aurora-2: rgba(152, 152, 164, 0.03);
  --aurora-3: rgba(255, 255, 255, 0.015);
  --aurora-4: rgba(0, 0, 0, 0.9);
  --hero-wash: linear-gradient(180deg, #060607 0%, #000000 58%, #000000 100%);
  --horizon: rgba(156, 143, 255, 0.42);

  --contour: rgba(152, 152, 164, 0.16);
  --contour-2: rgba(152, 152, 164, 0.09);
  --bg-page: rgba(152, 152, 164, 0.055);
  --bg-mark: rgba(152, 152, 164, 0.42);

  --art-paper: #0c0c0e;
  --art-tint: #151518;
  --art-line: #212126;
  --art-mute: #38383f;
  --art-ink: #8f8f99;
  --art-navy: #fafafa;
  --art-accent: #9c8fff;
  --art-accent-pale: #cac1ff;
  --art-deep-a: #6d5cff;
  --art-deep-b: #cac1ff;
  --art-flat-a: #6d5cff;
  --art-flat-b: #cac1ff;
  --art-accent-soft: rgba(109, 92, 255, 0.30);
  --art-cover-a: #17171c;
  --art-cover-b: #0b0b0e;
  --art-cover-ink: #fafafa;
  --art-cover-card: rgba(255, 255, 255, 0.07);
  --art-cover-sub: #8f8f99;

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 4px 10px -3px rgba(0, 0, 0, 0.5);
  --shadow-md:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 10px 20px -6px rgba(0, 0, 0, 0.55),
    0 24px 44px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 12px 24px -8px rgba(0, 0, 0, 0.55),
    0 32px 60px -18px rgba(0, 0, 0, 0.65),
    0 64px 120px -32px rgba(0, 0, 0, 0.7);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 24px -8px rgba(109, 92, 255, 0.8);
}


/* ---- midnight: Black with a blue heart. One contained bloom behind the panel, everything else falls away. ---- */
[data-theme="dark"][data-dark="midnight"] {
  --color-bg: #02050e;
  --color-bg-subtle: #050a1a;
  --color-surface-solid: #0a1128;
  --color-canvas: #01030a;
  --color-elevated: rgba(118, 150, 232, 0.05);
  --color-card: linear-gradient(180deg, rgba(118, 150, 232, 0.09) 0%, rgba(118, 150, 232, 0.025) 100%);
  --color-well: rgba(118, 150, 232, 0.045);
  --panel-sheen: rgba(118, 150, 232, 0.075);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(118, 150, 232, 0.08),
    inset 0 14px 28px -16px rgba(0, 2, 10, 0.95);

  --color-fg: #e8eefc;
  --color-fg-display-soft: #8b9cc4;
  --color-fg-secondary: #a3b4d6;
  --color-fg-muted: #7688ad;
  --color-fg-subtle: #4c5c80;
  --color-fg-inverse: #02050e;

  --color-border: rgba(118, 150, 232, 0.15);
  --color-border-strong: rgba(118, 150, 232, 0.28);
  --color-border-accent: rgba(75, 65, 232, 0.55);
  --color-hairline: rgba(118, 150, 232, 0.09);

  --color-accent: #8f9dff;
  --color-accent-bright: #bcc4ff;
  --color-accent-solid: #4b41e8;
  --color-accent-solid-hover: #5c52ff;
  --color-accent-subtle: rgba(75, 65, 232, 0.18);

  --color-success: #32d9ad;
  --color-success-subtle: rgba(50, 217, 173, 0.15);

  --color-spotlight: rgba(118, 150, 232, 0.09);
  --color-glow: rgba(75, 65, 232, 0.44);
  --color-glow-warm: rgba(118, 150, 232, 0.20);

  --aurora-1: rgba(53, 78, 230, 0.34);
  --aurora-2: rgba(97, 85, 245, 0.16);
  --aurora-3: rgba(50, 217, 173, 0.045);
  --aurora-4: rgba(1, 5, 20, 0.75);
  --hero-wash: linear-gradient(180deg, #050a1a 0%, #02050e 58%, #02050e 100%);
  --horizon: rgba(143, 157, 255, 0.5);

  --contour: rgba(118, 150, 232, 0.16);
  --contour-2: rgba(118, 150, 232, 0.09);
  --bg-page: rgba(118, 150, 232, 0.055);
  --bg-mark: rgba(118, 150, 232, 0.42);

  --art-paper: #0a1128;
  --art-tint: #101b3c;
  --art-line: #1a2a55;
  --art-mute: #2c4076;
  --art-ink: #8298c4;
  --art-navy: #e8eefc;
  --art-accent: #8f9dff;
  --art-accent-pale: #bcc4ff;
  --art-deep-a: #4b41e8;
  --art-deep-b: #bcc4ff;
  --art-flat-a: #4b41e8;
  --art-flat-b: #bcc4ff;
  --art-accent-soft: rgba(75, 65, 232, 0.30);
  --art-cover-a: #122250;
  --art-cover-b: #0a1228;
  --art-cover-ink: #e8eefc;
  --art-cover-card: rgba(255, 255, 255, 0.07);
  --art-cover-sub: #8298c4;

  --shadow-sm:
    0 1px 2px rgba(0, 2, 10, 0.55),
    0 4px 10px -3px rgba(0, 2, 10, 0.5);
  --shadow-md:
    0 1px 2px rgba(0, 2, 10, 0.55),
    0 10px 20px -6px rgba(0, 2, 10, 0.55),
    0 24px 44px -14px rgba(0, 2, 10, 0.6);
  --shadow-lg:
    0 1px 2px rgba(0, 2, 10, 0.55),
    0 12px 24px -8px rgba(0, 2, 10, 0.55),
    0 32px 60px -18px rgba(0, 2, 10, 0.65),
    0 64px 120px -32px rgba(0, 2, 10, 0.7);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(0, 2, 10, 0.5),
    0 8px 24px -8px rgba(75, 65, 232, 0.8);
}


/* ---- onyx: Neutral black, editorial. Pure white type, crisp edges, the accent used sparingly. ---- */
[data-theme="dark"][data-dark="onyx"] {
  --color-bg: #08080a;
  --color-bg-subtle: #0d0d10;
  --color-surface-solid: #131317;
  --color-canvas: #050505;
  --color-elevated: rgba(170, 168, 182, 0.05);
  --color-card: linear-gradient(180deg, rgba(170, 168, 182, 0.09) 0%, rgba(170, 168, 182, 0.025) 100%);
  --color-well: rgba(170, 168, 182, 0.045);
  --panel-sheen: rgba(170, 168, 182, 0.075);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(170, 168, 182, 0.08),
    inset 0 14px 28px -16px rgba(0, 0, 0, 0.95);

  --color-fg: #ffffff;
  --color-fg-display-soft: #a2a2ac;
  --color-fg-secondary: #bcbcc4;
  --color-fg-muted: #8e8e96;
  --color-fg-subtle: #5f5f68;
  --color-fg-inverse: #08080a;

  --color-border: rgba(170, 168, 182, 0.15);
  --color-border-strong: rgba(170, 168, 182, 0.28);
  --color-border-accent: rgba(116, 97, 255, 0.55);
  --color-hairline: rgba(170, 168, 182, 0.09);

  --color-accent: #a99cff;
  --color-accent-bright: #d4ccff;
  --color-accent-solid: #7461ff;
  --color-accent-solid-hover: #8674ff;
  --color-accent-subtle: rgba(116, 97, 255, 0.18);

  --color-success: #48e6a3;
  --color-success-subtle: rgba(72, 230, 163, 0.15);

  --color-spotlight: rgba(170, 168, 182, 0.09);
  --color-glow: rgba(116, 97, 255, 0.30);
  --color-glow-warm: rgba(170, 168, 182, 0.20);

  --aurora-1: rgba(116, 97, 255, 0.22);
  --aurora-2: rgba(170, 168, 182, 0.05);
  --aurora-3: rgba(255, 255, 255, 0.02);
  --aurora-4: rgba(9, 9, 13, 0.7);
  --hero-wash: linear-gradient(180deg, #0d0d10 0%, #08080a 58%, #08080a 100%);
  --horizon: rgba(169, 156, 255, 0.5);

  --contour: rgba(170, 168, 182, 0.16);
  --contour-2: rgba(170, 168, 182, 0.09);
  --bg-page: rgba(170, 168, 182, 0.055);
  --bg-mark: rgba(170, 168, 182, 0.42);

  --art-paper: #131317;
  --art-tint: #1c1c22;
  --art-line: #2a2a32;
  --art-mute: #414149;
  --art-ink: #9797a1;
  --art-navy: #ffffff;
  --art-accent: #a99cff;
  --art-accent-pale: #d4ccff;
  --art-deep-a: #7461ff;
  --art-deep-b: #d4ccff;
  --art-flat-a: #7461ff;
  --art-flat-b: #d4ccff;
  --art-accent-soft: rgba(116, 97, 255, 0.30);
  --art-cover-a: #1d1d25;
  --art-cover-b: #101015;
  --art-cover-ink: #ffffff;
  --art-cover-card: rgba(255, 255, 255, 0.07);
  --art-cover-sub: #9797a1;

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 4px 10px -3px rgba(0, 0, 0, 0.5);
  --shadow-md:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 10px 20px -6px rgba(0, 0, 0, 0.55),
    0 24px 44px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 12px 24px -8px rgba(0, 0, 0, 0.55),
    0 32px 60px -18px rgba(0, 0, 0, 0.65),
    0 64px 120px -32px rgba(0, 0, 0, 0.7);
  --shadow-accent:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 24px -8px rgba(116, 97, 255, 0.8);
}




/* ============================================================
   LIGHT PALETTE OPTIONS
   [data-light] on <html>, only while the dark theme is off.
   ============================================================ */

/* ---- paper: Warm off-white. The page reads like paper, which is what the product is. ---- */
html[data-light="paper"]:not([data-theme="dark"]) {
  --color-fg-meta: #63594b;
  --color-bg: #fbf9f6;
  --color-bg-subtle: #f3efe7;
  --color-surface-solid: #ffffff;
  --color-canvas: #f4efe6;
  --color-well: #f3efe7;
  --color-elevated: rgba(42, 34, 22, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  --color-canvas-dot: rgba(42, 34, 22, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(42, 34, 22, 0.05),
    inset 0 12px 22px -16px rgba(42, 34, 22, 0.4);

  --color-fg: #17140f;
  --color-fg-display-soft: #4a4338;
  --color-fg-secondary: #544c40;
  --color-fg-muted: #5f584e;
  --color-fg-subtle: #a89e8e;

  --color-border: rgba(42, 34, 22, 0.09);
  --color-border-strong: rgba(42, 34, 22, 0.16);
  --color-border-accent: rgba(79, 70, 229, 0.34);
  --color-hairline: rgba(42, 34, 22, 0.06);

  --color-accent: #4f46e5;
  --color-accent-bright: #6c63f5;
  --color-accent-solid: #4f46e5;
  --color-accent-solid-hover: #4038c7;
  --color-accent-subtle: rgba(79, 70, 229, 0.09);

  --color-success: #0f8a58;
  --color-success-subtle: rgba(15, 138, 88, 0.1);

  --color-spotlight: rgba(79, 70, 229, 0.06);
  --color-glow: rgba(79, 70, 229, 0.15);
  --color-glow-warm: rgba(79, 70, 229, 0.09);

  --aurora-1: rgba(79, 70, 229, 0.11);
  --aurora-2: rgba(214, 158, 96, 0.13);
  --aurora-3: rgba(255, 212, 186, 0.22);
  --aurora-4: rgba(167, 139, 250, 0.08);
  --hero-wash: linear-gradient(180deg, #fdfbf8 0%, #faf6f0 48%, #f6f1e8 100%);
  --horizon: rgba(79, 70, 229, 0.28);

  --contour: rgba(79, 70, 229, 0.13);
  --contour-2: rgba(79, 70, 229, 0.07);
  --bg-page: rgba(79, 70, 229, 0.035);
  --bg-mark: rgba(79, 70, 229, 0.30);

  --art-paper: #ffffff;
  --art-tint: #f0eeff;
  --art-line: #e3ddd2;
  --art-mute: #c8c0b2;
  --art-ink: #8d8477;
  --art-navy: #1d1a33;
  --art-accent: #4f46e5;
  --art-accent-pale: #6c63f5;
  --art-deep-a: #4f46e5;
  --art-deep-b: #6c63f5;
  --art-flat-a: #4f46e5;
  --art-flat-b: #6c63f5;
  --art-accent-soft: rgba(79, 70, 229, 0.16);
  --art-cover-a: #f2efff;
  --art-cover-b: #e6e2fb;
  --art-cover-ink: #1d1a33;
  --art-cover-card: #ffffff;
  --art-cover-sub: #8d8477;
}


/* ---- slate: Cool blue-grey. Crisper and more technical than plain white. ---- */
html[data-light="slate"]:not([data-theme="dark"]) {
  --color-fg-meta: #5f6b80;
  --color-bg: #f8fafc;
  --color-bg-subtle: #eef2f8;
  --color-surface-solid: #ffffff;
  --color-canvas: #e9eff7;
  --color-well: #eef2f8;
  --color-elevated: rgba(16, 32, 58, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  --color-canvas-dot: rgba(16, 32, 58, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(16, 32, 58, 0.05),
    inset 0 12px 22px -16px rgba(16, 32, 58, 0.4);

  --color-fg: #0d131c;
  --color-fg-display-soft: #39465a;
  --color-fg-secondary: #455163;
  --color-fg-muted: #55617a;
  --color-fg-subtle: #93a0b4;

  --color-border: rgba(16, 32, 58, 0.09);
  --color-border-strong: rgba(16, 32, 58, 0.16);
  --color-border-accent: rgba(79, 70, 229, 0.34);
  --color-hairline: rgba(16, 32, 58, 0.06);

  --color-accent: #4f46e5;
  --color-accent-bright: #6c63f5;
  --color-accent-solid: #4f46e5;
  --color-accent-solid-hover: #4038c7;
  --color-accent-subtle: rgba(79, 70, 229, 0.09);

  --color-success: #0f9d63;
  --color-success-subtle: rgba(15, 157, 99, 0.1);

  --color-spotlight: rgba(79, 70, 229, 0.06);
  --color-glow: rgba(79, 70, 229, 0.15);
  --color-glow-warm: rgba(79, 70, 229, 0.09);

  --aurora-1: rgba(79, 70, 229, 0.15);
  --aurora-2: rgba(56, 130, 246, 0.13);
  --aurora-3: rgba(186, 226, 255, 0.22);
  --aurora-4: rgba(129, 140, 248, 0.11);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #f8fafd 46%, #f1f5fb 100%);
  --horizon: rgba(79, 70, 229, 0.28);

  --contour: rgba(79, 70, 229, 0.13);
  --contour-2: rgba(79, 70, 229, 0.07);
  --bg-page: rgba(79, 70, 229, 0.035);
  --bg-mark: rgba(79, 70, 229, 0.30);

  --art-paper: #ffffff;
  --art-tint: #eaeeff;
  --art-line: #dbe2ee;
  --art-mute: #bcc6d8;
  --art-ink: #7f8ca3;
  --art-navy: #12203a;
  --art-accent: #4f46e5;
  --art-accent-pale: #6c63f5;
  --art-deep-a: #4f46e5;
  --art-deep-b: #6c63f5;
  --art-flat-a: #4f46e5;
  --art-flat-b: #6c63f5;
  --art-accent-soft: rgba(79, 70, 229, 0.16);
  --art-cover-a: #eaefff;
  --art-cover-b: #dbe3f8;
  --art-cover-ink: #12203a;
  --art-cover-card: #ffffff;
  --art-cover-sub: #7f8ca3;
}


/* ---- chalk: True neutral. No warm cast, no blue cast. Indigo is the only colour. ---- */
html[data-light="chalk"]:not([data-theme="dark"]) {
  --color-fg-meta: #6a6a74;
  --color-bg: #fcfcfd;
  --color-bg-subtle: #f4f4f6;
  --color-surface-solid: #ffffff;
  --color-canvas: #eeeef1;
  --color-well: #f4f4f6;
  --color-elevated: rgba(24, 24, 27, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  --color-canvas-dot: rgba(24, 24, 27, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(24, 24, 27, 0.05),
    inset 0 12px 22px -16px rgba(24, 24, 27, 0.4);

  --color-fg: #121215;
  --color-fg-display-soft: #45454e;
  --color-fg-secondary: #4c4c55;
  --color-fg-muted: #5c5c66;
  --color-fg-subtle: #a3a3ac;

  --color-border: rgba(24, 24, 27, 0.09);
  --color-border-strong: rgba(24, 24, 27, 0.16);
  --color-border-accent: rgba(79, 70, 229, 0.34);
  --color-hairline: rgba(24, 24, 27, 0.06);

  --color-accent: #4f46e5;
  --color-accent-bright: #6c63f5;
  --color-accent-solid: #4f46e5;
  --color-accent-solid-hover: #4038c7;
  --color-accent-subtle: rgba(79, 70, 229, 0.09);

  --color-success: #0f9d63;
  --color-success-subtle: rgba(15, 157, 99, 0.1);

  --color-spotlight: rgba(79, 70, 229, 0.06);
  --color-glow: rgba(79, 70, 229, 0.15);
  --color-glow-warm: rgba(79, 70, 229, 0.09);

  --aurora-1: rgba(79, 70, 229, 0.13);
  --aurora-2: rgba(99, 102, 241, 0.10);
  --aurora-3: rgba(226, 226, 232, 0.30);
  --aurora-4: rgba(139, 132, 248, 0.09);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #fbfbfc 46%, #f5f5f7 100%);
  --horizon: rgba(79, 70, 229, 0.28);

  --contour: rgba(79, 70, 229, 0.13);
  --contour-2: rgba(79, 70, 229, 0.07);
  --bg-page: rgba(79, 70, 229, 0.035);
  --bg-mark: rgba(79, 70, 229, 0.30);

  --art-paper: #ffffff;
  --art-tint: #eceaff;
  --art-line: #e2e2e7;
  --art-mute: #c3c3cb;
  --art-ink: #86868f;
  --art-navy: #19181f;
  --art-accent: #4f46e5;
  --art-accent-pale: #6c63f5;
  --art-deep-a: #4f46e5;
  --art-deep-b: #6c63f5;
  --art-flat-a: #4f46e5;
  --art-flat-b: #6c63f5;
  --art-accent-soft: rgba(79, 70, 229, 0.16);
  --art-cover-a: #efedff;
  --art-cover-b: #e2dffa;
  --art-cover-ink: #19181f;
  --art-cover-card: #ffffff;
  --art-cover-sub: #86868f;
}


/* ---- evergreen: Real business, growth, money. Almost unused in AI. ---- */
html[data-light="evergreen"]:not([data-theme="dark"]) {
  --color-fg-meta: #6a6a74;
  --color-bg: #fcfcfd;
  --color-bg-subtle: #f4f4f6;
  --color-surface-solid: #ffffff;
  --color-canvas: #eeeef1;
  --color-well: #f4f4f6;
  --color-elevated: rgba(24, 24, 27, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  --color-canvas-dot: rgba(24, 24, 27, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(24, 24, 27, 0.05),
    inset 0 12px 22px -16px rgba(24, 24, 27, 0.4);

  --color-fg: #121215;
  --color-fg-display-soft: #45454e;
  --color-fg-secondary: #4c4c55;
  --color-fg-muted: #5c5c66;
  --color-fg-subtle: #a3a3ac;

  --color-border: rgba(24, 24, 27, 0.09);
  --color-border-strong: rgba(24, 24, 27, 0.16);
  --color-border-accent: color-mix(in srgb, #0b7a4b 36%, transparent);
  --color-hairline: rgba(24, 24, 27, 0.06);

  --color-accent: #0b7a4b;
  --color-accent-bright: #12a165;
  --color-accent-solid: #0b7a4b;
  --color-accent-solid-hover: #12a165;
  --color-accent-subtle: color-mix(in srgb, #0b7a4b 10%, transparent);

  --color-success: #0f9d63;
  --color-success-subtle: rgba(15, 157, 99, 0.1);

  --color-spotlight: color-mix(in srgb, #0b7a4b 7%, transparent);
  --color-glow: color-mix(in srgb, #0b7a4b 20%, transparent);
  --color-glow-warm: color-mix(in srgb, #0b7a4b 10%, transparent);

  --aurora-1: rgba(79, 70, 229, 0.13);
  --aurora-2: rgba(99, 102, 241, 0.10);
  --aurora-3: rgba(226, 226, 232, 0.30);
  --aurora-4: rgba(139, 132, 248, 0.09);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #fbfbfc 46%, #f5f5f7 100%);
  --horizon: color-mix(in srgb, #0b7a4b 30%, transparent);

  --contour: color-mix(in srgb, #0b7a4b 13%, transparent);
  --contour-2: color-mix(in srgb, #0b7a4b 7%, transparent);
  --bg-page: color-mix(in srgb, #0b7a4b 4%, transparent);
  --bg-mark: color-mix(in srgb, #0b7a4b 32%, transparent);

  --art-paper: #ffffff;
  --art-tint: #e4f5ec;
  --art-line: #e2e2e7;
  --art-mute: #c3c3cb;
  --art-ink: #86868f;
  --art-navy: #0a5234;
  --art-accent: #0b7a4b;
  --art-accent-pale: #12a165;
  --art-deep-a: #0b7a4b;
  --art-deep-b: #12a165;
  --art-flat-a: #0b7a4b;
  --art-flat-b: #12a165;
  --art-accent-soft: color-mix(in srgb, #0b7a4b 17%, transparent);
  --art-cover-a: #eaf7f0;
  --art-cover-b: #d8efe3;
  --art-cover-ink: #19181f;
  --art-cover-card: #ffffff;
  --art-cover-sub: #86868f;
  --band-1: #06331f;
  --band-2: #0a5234;
  --band-3: #04241a;
  --band-glow-a: rgba(58, 214, 148, 0.30);
  --band-glow-b: rgba(11, 122, 75, 0.34);
  --band-eyebrow: #9ef0c6;
  /* the board already uses green for AGENT. With a green accent the you/agent
     binary collapses, so the machine side goes warm. Design decision, not a
     tweak: green = you and the business, amber = something else did it. */
  --color-success: #b45309;
  --color-success-subtle: rgba(180, 83, 9, 0.12);
}

/* ---- teal: Technical but warmer than blue. Distinctive. ---- */
html[data-light="teal"]:not([data-theme="dark"]) {
  --color-fg-meta: #6a6a74;
  --color-bg: #fcfcfd;
  --color-bg-subtle: #f4f4f6;
  --color-surface-solid: #ffffff;
  --color-canvas: #eeeef1;
  --color-well: #f4f4f6;
  --color-elevated: rgba(24, 24, 27, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  --color-canvas-dot: rgba(24, 24, 27, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(24, 24, 27, 0.05),
    inset 0 12px 22px -16px rgba(24, 24, 27, 0.4);

  --color-fg: #121215;
  --color-fg-display-soft: #45454e;
  --color-fg-secondary: #4c4c55;
  --color-fg-muted: #5c5c66;
  --color-fg-subtle: #a3a3ac;

  --color-border: rgba(24, 24, 27, 0.09);
  --color-border-strong: rgba(24, 24, 27, 0.16);
  --color-border-accent: color-mix(in srgb, #0e7490 36%, transparent);
  --color-hairline: rgba(24, 24, 27, 0.06);

  --color-accent: #0e7490;
  --color-accent-bright: #0e9bb8;
  --color-accent-solid: #0e7490;
  --color-accent-solid-hover: #0e9bb8;
  --color-accent-subtle: color-mix(in srgb, #0e7490 10%, transparent);

  --color-success: #0f9d63;
  --color-success-subtle: rgba(15, 157, 99, 0.1);

  --color-spotlight: color-mix(in srgb, #0e7490 7%, transparent);
  --color-glow: color-mix(in srgb, #0e7490 20%, transparent);
  --color-glow-warm: color-mix(in srgb, #0e7490 10%, transparent);

  --aurora-1: rgba(79, 70, 229, 0.13);
  --aurora-2: rgba(99, 102, 241, 0.10);
  --aurora-3: rgba(226, 226, 232, 0.30);
  --aurora-4: rgba(139, 132, 248, 0.09);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #fbfbfc 46%, #f5f5f7 100%);
  --horizon: color-mix(in srgb, #0e7490 30%, transparent);

  --contour: color-mix(in srgb, #0e7490 13%, transparent);
  --contour-2: color-mix(in srgb, #0e7490 7%, transparent);
  --bg-page: color-mix(in srgb, #0e7490 4%, transparent);
  --bg-mark: color-mix(in srgb, #0e7490 32%, transparent);

  --art-paper: #ffffff;
  --art-tint: #e2f2f7;
  --art-line: #e2e2e7;
  --art-mute: #c3c3cb;
  --art-ink: #86868f;
  --art-navy: #0a4358;
  --art-accent: #0e7490;
  --art-accent-pale: #0e9bb8;
  --art-deep-a: #0e7490;
  --art-deep-b: #0e9bb8;
  --art-flat-a: #0e7490;
  --art-flat-b: #0e9bb8;
  --art-accent-soft: color-mix(in srgb, #0e7490 17%, transparent);
  --art-cover-a: #e8f5f9;
  --art-cover-b: #d5ebf3;
  --art-cover-ink: #19181f;
  --art-cover-card: #ffffff;
  --art-cover-sub: #86868f;
  --band-1: #062b3a;
  --band-2: #0a4358;
  --band-3: #04202c;
  --band-glow-a: rgba(76, 205, 232, 0.30);
  --band-glow-b: rgba(14, 116, 144, 0.34);
  --band-eyebrow: #9fe4f5;
  /* Spectrum ramp, rebased on the brand accent. Cool -> warm -> cool:
     the journey heats up as you get closer to customers, then automation
     hands you back the calm. Plan is always the brand colour. */
  --stage-1: #0e7490;
  --stage-2: #4f46e5;
  --stage-3: #db2777;
  --stage-4: #0d9488;
}

/* ---- bronze: Ember refined: gold rather than rust, charcoal bands. ---- */
html[data-light="bronze"]:not([data-theme="dark"]) {
  --color-fg-meta: #6a6a74;
  --color-bg: #fcfcfd;
  --color-bg-subtle: #f4f4f6;
  --color-surface-solid: #ffffff;
  --color-canvas: #eeeef1;
  --color-well: #f4f4f6;
  --color-elevated: rgba(24, 24, 27, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  --color-canvas-dot: rgba(24, 24, 27, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(24, 24, 27, 0.05),
    inset 0 12px 22px -16px rgba(24, 24, 27, 0.4);

  --color-fg: #121215;
  --color-fg-display-soft: #45454e;
  --color-fg-secondary: #4c4c55;
  --color-fg-muted: #5c5c66;
  --color-fg-subtle: #a3a3ac;

  --color-border: rgba(24, 24, 27, 0.09);
  --color-border-strong: rgba(24, 24, 27, 0.16);
  --color-border-accent: color-mix(in srgb, #b45309 36%, transparent);
  --color-hairline: rgba(24, 24, 27, 0.06);

  --color-accent: #b45309;
  --color-accent-bright: #e07a15;
  --color-accent-solid: #b45309;
  --color-accent-solid-hover: #e07a15;
  --color-accent-subtle: color-mix(in srgb, #b45309 10%, transparent);

  --color-success: #0f9d63;
  --color-success-subtle: rgba(15, 157, 99, 0.1);

  --color-spotlight: color-mix(in srgb, #b45309 7%, transparent);
  --color-glow: color-mix(in srgb, #b45309 20%, transparent);
  --color-glow-warm: color-mix(in srgb, #b45309 10%, transparent);

  --aurora-1: rgba(79, 70, 229, 0.13);
  --aurora-2: rgba(99, 102, 241, 0.10);
  --aurora-3: rgba(226, 226, 232, 0.30);
  --aurora-4: rgba(139, 132, 248, 0.09);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #fbfbfc 46%, #f5f5f7 100%);
  --horizon: color-mix(in srgb, #b45309 30%, transparent);

  --contour: color-mix(in srgb, #b45309 13%, transparent);
  --contour-2: color-mix(in srgb, #b45309 7%, transparent);
  --bg-page: color-mix(in srgb, #b45309 4%, transparent);
  --bg-mark: color-mix(in srgb, #b45309 32%, transparent);

  --art-paper: #ffffff;
  --art-tint: #faf0e2;
  --art-line: #e2e2e7;
  --art-mute: #c3c3cb;
  --art-ink: #86868f;
  --art-navy: #312418;
  --art-accent: #b45309;
  --art-accent-pale: #e07a15;
  --art-deep-a: #b45309;
  --art-deep-b: #e07a15;
  --art-flat-a: #b45309;
  --art-flat-b: #e07a15;
  --art-accent-soft: color-mix(in srgb, #b45309 17%, transparent);
  --art-cover-a: #fbf2e6;
  --art-cover-b: #f5e4cd;
  --art-cover-ink: #19181f;
  --art-cover-card: #ffffff;
  --art-cover-sub: #86868f;
  --band-1: #1d1712;
  --band-2: #312418;
  --band-3: #12100d;
  --band-glow-a: rgba(245, 173, 74, 0.28);
  --band-glow-b: rgba(180, 83, 9, 0.32);
  --band-eyebrow: #f5cf95;
}

/* ---- ink: Achromatic chrome. Colour lives only inside the resources. ---- */
html[data-light="graphite"]:not([data-theme="dark"]) {
  --color-fg-meta: #6a6a74;
  --color-bg: #fcfcfd;
  --color-bg-subtle: #f4f4f6;
  --color-surface-solid: #ffffff;
  --color-canvas: #eeeef1;
  --color-well: #f4f4f6;
  --color-elevated: rgba(24, 24, 27, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  --color-canvas-dot: rgba(24, 24, 27, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(24, 24, 27, 0.05),
    inset 0 12px 22px -16px rgba(24, 24, 27, 0.4);

  --color-fg: #121215;
  --color-fg-display-soft: #45454e;
  --color-fg-secondary: #4c4c55;
  --color-fg-muted: #5c5c66;
  --color-fg-subtle: #a3a3ac;

  --color-border: rgba(24, 24, 27, 0.09);
  --color-border-strong: rgba(24, 24, 27, 0.16);
  --color-border-accent: color-mix(in srgb, #18181b 36%, transparent);
  --color-hairline: rgba(24, 24, 27, 0.06);

  --color-accent: #18181b;
  --color-accent-bright: #3f3f46;
  --color-accent-solid: #18181b;
  --color-accent-solid-hover: #3f3f46;
  --color-accent-subtle: color-mix(in srgb, #18181b 10%, transparent);

  --color-success: #0f9d63;
  --color-success-subtle: rgba(15, 157, 99, 0.1);

  --color-spotlight: color-mix(in srgb, #18181b 7%, transparent);
  --color-glow: color-mix(in srgb, #18181b 20%, transparent);
  --color-glow-warm: color-mix(in srgb, #18181b 10%, transparent);

  --aurora-1: rgba(79, 70, 229, 0.13);
  --aurora-2: rgba(99, 102, 241, 0.10);
  --aurora-3: rgba(226, 226, 232, 0.30);
  --aurora-4: rgba(139, 132, 248, 0.09);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #fbfbfc 46%, #f5f5f7 100%);
  --horizon: color-mix(in srgb, #18181b 30%, transparent);

  --contour: color-mix(in srgb, #18181b 13%, transparent);
  --contour-2: color-mix(in srgb, #18181b 7%, transparent);
  --bg-page: color-mix(in srgb, #18181b 4%, transparent);
  --bg-mark: color-mix(in srgb, #18181b 32%, transparent);

  --art-paper: #ffffff;
  --art-tint: #eceaff;
  --art-line: #e2e2e7;
  --art-mute: #c3c3cb;
  --art-ink: #86868f;
  --art-navy: #1e1e23;
  --art-accent: #4f46e5;
  --art-accent-pale: #6c63f5;
  --art-deep-a: #4f46e5;
  --art-deep-b: #6c63f5;
  --art-flat-a: #4f46e5;
  --art-flat-b: #6c63f5;
  --art-accent-soft: color-mix(in srgb, #4f46e5 17%, transparent);
  --art-cover-a: #f2efff;
  --art-cover-b: #e6e2fb;
  --art-cover-ink: #19181f;
  --art-cover-card: #ffffff;
  --art-cover-sub: #86868f;
  --band-1: #131316;
  --band-2: #1e1e23;
  --band-3: #0a0a0c;
  --band-glow-a: rgba(255, 255, 255, 0.10);
  --band-glow-b: rgba(79, 70, 229, 0.26);
  --band-eyebrow: #d4d4d8;
  /* the chrome has no hue, so the light comes from the resources */
  --aurora-1: color-mix(in srgb, var(--art-accent) 20%, transparent);
  --aurora-2: color-mix(in srgb, var(--art-accent-pale) 15%, transparent);
  --aurora-3: color-mix(in srgb, var(--art-accent) 8%, white 30%);
  --aurora-4: color-mix(in srgb, var(--art-accent-pale) 9%, transparent);
  --hero-wash: linear-gradient(180deg, #ffffff 0%,
      color-mix(in srgb, var(--art-accent) 3%, #fcfcfd) 42%,
      color-mix(in srgb, var(--art-accent) 8%, #f4f4f6) 100%);
  --color-spotlight: color-mix(in srgb, var(--art-accent) 9%, transparent);
}

/* ---- ember: Cool white, clay accent. Deliberately not an AI-purple site. ---- */
html[data-light="ember"]:not([data-theme="dark"]) {
  --color-fg-meta: #6b605a;
  --color-bg: #fffefd;
  --color-bg-subtle: #f7f5f2;
  --color-surface-solid: #ffffff;
  --color-canvas: #f4f1ed;
  --color-well: #f7f5f2;
  --color-elevated: rgba(34, 26, 20, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
  --color-canvas-dot: rgba(34, 26, 20, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(34, 26, 20, 0.05),
    inset 0 12px 22px -16px rgba(34, 26, 20, 0.4);

  --color-fg: #131010;
  --color-fg-display-soft: #3f3733;
  --color-fg-secondary: #4d4441;
  --color-fg-muted: #5e544f;
  --color-fg-subtle: #a3968e;

  --color-border: rgba(34, 26, 20, 0.09);
  --color-border-strong: rgba(34, 26, 20, 0.16);
  --color-border-accent: rgba(194, 65, 12, 0.34);
  --color-hairline: rgba(34, 26, 20, 0.06);

  --color-accent: #c2410c;
  --color-accent-bright: #e05516;
  --color-accent-solid: #c2410c;
  --color-accent-solid-hover: #9c340a;
  --color-accent-subtle: rgba(194, 65, 12, 0.09);

  --color-success: #15803d;
  --color-success-subtle: rgba(21, 128, 61, 0.1);

  --color-spotlight: rgba(194, 65, 12, 0.06);
  --color-glow: rgba(194, 65, 12, 0.15);
  --color-glow-warm: rgba(194, 65, 12, 0.09);

  --aurora-1: rgba(194, 65, 12, 0.11);
  --aurora-2: rgba(234, 140, 60, 0.13);
  --aurora-3: rgba(255, 224, 200, 0.28);
  --aurora-4: rgba(120, 100, 90, 0.06);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #fffaf6 48%, #fdf5ee 100%);
  --horizon: rgba(194, 65, 12, 0.28);

  --contour: rgba(194, 65, 12, 0.13);
  --contour-2: rgba(194, 65, 12, 0.07);
  --bg-page: rgba(194, 65, 12, 0.035);
  --bg-mark: rgba(194, 65, 12, 0.30);

  --art-paper: #ffffff;
  --art-tint: #fdece2;
  --art-line: #e8ded5;
  --art-mute: #cdbdb1;
  --art-ink: #95867c;
  --art-navy: #2a1a10;
  --art-accent: #c2410c;
  --art-accent-pale: #e05516;
  --art-deep-a: #c2410c;
  --art-deep-b: #e05516;
  --art-flat-a: #c2410c;
  --art-flat-b: #e05516;
  --art-accent-soft: rgba(194, 65, 12, 0.16);
  --art-cover-a: #fdeee4;
  --art-cover-b: #f7ded0;
  --art-cover-ink: #2a1a10;
  --art-cover-card: #ffffff;
  --art-cover-sub: #95867c;
}


/* ---- ink: Pure white, hairlines only, near-black type. Editorial, maximum contrast. ---- */
html[data-light="ink"]:not([data-theme="dark"]) {
  --color-fg-meta: #63636d;
  --color-bg: #ffffff;
  --color-bg-subtle: #ffffff;
  --color-surface-solid: #ffffff;
  --color-canvas: #fafafa;
  --color-well: #ffffff;
  --color-elevated: rgba(0, 0, 0, 0.026);
  --color-card: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  --color-canvas-dot: rgba(0, 0, 0, 0.13);
  --shadow-canvas-inset:
    inset 0 1px 0 rgba(0, 0, 0, 0.05),
    inset 0 12px 22px -16px rgba(0, 0, 0, 0.4);

  --color-fg: #000000;
  --color-fg-display-soft: #2e2e33;
  --color-fg-secondary: #3c3c44;
  --color-fg-muted: #55555f;
  --color-fg-subtle: #93939d;

  --color-border: rgba(0, 0, 0, 0.09);
  --color-border-strong: rgba(0, 0, 0, 0.16);
  --color-border-accent: rgba(79, 70, 229, 0.34);
  --color-hairline: rgba(0, 0, 0, 0.06);

  --color-accent: #4f46e5;
  --color-accent-bright: #6c63f5;
  --color-accent-solid: #4f46e5;
  --color-accent-solid-hover: #4038c7;
  --color-accent-subtle: rgba(79, 70, 229, 0.09);

  --color-success: #0b8a55;
  --color-success-subtle: rgba(11, 138, 85, 0.1);

  --color-spotlight: rgba(79, 70, 229, 0.06);
  --color-glow: rgba(79, 70, 229, 0.15);
  --color-glow-warm: rgba(79, 70, 229, 0.09);

  --aurora-1: rgba(79, 70, 229, 0.09);
  --aurora-2: rgba(0, 0, 0, 0.02);
  --aurora-3: rgba(255, 255, 255, 0);
  --aurora-4: rgba(0, 0, 0, 0.03);
  --hero-wash: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #fcfcfd 100%);
  --horizon: rgba(79, 70, 229, 0.28);

  --contour: rgba(79, 70, 229, 0.13);
  --contour-2: rgba(79, 70, 229, 0.07);
  --bg-page: rgba(79, 70, 229, 0.035);
  --bg-mark: rgba(79, 70, 229, 0.30);

  --art-paper: #ffffff;
  --art-tint: #f2f2fa;
  --art-line: #e6e6ec;
  --art-mute: #c6c6d0;
  --art-ink: #8a8a96;
  --art-navy: #111118;
  --art-accent: #4f46e5;
  --art-accent-pale: #6c63f5;
  --art-deep-a: #4f46e5;
  --art-deep-b: #6c63f5;
  --art-flat-a: #4f46e5;
  --art-flat-b: #6c63f5;
  --art-accent-soft: rgba(79, 70, 229, 0.16);
  --art-cover-a: #f3f3fb;
  --art-cover-b: #e8e8f4;
  --art-cover-ink: #111118;
  --art-cover-card: #ffffff;
  --art-cover-sub: #8a8a96;
}


[data-theme="dark"] { color-scheme: dark; }

/* The two indigo slabs are painted for the light theme. In dark mode they
   re-derive from the active palette so the band reads as a shift in tone
   rather than a lit panel dropped into a black page. */
[data-theme="dark"] .aipart {
  background:
    radial-gradient(60rem 40rem at 78% -10%, color-mix(in srgb, var(--color-accent) 17%, transparent), transparent 62%),
    radial-gradient(40rem 32rem at 8% 100%, color-mix(in srgb, var(--color-accent-solid) 22%, transparent), transparent 66%),
    linear-gradient(168deg, var(--color-surface-solid) 0%, var(--color-bg-subtle) 55%, var(--color-bg) 100%);
}
[data-theme="dark"] .final {
  background:
    radial-gradient(52rem 34rem at 50% -14%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 62%),
    radial-gradient(36rem 28rem at 10% 110%, color-mix(in srgb, var(--color-accent-solid) 24%, transparent), transparent 66%),
    linear-gradient(170deg, var(--color-bg-subtle) 0%, var(--color-surface-solid) 46%, var(--color-bg) 100%);
}
[data-theme="dark"] .aipart, [data-theme="dark"] .final { color: var(--color-fg); }
[data-theme="dark"] .aipart h2, [data-theme="dark"] .final h2 { color: var(--color-fg); }



body {
  position: relative;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-lg);
  line-height: var(--leading-body);
  font-feature-settings: "cv11", "ss01";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Film grain — kills the flatness without reading as texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { display: block; }
::selection { background-color: var(--color-accent-solid); color: #fff; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-xs); }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.section { padding-block: var(--pad-std); }

/* tight = the two sections are one argument · wide = a tonal shift is coming */
.section--pad-tight-top    { padding-top: var(--pad-tight); }
.section--pad-tight-bottom { padding-bottom: var(--pad-tight); }
.section--pad-wide-top     { padding-top: var(--pad-wide); }
.section--pad-wide-bottom  { padding-bottom: var(--pad-wide); }

.section--bordered { border-top: 1px solid var(--color-hairline); }

.section__header { max-width: 44rem; margin-bottom: var(--space-3xl); }

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-elevated);
  /* was mono. Mono earns its meaning by reading as system output next to human
     writing; at 126 instances it stopped being a signal. Data keeps mono, section
     labels don't. Design audit 2026-07-25, item 6. */
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--color-fg-secondary);
}

.section__eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.section__title-soft { color: var(--color-fg-display-soft); font-weight: var(--weight-bold); }

.section__title {
  font-size: var(--font-size-h2);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}

.section__lead {
  margin-top: var(--space-lg);
  max-width: 34rem;
  color: var(--color-fg-secondary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. UTILITY — scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
.reveal--delay-1 { transition-delay: 70ms; }
.reveal--delay-2 { transition-delay: 140ms; }
.reveal--delay-3 { transition-delay: 210ms; }
.reveal--delay-4 { transition-delay: 280ms; }

/* --------------------------------------------------------------------------
   6. COMPONENT — Button
   -------------------------------------------------------------------------- */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 3rem;
  padding-inline: var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.button__label,
.button__icon { position: relative; z-index: 2; }
.button__icon { flex: 0 0 auto; transition: transform var(--duration-base) var(--ease-out); }

.button--primary {
  background-color: var(--color-accent-solid);
  color: var(--color-accent-fg);
  box-shadow: var(--shadow-accent);
}

/* Sheen sweep on hover */
.button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 45%,
    transparent 70%
  );
  transform: translateX(var(--sheen-x));
  transition: --sheen-x 0.75s var(--ease-out);
}

.button--primary:hover {
  background-color: var(--color-accent-solid-hover);
  transform: translateY(-1px);
}
.button--primary:hover::after { --sheen-x: 140%; }
.button--primary:active { transform: translateY(0); }

.button--secondary {
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-fg);
  box-shadow: var(--shadow-sm), var(--shadow-inset-top);
}
.button--secondary:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md), var(--shadow-inset-top);
  transform: translateY(-1px);
}
.button--secondary:hover .button__icon { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. SECTION — Hero
   -------------------------------------------------------------------------- */


/* ==========================================================================
   SITE HEADER — matched to Mayank's reference: text wordmark, five links,
   one gradient pill CTA on the right.
   ========================================================================== */
.sitehead {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--color-hairline);
  background: color-mix(in srgb, var(--color-surface-solid) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.sitehead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 72px;
  padding-block: 12px;
}
.sitehead__brand {
  font-size: clamp(1.15rem, 1.5vw, 1.375rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.035em;
  color: var(--color-fg);
  text-decoration: none;
  white-space: nowrap;
}
.sitehead__brand b { font-weight: inherit; color: var(--color-accent); }

.sitehead__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 2.1rem);
  margin-left: auto;
}
.sitehead__link {
  position: relative;
  font-size: var(--font-size-body);
  font-weight: var(--weight-medium, 500);
  letter-spacing: -0.01em;
  color: var(--color-fg-secondary);
  text-decoration: none;
  padding-block: 6px;
  white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}
.sitehead__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.32s var(--ease-out);
}
.sitehead__link:hover { color: var(--color-fg); }
.sitehead__link:hover::after, .sitehead__link:focus-visible::after { transform: scaleX(1); }

.sitehead__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent-solid));
  box-shadow: 0 12px 26px -12px var(--color-glow), inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff;
  font-size: var(--font-size-body);
  font-weight: var(--weight-bold, 700);
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}
.sitehead__cta:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px var(--color-glow), inset 0 1px 0 rgba(255,255,255,.28); }

@media (max-width: 68rem) {
  .sitehead__link[data-optional] { display: none; }
}
@media (max-width: 52rem) {
  .sitehead__inner { min-height: 62px; }
  .sitehead__nav { gap: 1rem; }
  .sitehead__link { font-size: var(--font-size-sm); }
  .sitehead__cta { padding: 10px 16px; font-size: var(--font-size-sm); }
}
@media (max-width: 40rem) {
  .sitehead__nav .sitehead__link { display: none; }
  .sitehead__cta { padding: 9px 15px; font-size: var(--font-size-sm); }
}

.hero {
  position: relative;
  /* was clamp(5.5rem, 9vw, 9rem) / --space-section = 130px + 158px of padding.
     That pushed the primary CTA to 731px, below the fold on a 1280x720 laptop.
     Audit 2026-07-25, item 1. */
  padding-block: clamp(2.25rem, 3.4vw, 3.25rem) clamp(4rem, 6vw, 5.5rem);
  overflow: clip;
  background: var(--hero-wash);
}

/* --- Layer 1: the aurora. Four soft fields, drifting. --- */
.hero__aurora {
  position: absolute;
  inset: -12% -8%;
  pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 76% 6%, var(--aurora-1), transparent 62%),
    radial-gradient(36rem 30rem at 10% 78%, var(--aurora-2), transparent 64%),
    radial-gradient(30rem 26rem at 92% 82%, var(--aurora-3), transparent 66%),
    radial-gradient(34rem 28rem at 42% 34%, var(--aurora-4), transparent 68%);
  animation: aurora-drift 38s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

@keyframes aurora-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.8%, 0) scale(1.07); }
}

/* --- Layer 2: contour lines. A map, not a grid. --- */
.contours {
  position: absolute;
  inset: -6% -4%;
  width: 108%;
  height: 112%;
  pointer-events: none;
  fill: none;
  stroke: var(--contour);
  stroke-width: 1;
  mask-image: radial-gradient(105% 80% at 62% 18%, #000 0%, rgba(0,0,0,.5) 46%, transparent 78%);
  -webkit-mask-image: radial-gradient(105% 80% at 62% 18%, #000 0%, rgba(0,0,0,.5) 46%, transparent 78%);
  animation: contour-drift 46s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
.contours path:nth-child(3n) { stroke: var(--contour-2); }
.contours path:nth-child(5n) { stroke-width: 1.6; }

@keyframes contour-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.6%, -1.2%, 0) scale(1.05); }
}

/* the same map runs under the dark sections, quieter */
.contours--sub {
  inset: -10% -6%;
  width: 112%;
  height: 120%;
  stroke: rgba(199, 194, 255, 0.12);
  mask-image: radial-gradient(95% 90% at 50% 50%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(95% 90% at 50% 50%, #000 0%, transparent 76%);
}
.contours--sub path:nth-child(3n) { stroke: rgba(199, 194, 255, 0.06); }

/* ============================================================
   BACKGROUND TREATMENTS
   Four alternates to the contour map. Only the treatment named
   by [data-bg] on <html> is painted; everything else is off.
   ============================================================ */

.bg {
  position: absolute;
  inset: -6% -4%;
  width: 108%;
  height: 112%;
  display: none;
  pointer-events: none;
  fill: none;
  stroke: var(--contour);
  stroke-width: 1;
  will-change: transform;
  mask-image: radial-gradient(105% 82% at 62% 20%, #000 0%, rgba(0,0,0,.55) 46%, transparent 80%);
  -webkit-mask-image: radial-gradient(105% 82% at 62% 20%, #000 0%, rgba(0,0,0,.55) 46%, transparent 80%);
}
.bg--sub {
  inset: -10% -6%;
  width: 112%;
  height: 120%;
  opacity: .62;
  mask-image: radial-gradient(95% 92% at 50% 50%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(95% 92% at 50% 50%, #000 0%, transparent 78%);
}

/* --- the switch --- */
html[data-bg="ruled"] .bg--ruled,
html[data-bg="draft"] .bg--draft,
html[data-bg="shelf"] .bg--shelf,
html[data-bg="orbit"] .bg--orbit { display: block; }
html:not([data-bg="contour"]) .contours { display: none; }


/* ---------- RULED — the page itself. Rules, a margin, blank fields. --- */
.bg--ruled {
  stroke: var(--contour-2);
  stroke-linecap: round;
  animation: bg-lift 54s var(--ease-in-out) infinite alternate;
}
.bg--ruled .hv { stroke: var(--contour); stroke-width: 1.15; }
.bg--ruled .mg { stroke: var(--bg-mark); stroke-width: 1.2; opacity: .55; }
.bg--ruled .fd {
  stroke: var(--color-accent);
  stroke-width: 2.4;
  opacity: .34;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: bg-write 7s var(--ease-out) infinite;
}
.bg--ruled .fd:nth-of-type(2n)  { animation-delay: .9s;  }
.bg--ruled .fd:nth-of-type(3n)  { animation-delay: 1.9s; }
.bg--ruled .fd:nth-of-type(5n)  { animation-delay: 3.1s; }
.bg--ruled .fd:nth-of-type(7n)  { animation-delay: 4.4s; }

@keyframes bg-write {
  0%        { stroke-dashoffset: 260; opacity: 0; }
  14%       { opacity: .34; }
  38%, 74%  { stroke-dashoffset: 0;   opacity: .34; }
  96%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}


/* ---------- DRAFT — crop marks, registration, dimension ticks. ------- */
.bg--draft {
  stroke: var(--contour);
  stroke-width: 1.1;
  stroke-linecap: square;
  animation: bg-breathe 38s var(--ease-in-out) infinite alternate;
}
.bg--draft .hv { stroke-width: 1.7; }
.bg--draft .rg {
  stroke: var(--bg-mark);
  opacity: .5;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bg-pulse 6.5s var(--ease-in-out) infinite;
}
.bg--draft circle:nth-of-type(2) { animation-delay: 1.6s; }
.bg--draft circle:nth-of-type(3) { animation-delay: 3.2s; }
.bg--draft circle:nth-of-type(4) { animation-delay: 4.8s; }
.bg--draft .fd { stroke: var(--contour-2); stroke-dasharray: 3 9; }

@keyframes bg-pulse {
  0%, 100% { opacity: .28; transform: scale(1); }
  50%      { opacity: .70; transform: scale(1.35); }
}


/* ---------- SHELF — the library, seen from a distance. ---------------
   Three depth tiers. Each drifts at its own rate, so the field has
   real parallax instead of one flat plane sliding around.
   -------------------------------------------------------------------- */
.bg--shelf { stroke-width: 1; }

/* in the hero the field steps back off the copy column, so the type stays sharp */
.hero .bg--shelf {
  mask-image:
    radial-gradient(105% 82% at 62% 20%, #000 0%, rgba(0,0,0,.55) 46%, transparent 80%),
    linear-gradient(90deg, transparent 4%, rgba(0,0,0,.20) 22%, rgba(0,0,0,.68) 40%, #000 54%);
  -webkit-mask-image:
    radial-gradient(105% 82% at 62% 20%, #000 0%, rgba(0,0,0,.55) 46%, transparent 80%),
    linear-gradient(90deg, transparent 4%, rgba(0,0,0,.20) 22%, rgba(0,0,0,.68) 40%, #000 54%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.bg--shelf .pg { fill: var(--bg-page); stroke: var(--contour); }
.bg--shelf .mh { fill: var(--bg-mark); stroke: none; opacity: .55; }
.bg--shelf .ti { fill: var(--contour); stroke: none; }
.bg--shelf path { stroke: var(--contour-2); stroke-linecap: round; }

.bg--shelf .tier { will-change: transform; }
.bg--shelf .tier--far {
  opacity: .38;
  filter: blur(.8px);
  animation: shelf-far 78s var(--ease-in-out) infinite alternate;
}
.bg--shelf .tier--mid {
  opacity: .66;
  filter: blur(.25px);
  animation: shelf-mid 58s var(--ease-in-out) infinite alternate;
}
.bg--shelf .tier--near {
  opacity: 1;
  animation: shelf-near 44s var(--ease-in-out) infinite alternate;
}
.bg--shelf .tier--near .pg { stroke-width: 1.2; }

/* three pages carry the accent — the ones you'd pull off the shelf */
.bg--shelf .feat {
  fill: var(--bg-page);
  stroke: var(--color-accent);
  opacity: .85;
  filter: drop-shadow(0 0 14px var(--color-accent));
  animation: shelf-warm 11s var(--ease-in-out) infinite;
}
.bg--shelf .feat:nth-of-type(2) { animation-delay: 3.7s; }

@keyframes shelf-far  { from { transform: translate( 0px,  0px); } to { transform: translate( 26px, -18px); } }
@keyframes shelf-mid  { from { transform: translate( 0px,  0px); } to { transform: translate(-34px,  24px); } }
@keyframes shelf-near { from { transform: translate( 0px,  0px); } to { transform: translate( 52px, -34px); } }
@keyframes shelf-warm {
  0%, 100% { opacity: .45; }
  50%      { opacity: .95; }
}


/* ---------- ORBIT — everything circles one page. ---------------------
   The rings are centred on the library panel, so the product sits at
   the middle of the system rather than beside it.
   -------------------------------------------------------------------- */
.bg--orbit { stroke: var(--contour-2); stroke-width: 1; }
.bg--orbit .rings ellipse { stroke: var(--contour); }
.bg--orbit .rings .hv     { stroke: var(--bg-mark); opacity: .55; stroke-width: 1.2; }
.bg--orbit .rings .fd     { stroke: var(--contour-2); stroke-dasharray: 2 9; }
.bg--orbit .rings {
  transform-box: view-box;
  transform-origin: 70% 37%;
  animation: orbit-breathe 40s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

.bg--orbit .spokes path { stroke: var(--contour-2); stroke-dasharray: 3 10; opacity: .8; }

.bg--orbit .halo {
  fill: var(--color-accent);
  stroke: none;
  opacity: .11;
  filter: blur(6px);
}
.bg--orbit .nd {
  fill: var(--color-accent);
  stroke: none;
  opacity: .55;
  animation: orbit-twinkle 9s var(--ease-in-out) infinite;
}
.bg--orbit .nodes circle:nth-of-type(4n)   { animation-delay: 1.2s; }
.bg--orbit .nodes circle:nth-of-type(6n)   { animation-delay: 2.8s; }
.bg--orbit .nodes circle:nth-of-type(6n+3) { animation-delay: 4.6s; }
.bg--orbit .nodes circle:nth-of-type(8n)   { animation-delay: 6.1s; }

/* a single lit segment travelling one ring */
.bg--orbit .sweep {
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 300 2400;
  opacity: .62;
  filter: drop-shadow(0 0 8px var(--color-accent));
  animation: orbit-sweep 14s linear infinite;
}

.bg--orbit .core__pg { fill: var(--bg-page); stroke: var(--color-accent); opacity: .55; }
.bg--orbit .core path { stroke: var(--color-accent); opacity: .35; }
.bg--orbit .core {
  transform-box: view-box;
  transform-origin: 70% 37%;
  animation: orbit-core 7s var(--ease-in-out) infinite;
}

@keyframes orbit-twinkle { 0%, 100% { opacity: .18; } 50% { opacity: .66; } }
@keyframes orbit-sweep   { from { stroke-dashoffset: 2700; } to { stroke-dashoffset: 0; } }
@keyframes orbit-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes orbit-core    { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }


/* ---------- shared motion ------------------------------------------- */
@keyframes bg-lift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.2%, 0) scale(1.04); }
}
@keyframes bg-breathe {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.1%, -.9%, 0) scale(1.045); }
}
@keyframes bg-float {
  from { transform: translate3d(0, 0, 0) scale(1.02); }
  to   { transform: translate3d(-1.8%, 1.4%, 0) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .bg, .bg *, .bg--ruled .fd, .bg--draft .rg, .bg--orbit .nd { animation: none !important; }
  .bg--ruled .fd { stroke-dashoffset: 0; opacity: .3; }
}


/* --- Layer 3: focused light behind the panel --- */
.hero__glow {
  position: absolute;
  top: -18%;
  right: -12%;
  width: 50rem;
  height: 50rem;
  pointer-events: none;
  background: radial-gradient(circle, var(--color-glow) 0%, transparent 60%);
  filter: blur(14px);
}

.hero__glow--secondary {
  top: auto;
  bottom: -24%;
  right: auto;
  left: -16%;
  width: 36rem;
  height: 36rem;
  background: radial-gradient(circle, var(--color-glow-warm) 0%, transparent 66%);
}

/* --- Layer 4: grain, so the gradients never band --- */
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--hero-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* --- Layer 5: the horizon where the hero ends --- */
.hero__horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 6%, var(--horizon) 50%, transparent 94%);
}

.hero__horizon::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 9rem;
  background: radial-gradient(60% 100% at 50% 100%, var(--color-glow) 0%, transparent 72%);
  opacity: 0.55;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}

.hero__content { max-width: 34rem; }

/* --- Who it's for. A line, not a badge. --- */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-body);
  font-weight: var(--weight-medium);
  letter-spacing: -0.006em;
  color: var(--color-fg-secondary);
}
.hero__kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 1.25em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--color-accent-bright), var(--color-accent-solid));
}


/* ==========================================================================
   COLOUR VIBRANCY — [data-vibe] on <html>
   The page runs one accent on near-white with two dark bands. Three ways to
   add life, each with a different theory of where colour should come from.
   ========================================================================== */

/* ---- shared: a stage ramp. Indigo -> violet -> rose -> teal.
        Analogous through the first three (one family, real travel), then teal
        for Automate: the one break in the ramp is the one stage that stops
        being yours. */
:root {
  --band-1: #1e1b5c;
  --band-2: #241f7e;
  --band-3: #16143f;
  --band-glow-a: rgba(124, 116, 255, 0.34);
  --band-glow-b: rgba(79, 70, 229, 0.30);
  --band-eyebrow: #c4c0ff;

  --stage-1: #4f46e5;  /* Plan     */
  --stage-2: #7c3aed;  /* Build    */
  --stage-3: #db2777;  /* Launch   */
  --stage-4: #0d9488;  /* Automate */
}

/* An element that carries --acc re-derives the whole accent set from it. */
[style*="--acc"], .vibe-acc {
  --color-accent: var(--acc);
  --color-accent-bright: color-mix(in srgb, var(--acc) 82%, white);
  --color-accent-solid: var(--acc);
  --color-accent-solid-hover: color-mix(in srgb, var(--acc) 82%, black);
  --color-accent-subtle: color-mix(in srgb, var(--acc) 10%, transparent);
  --color-border-accent: color-mix(in srgb, var(--acc) 36%, transparent);
  --color-glow: color-mix(in srgb, var(--acc) 22%, transparent);
  --art-accent: var(--acc);
  --art-accent-pale: color-mix(in srgb, var(--acc) 78%, white);
  --art-accent-soft: color-mix(in srgb, var(--acc) 17%, transparent);
  --art-deep-a: var(--acc);
  --art-deep-b: color-mix(in srgb, var(--acc) 78%, white);
  --art-flat-a: var(--acc);
  --art-flat-b: color-mix(in srgb, var(--acc) 78%, white);
  --art-tint: color-mix(in srgb, var(--acc) 12%, white);
  --art-cover-a: color-mix(in srgb, var(--acc) 9%, white);
  --art-cover-b: color-mix(in srgb, var(--acc) 17%, white);
  --bg-mark: color-mix(in srgb, var(--acc) 32%, transparent);
}

/* ---- 1. SPECTRUM — the stage you're on colours what you're looking at ---- */
html[data-vibe="spectrum"] #library,
html[data-vibe="spectrum"] .kit-card { transition: --acc .6s var(--ease-out); }
html[data-vibe="spectrum"] .kit-card[data-kit="1"] { --acc: var(--stage-1); }
html[data-vibe="spectrum"] .kit-card[data-kit="2"] { --acc: var(--stage-2); }
html[data-vibe="spectrum"] .kit-card[data-kit="3"] { --acc: var(--stage-3); }
html[data-vibe="spectrum"] .kit-card[data-kit="4"] { --acc: var(--stage-4); }
html[data-vibe="spectrum"] .kit-card { --color-accent: var(--acc); --art-accent: var(--acc);
  --art-accent-soft: color-mix(in srgb, var(--acc) 17%, transparent);
  --art-tint: color-mix(in srgb, var(--acc) 12%, white);
  --art-deep-a: var(--acc); --art-deep-b: color-mix(in srgb, var(--acc) 78%, white);
  --art-flat-a: var(--acc); --art-flat-b: color-mix(in srgb, var(--acc) 78%, white);
  --color-border-accent: color-mix(in srgb, var(--acc) 36%, transparent); }
html[data-vibe="spectrum"] .kit-card__n { color: var(--acc); }

/* ---- 2. DUO — one warm colour, and it always means "an agent did this" ---- */
html[data-vibe="duo"] { --agent: #ea6b1f; }
html[data-vibe="duo"] .job__tag--agent,
html[data-vibe="duo"] .job--agent .job__tag {
  color: var(--agent);
  background: color-mix(in srgb, var(--agent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agent) 30%, transparent);
}
html[data-vibe="duo"] .job--agent .job__dot { background-color: var(--agent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent) 18%, transparent); }
html[data-vibe="duo"] .flow__step,
html[data-vibe="duo"] .kit-card[data-kit="4"] { --acc: var(--agent); }
html[data-vibe="duo"] .kit-card[data-kit="4"] { --color-accent: var(--agent); --art-accent: var(--agent);
  --art-accent-soft: color-mix(in srgb, var(--agent) 17%, transparent);
  --art-flat-a: var(--agent); --art-flat-b: color-mix(in srgb, var(--agent) 76%, white); }

/* ---- 3. DEEP — same single hue, but the neutrals stop being nearly white --- */
html[data-vibe="deep"]:not([data-theme="dark"]),
html[data-vibe="spectrum"]:not([data-theme="dark"]),
html[data-vibe="duo"]:not([data-theme="dark"]) {
  /* tinted from the live accent, not hardcoded indigo — otherwise a teal brand
     gets indigo bands and the two fight. */
  --color-bg-subtle: color-mix(in srgb, var(--color-accent) 6%, #f4f4f6);
  --color-canvas: color-mix(in srgb, var(--color-accent) 11%, #eeeef1);
  --color-well: color-mix(in srgb, var(--color-accent) 6%, #f4f4f6);
  /* derived from the live accent so the wash follows whichever family is on */
  --aurora-1: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --aurora-2: color-mix(in srgb, var(--color-accent-bright) 17%, transparent);
  --aurora-3: color-mix(in srgb, var(--color-accent) 9%, white 30%);
  --aurora-4: color-mix(in srgb, var(--color-accent-bright) 10%, transparent);
  --hero-wash: linear-gradient(180deg, #ffffff 0%,
      color-mix(in srgb, var(--color-accent) 3%, #fcfcfd) 42%,
      color-mix(in srgb, var(--color-accent) 9%, #f4f4f6) 100%);
  --color-spotlight: color-mix(in srgb, var(--color-accent) 10%, transparent);
  /* the canvas got darker, so the metadata grey has to follow it down */
  --color-fg-meta: #5f6070;
}

/* ==========================================================================
   HEADLINE TREATMENTS — [data-title] on <html>
   ========================================================================== */

.hero__mark { position: relative; display: inline-block; }
.hero__mark-stroke { display: none; }
.hero__swap { display: inline-block; }

/* ---- RULE — full contrast, weight does the hierarchy, and one drawn stroke */
html[data-title="rule"] .hero__title-line--soft {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
}
html[data-title="rule"] .hero__mark-stroke {
  display: block;
  position: absolute;
  left: -2%; right: -4%;
  bottom: 0.01em;
  height: 0.15em;
  background-color: var(--color-accent);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3,9.5 C38,4.2 74,11.4 112,6.2 C144,1.9 172,8.6 197,4.4' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3,9.5 C38,4.2 74,11.4 112,6.2 C144,1.9 172,8.6 197,4.4' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  transform-origin: left center;
  transform: scaleX(0);
  animation: mark-draw .75s var(--ease-out) .7s forwards;
}
@keyframes mark-draw { to { transform: scaleX(1); } }

/* ---- BLOCK — the word is set in the accent, the rest is ink */
html[data-title="block"] .hero__title-line--soft {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
}
html[data-title="block"] .hero__mark {
  padding: 0 .15em .04em;
  margin-inline: -.05em;
  border-radius: .1em;
  background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent-solid));
  color: #fff;
  transform: rotate(-1.6deg);
  box-shadow: 0 14px 34px -14px var(--color-glow), inset 0 1px 0 rgba(255,255,255,.22);
  animation: mark-set .6s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) .45s backwards;
}
@keyframes mark-set {
  from { transform: rotate(-7deg) scale(.9); opacity: 0; }
}
/* one accent only — "AI" steps back to ink here */
html[data-title="block"] .hero__title-accent {
  color: var(--color-fg);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ---- SWAP — the last word names a job, and the job keeps changing */
html[data-title="swap"] .hero__title-line--soft {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
}
html[data-title="swap"] .hero__swap {
  position: relative;
  color: var(--color-accent-solid);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out);
}
html[data-title="swap"] .hero__swap.is-out {
  opacity: 0;
  transform: translateY(-.14em);
}
html[data-title="swap"] .hero__swap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .05em;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-accent);
  opacity: .32;
}
html[data-title="swap"] .hero__title-accent {
  color: var(--color-fg);
  background: none;
  -webkit-text-fill-color: currentColor;
}


/* ---- COMBO — block sets the promise, the last word keeps changing ----------
   Two variants:
     combo      : swapping word in the accent (one colour hit per line)
     combo-ink  : swapping word in ink, carrying the hand-drawn stroke, so the
                  block and the stroke rhyme and the block stays the only fill
   In both, "AI" steps back to ink. Never three accents in one headline.        */
html[data-title="combo"] .hero__title-line--soft,
html[data-title="combo-ink"] .hero__title-line--soft {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
}
html[data-title="combo"] .hero__mark,
html[data-title="combo-ink"] .hero__mark {
  padding: 0 .15em .04em;
  margin-inline: -.05em;
  border-radius: .1em;
  background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent-solid));
  color: #fff;
  transform: rotate(-1.6deg);
  box-shadow: 0 14px 34px -14px var(--color-glow), inset 0 1px 0 rgba(255,255,255,.22);
  animation: mark-set .6s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) .45s backwards;
}
html[data-title="combo"] .hero__title-accent,
html[data-title="combo-ink"] .hero__title-accent {
  color: var(--color-fg);
  background: none;
  -webkit-text-fill-color: currentColor;
}
html[data-title="swap"] .hero__swap-wrap,
html[data-title="combo"] .hero__swap-wrap,
html[data-title="combo-ink"] .hero__swap-wrap {
  display: block;
}
html[data-title="combo"] .hero__swap,
html[data-title="combo-ink"] .hero__swap {
  position: relative;
  display: inline-block;
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out);
}
html[data-title="combo"] .hero__swap { color: var(--color-accent-solid); }
html[data-title="combo-ink"] .hero__swap { color: var(--color-fg); }
html[data-title="combo"] .hero__swap.is-out,
html[data-title="combo-ink"] .hero__swap.is-out {
  opacity: 0;
  transform: translateY(-.14em);
}
html[data-title="combo"] .hero__swap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .05em;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-accent);
  opacity: .32;
}
html[data-title="combo-ink"] .hero__swap::after {
  content: "";
  position: absolute;
  left: -1.5%; right: -1.5%; bottom: -.055em;
  height: .13em;
  background-color: var(--color-accent);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3,9.5 C38,4.2 74,11.4 112,6.2 C144,1.9 172,8.6 197,4.4' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3,9.5 C38,4.2 74,11.4 112,6.2 C144,1.9 172,8.6 197,4.4' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  html[data-title="rule"] .hero__mark-stroke { animation: none; transform: scaleX(1); }
  html[data-title="block"] .hero__mark,
  html[data-title="combo"] .hero__mark,
  html[data-title="combo-ink"] .hero__mark { animation: none; }
}

/* --- Display headline: three tones, one accent --- */
.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}

.hero__title-line {
  display: block;
}

/* Second clause steps back so the first one lands harder */
.hero__title-line--soft {
  color: var(--color-fg-display-soft);
  font-weight: var(--weight-bold);
  letter-spacing: -0.024em;
}

/* The single permitted accent — a two-stop vertical ink, not a rainbow */
.hero__title-accent {
  color: var(--color-accent-solid);
  font-weight: var(--weight-extrabold);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__title-accent {
    background-image: linear-gradient(
      170deg,
      var(--color-accent-bright) 0%,
      var(--color-accent-solid) 62%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }
}

.hero__subtitle {
  margin-top: var(--space-lg);
  color: var(--color-fg-secondary);
  text-wrap: pretty;
}
/* the three results carry the weight — they're the payoff, not a footnote */
.hero__subtitle b {
  font-weight: var(--weight-semibold);
  color: var(--color-fg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.hero__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-xl);
  max-width: 30rem;
  font-size: var(--font-size-body);
  line-height: 1.55;
  color: var(--color-fg-muted);
}
.hero__note svg { flex: 0 0 auto; margin-top: 4px; color: var(--color-success); }
.hero__note b { font-weight: var(--weight-semibold); color: var(--color-fg-secondary); }

.hero__library { min-width: 0; }

/* --------------------------------------------------------------------------
   8. COMPONENT — Library
   One big cover plus a readable list. No thumbnails to squint at.
   -------------------------------------------------------------------------- */

.library {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-lg), var(--shadow-inset-top);
  overflow: hidden;
}

.library::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--panel-sheen) 0%, transparent 100%);
}

/* --- Masthead --- */
.library__masthead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg) var(--space-sm);
}

.library__title {
  font-size: var(--font-size-body-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
}

.library__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-meta, var(--color-fg-muted));
}

/* --- The rail --- */
.library__rail {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-lg) var(--space-md);
}

.library__track {
  position: relative;
  height: 2px;
  margin-inline: 7%;
  border-radius: 2px;
  background-color: var(--color-border);
}

.library__progress {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 12%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
  transition: width 0.7s var(--ease-out);
}

.library__stops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -9px;
}

.library__stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 4px;
  background: none;
}

.library__stop-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-surface-solid);
  box-shadow: inset 0 0 0 2px var(--color-border);
  transition: background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.library__stop.is-done .library__stop-dot {
  background-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.library__stop.is-active .library__stop-dot {
  background-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent), 0 0 0 5px var(--color-accent-subtle);
}

.library__stop-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-muted);
  transition: color 0.4s var(--ease-out);
}
.library__stop.is-done .library__stop-name,
.library__stop.is-active .library__stop-name { color: var(--color-accent); }

/* --- The stage --- */
.library__stage {
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-canvas);
  box-shadow: var(--shadow-canvas-inset);
}

.library__caption {
  text-align: center;
  min-height: 3.4rem;
}
.library__caption-name {
  font-size: 1.175rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-fg);
}
.library__caption-what {
  margin-top: .28rem;
  font-size: .8125rem;
  font-weight: var(--weight-medium, 500);
  line-height: 1.45;
  color: var(--color-fg-muted);
  max-width: 30rem;
  margin-inline: auto;
}
.library__caption-name,
.library__caption-what { animation: cover-in .42s var(--ease-out) backwards; }

/* the featured cover, big enough to actually read */
.library__cover-slot {
  display: flex;
  justify-content: center;
  padding: var(--space-md) 0;
}
.library__cover {
  position: relative;
  display: block;
  width: 100%;
  max-width: 24.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--art-paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: cover-in .5s var(--ease-out) backwards;
}
.library__cover::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(168deg, rgba(255, 255, 255, .16) 0%, transparent 42%);
}
.library__cover svg { display: block; width: 100%; height: auto; }

@keyframes cover-in {
  from { opacity: 0; transform: translateY(9px) scale(.985); }
}

/* the four in this stage — one line each, name left, weight right */
.library__list {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--color-hairline);
}

.reslink {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.reslink:hover { background-color: var(--color-elevated); }
.reslink.is-active {
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
}

.reslink__mark {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.reslink.is-active .reslink__mark {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.reslink__name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  color: var(--color-fg-secondary);
  transition: color .25s var(--ease-out);
}
.reslink.is-active .reslink__name,
.reslink:hover .reslink__name { color: var(--color-fg); }
.reslink.is-active .reslink__name { font-weight: var(--weight-semibold); }

.reslink__meta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-meta, var(--color-fg-muted));
  white-space: nowrap;
  transition: color .25s var(--ease-out);
}
.reslink.is-active .reslink__meta { color: var(--color-accent); }

@media (max-width: 26rem) {
  .reslink { grid-template-columns: auto minmax(0, 1fr); row-gap: 3px; }
  .reslink__meta { grid-column: 2; }
}

.library__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-card);
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-meta, var(--color-fg-muted));
}
.library__footer-value { margin-left: auto; color: var(--color-fg-secondary); }

/* On a phone the full line wrapped to two rows and pushed "Free" onto a third,
   where it collided with the panel edge. Audit 2026-07-25, item 14. */
@media (max-width: 30rem) {
  .library__footer-more { display: none; }
}

/* Sheets behind — a library, not a single file */
.library-wrap { position: relative; }

.library-wrap::before,
.library-wrap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
}
.library-wrap::before { top: -10px; margin-inline: 18px; height: 40px; }
.library-wrap::after { top: -20px; margin-inline: 38px; height: 40px; opacity: 0.6; }

/* Hidden sprite host */
.art-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   9. SECTION — What you actually get
   A real bento: two wide cells, two narrow, each carrying a different
   artifact drawn at working fidelity. No icons — the artifact is the icon.
   -------------------------------------------------------------------------- */

.kitsec { border-top: 1px solid var(--color-hairline); }

.kit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  list-style: none;
  margin: 0; padding: 0;
}
@media (min-width: 64rem) {
  .kit { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kit__cell { grid-column: span 5; }
  .kit__cell--wide { grid-column: span 7; }
}
.kit__cell { min-width: 0; }

/* ---- the card shell ---- */
.kit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: clip;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.kit-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/* cursor spotlight */
.kit-card::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(22rem 22rem at var(--pointer-x, 50%) var(--pointer-y, 50%), var(--color-spotlight), transparent 62%);
  transition: opacity .35s var(--ease-out);
}
.kit-card:hover::after { opacity: 1; }

.kit-card__copy, .kit-card__art { position: relative; z-index: 2; }
.kit-card__copy { max-width: 30rem; }

.kit-card__n {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  opacity: .85;
}
.kit-card__title {
  margin-top: 10px;
  font-size: var(--font-size-h3);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-fg);
}
.kit-card__body {
  margin-top: 9px;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-fg-muted);
}

.kit-card__art {
  margin-top: var(--space-xl);
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
}


/* ==========================================================================
   ART 01 — the worksheet
   ========================================================================== */
.wsheet {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  overflow: clip;
}
.wsheet__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-hairline);
  background-color: var(--color-well);
}
.wsheet__brand, .wsheet__prog b {
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.wsheet__prog { display: inline-flex; align-items: center; gap: 8px; }
.wsheet__track {
  display: block; width: 46px; height: 4px; border-radius: 2px;
  background-color: var(--color-border); overflow: clip;
}
.wsheet__track i {
  display: block; height: 100%; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-solid));
  transition: width 1.1s var(--ease-out) .5s;
}
.kit-card.is-live .wsheet__track i { width: 50%; }

.wsheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--color-hairline);
}
@media (min-width: 34rem) { .wsheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wbox {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  min-height: 84px;
  padding: 11px 12px 12px;
  background-color: var(--color-surface-solid);
}
.wbox__n {
  position: absolute; top: 10px; right: 11px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--color-fg-subtle); opacity: .55;
}
.wbox__k {
  padding-right: 20px;
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.wbox__v {
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--color-fg-secondary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(.6s + var(--i) * .16s);
}
.kit-card.is-live .wbox__v { opacity: 1; transform: none; }

.wbox__r {
  display: block; height: 1px; width: 100%;
  background-color: var(--color-border);
}
.wbox__r + .wbox__r { margin-top: 9px; }

/* a filled box picks up a hairline of accent down its left edge */
.wbox.is-done::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background-color: var(--color-accent);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  transition-delay: calc(.55s + var(--i) * .16s);
}
.kit-card.is-live .wbox.is-done::before { opacity: .85; }
.wbox.is-done { background: linear-gradient(90deg, var(--color-accent-subtle) 0%, transparent 34%), var(--color-surface-solid); }

/* ==========================================================================
   ART 02 — the annotated page skeleton
   ========================================================================== */
.skel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  gap: var(--space-lg);
  width: 100%;
  align-items: stretch;
}
.skel__page {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 9px;
  padding: 14px 13px;
  min-height: 232px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
}
.skel__b { display: block; height: 7px; border-radius: 3px; background-color: var(--color-border-strong); }
.skel__b--h1 { height: 11px; width: 84%; background-color: var(--color-fg-subtle); opacity: .55; }
.skel__b--h2 { height: 11px; width: 58%; background-color: var(--color-fg-subtle); opacity: .4; }
.skel__b--p  { height: 5px; width: 100%; background-color: var(--color-border); }
.skel__b--p2 { height: 5px; width: 76%;  background-color: var(--color-border); }
.skel__cta {
  display: block; height: 18px; width: 62%; border-radius: 5px;
  background: linear-gradient(120deg, var(--color-accent-solid), var(--color-accent));
  box-shadow: 0 3px 10px -3px var(--color-glow);
}
.skel__cta--ghost {
  background: none;
  border: 1px solid var(--color-border-accent);
  box-shadow: none;
}
.skel__proof { display: flex; gap: 5px; margin-block: 2px; }
.skel__proof i { flex: 1 1 0; height: 13px; border-radius: 3px; background-color: var(--color-well); border: 1px solid var(--color-hairline); }

.skel__notes { position: relative; list-style: none; margin: 0; padding: 0; }
.skel__notes li {
  position: absolute;
  left: 0; top: var(--t);
  padding-left: 26px;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.skel__notes li:nth-child(1) { transition-delay: .35s; }
.skel__notes li:nth-child(2) { transition-delay: .5s; }
.skel__notes li:nth-child(3) { transition-delay: .65s; }
.skel__notes li:nth-child(4) { transition-delay: .8s; }
.kit-card.is-live .skel__notes li { opacity: 1; transform: none; }

/* leader line + node back toward the page */
.skel__notes li::before {
  content: "";
  position: absolute; left: calc(-1 * var(--space-lg)); top: 50%;
  width: calc(var(--space-lg) + 17px); height: 1px;
  background-color: var(--color-border-strong);
}
.skel__notes li::after {
  content: "";
  position: absolute; left: 15px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* ==========================================================================
   ART 03 — the prompt library
   ========================================================================== */
.plib {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  overflow: clip;
}
.prow {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-hairline);
  transition: background-color .3s var(--ease-out);
}
.prow:last-child { border-bottom: 0; }
.prow__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prow__nm { font-size: var(--font-size-xs); font-weight: var(--weight-medium); color: var(--color-fg-secondary); }
.prow__tool {
  flex: 0 0 auto;
  padding: 2px 7px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: var(--color-elevated);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.prow.is-open { background-color: var(--color-well); }
.prow.is-open .prow__nm { color: var(--color-fg); }
.prow.is-open .prow__tool { border-color: var(--color-border-accent); color: var(--color-accent); background-color: var(--color-accent-subtle); }
.prow__txt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.65;
  color: var(--color-fg-muted);
}
.prow__txt mark {
  padding: 1px 4px; border-radius: 3px;
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
}
.kit-card:hover .prow:not(.is-open) { background-color: var(--color-elevated); }

/* ==========================================================================
   ART 04 — the agent flow
   ========================================================================== */
.flow { width: 100%; display: grid; gap: 10px; }

.flow__trigger {
  display: inline-flex; flex-direction: column; gap: 1px;
  justify-self: start;
  padding: 8px 13px;
  border: 1px dashed var(--color-border-accent);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-subtle);
}
.flow__kick {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-accent);
}
.flow__trigger b { font-size: var(--font-size-xs); font-weight: var(--weight-semibold); color: var(--color-fg); }

.flow__steps {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 40rem) { .flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }

.fstep {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(.3s + var(--i) * .18s);
}
.kit-card.is-live .fstep { opacity: 1; transform: none; }
.fstep__n {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent); opacity: .85;
}
.fstep b { font-size: var(--font-size-xs); font-weight: var(--weight-semibold); color: var(--color-fg); line-height: 1.3; }
.fstep span:last-child { font-size: 10.5px; color: var(--color-fg-subtle); }

/* the connector between steps, with a pulse riding it */
@media (min-width: 40rem) {
  .fstep + .fstep::before {
    content: "";
    position: absolute; left: -22px; top: 50%;
    width: 22px; height: 1px;
    background-color: var(--color-border-strong);
  }
  .fstep + .fstep::after {
    content: "";
    position: absolute; left: -22px; top: 50%;
    width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
    opacity: 0;
  }
  .kit-card.is-live .fstep + .fstep::after {
    animation: flow-pulse 3.4s var(--ease-in-out) infinite;
  }
  .kit-card.is-live .fstep:nth-child(3)::after { animation-delay: .45s; }
}
@keyframes flow-pulse {
  0%       { opacity: 0;  transform: translateX(0); }
  12%      { opacity: 1; }
  46%, 100%{ opacity: 0;  transform: translateX(17px); }
}

.flow__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 9px;
  border-top: 1px solid var(--color-hairline);
}
.flow__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-success);
}
.flow__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background-color: var(--color-success);
  animation: flow-blink 2.4s var(--ease-in-out) infinite;
}
@keyframes flow-blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.flow__last {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-fg-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .wbox__v, .skel__notes li, .fstep { opacity: 1 !important; transform: none !important; }
  .wsheet__track i { width: 50% !important; }
  .kit-card.is-live .fstep + .fstep::after { animation: none; }
}


/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .workflow__canvas { padding: var(--space-xl) var(--space-2xl); }
  .workflow__node { padding: var(--space-lg); }
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: var(--grid-6-6);
    gap: clamp(3rem, 5vw, 5rem);
  }
  .hero__content { max-width: 32rem; }
}

@media (max-width: 47.99rem) {
  .kit { grid-template-columns: minmax(0, 1fr); }
  .workflow__node--trigger,
  .workflow__node--output { margin-inline: 0; }
  .workflow__link { height: 48px; }

}

@media (max-width: 29.99rem) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .button { width: 100%; }
  .kit-card { padding: var(--space-lg); }
  .workflow__path { display: none; }
}

/* --------------------------------------------------------------------------
   16. MOTION PREFERENCES
   -------------------------------------------------------------------------- */

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

/* ==========================================================================
   PAGE SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION — Twelve jobs, one person
   A board of the actual roles inside a one-person business. Every tile
   starts owned by "You". The switch hands nine of them to an agent and
   leaves the three that are genuinely the business.
   -------------------------------------------------------------------------- */

.jobs { background-color: var(--color-bg); }

.jobs__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}
@media (min-width: 64rem) {
  .jobs__inner { grid-template-columns: var(--grid-5-7); gap: var(--grid-gutter); }
}

.jobs__copy { max-width: 32rem; }
.jobs__lead { margin-top: var(--space-lg); color: var(--color-fg-secondary); }
.jobs__lead p + p { margin-top: var(--space-md); }

.jobs__beat {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-body-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-fg);
}
.jobs__beat em { font-style: normal; color: var(--color-accent); }

/* ---- the board ---------------------------------------------------------- */
.board {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-lg);
  overflow: clip;
}

.board__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 15px var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-well);
}
.board__label {
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.board__tally {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-fg-muted);
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out), background-color .5s var(--ease-out);
}
.board__tally b { color: var(--color-fg); font-weight: var(--weight-semibold); font-size: var(--font-size-xs); }
.board__tally.is-good { color: var(--color-success); border-color: var(--color-success-subtle); background-color: var(--color-success-subtle); }
.board__tally.is-good b { color: var(--color-success); }

.board__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
@media (min-width: 40rem) { .board__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- a single job ------------------------------------------------------- */
.job {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 17px 15px;
  background-color: var(--color-bg);
  transition:
    background-color .55s var(--ease-out),
    opacity .55s var(--ease-out);
  transition-delay: calc(var(--i) * 42ms);
}
.job::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, var(--color-success-subtle) 50%, transparent 70%);
  background-size: 280% 100%;
  background-position: 140% 0;
  opacity: 0;
}
.job__n {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-subtle); opacity: .5;
  transition: color .4s var(--ease-out), opacity .4s var(--ease-out);
  transition-delay: calc(var(--i) * 42ms);
}
.board.is-handed .job[data-owner="agent"] .job__n { opacity: .35; }
.job--core .job__n { color: var(--color-accent); opacity: .8; }

.job__name {
  padding-right: 24px;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  color: var(--color-fg);
}
.job__what {
  font-size: var(--font-size-xs);
  line-height: 1.45;
  color: var(--color-fg-muted);
  min-height: 2.6em;
}
.job__owner {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 3px; padding: 3px 9px 3px 7px;
  align-self: flex-start;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: var(--color-elevated);
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-fg-muted);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out), background-color .4s var(--ease-out);
  transition-delay: calc(var(--i) * 42ms);
}
.job__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background-color: var(--color-fg-subtle);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
  transition-delay: calc(var(--i) * 42ms);
}
.job__agent { display: none; }

/* the three that stay yours read as the real business */
.job--core { background-color: var(--color-well); }
.job--core::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-solid));
  opacity: .75;
  transition: opacity .5s var(--ease-out), width .5s var(--ease-out);
}
.board.is-handed .job--core::before { opacity: 1; width: 3px; }
.job--core .job__owner { border-color: var(--color-border-accent); color: var(--color-accent); background-color: var(--color-accent-subtle); }
.job--core .job__dot { background-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }

/* ---- handed over -------------------------------------------------------- */
.board.is-handed .job[data-owner="agent"] { opacity: .62; }
.board.is-handed .job[data-owner="agent"] .job__you { display: none; }
.board.is-handed .job[data-owner="agent"] .job__agent { display: inline; }
.board.is-handed .job[data-owner="agent"] .job__owner {
  color: var(--color-success);
  border-color: var(--color-success-subtle);
  background-color: var(--color-success-subtle);
}
.board.is-handed .job[data-owner="agent"] .job__dot {
  background-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-subtle);
}
.board.is-handed .job[data-owner="agent"]::after {
  animation: job-sweep .85s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 42ms);
}
@keyframes job-sweep {
  0%   { opacity: 0;  background-position: 140% 0; }
  35%  { opacity: 1; }
  100% { opacity: 0;  background-position: -60% 0; }
}

/* the core three lift once the noise falls away */
.board.is-handed .job--core {
  background-color: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border-accent);
  z-index: 1;
}

/* ---- foot --------------------------------------------------------------- */
.board__foot {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  padding: 13px var(--space-lg);
  background: var(--color-well);
}
.board__note {
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-fg-subtle);
}
@media (min-width: 48rem) { .board__note { margin-left: auto; } }

.board__switch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 7px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.board__switch:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.board__switch:active { transform: translateY(1px); }
.board__switch-track {
  position: relative; width: 30px; height: 17px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background-color: var(--color-border-strong);
  transition: background-color .35s var(--ease-out);
}
.board__switch-knob {
  position: absolute; top: 2.5px; left: 2.5px;
  width: 12px; height: 12px; border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15, 12, 60, .35);
  transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.board__switch[aria-pressed="true"] .board__switch-track { background-color: var(--color-success); }
.board__switch[aria-pressed="true"] .board__switch-knob { transform: translateX(13px); }

@media (prefers-reduced-motion: reduce) {
  .job, .job__owner, .job__dot { transition-delay: 0s !important; }
  .board.is-handed .job[data-owner="agent"]::after { animation: none; }
}

/* --------------------------------------------------------------------------
   SECTION — Anatomy
   -------------------------------------------------------------------------- */

.anatomy { background-color: var(--color-bg-subtle); border-top: 1px solid var(--color-hairline); }

.anatomy__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}
@media (min-width: 64rem) {
  .anatomy__inner { grid-template-columns: var(--grid-7-5); gap: var(--grid-gutter); }
}

/* the page being dissected */
.dissect {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-lg), var(--shadow-inset-top);
  padding: var(--space-lg);
  display: grid;
  gap: 12px;
}

.zone {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px;
  background-color: var(--color-well);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.zone.is-lit {
  border-color: var(--color-border-accent);
  background-color: var(--color-accent-subtle);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.zone__pin {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--color-surface-solid);
  box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--weight-medium);
  color: var(--color-fg-muted);
  transition: all 0.4s var(--ease-out);
}
.zone.is-lit .zone__pin {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--color-accent-subtle);
}

.zone__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.zone__card { border-radius: var(--radius-sm); padding: 9px 11px; font-size: var(--font-size-xs); line-height: 1.45; }
.zone__card--weak { background-color: var(--color-surface-solid); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-fg-subtle); }
.zone__card--strong { background-color: var(--color-surface-solid); box-shadow: inset 0 0 0 1px var(--color-border-accent); color: var(--color-fg); }
.zone__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.zone__card--weak .zone__tag { color: var(--color-fg-subtle); }
.zone__card--strong .zone__tag { color: var(--color-accent); }

.zone__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 7px;
}
.zone__field { height: 26px; border-radius: var(--radius-sm); background-color: var(--color-surface-solid); box-shadow: inset 0 0 0 1px var(--color-border); }
.zone__field + .zone__field { margin-top: 7px; }

.zone__prompt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--color-fg-muted);
}
.zone__prompt mark { background-color: var(--color-accent-subtle); color: var(--color-accent); padding: 1px 4px; border-radius: 3px; }
.zone__prompt-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--color-fg-subtle);
}
.zone__copy { margin-left: auto; padding: 3px 8px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-fg-secondary); }

.zone__time { display: flex; align-items: center; gap: 9px; }
.zone__time b {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-accent);
  padding: 4px 10px; border-radius: var(--radius-pill); background-color: var(--color-accent-subtle);
}
.zone__time span { font-size: var(--font-size-xs); color: var(--color-fg-muted); }

/* the key */
.keylist { display: grid; gap: 2px; }

.keyitem {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  padding: 14px;
  text-align: left;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  transition: background-color 0.35s var(--ease-out);
}
.keyitem:hover, .keyitem.is-active { background-color: var(--color-surface-solid); box-shadow: var(--shadow-sm); }

.keyitem__n {
  width: 24px; height: 24px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background-color: var(--color-well);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-fg-muted);
  transition: all 0.35s var(--ease-out);
}
.keyitem.is-active .keyitem__n { background-color: var(--color-accent); color: #fff; box-shadow: none; }

.keyitem h3 { font-size: var(--font-size-h4); letter-spacing: var(--tracking-tight); }
.keyitem p { margin-top: 5px; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-fg-muted); }

/* --------------------------------------------------------------------------
   SECTION — The AI part (dark)
   -------------------------------------------------------------------------- */

.aipart {
  position: relative;
  overflow: clip;
  color: #fff;
  background:
    radial-gradient(60rem 40rem at 78% -10%, var(--band-glow-a), transparent 62%),
    radial-gradient(40rem 32rem at 8% 100%, var(--band-glow-b), transparent 66%),
    linear-gradient(168deg, var(--band-1) 0%, var(--band-2) 52%, var(--band-3) 100%);
}

.aipart__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.aipart__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
@media (min-width: 64rem) { .aipart__inner { grid-template-columns: var(--grid-5-7); gap: var(--grid-gutter); } }

.aipart .section__eyebrow { color: var(--band-eyebrow); border-color: rgba(196, 192, 255, 0.28); background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.aipart .section__eyebrow::before { background-color: var(--band-eyebrow); box-shadow: 0 0 0 3px rgba(196, 192, 255, 0.18); }
.aipart h2 { color: #fff; }
.aipart__lead { margin-top: var(--space-lg); font-size: var(--font-size-body-lg); line-height: 1.6; color: rgba(233, 231, 255, 0.76); max-width: 30rem; }
.aipart__lead p + p { margin-top: var(--space-md); }

.aipart__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-xl); }
.aipart__facts span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--radius-pill);
  border: 1px solid rgba(196, 192, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
  font-size: var(--font-size-sm); font-weight: var(--weight-medium); color: rgba(233, 231, 255, 0.9);
}

/* the live prompt */
.promptdemo {
  border: 1px solid rgba(196, 192, 255, 0.24);
  border-radius: var(--radius-lg);
  background: rgba(10, 8, 46, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 90px -40px rgba(4, 3, 26, 0.9);
  overflow: hidden;
}

.promptdemo__bar {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(196, 192, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(214, 211, 255, 0.6);
}

.promptdemo__copy {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-sm);
  border: 1px solid rgba(196, 192, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #e9e7ff;
  transition: all 0.3s var(--ease-out);
}
.promptdemo__copy:hover { background: rgba(255, 255, 255, 0.14); }
.promptdemo__copy.is-copied { color: #4fd9a0; border-color: rgba(79, 217, 160, 0.4); }

.promptdemo__text {
  margin: 0;
  padding: 20px 18px 22px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.85;
  color: rgba(233, 231, 255, 0.86);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 12.5em;
}
.promptdemo__text mark { background: rgba(196, 192, 255, 0.2); color: #e2e0ff; padding: 1px 5px; border-radius: 4px; }
.promptdemo__caret { display: inline-block; width: 7px; height: 1.05em; translate: 0 0.2em; background-color: var(--band-eyebrow); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.promptdemo__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 13px 16px; border-top: 1px solid rgba(196, 192, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}
.promptdemo__tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid rgba(196, 192, 255, 0.22);
  font-size: var(--font-size-xs); font-weight: var(--weight-medium); color: rgba(233, 231, 255, 0.86);
}
.promptdemo__tool::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background-color: #a6a0ff; }
.promptdemo__note { margin-left: auto; font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(214, 211, 255, 0.5); }

/* --------------------------------------------------------------------------
   SECTION — Field notes
   -------------------------------------------------------------------------- */

.notes { background-color: var(--color-bg); }
.notes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-3xl); }
.notes__head .section__header { margin-bottom: 0; }

.postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 61.99rem) { .postgrid { grid-template-columns: minmax(0, 1fr); } }

.post {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-sm), var(--shadow-inset-top);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s var(--ease-out);
}
.post:hover { transform: translateY(-5px); border-color: var(--color-border-strong); box-shadow: var(--shadow-md), var(--shadow-inset-top); }

.post__img { aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(150deg, var(--color-accent-subtle), var(--color-canvas)); font-size: 0; color: transparent; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.post:hover .post__img img { transform: scale(1.05); }

.post__body { padding: var(--space-lg); }
.post__meta { display: flex; gap: 12px; font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-subtle); margin-bottom: 11px; }
.post h3 { font-size: var(--font-size-h4); letter-spacing: var(--tracking-tight); line-height: 1.32; }
.post__more { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--space-md); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); color: var(--color-accent); }
.post__more svg { transition: transform 0.4s var(--ease-out); }
.post:hover .post__more svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   SECTION — Maker
   -------------------------------------------------------------------------- */

.maker { background-color: var(--color-bg-subtle); border-top: 1px solid var(--color-hairline); }
.maker__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
@media (min-width: 48rem) { .maker__inner { grid-template-columns: var(--grid-5-7); gap: var(--grid-gutter); } }
.makercard { max-width: 17.5rem; }



/* the maker card — a business of one, stated plainly */
.makercard {
  align-self: start;
  width: 100%; max-width: 15.5rem;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-md);
}
.makercard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.makercard__mono {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--color-accent-solid), #241c7a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-sm);
  font-size: 1rem; font-weight: var(--weight-extrabold); letter-spacing: -0.04em; color: #fff;
}
.makercard__live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-success-subtle);
  background-color: var(--color-success-subtle);
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-success);
}
.makercard__live i {
  width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-success);
  animation: maker-pulse 2.6s var(--ease-in-out) infinite;
}
@keyframes maker-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.makercard__name { margin-top: var(--space-md); font-size: var(--font-size-body); font-weight: var(--weight-semibold); color: var(--color-fg); }
.makercard__role { margin-top: 2px; font-size: var(--font-size-xs); color: var(--color-fg-muted); }

.makercard__facts { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); display: grid; gap: 7px; }
.makercard__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.makercard__facts dt {
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-subtle);
}
.makercard__facts dd { margin: 0; font-size: var(--font-size-xs); font-weight: var(--weight-medium); color: var(--color-fg-secondary); }

.maker q { display: block; font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: 1.38; quotes: none; }
.maker q em { font-style: normal; color: var(--color-accent); }
.maker__who { margin-top: var(--space-lg); font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.maker__who b { display: block; font-size: var(--font-size-body); font-weight: var(--weight-semibold); color: var(--color-fg); margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   SECTION — Objections
   -------------------------------------------------------------------------- */

.faq { background-color: var(--color-bg); }
.faq__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 64rem) { .faq__inner { grid-template-columns: var(--grid-5-7); gap: var(--grid-gutter); } }

.qa { border-top: 1px solid var(--color-border); }

.qa__item { border-bottom: 1px solid var(--color-border); }

.qa__q {
  display: flex; align-items: center; gap: var(--space-md);
  width: 100%; padding: var(--space-lg) 0;
  text-align: left; border: 0; background: none;
  font-size: 1.0625rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
  transition: color 0.3s var(--ease-out);
}
.qa__q:hover { color: var(--color-accent); }

.qa__sign {
  margin-left: auto; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: all 0.4s var(--ease-out);
}
.qa__sign svg { transition: transform 0.4s var(--ease-out); }
.qa__item.is-open .qa__sign { background-color: var(--color-accent); box-shadow: none; color: #fff; }
.qa__item.is-open .qa__sign svg { transform: rotate(45deg); }

.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.qa__item.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p {
  padding-bottom: var(--space-lg);
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--color-fg-secondary);
  max-width: 40rem;
}
.qa__a b { color: var(--color-fg); font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   SECTION — Final CTA
   -------------------------------------------------------------------------- */

.final {
  position: relative;
  overflow: clip;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(52rem 34rem at 50% -14%, var(--band-glow-a), transparent 62%),
    radial-gradient(36rem 28rem at 10% 110%, var(--band-glow-b), transparent 66%),
    linear-gradient(170deg, var(--band-2) 0%, var(--band-1) 46%, var(--band-3) 100%);
}
.final__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}
.final__inner { position: relative; z-index: 1; max-width: 44rem; margin-inline: auto; }
.final .section__eyebrow { color: var(--band-eyebrow); border-color: rgba(196, 192, 255, 0.28); background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.final .section__eyebrow::before { background-color: var(--band-eyebrow); box-shadow: 0 0 0 3px rgba(196, 192, 255, 0.18); }
.final h2 { color: #fff; }
.final__lead { margin: var(--space-lg) auto 0; font-size: var(--font-size-body-lg); line-height: 1.6; color: rgba(233, 231, 255, 0.78); max-width: 32rem; }
.final__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-2xl); }
.final .button--primary { background-color: #fff; color: var(--band-1); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5), 0 10px 30px -12px rgba(4,3,26,.9); }
.final .button--primary:hover { background-color: #efedff; }
.final .button--secondary { background: rgba(255,255,255,.08); border-color: rgba(196,192,255,.3); color: #fff; box-shadow: none; }
.final .button--secondary:hover { background: rgba(255,255,255,.15); border-color: rgba(196,192,255,.5); }
.final__note { margin-top: var(--space-lg); font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(214, 211, 255, 0.55); }

.final__strip { position: relative; z-index: 1; display: flex; justify-content: center; gap: var(--space-md); margin-top: var(--space-3xl); flex-wrap: wrap; }
.final__strip span {
  display: block; width: 116px;
  border: 1px solid rgba(196, 192, 255, 0.28);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(4, 3, 26, 0.9);
  transition: transform 0.5s var(--ease-out);
}
.final__strip span:nth-child(1) { transform: rotate(-3deg); }
.final__strip span:nth-child(2) { transform: rotate(1.5deg) translateY(-6px); }
.final__strip span:nth-child(3) { transform: rotate(-1deg); }
.final__strip span:nth-child(4) { transform: rotate(2.5deg) translateY(-4px); }
.final__strip:hover span { transform: rotate(0) translateY(-10px); }
.final__strip svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.foot { background-color: var(--color-bg-subtle); border-top: 1px solid var(--color-border); padding-block: var(--space-3xl) var(--space-xl); }
.foot__inner { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
@media (max-width: 47.99rem) { .foot__inner { grid-template-columns: 1fr 1fr; } }

.foot__brand { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); margin-bottom: var(--space-md); }
.foot__mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg, var(--color-accent-solid), #241c7a); color: #fff; font-size: 13px; font-weight: var(--weight-extrabold); }
.foot__blurb { max-width: 22rem; font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-fg-muted); }
.foot h4 { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-fg-subtle); margin-bottom: var(--space-md); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot li a { font-size: var(--font-size-sm); color: var(--color-fg-secondary); transition: color 0.3s var(--ease-out); }
.foot li a:hover { color: var(--color-accent); }
.foot__bar { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-subtle); }

/* --- Anatomy: make it a real page, not a diagram --- */
.dissect { padding: 0; overflow: hidden; gap: 0; display: block; }

.dissect__masthead {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 34px;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: linear-gradient(120deg, var(--band-1) 0%, var(--color-accent-solid) 62%, var(--color-accent-bright) 100%);
}
.dissect__num { font-size: 1.75rem; font-weight: var(--weight-extrabold); letter-spacing: -0.04em; color: #fff; line-height: 1; }
.dissect__kick { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 5px; }
.dissect__title { font-size: 1rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: #fff; }
.dissect__glass { width: 34px; height: 34px; border-radius: var(--radius-lg); background: rgba(255,255,255,.2); display: grid; place-items: center; }
.dissect__glass svg { color: #fff; }

.dissect__body { display: grid; gap: 12px; padding: 18px; }

.dissect__foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--color-border); background-color: var(--color-well);
}
.dissect__dots { display: flex; gap: 5px; }
.dissect__dots i { width: 14px; height: 3px; border-radius: 2px; background-color: var(--color-border-strong); }
.dissect__dots i.on { width: 20px; background-color: var(--color-accent); }
.dissect__next { margin-left: auto; font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-subtle); }
.dissect__next b { color: var(--color-accent); font-weight: var(--weight-medium); }

.zone {
  transition:
    border-color 0.45s var(--ease-out),
    background-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.zone.is-lit { transform: translateX(4px); }

/* --- AI: what good output looks like --- */
.promptdemo__out {
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(196, 192, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}
.promptdemo__out-label {
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: rgba(214, 211, 255, 0.55); margin-bottom: 12px;
}
.promptdemo__out ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.promptdemo__out li {
  display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px;
  font-size: var(--font-size-sm); line-height: 1.5; color: rgba(233, 231, 255, 0.82);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.promptdemo.is-answered li { opacity: 1; transform: none; }
.promptdemo.is-answered li:nth-child(2) { transition-delay: 0.14s; }
.promptdemo.is-answered li:nth-child(3) { transition-delay: 0.28s; }
.promptdemo__out li span {
  width: 17px; height: 17px; border-radius: 5px; margin-top: 2px;
  display: grid; place-items: center;
  background: rgba(79, 217, 160, 0.18);
  color: #4fd9a0;
}

/* --- Field notes: richer cards --- */
.post__img { position: relative; }
.post__img::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 40, 0.5));
  pointer-events: none;
}
.post__cat {
  position: absolute; z-index: 2; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-solid-hover);
}
.post__cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-accent-solid); }
.post__index {
  position: absolute; z-index: 2; right: 14px; top: 14px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tracking-wide);
  color: rgba(255,255,255,.85);
  padding: 4px 9px; border-radius: var(--radius-pill); background: rgba(10,8,40,.4); backdrop-filter: blur(6px);
}
.post__meta { justify-content: flex-start; }

/* --- Maker: a designed medallion --- */
.maker__sig { margin-top: var(--space-lg); display: flex; align-items: center; gap: 12px; }
.maker__sig svg { color: var(--color-accent); opacity: 0.85; }
.maker__sig span { font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-subtle); }

/* --- Objections: numbered, with an accent edge --- */
.qa__item { position: relative; }
.qa__item::before {
  content: "";
  position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background-color: var(--color-accent);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 0.5s var(--ease-out);
}
.qa__item.is-open::before { transform: scaleY(1); }
.qa__q { padding-left: var(--space-lg); }
.qa__a p { padding-left: var(--space-lg); }
.qa__n {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-fg-subtle);
  transition: color 0.35s var(--ease-out);
}
.qa__item.is-open .qa__n { color: var(--color-accent); }

/* --- Final CTA: stagger the fan --- */
.final__strip span { animation: fan-in 0.7s var(--ease-out) backwards; }
.final__strip span:nth-child(1) { animation-delay: 0.05s; }
.final__strip span:nth-child(2) { animation-delay: 0.15s; }
.final__strip span:nth-child(3) { animation-delay: 0.25s; }
.final__strip span:nth-child(4) { animation-delay: 0.35s; }
@keyframes fan-in { from { opacity: 0; transform: translateY(26px) rotate(0); } }

.final__timer {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: var(--space-xl);
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(196, 192, 255, 0.26);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono); font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(233, 231, 255, 0.8);
}
.final__timer svg { color: var(--band-eyebrow); }


/* --------------------------------------------------------------------------
   HERO FOLD BUDGET
   With a 63px header the hero column has to fit the headline, the subhead, both
   buttons AND the reassurance line inside 720px on a 1280x720 laptop. Every
   value below was measured, not guessed: the stack was 598px and needed to be
   ~512px. Nothing was deleted — the air between blocks was simply doing more
   than it needed to.
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(1.5rem, 2.2vw, 2.5rem) clamp(4rem, 6vw, 5.5rem); }
.hero__kicker   { margin-bottom: clamp(0.75rem, 1.1vw, 1rem); }
.hero__title    { font-size: clamp(2.5rem, 5.05vw, 4.5rem); line-height: 1.045; }
.hero__subtitle { margin-top: clamp(1rem, 1.4vw, 1.35rem); }
.hero__actions  { margin-top: clamp(1.5rem, 2.3vw, 2.25rem); }
.hero__note     { margin-top: clamp(1.1rem, 1.6vw, 1.5rem); }

@media (min-width: 90rem) {
  /* past 1440 the fold stops binding, so the hero gets its air back */
  .hero { padding-block: 3.25rem clamp(4rem, 6vw, 5.5rem); }
  .hero__actions { margin-top: 2.5rem; }
  .hero__note { margin-top: 1.75rem; }
}

/* The binding constraint is viewport HEIGHT, not width, so the last of the
   budget comes from height queries rather than more width clamps. Tall screens
   keep the full setting. */
@media (max-height: 780px) {
  .sitehead__inner { min-height: 64px; padding-block: 9px; }
  .hero { padding-block: 1rem clamp(3.5rem, 5vw, 5rem); }
  .hero__title { font-size: clamp(2.375rem, 4.6vw, 4.5rem); }
  .hero__kicker { margin-bottom: 0.7rem; }
  .hero__actions { margin-top: 1.4rem; }
  .hero__note { margin-top: 1rem; }
}
@media (max-height: 680px) {
  .sitehead__inner { min-height: 58px; padding-block: 7px; }
  .hero { padding-block: 0.75rem clamp(3rem, 4.5vw, 4.5rem); }
  .hero__title { font-size: clamp(2.125rem, 4vw, 4.5rem); }
  .hero__subtitle { margin-top: 0.85rem; font-size: var(--font-size-body); }
  .hero__actions { margin-top: 1.15rem; }
  .hero__note { margin-top: 0.85rem; }
}

@media (max-height: 660px) {
  /* At 640px of usable height something has to go. The audience chip is the
     cheapest thing on the page — the swapping headline already names who this
     is for, twice, in the reader's own vocabulary. */
  .hero__kicker { display: none; }
  .hero { padding-block: 0.85rem 2.75rem; }
  .hero__title { font-size: clamp(2rem, 3.7vw, 4.5rem); }
  .hero__actions { margin-top: 1rem; }
}


/* ---- Host-environment correction (26 Jul 2026) -------------------------------
   The Bricks theme sets html{font-size:62.5%} site-wide, so 1rem resolved to 10px.
   This stylesheet is authored against the 16px browser default, so every rem value
   -- type scale, column widths, artifact scale -- was rendering at 62.5% of intent.
   Bricks also forces body{font-size:17px!important}, bypassing the type scale.
   Corrected here. Scoped safely: home.css is enqueued on page 20313 only.
   ---------------------------------------------------------------------------- */
html { font-size: 16px !important; }
/* ss-critical-responsive.php injects html body{font-size:17px!important;font-family:...!important;line-height:1.7}
   at wp_head priority 99999, i.e. after this file. 'html body' is specificity 0,0,2, so a bare
   'body' rule loses even with !important. body.ss-home-v12 is 0,1,2 and wins. */
html body.ss-home-v12 {
	font-size: var(--font-size-body-lg) !important;
	line-height: var(--leading-body) !important;
	font-family: var(--font-sans) !important;
}


/* ============================================================================
   MOBILE NAVIGATION — added 26 Jul 2026
   Mirrors the live simplestartup.net header: the Bricks offcanvas #brxe-0fgrar
   is direction=right, close-on=backdrop, no-scroll=true, effect=slide, and its
   trigger appears at <=860px. Reimplemented self-contained so this page keeps
   no dependency on bricks.min.js.
   ========================================================================== */

.sitehead__burger { display: none; }
.mobnav, .mobnav-scrim { display: none; }

@media (max-width: 860px) {

  /* the live site hides BOTH the links and the header CTA at this width */
  .sitehead__nav { display: none !important; }

  .sitehead__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-left: auto;
    min-width: 88px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg, 13px);
    background: var(--color-surface-solid);
    color: var(--color-fg);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--weight-bold, 700);
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.22s var(--ease-out), background-color 0.22s var(--ease-out);
  }
  .sitehead__burger:hover,
  .sitehead__burger:focus-visible { border-color: var(--color-accent-solid); }

  .sitehead__burger-icon { position: relative; display: block; width: 18px; height: 12px; }
  .sitehead__burger-icon i {
    position: absolute; left: 0; right: 0; height: 2px;
    border-radius: 2px; background-color: var(--color-accent-solid);
    transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
  }
  .sitehead__burger-icon i:nth-child(1) { top: 0; }
  .sitehead__burger-icon i:nth-child(2) { top: 5px; }
  .sitehead__burger-icon i:nth-child(3) { top: 10px; }

  .sitehead__burger[aria-expanded="true"] .sitehead__burger-icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .sitehead__burger[aria-expanded="true"] .sitehead__burger-icon i:nth-child(2) { opacity: 0; }
  .sitehead__burger[aria-expanded="true"] .sitehead__burger-icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .mobnav-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 90;
    background-color: rgba(24, 24, 27, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.32s var(--ease-out), visibility 0.32s var(--ease-out);
  }
  .mobnav-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

  .mobnav {
    display: flex;
    flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
    width: min(84vw, 360px);
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-surface-solid, #fff);
    box-shadow: 0 0 60px rgba(11, 17, 32, 0.35);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 0.34s var(--ease-out), visibility 0.34s var(--ease-out);
  }
  .mobnav.is-open { transform: translateX(0); visibility: visible; }

  .mobnav__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
  .mobnav__brand {
    font-size: var(--font-size-h4); font-weight: var(--weight-extrabold, 800);
    letter-spacing: -0.035em; color: var(--color-fg); text-decoration: none; white-space: nowrap;
  }
  .mobnav__brand b { font-weight: inherit; color: var(--color-accent); }

  .mobnav__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px;
    border: 0; border-radius: 12px; background: transparent;
    color: var(--color-fg-secondary); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
  }
  .mobnav__close:hover, .mobnav__close:focus-visible { color: var(--color-fg); background-color: var(--color-bg-subtle); }

  .mobnav__kick {
    margin: 0 0 8px; padding-left: 12px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--font-size-2xs); font-weight: var(--weight-medium, 500);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-solid);
  }

  .mobnav__nav { display: flex; flex-direction: column; }
  .mobnav__link {
    display: block; padding: 15px 12px; border-radius: 10px;
    border-bottom: 1px solid var(--color-hairline);
    color: var(--color-fg); text-decoration: none;
    font-size: var(--font-size-body); font-weight: var(--weight-semibold, 600);
    letter-spacing: -0.01em;
    transition: color 0.16s var(--ease-out), background-color 0.16s var(--ease-out);
  }
  .mobnav__link:last-child { border-bottom: 0; }
  .mobnav__link:hover, .mobnav__link:focus-visible { color: var(--color-accent-solid); background-color: var(--color-bg-subtle); }

  .mobnav__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 20px; padding: 14px 18px;
    border-radius: var(--radius-lg, 13px);
    background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent-solid));
    box-shadow: 0 12px 26px -12px var(--color-glow), inset 0 1px 0 rgba(255,255,255,.22);
    color: #fff; text-decoration: none;
    font-size: var(--font-size-body); font-weight: var(--weight-bold, 700); letter-spacing: -0.012em;
  }

  .mobnav__blurb {
    margin: 14px 0 0; padding: 0 2px;
    color: var(--color-fg-secondary);
    font-size: var(--font-size-sm); line-height: 1.6;
  }

  body.mobnav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .mobnav, .mobnav-scrim, .sitehead__burger-icon i { transition-duration: 0.01ms !important; }
}