/* StoryCards marketing pages */
/* Light is the base; dark applies via [data-theme="dark"], or the OS setting before theme.js has run */
:root {
    color-scheme: light;
    --ink: #16161A;
    --bg: #F5F2EC;
    --surface: #FFFFFF;
    --soft: #FBFAF7;
    --line: #E2DDD4;
    --line2: #D6D0C5;
    --row: #EEE9E0;
    --text2: #3D3C3A;
    --muted: #5B5A57;
    --link: #B8461A;
    --warm: #C4501F;
    --accent: #E8622C;
    --on-accent: #16161A;
    --edge: #16161A;
    --shadow: #16161A;
    --ok-bg: #E7F3EC;
    --ok-fg: #1A6849;
    --ok-dot: #1F7A55;
    --neu-bg: #F1EEE8;
    --row-active: #FDF1EA;
    --logo-face: #FFFFFF;
    --logo-stroke: #16161A;
    --btn-hover: #2c2c33;
    --phone: #16161A;
    --inv-bg: #16161A;
    --inv-fg: #F5F2EC;
    --inv-panel: #232328;
    --inv-line: #3A3A40;
    --ic-1: #FDE3D6;
    --ic-2: #E3E8FD;
    --ic-3: #E7F3EC;
    --ic-4: #F4EBD0;
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

/* Same palette as the app (styles.css) so both halves of the site switch together */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #F2EFE9;
    --bg: #141416;
    --surface: #1F1F23;
    --soft: #26262B;
    --line: #34343A;
    --line2: #4A4A52;
    --row: #2C2C32;
    --text2: #D6D1C7;
    --muted: #A8A39A;
    --link: #F08A5D;
    --warm: #F08A5D;
    --edge: #6A6A72;
    --shadow: #000000;
    --ok-bg: #173A2B;
    --ok-fg: #8FD3B0;
    --ok-dot: #8FD3B0;
    --neu-bg: #2C2C32;
    --row-active: #2E1F18;
    --logo-face: #2A2A30;
    --logo-stroke: #F2EFE9;
    --btn-hover: #D6D1C7;
    --phone: #34343A;
    --inv-bg: #0E0E10;
    --inv-fg: #F2EFE9;
    --inv-panel: #1F1F23;
    --inv-line: #34343A;
    --ic-1: #3A2418;
    --ic-2: #1E2438;
    --ic-3: #173A2B;
    --ic-4: #342E18;
}


@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --ink: #F2EFE9;
        --bg: #141416;
        --surface: #1F1F23;
        --soft: #26262B;
        --line: #34343A;
        --line2: #4A4A52;
        --row: #2C2C32;
        --text2: #D6D1C7;
        --muted: #A8A39A;
        --link: #F08A5D;
        --warm: #F08A5D;
        --edge: #6A6A72;
        --shadow: #000000;
        --ok-bg: #173A2B;
        --ok-fg: #8FD3B0;
        --ok-dot: #8FD3B0;
        --neu-bg: #2C2C32;
        --row-active: #2E1F18;
        --logo-face: #2A2A30;
        --logo-stroke: #F2EFE9;
        --btn-hover: #D6D1C7;
        --phone: #34343A;
        --inv-bg: #0E0E10;
        --inv-fg: #F2EFE9;
        --inv-panel: #1F1F23;
        --inv-line: #34343A;
        --ic-1: #3A2418;
        --ic-2: #1E2438;
        --ic-3: #173A2B;
        --ic-4: #342E18;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    line-height: 1.5;
}

