/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom · enrichment: Tier A CSS-art shelf · nav: N9 · footer: Ft6
 * vibe: "morning bathroom shelf, matcha, milk glass, quiet"
 * paper oklch(97.6% 0.012 118) · accent oklch(47% 0.12 148) matcha
 * fonts: Fraunces (display, roman) + Be Vietnam Pro (body)
 * axes: light / high-contrast-serif / chromatic-green
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 */

:root {
    color-scheme: light;

    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

    --color-paper: oklch(97.6% 0.012 118);
    --color-paper-2: oklch(94.6% 0.022 124);
    --color-paper-3: oklch(90.5% 0.032 128);
    --color-surface: oklch(99.2% 0.005 118);
    --color-ink: oklch(25% 0.035 152);
    --color-ink-2: oklch(38% 0.03 150);
    --color-ink-3: oklch(47% 0.025 148);
    --color-rule: oklch(85% 0.028 130);
    --color-accent: oklch(47% 0.12 148);
    --color-accent-hover: oklch(41% 0.11 150);
    --color-accent-active: oklch(37% 0.1 150);
    --color-on-accent: oklch(98.5% 0.01 120);
    --color-accent-wash: oklch(90% 0.075 135);
    --color-focus: oklch(42% 0.13 150);
    --color-danger: oklch(48% 0.16 27);
    --color-danger-hover: oklch(42% 0.15 27);

    --color-use-wash: oklch(91.5% 0.065 138);
    --color-use-ink: oklch(36% 0.09 145);
    --color-wait-wash: oklch(93.5% 0.07 92);
    --color-wait-ink: oklch(40% 0.08 70);
    --color-buy-wash: oklch(92.5% 0.04 28);
    --color-buy-ink: oklch(43% 0.11 28);

    --color-glass-sage: oklch(87% 0.055 140);
    --color-glass-milk: oklch(96.5% 0.01 100);
    --color-glass-amber: oklch(82% 0.08 72);
    --color-glass-rose: oklch(88% 0.05 22);
    --color-glass-sky: oklch(90% 0.035 230);
    --color-liquid-green: oklch(72% 0.11 135);
    --color-liquid-amber: oklch(64% 0.13 62);
    --color-liquid-milk: oklch(91% 0.02 95);
    --color-liquid-sky: oklch(78% 0.06 230);
    --color-lip: oklch(49% 0.14 32);
    --color-cap: oklch(30% 0.03 150);
    --color-cap-gold: oklch(76% 0.08 85);
    --color-shelf: oklch(86% 0.035 92);
    --color-shelf-edge: oklch(77% 0.045 82);
    --color-shadow: oklch(25% 0.035 152 / 0.08);
    --color-glass-shine: oklch(100% 0 0 / 0.35);

    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 7rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.375rem;
    --text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    --text-display: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
    --text-sign: clamp(4rem, 2rem + 9vw, 9rem);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --rule: 1px solid var(--color-rule);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 150ms;
    --dur-med: 320ms;
}

/* ---------- Base ---------- */

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

html, body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.skip {
    position: absolute;
    left: var(--space-md);
    top: -100px;
    z-index: 10;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: var(--radius-sm);
}
.skip:focus { top: var(--space-md); }

.display,
.heading,
.close-line,
.close-sign,
.tally-value,
.ledger-head,
.choice-title,
.plan-title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    overflow-wrap: anywhere;
    min-width: 0;
    text-wrap: balance;
}

.display {
    font-size: var(--text-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 13ch;
}

.heading {
    font-size: var(--text-2xl);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.lead {
    font-size: var(--text-lg);
    color: var(--color-ink-2);
    max-width: 38ch;
}

.body-copy {
    color: var(--color-ink-2);
    max-width: 44ch;
}

.muted, .scope, .fine, .demo-note { color: var(--color-ink-3); }
.scope, .fine { font-size: var(--text-sm); max-width: 46ch; }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--space-lg);
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    font: 600 var(--text-base) / 1 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-hover); }
.btn--accent:active { background: var(--color-accent-active); }

.btn--ink { background: var(--color-ink); color: var(--color-paper); min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--ink:hover { background: var(--color-ink-2); }

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

/* ---------- Masthead (N9 edge-aligned) ---------- */

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-lg) var(--gutter);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    white-space: nowrap;
}
.wordmark img { width: 36px; height: 36px; }

.masthead-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.link-quiet {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-2);
    text-underline-offset: 4px;
    white-space: nowrap;
}
.link-quiet:hover { color: var(--color-ink); }

/* ---------- Split Studio ---------- */

.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-3xl);
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-4xl) var(--gutter) 0;
}

.split--hero {
    align-items: start;
    padding-top: var(--space-2xl);
}

.split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split--flip .split-text { order: 2; }
.split--flip .split-proof { order: 1; }

.split-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}
.split--hero .split-text { padding-top: var(--space-xl); position: sticky; top: var(--space-lg); }

.split-proof { min-width: 0; }

.brand-pair {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);
}

.store-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    counter-reset: step;
    max-width: 44ch;
}
.steps li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-sm);
    color: var(--color-ink-2);
    counter-increment: step;
}
.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent-wash);
    color: var(--color-use-ink);
    font: 600 var(--text-sm) / 1 var(--font-body);
}

/* ---------- Demo ---------- */

.demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--color-paper-2);
    border-radius: var(--radius-lg);
}

.demo-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    line-height: 1.2;
}

.demo-block { display: flex; flex-direction: column; gap: var(--space-xs); }

.demo-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-2);
}

.demo-note { font-size: var(--text-xs); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.chip {
    min-height: 40px;
    padding: 0 var(--space-md);
    border: 1.5px solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font: 500 var(--text-sm) / 1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-ink-3); }
.chip[aria-pressed="true"] {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-paper);
}

/* The shelf: two rows of four on a pale board. */
.shelf {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-lg);
    padding: var(--space-md) 0 0;
}

.shelf-item {
    display: grid;
    grid-template-rows: 112px auto auto auto;
    justify-items: center;
    padding: 0 var(--space-2xs);
    text-align: center;
}

.shelf-item .vessel {
    align-self: end;
    margin-top: 0;
    transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}

/* the board under each row of vessels */
.shelf-item::before {
    content: "";
    grid-row: 2;
    justify-self: stretch;
    height: 9px;
    margin: 0 calc(var(--space-2xs) * -1) var(--space-xs);
    background: var(--color-shelf);
    border-bottom: 3px solid var(--color-shelf-edge);
}
.shelf-item .vessel { grid-row: 1; }

.shelf-name {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}
.shelf-state {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--color-ink-3);
}

.shelf[data-active] .shelf-item:not(.is-match) > * { opacity: 0.38; }
.shelf-item > * { transition: opacity var(--dur-med) var(--ease-out); }
.shelf-item.is-match .vessel { transform: translateY(-8px); }
.shelf-item.is-match .shelf-name { color: var(--color-accent); }

.demo-result { min-height: 7.5rem; }

.result { display: flex; flex-direction: column; gap: var(--space-xs); }
.result-summary { font-weight: 600; }
.result-matches { display: flex; flex-direction: column; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.result-matches strong { color: var(--color-ink); }
.result-missing { font-size: var(--text-sm); color: var(--color-ink-3); }

.decisions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
}

