/* =========================================================================
   FlourDesk marketing site
   =========================================================================

   Palette is taken from the logo rather than invented: the mark is a navy F
   beside a coral D, so navy is the ground and coral is the one accent. That
   also keeps the platform's own site visually unmistakable from a baker's
   shopfront, which is warm and terracotta by default.

   Type pairs a didone display face with a plain grotesque and a mono. The
   wordmark is a high-contrast serif, so Bodoni Moda carries the headlines in
   the same voice; Public Sans does the reading; DM Mono handles dates, prices,
   windows and counts. That last one is not decoration - in this product the
   week, the pickup window and the order count are the actual objects, and
   giving them a tabular face is how they stay readable.

   Contrast was checked with the app's own App\Support\Color:
     paper on ink-deep 16.7:1 · muted on paper 5.0:1 · coral on ink-deep 6.0:1
     ink-deep on coral 6.0:1  · coral-text on paper 4.6:1
   White on coral is only 3.0:1, which is why filled coral buttons take a navy
   label rather than a white one.
   ========================================================================= */

:root {
    /* ---- colour ---- */
    --ink: #0c213b;
    --ink-deep: #071627;
    --ink-soft: #172c47;
    --ink-line: #24395a;

    --coral: #ea705b;
    --coral-lift: #f08a77;
    --coral-text: #cf351a;      /* the only coral that clears AA on paper */

    --paper: #f7f5f2;
    --panel: #ffffff;
    --panel-warm: #fbf9f6;
    --rule: #e4dfd8;
    --rule-strong: #d3ccc1;
    --muted: #5d6b7e;
    --muted-dark: #93a3b8;      /* muted, for use on navy */

    /* Component borders. Both clear 3:1 against their ground, so a control is
       identifiable by its outline and not only by its label. */
    --edge-light: #7d8b9c;      /* 3.19:1 on paper */
    --edge-dark: #5f7794;       /* 3.95:1 on ink-deep, 3.51:1 on ink */

    /* ---- semantic tokens: LIGHT ground is the default ----
       Components below reference only these, never the raw colours above.
       That indirection is the fix for a whole bug class: previously the dark
       overrides were keyed to .band--navy/.band--deep, so .hero, .page-head
       and .site-footer - dark, but not bands - silently kept the light
       palette and painted navy text onto navy. */
    --fg: var(--ink);
    --fg-muted: var(--muted);
    --fg-accent: var(--coral-text);
    --surface: var(--panel);
    --surface-line: var(--rule);
    --edge: var(--edge-light);
    --outline-hover-bg: var(--panel);

    /* ---- type ---- */
    --display: "Bodoni Moda", "Playfair Display", Georgia, serif;
    --body: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --step-hero: clamp(2.85rem, 6.6vw, 5.5rem);
    --step-xl: clamp(2.1rem, 4.2vw, 3.4rem);
    --step-l: clamp(1.5rem, 2.6vw, 2.05rem);
    --step-m: clamp(1.18rem, 1.7vw, 1.4rem);
    --step-body-l: 1.1875rem;
    --step-body: 1.0625rem;
    --step-sm: 0.9375rem;
    --step-micro: 0.75rem;

    /* ---- space ---- */
    --gap-xs: 0.5rem;
    --gap-sm: 0.875rem;
    --gap: 1.375rem;
    --gap-lg: 2.25rem;
    --gap-xl: 3.5rem;
    --band-y: clamp(4rem, 8vw, 7.5rem);

    --wrap: 1140px;
    --wrap-prose: 720px;
    --radius: 14px;
    --radius-sm: 9px;
}

/* ---- reset ---------------------------------------------------------- */

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

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

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

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

img { max-width: 100%; height: auto; display: block; }

a { color: var(--fg-accent); text-underline-offset: 3px; }

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

