/* GENERATED by scripts/bundle_css.py from the sheets named below, in this
   order. Do not edit: edit the source sheet and rerun the script. */
/* ==== bundle/fonts.css (Literata, Permanent Marker, Plus Jakarta Sans, Sarabun) ==== */
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/google/plus-jakarta-sans-normal-latin-ext-42f3e901.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/google/plus-jakarta-sans-normal-latin-a389d97d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/static/fonts/google/literata-italic-latin-ext-1a60888c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/static/fonts/google/literata-italic-latin-e17c7273.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/google/literata-normal-latin-ext-0f7198a9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/google/literata-normal-latin-a9e1489a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/google/sarabun-normal-latin-ext-d980e0fe.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/google/sarabun-normal-latin-f14b9313.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/google/sarabun-normal-latin-ext-5236e7e1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/google/sarabun-normal-latin-dd49cf3c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/google/sarabun-normal-latin-ext-40d10b7c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/google/sarabun-normal-latin-121ca6f5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/google/sarabun-normal-latin-ext-48e34983.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/google/sarabun-normal-latin-1fc160e2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/google/permanent-marker-normal-latin-f5617a0f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==== mobile-form-controls.css ==== */
/* Prevent iOS Safari from zooming the page when a user focuses small form controls. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    [contenteditable="true"],
    [role="textbox"] {
        font-size: var(--text-base) !important;
    }
}

/* ==== tokens.css ==== */
/* =============================================================================
   CSS v2 TOKENS - Single Source of Truth

   4-LAYER HIERARCHY:
   1. PRIMITIVES  - Raw values (colors, spacing, fonts)
   2. SEMANTIC    - Meaning-based tokens (surfaces, text, accents)
   3. COMPONENT   - Per-component variables
   4. THEME       - House overrides (applied via [data-house-theme])
   ============================================================================= */

/* =============================================================================
   LAYER 1: PRIMITIVES
   Raw design values. Change these for global updates.
   ============================================================================= */
/* Plus Jakarta Sans: geometric display font for Paper layer headings */
/* (Google Fonts: self-hosted in css/bundle/fonts.css) */
/* @import mobile-form-controls.css: inlined above */

@font-face {
    font-family: 'Sharpie Fallback';
    src: url('/static/fonts/scratch-font/scratch-font.woff2?v=20260603h') format('woff2'),
         url('/static/fonts/scratch-font/scratch-font.woff?v=20260603h') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* -------------------- Colors: Grayscale -------------------- */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-50:  #fafafa;
    --color-gray-100: #f4f4f5;
    --color-gray-200: #e4e4e7;
    --color-gray-300: #d4d4d8;
    --color-gray-400: #a1a1aa;
    --color-gray-500: #71717a;
    --color-gray-600: #52525b;
    --color-gray-700: #3f3f46;
    --color-gray-800: #27272a;
    --color-gray-900: #18181b;
    --color-gray-950: #09090b;

    /* -------------------- Colors: Brand -------------------- */
    --color-teal-50:  #f0fdfa;
    --color-teal-100: #ccfbf1;
    --color-teal-200: #99f6e4;
    --color-teal-300: #5eead4;
    --color-teal-400: #2dd4bf;
    --color-teal-500: #14b8a6;
    --color-teal-600: #1A8F80;
    --color-teal-700: #156B60;

    --color-purple-50:  #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    /* Steven 2026-09-23 (supersedes the 2026-08-13 violet ruling and the
       2026-08-03 "one purple" note): the site purple is the Toll Bench DARK
       PURPLE #5534a5, on both sites, everywhere in the design system. 500/600
       ARE that purple; 700 (#432982) is its pressed/darker shade. The old
       violet #9333ea / #7c3aed is retired from the tokens. */
    --color-purple-500: #5534a5;
    --color-purple-600: #5534a5;
    --color-purple-700: #432982;

    /* Legacy orange aliases kept for old selectors; values map to brand yellow. */
    --color-orange-50:  #fefce8;
    --color-orange-100: #fef9c3;
    --color-orange-400: #f7ef5e;
    --color-orange-500: #f2e841;
    --color-orange-600: #d8cf22;

    --color-red-50:  #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;

    --color-green-50:  #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;

    --color-yellow-50:  #fefce8;
    --color-yellow-100: #fef9c3;
    /* Steven 2026-08-13: amber values retired — they read ORANGE next to the
       brand yellow. 400 = the pill yellow (--highlight-yellow), 500 = the darker
       brand shade (same ramp as the orange aliases above). */
    --color-yellow-400: #f2e841;
    --color-yellow-500: #d8cf22;

    --color-blue-50:  #eff6ff;
    --color-blue-100: #dbeafe;
    /* Steven 2026-08-13: generic blues retired — the site's blue is
       --highlight-blue. 600 is its darker shade. */
    --color-blue-500: #0112f7;
    --color-blue-600: #010ec6;

    /* -------------------- Colors: Cyan (Book of Houses Brand) -------------------- */
    --color-cyan-400: #22d3ee;
    --color-cyan-500: #00f3ff;
    --color-cyan-600: #00c4cc;
    --color-cyan-700: #0891b2;

    /* -------------------- Colors: Extended Palette -------------------- */
    --color-magenta-500: #db1cd0;
    --color-sky-500: #62c5e2;
    --color-brightcyan-500: #60e8fc;

    /* -------------------- Colors: Toll Bench Sheets -------------------- */
    --color-tb-meta: #6b7280;
    --color-tb-avatar: #f3d9dd;

    /* -------------------- Colors: Dark Theme -------------------- */
    --color-dark-900: #030308;
    --color-dark-800: #0a0e1a;
    --color-dark-700: #0c1424;
    --color-dark-600: #141c2e;
    --color-dark-500: #1e2a3e;

    /* -------------------- Spacing Scale -------------------- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* -------------------- Typography: Font Stacks -------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: var(--font-sans);
    --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --font-serif: 'Literata', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
    --font-sarabun: 'Sarabun', 'Inter', -apple-system, sans-serif;
    --font-sharpie: 'Permanent Marker', 'Sharpie Fallback', var(--font-heading);
    --font-scratch: var(--font-sharpie);

    /* -------------------- Typography: Size Scale -------------------- */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2rem;      /* 32px */
    --text-5xl: 3.5rem;    /* 56px */

    /* -------------------- Typography: Weights -------------------- */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* -------------------- Typography: Line Heights -------------------- */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* -------------------- Typography: Letter Spacing -------------------- */
    --tracking-tight: -0.03em;
    --tracking-snug: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;

    /* -------------------- Sizing -------------------- */
    --size-3: 12px;
    --size-4: 16px;
    --size-5: 20px;
    --size-6: 24px;
    --size-8: 32px;
    --size-10: 40px;
    --size-12: 48px;
    --size-14: 56px;
    --size-16: 64px;
    --size-20: 80px;
    --size-24: 96px;
    --size-32: 128px;

    /* -------------------- Border Radius -------------------- */
    --radius-xs: 2px;      /* Near-square: tooltips, sharp UI */
    --radius-sm: 8px;      /* Tags, badges, chips */
    --radius-md: 12px;     /* Inputs, list items */
    --radius-lg: 16px;     /* Cards, panels */
    --radius-xl: 20px;     /* Modals, large panels */
    --radius-2xl: 24px;    /* Feed cards (unchanged) */
    --radius-card: 20px;   /* Standard card */
    --radius-hero: 28px;   /* Hero sections */
    --radius-full: 9999px;

    /* -------------------- Shadows -------------------- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.06);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);

    /* -------------------- Gallery Layer -------------------- */
    --gallery-canvas: #0B1120;
    --gallery-card: #141c2f;
    --gallery-text-primary: #f8fafc;
    --gallery-text-secondary: #94a3b8;
    --gallery-border: rgba(255,255,255,0.06);
    --gallery-accent-emerald: #10b981;
    --gallery-accent-cyan: #00f3ff;
    --gallery-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    --gallery-shadow-hover: 0 30px 60px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    --gallery-drawer-bg: #141c2f;
    --gallery-houndstooth:
        linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%),
        linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%);
    --gallery-houndstooth-size: 20px 20px;
    --gallery-houndstooth-pos: 0 0, 10px 10px, 0 0, 10px 10px;
    --houndstooth-light:
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%),
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%),
        linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%),
        linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%);
    --houndstooth-light-size: 20px 20px;
    --houndstooth-light-pos: 0 0, 10px 10px, 0 0, 10px 10px;

    /* -------------------- Transitions -------------------- */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

    /* -------------------- Z-Index Scale --------------------
       -1   behind      Pseudo-elements behind parent
        0   base        Default stacking
       50   rail/topbar House rail, app top bar
      100   dropdown    Dropdown menus
      150   essence     Essence effects, discussion drawer
      200   sticky      Sticky headers, top bar pill
      300   overlay     Mobile menus, context overlays
      400   modal       Standard modals, dialogs
      500   toast       Toast notifications, popovers
     1000   fab         Floating action buttons, bottom nav
     1001   fab-above   FAB menu, items above FAB
     1100   panel       Sidebar panels, persistent drawers
     9000   fullscreen  Full-screen mobile modals
     9349-9450          Content/utility/detail overlay pairs
     9998   effect-pre  Essence sprites, Lumina toasts
     9999   spectacle   Cosmetic effects layer
    10000   critical    Evolution flow, voice, design review
    10001   critical+   Above critical (shop PDP, 3D)
   999999   emergency   Bug capture — absolute last resort
       -------------------------------------------------------- */
    --z-behind: -1;
    --z-base: 0;
    --z-rail: 50;
    --z-topbar: 50;
    --z-dropdown: 100;
    --z-essence: 150;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-fab: 1000;
    --z-fab-above: 1001;
    --z-panel: 1100;
    --z-fullscreen: 9000;
    --z-content-overlay: 9350;
    --z-content-overlay-backdrop: 9349;
    --z-utility-overlay: 9400;
    --z-utility-overlay-backdrop: 9399;
    --z-detail-overlay: 9450;
    --z-detail-overlay-backdrop: 9449;
    --z-effect-pre: 9998;
    --z-spectacle: 9999;
    --z-critical: 10000;
    --z-critical-above: 10001;
    --z-emergency: 999999;

    /* -------------------- Circle-Reveal Animation -------------------- */
    --reveal-duration-open: 0.4s;
    --reveal-duration-close: 0.3s;
    --reveal-easing-open: cubic-bezier(.4, .0, .2, 1);
    --reveal-easing-close: cubic-bezier(.4, .0, .8, 1);
    --reveal-radius: 150%;
}

/* =============================================================================
   LAYER 2: SEMANTIC TOKENS - LIGHT THEME
   Meaning-based tokens. Swap these for themes.
   ============================================================================= */

/* Formally claim the theme class applied to <body> */
.theme-book-of-houses { color-scheme: light; }


:root {
    /* -------------------- Surfaces --------------------------------- */
    --surface-app: #f4f6fa;
    --surface-primary: #FFFFFF;
    --surface-secondary: #F1F5F9;
    --surface-tertiary: #e8ecf1;
    --surface-elevated: #FFFFFF;
    --surface-overlay: rgba(0, 0, 0, 0.5);
    --surface-card: rgba(255, 255, 255, 0.95);

    /* -------------------- Text ------------------------------------- */
    --text-primary: #2C3444;
    --text-secondary: #475569;
    --text-muted: #8591a6;
    --text-inverse: #ffffff;
    --text-link: #2C3444;
    --text-link-hover: #0112f7;
    --text-accent: #2C3444;          /* Links and accent text use primary color — green is for backgrounds only */

    /* -------------------- Borders ---------------------------------- */
    --border-default: #e5e8f0;
    --border-soft: #eef1f6;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-strong: #cbd5e1;

    /* -------------------- Accent ----------------------------------- */
    --accent-primary: #33e658;
    --accent-primary-hover: #2bd04e;
    --accent-primary-subtle: rgba(51, 230, 88, 0.12);
    --accent-secondary: #0112f7;
    --accent-secondary-subtle: rgba(1, 18, 247, 0.12);
    --accent-dark: #2C3444;
    --accent-tertiary: #5534a5;
    --accent-tertiary-subtle: rgba(85, 52, 165, 0.12);
    --accent-neon: #33e658;

    /* -------------------- Toll Bench Light Surfaces -------------------- */
    --tb-sheet: var(--color-white);
    --tb-ink: var(--zine-bg-black);
    --tb-brand-purple: #5534a5;
    --tb-brand-purple-hover: #6545b5;
    --tb-brand-purple-active: #432982;
    --tb-go: var(--accent-neon);
    --tb-agent: var(--accent-tertiary);
    --tb-agent-highlight: var(--accent-tertiary-subtle);
    --tb-mark: var(--color-orange-500);
    --tb-page: var(--border-default);
    --tb-rule: var(--color-gray-200);
    --tb-prose: var(--color-dark-500);
    --tb-stop: var(--color-red-500);
    --tb-meta: var(--color-tb-meta);
    --tb-avatar: var(--color-tb-avatar);
    --tb-band: var(--color-gray-50);

    --tb-sheet-radius: 0;
    --tb-sheet-inset: var(--space-3);
    --tb-card-radius: 14px;
    --tb-card-shadow: var(--shadow-drop), var(--shadow-md);
    --tb-sheet-shadow: none;
    --tb-hair: 1px;
    --tb-bar-h: 34px;

    /* -------------------- Highlight -------------------- */
    --highlight-yellow: #f2e841;
    --highlight-purple: #5534a5;
    --highlight-neon: #33e658;
    --highlight-blue: #0112f7;
    --highlight-pad: 4px 12px;

    /* -------------------- Status ----------------------------------- */
    --status-success: #10B981;
    --status-success-subtle: rgba(16, 185, 129, 0.12);
    --status-warning: #0112f7;
    --status-warning-subtle: rgba(1, 18, 247, 0.12);
    --status-error: #EF4444;
    --status-error-subtle: rgba(239, 68, 68, 0.12);
    --status-info: var(--color-blue-500);
    --status-info-subtle: rgba(1, 18, 247, 0.12);

    /* -------------------- Instructional Card (purple) --------- */
    --instructional-card-bg: var(--accent-tertiary);
    --instructional-card-border: var(--accent-tertiary);
    --instructional-card-radius: var(--radius-card);
    --instructional-card-padding: var(--space-6);
    --instructional-card-title-color: #fff;
    --instructional-card-title-size: var(--text-xl);
    --instructional-card-text-color: rgba(255, 255, 255, 0.80);
    --instructional-card-text-size: var(--text-base);
    --instructional-card-cta-bg: var(--accent-tertiary);
    --instructional-card-cta-color: #fff;
    --instructional-card-cta-radius: var(--radius-lg);
    --instructional-card-cta-hover-bg: var(--accent-dark);
    --instructional-card-cta-hover-color: #fff;

    /* -------------------- Hint -------------------- */
    --hint-border-width: 3px;
    --hint-border-color: var(--highlight-purple);
    --hint-border: var(--hint-border-width) solid var(--hint-border-color);
    --hint-bg: rgba(85, 52, 165, 0.06);
    --hint-radius: var(--radius-md);
    --hint-padding: var(--space-3) var(--space-4);

    /* -------------------- Interactive -------------------- */
    --interactive-hover: rgba(44, 52, 68, 0.06);
    --interactive-active: rgba(44, 52, 68, 0.10);
    --interactive-focus-ring: var(--highlight-purple);

    /* -------------------- Points/Rewards -------------------- */
    --points-color: var(--color-yellow-400);
    --points-bg: rgba(250, 204, 21, 0.15);

    /* -------------------- Indicators -------------------- */
    --indicator-unread: var(--color-purple-600);
    --indicator-points: var(--color-orange-500);
    --indicator-online: var(--color-green-500);

    /* -------------------- Brand-Narrative Aliases -------------------- */
    --neon-green: var(--accent-primary);
    --neon-green-hover: var(--accent-primary-hover);
    --electric-purple: var(--accent-tertiary);
    --electric-blue: var(--accent-secondary);
    --cyan: var(--color-cyan-500);
    --slate: #2C3444;

    /* -------------------- Shadows: Card/Float/Lift/Drop -------------------- */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.06);
    --shadow-float: 0 8px 24px -4px rgba(0,0,0,0.12), 0 2px 6px -1px rgba(0,0,0,0.06);
    --shadow-lift: 0 1px 3px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);
    --shadow-drop: 0 10px 30px -8px rgba(0,0,0,0.14), 0 4px 10px -4px rgba(0,0,0,0.06);

    /* -------------------- Component: Borders -------------------- */
    --border-hair: rgba(0,0,0,0.04);

    /* -------------------- Component: Surfaces -------------------- */
    --surface-sunken: #eef1f6;
    --accent-tertiary-soft: rgba(85, 52, 165, 0.08);

    /* -------------------- Component: Fonts -------------------- */
    --font-edit: var(--font-serif);

    /* -------------------- Legacy Aliases -------------------- */
    --bg-primary: var(--surface-app);
    --bg-secondary: var(--surface-primary);
    --bg-tertiary: var(--surface-secondary);
    --bg-hover: var(--interactive-hover);
    --bg-card: var(--surface-card);
    --accent: var(--accent-primary);
    --accent-rgb: 255, 255, 255;
    --border-color: var(--border-default);
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Legacy: Status colors for templates using old naming */
    --success: var(--status-success);
    --warning: var(--status-warning);
    --error: var(--status-error);
}