a { color: var(--ink); }
a:hover { color: var(--link); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: 22px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .wrap { padding-top: 16px; padding-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.site-header .theme-toggle { margin-left: auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; flex: 1 1 auto; font-size: 15px; }
.site-nav a { text-decoration: none; padding: 10px 0; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; font-weight: 600; }
.btn-dark { text-decoration: none; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 15px; padding: 12px 18px; border-radius: 10px; }
.btn-dark:hover { color: var(--bg); background: var(--btn-hover); }

.logo-face { fill: var(--logo-face); stroke: var(--logo-stroke); }
.logo-accent { fill: var(--accent); stroke: var(--logo-stroke); }
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line2); background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle:hover { background: var(--surface); border-color: var(--edge); }

/* Buttons */
.btn-cta { display: inline-block; text-decoration: none; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 17px; padding: 16px 24px; border-radius: 12px; border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--shadow); }
.btn-cta:hover { color: var(--on-accent); transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--shadow); }
.btn-ghost { display: inline-block; text-decoration: none; font-weight: 600; font-size: 17px; padding: 16px 24px; border-radius: 12px; border: 2px solid var(--edge); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Type */
.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.eyebrow a { color: var(--muted); }
.lede { font-size: 19px; line-height: 1.55; color: var(--text2); max-width: 520px; }
.h1 { font-size: clamp(44px, 5.5vw, 72px); line-height: 0.98; letter-spacing: -0.02em; }
.h1.xl { font-size: clamp(48px, 6vw, 84px); line-height: 0.95; }
.h1 em { font-style: normal; color: var(--warm); }
.h2 { font-size: clamp(32px, 4vw, 48px); }
.fine { font-size: 14px; color: var(--muted); }
.stack { display: flex; flex-direction: column; }

/* Hero */
.hero { padding-top: 72px; padding-bottom: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; }
.hero.home { padding-top: 88px; }
.hero .copy { display: flex; flex-direction: column; gap: 22px; }

/* Mock cards */
.mock { background: var(--surface); border: 2px solid var(--edge); border-radius: 20px; box-shadow: 10px 10px 0 var(--shadow); overflow: hidden; }
.mock-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mock-bar b { font-weight: 600; }
.mock-body { padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; }
.mock.pad { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.chip-btn { border: 1px solid var(--line2); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-dot); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mock-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.badge { font-family: var(--font-mono); font-size: 12px; background: var(--ok-bg); color: var(--ok-fg); padding: 6px 10px; border-radius: 999px; }
.people { display: flex; flex-wrap: wrap; gap: 8px; }
.person { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 6px; font-size: 14px; }
.person.wait { border: 1px dashed var(--line2); color: var(--muted); }
.avatar { width: 24px; height: 24px; border-radius: 50%; color: var(--bg); font-size: 11px; display: grid; place-items: center; background: var(--ink); }
.avatar.neutral { background: var(--line); color: var(--text2); }
.mini-card { width: 14px; height: 18px; border-radius: 3px; background: var(--accent); border: 1.5px solid var(--edge); }
.deck { display: flex; flex-wrap: wrap; gap: 8px; }
.deck .c { font: inherit; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); width: 52px; height: 74px; border-radius: 10px; border: 1.5px solid var(--edge); background: var(--surface); display: grid; place-items: center; transition: transform 0.15s; }
.deck .c.on { color: var(--on-accent); background: var(--accent); transform: translateY(-8px); box-shadow: 0 6px 0 var(--shadow); }
button.c { cursor: pointer; min-height: 44px; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-solid { font: inherit; background: var(--ink); color: var(--bg); font-weight: 600; padding: 12px 18px; border-radius: 10px; border: 0; min-height: 44px; }
button.btn-solid { cursor: pointer; }
.btn-line { border: 1.5px solid var(--edge); font-weight: 600; padding: 12px 18px; border-radius: 10px; }
.note { font-size: 14px; color: var(--muted); }

.reveal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.reveal-grid div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.reveal-grid small { display: block; font-size: 13px; color: var(--muted); }
.reveal-grid strong { display: block; margin-top: 4px; font-size: 24px; font-weight: 600; }
.status-pills { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.status-pills span { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
.status-pills .wait { border: 1px dashed var(--line2); color: var(--muted); }
[hidden] { display: none !important; }

/* Bands */
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .wrap { padding-top: 72px; padding-bottom: 72px; }
.cols { display: grid; gap: 32px; }
.cols.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cols.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.col { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 3px solid var(--edge); }
.col h2, .col h3 { font-family: var(--font-body); font-size: 22px; font-weight: 600; letter-spacing: 0; }
.col p { line-height: 1.6; color: var(--text2); }
.col .num { font-family: var(--font-mono); font-size: 14px; color: var(--warm); }
.band h2.h2 { margin-bottom: 40px; }

.section { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 40px; }
.split { padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; }
.split p.body { font-size: 18px; line-height: 1.6; color: var(--text2); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.feature { text-decoration: none; background: var(--surface); border: 1.5px solid var(--edge); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.feature:hover { color: var(--ink); box-shadow: 4px 4px 0 var(--shadow); }
.feature .icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; border: 1.5px solid var(--edge); }
.feature .t { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.feature .b { font-size: 16px; line-height: 1.6; color: var(--text2); }
.ic-1 { background: var(--ic-1); } .ic-2 { background: var(--ic-2); } .ic-3 { background: var(--ic-3); } .ic-4 { background: var(--ic-4); }
.feature .more { font-weight: 600; font-size: 15px; color: var(--link); margin-top: auto; }

.dark { background: var(--inv-bg); color: var(--inv-fg); }
.dark .wrap { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center; }
.dark .eyebrow { color: #F08A5D; }
.dark h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1; }
.dark p.body { font-size: 18px; line-height: 1.6; color: #D6D1C7; }
.dark .panel { display: flex; flex-direction: column; gap: 16px; background: var(--inv-panel); border: 1px solid var(--inv-line); border-radius: 20px; padding: 28px; }
.dark .panel .cap { font-family: var(--font-mono); font-size: 12px; color: #B5AFA4; }
.vote-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--inv-line); }
.vote-row:last-child { border-bottom: 0; }
.vote-row b { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #F08A5D; }
.dpill { background: #16161A; color: #F2EFE9; border: 1px solid #55555C; border-radius: 10px; padding: 12px 16px; }
.dpill.mono { font-family: var(--font-mono); }
.dpill.go { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.dark .btn-go { align-self: flex-start; text-decoration: none; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16px; padding: 14px 22px; border-radius: 12px; }

/* Pricing teaser */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.price-card { background: var(--surface); border: 1.5px solid var(--line2); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.price-card.hot { border: 2px solid var(--edge); box-shadow: 6px 6px 0 var(--accent); }
.price-card .name { font-weight: 600; font-size: 18px; }
.price-card .amt { font-family: var(--font-display); font-weight: 800; font-size: 40px; }
.price-card .amt small { font-family: var(--font-body); font-size: 16px; font-weight: 500; }
.price-card p.d { color: var(--text2); line-height: 1.6; }

/* CTA band */
.cta-wrap { padding-top: 96px; padding-bottom: 96px; }
.cta-band { color: var(--on-accent); background: var(--accent); border: 2px solid var(--edge); border-radius: 24px; padding: clamp(32px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1; max-width: 640px; }
.cta-band a { text-decoration: none; background: var(--on-accent); color: #F5F2EC; font-weight: 600; font-size: 17px; padding: 18px 26px; border-radius: 12px; }
.cta-band a:hover { color: #F5F2EC; background: #2c2c33; }

/* More links */
.more-wrap { padding-bottom: 72px; display: flex; flex-direction: column; gap: 20px; }
.more-wrap h2 { font-family: var(--font-body); font-size: 20px; font-weight: 600; letter-spacing: 0; }
.more-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.more-links a { text-decoration: none; background: var(--surface); border: 1.5px solid var(--edge); border-radius: 14px; padding: 20px; font-weight: 600; }
.more-links a:hover { box-shadow: 4px 4px 0 var(--shadow); color: var(--ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: 15px; }
.site-footer .brandname { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer .tag { color: var(--muted); line-height: 1.6; max-width: 320px; margin-top: 8px; }
.site-footer .group { display: flex; flex-direction: column; gap: 8px; }
.site-footer .group .cap { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; }
.site-footer .group nav { flex-direction: column; gap: 8px; }

/* Specific mocks */
.copy-field { display: flex; gap: 8px; }
.copy-field .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line2); border-radius: 10px; padding: 12px; font-family: var(--font-mono); font-size: 13px; }
.copy-field .copy { background: var(--ink); color: var(--bg); border-radius: 10px; padding: 12px 14px; font-weight: 600; font-size: 14px; }
.go-btn { align-self: flex-start; color: var(--on-accent); background: var(--accent); border: 2px solid var(--edge); border-radius: 12px; padding: 12px 16px; font-weight: 600; }
.phone { background: var(--phone); border-radius: 32px; padding: 14px; width: 220px; flex: 0 0 auto; }
.phone-in { background: var(--bg); border-radius: 22px; padding: 22px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 320px; }
.phone-in .t { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.05; }
.phone-in label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.phone-in input { font: inherit; font-weight: 400; font-size: 15px; padding: 12px; border: 1.5px solid var(--edge); border-radius: 10px; background: var(--surface); }
.phone-in .join { margin-top: auto; text-align: center; color: var(--on-accent); background: var(--accent); border: 2px solid var(--edge); border-radius: 12px; padding: 13px; font-weight: 600; }
.sidebar-mock { background: var(--surface); border: 1.5px solid var(--edge); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.sidebar-mock .cap { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.sidebar-mock span.p { background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.sidebar-mock small { color: var(--muted); font-size: 13px; }
.story-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--row); }
.story-row.now { background: var(--row-active); }
.story-row:last-child { border-bottom: 0; }
.story-row .t { flex: 1; min-width: 0; }
.pill { font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; border-radius: 999px; flex: 0 0 auto; background: var(--neu-bg); color: var(--text2); }
.pill.done { background: var(--ok-bg); color: var(--ok-fg); }
.pill.now { background: var(--accent); color: var(--on-accent); }
.form-mock { background: var(--surface); border: 2px solid var(--edge); border-radius: 20px; box-shadow: 8px 8px 0 var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.form-mock .cap { font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.form-mock label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.form-mock input { font: inherit; font-weight: 400; font-size: 15px; padding: 12px; border: 1.5px solid var(--edge); border-radius: 10px; background: var(--surface); }
.form-mock fieldset { border: 0; display: flex; flex-direction: column; gap: 8px; }
.form-mock legend { font-size: 13px; font-weight: 600; padding-bottom: 6px; }
.form-mock .add { align-self: flex-start; border: 1.5px dashed var(--line2); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.form-mock .create { text-align: center; color: var(--on-accent); background: var(--accent); border: 2px solid var(--edge); border-radius: 12px; padding: 13px; font-weight: 600; }
.file-mock { padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; background: var(--soft); }
.file-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 14px; }
.file-table { background: var(--surface); border: 1.5px solid var(--line2); border-radius: 12px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
.file-table table { font-family: var(--font-mono); font-size: 14px; }
.file-table th { text-align: left; background: var(--soft); padding: 12px 20px; font-weight: 600; }
.file-table th:last-child, .file-table td:last-child { text-align: right; }
.file-table td { padding: 12px 20px; border-top: 1px solid var(--row); }

/* Pricing page */
.page-head { max-width: 920px; margin: 0 auto; padding: 72px 24px 40px; display: flex; flex-direction: column; gap: 18px; text-align: center; align-items: center; }
.page-head h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; }
.page-head p.lede { max-width: 560px; }
.plans { max-width: 920px; margin: 0 auto; padding: 24px 24px 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: stretch; }
.plan { background: var(--surface); border: 1.5px solid var(--line2); border-radius: 20px; padding: 36px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.plan.hot { border: 2px solid var(--edge); box-shadow: 8px 8px 0 var(--accent); }
.plan .tag { position: absolute; top: -14px; left: 36px; background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; border-radius: 999px; }
.plan .pname { font-weight: 600; font-size: 20px; }
.plan .amount { font-family: var(--font-display); font-weight: 800; font-size: 60px; line-height: 1; }
.plan .amount small { font-family: var(--font-body); font-size: 16px; font-weight: 500; }
.plan .amount.text { font-size: 40px; padding: 10px 0; }
.plan p.d { color: var(--text2); line-height: 1.55; }
.plan .pbtn { text-decoration: none; text-align: center; border: 2px solid var(--edge); border-radius: 12px; padding: 15px; font-weight: 600; }
.plan .pbtn.fill { background: var(--accent); color: var(--on-accent); }
.plan .pbtn.off { color: var(--muted); border-color: var(--line2); border-style: dashed; }
.plan ul { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.narrow-wrap { max-width: 920px; margin: 0 auto; padding: 72px 24px; display: flex; flex-direction: column; gap: 28px; }
.table-box { overflow-x: auto; border: 1.5px solid var(--edge); border-radius: 16px; }
.table-box table { min-width: 520px; font-size: 15px; }
.table-box thead tr { background: var(--ink); color: var(--bg); text-align: left; }
.table-box th, .table-box td { padding: 14px 20px; }
.table-box thead th { padding: 16px 20px; font-weight: 600; }
.table-box tbody tr { border-top: 1px solid var(--row); }
.table-box tbody th { text-align: left; font-weight: 500; }
.faq { max-width: 900px; margin: 0 auto; padding: 80px 24px; display: flex; flex-direction: column; gap: 12px; }
.faq h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 12px; }
.faq details { background: var(--surface); border: 1.5px solid var(--edge); border-radius: 14px; padding: 18px 22px; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin-top: 12px; line-height: 1.6; color: var(--text2); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Hero voting demo (driven by js/hero-demo.js) */
.mock .person, .mock .mini-card, .mock .badge, .mock .btn-solid { transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s; }
.mock .person.pop { animation: pop 0.35s ease-out; }
.mock .mini-card[hidden] { display: none; }
.mock .mini-card.revealed { width: auto; min-width: 22px; height: 24px; padding: 0 6px; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1; color: var(--on-accent); background: var(--accent); animation: flip 0.45s ease-out; }
.mock .mini-card.revealed::after { content: attr(data-v); }
.mock .btn-solid.press { transform: translateY(2px) scale(0.97); }
.mock .badge.done { background: var(--accent); color: var(--on-accent); }
@keyframes pop { 50% { transform: scale(1.06); } }
@keyframes flip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }