/*
 * mead.now — hand-written CSS, no build step, no framework.
 *
 * Two surfaces share this file:
 *   .public  the marketing page — warm, generous, meant to persuade
 *   the app   dense, quiet, meant to be worked in for hours
 *
 * They share the palette and type scale so the product does not feel like two
 * different pieces of software once someone signs in.
 *
 * The palette is honey and oak: it suits mead and wine equally, and it keeps the
 * one saturated colour (honey) available for emphasis, which a compliance tool
 * needs for warnings that must actually be read.
 */

:root {
    /* Oak — structure and dark surfaces */
    --oak-900: #201710;
    --oak-800: #2e2117;
    --oak-700: #45311f;
    --oak-600: #5a3f27;
    --oak: #6b4b2a;
    --oak-soft: #8a6a45;

    /* Honey — the single accent */
    --honey: #e0a848;
    --honey-bright: #f2c675;
    --honey-pale: #f7ead3;
    --honey-wash: #fdf6e9;

    /* Neutrals */
    --ink: #1c2026;
    --ink-mid: #454d59;
    --ink-soft: #6b7481;
    --line: #e2e5ea;
    --line-warm: #e8ddcb;
    --panel: #ffffff;
    --bg: #f6f7f9;
    --cream: #fdf9f2;

    /* Semantic */
    --good: #1c7048;
    --good-bg: #e7f5ed;
    --bad: #a3251f;
    --bad-bg: #fceceb;
    --warn: #8a5804;
    --warn-bg: #fdf2dd;
    --info: #1a5687;
    --info-bg: #eaf2fa;

    --shadow-sm: 0 1px 2px rgba(32, 23, 16, .06), 0 1px 3px rgba(32, 23, 16, .04);
    --shadow-md: 0 4px 6px -1px rgba(32, 23, 16, .07), 0 2px 4px -2px rgba(32, 23, 16, .05);
    --shadow-lg: 0 12px 24px -8px rgba(32, 23, 16, .16), 0 4px 8px -4px rgba(32, 23, 16, .08);
    --shadow-xl: 0 24px 48px -12px rgba(32, 23, 16, .26);

    /* A serif for display type. System stack, so no webfont request and no
       layout shift — and it reads as craft rather than SaaS. */
    --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--oak); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

/*
 * `narrow` constrains the TEXT, not the container. Shrinking the container would
 * indent the section heading relative to every other section, and that
 * inconsistent left edge is instantly visible when scrolling the page.
 */
.wrap.narrow > * { max-width: 74ch; }
.wrap.narrow.center > * { margin-left: auto; margin-right: auto; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--oak-900); color: #fff; padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* =====================================================================
   MARKETING PAGE
   ===================================================================== */

body.public { background: var(--panel); }