.decision {
    min-height: 48px;
    padding: 0 var(--space-sm);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font: 600 var(--text-sm) / 1.2 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.decision:active { transform: translateY(1px); }
.decision--use { background: var(--color-use-wash); color: var(--color-use-ink); }
.decision--wait { background: var(--color-wait-wash); color: var(--color-wait-ink); }
.decision--buy { background: var(--color-buy-wash); color: var(--color-buy-ink); }
.decision:hover, .decision[aria-pressed="true"] { border-color: currentColor; }

.decision-outcome {
    min-height: 3em;
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}

/* ---------- Vessels (pure CSS art) ---------- */

.vessel {
    --glass: var(--color-glass-milk);
    --liquid: var(--color-liquid-milk);
    --level: 60;
    --w: 40px;
    --h: 60px;
    position: relative;
    display: block;
    width: var(--w);
    height: var(--h);
    margin-top: 32px;
    border-radius: 8px 8px 6px 6px;
    background: linear-gradient(to top, var(--liquid) calc(var(--level) * 1%), var(--glass) 0);
    box-shadow: inset 4px 0 0 var(--color-glass-shine);
}
.vessel::before, .vessel::after { content: ""; position: absolute; left: 50%; translate: -50% 0; }

.vessel--dropper { --glass: var(--color-glass-amber); --liquid: var(--color-liquid-amber); --level: 50; --w: 38px; --h: 54px; }
.vessel--dropper::before { top: -10px; width: 18px; height: 10px; background: var(--color-cap-gold); border-radius: 2px; }
.vessel--dropper::after { top: -30px; width: 12px; height: 20px; background: var(--color-cap); border-radius: 6px 6px 3px 3px; }

.vessel--tall { --glass: var(--color-glass-sage); --liquid: var(--color-liquid-green); --level: 70; --w: 34px; --h: 84px; border-radius: 12px 12px 6px 6px; }
.vessel--tall::before { top: -12px; width: 20px; height: 12px; background: var(--color-cap); border-radius: 3px 3px 0 0; }

.vessel--tube { --glass: var(--color-surface); --liquid: var(--color-accent-wash); --level: 25; --w: 40px; --h: 70px; border-radius: 2px; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); overflow: visible; }
.vessel--tube::before { top: 0; width: 100%; height: 6px; background: var(--color-rule); }
.vessel--tube { box-shadow: none; }

.vessel--lipstick { --glass: var(--color-cap); --liquid: var(--color-cap); --w: 24px; --h: 38px; border-radius: 3px; box-shadow: none; }
.vessel--lipstick::before { top: -24px; width: 16px; height: 24px; background: var(--color-lip); border-radius: 2px; clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%); }
.vessel--lipstick::after { top: 0; width: 24px; height: 5px; background: var(--color-cap-gold); }

.vessel--pump { --level: 55; --w: 42px; --h: 66px; border-radius: 10px; }
.vessel--pump::before { top: -14px; width: 12px; height: 14px; background: var(--color-cap); }
.vessel--pump::after { top: -20px; width: 24px; height: 7px; background: var(--color-cap); border-radius: 3px; translate: -30% 0; }

.vessel--jar { --level: 55; --w: 58px; --h: 34px; border-radius: 6px 6px 10px 10px; }
.vessel--jar::before { top: -14px; width: 62px; height: 14px; background: var(--color-cap-gold); border-radius: 4px; }

.vessel--square { --glass: var(--color-glass-sky); --liquid: var(--color-liquid-sky); --level: 100; --w: 38px; --h: 48px; border-radius: 6px; }
.vessel--square::before { top: -18px; width: 24px; height: 18px; background: var(--color-cap); border-radius: 9px 9px 2px 2px; }

.vessel--wand { --glass: var(--color-glass-rose); --liquid: var(--color-lip); --level: 60; --w: 18px; --h: 62px; border-radius: 4px; }
.vessel--wand::before { top: -26px; width: 18px; height: 26px; background: var(--color-cap); border-radius: 3px 3px 0 0; }

.vessel--plain { --glass: var(--color-glass-milk); --liquid: var(--color-paper-3); --level: 40; --w: 36px; --h: 64px; border-radius: 14px 14px 6px 6px; }
.vessel--plain::before { top: -12px; width: 16px; height: 12px; background: var(--color-ink-3); border-radius: 3px 3px 0 0; }

/* ---------- Choices ---------- */

.choice-list {
    display: flex;
    flex-direction: column;
    border-top: var(--rule);
}

.choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-lg) 0;
    border-bottom: var(--rule);
    color: var(--color-ink-2);
}

.choice-title { font-size: var(--text-xl); line-height: 1.25; color: var(--color-ink); margin-bottom: var(--space-2xs); }

.choice-mark {
    width: 44px;
    height: 44px;
    margin-top: var(--space-3xs);
    border-radius: var(--radius-pill);
}
.choice--use .choice-mark { background: var(--color-use-wash); box-shadow: inset 0 0 0 10px var(--color-use-wash), inset 0 0 0 44px var(--color-use-ink); }
.choice--wait .choice-mark { background: linear-gradient(to bottom, var(--color-wait-ink) 50%, var(--color-wait-wash) 0); }
.choice--buy .choice-mark { background: var(--color-buy-wash); border: 2px solid var(--color-buy-ink); border-radius: var(--radius-md); }

/* ---------- Shelf scan ---------- */

.scan {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.scan-photo {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: var(--space-xs);
    padding: var(--space-xl) var(--space-lg) 0;
    background: linear-gradient(to top, var(--color-shelf-edge) 0 4px, var(--color-shelf) 4px 16px, var(--color-paper-3) 16px);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
}

.scan-box {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    padding: var(--space-xs) var(--space-xs) 0;
    margin-bottom: 16px;
    outline: 1.5px dashed var(--color-use-ink);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.scan-box .vessel { margin-top: 32px; }
.scan-box--ask { outline-color: var(--color-wait-ink); position: relative; }
.scan-box--ask::after {
    content: "?";
    position: absolute;
    top: -12px;
    right: -12px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-wait-ink);
    color: var(--color-wait-wash);
    font: 600 var(--text-sm) / 1 var(--font-body);
}

.scan-title { font-weight: 600; margin-bottom: var(--space-xs); }

.scan-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: var(--rule);
    font-size: var(--text-sm);
}
.scan-list li:first-child { border-top: var(--rule); }

.tag {
    flex-shrink: 0;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}
.tag--ok { background: var(--color-use-wash); color: var(--color-use-ink); }
.tag--ask { background: var(--color-wait-wash); color: var(--color-wait-ink); }
.tag--example { background: var(--color-paper-3); color: var(--color-ink-2); }

/* ---------- Summary tally ---------- */

.tally {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 420px;
    padding: var(--space-xl);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px var(--color-shadow), 0 12px 32px var(--color-shadow);
}

.tally-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-2);
}

.tally-value {
    font-size: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tally-rows { display: flex; flex-direction: column; }
.tally-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: var(--rule);
    font-size: var(--text-sm);
}
.tally-row::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    order: -1;
}
.tally-row span:first-child { flex: 1; }
.tally-row--use::before { background: var(--color-use-ink); }
.tally-row--wait::before { background: var(--color-wait-ink); }
.tally-row--buy::before { background: var(--color-buy-ink); }
.num { font-variant-numeric: tabular-nums; font-weight: 600; }

.tally-caveat { font-size: var(--text-xs); color: var(--color-ink-3); }

/* ---------- Ledger (full-width break) ---------- */

.ledger, .faq {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-4xl) var(--gutter) 0;
}

.ledger .heading { margin-bottom: var(--space-xl); max-width: 18ch; }

.ledger-list { border-top: 2px solid var(--color-ink); }
.ledger-list li {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-3xl);
    padding: var(--space-lg) 0;
    border-bottom: var(--rule);
    color: var(--color-ink-2);
}
.ledger-head { font-size: var(--text-xl); line-height: 1.3; color: var(--color-ink); }

/* ---------- Plans ---------- */

.plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 2px solid var(--color-ink);
}

.plan { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; }
.plan + .plan { padding-left: var(--space-lg); border-left: var(--rule); }
.plan-title { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.plan--plus .plan-title { color: var(--color-accent); }

.plan li {
    position: relative;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}
.plan li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 10px;
    height: 2px;
    background: var(--color-accent);
}

/* ---------- FAQ ---------- */

.faq { max-width: 880px; }
.faq .heading { margin-bottom: var(--space-lg); }

.faq-item { border-bottom: var(--rule); }
.faq-item:first-of-type { border-top: var(--rule); }

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    font-weight: 600;
    font-size: var(--text-lg);
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-accent);
    transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 var(--space-lg); color: var(--color-ink-2); max-width: 62ch; }

/* ---------- Letter close (Ft6) ---------- */