/* -------------------- Highlighter Mark Classes -------------------- */
.mark, .hl-yellow, .hl-y { background: linear-gradient(transparent 8%, var(--highlight-yellow) 8% 92%, transparent 92%); color: #000; padding: 0 0.3em; }
.hl-green, .hl-g  { background: linear-gradient(transparent 8%, var(--accent-primary) 8% 92%, transparent 92%); color: #000; padding: 0 0.3em; }
.hl-purple, .hl-p { background: linear-gradient(transparent 8%, var(--accent-tertiary) 8% 92%, transparent 92%); color: #fff; padding: 0 0.3em; }
.hl-blue, .hl-b   { background: linear-gradient(transparent 8%, var(--accent-secondary) 8% 92%, transparent 92%); color: #fff; padding: 0 0.3em; }

/* =============================================================================
   LAYER 3: COMPONENT TOKENS
   Per-component variables referencing semantic tokens.
   ============================================================================= */
:root {
    /* -------------------- Layout -------------------- */
    --layout-rail-width: 88px;
    --layout-sidebar-width: 360px;
    --layout-topbar-height: 64px;
    --layout-mobile-rail-width: 56px;
    --layout-mobile-topbar-height: 64px;

    /* -------------------- Top Bar -------------------- */
    --topbar-bg: var(--surface-app);
    --topbar-border: var(--border-default);
    --topbar-btn-size: var(--size-8);
    --topbar-btn-color: var(--text-secondary);
    --topbar-btn-hover-bg: var(--interactive-hover);
    --topbar-btn-hover-color: var(--text-primary);
    --topbar-icon-glyph: var(--size-5);          /* 20px icon render size */
    --topbar-house-max-width: none;                 /* Allow full house name display */
    --topbar-house-icon-size: var(--size-6);      /* 24px house icon */
    --topbar-chip-bg: var(--surface-elevated);
    --topbar-chip-border: var(--border-subtle);
    --topbar-chip-shadow: var(--shadow-md);
    --topbar-chip-radius: var(--radius-full);
    --topbar-chip-height: var(--size-8);          /* 32px chip height */
    --topbar-chip-hover-border: rgba(74, 222, 128, 0.3);
    --topbar-coiny-color: var(--color-green-500);
    --topbar-coiny-highlight: var(--color-green-100);
    --topbar-pill-mobile-height: 30px;

    /* -------------------- House Rail -------------------- */
    --rail-bg: var(--surface-app);
    --rail-icon-size: var(--size-12);
    --rail-icon-bg: var(--surface-app);
    --rail-icon-color: var(--text-secondary);
    --rail-icon-radius: 50%;
    --rail-icon-hover-radius: 50%;
    --rail-icon-active-bg: var(--accent-primary);
    --rail-icon-active-color: var(--color-black);
    --rail-icon-active-radius: 50%;
    --rail-divider-color: var(--border-default);
    --rail-divider-width: 2px;
    --rail-gap: var(--space-3);
    --rail-padding: var(--space-3);

    /* -------------------- Sidebar -------------------- */
    --sidebar-bg: var(--surface-app);
    --sidebar-border: var(--border-default);
    --sidebar-header-height: 88px;
    --sidebar-header-bg: var(--surface-app);
    --sidebar-header-border: var(--border-subtle);
    --sidebar-nav-gap: var(--space-1);
    --sidebar-nav-item-height: 40px;
    --sidebar-nav-item-padding: 10px 16px;
    --sidebar-nav-item-radius: var(--radius-full);
    --sidebar-nav-item-color: var(--text-primary);
    --sidebar-nav-item-hover-bg: rgba(44, 52, 68, 0.05);
    --sidebar-nav-item-hover-color: var(--text-primary);
    --sidebar-nav-item-active-bg: #0f131c;
    --sidebar-nav-item-active-color: var(--text-inverse);
    --sidebar-footer-bg: var(--surface-app);
    --sidebar-footer-height: 52px;

    /* -------------------- Tooltip (Design System) -------------------- */
    --ds-tooltip-bg: var(--accent-primary);
    --ds-tooltip-color: var(--color-black);
    --ds-tooltip-font-size: var(--text-sm);
    --ds-tooltip-font-weight: 700;
    --ds-tooltip-padding: var(--space-2) var(--space-3);
    --ds-tooltip-radius: var(--radius-xs);
    --ds-tooltip-glow: rgba(51, 230, 88, 0.35);

    /* Rail tooltip overrides (sidebar house icons — larger variant) */
    --rail-tooltip-bg: var(--ds-tooltip-bg);
    --rail-tooltip-color: var(--ds-tooltip-color);
    --rail-tooltip-font-size: var(--text-lg);
    --rail-tooltip-font-weight: 800;
    --rail-tooltip-padding: var(--space-3) var(--space-5);
    --rail-tooltip-radius: var(--ds-tooltip-radius);
    --rail-tooltip-glow: var(--ds-tooltip-glow);

    /* -------------------- Main Area -------------------- */
    --main-bg: var(--surface-app);
    --main-padding: var(--space-6);
    --main-max-width: 1200px;

    /* -------------------- Cards -------------------- */
    --card-bg: var(--surface-card);
    --card-border: var(--border-default);
    --card-radius: var(--radius-lg);
    --card-padding: var(--space-4);
    --card-gradient: linear-gradient(145deg, #1e1e1e 0%, #161616 100%);

    /* -------------------- Feed Card (Editorial / Paper Layer) ---- */
    --feed-card-bg: var(--surface-primary);
    --feed-card-radius: var(--radius-2xl);
    --feed-card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
    --feed-card-border: 1px solid var(--border-subtle);
    --feed-card-padding: var(--space-5) var(--space-8) var(--space-5);
    --feed-card-padding-mobile: var(--space-4) var(--space-5) var(--space-4); /* 16/20/16 — tighter on phones */
    --feed-card-max-width: 680px;                            /* Single source of truth for feed stream width */
    --feed-card-gutter-mobile: 3px;                          /* 3px — mobile feed cards sit exactly 3px from each edge */
    --feed-card-avatar-size: var(--avatar-lg);               /* 48px */
    --feed-card-avatar-badge-size: var(--size-8);             /* 32px house logo — must be readable */
    --feed-card-author-size: var(--text-base);                /* 16px */
    --feed-card-author-weight: var(--font-bold);              /* 700 */
    --feed-card-channel-size: 13px;
    --feed-card-body-size: 17px;
    --feed-card-body-leading: 1.6;
    --feed-card-grand-size: var(--text-3xl);                  /* 30px — short posts <140 chars */
    --feed-card-grand-weight: var(--font-semibold);
    --feed-card-grand-tracking: -0.02em;
    --feed-card-action-size: 13px;
    --feed-card-action-weight: var(--font-semibold);
    --feed-card-action-color: var(--text-muted);
    --feed-card-action-border: var(--border-default);
    --feed-card-action-radius: var(--radius-full);
    --feed-card-action-padding: var(--space-2) 14px;
    /* Vote active state — split pill: only the voted side turns purple */
    --vote-active-bg: var(--highlight-purple);
    --vote-active-color: var(--text-inverse);
    --feed-action-active-color: var(--vote-active-bg);
    --feed-action-pill-bg: var(--feed-card-glass-bg);
    --feed-action-pill-border: var(--feed-card-glass-border);
    /* Image post overlay — "long first" variable-aspect media */
    --feed-card-image-height: 400px;                         /* landscape / square max */
    --feed-card-tall-max: 600px;                             /* portrait / tall max */
    --feed-card-image-min-height: 280px;                     /* hero mode minimum */
    --feed-card-image-title-size: var(--feed-card-grand-size); /* Same grand size as non-image short text */
    --feed-card-image-title-weight: var(--font-semibold);
    --feed-card-image-gradient: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 25%, transparent 55%, rgba(0,0,0,0.8) 100%);
    --feed-card-image-gradient-light: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.85) 100%);
    --feed-card-image-gradient-busy: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.88) 100%);
    --feed-card-glass-bg: rgba(255,255,255,0.15);
    --feed-card-glass-border: rgba(255,255,255,0.3);
    --feed-card-glass-bg-dark: rgba(0,0,0,0.3);
    --feed-card-glass-border-dark: rgba(255,255,255,0.2);
    --feed-card-clamp-lines: 3;

    /* -------------------- Shop Cards (Shared) -------------------- */
    --shop-card-base-width: 340px;
    --shop-card-base-width-mobile: 280px;
    /* Shop: Rail card — ONE definitive width for every shop rail card, identical
       on mobile and desktop. Narrower than a phone screen so the next card
       always peeks in from the right (rails scroll horizontally). */
    --shop-rail-card-w: min(calc(100vw - var(--space-8)), 360px);
    /* Shop: Zine cards keep their own 2:3 portrait cover shape. */
    --shop-rail-zine-w: 280px;
    --shop-rail-zine-h: 420px;
    --shop-rail-quest-h: 560px;
    /* Shop: Event tickets keep one fixed ticket size in the events rail. */
    --shop-rail-ticket-w: min(calc(100vw - var(--space-8)), var(--ticket-max-width));
    --shop-card-bg: var(--surface-primary);
    --shop-card-border: 1px solid var(--border-subtle);
    --shop-card-radius: var(--radius-card);
    --shop-card-shadow: var(--shadow-sm);
    --shop-card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shop-card-hover-lift: none;
    --shop-card-text-primary: var(--text-primary);
    --shop-card-text-secondary: var(--text-muted);
    --shop-card-text-meta: var(--text-secondary);
    --shop-card-transition: box-shadow var(--duration-normal) var(--ease-default);
    /* Shop: Grid layout */
    --shop-grid-gap: var(--space-4);
    --shop-grid-gap-mobile: var(--space-3);
    --shop-grid-min-col: 320px;
    --shop-grid-min-col-mobile: 280px;
    /* Shop: Card variant min-widths (wider for breathing room) */
    --shop-card-event-min-w: 360px;
    --shop-card-event-min-w-mobile: 280px;
    --shop-card-app-min-w: 300px;
    --shop-card-app-min-w-mobile: 260px;
    --shop-card-quest-min-w: 280px;
    --shop-card-quest-min-w-mobile: 260px;
    --shop-card-effect-min-w: 200px;
    --shop-card-effect-min-w-mobile: 160px;
    --shop-card-coiny-min-w: 200px;
    --shop-card-coiny-min-w-mobile: 160px;
    /* Shop: App card */
    --shop-app-width: var(--shop-card-base-width);
    --shop-app-width-mobile: var(--shop-card-base-width-mobile);
    --shop-app-icon-size: var(--size-20);           /* 80px */
    --shop-app-icon-radius: var(--radius-xl);
    --shop-app-name-size: 28px;
    --shop-app-name-size-mobile: 24px;
    --shop-app-desc-size: 13px;
    --shop-app-badge-size: 10px;
    --shop-app-cta-radius: var(--radius-full);
    --shop-app-badge-radius: var(--radius-full);
    /* ── Art Collection Grid (Gallery Layer) ── */
    --collection-grid-cols: 2;
    --collection-grid-cols-wide: 3;
    --collection-grid-gap: var(--space-3);
    --collection-card-bg: var(--gallery-card);
    --collection-card-border: var(--gallery-border);
    --collection-card-radius: var(--radius-md);
    --collection-card-hover-border: rgba(250, 204, 21, 0.2);
    --collection-img-aspect: 1;
    --collection-title-size: var(--text-xs);
    --collection-title-weight: var(--font-bold);
    --collection-title-color: var(--gallery-text-primary);
    --collection-body-padding: var(--space-3) var(--space-3) var(--space-1);
    --collection-body-gap: var(--space-1);
    --collection-rarity-size: 10px;
    --collection-rarity-weight: var(--font-bold);
    --collection-rarity-tracking: 0.08em;
    --collection-rarity-padding: 2px var(--space-2);
    --collection-rarity-radius: var(--radius-xs);
    --collection-rarity-original-bg: rgba(139, 92, 246, 0.12);
    --collection-rarity-original-color: var(--color-purple-500);
    --collection-rarity-limited-bg: rgba(250, 204, 21, 0.12);
    --collection-rarity-limited-color: var(--color-yellow-400);
    --collection-btn-margin: var(--space-2) var(--space-3) var(--space-3);
    --collection-btn-padding: var(--space-2) 0;
    --collection-btn-size: var(--btn-sm-font-size);
    --collection-btn-weight: var(--font-bold);
    --collection-btn-tracking: 0.03em;
    --collection-btn-bg: var(--btn-glass-bg);
    --collection-btn-bg-hover: var(--btn-glass-bg-hover);
    --collection-btn-color: var(--gallery-text-primary);
    --collection-btn-border: var(--btn-glass-border);
    --collection-btn-border-hover: var(--btn-glass-border-hover);
    --collection-btn-radius: var(--radius-sm);

    /* ── Ticket component (global — used by .app-ticket, .ds-ticket) ── */
    --ticket-max-width: 377px;
    --ticket-min-height: 144px;
    --ticket-bg: var(--accent-dark);
    --ticket-radius: 8px;
    --ticket-image-width: 144px;
    --ticket-image-width-mobile: 89px;
    --ticket-body-padding: 21px;
    --ticket-body-padding-mobile: 13px;
    --ticket-notch-size: 21px;
    --ticket-notch-bg: var(--surface-secondary);
    --ticket-eyebrow-size: var(--text-xs);
    --ticket-eyebrow-weight: 700;
    --ticket-eyebrow-tracking: 0.12em;
    --ticket-eyebrow-color: rgba(255, 255, 255, 0.45);
    --ticket-title-size: var(--text-xl);
    --ticket-title-size-mobile: var(--text-lg);
    --ticket-title-weight: 800;
    --ticket-sub-color: rgba(255, 255, 255, 0.5);
    --ticket-status-color: var(--accent-primary);
    /* Shop: Event Ticket card (shop-specific overrides) */
    --shop-event-width: 300px;
    --shop-event-width-mobile: var(--shop-card-base-width-mobile);
    --shop-event-min-height: 140px;
    --shop-event-min-height-mobile: 130px;
    --shop-event-img-width: 40%;
    --shop-event-bg: var(--accent-dark, #2C3444);
    --shop-event-accent: var(--color-pink-700, #be185d);
    --shop-event-accent-subtle: rgba(190, 24, 93, 0.1);
    --shop-event-type-size: var(--text-xs);
    --shop-event-type-weight: 700;
    --shop-event-type-tracking: 0.12em;
    --shop-event-type-color: rgba(255, 255, 255, 0.45);
    --shop-event-name-size: var(--text-base);
    --shop-event-name-size-mobile: var(--text-sm);
    --shop-event-name-weight: 800;
    --shop-event-venue-size: 11px;
    --shop-event-venue-color: rgba(255, 255, 255, 0.4);
    --shop-event-capacity-bar-height: 3px;
    --shop-event-capacity-bar-bg: rgba(255, 255, 255, 0.1);
    --shop-event-capacity-text-size: 10px;
    --shop-event-capacity-text-color: rgba(255, 255, 255, 0.35);
    --shop-event-fallback-icon-size: 36px;
    --shop-event-fallback-icon-color: rgba(255, 255, 255, 0.12);
    --shop-event-fallback-bg: rgba(255, 255, 255, 0.05);
    --shop-event-notch-size: 18px;
    --shop-event-notch-offset: -9px;
    /* Shop: Ticket card (compact/grid) */
    --shop-ticket-width: 200px;
    --shop-ticket-img-height: 100px;
    --shop-ticket-accent: var(--color-pink-700, #be185d);
    --shop-ticket-accent-subtle: rgba(190, 24, 93, 0.1);
    --shop-ticket-type-size: 10px;
    --shop-ticket-name-size: 15px;
    /* Shop: Quest card */
    --shop-quest-width: 160px;
    --shop-quest-height: 190px;
    --shop-quest-icon-size: var(--size-14);          /* 56px */
    --shop-quest-icon-radius: var(--radius-card);
    --shop-quest-accent: var(--color-yellow-500);
    --shop-quest-accent-subtle: rgba(216, 207, 34, 0.1);
    /* Shop: Effect card */
    --shop-effect-width: 150px;
    --shop-effect-min-height: 200px;
    --shop-effect-preview-size: var(--size-14);      /* 56px */
    /* Shop: Coiny card */
    --shop-coiny-width: 150px;
    --shop-coiny-min-height: 200px;
    --shop-coiny-accent: var(--color-green-600);
    --shop-coiny-accent-subtle: rgba(16, 185, 129, 0.15);
    /* Shop: Featured Carousel (full-width colored slides) */
    --shop-carousel-min-height: 243px;
    --shop-carousel-min-height-desktop: 324px;
    --shop-carousel-padding: var(--space-8) var(--space-6);
    --shop-carousel-padding-desktop: var(--space-10) var(--space-12);
    --shop-carousel-gap: var(--space-5);
    --shop-carousel-color: var(--text-inverse);
    /* Slide color gradients */
    --shop-carousel-bg-purple: linear-gradient(135deg, var(--color-purple-700) 0%, var(--color-purple-600) 40%, var(--color-purple-500) 100%);
    --shop-carousel-bg-blue: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-blue-500) 40%, #60a5fa 100%);
    --shop-carousel-bg-green: linear-gradient(135deg, #059669 0%, #10b981 40%, #34d399 100%);
    --shop-carousel-bg-yellow: linear-gradient(135deg, #d8cf22 0%, #f2e841 40%, #f7ef5e 100%);
    /* Eyebrow */
    --shop-carousel-eyebrow-size: var(--text-xs);
    --shop-carousel-eyebrow-weight: var(--font-bold);
    --shop-carousel-eyebrow-tracking: 0.14em;
    /* Title */
    --shop-carousel-title-font: var(--font-serif);
    --shop-carousel-title-size: var(--text-3xl);
    --shop-carousel-title-size-desktop: var(--text-5xl);
    --shop-carousel-title-weight: var(--font-bold);
    --shop-carousel-title-leading: var(--leading-tight);
    /* Ad text */
    --shop-carousel-ad-size: var(--text-lg);
    --shop-carousel-ad-leading: var(--leading-normal);
    /* Image thumbnail */
    --shop-carousel-img-size: 160px;
    --shop-carousel-img-size-desktop: 220px;
    --shop-carousel-img-radius: var(--radius-card);
    /* Badge / price */
    --shop-carousel-badge-size: var(--text-sm);
    --shop-carousel-badge-weight: var(--font-semibold);
    --shop-carousel-price-size: var(--text-base);
    --shop-carousel-price-weight: var(--font-bold);
    /* Arrows */
    --shop-carousel-arrow-size: 36px;
    --shop-carousel-arrow-size-desktop: 44px;
    --shop-carousel-arrow-bg: rgba(0,0,0,0.35);
    --shop-carousel-arrow-bg-hover: rgba(0,0,0,0.55);
    /* Dots */
    --shop-carousel-dot-size: 8px;
    --shop-carousel-dot-bg: var(--color-gray-300);
    --shop-carousel-dot-active-bg: var(--highlight-purple);
    /* -------------------- Evolve Card -------------------- */
    /* Card structure */
    --evo-card-radius: var(--radius-card);
    --evo-card-border: var(--border-subtle);
    --evo-card-bg: var(--surface-primary);
    --evo-card-shadow: var(--shadow-sm);
    /* Hero region */
    --evo-hero-height: 140px;
    --evo-hero-bg: linear-gradient(135deg, var(--surface-secondary) 0%, var(--surface-tertiary) 50%, var(--surface-secondary) 100%);
    --evo-hero-icon-color: var(--accent-primary-subtle);
    --evo-hero-icon-size: var(--size-10);
    --evo-hero-fade: linear-gradient(to bottom, transparent 30%, rgba(22,22,22,0.95) 100%);
    /* Type badge */
    --evo-badge-size: 9px;
    --evo-badge-weight: var(--font-bold);
    --evo-badge-tracking: 0.06em;
    --evo-badge-radius: 6px;
    --evo-badge-quest-bg: var(--accent-primary-subtle);
    --evo-badge-quest-color: var(--accent-primary);
    --evo-badge-quest-border: rgba(26, 143, 128, 0.2);
    --evo-badge-app-bg: rgba(139, 92, 246, 0.15);
    --evo-badge-app-color: var(--color-purple-700);
    --evo-badge-app-border: rgba(139, 92, 246, 0.2);
    --evo-badge-item-bg: rgba(250, 204, 21, 0.15);
    --evo-badge-item-color: #facc15;
    --evo-badge-item-border: rgba(250, 204, 21, 0.2);
    --evo-badge-prompt-bg: var(--status-success-subtle);
    --evo-badge-prompt-color: var(--color-green-500);
    --evo-badge-prompt-border: rgba(16, 185, 129, 0.2);
    /* Reward badge */
    --evo-reward-bg: var(--status-success-subtle);
    --evo-reward-color: var(--color-green-600);
    --evo-reward-border: rgba(34, 197, 94, 0.18);
    --evo-reward-radius: var(--radius-full);
    /* Body region */
    --evo-body-height: 130px;
    --evo-body-padding: 14px var(--space-4);
    --evo-icon-size: 38px;
    --evo-icon-radius: 10px;
    --evo-icon-bg: var(--accent-primary-subtle);
    --evo-icon-color: var(--accent-primary);
    --evo-name-size: 15px;
    --evo-name-weight: var(--font-bold);
    --evo-name-color: var(--text-primary);
    --evo-desc-size: var(--text-xs);
    --evo-desc-color: var(--text-muted);
    --evo-desc-lines: 3;
    /* CTA button */
    --evo-cta-radius: var(--radius-full);
    --evo-cta-bg: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    --evo-cta-color: var(--color-black);
    --evo-cta-shadow: 0 4px 16px rgba(200, 230, 78, 0.25);
    --evo-done-bg: var(--status-success-subtle);
    --evo-done-color: var(--color-green-600);
    --evo-done-border: rgba(34, 197, 94, 0.2);
    /* State: current */
    --evo-current-border: rgba(200, 230, 78, 0.3);
    /* State: completed */
    --evo-completed-opacity: 0.55;
    --evo-completed-saturation: saturate(0.3);
    /* State: locked */
    --evo-locked-opacity: 0.4;
    --evo-locked-filter: saturate(0) brightness(0.85);
    /* Glow: brand teal ↔ spice oscillation */
    --evo-glow-brand: rgba(200, 230, 78, 0.35);
    --evo-glow-brand-spread: rgba(200, 230, 78, 0.12);
    --evo-glow-spice: rgba(242, 106, 44, 0.35);
    --evo-glow-spice-spread: rgba(242, 106, 44, 0.12);
    --evo-glow-done: rgba(16, 185, 129, 0.25);
    --evo-glow-locked: rgba(148, 163, 184, 0.15);
    /* Flash (sticky gate) */
    --evo-flash-color: var(--accent-primary);
    --evo-flash-glow: rgba(200, 230, 78, 0.3);
    --evo-flash-inset: rgba(200, 230, 78, 0.06);
    /* Status overlay */
    --evo-overlay-done-bg: rgba(34, 197, 94, 0.15);
    --evo-overlay-done-color: var(--color-green-600);
    --evo-overlay-locked-bg: rgba(0, 0, 0, 0.2);
    --evo-overlay-locked-color: var(--text-muted);

    /* Evolve Feed Card (grand hero card on house feed) */
    --evo-feed-radius: var(--radius-card);
    --evo-feed-height: 400px;
    --evo-feed-bg: var(--surface-primary);
    --evo-feed-padding: var(--space-6);
    --evo-feed-title-size: 30px;
    --evo-feed-title-weight: var(--font-semibold);
    --evo-feed-title-tracking: -0.02em;
    --evo-feed-title-color: var(--text-primary);
    --evo-feed-desc-color: var(--text-secondary);
    --evo-feed-reward-color: var(--color-green-600);
    --evo-feed-badge-bg: var(--evo-badge-quest-bg);
    --evo-feed-badge-color: var(--evo-badge-quest-color);
    --evo-feed-badge-border: var(--evo-badge-quest-border);
    --evo-feed-cta-bg: var(--highlight-purple);
    --evo-feed-cta-color: #fff;
    --evo-feed-icon-color: var(--accent-primary-subtle);

    /* Shop: PDP (Product Detail Page) — overlay (legacy) */
    --shop-pdp-bg: #f5f5f7;
    --shop-pdp-hero-height: 280px;
    --shop-pdp-body-max-width: 520px;
    --shop-pdp-title-size: var(--text-2xl);
    --shop-pdp-buy-bg: var(--accent-primary);
    --shop-pdp-buy-bg-hover: var(--accent-primary-hover);

    /* Shop: PDP Page (standalone full-screen layout) */
    --pdp-bg: #f3f2f7;
    --pdp-text-primary: #1e1e2e;
    --pdp-text-secondary: #4a4a5a;
    --pdp-text-muted: #8e8e9e;
    --pdp-surface: #ffffff;
    --pdp-border: rgba(0, 0, 0, 0.06);
    --pdp-page-max-width: 1080px;
    --pdp-page-padding: 80px 40px 60px;
    --pdp-page-gap: 48px;
    --pdp-nav-inset: 20px;
    --pdp-nav-size: 40px;
    --pdp-nav-bg: rgba(255, 255, 255, 0.7);
    --pdp-nav-border: rgba(0, 0, 0, 0.08);
    --pdp-nav-color: var(--pdp-text-primary);
    --pdp-photo-radius: 16px;
    --pdp-photo-aspect: 9 / 16;
    --pdp-icon-size: 48px;
    --pdp-info-gap: 20px;
    --pdp-badge-bg: rgba(85, 52, 165, 0.08);
    --pdp-badge-color: #5534a5;
    --pdp-badge-size: 11px;
    --pdp-badge-radius: 20px;
    --pdp-title-size: 28px;
    --pdp-desc-size: 15px;
    --pdp-price-size: 24px;
    --pdp-buy-bg: var(--accent-primary, #33e658);
    --pdp-buy-color: #000;
    --pdp-buy-radius: 12px;
    --pdp-creator-avatar-size: 28px;
    --pdp-modal-bg: var(--pdp-surface);
    --pdp-modal-border: var(--pdp-border);

    /* PDP — Top bar */
    --pdp-topbar-height: 56px;
    --pdp-topbar-bg: rgba(255, 255, 255, 0.85);
    --pdp-topbar-border: var(--pdp-border);
    --pdp-topbar-logo-size: 20px;
    --pdp-topbar-wordmark-size: 13px;
    --pdp-topbar-wordmark-spacing: 3px;

    /* PDP — Book variant */
    --pdp-book-photo-bg: var(--pdp-bg);
    --pdp-buy-alt-bg: var(--status-success-subtle);
    --pdp-buy-alt-color: var(--status-success);
    --pdp-hint-size: var(--text-xs);
    --pdp-book-buy-border: var(--shop-card-border);
    --pdp-book-buy-bg: var(--surface-primary);
    --pdp-book-buy-padding: var(--space-4);
    --pdp-book-buy-radius: var(--radius-sm);
    --pdp-book-buy-shadow: var(--shadow-lg);
    --pdp-book-buy-header-gap: var(--space-1);
    --pdp-book-buy-header-margin: var(--space-3);
    --pdp-book-buy-eyebrow-size: var(--text-xs);
    --pdp-book-buy-eyebrow-weight: var(--font-bold);
    --pdp-book-buy-eyebrow-tracking: var(--tracking-wide);
    --pdp-book-buy-eyebrow-color: var(--text-muted);
    --pdp-book-buy-title-size: var(--text-xl);
    --pdp-book-buy-title-color: var(--text-primary);
    --pdp-book-buy-options-gap: var(--space-2);
    --pdp-book-option-min-height: calc(var(--size-16) + var(--space-2));
    --pdp-book-option-icon-size: var(--size-12);
    --pdp-book-option-gap: var(--space-3);
    --pdp-book-option-padding: var(--space-3);
    --pdp-book-option-border: var(--shop-card-border);
    --pdp-book-option-radius: var(--radius-sm);
    --pdp-book-option-bg: var(--surface-primary);
    --pdp-book-option-color: var(--text-primary);
    --pdp-book-option-hover-border: var(--text-primary);
    --pdp-book-option-hover-shadow: var(--shadow-lg);
    --pdp-book-option-transition: border-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
    --pdp-book-option-hover-shift: var(--space-0);
    --pdp-book-option-icon-bg: var(--surface-secondary);
    --pdp-book-option-body-gap: var(--space-1);
    --pdp-book-option-title-size: var(--text-base);
    --pdp-book-option-title-weight: var(--font-bold);
    --pdp-book-option-title-color: var(--text-primary);
    --pdp-book-option-detail-size: var(--text-xs);
    --pdp-book-option-detail-color: var(--text-secondary);
    --pdp-book-option-coiny-icon-bg: var(--status-success-subtle);
    --pdp-book-option-stripe-icon-bg: var(--surface-secondary);
    --pdp-book-option-amazon-border: var(--indicator-points);
    --pdp-book-option-amazon-icon-bg: var(--points-bg);
    --pdp-book-option-amazon-icon-color: var(--indicator-points);
    --pdp-amazon-review-margin: var(--space-3);
    --pdp-amazon-review-padding: var(--space-3);
    --pdp-amazon-review-divider: var(--shop-card-border);
    --pdp-amazon-review-meta-gap: var(--space-2);
    --pdp-amazon-review-meta-margin: var(--space-2);
    --pdp-amazon-review-meta-size: var(--text-xs);
    --pdp-amazon-review-meta-weight: var(--font-bold);
    --pdp-amazon-review-meta-tracking: var(--tracking-wide);
    --pdp-amazon-review-meta-color: var(--text-muted);
    --pdp-amazon-review-star-color: var(--points-color);
    --pdp-amazon-review-image-border: var(--shop-card-border);
    --pdp-amazon-review-image-radius: var(--radius-sm);
    --pdp-amazon-review-image-bg: var(--surface-primary);
    --pdp-amazon-review-image-min-width-mobile: calc(var(--size-32) * 5);
    --pdp-book-buy-note-margin: var(--space-3);
    --pdp-book-buy-note-padding: var(--space-3);
    --pdp-book-buy-note-divider: var(--shop-card-border);
    --pdp-book-buy-note-color: var(--text-secondary);
    --pdp-book-buy-note-size: var(--text-xs);

    /* PDP — Zine variant */
    --pdp-zine-cover-aspect: 2 / 3;
    --pdp-zine-cover-position: top;
    --pdp-zine-editions-gap: var(--space-3);
    --pdp-zine-edition-height: 72px;
    --pdp-zine-edition-cover-width: 48px;
    --pdp-zine-edition-cover-radius: var(--radius-sm);
    --pdp-zine-edition-name-size: var(--text-sm);
    --pdp-zine-edition-name-weight: var(--font-semibold);
    --pdp-zine-edition-brand-size: var(--text-xs);
    --pdp-zine-edition-brand-color: var(--text-muted);
    --pdp-zine-edition-border: 1px solid var(--border-subtle);
    --pdp-zine-edition-radius: var(--radius-md);
    --pdp-zine-edition-bg: var(--surface-primary);
    --pdp-zine-edition-bg-hover: var(--surface-secondary);
    /* PDP: Art Tier List */
    --pdp-tier-gap: var(--space-3);
    --pdp-tier-padding: var(--space-4) var(--space-5);
    --pdp-tier-bg: var(--pdp-surface);
    --pdp-tier-border: var(--pdp-border);
    --pdp-tier-border-hover: rgba(0, 0, 0, 0.14);
    --pdp-tier-radius: var(--radius-md);
    --pdp-tier-icon-size: var(--size-10);
    --pdp-tier-icon-radius: var(--radius-md);
    --pdp-tier-icon-bg: var(--accent-tertiary-subtle);
    --pdp-tier-icon-color: var(--accent-tertiary);
    --pdp-tier-icon-font-size: var(--text-xl);
    --pdp-tier-name-size: var(--text-sm);
    --pdp-tier-name-weight: var(--font-semibold);
    --pdp-tier-detail-size: var(--text-xs);
    --pdp-tier-price-size: var(--text-base);
    --pdp-tier-price-weight: var(--font-bold);
    --pdp-tier-btn-padding: var(--space-3) var(--space-5);
    --pdp-tier-btn-radius: var(--pdp-buy-radius);
    --pdp-tier-btn-bg: var(--pdp-buy-bg);
    --pdp-tier-btn-color: var(--pdp-buy-color);
    --pdp-tier-btn-size: var(--text-xs);
    --pdp-tier-btn-weight: var(--font-bold);
    --pdp-stereo-padding: var(--space-4) var(--space-5);
    --pdp-stereo-bg: var(--pdp-surface);
    --pdp-stereo-border: var(--pdp-border);
    --pdp-stereo-radius: var(--radius-md);
    --pdp-stereo-title-size: var(--text-sm);
    --pdp-stereo-title-weight: var(--font-semibold);
    --pdp-stereo-text-size: var(--text-xs);

    /* -------------------- Buttons -------------------- */
    /* Base */
    --btn-font: var(--font-sans);
    --btn-font-size: var(--text-sm);
    --btn-font-weight: var(--font-medium);
    --btn-radius: var(--radius-full);
    --btn-padding: 10px 20px;
    --btn-gap: var(--space-2);
    --btn-transition: all 0.2s ease;
    /* Size: Small */
    --btn-sm-padding: 6px 14px;
    --btn-sm-font-size: 12px;
    /* Size: Large */
    --btn-lg-padding: 14px 28px;
    --btn-lg-font-size: 16px;
    /* Disabled */
    --btn-disabled-opacity: 0.4;
    /* Primary: Brand green, hover → purple */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-bg-hover: var(--highlight-purple);
    --btn-primary-color: var(--color-black);
    --btn-primary-color-hover: var(--color-white);
    --btn-primary-border: var(--accent-primary);
    --btn-primary-glow: none;
    /* Secondary: Purple outline (matches house nav) */
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: rgba(85, 52, 165, 0.08);
    --btn-secondary-color: var(--highlight-purple);
    --btn-secondary-border: rgba(85, 52, 165, 0.25);
    --btn-secondary-border-hover: var(--highlight-purple);
    /* Ghost: Invisible until hover (works on light + dark) */
    --btn-ghost-bg: transparent;
    --btn-ghost-bg-hover: rgba(44, 52, 68, 0.08);
    --btn-ghost-color: var(--text-secondary);
    --btn-ghost-color-hover: var(--text-primary);
    /* Danger: Solid red */
    --btn-danger-bg: var(--color-red-500);
    --btn-danger-bg-hover: var(--color-red-600, #dc2626);
    --btn-danger-color: var(--color-white);
    --btn-danger-color-hover: var(--color-white);
    --btn-danger-border: var(--color-red-500);
    /* Success: Solid green */
    --btn-success-bg: var(--status-success);
    --btn-success-bg-hover: var(--color-green-600, #059669);
    --btn-success-color: var(--color-black);
    --btn-success-color-hover: var(--color-black);
    --btn-success-border: var(--status-success);
    /* Dark: Slate solid, hover → green */
    --btn-dark-bg: var(--accent-dark);
    --btn-dark-bg-hover: var(--accent-primary);
    --btn-dark-color: var(--color-white);
    --btn-dark-color-hover: var(--color-black);
    --btn-dark-border: var(--accent-dark);
    /* Yellow: Highlight CTA, hover → black */
    --btn-yellow-bg: var(--highlight-yellow);
    --btn-yellow-bg-hover: var(--accent-dark);
    --btn-yellow-color: var(--color-black);
    --btn-yellow-color-hover: var(--color-white);
    --btn-yellow-border: var(--highlight-yellow);
    /* Glass: frosted white tint for dark backgrounds */
    --btn-glass-bg: rgba(255, 255, 255, 0.12);
    --btn-glass-bg-hover: rgba(255, 255, 255, 0.22);
    --btn-glass-color: var(--text-inverse);
    --btn-glass-border: rgba(255, 255, 255, 0.25);
    --btn-glass-border-hover: rgba(255, 255, 255, 0.45);
    --btn-glass-blur: 12px;

    /* -------------------- Avatars -------------------- */
    --avatar-xs: var(--size-6);   /* 24px */
    --avatar-sm: var(--size-8);   /* 32px */
    --avatar-md: var(--size-10);  /* 40px */
    --avatar-lg: var(--size-12);  /* 48px */
    --avatar-xl: var(--size-16);  /* 64px */
    --avatar-2xl: var(--size-32); /* 128px */

    /* -------------------- Top Bar Pill (light) ----------------- */
    --topbar-pill-bg: #ffffff;
    --topbar-pill-blur: 0;
    --topbar-pill-border: var(--border-default);
    --topbar-pill-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --topbar-pill-radius: var(--radius-full);
    --topbar-pill-py: 8px;
    --topbar-pill-px: 16px;
    --topbar-pill-gap: 8px;
    --topbar-pill-font: var(--font-mono);
    --topbar-pill-font-weight: 700;
    --topbar-pill-font-size: 13px;
    --topbar-pill-letter-spacing: 0.05em;
    --topbar-pill-text-color: var(--text-primary);
    --topbar-pill-logo-size: 13px;

    /* -------------------- Filter Pills (shop/feed category filters) ---- */
    --filter-pill-bg: #ffffff;
    --filter-pill-bg-active: #1e293b;
    --filter-pill-text: #64748b;
    --filter-pill-text-active: #ffffff;
    --filter-pill-border: rgba(0, 0, 0, 0.12);
    --filter-pill-border-active: #1e293b;
    --filter-pill-radius: var(--radius-full);
    --filter-pill-font-size: 13px;
    --filter-pill-font-weight: 600;
    --filter-pill-py: 6px;
    --filter-pill-px: 16px;
    --filter-pill-gap: 8px;

    /* -------------------- House Nav (dark) ---- */
    /* House Treasury Badge (on house detail banner) */
    --house-treasury-bg: rgba(0, 0, 0, 0.55);
    --house-treasury-border: rgba(255, 255, 255, 0.12);
    --house-treasury-radius: var(--radius-md);
    --house-treasury-px: var(--space-2);
    --house-treasury-py: var(--space-1);
    --house-treasury-gap: var(--space-1);
    --house-treasury-font-size: var(--text-xs);
    --house-treasury-font-weight: var(--font-bold);
    --house-treasury-color: var(--color-green-400);
    --house-treasury-icon-size: 14px;

    /* Kitchen Treasury Card */
    --kitchen-treasury-radius: var(--radius-xl);
    --kitchen-treasury-padding: var(--space-5) var(--space-6);
    --kitchen-treasury-bg: var(--surface-primary);
    --kitchen-treasury-border: var(--border-default);
    --kitchen-treasury-balance-font: var(--font-mono);
    --kitchen-treasury-balance-size: var(--text-3xl);
    --kitchen-treasury-balance-weight: var(--font-bold);
    --kitchen-treasury-balance-color: var(--text-primary);
    --kitchen-treasury-label-size: 11px;
    --kitchen-treasury-label-color: var(--text-muted);
    --kitchen-treasury-label-weight: var(--font-semibold);
    --kitchen-treasury-change-up: var(--status-success);
    --kitchen-treasury-change-down: var(--status-error);
    --kitchen-treasury-change-size: var(--text-xs);
    --kitchen-treasury-demurrage-size: var(--text-sm);
    --kitchen-treasury-demurrage-color: var(--text-secondary);
    --kitchen-treasury-member-size: var(--text-sm);
    --kitchen-treasury-member-amount-font: var(--font-mono);
    --kitchen-treasury-avatar-size: var(--avatar-sm);

    /* House Navigation - Individual Button Style (not connected pills) */
    --house-nav-bg: #ffffff;
    --house-nav-blur: 0px;
    --house-nav-border: transparent;
    --house-nav-shadow: none;
    --house-nav-radius: 0;
    --house-nav-gap: 12px;
    --house-nav-padding: 0;
    --house-nav-item-height: 40px;
    --house-nav-item-px: 20px;
    --house-nav-item-radius: 12px;
    --house-nav-item-font-size: 12px;
    --house-nav-item-font-weight: 600;
    --house-nav-item-letter-spacing: 0.04em;
    --house-nav-item-color: var(--text-primary);
    --house-nav-item-hover-bg: rgba(85, 52, 165, 0.08);
    --house-nav-item-hover-color: var(--highlight-purple);
    --house-nav-item-active-bg: var(--highlight-purple);
    --house-nav-item-active-color: #ffffff;
    --house-nav-item-active-shadow: 0 2px 8px rgba(85, 52, 165, 0.3);
    --house-nav-item-active-icon: #ffffff;
    --house-nav-item-border: 1px solid transparent;
    --house-nav-item-active-border: 1px solid var(--highlight-purple);

    /* -------------------- Icons -------------------- */
    --icon-default-size: 1.25em;              /* Scale unsized icons 25% larger than text */

    /* -------------------- Modals -------------------- */
    --modal-bg: var(--surface-primary);
    --modal-border: var(--border-default);
    --modal-radius: var(--radius-xl);
    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    /* -------------------- Utility Bar (inverted contrast) ---- */
    --utility-bar-bg: var(--color-dark-800);
    --utility-bar-text: #ffffff;
    --utility-bar-text-muted: rgba(255, 255, 255, 0.5);
    --utility-bar-border: rgba(255, 255, 255, 0.08);
    --utility-bar-radius: 0;
    --utility-bar-height: 56px;
    --utility-bar-padding: 14px 20px;
    --utility-bar-title-size: 15px;
    --utility-bar-title-weight: 800;
    --utility-bar-title-tracking: 1.2px;
    --utility-bar-slot-size: 36px;
    --utility-bar-slot-border: var(--accent-primary);
    --utility-bar-slot-bg: var(--accent-primary-subtle);
    --utility-bar-slot-empty: var(--color-gray-400);
    --utility-bar-balance-bg: #22c55e;
    --utility-bar-balance-border: #16a34a;
    --utility-bar-balance-color: #ffffff;

    /* Balance tab (hangs below utility bar, e.g. Shop) */
    --balance-tab-bg: var(--color-dark-800);
    --balance-tab-radius: var(--radius-md);           /* 12px bottom corners */
    --balance-tab-padding: var(--space-1) var(--space-3) var(--space-2);
    --balance-tab-chevron-color: var(--utility-bar-text-muted);
    --balance-tab-chevron-hover: var(--utility-bar-text);
    --balance-tab-pill-bg: rgba(34, 197, 94, 0.15);
    --balance-tab-pill-border: rgba(34, 197, 94, 0.25);
    --balance-tab-pill-color: var(--color-green-400, #4ade80);
    --balance-tab-pill-size: var(--text-xs);
    --balance-tab-pill-weight: 700;
    --balance-tab-pill-radius: var(--radius-full);
    --balance-tab-pill-padding: 3px var(--space-2) 3px var(--space-2);
    --balance-tab-transition: var(--duration-fast) var(--ease-default);

    /* -------------------- Drawer / Utility Pages ------------ */
    --drawer-surface: var(--surface-primary);
    --drawer-panel-header-height: 60px;
    --drawer-panel-header-bg: var(--surface-secondary);

    /* -------------------- Quiz Component -------------------- */
    /* Quiz page header (above card) */
    --quiz-logo-height: 40px;
    --quiz-headline-font: var(--font-serif);
    --quiz-headline-size: clamp(28px, 6vw, 56px);
    --quiz-headline-weight: var(--font-normal);
    --quiz-headline-color: var(--color-black);
    --quiz-headline-tracking: -0.02em;
    --quiz-steps-size: var(--text-sm);
    --quiz-steps-color: var(--color-black);
    --quiz-steps-tracking: 0.18em;

    /* Card frame */
    --quiz-card-bg: var(--surface-primary);
    --quiz-card-radius: 28px;
    --quiz-card-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.25), 0 8px 24px -8px rgba(15, 23, 42, 0.08);
    --quiz-card-border: 1px solid var(--border-subtle);
    --quiz-card-padding: var(--space-10) var(--space-8) var(--space-6);
    --quiz-card-padding-mobile: var(--space-6) var(--space-5) var(--space-5);
    --quiz-card-max-width: 720px;
    --quiz-card-divider: 1px solid var(--border-subtle);

    /* Card internal eyebrow ("BOOK OF HOUSES · THE SORTING") */
    --quiz-eyebrow-font: var(--font-mono);
    --quiz-eyebrow-size: var(--text-xs);
    --quiz-eyebrow-weight: var(--font-semibold);
    --quiz-eyebrow-color: var(--color-black);
    --quiz-eyebrow-tracking: 0.16em;

    /* Progress: kicker + gradient bar + pips */
    --quiz-progress-kicker-size: var(--text-xs);
    --quiz-progress-kicker-weight: var(--font-bold);
    --quiz-progress-kicker-color: var(--accent-tertiary);
    --quiz-progress-kicker-tracking: 0.14em;
    --quiz-progress-bar-height: 6px;
    --quiz-progress-bar-radius: var(--radius-full);
    --quiz-progress-bar-bg: #E5E7EB;
    --quiz-progress-bar-fill: linear-gradient(90deg, var(--accent-tertiary) 0%, var(--accent-primary) 100%);
    --quiz-progress-pip-size: 8px;
    --quiz-progress-pip-radius: var(--radius-full);
    --quiz-progress-pip-bg: #D1D5DB;
    --quiz-progress-pip-bg-active: var(--color-black);
    --quiz-progress-pip-gap: var(--space-2);

    /* Section pill ("● OPENING · WHO ARE YOU") */
    --quiz-pill-font: var(--font-mono);
    --quiz-pill-size: var(--text-xs);
    --quiz-pill-weight: var(--font-bold);
    --quiz-pill-color: var(--accent-tertiary);
    --quiz-pill-bg: rgba(85, 52, 165, 0.12);
    --quiz-pill-padding: var(--space-2) var(--space-4);
    --quiz-pill-radius: var(--radius-full);
    --quiz-pill-tracking: 0.12em;
    --quiz-pill-dot-size: 7px;

    /* Question typography */
    --quiz-question-font: var(--font-serif);
    --quiz-question-size: clamp(24px, 4.5vw, 36px);
    --quiz-question-weight: var(--font-normal);
    --quiz-question-color: var(--color-black);
    --quiz-question-leading: 1.2;
    --quiz-question-tracking: -0.01em;
    --quiz-example-font: var(--font-serif);
    --quiz-example-size: var(--text-base);
    --quiz-example-color: var(--text-secondary);
    --quiz-example-style: italic;

    /* Hint (kept for backward compat) */
    --quiz-hint-size: var(--text-sm);
    --quiz-hint-color: var(--text-secondary);
    --quiz-hint-bg: var(--hint-bg);
    --quiz-hint-border: var(--hint-border);
    --quiz-hint-radius: var(--hint-radius);

    /* Question step indicator (legacy "QUESTION X" pill — kept for backward compat) */
    --quiz-step-size: var(--text-xs);
    --quiz-step-weight: var(--font-bold);
    --quiz-step-tracking: 0.14em;

    /* Textarea */
    --quiz-textarea-bg: #F1F4F8;
    --quiz-textarea-bg-focus: #FFFFFF;
    --quiz-textarea-border: 1px solid transparent;
    --quiz-textarea-border-focus: var(--accent-tertiary);
    --quiz-textarea-radius: 18px;
    --quiz-textarea-padding: var(--space-5) calc(var(--space-10) + var(--space-3)) var(--space-5) var(--space-5);
    --quiz-textarea-font-size: var(--text-base);
    --quiz-textarea-min-height: 130px;
    --quiz-textarea-focus-ring: 0 0 0 3px rgba(85, 52, 165, 0.15);
    --quiz-textarea-placeholder-color: var(--text-muted);

    /* Mic button (in textarea) */
    --quiz-mic-size: 40px;
    --quiz-mic-bg: var(--color-black);
    --quiz-mic-color: var(--color-white);
    --quiz-mic-recording-color: var(--color-white);
    --quiz-mic-recording-bg: var(--status-error);

    /* Card footer (BACK / Next inside card) */
    --quiz-footer-padding: var(--space-5) var(--space-8) var(--space-6);
    --quiz-footer-padding-mobile: var(--space-4) var(--space-5) var(--space-5);
    --quiz-back-color: var(--text-muted);
    --quiz-back-color-hover: var(--text-primary);
    --quiz-back-tracking: 0.18em;
    --quiz-next-bg: var(--color-black);
    --quiz-next-color: var(--color-white);
    --quiz-next-bg-hover: var(--accent-primary);
    --quiz-next-color-hover: var(--color-black);
    --quiz-next-bg-disabled: #E5E7EB;
    --quiz-next-color-disabled: var(--text-muted);
    --quiz-next-padding: var(--space-3) var(--space-6);
    --quiz-next-radius: var(--radius-full);

    /* Below-card hint ("PRESS ENTER TO ADVANCE...") */
    --quiz-foot-hint-font: var(--font-mono);
    --quiz-foot-hint-size: var(--text-xs);
    --quiz-foot-hint-color: var(--text-muted);
    --quiz-foot-hint-tracking: 0.16em;
    
    /* Loading screen */
    --quiz-loading-bg: var(--color-dark-900);
    --quiz-loading-quote-font: var(--font-heading);
    --quiz-loading-quote-size: clamp(24px, 5vw, 48px);
    --quiz-loading-quote-weight: var(--font-semibold);
    --quiz-loading-quote-color: var(--color-white);
    --quiz-loading-attr-size: clamp(13px, 2vw, 16px);
    --quiz-loading-attr-color: var(--color-gray-400);
    --quiz-loading-progress-bg: var(--color-dark-600);
    --quiz-loading-progress-height: 36px;
    --quiz-loading-progress-gradient: var(--accent-neon);

    /* -------------------- Auth Component -------------------- */
    /* Auth page */
    --auth-page-bg: var(--surface-secondary);
    --auth-card-bg: var(--surface-primary);
    --auth-card-radius: var(--radius-xl);
    --auth-card-shadow: var(--shadow-lg);
    --auth-card-padding: var(--space-6);
    --auth-card-max-width: 400px;
    
    /* Auth header */
    --auth-logo-height: 40px;
    --auth-title-font: var(--font-heading);
    --auth-title-size: var(--text-2xl);
    --auth-title-weight: var(--font-semibold);
    --auth-title-color: var(--text-primary);
    --auth-subtitle-size: var(--text-sm);
    --auth-subtitle-color: var(--text-muted);
    
    /* Form elements */
    --auth-label-size: 12px;
    --auth-label-weight: var(--font-semibold);
    --auth-label-color: var(--text-secondary);
    --auth-label-tracking: 0.02em;
    --auth-input-height: 40px;
    --auth-input-padding: 0 12px;
    --auth-input-radius: var(--radius-sm);
    --auth-input-bg: var(--surface-primary);
    --auth-input-border: 1px solid var(--border-default);
    --auth-input-border-focus: var(--color-teal-600);
    --auth-input-font-size: 15px;
    --auth-input-color: var(--text-primary);
    
    /* Auth footer */
    --auth-footer-border: 1px solid var(--border-default);
    --auth-footer-text-size: var(--text-sm);
    --auth-footer-text-color: var(--text-muted);
    --auth-footer-link-color: var(--color-teal-600);

    /* -------------------- Collectible Card -------------------- */
    --cc-bg: var(--surface-primary);
    --cc-radius: var(--radius-card);
    --cc-border: 1px solid var(--border-subtle);
    --cc-shadow: var(--shadow-md);
    --cc-info-bg: var(--surface-primary);
    --cc-info-padding: var(--space-5);
    --cc-subtitle-size: var(--text-sm);
    --cc-subtitle-color: var(--text-secondary);
    --cc-title-size: var(--text-2xl);
    --cc-title-weight: var(--font-bold);
    --cc-title-highlight: var(--accent-primary);
    --cc-series-size: var(--text-xs);
    --cc-series-color: var(--text-muted);
    --cc-stat-value-color: var(--text-primary);
    --cc-stat-label-color: var(--text-muted);
    --cc-crack-bg: rgba(0, 0, 0, 0.92);

    /* ── Zine flipbook ── */
    --zine-aspect: 2 / 3;
    --zine-aspect-mult: 1.5;

    /* Backgrounds */
    --zine-bg-dark: #1a1a2e;
    --zine-bg-black: #0a0a0f;
    --zine-bg-warm: #f5f0eb;
    --zine-bg-gray: #e8e3de;
    --zine-bg-page: var(--surface-primary);

    /* Text */
    --zine-text-primary: #1a1a1a;
    --zine-text-body: #2a2a2a;
    --zine-text-em: #444;
    --zine-text-on-dark: #fff;
    --zine-text-on-dark-muted: rgba(255, 255, 255, 0.85);
    --zine-text-on-dark-subtle: rgba(255, 255, 255, 0.5);
    --zine-text-on-dark-faint: rgba(255, 255, 255, 0.35);
    --zine-text-muted: rgba(0, 0, 0, 0.35);
    --zine-text-faint: rgba(0, 0, 0, 0.12);

    /* Glass (buttons on dark / light backgrounds) */
    --zine-glass-dark: rgba(0, 0, 0, 0.4);
    --zine-glass-dark-hover: rgba(0, 0, 0, 0.6);
    --zine-glass-light: rgba(255, 255, 255, 0.15);
    --zine-glass-light-hover: rgba(255, 255, 255, 0.3);
    --zine-glass-light-border: rgba(255, 255, 255, 0.15);

    /* Spacing */
    --zine-padding-x: 28px;
    --zine-padding-x-desktop: var(--space-8);
    --zine-close-top: var(--space-3);
    --zine-close-right: var(--space-4);
    --zine-close-size: var(--space-8);
    --zine-close-icon: var(--space-4);
    --zine-footer-bottom: var(--space-5);
    --zine-footer-right: var(--space-6);
    --zine-footer-gap: var(--space-3);
    --zine-rail-inset: var(--space-3);
    --zine-credits-gap: var(--space-4);
    --zine-credits-padding: var(--space-10) var(--zine-padding-x);

    /* Pips */
    --zine-pip-size: 6px;
    --zine-pip-gap: var(--space-2);
    --zine-pip-bottom: 28px;
    --zine-pip-bottom-desktop: var(--space-5);
    --zine-pip-bg: rgba(255, 255, 255, 0.35);
    --zine-pip-bg-active: #fff;
    --zine-pip-bg-dark: rgba(0, 0, 0, 0.2);
    --zine-pip-bg-dark-active: var(--zine-text-primary);

    /* Typography */
    --zine-body-size: 17px;
    --zine-body-lh: 1.75;
    --zine-body-size-sm: 15px;
    --zine-body-lh-sm: 1.65;
    --zine-eyebrow-size: 11px;
    --zine-eyebrow-ls: 2px;
    --zine-eyebrow-color: var(--color-teal-500, #14b8a6);
    --zine-footer-size: 11px;
    --zine-rail-size: 9px;
    --zine-rail-ls: 3px;
    --zine-hint-size: 10px;

    /* Radii */
    --zine-card-radius: var(--radius-xl);

    /* Transitions */
    --zine-ease-depart: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --zine-ease-arrive: 0.3s cubic-bezier(0.0, 0, 0.2, 1);
    --zine-ease-settle: 0.2s cubic-bezier(0.0, 0, 0.2, 1);

    /* Modal */
    --zine-modal-backdrop: rgba(0, 0, 0, 0.9);
    --zine-modal-radius: var(--radius-xl);
    --zine-modal-close-size: var(--space-10);
    --zine-modal-close-top: var(--space-5);
    --zine-modal-close-right: var(--space-6);
    --zine-modal-close-font-size: var(--text-2xl);
    --zine-modal-max-height: 85vh;
}

/* Toll Bench brand aliases. Since 2026-09-23 the root purple primitives ARE
   the Toll Bench dark purple (Steven), so this block is now an alias that
   resolves to the same values; kept so --tb-brand-purple stays the one name. */
body.start-home:not(.boh-home),
body.toll-bench-brand {
    --color-purple-500: var(--tb-brand-purple);
    --color-purple-600: var(--tb-brand-purple);
    --color-purple-700: var(--tb-brand-purple-active);
    --accent-tertiary: var(--tb-brand-purple);
    --accent-tertiary-subtle: rgba(85, 52, 165, 0.12);
    --accent-tertiary-soft: rgba(85, 52, 165, 0.08);
    --highlight-purple: var(--tb-brand-purple);
    --hint-border-color: var(--tb-brand-purple);
    --hint-border: var(--hint-border-width) solid var(--hint-border-color);
    --hint-bg: rgba(85, 52, 165, 0.06);
    --interactive-focus-ring: var(--tb-brand-purple);
    --instructional-card-bg: var(--tb-brand-purple);
    --instructional-card-border: var(--tb-brand-purple);
    --instructional-card-cta-bg: var(--tb-brand-purple);
    --instructional-card-cta-hover-bg: var(--tb-brand-purple-hover);
    --indicator-unread: var(--tb-brand-purple);
    --electric-purple: var(--tb-brand-purple);
    --tb-agent: var(--tb-brand-purple);
    --tb-agent-highlight: rgba(85, 52, 165, 0.12);
}
/* The rail is Book of Houses chrome; it wears the same dark purple (2026-09-23). */
body.start-home:not(.boh-home) .start-home__rail {
    --color-purple-500: #5534a5;
    --color-purple-600: #5534a5;
    --color-purple-700: #432982;
    --accent-tertiary: #5534a5;
    --accent-tertiary-subtle: rgba(85, 52, 165, 0.12);
    --accent-tertiary-soft: rgba(85, 52, 165, 0.08);
    --highlight-purple: #5534a5;
}
/* data-house-theme lives on the entire app shell, so preserve only the two
   purple house identity roles; do not revert Toll brand across the shell. */
body.toll-bench-brand .app-shell[data-house-theme="integrity"] {
    --accent-primary: #5534a5;
    --accent-primary-hover: #432982;
    --accent-primary-subtle: rgba(85, 52, 165, 0.12);
    --avatar-ring-color: #5534a5;
}
body.toll-bench-brand .app-shell[data-house-theme="wisdom"] {
    --accent-primary: #5534a5;
    --accent-primary-hover: #5534a5;
    --accent-primary-subtle: rgba(168, 85, 247, 0.12);
    --avatar-ring-color: #5534a5;
}

/* =============================================================================
   LAYER 4: HOUSE THEME OVERRIDES
   Apply via data-house-theme attribute on .app-shell
   ============================================================================= */

/* Courage House - Red/Orange theme */
[data-house-theme="courage"] {
    --accent-primary: var(--color-red-500);
    --accent-primary-hover: var(--color-red-400);
    --accent-primary-subtle: rgba(239, 68, 68, 0.12);
    --accent-secondary: var(--color-orange-500);
    --avatar-ring-color: var(--color-red-500);
    --avatar-glow-color: rgba(220, 38, 38, 0.4);
}

/* Integrity House - Purple/Blue theme */
[data-house-theme="integrity"] {
    --accent-primary: var(--color-purple-600);
    --accent-primary-hover: var(--color-purple-700);
    --accent-primary-subtle: rgba(85, 52, 165, 0.12);
    --accent-secondary: var(--color-blue-500);
    --avatar-ring-color: var(--color-purple-600);
    --avatar-glow-color: rgba(85, 52, 165, 0.4);
}

/* Focus House - Green/Teal theme */
[data-house-theme="focus"] {
    --accent-primary: var(--color-green-500);
    --accent-primary-hover: var(--color-green-400);
    --accent-primary-subtle: rgba(34, 197, 94, 0.12);
    --accent-secondary: var(--color-teal-500);
    --avatar-ring-color: var(--color-green-500);
    --avatar-glow-color: rgba(22, 163, 74, 0.4);
}

/* Wisdom House - Purple/Pink theme */
[data-house-theme="wisdom"] {
    --accent-primary: var(--color-purple-500);
    --accent-primary-hover: var(--color-purple-600);
    --accent-primary-subtle: rgba(168, 85, 247, 0.12);
    --accent-secondary: var(--color-pink-500);
    --avatar-ring-color: var(--color-purple-500);
    --avatar-glow-color: rgba(85, 52, 165, 0.4);
}

/* =============================================================================
   HOUSE NAV ON-IMAGE OVERRIDE
   Use class="house-nav--on-image" when nav overlays a banner image.
   Restores dark frosted-glass appearance for legibility over photos.
   ============================================================================= */
.house-nav--on-image {
    --house-nav-item-color: rgba(255, 255, 255, 0.65);
    --house-nav-item-hover-bg: rgba(255, 255, 255, 0.1);
    --house-nav-item-hover-color: rgba(255, 255, 255, 0.85);
    --house-nav-item-active-bg: rgba(44, 52, 68, 0.95);
    --house-nav-item-active-color: #ffffff;
    --house-nav-item-active-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --house-nav-item-active-icon: var(--color-teal-400);
    --house-nav-item-border: 1px solid rgba(255, 255, 255, 0.15);
    --house-nav-item-active-border: 1px solid rgba(255, 255, 255, 0.25);
}

/* =============================================================================
   WORKSPACE COLOR PALETTE
   8 colors that auto-rotate for new build workspaces.
   Set via data-palette attribute, no inline styles needed.
   ============================================================================= */
[data-palette="0"] { --workspace-color: var(--color-cyan-500); }
[data-palette="1"] { --workspace-color: var(--color-orange-500); }
[data-palette="2"] { --workspace-color: var(--color-purple-500); }
[data-palette="3"] { --workspace-color: var(--color-green-500); }
[data-palette="4"] { --workspace-color: var(--color-red-500); }
[data-palette="5"] { --workspace-color: var(--color-teal-500); }
[data-palette="6"] { --workspace-color: var(--color-yellow-400); }
[data-palette="7"] { --workspace-color: var(--color-blue-500); }

/* =============================================================================
   DS CARD COMPONENT TOKENS
   Tokenised card families for the Design System pages.
   ============================================================================= */
:root {
    /* ── House Result Card ── */
    --result-card-bg: linear-gradient(180deg, var(--color-dark-600) 0%, var(--color-dark-800) 100%);
    --result-card-radius: var(--radius-2xl);
    --result-card-border: 1px solid rgba(51, 230, 88, 0.08);
    --result-card-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
    --result-card-padding: var(--space-5) var(--space-8) var(--space-8);
    --result-card-edge: linear-gradient(90deg, transparent, var(--accent-neon), transparent);

    --result-badge-bg: var(--accent-primary-subtle);
    --result-badge-color: var(--accent-neon);
    --result-badge-font: var(--font-heading);
    --result-badge-size: var(--text-xs);
    --result-badge-weight: var(--font-semibold);
    --result-badge-radius: var(--radius-full);
    --result-badge-padding: var(--space-1) var(--space-4);
    --result-badge-tracking: 0.15em;

    --result-label-color: var(--color-white);
    --result-label-size: var(--text-sm);
    --result-label-weight: var(--font-light);

    --result-identity-font: var(--font-serif);
    --result-identity-size: clamp(18px, 4vw, 24px);
    --result-identity-weight: var(--font-medium);
    --result-identity-color: var(--color-gray-300);
    --result-identity-tracking: 0.12em;

    --result-value-font: var(--font-heading);
    --result-value-size: clamp(44px, 10vw, 72px);
    --result-value-weight: var(--font-bold);
    --result-value-color: var(--color-white);
    --result-value-gradient: linear-gradient(135deg, var(--accent-neon), var(--accent-neon));

    --result-divider-color: var(--color-dark-500);
    --result-divider-width: 60px;

    --result-body-color: var(--color-gray-300);
    --result-body-size: var(--text-base);
    --result-body-weight: var(--font-light);
    --result-body-leading: 1.8;

    --result-quote-color: var(--color-gray-400);
    --result-quote-size: var(--text-sm);
    --result-quote-weight: var(--font-normal);

    --result-bar-bg: rgba(0, 0, 0, 0.25);
    --result-bar-border: 1px solid rgba(255, 255, 255, 0.06);
    --result-bar-padding: var(--space-4) var(--space-5);
    --result-bar-name-font: var(--font-heading);
    --result-bar-name-size: var(--text-sm);
    --result-bar-name-color: var(--color-white);
    --result-bar-role-size: var(--text-xs);
    --result-bar-role-color: var(--color-gray-500);
    --result-bar-logo-size: var(--size-10);
    --result-bar-logo-radius: var(--radius-md);

    --result-action-padding: var(--space-3) var(--space-5);
    --result-action-font: var(--font-heading);
    --result-action-size: var(--text-sm);
    --result-action-weight: var(--font-medium);
    --result-action-tracking: 0.1em;
    --result-action-radius: var(--radius-full);
    --result-action-color: var(--color-white);
    --result-action-bg: transparent;
    --result-action-border: 1px solid rgba(255, 255, 255, 0.25);
    --result-action-hover-bg: var(--accent-primary);
    --result-action-hover-color: var(--color-dark-900);
    --result-action-hover-border: 1px solid var(--accent-primary);
    --result-action-primary-bg: var(--color-white);
    --result-action-primary-color: var(--color-dark-900);
    --result-action-primary-border: 1px solid var(--color-white);
    --result-logo-width: 120px;
    --result-logo-margin: var(--space-3) auto var(--space-4);

    --result-badge-border: 1px solid rgba(51, 230, 88, 0.12);

    /* ── Auth page ── */
    --auth-logo-size: var(--text-base);
    --auth-logo-weight: var(--font-semibold);
    --auth-logo-tracking: 0.08em;
    --auth-logo-color: var(--accent-primary);
    --auth-logo-icon-size: 18px;
    --auth-subtitle-color: var(--text-muted);
    --auth-subtitle-size: var(--text-sm);

    /* ── Result Card — Light (Sorted) variant ── */
    --result-light-bg: var(--color-white);
    --result-light-border: 1px solid var(--color-gray-200);
    --result-light-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.12);
    --result-light-edge: linear-gradient(90deg, transparent, var(--highlight-purple), transparent);
    --result-light-label-color: var(--text-secondary);
    --result-light-header-padding: var(--space-3) var(--space-6);
    --result-light-header-logo-size: 18px;
    --result-light-header-text-size: var(--text-base);
    --result-light-house-name-color: var(--text-primary);
    --result-light-house-name-size: clamp(22px, 4.5vw, 28px);
    --result-light-belief-color: var(--text-secondary);
    --result-light-belief-size: var(--text-base);
    --result-light-bottom-padding: var(--space-3) var(--space-5) var(--space-2);

    /* ── Result Card — Flip mechanics ── */
    --result-flip-perspective: 1200px;
    --result-flip-duration: 0.7s;
    --result-flip-easing: cubic-bezier(0.4, 0.0, 0.2, 1);

    /* ── Result Card — "You are a" seer label ── */
    --result-seer-size: 15px;
    --result-seer-weight: var(--font-light);
    --result-seer-color: var(--color-gray-500);
    --result-seer-tracking: 0.03em;

    /* ── Result Card — Bar flip-trigger button ── */
    --result-bar-btn-font: var(--font-heading);
    --result-bar-btn-size: 13px;
    --result-bar-btn-weight: var(--font-medium);
    --result-bar-btn-tracking: 0.1em;
    --result-bar-btn-color: var(--color-white);
    --result-bar-btn-bg: rgba(51, 230, 88, 0.08);
    --result-bar-btn-border: 1px solid rgba(51, 230, 88, 0.2);
    --result-bar-btn-radius: var(--radius-sm);
    --result-bar-btn-padding: var(--space-2) var(--space-5);
    --result-bar-btn-hover-bg: rgba(51, 230, 88, 0.14);
    --result-bar-btn-hover-border: 1px solid rgba(51, 230, 88, 0.35);
    --result-bar-btn-hover-shadow: 0 0 16px rgba(51, 230, 88, 0.1);

    /* ── Result Card — Back side ── */
    --result-back-hero-bg: var(--color-dark-800);
    --result-back-hero-gradient: linear-gradient(to top, var(--color-dark-800) 0%, rgba(10, 16, 32, 0.85) 35%, transparent 100%);
    --result-back-hero-aspect: 16 / 10;
    --result-back-house-font: var(--font-heading);
    --result-back-house-size: clamp(28px, 7vw, 40px);
    --result-back-house-weight: var(--font-bold);
    --result-back-house-tracking: 0.04em;
    --result-back-house-color: var(--color-white);
    --result-back-motto-size: 15px;
    --result-back-motto-color: var(--color-gray-300);
    --result-back-section-font: var(--font-heading);
    --result-back-section-size: 11px;
    --result-back-section-weight: var(--font-normal);
    --result-back-section-tracking: 0.2em;
    --result-back-section-color: var(--color-gray-500);
    --result-back-goal-size: var(--text-base);
    --result-back-goal-weight: var(--font-light);
    --result-back-goal-color: var(--color-gray-300);
    --result-back-goal-leading: 1.7;
    --result-back-cta-font: var(--font-heading);
    --result-back-cta-size: var(--text-base);
    --result-back-cta-weight: var(--font-medium);
    --result-back-cta-tracking: 0.1em;
    --result-back-cta-color: var(--color-dark-900);
    --result-back-cta-bg: var(--accent-neon);
    --result-back-cta-radius: var(--radius-full);
    --result-back-cta-padding: var(--space-4) var(--space-10);
    --result-back-cta-hover-shadow: 0 8px 32px rgba(51, 230, 88, 0.3);
    --result-back-flipback-color: var(--accent-neon);
    --result-back-flipback-font: var(--font-heading);
    --result-back-flipback-size: 14px;
    --result-back-flipback-weight: var(--font-medium);
    --result-back-flipback-tracking: 0.12em;
    --result-back-flipback-border: 1px solid rgba(51, 230, 88, 0.08);
    --result-back-flipback-hover-bg: rgba(51, 230, 88, 0.04);

    /* ── Result Strip (sticky action bar) ── */
    --result-strip-bg: var(--surface-app);
    --result-strip-border: 1px solid rgba(0, 0, 0, 0.08);
    --result-strip-padding: var(--space-4) var(--space-5);
    --result-strip-gap: var(--space-3);
    --result-strip-z: var(--z-sticky);
    --result-strip-btn-font: var(--font-heading);
    --result-strip-btn-size: 14px;
    --result-strip-btn-weight: var(--font-medium);
    --result-strip-btn-tracking: 0.1em;
    --result-strip-btn-radius: var(--radius-full);
    --result-strip-btn-padding: var(--space-3) var(--space-5);
    --result-strip-share-color: var(--color-gray-600);
    --result-strip-share-bg: var(--color-white);
    --result-strip-share-border: 1px solid rgba(0, 0, 0, 0.1);
    --result-strip-share-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --result-strip-cta-color: var(--color-dark-900);
    --result-strip-cta-bg: var(--accent-neon);
    --result-strip-cta-shadow: 0 2px 12px rgba(51, 230, 88, 0.25);

    /* ── Passport / Onboarding Card ── */
    --passport-card-bg: var(--surface-primary);
    --passport-card-radius: var(--radius-xl);
    --passport-card-border: 1px solid var(--border-default);
    --passport-card-shadow: 0 26px 60px -34px rgba(44, 52, 68, 0.52);
    --passport-card-corner-color: rgba(44, 52, 68, 0.16);
    --passport-card-corner-size: 28px;
    --passport-card-edge: linear-gradient(90deg, transparent, var(--accent-primary), transparent);

    --passport-banner-min-h: 560px;
    --passport-banner-gradient: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.18) 100%);
    --passport-avatar-size: 72px;
    --passport-avatar-ring: var(--accent-neon);
    --passport-handle-font: var(--font-heading);
    --passport-handle-size: var(--text-3xl);
    --passport-handle-weight: 800;
    --passport-handle-color: var(--text-primary);
    --passport-three-words-color: var(--accent-neon);
    --passport-three-words-size: var(--text-sm);
    --passport-three-words-tracking: 0.08em;
    --passport-pill-bg: var(--surface-secondary);
    --passport-pill-border: 1px solid var(--border-default);
    --passport-pill-color: var(--text-secondary);
    --passport-pill-primary-color: var(--color-black);
    --passport-pill-primary-bg: var(--accent-primary);
    --passport-action-color: var(--text-secondary);
    --passport-action-hover: var(--text-primary);
    --passport-house-logo-size: 92px;

    /* ── Profile Card ── */
    --profile-card-bg: var(--surface-primary);
    --profile-card-radius: var(--radius-xl);
    --profile-card-shadow: var(--shadow-lg);
    --profile-card-border: 1px solid var(--border-default);
    --profile-card-padding: var(--space-6);
    --profile-card-avatar-size: var(--size-20);
    --profile-card-name-font: var(--font-heading);
    --profile-card-name-size: var(--text-2xl);
    --profile-card-name-weight: var(--font-bold);
    --profile-card-name-color: var(--text-primary);
    --profile-card-handle-size: var(--text-sm);
    --profile-card-handle-color: var(--text-muted);
    --profile-card-bio-size: var(--text-base);
    --profile-card-bio-color: var(--text-secondary);
    --profile-card-bio-leading: var(--leading-relaxed);
    --profile-card-stat-value-font: var(--font-heading);
    --profile-card-stat-value-size: var(--text-2xl);
    --profile-card-stat-value-weight: var(--font-bold);
    --profile-card-stat-value-color: var(--text-primary);
    --profile-card-stat-label-size: var(--text-xs);
    --profile-card-stat-label-color: var(--text-muted);
    --profile-card-stat-label-tracking: 0.08em;

    /* ── House Info Card ── */
    --house-info-card-bg: var(--surface-primary);
    --house-info-card-radius: var(--radius-xl);
    --house-info-card-shadow: var(--shadow-md);
    --house-info-card-border: 1px solid var(--border-default);
    --house-info-card-padding: var(--space-6);
    --house-info-card-banner-h: 200px;
    --house-info-card-banner-radius: var(--radius-lg);
    --house-info-card-name-font: var(--font-heading);
    --house-info-card-name-size: var(--text-2xl);
    --house-info-card-name-weight: var(--font-bold);
    --house-info-card-name-color: var(--text-primary);
    --house-info-card-motto-font: var(--font-serif);
    --house-info-card-motto-size: var(--text-base);
    --house-info-card-motto-color: var(--text-secondary);
    --house-info-card-desc-size: var(--text-base);
    --house-info-card-desc-color: var(--text-secondary);
    --house-info-card-desc-leading: var(--leading-relaxed);
    --house-info-card-stat-bg: var(--surface-secondary);
    --house-info-card-stat-radius: var(--radius-md);
    --house-info-card-stat-padding: var(--space-4);
    --house-info-card-stat-value-font: var(--font-heading);
    --house-info-card-stat-value-size: var(--text-xl);
    --house-info-card-stat-value-weight: var(--font-bold);
    --house-info-card-stat-value-color: var(--text-primary);
    --house-info-card-stat-label-size: var(--text-xs);
    --house-info-card-stat-label-color: var(--text-muted);

    /* ── Lockup tokens ────────────────────────────────────────────────
       HARD RULE: mark height MUST equal text cap-height in single-line
       lockup. For two-line lockup, mark spans both lines.
       ────────────────────────────────────────────────────────────── */
    --lockup-font: var(--font-mono);
    --lockup-font-weight: 700;
    --lockup-tracking: 0.05em;
    --lockup-gap: var(--space-3);

    /* Single-line lockup */
    --lockup-text-size: var(--text-sm);          /* 14px — mark matches this */
    --lockup-mark-size: var(--text-sm);          /* HARD: must equal --lockup-text-size */

    /* Two-line lockup */
    --lockup-2l-brand-size: var(--text-sm);      /* 14px line 1: BOOK OF HOUSES */
    --lockup-2l-tagline-size: var(--text-xs);    /* 12px line 2: INTENT CREATES THE FUTURE */
    --lockup-2l-tagline-font: var(--font-serif);
    --lockup-2l-tagline-weight: 400;
    --lockup-2l-tagline-color-light: var(--text-muted);
    --lockup-2l-tagline-color-dark: rgba(255, 255, 255, 0.6);
    --lockup-2l-mark-size: calc(var(--lockup-2l-brand-size) + var(--lockup-2l-tagline-size) + var(--space-1));
    --lockup-2l-gap: var(--space-3);
    --lockup-2l-line-gap: var(--space-1);

    /* Light variant colors */
    --lockup-text-color-light: var(--text-primary);
    --lockup-mark-fill-light: var(--text-primary);

    /* Dark variant colors */
    --lockup-text-color-dark: #FFFFFF;
    --lockup-mark-fill-dark: #FFFFFF;
    --lockup-dark-bg: var(--accent-dark);

    /* ── Dictation Field (textarea + mic) ── */
    --dictation-min-height: 120px;
    --dictation-max-height: 320px;
    --dictation-mic-size: 36px;
    --dictation-mic-offset: var(--space-2);
}

/* =============================================================================
   DICTATION FIELD — shared textarea + mic-button component
   Usage: .boho-dictation-field > textarea + button.boho-dictation-mic
   Textarea auto-grows during voice input, cursor always stays visible.
   ============================================================================= */
.boho-dictation-field {
    position: relative;
}

.boho-dictation-field textarea {
    width: 100%;
    min-height: var(--dictation-min-height);
    max-height: var(--dictation-max-height);
    padding: var(--space-3);
    padding-right: calc(var(--dictation-mic-size) + var(--dictation-mic-offset) * 2 + var(--space-1));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    transition: border-color var(--duration-fast) var(--ease-default);
}

.boho-dictation-field textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.boho-dictation-field textarea::placeholder {
    color: var(--text-muted);
}

.boho-dictation-mic {
    position: absolute;
    top: var(--dictation-mic-offset);
    right: var(--dictation-mic-offset);
    width: var(--dictation-mic-size);
    height: var(--dictation-mic-size);
    border: none;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-default);
}

.boho-dictation-mic:hover {
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.boho-dictation-mic.recording,
.boho-dictation-mic.dm-mic-btn--recording {
    background: var(--status-error);
    color: #fff;
    animation: bohoDictationPulse 1.5s ease-in-out infinite;
}

.boho-dictation-mic .dm-mic-btn__timer {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--status-error);
    white-space: nowrap;
}

@keyframes bohoDictationPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-error) 40%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

/* ==== components/probability-card.css ==== */
/* Shared Initial / Targets / Plan card presentation. No plan-sheet or Details selectors. */
body .probability-card.target-anchor,
body .probability-card.target-trajectory { position: relative; margin-top: var(--space-4); padding-top: var(--space-8); padding-inline: var(--space-6); }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__pills { position: absolute; z-index: 2; top: 0; left: var(--space-6); right: var(--space-6); transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); pointer-events: none; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__tag { display: inline-flex; align-items: center; min-height: var(--size-6); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--highlight-yellow); color: var(--color-black); font: var(--font-bold) var(--text-xs)/1 var(--font-mono); text-transform: uppercase; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__band { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__band[hidden] { display: none; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-anchor__title,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-trajectory__title,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__want { font-family: var(--font-heading); font-size: var(--text-2xl); font-style: normal; font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: -.02em; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__want .hl { padding: 0; color: inherit; background: transparent; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-anchor__probability,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-trajectory__probability,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-line { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: var(--space-4); }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-anchor__probability-value:not(.target-anchor__probability-value--success),
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-trajectory__probability > strong,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-pill { display: inline; flex: 0 0 auto; min-width: 0; background: transparent; color: var(--text-primary); border: 0; border-radius: 0; padding: 0; box-shadow: none; font-family: var(--font-heading); font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl)); font-weight: var(--font-bold); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.045em; white-space: nowrap; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__context { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-1); min-width: 0; flex: 1 1 auto; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-anchor__probability-label,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-trajectory__caption,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-about { margin: 0; padding: 0; font-family: var(--font-body); font-size: var(--text-base); font-style: normal; font-weight: var(--font-normal); line-height: 1.2; color: var(--text-secondary); white-space: normal; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-trajectory__move,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-move { display: inline-flex; align-items: baseline; gap: var(--space-1); margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.2; white-space: nowrap; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-trajectory__move-arrow,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-move-arrow { font-size: var(--text-sm); order: -1; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-move[hidden] { display: none; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-move-arrow { display: none; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-move--up .start-card__odds-move-arrow--up,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-move--down .start-card__odds-move-arrow--down { display: inline-flex; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .want-proposal-arrival__cta:hover,
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .want-proposal-arrival__cta:focus-visible { background: var(--accent-tertiary); color: var(--color-white); }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__direction { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); font: var(--text-xs)/1.4 var(--font-mono); color: var(--text-muted); }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__direction > span:nth-child(2) { position: relative; flex: 1; height: 1px; background: currentColor; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__direction > span:nth-child(2)::after { content: ''; position: absolute; right: 0; top: calc(-1 * var(--space-1)); border-left: var(--space-2) solid currentColor; border-top: var(--space-1) solid transparent; border-bottom: var(--space-1) solid transparent; }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-chart__explanation:empty { display: none; }
/* The initial card has two existing border owners (initial form / expanded face).
   Its animation owns transform, so place the pill midpoint at the border via top. */
body .start-card__compact-face.probability-card .probability-card__pills { top: calc(-1 * (var(--space-4) + var(--size-6) / 2)); left: var(--space-6); right: var(--space-6); }
body .start-hero__entry--docked .start-card__compact-face.probability-card .probability-card__pills,
body .wants-compose__flow .start-card__compact-face.probability-card .probability-card__pills { top: calc(var(--size-6) / -2); }
body .wants-compose__flow .start-card__compact-face.probability-card .probability-card__pills { right: calc(var(--space-6) + var(--size-9, 36px)); }
@media(max-width:560px) {
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-anchor__probability,
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-trajectory__probability,
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-line { gap: var(--space-3); }
 /* Keep the badge and caption within the number's height on phones. */
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card :is(.target-anchor__probability-label, .target-trajectory__caption, .start-card__odds-about) { font-size: var(--text-xs); line-height: 1; }
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card :is(.target-trajectory__move, .start-card__odds-move) { font-size: var(--text-xs); line-height: 1; }
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card :is(.target-anchor__probability-value:not(.target-anchor__probability-value--success), .target-trajectory__probability > strong, .start-card__odds-pill) { font-size: clamp(var(--text-4xl), 9vw, 2.25rem); min-height: 0; text-box: trim-both cap alphabetic; }
}
@media(max-width:360px) {
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-anchor__probability-value:not(.target-anchor__probability-value--success),
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .target-trajectory__probability > strong,
 body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__odds-pill { font-size: var(--text-4xl); }
}

body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .start-card__want-icon { background: var(--highlight-yellow); color: var(--color-black); border-radius: var(--radius-full); padding: var(--space-1); box-sizing: content-box; }

body :is(.target-anchor, .target-trajectory).probability-card .probability-card__number--long { flex: 0 1 auto; white-space: normal; overflow-wrap: anywhere; }
body .start-card__compact-face.probability-card .start-card__odds-pill[data-rare="true"] { flex: 0 1 auto; white-space: normal; overflow-wrap: anywhere; }

body .start-card__compact-face.probability-card .start-card__odds-note { font-family: var(--font-body); font-size: var(--text-base); font-style: normal; line-height: var(--leading-relaxed); }
body :is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card :is(.start-card__want-icon, .target-anchor__title-icon, .target-trajectory__title-icon):not(.want-celebrate-emoji) { display: inline-flex; width: 1.5em; height: 1.5em; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; font-size: .72em; margin-right: var(--space-2); vertical-align: -.14em; background: var(--highlight-yellow); color: var(--color-black); border-radius: var(--radius-full); }
/* Follow the existing meter suppression for gentle-mode wants. */
body .start-card__compact-face.probability-card:has(.start-card__odds[hidden]) .probability-card__band { display: none; }

/* The direction arrow is the card’s final line; omit the extra divider. */
body .probability-card .target-chart { border-bottom: 0; padding-bottom: 0; }

/* Toll Bench cards omit the header pills; feed cards retain them. */
body :is(.wants-page, .want-detail) .probability-card .probability-card__pills { display: none; }
body :is(.wants-page, .want-detail) .probability-card:is(.target-anchor, .target-trajectory) { margin-top: 0; padding-top: var(--space-6); }
/* Toll Bench identity pill (Steven 2026-09-17: yellow reads better than black): yellow, wordmark font, the bullseye is the O and flips to a black disc so it holds on yellow. Same height as the feed post pills. */
body :is(.target-anchor, .target-trajectory).probability-card .probability-card__bench { display: inline-flex; align-items: center; min-height: calc(var(--size-6) + var(--space-1)); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--highlight-yellow); color: var(--color-black); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--font-bold); line-height: 1; letter-spacing: -.02em; }
body :is(.target-anchor, .target-trajectory).probability-card .probability-card__bench .toll-wordmark__target { background: var(--color-black); color: var(--highlight-yellow); }
/* On the feed the pill carries the bullseye, so the title drops its own (Steven 2026-09-17, feed only; the celebration emoji stays). */
body .feed-primary-want .probability-card.target-trajectory .target-trajectory__title-icon:not(.want-celebrate-emoji) { display: none; }

/* ==== pages/start-home.css ==== */
/* @import ../components/probability-card.css?v=20260923-numeric-56-responsive-1: inlined above */
/* /start — the threshold of the Book: the bare feed shell holding one question.
   Layout reserves the feed's rail column so the page can grow into the real feed.
   Proportions follow the Google homepage; the headline treatment mirrors the
   sorting landing hero (green highlight pills + soft serif). */

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

/* Standalone page: hide the viewport scrollbar, keep scrolling */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; }

.start-home { --start-motion-normal: 350ms; --start-motion-slow: 550ms; --start-motion-rail: 700ms; display: grid; grid-template-columns: var(--boh-rail-width, calc(var(--size-16) + var(--space-1))) minmax(0, 1fr); overflow: clip; height: 100dvh; margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-body); }

.start-home__rail { position: fixed; z-index: var(--z-rail); inset: 0 auto 0 0; overflow: hidden; display: flex; width: var(--boh-rail-width, calc(var(--size-16) + var(--space-1))); height: 100vh; height: 100dvh; min-height: 0; flex-direction: column; align-items: center; gap: var(--space-2); padding: calc(env(safe-area-inset-top, 0px) + var(--space-3)) var(--space-2) calc(env(safe-area-inset-bottom, 0px) + var(--space-3)); border-right: 1px solid var(--border-default); background: var(--surface-app); touch-action: pan-y; overscroll-behavior: contain; }
/* Steven 2026-08-10: the rail logo target sits in a FILLED yellow disc (the
   Toll Bench yellow) so the top bar reads as one black bar with a yellow-circled
   target. The .start-home__rail-about neighbor stays transparent -- leave it as
   is. The bookofhouses.com variant (.boh-home__mark) supplies its own green fill
   and is unaffected by this base rule. */
.start-home__mark { position: relative; z-index: 2; display: grid; place-items: center; width: var(--size-10); height: var(--size-10); border-radius: var(--radius-full); background: var(--color-yellow-400); color: var(--text-primary); }
.start-home__mark svg { width: var(--size-6); height: var(--size-6); }
.start-home__mark iconify-icon { font-size: var(--size-6); display: block; }
.start-home__rail-stack { position: relative; order: 2; flex: 1 1 auto; align-self: stretch; min-height: 0; margin-top: var(--space-3); }
.start-home__rail-brandline { position: absolute; left: 50%; top: 0; display: inline-flex; align-items: center; gap: var(--space-3); white-space: nowrap; transform-origin: 0 0; transform: rotate(90deg) translateY(-50%); }
.start-home__rail-eyebrow { color: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .12em; line-height: 1; }
.start-home__rail-spine { color: var(--slate); font-family: var(--font-serif); font-size: var(--size-6); font-weight: 500; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.start-home__rail-spine em { font-style: italic; }
/* Rail "?" glyph (Steven 2026-08-09): rides the END of the rotated
   Book of Houses spine so it sits right BELOW the "S", just past the
   text. It is the brandline's last flex child; counter-rotated -90deg so
   the glyph reads upright. Slate glyph matching the wordmark (Steven
   2026-08-11: was purple accent), never green. The translateY nudge slides
   it along the spine's cross axis so it centers under the "S" ink rather
   than the em-box. Crosses to the old bookofhouses.com homepage. */
.start-home__rail-about { display: grid; place-items: center; width: var(--size-8); height: var(--size-8); background: transparent; color: var(--slate); text-decoration: none; transform: translateY(var(--space-1)) rotate(-90deg); transition: background var(--start-motion-normal) ease, color var(--start-motion-normal) ease; }
.start-home__rail-about iconify-icon { display: block; font-size: var(--size-5); }
.start-home__rail-about:hover { background: var(--border-default); }
.start-home__rail-about:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.start-home__rail-orb { position: absolute; left: 0; top: calc(var(--orb-index) * (var(--boh-rail-control-size, var(--size-10)) + var(--space-2))); overflow: hidden; display: grid; place-items: center; width: var(--boh-rail-control-size, var(--size-10)); height: var(--boh-rail-control-size, var(--size-10)); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--color-black); box-shadow: var(--shadow-xs); opacity: 1; transform: translateY(0) scale(1); transition: transform var(--start-motion-rail) cubic-bezier(.16, .84, .24, 1), opacity var(--start-motion-normal) ease, border-color var(--start-motion-normal) ease, box-shadow var(--start-motion-normal) ease; transition-delay: calc(var(--orb-index) * 70ms); }
.start-home__rail-letter { display: grid; place-items: center; width: var(--size-6); height: var(--size-6); font-family: var(--lockup-font); font-size: var(--size-6); font-weight: 900; letter-spacing: 0; line-height: 1; opacity: 1; transition: opacity var(--start-motion-normal) ease; }
.start-home__rail-letter--of { font-family: var(--font-serif); font-style: italic; font-weight: 600; }

.start-home__page { grid-column: 2; display: flex; min-width: 0; flex-direction: column; height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; scroll-padding-top: var(--size-16); }
.start-home__page::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* No rail (Steven 2026-09-29): the Toll Bench homepage drops the left rail and
   runs full width (market_no_rail in layouts/market_page.html). The rail width
   reads zero on this body, so every offset keyed to it (homepage-how.css page
   and footer margin-left) collapses too; the grid keeps one column only. */
body.start-home--no-rail { --boh-rail-width: 0px; grid-template-columns: minmax(0, 1fr); }
body.start-home--no-rail .start-home__page { grid-column: 1; }
.start-home__topbar { transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }
/* Steven 2026-08-10: the Toll Bench top bar is always black with legible light contents. */
.market-topbar { position: relative; display: flex; min-height: var(--size-16); align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-dark-700); background: var(--color-dark-900); }
.market-brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-3); margin-right: auto; color: var(--text-inverse); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--font-extrabold, 800); line-height: 1; text-decoration: none; white-space: nowrap; }
.market-brand:hover { color: var(--color-yellow-400); }
.market-brand__icon { display: block; font-size: var(--size-6); }
.market-nav { display: flex; align-items: center; gap: var(--space-2); }
.market-nav__link { color: var(--text-inverse); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.2; text-decoration: none; white-space: nowrap; }
.market-nav__link:hover,
.market-nav__link[aria-current="page"] { text-decoration: underline; }
.market-nav__sep { color: var(--color-dark-500); font-size: var(--text-sm); line-height: 1; }
/* One white pill on the public header (Steven 2026-10-01): Shop / Want / Menu,
   left to right, at every width. It replaces the purple "Post a Want" button
   and the bare menu button. Same measurements as the interior utility pill
   (layout.css .top-bar__floating-pill--utility: 40px tall, 3px inset, 36x34
   slots, 20px glyphs, the --topbar-pill-* tokens) so the two read as one
   component. Written here, not borrowed from layout.css, because most public
   pages never load layout.css; every page that includes the market or Book of
   Houses header loads this file. */
.market-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; height: var(--size-10); padding: 3px; border: 1px solid var(--topbar-pill-border); border-radius: var(--topbar-pill-radius); background: var(--topbar-pill-bg); box-shadow: var(--topbar-pill-shadow); }
.market-pill__btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-primary); font: inherit; text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); }
.market-pill__btn:hover { background: var(--surface-secondary); color: var(--text-primary); }
.market-pill__btn:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 1px; }
.market-pill__btn iconify-icon { display: block; width: var(--size-5); height: var(--size-5); font-size: var(--size-5); }
/* The Want slot is a purple disc with a white plus: the post-a-want door. A
   true circle (34x34), the purple the old button wore. */
.market-pill__btn--want { width: 34px; background: var(--tb-brand-purple); color: var(--color-white); }
.market-pill__btn--want:hover { background: var(--tb-brand-purple-hover); color: var(--color-white); }
.market-pill__btn--want:active { background: var(--tb-brand-purple-active); }
/* The menu lives inside the header and hangs off its bottom edge, so it opens
   right under the bar wherever the page is scrolled (the sticky-menu
   accidents of 2026-08-27 cannot recur). Wide screens: a small card under the
   pill. Phones: full width, below (max-width: 767px). */
.market-menu { display: none; }
.market-menu:not([hidden]) { display: block; position: absolute; top: 100%; right: var(--space-6); z-index: 1; width: max-content; margin-top: var(--space-2); padding: var(--space-1) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); box-shadow: var(--shadow-lg); }
.market-menu__link { display: block; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-default); color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-semibold); text-decoration: none; }
.market-menu__link:last-child { border-bottom: 0; }
@media (max-width: 520px) {
  .market-topbar { gap: var(--space-3); padding-inline: var(--space-3); }
  .market-brand { font-size: var(--text-2xl); }
  .market-nav { gap: var(--space-1); }
  .market-nav__link { font-size: var(--text-xs); }
}
@media (max-width: 390px) {
  .market-topbar { gap: var(--space-2); padding-inline: var(--space-2); }
  .market-brand { font-size: var(--text-2xl); }
  .market-nav { gap: var(--space-1); }
}
/* BETA tag (Steven 2026-09-28, Option A): small yellow outlined tag right after
   the TOLL Bench wordmark, Toll Bench homepage only (market_beta_tag in
   feed/_market_header.html). Rules below touch only .market-brand--beta. */