/* Skip link: first tab stop, invisible until focused. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.15rem;
    z-index: 100;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---- layout --------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.wrap-prose { max-width: var(--wrap-prose); }

/* Bands own all vertical rhythm. Nothing inside a band sets its own section
   padding, which is what stops two rules fighting over the same gap. */
.band { padding-block: var(--band-y); }
.band--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.band--navy { background: var(--ink); }
.band--deep { background: var(--ink-deep); }
.band--panel { background: var(--panel); }
.band--ruled { border-top: 1px solid var(--surface-line); }

/* ---- DARK GROUNDS --------------------------------------------------- */
/*
   EVERY dark-background container must be listed here. A dark section that is
   missing from this list inherits the light palette and renders navy on navy -
   which is how the hero's secondary link ended up at 1.12:1, readable only
   once hover painted a light background behind it.

   tests/Feature/MarketingContrastTest keeps this list honest: it fails if a
   known dark container is not registered, and it re-derives every pairing
   below through App\Support\Color.
*/
.hero,
.band--navy,
.band--deep,
.page-head,
.site-footer {
    --fg: var(--paper);
    --fg-muted: var(--muted-dark);
    --fg-accent: var(--coral);
    --surface: var(--ink-soft);
    --surface-line: var(--ink-line);
    --edge: var(--edge-dark);
    --outline-hover-bg: var(--ink-soft);

    color: var(--fg);
}

/* ---- type ----------------------------------------------------------- */

.eyebrow {
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-accent);
    margin: 0 0 var(--gap-sm);
    display: block;
}

.display {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

.h1 { font-size: var(--step-hero); }
.h2 { font-size: var(--step-xl); line-height: 1.06; }
.h3 { font-size: var(--step-l); line-height: 1.12; }
.h4 {
    font-family: var(--body);
    font-weight: 650;
    font-size: var(--step-m);
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0;
}

.lede {
    font-size: var(--step-body-l);
    line-height: 1.6;
    color: var(--fg-muted);
    margin: var(--gap) 0 0;
    max-width: 56ch;
    text-wrap: pretty;
}

.muted { color: var(--fg-muted); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- buttons -------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--body);
    font-size: var(--step-sm);
    font-weight: 650;
    line-height: 1;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Navy label, not white: white on coral is 3.0:1 and fails AA. */
.btn--primary { background: var(--coral); color: var(--ink-deep); }
.btn--primary:hover { background: var(--coral-lift); color: var(--ink-deep); }

.btn--outline {
    background: transparent;
    border-color: var(--edge);
    color: var(--fg);
}
/* Hover deepens an already-legible control; it is never what makes the label
   appear in the first place. */
.btn--outline:hover { border-color: var(--fg); background: var(--outline-hover-bg); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-soft); color: var(--paper); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin-top: var(--gap-lg);
}

/* ---- header --------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Solid first: where color-mix is unsupported the header stays opaque
       rather than falling back to transparent and losing its text. */
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--surface-line);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--gap);
    min-height: 76px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 186px; height: auto; }

.nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.nav a {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--step-sm);
    font-weight: 500;
    padding: 0.5rem 0.72rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.nav a:hover { background: rgb(12 33 59 / 0.07); }

/* The current page is marked with a coral underline rather than a colour
   change, so it stays legible and does not read as a different kind of link. */
.nav a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--coral);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-divider {
    width: 1px;
    height: 24px;
    background: var(--edge);
    margin-inline: 0.5rem;
    flex: none;
}

/* Log in is a nav link, not a button: bakers arrive looking for it, and it
   should not compete with the one thing the page is asking a visitor to do. */
.nav-login { font-weight: 600; }

.nav-cta {
    padding: 0.68rem 1.15rem !important;
    background: var(--ink);
    color: var(--paper) !important;
    border-radius: 999px !important;
    font-weight: 650;
}
.nav-cta:hover { background: var(--ink-soft) !important; }

.nav-toggle {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 1.5px solid var(--edge);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (max-width: 940px) {
    .brand img { width: 158px; }
    .nav a { padding: 0.5rem 0.55rem; font-size: 0.9rem; }
    .nav-divider { margin-inline: 0.25rem; }
}

@media (max-width: 820px) {
    /* JS adds .has-js, so with scripting off the nav simply stays stacked and
       visible rather than becoming unreachable behind a dead button. */
    .has-js .nav-toggle { display: block; }
    .has-js .nav {
        display: none;
        position: absolute;
        inset: 76px 0 auto;
        /* The containing block is .wrap's padding box, so cancel that padding
           to let the panel meet the screen edges instead of floating inside it. */
        margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--gap-sm) clamp(1.25rem, 4vw, 2.5rem) var(--gap);
        background: var(--paper);
        border-bottom: 1px solid var(--surface-line);
        box-shadow: 0 22px 40px -28px rgb(7 22 39 / 0.5);
    }
    .has-js .nav[data-open="true"] { display: flex; }
    .nav a { padding: 0.8rem 0.5rem; font-size: var(--step-body); }
    .nav-divider { display: none; }
    .nav-cta { margin-top: var(--gap-xs); text-align: center; justify-content: center; }
    .header-inner { position: relative; }
}

/* ---- hero ----------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--ink-deep);
    color: var(--paper);
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
}

/* One warm bloom behind the headline, sized off the mark's coral. Keeps the
   navy from reading as flat corporate blue. */
.hero::before {
    content: "";
    position: absolute;
    top: -32%;
    right: -14%;
    width: min(760px, 82vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgb(234 112 91 / 0.26), transparent 62%);
    pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
}

.hero .h1 { color: var(--fg); }

/* The headline's final phrase carries the coral, so the accent lands on the
   word that states the outcome rather than on decoration. */
.hero-accent { color: var(--coral); font-style: italic; }

.hero-note {
    margin: var(--gap-lg) 0 0;
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.06em;
    color: var(--muted-dark);
}

/* ---- the drop rail (signature) -------------------------------------- */
/*
   A baker's week is the product's core object: one open day, a pickup window,
   a cap, and orders filling it. The rail shows exactly that, which makes the
   hero a demonstration rather than an illustration.
*/

.rail {
    background: var(--ink-soft);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    box-shadow: 0 40px 70px -50px rgb(0 0 0 / 0.9);
}

.rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    margin-bottom: var(--gap);
}

.rail-shop {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--paper);
}

.rail-status {
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-deep);
    background: var(--coral);
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
}

.rail-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
}

.rail-day {
    text-align: center;
    padding: 0.6rem 0.2rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: rgb(255 255 255 / 0.035);
}

.rail-day span {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-dark);
}

.rail-day strong {
    display: block;
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--paper);
    margin-top: 0.28rem;
}

.rail-day--bake {
    border-color: var(--ink-line);
    background: rgb(255 255 255 / 0.07);
}

.rail-day--drop {
    background: var(--coral);
    border-color: var(--coral);
}
.rail-day--drop span { color: rgb(7 22 39 / 0.72); }
.rail-day--drop strong { color: var(--ink-deep); }

.rail-marks {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.rail-mark {
    text-align: center;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-dark);
    min-height: 1.1rem;
}
.rail-mark--drop { color: var(--coral); }

.rail-foot {
    margin-top: var(--gap);
    padding-top: var(--gap);
    border-top: 1px solid var(--ink-line);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-sm);
}

.rail-stat span {
    display: block;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted-dark);
}

.rail-stat strong {
    display: block;
    font-family: var(--mono);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--paper);
    margin-top: 0.2rem;
}
.rail-stat strong em { font-style: normal; color: var(--coral); }

.rail-fill {
    margin-top: var(--gap);
    height: 5px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.09);
    overflow: hidden;
}
.rail-fill i {
    display: block;
    height: 100%;
    width: 82%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--coral), var(--coral-lift));
    transform-origin: left center;
    animation: rail-fill 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@keyframes rail-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ---- pillars -------------------------------------------------------- */

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 860px) {
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
}

.card {
    background: var(--surface);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 2.6vw, 2rem);
}

.card--warm { background: var(--panel-warm); }

.card-mark {
    width: 38px;
    height: 38px;
    margin-bottom: var(--gap);
    opacity: 0.95;
}

.card p { margin: var(--gap-xs) 0 0; color: var(--fg-muted); }
.card .h4 + p { margin-top: 0.6rem; }

.section-head { max-width: 60ch; margin-bottom: var(--gap-xl); }
.section-head .lede { margin-top: var(--gap-sm); }

/* ---- steps (a real sequence, so it is numbered) --------------------- */

.steps { display: grid; gap: 1px; background: var(--surface-line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--surface-line); }

.step {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--gap);
    background: var(--panel);
    padding: clamp(1.5rem, 3vw, 2.15rem);
    align-items: start;
}

.step-n {
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.12em;
    color: var(--fg-accent);
    padding-top: 0.4rem;
}

.step p { margin: 0.55rem 0 0; color: var(--fg-muted); max-width: 62ch; }

@media (max-width: 640px) {
    .step { grid-template-columns: 1fr; gap: var(--gap-xs); }
    .step-n { padding-top: 0; }
}

/* ---- feature rows --------------------------------------------------- */

.rows { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

.row-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}
@media (max-width: 860px) { .row-split { grid-template-columns: 1fr; } }

.row-split p { color: var(--fg-muted); margin: var(--gap-sm) 0 0; max-width: 54ch; }

/* ---- ticket (used for the "paid directly" proof) -------------------- */

.ticket {
    background: var(--surface);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius);
    padding: clamp(1.35rem, 2.6vw, 1.85rem);
    font-family: var(--mono);
    font-size: var(--step-sm);
}

.ticket-line {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding: 0.55rem 0;
}
.ticket-line + .ticket-line { border-top: 1px dashed var(--surface-line); }

.ticket-line b { font-weight: 500; }
.ticket-line--total { border-top-style: solid !important; }
.ticket-em { color: var(--fg-accent); }

/* ---- pricing -------------------------------------------------------- */

.tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    align-items: start;
}
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }

.tier {
    background: var(--panel);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius);
    padding: clamp(1.6rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tier--feature { border-color: var(--ink); box-shadow: 0 30px 60px -45px rgb(12 33 59 / 0.55); }

.tier-name {
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.tier-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: var(--gap-sm) 0 0;
}
.tier-amount {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.6rem, 5vw, 3.4rem);
    line-height: 1;
}
.tier-per { font-family: var(--mono); font-size: var(--step-sm); color: var(--fg-muted); }

.tier-list { list-style: none; margin: var(--gap-lg) 0 0; padding: 0; display: grid; gap: 0.7rem; }
.tier-list li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.6rem; font-size: var(--step-sm); }
.tier-list i { color: var(--fg-accent); font-style: normal; line-height: 1.6; }
.tier-foot { margin-top: auto; padding-top: var(--gap-lg); }
.tier-foot .btn { width: 100%; justify-content: center; }

/* ---- placeholder marker --------------------------------------------- */
/*
   Anything still waiting on real copy or a real decision is marked in the page
   itself, not just in a comment, so a review can see at a glance what is not
   finished yet.
*/

/* A real, customer-facing "not yet" chip.
   Distinct from .todo below, which is an internal drafting badge in warning
   amber. Telling a visitor a feature is coming is a product statement and
   should look like one; wearing the same color as an unfinished-work marker
   made the whole page read as a draft. */
.soon {
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--surface);
    border: 1px solid var(--surface-line);
    color: var(--fg-muted);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    white-space: nowrap;
    vertical-align: middle;
}

.todo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #fdf1d8;
    color: #7a5a12;
    border: 1px dashed #d8b45f;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    vertical-align: middle;
}
.todo-block {
    border: 1px dashed #d8b45f;
    background: #fdf9ef;
    border-radius: var(--radius-sm);
    padding: var(--gap) var(--gap-lg);
    margin: var(--gap) 0 0;
}
.todo-block > :first-child { margin-top: 0; }
.todo-block > :last-child { margin-bottom: 0; }

/* ---- legal documents ------------------------------------------------ */

/* Dates and version stamp. Small, but the first thing anyone checks when they
   need to know which edition they are reading. */
.legal-meta {
    margin: 0 0 var(--gap-lg);
    padding-bottom: var(--gap);
    border-bottom: 1px solid var(--surface-line);
    color: var(--fg-muted);
    font-size: var(--step-sm);
    line-height: 1.7;
}
.legal-meta dt {
    display: inline;
    font-weight: 650;
    color: var(--fg);
}
.legal-meta dd { display: inline; margin: 0 var(--gap) 0 0.35rem; }
.legal-meta dd::after { content: ""; }

/* The all-caps warranty and liability sections. Their emphasis is the
   document's own and is left alone; this only stops a wall of capitals
   rendering at full body size on a phone, where it becomes unreadable. */
.prose .legal-caps { font-size: 0.94em; letter-spacing: 0.01em; }

@media (max-width: 40rem) {
    .legal-meta dd { display: block; margin: 0 0 0.35rem; }
    .legal-meta dt { display: block; }
}

/* ---- prose (legal, about, faq) -------------------------------------- */

.prose { max-width: var(--wrap-prose); }
.prose h2 { font-family: var(--display); font-weight: 700; font-size: var(--step-l); line-height: 1.15; margin: var(--gap-xl) 0 var(--gap-xs); }
.prose h3 { font-family: var(--body); font-weight: 650; font-size: var(--step-m); margin: var(--gap-lg) 0 var(--gap-xs); }
.prose p { margin: var(--gap-sm) 0 0; color: var(--fg-muted); }
.prose ul, .prose ol { margin: var(--gap-sm) 0 0; padding-left: 1.25rem; color: var(--fg-muted); }
.prose li { margin: 0.4rem 0; }
.prose > :first-child { margin-top: 0; }

/* ---- faq ------------------------------------------------------------ */

.faq { border-top: 1px solid var(--surface-line); }

.faq details {
    border-bottom: 1px solid var(--surface-line);
}

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: clamp(1.1rem, 2.2vw, 1.5rem) 2.5rem clamp(1.1rem, 2.2vw, 1.5rem) 0;
    font-weight: 600;
    font-size: var(--step-m);
    position: relative;
    color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: "+";
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: 1.35rem;
    color: var(--fg-accent);
    transition: rotate 0.2s ease;
}
.faq details[open] summary::after { content: "\2013"; }

.faq-body { padding: 0 2.5rem var(--gap-lg) 0; }
.faq-body p { margin: 0 0 var(--gap-xs); color: var(--fg-muted); max-width: 66ch; }
.faq-body > :last-child { margin-bottom: 0; }

/* ---- contact -------------------------------------------------------- */

.field { display: block; margin-bottom: var(--gap); }
.field > span {
    display: block;
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 0.45rem;
}
.field input, .field textarea, .field select {
    width: 100%;
    font: inherit;
    font-size: var(--step-body);
    color: var(--ink);
    background: var(--panel);
    border: 1.5px solid var(--edge);
    border-radius: var(--radius-sm);
    padding: 0.8rem 0.9rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--coral); }

.notice {
    border-radius: var(--radius-sm);
    padding: var(--gap-sm) var(--gap);
    margin-bottom: var(--gap-lg);
    font-size: var(--step-sm);
    border: 1px solid;
}
.notice--ok { background: #e8f2ea; border-color: #bcd9c8; color: #2c5c42; }
.notice--bad { background: #fbeae7; border-color: #eec6bf; color: #8e3423; }

/* Honeypot: present for a bot, gone for everyone else. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- cta band ------------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band .lede { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* ---- footer --------------------------------------------------------- */

.site-footer {
    background: var(--ink-deep);
    color: var(--fg-muted);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2.25rem;
    font-size: var(--step-sm);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

.footer-brand img { width: 168px; }
.footer-brand p { margin: var(--gap) 0 0; max-width: 34ch; }

.footer-col h2 {
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    margin: 0 0 var(--gap-sm);
    font-weight: 400;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: var(--fg-muted); text-decoration: none; }
.footer-col a:hover { color: var(--fg); text-decoration: underline; }

.footer-bottom {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: var(--gap);
    border-top: 1px solid var(--ink-line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm) var(--gap);
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.04em;
}
.footer-bottom a { color: var(--fg-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--fg); }

/* ---- page header (inner pages) -------------------------------------- */

.page-head {
    background: var(--ink);
    padding-block: clamp(3rem, 6vw, 4.75rem);
}
.page-head .h1 { font-size: var(--step-xl); }


/* ---- the Utilities add-on write-up ------------------------------------
   Its own block below the tiers rather than crammed into a card: it is the
   part of the offer that needs explaining, and a tier list cannot explain
   anything. Tokens only, so it flips with the theme like everything else. */
.utilities {
    max-width: 60ch;
    margin: 44px auto 0;
    padding: 28px 30px;
    border: 1px solid var(--edge-light);
    border-radius: 14px;
    background: var(--panel);
}
.utilities-head { margin: 0 0 10px; font-size: clamp(22px, 3vw, 28px); }
.utilities-lede { margin: 0 0 22px; font-size: 17px; line-height: 1.6; }
.utilities-sub {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 26px 0 8px; font-size: 18px;
}
.utilities p { margin: 0 0 14px; line-height: 1.65; }
.utilities > p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
    .utilities { padding: 22px 20px; margin-top: 32px; }
}

/* The legal entity, set apart from the story it follows. Semantic tokens, so
   it follows whichever ground the band sets rather than assuming a light one. */
.about-entity {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--surface-line);
    font-size: 15px;
    color: var(--fg-muted);
}

/* ---- pricing comparison --------------------------------------------- *
   The calculator and the terms table, on /pricing/compare.

   Light ground only, deliberately: every other section on this page is
   .band or .band--panel, so nothing here needs registering in the
   dark-ground rule and nothing can inherit the wrong palette. Colours come
   from the semantic tokens for the same reason.

   The bars are decorative. Every figure they represent is printed beside
   them in tabular mono, so the page does not ask anyone to read a length.
 * --------------------------------------------------------------------- */

.calc {
    background: var(--surface);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.calc-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap) var(--gap-lg);
    padding-bottom: var(--gap);
    border-bottom: 1px solid var(--surface-line);
}

.calc-field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--gap-xs); }

.calc-field label {
    font-weight: 650;
    font-size: var(--step-sm);
}

.calc-value {
    font-size: var(--step-m);
    font-weight: 650;
    color: var(--fg-accent);
}

.calc-field input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    accent-color: var(--coral);
    /* A visible track even before the thumb is found, and a hit area that
       clears the 44px touch guidance on a phone. */
    min-height: 2.75rem;
}

.calc-orders {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--step-sm);
}

.calc-rows {
    list-style: none;
    margin: var(--gap-lg) 0 0;
    padding: 0;
    display: grid;
    gap: var(--gap-sm);
}

.calc-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 10rem;
    align-items: center;
    gap: var(--gap);
    padding: var(--gap-sm) var(--gap);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius-sm);
}

/* Ours, marked by weight and a warm ground rather than by colour alone. */
.calc-row--ours {
    background: var(--panel-warm);
    border-color: var(--edge);
    box-shadow: inset 3px 0 0 var(--coral);
}

.calc-name { font-weight: 650; }
.calc-row--ours .calc-name { color: var(--fg-accent); }

.calc-bar {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--surface-line);
    overflow: hidden;
}

.calc-fill {
    display: block;
    height: 100%;
    background: var(--ink-soft);
    border-radius: 999px;
    transition: width 120ms linear;
}

.calc-row--ours .calc-fill { background: var(--coral); }

.calc-figure { text-align: right; }
.calc-amount { display: block; font-size: var(--step-m); font-weight: 650; }

.calc-who {
    display: block;
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.calc-toggle { margin: var(--gap) 0 0; font-size: var(--step-sm); }
.calc-toggle label { display: inline-flex; align-items: center; gap: var(--gap-xs); cursor: pointer; }
.calc-toggle input { accent-color: var(--coral); width: 1.1rem; height: 1.1rem; }

.calc-verdict {
    margin: var(--gap-lg) 0 0;
    padding: var(--gap) ;
    background: var(--panel-warm);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius-sm);
    font-size: var(--step-body-l);
    line-height: 1.6;
}

.calc-note { margin: var(--gap-sm) 0 0; font-size: var(--step-sm); }

/* ---- terms table ---- */

/* A wide table on a narrow screen scrolls inside its own box rather than
   pushing the page sideways. */
.table-scroll { overflow-x: auto; }

.terms-table {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    text-align: left;
}

.table-caption {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.terms-table th,
.terms-table td {
    padding: var(--gap-sm) var(--gap);
    border-bottom: 1px solid var(--surface-line);
    vertical-align: top;
    font-size: var(--step-sm);
    line-height: 1.6;
}

.terms-table thead th {
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
    border-bottom-color: var(--edge);
}

.terms-table tbody th {
    font-weight: 650;
    font-size: var(--step-body);
    white-space: nowrap;
}

.terms-table td { color: var(--fg-muted); }

.terms-row--ours { background: var(--panel-warm); }
.terms-row--ours th { color: var(--fg-accent); }

.terms-flag {
    display: block;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: var(--step-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.caveats {
    margin: var(--gap-lg) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--gap-sm);
    max-width: 72ch;
    color: var(--fg-muted);
    font-size: var(--step-sm);
    line-height: 1.65;
}

.caveats li { padding-left: var(--gap); border-left: 2px solid var(--surface-line); }

@media (max-width: 46rem) {
    .calc-controls { grid-template-columns: minmax(0, 1fr); }

    /* The row becomes name-and-figure with the bar beneath, so nothing is
       squeezed to the point of being unreadable. */
    .calc-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--gap-xs) var(--gap-sm);
    }
    .calc-bar { grid-column: 1 / -1; order: 3; }
    .calc-figure { text-align: right; }
}

/* The pointer from the pricing page to the comparison, sat between the tiers
   and the add-on section. Reads as a sentence rather than another button:
   there are already three on that page and this is an aside, not a fourth
   thing to decide. */
.compare-nudge {
    margin: var(--gap-lg) 0 0;
    padding: var(--gap) var(--gap-lg);
    background: var(--panel-warm);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    font-size: var(--step-body);
    text-align: center;
}

/*
   The terms table on a phone.

   Four columns do not fit at 390 and a scroll container would hide two of
   them behind a gesture nothing advertises - the same silent clipping the
   section nav had. So each platform becomes a block instead, with the
   column heading carried down beside its cell by data-label. Nothing is off
   screen and nothing needs scrolling.
*/
@media (max-width: 46rem) {
    .terms-table { min-width: 0; }
    .terms-table thead { position: absolute; left: -9999px; }

    .terms-table tr {
        display: block;
        margin-bottom: var(--gap);
        border: 1px solid var(--surface-line);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    .terms-table tbody th,
    .terms-table td {
        display: block;
        border-bottom: 0;
        white-space: normal;
    }

    .terms-table tbody th {
        background: var(--paper);
        border-bottom: 1px solid var(--surface-line);
    }

    .terms-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-family: var(--mono);
        font-size: var(--step-micro);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--fg-muted);
    }

    .terms-table td + td { border-top: 1px solid var(--surface-line); }
}