/* ---- Site header ---- */
.site-head {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line-warm);
}
.site-head-inner { display: flex; align-items: center; gap: 20px; height: 66px; }
.site-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--serif); font-size: 19px; font-weight: 600;
    color: var(--oak-900); text-decoration: none; letter-spacing: -.01em;
}
.site-mark { display: block; border-radius: 7px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.site-nav a { color: var(--ink-mid); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.site-nav a:hover { color: var(--oak); }
.site-nav a.btn { color: #fff; }

/* ---- Hero ---- */
.hero {
    position: relative;
    background:
        radial-gradient(1000px 500px at 78% -8%, rgba(224, 168, 72, .20), transparent 60%),
        linear-gradient(168deg, var(--oak-900) 0%, var(--oak-800) 48%, var(--oak-700) 100%);
    color: var(--honey-pale);
    overflow: hidden;
}
/* Honeycomb, very faint — texture, not decoration you notice. */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cg fill='none' stroke='%23e0a848' stroke-opacity='.10' stroke-width='1.2'%3E%3Cpath d='M28 1 51 14v26L28 53 5 40V14z'/%3E%3Cpath d='M28 49 51 62v26L28 101 5 88V62z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .55;
    pointer-events: none;
}
.hero-inner { position: relative; padding: 80px 24px 88px; display: grid; gap: 52px; align-items: center; }
@media (min-width: 940px) {
    /* Give the copy the wider column: the headline is the whole pitch and it
       should not break across four lines to make room for the mock. */
    .hero-inner { grid-template-columns: 1.12fr .88fr; padding: 96px 24px 104px; }
}

/* The eyebrow keeps its own 22px gap when it stands alone; inside the stack the
   wrapper owns that spacing so the note can sit tight under the pill. */
.eyebrow-stack { margin: 0 0 22px; }
.eyebrow-stack .eyebrow { margin-bottom: 8px; }
/* Subdued on purpose — sentence case against the pill's uppercase, dimmer than
   the lede, no border. It should read as an aside, not a second headline. */
.eyebrow-note {
    margin: 0; font-size: 12.5px; line-height: 1.5;
    color: rgba(247, 234, 211, .52); letter-spacing: .01em;
}
.eyebrow {
    display: inline-block; margin: 0 0 22px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--honey);
    padding: 6px 13px; border: 1px solid rgba(224, 168, 72, .38); border-radius: 999px;
    background: rgba(224, 168, 72, .09);
}
.hero h1 {
    font-family: var(--serif); font-weight: 600;
    /* Capped at 52px: bigger overflows the copy column and the headline starts
       wrapping mid-phrase, which reads as broken rather than bold. */
    font-size: clamp(35px, 4.3vw, 52px); line-height: 1.1; letter-spacing: -.02em;
    margin: 0 0 20px; color: #fff; text-wrap: balance;
}
.hero h1 .accent { color: var(--honey-bright); font-style: italic; }
.lede {
    font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.62;
    color: rgba(247, 234, 211, .84); margin: 0 0 32px; max-width: 34em;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 26px; }
.hero-foot { font-size: 13.5px; color: rgba(247, 234, 211, .6); margin: 0; }

/* ---- Hero visual: the thesis, shown rather than described ---- */
.hero-visual { position: relative; }
.mock {
    background: var(--panel); border-radius: 13px; box-shadow: var(--shadow-xl);
    overflow: hidden; color: var(--ink);
}
.mock + .mock { margin-top: 16px; }
.mock-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    background: var(--cream);
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--oak);
}
.mock-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--honey); }
.mock-body { padding: 12px 14px; }
.mock-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--line);
}
.mock-row:last-child { border-bottom: 0; }
.mock-row .date { color: var(--ink-soft); font-size: 11.5px; font-family: var(--mono); white-space: nowrap; }
.mock-row .what { flex: 1; color: var(--ink); }
.mock-row .amt { font-family: var(--mono); font-size: 12.5px; color: var(--ink-mid); white-space: nowrap; }
.mock-row .ln {
    font-family: var(--mono); font-size: 10.5px; color: var(--oak);
    background: var(--honey-wash); border: 1px solid var(--line-warm);
    padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.mock-row.total { border-top: 2px solid var(--line-warm); border-bottom: 0; margin-top: 4px; padding-top: 8px; font-weight: 700; }

.mock-arrow {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 14px 0; color: var(--honey);
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.mock-arrow::before, .mock-arrow::after {
    content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(224, 168, 72, .5), transparent);
}

/* ---- Bands ---- */
.band { padding: 84px 0; }
.band > .wrap > h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(27px, 3.4vw, 38px); line-height: 1.16; letter-spacing: -.018em;
    margin: 0 0 14px; color: var(--oak-900);
}
.band-lede { font-size: 17px; color: var(--ink-mid); margin: 0 0 40px; max-width: 60ch; line-height: 1.62; }
/* Text-only bands: 40px under the lede leaves an orphaned gap before the next
   paragraph. Grids need the room; prose does not. */
.wrap.narrow .band-lede { margin-bottom: 20px; }
.band.center .band-lede { margin-left: auto; margin-right: auto; }
.band-tint { background: var(--cream); border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); }
.band-problem { background: var(--bg); border-bottom: 1px solid var(--line); }
.band h3 { font-size: 16.5px; font-weight: 650; color: var(--oak-900); margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.band p { color: var(--ink-mid); line-height: 1.65; }

/* ---- Problem grid ---- */
.problem-grid > div {
    background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--honey);
    border-radius: 10px; padding: 22px 22px 20px; box-shadow: var(--shadow-sm);
}
.problem-grid p { margin: 0; font-size: 14.5px; }

/* ---- Steps ---- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.steps li {
    position: relative; background: var(--panel);
    border: 1px solid var(--line); border-radius: 12px;
    padding: 30px 26px 26px; box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}
.steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.step-num {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; margin-bottom: 16px;
    border-radius: 10px; background: var(--oak-900); color: var(--honey-bright);
    font-family: var(--serif); font-size: 19px; font-weight: 700;
}
.steps p { margin: 0; font-size: 14.5px; }
.steps em { color: var(--oak); font-style: normal; font-weight: 600; }

/* ---- Feature grid ---- */
.feature-grid { gap: 22px; }
.feature {
    background: var(--panel); border: 1px solid var(--line-warm); border-radius: 12px;
    padding: 26px 24px; box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--honey); }
.feature h3 { display: flex; align-items: flex-start; gap: 10px; }
.feature h3::before {
    content: ''; flex: none; width: 8px; height: 8px; margin-top: 7px;
    border-radius: 2px; background: var(--honey); transform: rotate(45deg);
}
.feature p { margin: 0; font-size: 14.5px; }

/* Audience cards in the "Is this for you?" strip carry a link under the copy, so
   they need the paragraph gap that .feature p deliberately removes. */
.feature .feature-link { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.feature .feature-link a { color: var(--oak); text-decoration: none; }
.feature .feature-link a:hover { text-decoration: underline; }

/* The three audience cards hold different amounts of copy, so their links landed
   at three different heights and the row read as ragged. Flex column plus an auto
   top margin pins every link to the bottom of its card, whatever the copy does. */
.audience-grid .feature { display: flex; flex-direction: column; }
.audience-grid .feature-link { margin-top: auto; padding-top: 14px; }

/* The primary audience, marked so the strip reads as "meaderies, and also these
   two" rather than three equal options. Honey border and wash instead of a size
   change, so the grid stays even and nothing reflows on narrow screens. */
.feature-primary {
    border-color: var(--honey); background: var(--honey-wash);
    box-shadow: var(--shadow-md);
}
.feature-primary:hover { box-shadow: var(--shadow-lg); }

/* ---- Honest limits: confident, not apologetic ---- */
.band-honest { background: var(--oak-900); color: rgba(247, 234, 211, .82); }
.band-honest > .wrap > h2 { color: #fff; }
.band-honest .band-lede { color: rgba(247, 234, 211, .66); }
.honest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.honest-list li {
    padding: 16px 18px; font-size: 14.5px; line-height: 1.62;
    border-left: 2px solid rgba(224, 168, 72, .45);
    background: rgba(255, 255, 255, .035);
    border-radius: 0 8px 8px 0;
}
.honest-list strong { color: var(--honey-bright); font-weight: 650; }

/* ---- Closing CTA ---- */
.band-cta {
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(224, 168, 72, .16), transparent 65%),
        var(--oak-800);
    color: rgba(247, 234, 211, .84);
}
.band-cta > .wrap > h2 { color: #fff; }
.band-cta .band-lede { color: rgba(247, 234, 211, .7); margin-bottom: 30px; }

/* ---- Legal pages: long-form prose, optimised for actually being read ---- */
.legal { padding-top: 56px; }
.legal h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(30px, 3.6vw, 40px); letter-spacing: -.018em; margin: 0 0 6px;
    color: var(--oak-900);
}
.legal-meta { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 30px; }
.legal h2 {
    font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -.012em;
    color: var(--oak-900); margin: 38px 0 12px; padding-top: 18px;
    border-top: 1px solid var(--line-warm);
}
.legal h3 {
    font-size: 15.5px; font-weight: 650; color: var(--oak); margin: 24px 0 8px;
    text-transform: none; letter-spacing: 0;
}
.legal p, .legal li { font-size: 15px; line-height: 1.72; color: var(--ink-mid); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); }
.legal code {
    font-family: var(--mono); font-size: 13px; background: var(--honey-wash);
    border: 1px solid var(--line-warm); border-radius: 4px; padding: 1px 5px;
}
.legal-callout {
    background: var(--cream); border: 1px solid var(--line-warm);
    border-left: 4px solid var(--honey); border-radius: 0 9px 9px 0;
    padding: 18px 20px; margin: 0 0 30px;
}
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout-warn { background: var(--warn-bg); border-color: #e3c894; border-left-color: var(--warn); }
.legal-table { margin: 0 0 22px; font-size: 14px; }
.legal-table th { color: var(--ink-soft); }
.legal-table td { line-height: 1.6; color: var(--ink-mid); }
.legal-table td:first-child { white-space: nowrap; }
.legal-foot {
    margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line-warm);
    font-size: 14px;
}

/* ---- Site footer ---- */
.site-foot { background: var(--oak-900); color: rgba(247, 234, 211, .5); padding: 46px 0; font-size: 13.5px; border-top: 1px solid rgba(224, 168, 72, .18); }
.site-foot-brand { font-family: var(--serif); font-size: 17px; color: var(--honey-pale); margin: 0 0 10px; }
.site-foot-attrib { color: rgba(247, 234, 211, .72); }
.site-foot-attrib strong { color: var(--honey); font-weight: 650; }
.site-foot p { margin: 0 0 10px; max-width: 74ch; line-height: 1.6; }
.site-foot a { color: var(--honey); }

/* =====================================================================
   APPLICATION
   ===================================================================== */

.topbar { background: var(--oak-900); color: #fff; }
.topbar-inner { display: flex; align-items: center; gap: 12px; height: 58px; }
.brand { color: #fff; font-family: var(--serif); font-weight: 600; font-size: 17.5px; text-decoration: none; }
.brand-type {
    font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
    background: rgba(224, 168, 72, .18); color: var(--honey-bright);
    padding: 3px 9px; border-radius: 999px;
}
.topbar-right { margin-left: auto; display: flex; gap: 18px; }
.topbar-right a { color: rgba(247, 234, 211, .78); text-decoration: none; font-size: 14px; }
.topbar-right a:hover { color: #fff; }

.mainnav { background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.mainnav .wrap { display: flex; gap: 2px; flex-wrap: wrap; }
.mainnav a {
    padding: 13px 14px; color: var(--ink-soft); text-decoration: none;
    font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--ink); background: var(--cream); }
.mainnav a.active { color: var(--oak); border-bottom-color: var(--honey); font-weight: 650; }
.nav-divider { padding: 13px 6px; color: var(--line); user-select: none; }

.main { padding: 26px 24px 10px; }
.foot { padding: 22px 24px 34px; color: var(--ink-soft); font-size: 12.5px; }

/* ---- Typography ---- */
h1 { font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 5px; }
h2 { font-size: 17px; font-weight: 650; margin: 0 0 11px; }
h3 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.sub { color: var(--ink-mid); font-size: 13.5px; margin: 0 0 18px; line-height: 1.6; max-width: 90ch; }
.muted { color: var(--ink-soft); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- Panels ---- */
.panel {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 10px; padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.panel-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h1, .panel-head h2 { margin: 0; }
.panel-head .spacer { margin-left: auto; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---- Stat tiles ---- */
.stat {
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 15px 17px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--honey);
}
.stat .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 600; }
.stat .value { font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: -.02em; }
.stat .unit { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.stat .note { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 650; }
tbody tr:hover { background: var(--cream); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-tight th, .table-tight td { padding: 7px 8px; }
tr.subtotal td { background: var(--honey-wash); font-weight: 650; }
tr.subtotal:hover td { background: var(--honey-pale); }
tr.zero td { color: #a6adb6; }
tr.manual td { background: #fbfaf6; }

/* ---- Forms ---- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.field .hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }
input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--line);
    border-radius: 7px; font: inherit; background: #fff; color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: #c9cfd7; }
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--oak);
    box-shadow: 0 0 0 3px rgba(224, 168, 72, .28);
}
.field-inline { display: flex; align-items: center; gap: 9px; }
.field-inline input[type=checkbox] { width: auto; accent-color: var(--oak); }
.field-inline label { margin: 0; font-weight: 500; }
.form-row { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 0 0 18px; background: var(--panel); }
legend { font-size: 12px; font-weight: 700; padding: 0 7px; color: var(--oak); text-transform: uppercase; letter-spacing: .06em; }

/* ---- Buttons ---- */
.btn {
    display: inline-block; padding: 9px 17px; border-radius: 7px;
    border: 1px solid var(--oak); background: var(--oak); color: #fff;
    font-size: 14px; font-weight: 600; font-family: inherit;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--oak-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn-large { padding: 13px 26px; font-size: 15.5px; border-radius: 8px; }
.hero .btn { background: var(--honey); border-color: var(--honey); color: var(--oak-900); }
.hero .btn:hover { background: var(--honey-bright); border-color: var(--honey-bright); }
.hero .btn-secondary, .band-cta .btn-secondary {
    background: transparent; color: var(--honey-pale); border-color: rgba(247, 234, 211, .4);
}
.hero .btn-secondary:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.band-cta .btn { background: var(--honey); border-color: var(--honey); color: var(--oak-900); }
.band-cta .btn:hover { background: var(--honey-bright); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--cream); color: var(--oak); border-color: var(--line-warm); }
.btn-danger { background: #fff; color: var(--bad); border-color: #e8c3c1; }
.btn-danger:hover { background: var(--bad-bg); }
.btn-small { padding: 5px 11px; font-size: 12.5px; }
.actions { display: flex; gap: 11px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
form.inline { display: inline; }

/* ---- Pills ---- */
.pill {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
    font-weight: 650; background: #edeff2; color: var(--ink-soft); white-space: nowrap;
}
.pill-good { background: var(--good-bg); color: var(--good); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-muted { background: #edeff2; color: var(--ink-soft); }

/* ---- Alerts ---- */
.alert { padding: 13px 16px; border-radius: 9px; margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; line-height: 1.6; }
.alert ul { margin: 7px 0 0; padding-left: 20px; }
.alert li { margin-bottom: 4px; }
.alert-good { background: var(--good-bg); border-color: #bfe1cd; color: #144f33; }
.alert-bad { background: var(--bad-bg); border-color: #ecc4c2; color: #7c1c17; }
.alert-warn { background: var(--warn-bg); border-color: #e6ceA0; color: #6b4503; }
.alert-info { background: var(--info-bg); border-color: #c4d9ee; color: #154569; }

.verify-banner {
    background: var(--warn-bg); border: 1px solid #e3c894; border-left: 4px solid var(--honey);
    border-radius: 9px; padding: 16px 18px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.62;
}
.verify-banner strong { color: #6b4503; }
.verify-banner ul { margin: 9px 0 0; padding-left: 20px; }
.verify-banner li { margin-bottom: 5px; }

.line-note { font-size: 12px; color: var(--ink-soft); margin-top: 4px; max-width: 62ch; }
details.verify summary { cursor: pointer; font-size: 12px; color: var(--info); margin-top: 3px; }
details.verify summary:hover { color: var(--oak); }
details.verify p { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; max-width: 72ch; line-height: 1.55; }

/* ---- Timeline ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { border-left: 2px solid var(--line); padding: 0 0 18px 18px; position: relative; }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
    content: ''; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--honey); border: 2px solid var(--panel);
    box-shadow: 0 0 0 1px var(--line-warm);
}
.timeline .when { font-size: 11.5px; color: var(--ink-soft); font-family: var(--mono); }
.timeline .what { font-weight: 600; }
.timeline .detail { font-size: 13px; color: var(--ink-mid); }

.empty { text-align: center; padding: 38px 20px; color: var(--ink-soft); }
.empty p { margin: 0 0 15px; }

/* ---- Print: the report has to survive being printed ---- */
@media print {
    .topbar, .mainnav, .actions, .foot, .btn, .site-head, .site-foot { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .panel { border-color: #999; box-shadow: none; break-inside: avoid; }
    .verify-banner { border: 2px solid #000; background: #fff; }
    details.verify { display: none; }
    a { text-decoration: none; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .steps li:hover, .feature:hover, .btn:hover { transform: none; }
}