.market-brand__tagstack { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.market-tagline { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-5); padding: 0 var(--space-2); box-sizing: border-box; border: 1px solid var(--color-yellow-400); border-radius: var(--radius-full); color: var(--color-yellow-400); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.market-tagline__target { display: block; flex: 0 0 auto; width: 1em; height: 1em; }
/* Beta (Steven 2026-10-03): stacked ABOVE the tagline pill, left-aligned with
   it, very small, no outline. The stack sits to the right of the wordmark and
   is vertically centered against it at every width. */
.market-brand__tagstack { justify-content: center; }
.market-beta-tag { display: block; padding-left: var(--space-1); color: var(--color-yellow-400); font-family: var(--font-mono); font-size: calc(var(--text-xs) * .75); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); line-height: 1; text-transform: uppercase; }
/* Phones: wordmark, pill and Beta stay on ONE row; the pill shrinks so the
   Shop / Want / Menu pill keeps its place on the right. */
@media (max-width: 520px) {
  .market-brand { gap: var(--space-2); font-size: var(--text-2xl); }
  .market-tagline { height: var(--size-4); padding: 0 var(--space-1); gap: 2px; font-size: calc(var(--text-xs) * .65); letter-spacing: 0; }
  .market-beta-tag { font-size: calc(var(--text-xs) * .65); }
}
@media (max-width: 390px) {
  .market-brand { gap: var(--space-1); font-size: var(--text-xl); }
  .market-tagline { font-size: calc(var(--text-xs) * .6); }
  .market-beta-tag { font-size: calc(var(--text-xs) * .6); }
}


.start-home__main { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); place-items: start center; padding: var(--space-5) var(--space-5) calc(var(--size-16) * 2 + var(--size-8)); }

.start-hero { position: relative; display: grid; width: 100%; min-width: 0; max-width: var(--feed-card-max-width); justify-items: start; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); box-shadow: var(--feed-card-shadow); text-align: left; transition: background var(--start-motion-normal) ease, border-color var(--start-motion-normal) ease, box-shadow var(--start-motion-normal) ease, padding var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1); }
.start-hero--toll-bench { padding-top: calc(var(--space-5) + var(--space-3)); }
.start-hero__chip { position: absolute; top: 0; left: var(--space-8); transform: translateY(-50%); display: inline-flex; align-items: center; min-height: calc(var(--size-6) + var(--space-1)); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--highlight-yellow); color: var(--accent-dark); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: 1; text-transform: uppercase; transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }
.start-hero__eyebrow { margin: 0 0 var(--space-4); color: var(--slate); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }

.start-hero__headline { display: grid; justify-items: start; gap: var(--space-2); margin: 0; font-family: var(--font-heading); font-weight: 800; letter-spacing: 0; line-height: 1; color: var(--text-primary); font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl)); transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }
.start-hero__line { display: block; max-width: 100%; }
.start-hero__headline .hl { margin: 0; padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--highlight-yellow); color: var(--color-black); line-height: 1.05; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-hero__headline .soft { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
.start-hero__sub { margin: var(--space-4) 0 0; font-family: var(--font-serif); font-size: var(--text-xl); font-style: normal; line-height: 1.4; color: var(--slate); font-weight: 400; transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }
/* /start wears the tollbench.com front door on every host (Steven
   2026-09-29): the question, the input right under it, and the sub line under
   the buttons. Type and spacing are the homepage hero's own
   (homepage-how.css .wants-hero), which /start does not load. The sub leaves
   with the rest of the entry chrome once the want is sent. */
.start-hero--toll-bench:not(.wants-hero) .start-hero__headline { gap: var(--space-1); line-height: 1.2; }
.start-hero--toll-bench:not(.wants-hero) .start-hero__entry { margin-top: var(--space-4); }
.start-hero--toll-bench:not(.wants-hero) .start-hero__actions { margin-top: var(--space-4); }
.start-hero--toll-bench:not(.wants-hero) .start-hero__form > .start-hero__sub { width: 100%; max-width: 46ch; margin: var(--space-3) auto 0; color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; text-align: center; }
.start-home--future .start-hero--toll-bench .start-hero__form > .start-hero__sub,
.start-hero--toll-bench .start-hero__entry--min .start-hero__form > .start-hero__sub,
.start-hero--toll-bench .start-hero__entry--docked .start-hero__form > .start-hero__sub { display: none; }
@media (max-width: 767px) {
  .start-hero--toll-bench:not(.wants-hero) .start-hero__headline { font-size: var(--text-3xl); }
}

.start-homepage-proof {
  width: 100%;
  max-width: var(--feed-card-max-width);
  min-width: 0;
  margin-top: var(--space-6);
}
.start-homepage-proof--recent {
  display: grid;
}
/* The recent-wants carousel stacks its slides in one grid cell (wants.css),
   so the card holds the tallest want's height instead of resizing, and the
   page below it, every four seconds. The display:none swap that sat here
   (2026-08-12) only worked because titles were cut to three lines. */
.start-homepage-proof--recent .target-anchor {
  cursor: pointer;
}
.start-homepage-proof--field {
  margin-top: var(--space-8);
}
.start-field-view {
  padding: 0;
  border-bottom: 0;
}
.start-home--future .start-homepage-proof {
  display: none;
}

.start-hero__entry { position: sticky; top: var(--space-2); z-index: calc(var(--z-topbar, 50) - 1); display: grid; width: 100%; justify-items: center; margin-top: var(--space-8); transition: transform var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1); }
.start-hero__entry::before { position: absolute; z-index: 0; inset: calc(var(--space-4) * -1) 0 auto; height: calc(var(--size-16) + var(--space-5)); content: ""; border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); box-shadow: var(--feed-card-shadow); opacity: 0; pointer-events: none; transform: translateY(34px) scale(.98); transition: height var(--start-motion-normal) cubic-bezier(.2, .8, .2, 1); }
.start-card__pills { position: absolute; z-index: 2; top: calc((var(--space-4) + var(--space-3) + var(--space-1) / 4) * -1); right: var(--space-4); left: var(--space-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); visibility: hidden; opacity: 0; pointer-events: none; filter: blur(12px); transform: translateY(var(--space-3)); }
.start-card__maker,
.start-card__type { display: inline-flex; min-height: calc(var(--size-6) + var(--space-1)); align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: 1; text-transform: uppercase; }
.start-card__maker { min-width: 0; padding-left: var(--space-1); border: 1px solid var(--border-strong); background: var(--surface-primary); color: var(--text-primary); }
.start-card__maker > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-card__ident { width: calc(var(--size-4) - var(--space-1) / 4); height: calc(var(--size-4) - var(--space-1) / 4); flex: 0 0 auto; border-radius: var(--radius-full); background: var(--accent-tertiary); }
.start-card__type { flex: 0 0 auto; background: var(--accent-primary); color: var(--color-black); }
.start-card__write-word { display: inline-block; clip-path: inset(0 100% 0 0); }
.start-hero__form { position: relative; z-index: 1; grid-area: 1 / 1; display: grid; width: 100%; justify-items: center; margin: 0; }
.start-hero__form label { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
.start-hero__form input,
.start-hero__form textarea { width: 100%; min-width: 0; min-height: var(--size-12); padding: 0 var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; box-shadow: var(--shadow-sm); transition: border-color var(--start-motion-normal) ease, background var(--start-motion-normal) ease, box-shadow var(--start-motion-normal) ease, font-size var(--start-motion-normal) ease, font-weight var(--start-motion-normal) ease; }
/* Auto-growing hero want field (Steven 2026-08-11): starts one line tall,
   JS grows it to scrollHeight on input. Vertical padding centres the first
   line so a one-line textarea reads identical to the old single-line input. */
.start-hero__form textarea { box-sizing: border-box; resize: none; overflow: hidden; line-height: var(--leading-normal); padding-top: var(--space-3); padding-bottom: var(--space-3); border-radius: var(--radius-2xl); display: block; }
/* Want character cap (2026-09-06): "N / 1,000" appears within 100 characters of
   maxlength and turns red at the cap (want-count.js). Hidden with the input once
   the odds card takes over. */
.start-hero__form .start-hero__count { width: 100%; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); text-align: right; }
.start-hero__form .start-hero__count--limit { color: var(--status-error); font-weight: var(--font-semibold); }
.start-home--future .start-hero__form .start-hero__count { display: none; }
.start-hero__form input:focus,
.start-hero__form textarea:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-drop); }
.start-card__want { display: none; min-width: 0; min-height: var(--size-12); justify-self: stretch; padding: var(--space-4) var(--space-6) 0; overflow-wrap: anywhere; color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; font-style: italic; letter-spacing: 0; line-height: var(--leading-normal, 1.5); text-align: left; white-space: normal; }
.start-card__want .hl { padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--highlight-yellow); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Target glyph before the want (Steven 2026-08-03): inline at text start,
   inherits the title color and 1em size; quotes are gone on /start renders. */
.start-card__want-icon,
.start-wantcard__quote-icon { margin-right: var(--space-2); vertical-align: -0.1em; color: inherit; }
.start-card__odds { position: absolute; z-index: 2; top: var(--start-odds-top, calc(var(--size-12) + var(--space-3))); right: var(--space-6); left: var(--space-6); display: grid; visibility: hidden; justify-items: start; margin: 0; opacity: 0; transform: translateY(var(--space-4)); }
.start-card__odds-title { justify-self: stretch; max-width: none; margin: var(--space-2) 0 var(--space-1); color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; letter-spacing: 0; line-height: var(--leading-snug); text-align: left; }
.start-card__wave { --odds-inset: 50%; display: block; width: min(100%, 620px); height: var(--size-6); margin-top: var(--space-3); overflow: visible; clip-path: inset(0 var(--odds-inset) 0); transition: clip-path 27ms linear; }
/* One continuous green dashed line across the full width, no dots and no gray projection half -- Steven 2026-07-31. */
.start-card__wave path { fill: none; stroke: var(--accent-primary); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .023 .014; vector-effect: non-scaling-stroke; animation: start-wave-travel 1800ms linear infinite; }
.start-card__odds-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); }
.start-card__odds-line { display: flex; flex: 1; min-width: 0; align-items: baseline; gap: var(--space-3); margin-top: 0; }
/* The label hugs the number (Steven 2026-09-29 round 2: "Probability of
   success" is BY the number). A long number ("less than 1 in a million")
   wraps, and a wrapped flex box never shrinks to its words, so the move box
   and label floated far right of "million". On the one card the row is laid
   out as text instead: the number runs inline and the move box over the
   label ride the end of its last line (or drop under it when that line is
   full). Outranks the flex row in components/probability-card.css by
   source order at equal weight. */
body .start-card__compact-face.probability-card .start-card__odds-line { display: block; }
body .start-card__compact-face.probability-card .start-card__odds-line > .start-card__odds-pill { display: inline; margin-right: var(--space-4); }
body .start-card__compact-face.probability-card .start-card__odds-line > .probability-card__context { display: inline-flex; max-width: 100%; vertical-align: bottom; }
/* The step-to-step move sits at the right end of the odds row, just
   inside the Minimize button. */
.start-card__odds-move { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.start-card__odds-move[hidden] { display: none; }
.start-card__odds-move-arrow { display: none; width: var(--size-4); height: var(--size-4); }
/* Steven 2026-09-17: the up box wears the BRAND green -- the same
   --accent-primary the Take action band (.ob-strip) and the card Approve
   button wear -- not the muted --status-success it shipped with. */
.start-card__odds-move--up { background: var(--accent-primary); color: var(--color-black); }
.start-card__odds-move--down { background: var(--status-error); color: var(--color-white); }
/* Steven 2026-09-17: the move is a box. Up = green box, black text; down =
   red box, white text; no move = black box, white text, no arrow. Still
   never disappears once a probability exists. */
.start-card__odds-move--flat { background: var(--color-black); color: var(--color-white); }
/* Item 2 rule 3: visible unit word beside the move number. */
.start-card__odds-move-unit { font-size: var(--text-xs); font-weight: 600; }
/* THE MOVE CARRIES ITS DATE (Steven 2026-10-14: "Up 1.0 since Oct 12, use
   the same arrow"): the arrow first, as on the deck card, then the move
   and its unit, and "since Oct 12" a size down on the pill's second line;
   never on a flat move. Twin: static/cards/card.css .tb-card__move. */
.start-card__odds-move { flex-direction: column; align-items: flex-start; gap: 0; }
.start-card__odds-movenum { display: inline-flex; align-items: center; gap: var(--space-1); }
.start-card__odds-move-arrow { order: -1; }
.start-card__odds-move-since { font-size: var(--text-xs); font-weight: 600; line-height: var(--leading-snug); }
.start-card__odds-move-since[hidden] { display: none; }
/* THE BUDGET UNDER THE NUMBER (Steven 2026-10-14): the number and the
   chosen cost stacked (the card layout's .start-card__odds-numcol), one
   quiet line. Twin: card.css .tb-card__numcol / .tb-card__budget. */
.start-card__odds-numcol { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); vertical-align: bottom; min-width: 0; }
body .start-card__compact-face.probability-card .start-card__odds-line > .start-card__odds-numcol { margin-right: var(--space-4); }
.start-card__odds-budget { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-snug); white-space: nowrap; }
.start-card__odds-budget[hidden] { display: none; }
.start-card__odds-move--up .start-card__odds-move-arrow--up,
.start-card__odds-move--down .start-card__odds-move-arrow--down { display: inline-flex; }
.start-card__odds-pill { display: inline-flex; align-items: baseline; padding: var(--space-1) var(--space-4); border-radius: var(--radius-lg); background: var(--accent-primary); color: var(--color-black); font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.start-card__quest-bar { display: none; overflow: hidden; justify-self: stretch; height: var(--space-2); margin-top: var(--space-4); border-radius: var(--radius-full); background: var(--surface-tertiary); }
.start-card__quest-bar-fill { display: block; width: 7%; height: 100%; border-radius: var(--radius-full); background: var(--accent-primary); transform-origin: left center; }
.start-home--odds-complete .start-card__quest-bar,
.start-home--odds-complete .start-card__wave { display: none; }
.start-card__trajectory { display: none; width: 100%; margin-top: var(--space-4); }
.start-home--odds-complete .start-card__trajectory:not([hidden]) { display: block; }
.start-card__trajectory-svg { display: block; width: 100%; height: auto; overflow: visible; }
.start-card__trajectory-grid line { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.start-card__trajectory-line { fill: none; stroke: var(--accent-primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* The climb to the target, drawn apart from the projection so the projection
   can stay flat. Light gray and DOTTED — round caps plus a near-zero dash
   (0.001 12) is what makes dots instead of dashes; the two properties only
   work together. */
.start-card__trajectory-target-path { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.001 12; vector-effect: non-scaling-stroke; }
.start-card__trajectory-dot { fill: var(--accent-primary); stroke: var(--surface-primary); stroke-width: 4; vector-effect: non-scaling-stroke; cursor: help; }
/* The current probability is the anchor of the chart: biggest dot, widest
   collar so it separates from the green line running into it. */
.start-card__trajectory-dot--current { stroke-width: 5; }
/* Projections stay legible but recessive — a thin hollow ring, never heavier
   than the taken steps. */
.start-card__trajectory-dot:focus { outline: none; stroke: var(--text-primary); }
/* WORDS ON THE DOTS (Steven 2026-10-14): each dot a button, its hit area
   larger than the dot, the tapped dot grown, its words in one quiet line
   over the chart's foot (taps go through them to the dots). Twin:
   card.css .tb-chart__pt / .tb-card__dotnote. */
.start-card__trajectory { position: relative; }
.start-card__trajectory-dot { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform var(--duration-fast) var(--ease-default); }
.start-card__trajectory-dot.is-on { transform: scale(1.4); }
.start-card__trajectory-hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
.start-card__dotnote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: left;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}
.start-card__dotnote[hidden] { display: none; }
.start-card__dotnote strong { color: var(--text-primary); }
.start-card__dotwords { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .start-card__trajectory-dot { transition: none; }
}
.start-card__trajectory-step-label { fill: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-base); text-anchor: middle; }
.start-card__trajectory-step-label--complete { fill: var(--text-primary); font-weight: var(--font-bold); }
.start-card__trajectory-value { fill: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-bold); text-anchor: middle; }
.start-card__trajectory-value--current { text-anchor: start; }
.start-card__trajectory-goal { fill: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-bold); text-anchor: end; }
.start-card__trajectory-target { fill: var(--text-muted); font-size: var(--text-xl); text-anchor: middle; dominant-baseline: central; }
.start-card__trajectory-scale-label { fill: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.start-card__trajectory-scale-line { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.start-card__trajectory-scale-arrow { fill: var(--text-muted); stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.start-card__inline-cta { margin-top: var(--space-3); }
.start-card__inline-cta[hidden] { display: none; }

/* ── The one card (Steven 2026-09-29, protocol/start-one-card-2026-09-29.md) ──
   Cost (Free / Tip / Budgeted, words only), Refine context, the primary
   toggle and Post ride the odds card itself. The card runs docked + expanded
   once the number lands, so all of this sits in the page flow inside the
   compact face. Inputs live outside the want <form> on purpose: the
   future-state "hide every form input" rule never reaches them. */
.start-card__post { display: grid; justify-self: stretch; width: 100%; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); text-align: left; }
.start-card__post[hidden] { display: none; }
.start-card__cost { display: grid; gap: var(--space-2); }
.start-card__cost-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.start-card__cost-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.start-card__cost-btn { min-width: 0; min-height: var(--size-12); padding: 0 var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-bold); cursor: pointer; transition: border-color var(--start-motion-normal) ease, background var(--start-motion-normal) ease; }
.start-card__cost-btn:hover,
.start-card__cost-btn:focus-visible { border-color: var(--accent-tertiary); }
.start-card__cost-btn.is-selected { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--color-black); }
.start-card__amount { display: grid; gap: var(--space-1); }
.start-card__amount[hidden] { display: none; }
.start-card__amount-label { color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }
.start-card__amount input,
.start-card__refine-input { box-sizing: border-box; width: 100%; min-height: var(--size-10); padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-base); }
.start-card__amount input:focus,
.start-card__refine-input:focus { border-color: var(--accent-tertiary); }
.start-card__post-error { margin: 0; color: var(--status-error); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-card__post-error[hidden] { display: none; }
/* Round 2 (Steven 2026-09-29): the difficulty chip left the top pill row and
   sits just left of "Refine context" on one row. start_home.html's
   syncRefineRow hides the row only when both are hidden. */
.start-card__refine-row { display: flex; flex-wrap: wrap; justify-self: start; align-items: center; gap: var(--space-3); }
.start-card__refine-row[hidden] { display: none; }
/* The difficulty chip is SOLID wherever the pill macro draws it (Steven
   2026-09-29: "it's see-through, which is super annoying"): full-strength
   colors, the text as the move box reads it (green box, black text; blue and
   red boxes, white text). As tall as the pills beside it, its word centered
   in it. Easy wears the BRAND green, --accent-primary, the same green as the
   odds pill and the up move box on this card (Steven 2026-09-29: "easy is
   the wrong color"; it shipped in the muted --status-success, the exact
   green Steven already moved the move box off on 2026-09-17). */
.probability-card__band.target-chart__band { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--size-6); line-height: 1; font-weight: var(--font-bold); }
.probability-card__band.target-chart__band[hidden] { display: none; }
/* The brand's colours, the same tokens as the one card (static/cards/
   card.css .tb-card__band) and the interior card (wants.css
   .target-chart__band) (Steven 2026-10-13: "the pill is the wrong green!
   And Moonshot should be the neon blue from the brand"; that evening: "the
   colour of Hard should be our brand yellow, not that odd blue", the
   header's and the certification badge's --color-yellow-400). */
.probability-card__band.target-chart__band--easy { background: var(--accent-neon); color: var(--color-black); }
.probability-card__band.target-chart__band--hard { background: var(--color-yellow-400); color: var(--color-black); }
.probability-card__band.target-chart__band--moonshot { background: var(--cyan); color: var(--color-black); }
/* In a top pill row (the recent-wants cards) the chip sits dead center
   between the two end pills, whatever their widths; space-between only
   centered it when both ends happened to match. */
:is(.target-anchor, .target-trajectory, .start-card__compact-face).probability-card .probability-card__pills > .probability-card__band { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.start-card__refine-toggle { display: inline-flex; justify-self: start; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; color: var(--accent-tertiary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.start-card__refine-toggle[hidden] { display: none; }
.start-card__refine-toggle iconify-icon { width: var(--size-4); height: var(--size-4); transition: transform var(--start-motion-normal) ease; }
.start-card__refine-toggle.is-open iconify-icon { transform: rotate(180deg); }
.start-card__refine { display: grid; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-secondary); }
.start-card__refine[hidden] { display: none; }
.start-card__refine-q { display: grid; gap: var(--space-2); }
.start-card__refine-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }
.start-card__refine-saved { display: none; width: var(--size-4); height: var(--size-4); color: var(--accent-tertiary); }
.start-card__refine-q.is-answered .start-card__refine-saved { display: inline-flex; }
.start-card__refine-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.start-card__refine-chip { min-height: var(--size-10); padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }
.start-card__refine-chip:hover,
.start-card__refine-chip:focus-visible { border-color: var(--accent-tertiary); }
.start-card__refine-chip.is-selected { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--color-black); }
.start-card__post .start-wantcard__primary { margin-top: 0; }
.start-card__post .start-point__cta { margin-top: 0; }
.start-card__post .start-point__cta:disabled,
.start-card__post .start-point__cta:disabled:hover { border-color: var(--btn-primary-border); background: var(--accent-primary); color: var(--color-black); opacity: var(--btn-disabled-opacity); cursor: default; box-shadow: none; }
.start-card__compact-next { display: none; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--text-sm); }
.start-card__compact-next strong { color: var(--accent-tertiary); }
/* The next step reads under the chart in the expanded state too, the way the
   logged-in primary-want card always shows what is coming next. */
.start-home--odds-complete .start-card__compact-next { display: flex; flex-wrap: wrap; }

/* --------------------------------------------------------
   Start-card fold (Steven 2026-07-31)
   .start-hero__entry--min is the class on the CLONE that
   the fold script builds and pins to <body> as
   position:fixed.  The real .start-hero__entry never moves.
   Mirroring the /feed primary-want-card fold pattern exactly.
   -------------------------------------------------------- */
.start-hero__entry--min {
  position: fixed;
  top: 0;
  z-index: calc(var(--z-topbar, 50) - 1);
  overflow: hidden;
  padding: var(--space-3) var(--space-6) var(--space-3);
  background: var(--feed-card-bg);
  border-bottom: var(--feed-card-border);
  box-shadow: var(--feed-card-shadow);
  animation: start-card-fold-drop 240ms ease;
  /* Reset any transforms from .start-home--future that survive on the clone.
     !important is required: .start-home--future .start-hero__entry has specificity
     (0,2,0) which outranks (0,1,0) here without it -- the folded bar renders
     ~297px above the viewport. Consistent with other !important overrides on
     .start-hero__entry--min children in this file. */
  transform: none !important;
  transition: none;
  margin: 0;
}
.start-hero__entry--min::before { display: none; }
@keyframes start-card-fold-drop {
  from { transform: translateY(calc(-100% - var(--space-4))); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
/* In the folded bar / docked card: show want text, probability pill, compact-next.
   Hide everything else that makes the card tall.
   --min  = the body-hung fixed clone (scroll mechanic, pre-budget-click)
   --docked = the real sticky card after visitor clicks "Choose your budget" */
.start-hero__entry--min .start-card__pills,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__pills { display: none; }
.start-hero__entry--min .start-hero__form label,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-hero__form label { display: none; }
.start-hero__entry--min input[data-start-want],
.start-hero__entry--docked:not(.start-hero__entry--expanded) input[data-start-want] { display: none; }
.start-hero__entry--min .start-hero__actions,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-hero__actions { display: none; }
.start-hero__entry--min .start-card__trajectory,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__trajectory { display: none !important; }
.start-hero__entry--min .start-card__wave,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__wave { display: none; }
.start-hero__entry--min .start-card__quest-bar,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__quest-bar { display: none; }
.start-hero__entry--min .start-card__odds-label,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__odds-label { display: none !important; }
.start-hero__entry--min .start-card__odds-note,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__odds-note { display: none !important; }
.start-hero__entry--min .start-card__odds-mission,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__odds-mission { display: none !important; }
.start-hero__entry--min .start-card__inline-cta,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__inline-cta { display: none; }
.start-hero__entry--min .start-card__odds-result,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__odds-result { display: none; }
.start-hero__entry--min .start-card__crisis,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__crisis { display: none; }
.start-hero__entry--min .start-card__retry,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__retry { display: none; }
.start-hero__entry--min .start-why,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-why { display: none; }
/* Keep the odds head (pill + probability of success label) visible. */
.start-hero__entry--min .start-card__odds,
.start-hero__entry--docked .start-card__odds {
  position: static;
  /* The form is justify-items:center; a static shrink-wrapped grid item gets
     centered, pushing the odds/next-step rows off the card's left line
     (Steven 2026-08-03). Stretch so rows share the face content edge. */
  justify-self: stretch;
  visibility: visible;
  opacity: 1;
  transform: none;
  margin-top: var(--space-2);
}
/* The compact-next (next step) row stays visible; caret floats right. */
.start-hero__entry--min .start-card__compact-next,
.start-hero__entry--docked .start-card__compact-next {
  display: flex;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}
/* One shared left line (Steven 2026-08-03). In docked/min mode the face (or
   --min bar) already pads --space-6, so the quote's own --space-6 padding --
   which exists to line up with the input's rounded-pill inset pre-dock --
   doubles the indent. And the absolute pills row kept its pre-dock --space-4
   inset, landing 8px left of the content edge. */
.start-hero__entry--min .start-card__want,
.start-hero__entry--docked .start-card__want {
  padding-right: 0;
  padding-left: 0;
}
.start-hero__entry--docked .start-card__pills {
  right: var(--space-6);
  left: var(--space-6);
}
/* Chevron button: hidden until docked, shown inside the docked card.
   Floats below the compact-next row. The --expanded modifier flips the icon. */
.start-card__dock-toggle { display: none; }
.start-hero__entry--docked .start-card__dock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-8);
  height: var(--size-8);
  margin-top: var(--space-2);
  justify-self: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--start-motion-normal) ease, color var(--start-motion-normal) ease;
}
.start-hero__entry--docked .start-card__dock-toggle:hover {
  background: var(--surface-tertiary);
  color: var(--text-primary);
}
.start-hero__entry--docked .start-card__dock-toggle iconify-icon {
  width: var(--size-4);
  height: var(--size-4);
  transition: transform var(--start-motion-normal) ease;
}
.start-hero__entry--docked.start-hero__entry--expanded .start-card__dock-toggle iconify-icon {
  transform: rotate(180deg);
}
/* Docked state: the stats panel also hides in compact mode */
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__stats { display: none; }
/* ── Docked: expansion pushes content below the card down in normal flow.
   (Steven ruling 2026-07-31)

   ROOT CAUSE: .start-point (the baseline intake) is position:absolute relative
   to .start-hero__entry. When the chevron expands the card, the odds block
   (now position:static) makes the entry taller in flow — but .start-point stays
   at its absolute top:--start-card-height coordinate and does not move.
   The trajectory chart was occupying that space, so the two overlapped.

   FIX: In docked state, switch .start-point and .start-story to position:relative
   so they live in normal document flow after the card content. The sticky entry
   expands its in-flow height when expanded (trajectory + notes visible), and
   .start-point flows naturally below the full card height.

   The ::before card chrome (position:absolute, height:--start-card-height) would
   overlap .start-point once it is in flow, so in docked mode we suppress ::before
   and give the entry its own surface styling directly — matching the visual style
   of .start-hero__entry--min (the pre-docked scroll clone).

   SCOPE: every selector is prefixed with --docked. No pre-docked state is touched. */

/* Card surface: own background replaces the ::before chrome in docked mode.
   The compact-face wrapper covers only the want/odds content, not the baseline
   question card (.start-point) that follows it — so only the face has borders.
   display:contents in the base rule makes the face transparent to layout in
   non-docked mode; it becomes display:block here to form the visible card. */
.start-card__compact-face { display: contents; }
.start-hero__entry--docked .start-card__compact-face {
  display: block;
  /* The entry grid is justify-items:center, so this block face (width:auto)
     shrink-wraps to fit-content -- a SHORT want quote rendered the docked card
     visibly narrower than the stack. The docked card must match the stack
     card width (Steven 2026-08-03). */
  width: 100%;
  padding: var(--space-3) var(--space-6) var(--space-4);
  background: var(--feed-card-bg);
  border: var(--feed-card-border);
  border-radius: var(--feed-card-radius);
  box-shadow: var(--feed-card-shadow);
}
/* In docked mode the face owns the card chrome; entry needs no surface of its own. */
.start-hero__entry--docked {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Suppress the ::before card chrome — the compact-face owns its surface now. */
.start-hero__entry--docked::before { display: none; }

/* Docked: the compact-face owns the card surface at the entry's own top edge
   (the ::before chrome that sat 16px proud is suppressed), which left the pill
   row floating fully above the card with a gap. Re-anchor it so the pills
   straddle the card's top edge -- half above, half on the paper -- matching
   the feed-card pill straddle. Offset = half the pill min-height. */
.start-hero__entry--docked .start-card__pills { top: calc((var(--size-6) + var(--space-1)) / -2); }

/* Bring the baseline intake (.start-point) into normal document flow.
   In compact docked mode: intake appears directly below the compact card.
   In expanded docked mode: intake appears below the full expanded card.
   position:absolute is removed; margin-top provides the gap. */
.start-hero__entry--docked .start-point,
.start-hero__entry--docked .start-story {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  margin-top: var(--space-6);
  /* Visibility is controlled by .start-home--point / --story state classes
     on the root, which this does not override. */
}
/* The top:auto above loses to two later flow rules that print a top offset
   with higher or equal specificity:
   .start-home--future.start-home--point .start-point (0,3,0) and
   .start-home--retry-allowed .start-point (0,2,0, later in file).
   On this now position:relative box, that top offset shifts the baseline card
   DOWN visually without affecting layout, leaving ~250px of dead background
   between the docked card and the baseline card. Outrank both so the card
   lands directly below the docked card at margin-top spacing. */
.start-home--future.start-home--point .start-hero__entry--docked .start-point,
.start-home--retry-allowed .start-hero__entry--docked .start-point,
.start-home--future.start-home--point .start-hero__entry--docked .start-story,
.start-home--retry-allowed .start-hero__entry--docked .start-story {
  top: auto;
}

/* In expanded docked: .start-why is hidden in compact (display:none above);
   if it is re-shown it must also flow in document order, not overlap. */
.start-hero__entry--docked.start-hero__entry--expanded .start-why {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  margin-top: var(--space-4);
  /* animation from .start-home--future still fires; leave visibility/opacity
     to that rule so the reveal transition is unchanged. */
}




/* ── The Toll Bench bar paints OVER the card; Minimize pins the card UNDER it.
   (Steven 2026-07-30) Two separate faults were in play.
   (1) .start-home__topbar was position:static, and a z-index on a static box
   does nothing at all, so the bar could never outrank anything. Meanwhile
   .start-hero__entry is positioned WITH a z-index, so it opens its own stacking
   context that beat the bar every time -- and --future pushed it to 401, above
   even the .start-prompts modal. The bar now sticks at --z-topbar and the card
   sits exactly one below it, which is the same contract .feed-primary-want--min
   already uses on /feed.
   (2) Minimize only collapsed the card in place: measured on staging, at
   scrollTop 600 the card's top was -229, i.e. it scrolled clean off. It now
   pins under the bar the way the feed card does.
   SCOPE / the /wants overlay: every rule below is keyed on body.start-home.
   The "Post a want" overlay injects this same markup as a partial -- it renders
   no topbar, puts the start-home--* state classes on a <div class="start-home">,
   and its <body> is "wants-page-body drawer-layout". So none of these can match
   there, and nothing can escape the overlay to pin itself over /wants.
   The bar rule now ALSO covers .toll-bench and .for-agents (fix #2,
   2026-08-07 mobile pass): those pages had no sticky rule and the topbar
   scrolled away on phones. Extended to all body.start-home public pages. */
body.start-home .start-home__topbar { position: sticky; top: 0; z-index: var(--z-topbar, 50); background: var(--color-dark-900); }  /* Steven 2026-08-10: the Toll Bench top bar is always black. */
/* Park the docked card clear of the sticky topbar: bar height (--size-16 = 64px)
   + pill overhang (--space-4 + --space-3 + --space-1/4 ≈ 29px) + breathing room (--space-2).
   Only /start carries .start-hero__entry, so this stays scoped away from toll-bench/for-agents. */
body.start-home:not(.toll-bench):not(.for-agents) .start-hero__entry { top: calc(var(--size-16) + var(--space-4) + var(--space-3) + var(--space-2)); }
.start-card__stats { display: none; }
.start-home--odds-complete .start-card__stats { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); justify-self: stretch; margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-secondary); animation: start-result-slide-in var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1) both; }
.start-card__stat { display: grid; gap: var(--space-1); }
.start-card__stat-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.start-card__stat-value { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--text-primary); }
.start-card__stat--goal { text-align: right; }
.start-card__stat--goal .start-card__stat-label,
.start-card__stat--goal .start-card__stat-value { color: var(--accent-dark, var(--accent-primary)); }
.start-card__stats-bar { grid-column: 1 / -1; position: relative; height: var(--space-1); margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--border-default); }
.start-card__stats-dot { position: absolute; top: 50%; left: 1%; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); background: var(--accent-primary); transform: translate(-50%, -50%); transition: left var(--start-motion-normal) ease; }
.start-card__stats-cap { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.start-card__stats-cap--right { text-align: right; }
.start-card__odds-label { display: none; justify-self: stretch; margin: var(--space-4) 0 var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.start-home--odds-complete .start-card__odds-label:not([hidden]) { display: block; }
.start-home--future .start-card__odds-label:not([hidden]) { display: block; }
.start-home--odds-complete .start-card__quest-bar-fill { animation: start-quest-bar-begin 900ms cubic-bezier(.2, .8, .2, 1) 350ms both; }
.start-card__odds-note { display: none; justify-self: stretch; max-width: none; margin: var(--space-4) 0 0; color: var(--slate); font-family: var(--font-serif); font-size: var(--text-base); font-style: italic; line-height: var(--leading-relaxed); text-align: left; }
.start-card__odds-note[hidden] { display: none !important; }
.start-home--odds-complete .start-card__odds-label:not([hidden]) + .start-card__odds-note { margin-top: 0; }
.start-home--future .start-card__odds-label:not([hidden]) + .start-card__odds-note { margin-top: 0; }
.start-home--future .start-card__odds-note { display: block; }
.start-home--odds-complete .start-card__odds-note { display: block; animation: start-result-slide-in var(--start-motion-normal) ease 120ms both; }
.start-home--odds-complete .start-card__odds-note--wait { display: none; }
/* Reserve space for the reason paragraph so the layout does not jump when
   partial streaming delivers the number before the reason arrives.
   The typical reason is 2-4 lines at --text-base with --leading-relaxed. */
.start-home--odds-complete .start-card__odds-note { min-height: calc(var(--text-base) * var(--leading-relaxed, 1.625) * 3); }
/* The mission line as its own section. /start no longer draws it (Steven
   2026-09-29 round 2: its sentence ends the reason paragraph, written by
   setStartOddsNote); /jeff2 still links these rules for its own card. */
.start-card__odds-mission { display: none; justify-self: stretch; max-width: none; gap: var(--space-2); margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); color: var(--text-primary); font-size: var(--text-sm); line-height: var(--leading-relaxed); text-align: left; }
.start-card__odds-mission iconify-icon { flex: none; width: var(--size-4); height: var(--size-4); color: var(--accent-tertiary); }
.start-home--odds-complete .start-card__odds-mission { display: flex; animation: start-result-slide-in var(--start-motion-normal) ease 240ms both; }
.start-card__odds-mission .hl,
.start-card__odds-note .hl { padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-card__odds-result { justify-self: stretch; max-width: none; margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); text-align: left; animation: start-result-slide-in var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1) both; }
.start-card__odds-result strong { color: var(--text-primary); font-weight: var(--font-bold); }
.start-card__crisis { display: grid; justify-self: stretch; max-width: var(--auth-card-max-width); justify-items: start; gap: var(--space-3); margin: var(--space-4) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); text-align: left; }
.start-card__crisis[hidden] { display: none; }
.start-card__crisis p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-card__crisis p strong { color: var(--text-primary); }
.start-card__crisis-call { background: var(--color-black); color: var(--text-inverse); }
.start-card__crisis-call iconify-icon { width: var(--size-5); height: var(--size-5); }
.start-home .instructional-card__cta { transition: background-color var(--start-motion-normal) ease, border-color var(--start-motion-normal) ease, color var(--start-motion-normal) ease; }
.start-home .instructional-card__cta:hover,
.start-home .instructional-card__cta:focus-visible,
.start-home .instructional-card__cta:active { border-color: var(--color-black); background: var(--color-black); color: var(--text-inverse); transform: none; }
.start-why { position: absolute; z-index: 1; top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-6)); right: 0; left: 0; visibility: hidden; width: 100%; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); color: var(--text-primary); box-shadow: var(--feed-card-shadow); opacity: 0; text-align: left; transition: top var(--start-motion-normal) ease; }
.start-home--future .start-why { visibility: visible; animation: start-result-slide-in var(--start-motion-normal) ease 240ms both; }
.start-why--dismissed,
.start-why--step-hidden { display: none; }
.start-why__pills { position: absolute; top: calc((var(--space-3) + var(--space-1) / 4) * -1); left: var(--space-4); display: flex; }
.start-why__title { margin: var(--space-2) 0 0; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-tight); }
.start-why__title .hl { padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); }
.start-why__title em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.start-why__body { overflow: hidden; position: relative; max-height: calc(var(--size-32) * 2); margin-top: var(--space-3); }
.start-why__body::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: var(--size-16); background: linear-gradient(180deg, transparent, var(--feed-card-bg)); }
.start-why--expanded .start-why__body { max-height: none; }
.start-why--expanded .start-why__body::after { content: none; }
.start-why--expanded .start-why__more { display: none; }
.start-why__body p { margin: 0 0 var(--space-3); color: var(--slate); font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-why__tools { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.start-why__tools li { color: var(--slate); font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-why__more { margin-top: var(--space-1); padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: underline; cursor: pointer; }
.start-why__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.start-why__got-it { min-height: var(--size-10); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-full); background: var(--accent-tertiary); color: var(--color-white); font: inherit; font-weight: var(--font-bold); cursor: pointer; }
.start-why__skip { padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: underline; }

.start-point { position: absolute; z-index: 1; top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-6)); right: 0; left: 0; visibility: hidden; width: 100%; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); color: var(--text-primary); box-shadow: var(--feed-card-shadow); opacity: 0; text-align: left; transition: top var(--start-motion-normal) ease; }
.start-home--point .start-point { visibility: visible; animation: start-result-slide-in var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1) 120ms both; }
.start-home--future.start-home--point .start-point { top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-6) + var(--start-why-offset, 0px)); }
.start-point__eyebrow { display: inline-flex; align-items: center; margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--highlight-yellow); color: var(--color-black); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .14em; text-transform: uppercase; }
.start-point__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.start-point__count { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.start-point__title .hl-underline { text-decoration: underline; text-decoration-color: var(--highlight-yellow); text-decoration-thickness: var(--space-2); text-underline-offset: calc(-1 * var(--space-1)); text-decoration-skip-ink: none; }
.start-point__sub { margin: var(--space-2) 0 0; color: var(--text-secondary); font-family: var(--font-serif); font-style: italic; font-size: var(--text-base); }
.start-point__steps { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.start-point__step { position: relative; display: flex; gap: var(--space-3); }
.start-point__step:not(:last-child)::before { content: ""; position: absolute; top: var(--size-8); left: calc(var(--size-8) / 2); height: calc(100% - var(--size-8) + var(--space-4)); border-left: 1px solid var(--border-default); }
.start-point__step-num { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-8); height: var(--size-8); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-bold); }
.start-point__step--done .start-point__step-num { border-color: transparent; background: var(--accent-primary); color: var(--color-black); }
.start-point__step--next .start-point__step-num { border-color: transparent; background: var(--slate); color: var(--color-white); }
.start-point__step-body { min-width: 0; flex: 1; }
.start-point__step-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-primary); font-size: var(--text-base); font-weight: var(--font-bold); }
.start-point__step-chip { margin-left: auto; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--accent-tertiary-subtle); color: var(--accent-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
/* .start-point__step-optional retired 2026-07-26: "Build your baseline" now holds
   the pledge and the card read-back, so the step is not skippable and nothing on
   the page carries an Optional chip any more. */
.start-point__step-desc { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-point__cta--go { border-radius: var(--radius-full); background: var(--accent-primary); color: var(--color-black); }
.start-point__title { margin: var(--space-2) 0 0; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-snug); }
.start-point__title .hl { padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-point__intro { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.start-point__list { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.start-point__list li { color: var(--text-primary); font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-relaxed); }
.start-point__list li::marker { color: var(--accent-tertiary); }
.start-point__note { margin: var(--space-4) 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
/* Flow buttons wear the design-system button tokens (ds-btn--primary / ds-btn--secondary). */
.start-point__cta { display: block; width: 100%; min-height: var(--size-12); margin-top: var(--space-3); padding: var(--btn-padding); border: 1px solid var(--btn-primary-border); border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: var(--btn-primary-color); font-family: var(--btn-font); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); cursor: pointer; transition: var(--btn-transition); }
.start-point__cta:hover { border-color: var(--btn-primary-bg-hover); background: var(--btn-primary-bg-hover); color: var(--btn-primary-color-hover); box-shadow: var(--btn-primary-glow); }
.start-point__nav { display: flex; gap: var(--space-3); align-items: stretch; margin-top: var(--space-3); }
.start-point__nav .start-point__cta { flex: 1 1 auto; width: auto; margin-top: 0; }
.start-point__back { flex: 0 0 auto; min-height: var(--size-12); padding: var(--btn-padding); border: 1px solid var(--btn-secondary-border); border-radius: var(--btn-radius); background: var(--btn-secondary-bg); color: var(--btn-secondary-color); font-family: var(--btn-font); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); cursor: pointer; transition: var(--btn-transition); }
.start-point__back:hover { border-color: var(--btn-secondary-border-hover); background: var(--btn-secondary-bg-hover); }

.start-point__em { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.start-baseline__loading { margin: var(--space-4) 0 0; color: var(--text-secondary); font-size: var(--text-base); animation: start-solution-pulse 1200ms ease-in-out infinite alternate; }
.start-baseline__options { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.start-baseline__option { display: grid; gap: var(--space-1); justify-items: start; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--start-motion-normal) ease, box-shadow var(--start-motion-normal) ease; }
.start-baseline__option:hover, .start-baseline__option:focus-visible { border-color: var(--accent-tertiary); box-shadow: var(--shadow-xs); }
.start-baseline__option strong { font-size: var(--text-base); font-weight: var(--font-bold); }
.start-baseline__option span { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-baseline__chip { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--accent-tertiary); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.start-baseline__option.is-selected, .start-baseline__fill.is-selected { border-color: var(--accent-primary); box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent-primary)); }
.start-cardback { display: grid; gap: var(--space-3); margin-top: var(--space-4); text-align: left; }
.start-cardback__row { display: grid; gap: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-cardback__key { color: var(--text-primary); font-weight: 800; }
.start-cardback__val { color: var(--text-secondary); }
.start-baseline__skip { margin-top: var(--space-2); border: 0; background: none; color: var(--text-secondary); font-size: var(--text-sm); text-decoration: underline; cursor: pointer; }
.start-baseline__terms { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-xs); font-style: italic; }
/* Channel pill on a speed option (Steven 2026-08-14): message balance /
   register-email, same face as the target-path "agent working" chip
   (.tp-chip.is--agent). The --action variant is tappable and wears the
   waiting-chip colors so it reads as a door, not a fact. */
.start-baseline__opt-pillrow { display: flex; justify-content: flex-start; margin-top: var(--space-2); }
.start-baseline__opt-pill { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-secondary); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.start-baseline__opt-pill--action { background: var(--accent-tertiary-subtle); color: var(--accent-tertiary); cursor: pointer; }
.start-baseline__opt-pill--action:hover { text-decoration: underline; }
.start-baseline__agree { margin-top: var(--space-4); }
.start-baseline__agree:disabled { opacity: .4; cursor: default; }
.start-baseline__fill { display: grid; gap: var(--space-2); }
.start-baseline__fill input { min-height: var(--size-10); padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); }
.start-baseline__fill input:focus { border-color: var(--accent-tertiary); }
.start-baseline__fill .start-point__cta { margin-top: 0; }
/* Steven 2026-07-30: the budget blank lives inside the BUDGETED tile. The tile
   turns into a plain box when it opens, so it stops being a hoverable choice
   and stretches its children instead of hugging them left. */
.start-baseline__option--open { cursor: default; justify-items: stretch; }
.start-baseline__option--open:hover { box-shadow: none; }
.start-baseline__nested { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.start-baseline__nested-label { color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }
.start-baseline__nested input { min-height: var(--size-10); padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); }
.start-baseline__nested input:focus { border-color: var(--accent-tertiary); }
.start-wantcard__primary { display: flex; gap: var(--space-3); align-items: center; width: 100%; margin-top: var(--space-4); padding: var(--space-4); border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--color-green-50); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background var(--transition-fast), border-color var(--transition-fast); }
.start-wantcard__primary:not(.is-on) { background: var(--surface-primary); border-color: var(--border-default); }
.start-wantcard__primary-check { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--size-6); height: var(--size-6); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); font-size: var(--text-base); transition: background var(--transition-fast); }
.start-wantcard__primary:not(.is-on) .start-wantcard__primary-check { background: var(--color-gray-200); }
.start-wantcard__primary-body strong { display: block; font-size: var(--text-base); font-weight: var(--font-bold); }
.start-wantcard__primary-body p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-baseline__quote { margin: var(--space-4) 0 0; color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; line-height: var(--leading-relaxed); }
.start-baseline__copy { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-baseline__steps { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.start-baseline__steps li::marker { color: var(--accent-tertiary); font-weight: var(--font-bold); }
.start-baseline__step-head { display: flex; align-items: center; gap: var(--space-2); }
.start-baseline__step-head strong { font-size: var(--text-base); }
.start-baseline__steps p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.start-point--dismissed { display: none; }

.start-home__footer { display: flex; justify-content: center; padding: var(--space-6) var(--space-5) var(--space-8); }
.start-home__prompts-btn { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.start-prompts { position: fixed; z-index: var(--z-modal); inset: 0; display: grid; place-items: center; padding: var(--space-4); background: var(--zine-modal-backdrop); }
.start-prompts[hidden] { display: none; }
.start-prompts__panel { overflow: auto; width: min(680px, 100%); max-height: 86dvh; padding: var(--space-5); border-radius: var(--feed-card-radius); background: var(--surface-primary); box-shadow: var(--shadow-drop); }
.start-prompts__head { display: flex; align-items: center; justify-content: space-between; }
.start-prompts__head strong { font-family: var(--font-heading); font-size: var(--text-base); }
.start-prompts__close { padding: 0 var(--space-2); border: 0; background: none; color: var(--text-secondary); font-size: var(--text-2xl); line-height: 1; cursor: pointer; }
.start-prompts__map { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-secondary); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-relaxed); list-style: none; }
.start-prompts__map b { color: var(--text-primary); font-weight: var(--font-bold); }
.start-prompts__map span { color: var(--accent-tertiary); }
.start-prompts__stage { margin: var(--space-1) 0 0; color: var(--accent-tertiary); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.start-prompts__item { margin-top: var(--space-5); }
.start-prompts__item h3 { margin: 0; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--font-bold); }
.start-prompts__item p { margin: var(--space-1) 0 var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.start-prompts__item textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-relaxed); resize: vertical; }
.start-prompts__item textarea:focus { border-color: var(--accent-tertiary); outline: 0; }
.start-prompts__row { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }
.start-prompts__row span { margin-right: auto; color: var(--text-secondary); font-size: var(--text-xs); }
.start-prompts__row button { padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-full); background: var(--color-black); color: var(--color-white); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }
.start-prompts__row .start-prompts__reset { border: 1px solid var(--border-default); background: none; color: var(--text-secondary); }

.start-card__retry { position: absolute; z-index: 3; top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-2)); right: 0; left: 0; display: flex; visibility: hidden; align-items: center; gap: var(--space-2); opacity: 0; transform: translateY(var(--space-2)); transition: opacity var(--start-motion-normal) ease, transform var(--start-motion-normal) ease; }
.start-card__retry label { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
.start-card__retry input { min-width: 0; min-height: var(--size-10); flex: 1; padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); box-shadow: var(--shadow-xs); }
.start-card__retry input:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-sm); }
.start-card__retry button { min-height: var(--size-10); flex: 0 0 auto; padding: 0 var(--space-4); border: 1px solid var(--color-black); border-radius: var(--radius-full); background: var(--color-black); color: var(--color-white); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }

.start-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }
.start-hero__btn { display: inline-flex; min-height: var(--size-10); align-items: center; justify-content: center; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-full); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none; cursor: pointer; }
.start-hero__btn--future { border-color: var(--accent-tertiary); background: var(--accent-tertiary); color: var(--color-white); }
.start-hero__btn--unsure { border-color: var(--color-black); background: var(--color-black); color: var(--color-white); }
.start-hero__btn:disabled { cursor: wait; opacity: var(--btn-disabled-opacity); }

.start-story { position: absolute; z-index: 2; top: var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)); right: 0; left: 0; visibility: hidden; width: 100%; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); color: var(--text-primary); box-shadow: var(--feed-card-shadow); opacity: 0; text-align: left; transform: translateY(var(--space-3)); }
.start-story__pills { position: absolute; z-index: 2; top: calc((var(--space-3) + var(--space-1) / 4) * -1); right: var(--space-4); left: var(--space-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); pointer-events: none; }
.start-card__ident--sterling { background: var(--accent-primary); }
.start-story__layout { display: grid; grid-template-columns: minmax(128px, 180px) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.start-story__portrait { overflow: hidden; min-height: 100%; margin: 0; border-radius: var(--radius-md); background: var(--surface-secondary); }
.start-story__portrait img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: 50% 24%; }
.start-story__body { display: grid; min-width: 0; align-content: start; }
.start-story__eyebrow { margin: var(--space-1) 0 var(--space-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: var(--leading-snug); text-transform: uppercase; }
.start-story h2 { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-2xl); letter-spacing: 0; line-height: var(--leading-tight); }
.start-story p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-story p + p { margin-top: var(--space-3); }
.start-story__form { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.start-story__form label { color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; letter-spacing: 0; line-height: var(--leading-snug); }
.start-story__form textarea { width: 100%; min-height: var(--size-24); resize: vertical; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); line-height: var(--leading-relaxed); box-shadow: var(--shadow-xs); }
.start-story__form textarea:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-sm); }
.start-story__status { min-height: var(--text-lg); color: var(--text-muted) !important; font-family: var(--font-mono); font-size: var(--text-xs) !important; font-weight: var(--font-bold); letter-spacing: 0; line-height: var(--leading-snug) !important; text-transform: uppercase; }
.start-story__form .instructional-card__cta { justify-self: start; border: 0; }
.start-story__form .instructional-card__cta:disabled { cursor: wait; opacity: var(--btn-disabled-opacity); }

.start-solution { position: absolute; z-index: 2; top: var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)); right: 0; left: 0; visibility: hidden; width: 100%; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); color: var(--text-primary); box-shadow: var(--feed-card-shadow); opacity: 0; text-align: left; transform: translateY(var(--space-3)); }
.start-solution__pills { position: absolute; z-index: 2; top: calc((var(--space-3) + var(--space-1) / 4) * -1); right: var(--space-4); left: var(--space-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); pointer-events: none; }
.start-solution__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.start-solution__odds { color: var(--accent-tertiary); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.start-solution__odds > span:last-child { color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.start-solution__status { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: var(--leading-snug); text-align: right; text-transform: uppercase; }
.start-solution__status iconify-icon { width: var(--size-4); height: var(--size-4); flex: 0 0 auto; animation: start-working-spin 1200ms linear infinite; }
.start-home--quest-ready .start-solution__status iconify-icon,
.start-home--quest-error .start-solution__status iconify-icon { display: none; }
.start-solution h2 { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-2xl); letter-spacing: 0; line-height: var(--leading-tight); }
.start-solution__description { max-width: var(--auth-card-max-width); margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-solution__steps { display: grid; margin: var(--space-5) 0 0; padding: 0; border-top: 1px solid var(--border-subtle); list-style: none; }
.start-solution-step { display: grid; min-width: 0; grid-template-columns: var(--size-8) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.start-solution-step__check { display: grid; width: var(--size-8); height: var(--size-8); place-items: center; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); cursor: pointer; }
.start-solution-step__check:hover,
.start-solution-step__check:focus-visible { background: var(--surface-secondary); color: var(--text-primary); }
.start-solution-step__check iconify-icon { width: var(--size-5); height: var(--size-5); }
.start-solution-step__body { min-width: 0; }
.start-solution-step__meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: var(--leading-snug); text-transform: uppercase; }
.start-solution-step__meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-solution-step__owner { flex: 0 0 auto; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-secondary); }
.start-solution-step__owner--ai { background: var(--accent-primary); color: var(--color-black); }
.start-solution-step h3 { margin: var(--space-2) 0 0; font-family: var(--font-heading); font-size: var(--text-base); letter-spacing: 0; line-height: var(--leading-snug); }
.start-solution-step__body > p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-solution-step__tool { display: grid; grid-template-columns: var(--size-6) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--text-secondary); }
.start-solution-step__tool.is-required { border-color: var(--accent-tertiary); background: color-mix(in srgb, var(--accent-tertiary) 8%, var(--surface-primary)); }
.start-solution-step__tool > iconify-icon { width: var(--size-5); height: var(--size-5); color: var(--text-primary); }
.start-solution-step__tool > div { display: grid; min-width: 0; gap: var(--space-1); }
.start-solution-step__tool strong { color: var(--text-primary); font-size: var(--text-xs); line-height: var(--leading-snug); }
.start-solution-step__tool span { font-size: var(--text-xs); line-height: var(--leading-snug); }
.start-solution-step__tool a { color: var(--text-primary); font-size: var(--text-xs); font-weight: var(--font-bold); }
.start-solution-step.is-complete h3,
.start-solution-step.is-complete .start-solution-step__body > p { color: var(--text-muted); text-decoration: line-through; }
.start-solution-step.is-loading { min-height: var(--size-16); align-items: center; opacity: .5; animation: start-solution-pulse 1200ms ease-in-out infinite alternate; }
.start-solution-step.is-loading > span { grid-column: 1 / -1; width: 72%; height: var(--space-3); border-radius: var(--radius-sm); background: var(--border-default); }
.start-solution__tool-rule { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.start-solution__tool-rule iconify-icon { width: var(--size-4); height: var(--size-4); flex: 0 0 auto; margin-top: var(--space-1); }
.start-solution__continue { visibility: hidden; margin-top: var(--space-4); opacity: 0; }

.start-home--future .start-home__rail-orb { border-color: transparent; box-shadow: none; opacity: 0; transform: translateY(calc((var(--size-10) + var(--space-2) + var(--space-4) + (var(--orb-index) * (var(--boh-rail-control-size, var(--size-10)) + var(--space-2)))) * -1)) scale(.72); transition-delay: calc(var(--orb-reverse-index) * 70ms); }
.start-home--future .start-home__rail-letter { opacity: 0; }
.start-home--future .start-hero { padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
.start-home--future.start-home--point .start-home__main { min-height: var(--start-flow-height, 100dvh); }
.start-home--future .start-hero__eyebrow { opacity: 0; filter: blur(14px); transform: translateY(calc(var(--space-3) * -1)); }
.start-home--future .start-hero__chip { opacity: 0; filter: blur(14px); transform: translateY(calc(-50% - var(--space-3))); }
.start-home--future .start-hero__headline { opacity: 0; filter: blur(16px); transform: translateY(calc(var(--space-6) * -1)) scale(.96); }
.start-home--future .start-hero__sub { opacity: 0; filter: blur(14px); transform: translateY(calc(var(--space-3) * -1)) scale(.98); transition-delay: 80ms; }
.start-home--future .start-hero__entry { z-index: calc(var(--z-topbar, 50) - 1); transform: translateY(var(--start-entry-rise, clamp(-320px, -34vh, -180px))); transition-delay: 100ms; }
/* The mist is a fixed --z-modal sheet that covers the page for ~900ms after
   submit; the card has to ride above it for that moment and only that moment.
   Before this split the card kept 401 forever, which is why it painted over
   the Toll Bench bar (and over .start-prompts) for the rest of the session. */
.start-home--future.start-home--misting .start-hero__entry { z-index: calc(var(--z-modal) + 1); }
.start-home--future .start-hero__entry::before { height: var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)); animation: start-card-from-mist 500ms cubic-bezier(.2, .8, .2, 1) 120ms forwards; }
/* The slow-model "overloaded" notice (armed 15s into evaluation) adds a line to
   the absolutely positioned odds block, but the card face above is a fixed-height
   ::before -- without this the notice spilled below the card (Steven 2026-08-25). */
.start-home--future.start-home--odds-waiting .start-hero__entry::before {
  height: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--size-12));
}
.start-home--future .start-card__pills { visibility: visible; animation: start-card-details-from-mist 400ms cubic-bezier(.2, .8, .2, 1) 180ms forwards; }
.start-home--future [data-sharpie-write] { visibility: visible; }
.start-home--future [data-sharpie-write] .start-card__write-word { animation: start-sharpie-write var(--write-duration) linear var(--write-delay) forwards; }
.start-home--future .start-card__odds { visibility: visible; animation: start-odds-panel-in 300ms cubic-bezier(.2, .8, .2, 1) 240ms forwards; }
.start-home--future .start-hero__actions { display: none; }
.start-home--future .start-hero__form input { display: none; }
.start-home--future .start-card__want { display: block; }
.start-home--odds-complete .start-card__wave { animation: none; }
.start-home--retry-allowed .start-card__retry { visibility: visible; opacity: 1; transform: translateY(0); }
/* Retry bar occupies the gap above the next card — push the followers down so it never overlaps. */
.start-home--retry-allowed .start-why,
.start-home--retry-allowed .start-point { top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-6) + var(--size-10) + var(--space-3)); }
.start-home--story-moving .start-hero__entry::before { animation: start-feed-card-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; }
.start-home--story-moving .start-card__pills,
.start-home--story-moving .start-hero__form,
.start-home--story-moving .start-card__retry { animation: start-feed-content-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
.start-home--story .start-story { visibility: visible; animation: start-feed-next-card-ready 160ms ease-out forwards; }
.start-home--story-moving .start-story { animation: start-feed-next-card-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; }
.start-home--story-settled .start-hero__entry { transform: none; transition: none; }
.start-home--story-settled .start-story { position: relative; top: auto; right: auto; left: auto; grid-area: 1 / 1; visibility: visible; opacity: 1; transform: none; animation: none; }
.start-home--solution .start-solution { visibility: visible; animation: start-feed-next-card-ready 160ms ease-out forwards; }
.start-home--solution-moving .start-story { animation: start-feed-card-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
.start-home--solution-moving .start-solution { animation: start-feed-next-card-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; }
.start-home--solution-settled .start-hero__entry { transform: none; transition: none; }
.start-home--solution-settled .start-story { position: absolute; visibility: hidden; pointer-events: none; }
.start-home--solution-settled .start-solution { position: relative; top: auto; right: auto; left: auto; grid-area: 1 / 1; visibility: visible; opacity: 1; transform: none; animation: none; }
.start-home--quest-ready .start-solution__continue,
.start-home--quest-error .start-solution__continue { visibility: visible; opacity: 1; }

.start-home__mist { display: none; position: fixed; inset: 0; z-index: var(--z-modal); overflow: hidden; pointer-events: none; opacity: 0; background: color-mix(in srgb, var(--surface-primary) 20%, transparent); transition: opacity 520ms ease; }
.start-home__mist::before,
.start-home__mist::after,
.start-home__mist-cloud { content: ""; position: absolute; width: 70vw; height: 42vh; border-radius: var(--radius-full); filter: blur(54px); opacity: 0; transform: scale(.6) translateY(25vh); }
.start-home__mist::before { left: -12vw; top: 24vh; background: color-mix(in srgb, var(--color-brightcyan-500) 24%, var(--surface-primary)); }
.start-home__mist::after { right: -18vw; top: 34vh; background: color-mix(in srgb, var(--accent-tertiary) 14%, var(--surface-primary)); }
.start-home__mist-cloud { left: 18vw; top: 32vh; background: var(--surface-primary); }
.start-home--misting .start-home__mist { display: block; opacity: 1; }
.start-home--misting .start-home__mist::before,
.start-home--misting .start-home__mist::after,
.start-home--misting .start-home__mist-cloud { animation: start-gather-mist 4400ms var(--ease-default) both; }
.start-home--misting .start-home__mist::after { animation-delay: 280ms; }
.start-home--misting .start-home__mist-cloud { animation-delay: 520ms; }

@keyframes start-gather-mist {
  0% { opacity: 0; transform: scale(.6) translateY(25vh); }
  42% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.45) translateY(-12vh); }
}

@keyframes start-card-from-mist {
  0% { opacity: 0; filter: blur(18px); transform: translateY(34px) scale(.98); }
  58% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes start-card-details-from-mist {
  0% { opacity: 0; filter: blur(12px); transform: translateY(var(--space-3)); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes start-odds-panel-in {
  from { opacity: 0; transform: translateY(var(--space-4)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes start-result-slide-in {
  from { opacity: 0; transform: translateY(calc(var(--space-3) * -1)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes start-wave-travel {
  to { stroke-dashoffset: -.074; }
}

@keyframes start-wave-return-to-center {
  to { clip-path: inset(0 50% 0); opacity: 0; }
}

@keyframes start-wave-space-close {
  to { height: 0; margin-top: 0; }
}

@keyframes start-quest-bar-begin {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes start-odds-outline-wrap {
  to { stroke-dashoffset: 0; }
}

@keyframes start-feed-card-up {
  0% { opacity: 1; transform: translateY(0); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--start-card-height) * -1)); }
}

@keyframes start-feed-content-up {
  0% { visibility: visible; opacity: 1; transform: translateY(0); }
  84% { opacity: 1; }
  100% { visibility: hidden; opacity: 0; transform: translateY(calc(var(--start-card-height) * -1)); }
}

@keyframes start-feed-next-card-ready {
  from { opacity: 0; filter: blur(8px); transform: translateY(var(--space-3)); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes start-feed-next-card-up {
  from { opacity: 1; filter: blur(0); transform: translateY(0); }
  to { opacity: 1; filter: blur(0); transform: translateY(calc(var(--start-card-height) * -1)); }
}

@keyframes start-feed-following-card-in {
  0% { opacity: 0; filter: blur(0); transform: translateY(var(--space-16)); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes start-working-spin {
  to { transform: rotate(360deg); }
}

@keyframes start-working-counterspin {
  to { transform: rotate(-360deg); }
}

@keyframes start-solution-pulse {
  to { opacity: .25; }
}

@keyframes start-sharpie-write {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (max-width: 767px) {
  .start-home__main { padding-right: 0; padding-left: 0; }
  .start-hero,
  .start-homepage-proof {
    width: calc(100% - (var(--feed-card-gutter-mobile) * 2));
    max-width: calc(100% - (var(--feed-card-gutter-mobile) * 2));
    margin-right: auto;
    margin-left: auto;
  }
  .market-nav { display: none; }
  /* Phones: the open menu spans the bar, as before; it hangs off the header
     (see .market-menu above) so it always opens under the bar. Dark pages
     override the surface in toll-bench.css. */
  .market-menu:not([hidden]) { right: 0; left: 0; width: auto; margin-top: 0; padding: var(--space-1) var(--space-4) var(--space-2); border: 0; border-bottom: 1px solid var(--border-default); border-radius: 0; background: var(--surface-app); box-shadow: var(--shadow-md); }
}

@media (max-width: 640px) {
  .start-home__topbar { padding-inline: var(--space-3); }
  .start-home__rail-orb { width: var(--size-10); height: var(--size-10); top: calc(var(--orb-index) * (var(--size-10) + var(--space-1))); }
  .start-home__rail-letter { font-size: var(--size-6); }
  .start-card__maker,
  .start-card__type { font-size: calc(var(--text-xs) - 1px); }
  .start-card__odds { right: var(--space-4); left: var(--space-4); }
  .start-card__odds-title { font-size: var(--text-base); margin-top: var(--space-2); margin-bottom: var(--space-1); }
  /* Phone fallback for the odds row. On the card itself the imported
     components/probability-card.css lays this row out (flex: the number,
     then a column holding the move box over "Probability of success", back
     beside the number since Steven 2026-09-29 round 2) and outranks these
     rules. */
  .start-card__odds-head { align-items: flex-start; }
  .start-card__odds-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "pill move";
    align-items: center;
    column-gap: var(--space-2);
  }
  .start-card__odds-pill { grid-area: pill; justify-self: start; font-size: var(--text-3xl); }
  .start-card__odds-move { grid-area: move; margin-left: 0; font-size: var(--text-lg); }
  .start-card__compact-next { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .start-story { padding: var(--feed-card-padding-mobile); }
  .start-story__layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .start-story__portrait { max-height: 220px; }
  .start-story__portrait img { min-height: 220px; object-position: 50% 20%; }
  .start-story h2 { font-size: var(--text-xl); }
  .start-story__form label { font-size: var(--text-base); }
  .start-solution { padding: var(--feed-card-padding-mobile); }
  .start-solution__header { align-items: flex-start; flex-direction: column; }
  .start-solution__status { justify-content: flex-start; text-align: left; }
  .start-solution h2 { font-size: var(--text-xl); }
  .start-hero__headline { font-size: var(--text-4xl); }
  .start-hero__sub { font-size: var(--text-lg); }
  .start-home--future:not(.start-home--story-settled):not(.start-home--solution-settled):not(.start-home--odds-compact) .start-hero__entry { transform: translateY(var(--start-entry-rise, clamp(-240px, -27vh, -150px))); }
  .start-solution-step__tool { grid-template-columns: var(--size-6) minmax(0, 1fr); }
  .start-solution-step__tool a { grid-column: 2; }
  .start-card__retry { right: var(--space-1); left: var(--space-1); }
}

/* ── Phone (<=430px): tight gutters, compact card padding, side-by-side buttons ──
   TWO-PATHS NOTE: strictly visual — no structural/DOM changes.
   (1) Outer gutters: reduce wants-page container padding so card sits ~8px from column edge.
   (2) Inner padding: step card down to feed-card-padding-mobile (space-4/space-5).
   (3) Buttons: force flex row, compact gap/padding so both fit in one line at 390px. */
@media (max-width: 430px) {
  /* (1) Tighten wants-page container when hosted inside the market_page shell */
  .start-home__main .wants-page { padding-inline: var(--space-2); }

  /* (2) Step card inner padding down one tier — space-5/space-8 → space-4/space-5 */
  .start-hero { padding: var(--feed-card-padding-mobile); }

  /* (3) Force the action buttons onto one row, compact gap/padding, both equal width */
  .start-hero__actions {
    flex-wrap: nowrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .start-hero__btn {
    padding: 0 var(--space-3);
    white-space: nowrap;
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .start-home__topbar,
  .start-hero__headline,
  .start-hero__sub,
  .start-hero__actions,
  .start-hero__entry,
  .start-hero__form input,
  .start-home__rail-orb,
  .start-home__mist { transition-duration: 1ms; }
  .start-home--misting .start-home__mist::before,
  .start-home--misting .start-home__mist::after,
  .start-home--misting .start-home__mist-cloud,
  .start-home--future .start-hero__entry::before,
  .start-home--future .start-card__pills,
  .start-home--future .start-card__odds,
  .start-home--story-moving .start-card__pills,
  .start-home--story-moving .start-hero__form,
  .start-home--story-moving .start-card__retry,
  .start-home--story .start-story,
  .start-home--solution-moving .start-story,
  .start-home--solution .start-solution,
  .start-solution-step.is-loading { animation-duration: 1ms; }
  .start-home--future [data-sharpie-write] .start-card__write-word { clip-path: inset(0); animation: none; }
  .start-card__wave path,
  .start-solution__status iconify-icon { animation: none; }
  .start-home--odds-complete .start-card__wave { height: 0; margin-top: 0; clip-path: inset(0 50% 0); opacity: 0; animation: none; }
  .start-home--odds-complete .start-card__quest-bar,
  .start-home--odds-complete .start-card__quest-bar-fill,
  .start-home--odds-complete .start-card__odds-note,
  .start-home--future .start-why,
  .start-home--point .start-point { animation-duration: 1ms; animation-delay: 0ms; }
}

/* Register-to-post card */
.start-register__row { display: grid; gap: var(--space-2); margin-top: var(--space-3); text-align: left; }
.start-register__label { font-size: var(--text-sm); font-weight: 700; }
.start-register__age-note { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.start-register__input { width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: var(--text-base); }
.start-register__phone { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }
.start-register__cc { width: var(--size-14); text-align: center; }
.start-register__alt { margin-top: var(--space-2); border: 0; background: none; color: var(--text-secondary); font-size: var(--text-sm); text-decoration: underline; cursor: pointer; }

/* Post-registration claimed state (start_claimed.html) */
.start-claimed { margin: 0; min-height: 100dvh; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-body); }
.start-claimed__page { margin-left: var(--boh-rail-width, calc(var(--size-16) + var(--space-1))); padding: var(--space-16) var(--space-4) var(--space-8); }
.start-claimed__topbar { position: fixed; z-index: var(--z-sticky, 200); top: var(--space-2); left: 50%; transform: translateX(-50%); }
.start-claimed__pill { text-decoration: none; }
.start-claimed__main { display: grid; gap: var(--space-6); max-width: var(--auth-card-max-width); margin: 0 auto; }
.start-claimed__card { padding: var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); }
.start-claimed__eyebrow { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.start-claimed__odds { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; }
.start-claimed__note { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-claimed__want { margin: 0; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; line-height: var(--leading-tight); }
.start-claimed__quest-title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; }
.start-claimed__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0 0 0 var(--space-5); }
.start-claimed__step { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.start-claimed__step.is-done { opacity: .55; text-decoration: line-through; }
.start-claimed__step-title { font-weight: 700; }
.start-claimed__step-detail { color: var(--text-secondary); line-height: var(--leading-relaxed); }
.start-claimed__cta { display: inline-block; margin-top: var(--space-4); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--accent-primary); color: var(--color-black); font-weight: 800; text-decoration: none; }

/* ── Want Request card (Card 8 read-back) — pills straddle the top edge ── */
.start-point--wantcard { padding-top: var(--space-8); }
.start-wantcard__tags { position: absolute; z-index: 1; top: 0; left: var(--space-4); right: var(--space-4); display: flex; justify-content: space-between; align-items: center; transform: translateY(-50%); pointer-events: none; }
.start-wantcard__kind, .start-wantcard__no { display: inline-flex; align-items: center; gap: var(--space-1); min-height: calc(var(--size-6) + var(--space-1)); padding: 0 var(--space-3); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: 1; text-transform: uppercase; }
.start-wantcard__kind { background: var(--accent-primary); color: var(--accent-dark); }
.start-wantcard__no { background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-strong); }
.start-wantcard__quote { margin: var(--space-2) 0 0; font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-snug); }
.start-wantcard__quote .hl { padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-wantcard__byline { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.start-wantcard__strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-secondary); }
.start-wantcard__strip + .start-wantcard__strip { margin-top: var(--space-3); }
.start-wantcard__strip-key { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-normal); letter-spacing: .06em; text-transform: uppercase; }
.start-wantcard__strip-val { color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-normal); text-align: right; }
.start-wantcard__rows { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.start-wantcard__row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-wantcard__key { flex: 0 0 auto; max-width: 55%; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-normal); letter-spacing: .06em; text-transform: uppercase; }
.start-wantcard__dots { flex: 1 1 auto; min-width: var(--space-4); align-self: center; border-bottom: 2px dotted var(--border-strong); }
.start-wantcard__val { flex: 0 1 auto; color: var(--text-secondary); font-weight: var(--font-normal); text-align: right; }
.start-wantcard__section-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.start-wantcard__section-key { margin: 0; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; }
.start-wantcard__section-key--solo { margin-top: var(--space-4); }
.start-wantcard__section-note { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }
.start-wantcard__drag { margin: var(--space-2) 0 0; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-wantcard__proof { margin: var(--space-3) 0 0; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); }

/* ── /start/welcome — first state inside the Book: passport + continue ── */
.start-welcome { display: grid; gap: var(--space-4); justify-items: center; max-width: var(--auth-card-max-width); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-10); text-align: center; }
.start-welcome .start-point__eyebrow { margin: 0; }
.start-welcome .start-point__title { margin: 0; }
.start-welcome__passport { width: 100%; text-align: left; }
.start-welcome__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }

/* Step explainer: collapsed dropdown card shown between funnel steps */
.start-explainer { justify-self: stretch; max-width: var(--auth-card-max-width); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-primary); }
.start-explainer__pills { display: flex; margin-bottom: var(--space-2); }
.start-explainer__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-bold); text-align: left; cursor: pointer; }
.start-explainer__toggle iconify-icon { flex: none; width: var(--size-4); height: var(--size-4); transition: transform var(--start-motion-normal) ease; }
.start-explainer__toggle[aria-expanded="false"] iconify-icon { transform: rotate(-90deg); }
.start-explainer__toggle[aria-expanded="false"] + .start-explainer__body { display: none; }
.start-explainer__body { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.start-explainer__body p + p { margin-top: var(--space-2); }
.start-explainer__drop { margin-top: var(--space-2); }
.start-explainer__toggle[aria-expanded="false"] + .start-explainer__drop { display: none; }
.start-why__toggle { margin-top: var(--space-2); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-tight); }
.start-why__toggle .hl { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); }

.start-card__maker--prob { border-color: transparent; background: var(--highlight-yellow); color: var(--color-black); padding-left: var(--space-3); }
/* Steven 2026-08-09: the top-right TARGET chip on the odds card carries the
   Toll Bench yellow (was purple/accent-tertiary), matching the yellow target
   branding on the rail and the per-want bullseye. Dark text on yellow. */
.start-card__type { border-color: transparent; background: var(--highlight-yellow); color: var(--color-black); }

/* ── Want-flow file attachment control (2026-07-23) ── */
.start-baseline__files { margin-top: var(--space-4); }
.start-baseline__add-files { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--btn-ghost-bg); color: var(--btn-ghost-color); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background var(--transition-default, 150ms), border-color var(--transition-default, 150ms), color var(--transition-default, 150ms); }
.start-baseline__add-files:hover { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-color-hover); border-color: var(--border-default); }
.start-baseline__add-files iconify-icon { width: var(--size-4); height: var(--size-4); }
.start-baseline__files-err { margin-top: var(--space-2); color: var(--color-error, #d32f2f); font-size: var(--text-sm); }
.start-baseline__file-list { margin-top: var(--space-3); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.start-baseline__file-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-secondary); font-size: var(--text-sm); }
.start-baseline__file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.start-baseline__file-size { flex: none; color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; }
.start-baseline__file-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-6); height: var(--size-6); border: 0; border-radius: var(--radius-full); background: none; color: var(--text-secondary); font-size: var(--text-base); cursor: pointer; line-height: 1; }
.start-baseline__file-remove:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* ── Age-gate error (2026-07-28) ── */
.start-point .form-error, .start-register__row .form-error { margin: var(--space-2) 0 0; color: var(--status-error); font-size: var(--text-sm); line-height: var(--leading-relaxed); }


/* ── Approach sliders (v2, step 5 -- "What can you bring?") ── */
.start-approach { margin-bottom: var(--space-4); }
.start-approach__header { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-3); }
.start-approach__row { margin-bottom: var(--space-3); }
.start-approach__labels { display: flex; justify-content: space-between; margin-bottom: var(--space-1); }
.start-approach__label { font-size: var(--text-xs); color: var(--text-secondary); }
/* iOS gotcha: with -webkit-appearance:none the input's TOUCH TARGET is its own
   box. Drawing the 6px bar on the input made the hit area 6px tall — fine with
   a mouse, ungrabbable with a thumb (touches fell through to page scroll). The
   input now stands 28px tall as the touch target, the visual 6px bar moves to
   the track pseudo-elements, and touch-action:none lets a thumb-drag win over
   the page scroll. */
.start-approach__range {
  width: 100%;
  height: 28px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  touch-action: none;
  margin: 0;
}
.start-approach__range::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--surface-tertiary);
  border-radius: var(--radius-full);
}
.start-approach__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px; /* (20 - 6) / 2 — centers the thumb on the 6px track */
  background: var(--color-purple-500);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.start-approach__range::-moz-range-track {
  height: 6px;
  background: var(--surface-tertiary);
  border-radius: var(--radius-full);
}
.start-approach__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-purple-500);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.start-approach__note { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-1) 0 0; }