.close {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: min(100% - 2 * var(--gutter), 1240px - 2 * var(--gutter));
    margin: var(--space-4xl) auto 0;
    padding: var(--space-3xl) 0 var(--space-xl);
    border-top: 2px solid var(--color-ink);
}

.close-line {
    font-size: var(--text-2xl);
    line-height: 1.2;
    max-width: 22ch;
}

.close-sign {
    font-size: var(--text-sign);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-accent);
    padding-bottom: 0.08em;
}

.close-gloss { color: var(--color-ink-3); font-size: var(--text-sm); }

.close-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: var(--rule);
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}
.close-meta a { white-space: nowrap; text-underline-offset: 4px; }
.close-meta a:hover { color: var(--color-ink); }

/* ---------- Documents & forms (legal, account deletion) ---------- */

.doc {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    max-width: 72ch;
    margin: 0 auto;
    padding: var(--space-2xl) var(--gutter) 0;
    box-sizing: content-box;
}

.doc-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-ink);
}

.doc-title { max-width: 24ch; }

.doc-meta { font-size: var(--text-sm); color: var(--color-ink-3); }

.doc-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    color: var(--color-ink-2);
}
.doc-section strong { color: var(--color-ink); }

.doc-heading {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: var(--text-xl);
    line-height: 1.3;
    color: var(--color-ink);
    text-wrap: balance;
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.doc-list li {
    position: relative;
    padding-left: var(--space-lg);
}
.doc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 10px;
    height: 2px;
    background: var(--color-accent);
}

.notice {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.notice--wait { background: var(--color-wait-wash); color: var(--color-wait-ink); }
.notice--buy { background: var(--color-buy-wash); color: var(--color-buy-ink); }

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 30rem;
}

.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field-label { font-size: var(--text-sm); font-weight: 600; }

.input {
    min-height: 48px;
    padding: 0 var(--space-md);
    border: 1.5px solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    font: 400 var(--text-base) / 1.4 var(--font-body);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-ink-3); }
.input:hover { border-color: var(--color-ink-3); }
.input:focus-visible { outline-offset: 1px; border-color: var(--color-focus); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }

.field-error { font-size: var(--text-sm); color: var(--color-danger); }

.btn--block { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: var(--space-xs); }

.btn--danger { background: var(--color-danger); color: var(--color-on-accent); }
.btn--danger:hover { background: var(--color-danger-hover); }

.close--compact {
    margin-top: var(--space-4xl);
    padding-top: 0;
    border-top: 0;
}
.close--compact .close-meta { margin-top: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .split,
    .split--flip {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2xl);
        padding-top: var(--space-3xl);
    }
    .split--flip .split-text { order: 1; }
    .split--flip .split-proof { order: 2; }
    .split--hero { padding-top: var(--space-md); }
    .split--hero .split-text { padding-top: 0; position: static; }
    .ledger, .faq { padding-top: var(--space-3xl); }
    .close { margin-top: var(--space-3xl); }
}

@media (max-width: 640px) {
    .demo { padding: var(--space-lg) var(--space-md); }
    .ledger-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
    .plans { grid-template-columns: minmax(0, 1fr); }
    .plan { padding-right: 0; }
    .plan + .plan { padding-left: 0; border-left: 0; border-top: var(--rule); }
}

@media (max-width: 520px) {
    .decisions { grid-template-columns: minmax(0, 1fr); }
    .shelf-state { display: none; }
    .shelf-name { font-size: 0.6875rem; }
    .shelf-item { padding: 0 1px; }
    .shelf { row-gap: var(--space-md); }
    .vessel { scale: 0.85; transform-origin: bottom center; }
    .shelf-item { grid-template-rows: 96px auto auto auto; }
    .scan-photo { padding-inline: var(--space-sm); }
    .masthead .link-quiet { font-size: var(--text-xs); }
    .wordmark { font-size: var(--text-lg); }
    .wordmark img { width: 30px; height: 30px; }
}

@media (max-width: 400px) {
    /* keep the mark, hide the name visually; it stays the link's accessible name */
    .wordmark span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .masthead .btn--ink { padding: 0 var(--space-sm); }
    .masthead-actions { gap: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
    .shelf-item.is-match .vessel { transform: none; }
}