/* ── Approach bars on the read-back card ── */
.start-wantcard__approach { margin-top: var(--space-3); margin-bottom: 0; display: grid; gap: var(--space-2); }
.start-wantcard__approach-title { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-normal); letter-spacing: .06em; text-transform: uppercase; }
.start-wantcard__approach-row { display: grid; grid-template-columns: 5rem 1fr 5rem; align-items: center; gap: var(--space-2); }
.start-wantcard__approach-label { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-wantcard__approach-label--right { text-align: right; }
.start-wantcard__approach-track { position: relative; height: 2px; background: var(--surface-tertiary); border-radius: var(--radius-full); }
.start-wantcard__approach-dot { position: absolute; top: 50%; left: var(--approach-pct, 50%); width: 12px; height: 12px; margin-top: -6px; transform: translateX(-50%); background: var(--color-purple-500); border-radius: var(--radius-full); }

/* terms checkbox row in the /start inline register drawer */
.start-register__terms-row { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-1) 0; }
.start-register__terms-row input[type=checkbox] { flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; }
.start-register__terms-row label { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.4; cursor: pointer; }
.start-register__terms-row label a { color: var(--accent); text-decoration: underline; }


/* == Does AI Suck? hero (Steven 2026-08-14): one italic line, AI in the bar,
      the old title becomes the ask above the input == */
.start-hero__form label.start-hero__form-ask { overflow: visible; position: static; width: 100%; height: auto; margin: 0 0 var(--space-4); padding: 0; clip: auto; white-space: normal; display: block; justify-self: start; text-align: left; color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-bold); }


/* == About The Benchmark button (Steven 2026-08-14): beside Post My Want == */
.start-hero__btn--about { border-color: var(--color-black); background: transparent; color: var(--color-black); }
.start-hero__btn--about:hover { background: var(--color-black); color: var(--color-white); }


/* == Mobile: keep Post My Want + About The Benchmark on one row INSIDE the
      card (the one-row law predates the About pill; without this the nowrap
      labels stretch the card to the screen edge) == */
@media (max-width: 430px) {
  .start-hero__btn--about { flex: 0 1 auto; font-size: var(--text-xs); padding: 0 var(--space-2); }
}


/* == /wants hero rhythm + darker input (Steven 2026-08-14): the ask sits
      right under "give it to you.", then a breath, then the input; the
      input border and placeholder step darker to sit with the About pill == */
.wants-hero .start-hero__entry { margin-top: var(--space-3); }
.start-hero__form input,
.start-hero__form textarea { border-color: var(--border-strong); }
.start-hero__form input::placeholder,
.start-hero__form textarea::placeholder { color: var(--text-secondary); opacity: 1; }

/* "Why would AI want to give me what I want?" expandable (Steven 2026-08-29):
   sits between the recent-want proof card and the live field view. Native
   details/summary; tokens only. */
.start-homepage-proof--why { margin-top: var(--space-4); }
.start-why-card { padding: 0; border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); box-shadow: var(--shadow-xs); }
.start-why-card__summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--feed-card-padding); cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.start-why-card__summary::-webkit-details-marker { display: none; }
.start-why-card__summary:hover .start-why-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.start-why-card__icon { display: grid; place-items: center; flex: none; width: var(--size-8); height: var(--size-8); border-radius: var(--radius-full); background: var(--color-yellow-400); color: var(--text-primary); font-size: var(--text-base); }
.start-why-card__title { flex: 1; min-width: 0; }
.start-why-card__chevron { flex: none; color: var(--text-secondary); transition: transform 200ms ease; }
.start-why-card[open] .start-why-card__chevron { transform: rotate(180deg); }
.start-why-card__body { display: grid; gap: var(--space-3); padding: 0 var(--space-8) var(--space-5); }
.start-why-card__body p { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); }
.start-why-card__body p:first-child { font-family: var(--font-serif); color: var(--text-primary); }
@media (max-width: 767px) {
  .start-why-card__body { padding: 0 var(--space-5) var(--space-5); }
}

/* Spend-guard refusal link (2026-09-09): the "Make an account to keep going"
   anchor handleEvaluationError hangs under the odds message when /want/evaluate
   answers 429. Tokens only. */
.start-card__link { color: var(--text-primary); font-weight: var(--font-semibold); text-decoration: underline; }

/* Toll Bench brand roles only; shared violet, BOH, success and error tokens stay intact. */
body.start-home:not(.boh-home) {
  --tb-brand-purple: #5534a5;
  --tb-brand-purple-hover: #6545b5;
  --tb-brand-purple-active: #432982;
}
body.start-home:not(.boh-home) .start-hero__btn--future {
  min-height: 44px;
  background: var(--tb-brand-purple);
  border-color: var(--tb-brand-purple);
  color: var(--color-white);
}
body.start-home:not(.boh-home) .start-hero__btn--future:hover {
  background: var(--tb-brand-purple-hover);
  border-color: var(--tb-brand-purple-hover);
  color: var(--color-white);
}
body.start-home:not(.boh-home) .start-hero__btn--future:active {
  background: var(--tb-brand-purple-active);
  border-color: var(--tb-brand-purple-active);
}
body.start-home:not(.boh-home) .start-hero__btn:focus-visible {
  outline: 3px solid var(--tb-brand-purple);
  outline-offset: 3px;
}
body.start-home:not(.boh-home) .start-hero__btn--about { min-height: 44px; }
body.start-home:not(.boh-home) .start-hero__btn--future:disabled {
  opacity: .55;
  cursor: not-allowed;
}
body.start-home:not(.boh-home) .start-hero__form :is(input, textarea) {
  border-color: var(--text-muted);
}
body.start-home:not(.boh-home) .start-hero__form :is(input, textarea):focus-visible {
  border-color: var(--tb-brand-purple);
  outline: 3px solid var(--tb-brand-purple);
  outline-offset: 2px;
}
body.start-home:not(.boh-home):not(.start-home--future) .start-hero--toll-bench:not(.wants-hero) {
  padding: var(--space-12) var(--space-8) var(--space-10);
  border-color: var(--border-default);
  box-shadow: 0 5px 20px rgba(23, 32, 51, .08);
}
@media (max-width: 767px) {
  body.start-home:not(.boh-home):not(.start-home--future) .start-hero--toll-bench:not(.wants-hero) {
    padding: var(--space-8) var(--space-6);
  }
}
@media (max-width: 360px) {
  body.start-home:not(.boh-home) .start-hero__actions { flex-wrap: wrap; }
  body.start-home:not(.boh-home) .start-hero__btn { flex-basis: 100%; }
}
/* Interaction feedback for the same scoped brand controls. */
body.start-home:not(.boh-home) .start-hero__btn--about:active {
  background: var(--color-gray-800);
  color: var(--color-white);
}
body.start-home:not(.boh-home) .start-hero__form :is(input, textarea):hover:not(:disabled) {
  border-color: var(--tb-brand-purple);
}
body.start-home:not(.boh-home) .start-hero__form :is(input, textarea):disabled {
  opacity: 1;
  background: var(--surface-secondary);
  cursor: not-allowed;
}
/* /start has a separate FAQ ancestor from the public /wants about card. */
@media (max-width: 360px) {
  body.start-home:not(.boh-home) .start-homepage-proof--why .start-why-card__summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    column-gap: 0;
    row-gap: var(--space-2);
    min-height: 44px;
    padding-inline: var(--space-3);
  }
  body.start-home:not(.boh-home) .start-homepage-proof--why .start-why-card__icon {
    grid-column: 1;
    grid-row: 1;
  }
  body.start-home:not(.boh-home) .start-homepage-proof--why .start-why-card__chevron {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  body.start-home:not(.boh-home) .start-homepage-proof--why .start-why-card__title {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body.start-home:not(.boh-home) .start-homepage-proof--why .start-why-card__body {
    padding-inline: var(--space-3);
  }
}

/* The intro video (Steven 2026-09-30): the feed's video card shape (feed.css
   .feed-daycard: pill, player, title) under the hero on /start and on the
   public Toll Bench homepage (wants.html). Surface = the recent-want card
   that sits below it (.target-anchor). Tokens only.
   Correction 1 (same day): the pill straddles the card's top-left edge like
   WANT REQUEST on the recent-want card and TOLL Bench on the hero. Geometry
   and look restate probability-card.css .probability-card__pills + __tag,
   which that sheet scopes to .probability-card (and hides on .wants-page).
   The card's top padding (space-8, the want card's own) keeps the player
   clear of the pill's lower half.
   Correction 2: our own cover (LUMI on the mattress) with the "How to" words
   as text, and the player loads on tap (.tp-ytfacade + yt-facade.js). The
   facade rules restate target-path.css .tp-ytfacade*, which neither page
   loads; the play button wears the Post My Want purple. */
/* Steven 2026-10-05: "get rid of Want it, and just do the video, and make it
   fill the full card." No padding and no title: the player is the card, edge
   to edge. The card cannot clip with overflow (the tag straddles its top
   edge and would be cut in half), so the player takes the card's own radius
   (inherit) and clips its cover itself. */
.start-intro-card {
  position: relative;
  display: grid;
  padding: 0;
  border: var(--feed-card-border);
  border-radius: var(--feed-card-radius);
  background: var(--feed-card-bg);
  box-shadow: var(--tb-card-shadow);
}
/* The tag row and tag are shared with the Need ideas? card below. */
.start-intro-card__pills { position: absolute; z-index: 2; top: 0; left: var(--space-6); right: var(--space-6); transform: translateY(-50%); display: flex; align-items: center; gap: var(--space-2); pointer-events: none; }
.start-intro-card__tag { display: inline-flex; align-items: center; min-height: var(--size-6); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--highlight-yellow); color: var(--color-black); font: var(--font-bold) var(--text-xs)/1 var(--font-mono); text-transform: uppercase; white-space: nowrap; }
.start-intro-card__player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: inherit; background: var(--color-black); container-type: inline-size; }
.start-intro-card__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.start-intro-card__cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.start-intro-card__cover:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: -3px; }
.start-intro-card__cover .tp-ytfacade__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Steven 2026-10-05: "for Lumi on the front page, enlarge that photo so her
   face isn't covered." The cover is drawn 1.6x larger about a point near its
   left edge, which puts LUMI's face (about 48% across, 44% down in the
   1280x720 frame) in the upper right third of the card, clear of the play
   button in the middle, while the window side of the room sits under the
   words bottom left. The box is always 16:9, so this holds at every width. */
.start-intro-card__cover .tp-ytfacade__thumb { transform: scale(1.6); transform-origin: 7% 58%; }
/* Soft dark scrim under the words only: darkest at the bottom edge, gone
   before the middle, so the play button sits on the bare picture. */
.start-intro-card__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-black) 62%, transparent) 0%, color-mix(in srgb, var(--color-black) 26%, transparent) 30%, transparent 55%); pointer-events: none; }
/* The cover words: line 1 = the hero headline's yellow .hl mark, line 2 =
   the hero's italic serif .soft line, white on the scrim. Sized off the
   player's own width (cqi) so they never overflow the 16:9 box. */
.start-intro-card__words { position: absolute; z-index: 1; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: grid; justify-items: start; gap: var(--space-1); pointer-events: none; }
.start-intro-card__line { display: block; max-width: 100%; letter-spacing: 0; }
.start-intro-card__line--how { font-family: var(--font-heading); font-size: var(--text-xl); font-size: clamp(var(--text-lg), 6.5cqi, var(--text-3xl)); font-weight: 800; line-height: 1; color: var(--color-black); }
.start-intro-card__line--how .hl { margin: 0; padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--highlight-yellow); color: var(--color-black); line-height: 1.05; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-intro-card__line--soft { font-family: var(--font-serif); font-size: var(--text-lg); font-size: clamp(var(--text-base), 5cqi, var(--text-2xl)); font-style: italic; font-weight: 500; line-height: 1.15; color: var(--color-white); }
.start-intro-card__cover .tp-ytfacade__play { position: absolute; z-index: 1; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: var(--size-16); height: var(--size-16); border-radius: var(--radius-full); background: var(--tb-brand-purple, var(--accent-tertiary)); box-shadow: var(--shadow-md); opacity: 1; transform: translate(-50%, -50%); transition: background var(--start-motion-normal, 350ms) ease, transform var(--start-motion-normal, 350ms) ease; pointer-events: none; }
.start-intro-card__cover .tp-ytfacade__play::before { content: ""; display: block; margin-left: var(--space-1); border-style: solid; border-width: var(--space-3) 0 var(--space-3) var(--space-5); border-color: transparent transparent transparent var(--color-white); }
@media (hover: hover) {
  .start-intro-card__cover:hover .tp-ytfacade__play { background: var(--tb-brand-purple-hover, var(--accent-tertiary)); transform: translate(-50%, -50%) scale(1.06); }
}
/* Narrow player (phones): smaller play button and tighter words, so the
   two lines clear the button inside a ~340px wide box. */
@container (max-width: 480px) {
  .start-intro-card__words { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
  .start-intro-card__cover .tp-ytfacade__play { width: var(--size-12); height: var(--size-12); }
  .start-intro-card__cover .tp-ytfacade__play::before { border-width: calc(var(--space-3) * .75) 0 calc(var(--space-3) * .75) calc(var(--space-5) * .75); }
}
/* Public homepage: the shared outer card treatment its neighbours wear
   (homepage-how.css, body.start-home:has(.wants-hero) ...). */
body.start-home:has(.wants-hero) :is(.start-intro-card, .start-ideas-card) { border-radius: var(--interface-radius); box-shadow: var(--shadow-drop); }

/* NEED IDEAS? and its proceed screen (Steven 2026-10-05) live in
   static/css/pages/ready-targets.css, which the card partial and the
   proceed page link; they share the tag above (.start-intro-card__pills /
   __tag) and the public homepage treatment just above. */

/* THE TEXT SPEAKS TO THE READER (Steven 2026-10-13). The note is one
   sentence now ("Your probability is about 26% before an agent starts
   working on it."), so it reserves no three lines; under it THE CONTEXT
   (Steven 2026-10-14 morning: "It used to say: you are at this, buying a car
   normally is easy, but not always, some context. I like '... more' rather
   than See details"): the estimator's own one or two sentences, or the
   kind's one line, with "... more" at its end folding the mission and the
   refined answers. setStartOddsNote in feed/start_home.html writes all of
   it. */
.start-home--odds-complete .start-card__odds-note.is-composed { min-height: 0; }
.start-card__odds-context,
.start-card__odds-details { display: none; justify-self: stretch; text-align: left; }
.start-card__odds-context { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-card__odds-why[hidden],
.start-card__odds-more[hidden] { display: none; }
.start-card__odds-more { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--accent-tertiary); font: inherit; font-weight: var(--font-semibold); white-space: nowrap; cursor: pointer; }
.start-card__odds-more:hover,
.start-card__odds-more:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.start-card__odds-details { gap: var(--space-3); margin: var(--space-3) 0 0; }
.start-home--odds-complete .start-card__odds-context:not([hidden]) { display: block; animation: start-result-slide-in var(--start-motion-normal) ease both; }
.start-home--odds-complete .start-card__odds-details:not([hidden]) { display: grid; animation: start-result-slide-in var(--start-motion-normal) ease both; }
.start-card__odds-reach { margin: 0; color: var(--slate); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-card__odds-reach .hl { padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-card__odds-answers { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-secondary); }
.start-card__odds-answers[hidden] { display: none; }
.start-card__odds-answers dt { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--font-bold); }
.start-card__odds-answers dt:first-child { margin-top: 0; }
.start-card__odds-answers dd { margin: 0; color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.start-hero__entry--min :is(.start-card__odds-context, .start-card__odds-details),
.start-hero__entry--docked:not(.start-hero__entry--expanded) :is(.start-card__odds-context, .start-card__odds-details) { display: none !important; }

/* REFINE CONTEXT OPENS UP A LITTLE (Steven 2026-10-13): a line of air above
   and below the chip and the toggle, and the questions slide in one at a
   time as skinny rows, a hairline between them. */
.start-card__post .start-card__refine-row { padding: var(--space-2) 0; }
.start-card__post .start-card__refine { gap: 0; margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-4); }
.start-card__refine .start-card__refine-q { gap: var(--space-2); padding: var(--space-3) 0; }
.start-card__refine .start-card__refine-q + .start-card__refine-q { border-top: 1px solid var(--border-subtle); }
.start-card__refine .start-card__refine-chip { min-height: var(--size-8); }
.start-card__refine .start-card__refine-input { min-height: var(--size-10); }
.start-card__refine.is-open .start-card__refine-q { animation: start-refine-in 420ms cubic-bezier(.2, .8, .2, 1) both; }
.start-card__refine.is-open .start-card__refine-q:nth-child(2) { animation-delay: 280ms; }
.start-card__refine.is-open .start-card__refine-q:nth-child(3) { animation-delay: 560ms; }
.start-card__refine.is-open .start-card__refine-q:nth-child(n+4) { animation-delay: 840ms; }
@keyframes start-refine-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .start-card__refine.is-open .start-card__refine-q,
  .start-home--odds-complete :is(.start-card__odds-context, .start-card__odds-details) { animation: none; }
}

/* THE ORDER READS (Steven 2026-10-14 morning: "Choose cost doesn't seem
   readable; I don't know that I have to select it"): a small "1" ring on
   Choose cost and a "2" on the Post row; Post reads "Set a budget to post",
   muted, until a cost is chosen (.is-waiting, syncPostButton in
   feed/start_home.html), then the brand green and "Post". A ring turns
   green once its step is done. */
.start-card__cost-head { display: inline-flex; align-items: center; gap: var(--space-2); }
.start-card__step-ring { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-6); height: var(--size-6); border: 2px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); line-height: 1; transition: background var(--start-motion-normal) ease, border-color var(--start-motion-normal) ease; }
.start-card__post:has(.start-card__cost-btn.is-selected) .start-card__cost-head > .start-card__step-ring,
.start-card__post-row:has(> .start-point__cta:not(.is-waiting)) > .start-card__step-ring { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--color-black); }
.start-card__post-row { display: flex; align-items: center; gap: var(--space-3); }
.start-card__post-row > .start-point__cta { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; }
.start-card__post .start-point__cta.is-waiting:disabled,
.start-card__post .start-point__cta.is-waiting:disabled:hover { border-color: var(--border-default); background: var(--surface-tertiary); color: var(--text-secondary); opacity: 1; box-shadow: none; cursor: default; }

/* AGENTS AVAILABLE ON THE BENCH, OFF THE CARD (Steven 2026-10-14 morning:
   "These agents should be off the card, not on it"): their own section
   under the card, shown with the one card. */
.start-card__bench { justify-self: stretch; width: 100%; margin-top: var(--space-6); }
.start-card__bench[hidden] { display: none; }
.start-card__bench > .tb-avail { margin: 0; }

/* THE CARD LOOKS LIKE THE DECK CARD (Steven 2026-10-14 morning, his shots
   of /start priced for "I want a car"; LAYOUT_CARDS, .start-hero__entry--
   cards). Once priced, the one card's shape (templates/cards/_card.html,
   static/cards/card.css): the want's words at the top of an art (the
   deck's night and the Toll Bench rings, a want's picture where one
   exists), the number, the move and the band at its foot, then the line
   alone (no grid rules, the dotted path to the target kept), the white
   panel below with the words, Choose cost and Post, no rule under the
   words and none above Choose cost. The pills stay as they are. The odds
   block gives its rows to the form's grid (display: contents) so the art
   can lie under exactly three of them: the words, the number, the line. */
.start-card__art { display: none; }
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-hero__form {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  isolation: isolate;
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__odds { display: contents; }
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__art {
  position: relative;
  z-index: -1;
  display: block;
  grid-column: 1;
  grid-row: 1 / 4;
  min-height: calc(var(--size-16) * 5);
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-6)) 0;
  overflow: hidden;
  border-radius: calc(var(--feed-card-radius) - 1px) calc(var(--feed-card-radius) - 1px) 0 0;
  background: radial-gradient(ellipse 90% 60% at 50% 62%, var(--color-dark-500) 0%, var(--color-dark-600) 42%, var(--color-dark-800) 78%, var(--color-dark-900) 100%);
  animation: start-art-in var(--start-motion-slow) ease both;
}
.start-card__art > .agent-art,
.start-card__art > .start-card__art-img,
.start-card__art > .start-card__art-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.start-card__art > .agent-art svg { display: block; width: 100%; height: 100%; transform: scale(1.18); }
.start-card__art > .start-card__art-img { object-fit: cover; }
.start-card__art > .start-card__art-shade {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-dark-900) 62%, transparent) 0%,
    color-mix(in srgb, var(--color-dark-900) 30%, transparent) 18%,
    transparent 34%,
    transparent 50%,
    color-mix(in srgb, var(--color-dark-900) 72%, transparent) 100%);
}
@keyframes start-art-in { from { opacity: 0; } to { opacity: 1; } }
/* the want's words at the top of the art */
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__want {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding: var(--space-6) 0 var(--space-4);
  color: var(--text-inverse);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-style: normal;
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__want .hl { padding: 0; background: none; color: inherit; }
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__want-icon { color: var(--color-yellow-400); }
/* the number, the move and the band at the foot of the art */
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__odds-head {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin: 0;
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__compact-face.probability-card .start-card__odds-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__compact-face.probability-card .start-card__odds-line > .start-card__odds-pill,
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__compact-face.probability-card .start-card__odds-line > .start-card__odds-numcol > .start-card__odds-pill {
  display: inline-flex;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--text-inverse);
  font-size: clamp(var(--size-10), 12vw, var(--text-5xl));
  letter-spacing: -0.04em;
  line-height: 1;
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__compact-face.probability-card .start-card__odds-line > .probability-card__context {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__odds-move {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__odds-move--flat { background: var(--btn-glass-bg); color: var(--text-inverse); }
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .probability-card__context > .probability-card__band {
  position: static;
  transform: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__odds-about {
  flex: 1 0 100%;
  color: color-mix(in srgb, var(--text-inverse) 80%, transparent);
  font-size: var(--text-base);
}
/* the line alone: no grid rules, the dotted path to the target kept */
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__trajectory {
  grid-column: 1;
  grid-row: 3;
  margin: var(--space-2) 0 0;
  padding-bottom: var(--space-5);
}
.start-hero__entry--cards .start-card__trajectory-grid { display: none; }
.start-hero__entry--cards .start-card__trajectory-target-path { stroke: color-mix(in srgb, var(--text-inverse) 55%, transparent); }
.start-hero__entry--cards .start-card__trajectory-dot { stroke: var(--color-dark-700); }
/* on the card's night: the number and the budget stacked, the move, the
   band and the caption beside them while there is room (the side's least
   width, the deck card's), else under them; the budget in the caption's
   type;
   the dot's words on the deck card's dark strip */
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__compact-face.probability-card .start-card__odds-line > .start-card__odds-numcol {
  flex: none;
  margin-right: 0;
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__compact-face.probability-card .start-card__odds-line > .probability-card__context {
  flex: 1 1 0;
  min-width: min(100%, calc(var(--size-32) + var(--size-10)));
}
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__odds-budget {
  color: color-mix(in srgb, var(--text-inverse) 80%, transparent);
  font-size: var(--text-base);
}
.start-hero__entry--cards .start-card__dotnote {
  background: color-mix(in srgb, var(--color-dark-900) 84%, transparent);
  color: color-mix(in srgb, var(--text-inverse) 86%, transparent);
  box-shadow: none;
}
.start-hero__entry--cards .start-card__dotnote strong { color: var(--text-inverse); }
.start-hero__entry--cards .start-card__trajectory-value,
.start-hero__entry--cards .start-card__trajectory-step-label--complete { fill: var(--text-inverse); }
.start-hero__entry--cards .start-card__trajectory-step-label,
.start-hero__entry--cards .start-card__trajectory-goal,
.start-hero__entry--cards .start-card__trajectory-scale-label { fill: color-mix(in srgb, var(--text-inverse) 72%, transparent); }
.start-hero__entry--cards .start-card__trajectory-target { fill: var(--color-yellow-400); }
.start-hero__entry--cards .start-card__trajectory-scale-line { stroke: color-mix(in srgb, var(--text-inverse) 45%, transparent); }
.start-hero__entry--cards .start-card__trajectory-scale-arrow { fill: color-mix(in srgb, var(--text-inverse) 45%, transparent); stroke: color-mix(in srgb, var(--text-inverse) 45%, transparent); }
/* the white panel: the words open it; no rule under them, none above Choose cost */
.start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__odds-label { margin-top: var(--space-5); }
.start-hero__entry--cards .start-card__post { margin-top: var(--space-5); padding-top: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .start-home--odds-complete .start-hero__entry--cards.start-hero__entry--expanded .start-card__art { animation: none; }
}

/* THE CARET LANDS ON THE LINE (Steven 2026-10-14 morning: "When I click
   into the text area, it doesn't click in; it sits high until I start to
   type"). The want box is one line tall plus its padding, set outright, so
   no engine centres an empty field and its placeholder its own way; the
   ring shows on the tap itself (:focus, not only :focus-visible); and while
   the box has focus the visitor deck's snap stands still, so the page does
   not move under the keyboard after the caret is drawn (the caret is put
   back on its line as the page settles: feed/start_home.html). */
.start-hero__form input[data-start-want] {
  height: var(--size-12);
  padding-block: calc((var(--size-12) - var(--size-6)) / 2 - 1px);
  line-height: var(--size-6);
}
.start-hero__form input[data-start-want]::placeholder { line-height: var(--size-6); }
body.start-home:not(.boh-home) .start-hero__form input[data-start-want]:focus {
  border-color: var(--tb-brand-purple);
  outline: 3px solid var(--tb-brand-purple);
  outline-offset: 2px;
}
body.start-home:not(.start-home--future) .start-home__page:has([data-visitor-deck]):has(input[data-start-want]:focus) { scroll-snap-type: none; }

/* NO TOLL BENCH PILL ON THE /start CARD (Steven 2026-10-14: "this card no
   longer needs the Toll Bench pill on the top left"; the site header above
   carries the wordmark). feed/start_home.html draws no .start-hero__chip
   on its hero now (.start-hero--no-chip), standalone and in the "Post a
   want" overlay, so the card's top gives back the room the pill's lower half
   took: its top padding matches its sides. The homepage heroes (wants.html,
   _toll_homepage_hero.html) keep their pill. */
.start-hero--toll-bench.start-hero--no-chip { padding-top: var(--space-5); }
body.start-home:not(.boh-home):not(.start-home--future) .start-hero--toll-bench.start-hero--no-chip:not(.wants-hero) { padding-top: var(--space-8); }
@media (max-width: 767px) {
  body.start-home:not(.boh-home):not(.start-home--future) .start-hero--toll-bench.start-hero--no-chip:not(.wants-hero) { padding-top: var(--space-6); }
}