/* Receipt Snoop — the two public marketing pages.
 *
 * WHY THIS FILE EXISTS SEPARATELY FROM assets/style.css
 *
 * /  and /how-it-works are static HTML. They are the first thing a stranger
 * loads, and until tonight loading them meant downloading the whole
 * WebAssembly application first — several hundred kilobytes gzipped before a
 * word of the argument appeared, on a phone, in a shop. A marketing page has
 * no business being a program.
 *
 * So this stylesheet is a SUBSET OF assets/style.css, copied verbatim rather
 * than reimplemented: the design tokens, the badge system, the button system,
 * the claim furniture (`.script-box`, `.checklist`, `.caveats`, `.facts`), the
 * long-form document chrome the app's legal pages use, and the whole `.lp-`
 * block that was written for these two pages in the first place. Verbatim
 * matters — a badge here has to mean exactly what the same badge means inside
 * the app, or the pages are arguing for a product the visitor will not
 * recognise when they sign in.
 *
 * IF YOU CHANGE A TOKEN IN assets/style.css, CHANGE IT HERE TOO. There is no
 * build step joining them, on purpose: the app's stylesheet is fingerprinted
 * by the Dioxus asset pipeline and these pages cannot name a hashed file. The
 * duplication is the price of the two pages not depending on the bundle at
 * all, which is the entire point of the exercise.
 *
 * Nothing here is inline and nothing is fetched from anywhere else. The
 * production CSP is `default-src 'self'; style-src 'self'` with no
 * `'unsafe-inline'`, so a `style=` attribute would be silently dropped and a
 * CDN font would simply not load.
 *
 * Root font-size is 15px, as in the app: 1rem = 15px. The `.lp-` block is
 * mobile-first, with min-width queries at 561px and 821px — the exact
 * complements of the app's 560px and 820px breakpoints, so a visitor who signs
 * up does not watch the site reflow at a width it did not reflow at a moment
 * earlier. */


/* ---------- design tokens and base ---------- */

:root {
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --faint: #94a3b8;
    --line: #e2e8f0;
    --line-2: #cbd5e1;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;

    --brand: #1e3a5f;
    --brand-ink: #0b2440;

    --save: #047857;
    --save-bg: #ecfdf5;
    --save-line: #a7f3d0;

    --warn: #b45309;
    --warn-bg: #fffbeb;
    --warn-line: #fde68a;

    --danger: #b91c1c;
    --danger-bg: #fef2f2;
    --danger-line: #fecaca;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --shadow-lg: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 10px 20px -8px rgba(15, 23, 42, .12);
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
/* ---------- badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .6875rem;
    font-weight: 650;
    padding: .125rem .4375rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: .01em;
}
.badge.gold { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.badge.high { background: var(--save-bg); color: var(--save); border-color: var(--save-line); }
.badge.medium { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge.unverified { background: #f1f5f9; color: var(--muted); border-color: var(--line-2); }
.badge.stated { background: var(--save-bg); color: var(--save); border-color: var(--save-line); }
.badge.derived { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge.unknown { background: #f1f5f9; color: var(--faint); border-color: var(--line); }
.badge.actionable { background: var(--save-bg); color: var(--save); border-color: var(--save-line); }
.badge.advisory { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge.expired { background: #f1f5f9; color: var(--muted); border-color: var(--line-2); }
.badge.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.badge.plain { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }

.badge-row { display: flex; flex-wrap: wrap; gap: .3125rem; align-items: center; }

/* ---------- deadlines ---------- */

.deadline { font-size: .8125rem; font-weight: 600; }
.deadline.urgent { color: var(--danger); }
.deadline.soon { color: var(--warn); }
.deadline.ok { color: var(--muted); }
/* ---------- claim ---------- */

.script-box {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    padding: .875rem 1rem;
    font-size: .9375rem;
    line-height: 1.65;
    white-space: pre-wrap;
    color: var(--ink);
}
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
    padding: .375rem 0 .375rem 1.5rem;
    position: relative;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
    content: "";
    position: absolute;
    left: 0; top: .625rem;
    width: 13px; height: 13px;
    border: 1.5px solid var(--line-2);
    border-radius: 3px;
}
.caveats { list-style: none; padding: 0; margin: 0; }
.caveats li {
    font-size: .875rem;
    color: var(--ink-2);
    padding: .3125rem 0 .3125rem .9375rem;
    position: relative;
}
.caveats li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }

.facts { width: 100%; border-collapse: collapse; font-size: .875rem; }
.facts td { padding: .4375rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts tr:last-child td { border-bottom: 0; }
.facts td:first-child { color: var(--muted); width: 42%; padding-right: 1rem; }
.facts td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.btn:hover { background: var(--brand-ink); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #991b1b; }
.btn.wide { width: 100%; }
.btn.sm { padding: .3125rem .5625rem; font-size: .8125rem; }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------- spacing utilities ----------
 *
 * Named classes rather than `style="margin-top:..."`, for the CSP reason in
 * the banner above. Restated at the bottom of this file as well, because
 * `.mt-4` and `.lp-group-h` are both single-class selectors: specificity ties,
 * source order decides, and every component rule below uses the `margin`
 * shorthand, which resets `margin-top` to 0. */

.mt-1 { margin-top: .375rem; }
.mt-2 { margin-top: .625rem; }
.mt-3 { margin-top: .875rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: .375rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.my-3 { margin: .75rem 0; }
.mr-1 { margin-right: .375rem; }
.ml-2 { margin-left: .5rem; }


/* ---------- legal pages ---------- */
/* Long-form prose, read once, by somebody deciding whether to trust us. The
   only job here is legibility: a measure that does not run past ~70 characters
   and headings that make it skimmable. */

.legal-page { min-height: 100vh; background: var(--bg); }
.legal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.5rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.legal-brand {
    font-size: 1.125rem; font-weight: 700; color: var(--brand);
    letter-spacing: -0.02em; text-decoration: none;
}
.legal-brand span { color: var(--save); }
.legal-nav { display: flex; gap: 1.25rem; font-size: .875rem; }
.legal-nav a { color: var(--muted); text-decoration: none; }
.legal-nav a:hover { color: var(--brand); text-decoration: underline; }

.legal-body {
    max-width: 42rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem;
    color: var(--ink-2); font-size: 1rem; line-height: 1.7;
}
.legal-body h1 {
    font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.02em;
    color: var(--ink); margin: 0 0 .5rem;
}
.legal-body h2 {
    font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ink);
    margin: 2.5rem 0 .75rem; padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.legal-body h3 { font-size: 1rem; color: var(--ink); margin: 1.75rem 0 .5rem; }
.legal-body h1 + p strong:only-child { color: var(--muted); font-weight: 500; }
.legal-body p { margin: 0 0 1rem; }
.legal-body ul, .legal-body ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-body li { margin-bottom: .4rem; }
.legal-body strong { color: var(--ink); font-weight: 620; }
/* `:not(.btn)` is load-bearing. This rule is (0,1,1); plain `.btn` is (0,1,0),
   so without the exclusion it repaints a filled button's label in `--brand` —
   which is also the filled button's background. The result is a navy-on-navy
   button with an invisible label, and it was exactly that on /how-it-works,
   where the primary "Create an account" call to action rendered as an empty
   dark rectangle. `.btn.ghost` survived only because (0,2,0) happens to beat
   (0,1,1), which is luck rather than design.
   Excluding buttons here lets every `.btn` variant keep the colours it has
   everywhere else, instead of enumerating each one again for this context. */
.legal-body a:not(.btn) { color: var(--brand); }
.legal-body code {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .05rem .3rem; font-size: .875em;
}
.legal-body table {
    width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .9375rem;
}
.legal-body th, .legal-body td {
    text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.legal-body th { color: var(--ink); font-weight: 620; background: var(--surface-2); }
.legal-body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.legal-foot {
    max-width: 42rem; margin: 0 auto; padding: 0 1.5rem 3rem;
    color: var(--muted); font-size: .875rem;
}
.legal-foot a { color: var(--brand); }

/* ---------- the public pages ---------- */

.lp { background: var(--surface); }

/* Content measure. Wider than the app's 1080px `.main` because this page has
   no sidebar eating 232px beside it. */
.lp-inner { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }

/* A narrower measure for the two sections that are pure prose. */
.lp-measure { max-width: 42rem; }

/* One band per section. `scroll-margin-top` clears the sticky nav when an
   in-page anchor lands here; without it `#coverage` scrolls the heading under
   the bar and the visitor reads the second paragraph first. */
.lp-band { padding: 2.5rem 0; scroll-margin-top: 4rem; }
.lp-band.tint { background: var(--bg); }
.lp-band.dark {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%);
    color: #fff;
}

/* ---------- public nav ---------- */

.lp-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.lp-nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: .625rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* The brand's second word is mint (#7dd3c0) in the sidebar, where it sits on
   navy. On this white bar mint fails contrast badly, so it takes `--save`
   here — the same choice `.legal-brand span` and `.auth-card .brand span`
   already made, for the same reason. */
.lp-brand {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.lp-brand span { color: var(--save); }

/* Below 561px only the brand and the one real CTA survive. A hamburger for
   three links is a menu nobody opens. */
.lp-nav-links { display: none; gap: 1.25rem; font-size: .875rem; }
.lp-nav-links a { color: var(--muted); }
.lp-nav-links a:hover { color: var(--brand); text-decoration: underline; }

/* Keyboard users get out of the nav and into the argument. Visible only when
   focused, which is the whole point of it. */
.lp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 20;
    background: var(--surface);
    color: var(--brand);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: .5rem .875rem;
    font-weight: 620;
}
.lp-skip:focus { left: .5rem; top: .5rem; }

/* Screen-reader-only. Used for table captions, which give a `<table>` an
   accessible name without putting a redundant label on screen. */
.lp-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- display type ----------
 *
 * The largest heading in the app is `h1` at 1.5rem. Nothing here could be
 * reused, so this is a new scale: 2.125rem on a phone, 3.25rem from 821px. */

.lp-h1 {
    font-size: 2.125rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: .375rem 0 0;
    text-wrap: balance;
}
.lp-h2 {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 650;
    margin: .25rem 0 0;
    text-wrap: balance;
}
.lp-eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 620;
    color: var(--muted);
    margin: 0;
}
.lp-band.dark .lp-eyebrow { color: #a9c2dc; }

.lp-lede {
    font-size: 1rem;
    color: var(--ink-2);
    max-width: 34rem;
    margin: .625rem 0 0;
}
.lp-band.dark .lp-lede { color: #c3d3e5; }

.lp-body { color: var(--ink-2); margin: 0; max-width: 42rem; }
.lp-band.dark .lp-body { color: #c3d3e5; }

.lp-caption { font-size: .8125rem; color: var(--muted); margin: .75rem 0 0; }
.lp-source { font-size: .75rem; color: var(--muted); margin: .75rem 0 0; }

.lp-link { color: var(--brand); font-weight: 620; }
.lp-link:hover { text-decoration: underline; }
.lp-link-dark { color: #c3d3e5; font-size: .875rem; }
.lp-link-dark:hover { color: #fff; text-decoration: underline; }

/* ---------- buttons: three additions to the shared system ----------
 *
 * `.btn` tops out at .9375rem and its only variants go smaller. A hero CTA
 * needs one that goes the other way, and a navy band needs two that are
 * legible on it — plain `.btn` is navy-on-navy and disappears, and `.btn.ghost`
 * on navy is a solid white slab. */

.btn.lg { padding: .6875rem 1.25rem; font-size: 1rem; }

.btn.on-dark {
    background: #fff;
    border-color: #fff;
    color: var(--brand);
}
.btn.on-dark:hover { background: #e6edf5; border-color: #e6edf5; }

.btn.outline-dark {
    background: transparent;
    border-color: #a9c2dc;
    color: #fff;
}
.btn.outline-dark:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.lp-cta-row { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }

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

.lp-hero { padding: 2.5rem 0 2.75rem; }
.lp-hero-inner { display: grid; gap: 1.5rem; }
/* Grid children default to `min-width: auto`, which lets a long unbroken
   headline push the column wider than the track. */
.lp-hero-copy { min-width: 0; }
.lp-hero .lp-cta-row { margin-top: 1.25rem; }
.lp-microline { font-size: .8125rem; color: #c3d3e5; margin: .75rem 0 0; }

/* The three-second payload. Not `.hero` — that name belongs to the dashboard's
   stat card and reusing it would collide. The mint left edge is the same
   annotation idiom the opportunity cards use, and this is the one place on a
   white-free background where mint is both legible and meaningful. */
.lp-hero-figure {
    border: 1px solid rgba(255, 255, 255, .16);
    border-left: 3px solid #7dd3c0;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    padding: 1.125rem 1.25rem;
    align-self: start;
}
.lp-figure-n {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.lp-figure-t { font-size: .8125rem; color: #a9c2dc; margin: .375rem 0 0; }

/* ---------- panels ---------- */

.lp-panels { display: grid; gap: .875rem; }
.lp-cards { display: grid; gap: .875rem; }

.lp-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.125rem 1.125rem;
}
/* Same left-edge grammar as `.opp`: grey means "we could not confirm this",
   green means "we could". */
.lp-panel.before { border-left: 3px solid var(--line-2); }
.lp-panel.after { border-left: 3px solid var(--save); }

.lp-panel-h { font-size: 1rem; font-weight: 650; margin: 0 0 .625rem; }
.lp-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .625rem;
    flex-wrap: wrap;
}
.lp-sub-h { font-size: .8125rem; font-weight: 620; color: var(--ink-2); margin: 0 0 .4375rem; }
.lp-group-h { font-size: 1rem; font-weight: 650; margin: 0 0 .625rem; }

.lp-claim-cols { display: grid; gap: 1.25rem; }

/* ---------- the receipt ----------
 *
 * This has to be recognisable as a receipt before a word of it is read,
 * because it is the document the whole page argues from. It is laid out as
 * flex rows rather than a `<pre>` block: monospace column alignment is what
 * makes a receipt legible on paper and what makes it unreadable at 390px. */

.lp-receipt {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-top: 2px dashed var(--line-2);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: .875rem 1rem 1rem;
    font-family: var(--mono);
    font-size: .875rem;
    color: var(--ink);
}
.lp-receipt-head {
    margin: 0;
    font-weight: 700;
    letter-spacing: .08em;
}
.lp-receipt-date { margin: .125rem 0 0; color: var(--muted); font-size: .8125rem; }
.lp-receipt-rule { border: 0; border-top: 1px dashed var(--line-2); margin: .75rem 0; }
.lp-receipt-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
}
.lp-receipt-line .amt { font-variant-numeric: tabular-nums; font-weight: 620; }
.lp-receipt-line.paid { font-weight: 700; }
.lp-receipt-line.paid .amt { font-weight: 700; }
.lp-receipt-upc { margin: .125rem 0 0; color: var(--muted); font-size: .8125rem; }

/* ---------- the drop ---------- */

.lp-drop-now {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--line);
}
.lp-drop-now .lbl { margin: 0; font-weight: 620; }
.lp-drop-now .sub { margin: .0625rem 0 0; color: var(--muted); font-size: .8125rem; }
.lp-drop-now .n {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lp-drop-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .4375rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem;
}
.lp-drop-row:last-of-type { border-bottom: 0; }
.lp-drop-row .lbl { color: var(--ink-2); }
.lp-drop-row .val { font-variant-numeric: tabular-nums; font-weight: 620; }
/* `--muted` and not `--faint`. This is the price the shopper actually paid,
   struck through because a lower one turned up later, and it is the figure the
   $18.00 below it is a difference *from* — so it has to be readable, not
   merely present. `--faint` on white is 2.56:1, which fails WCAG AA for body
   text; `--muted` is 4.76:1 and passes. The strike-through already carries the
   "superseded" meaning; dimming it too was saying the same thing twice and
   charging a reader with poor vision for the repetition. */
.lp-was { text-decoration: line-through; color: var(--muted); }
.lp-save { color: var(--save); font-weight: 700; }

/* `.script-box` is `<p>` here rather than a `<div>`, so the base paragraph
   margin has to go — the box supplies its own padding. */
.script-box.muted { color: var(--muted); border-left-color: var(--line-2); }
p.script-box { margin-bottom: 0; }

/* ---------- definition blocks ---------- */

.lp-def { margin: 0; }
.lp-def dt { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.lp-def dd { margin: .25rem 0 0; color: var(--ink-2); max-width: 42rem; }

.lp-tiers { margin: 0; }
.lp-tiers dt { margin-top: .875rem; }
.lp-tiers dt:first-child { margin-top: 0; }
.lp-tiers dd { margin: .25rem 0 0; color: var(--ink-2); font-size: .9375rem; }

/* ---------- coverage table ----------
 *
 * Four columns is right on a laptop and impossible at 390px, so on a phone
 * each row becomes a small block and every cell grows its own label from a
 * `data-label` attribute. The `<table>` markup is unchanged either way, which
 * is what keeps it navigable in a screen reader. */

.lp-cov { width: 100%; border-collapse: collapse; font-size: .875rem; }
.lp-cov thead { display: none; }
.lp-cov tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.lp-cov tbody tr:last-child { border-bottom: 0; }
.lp-cov td { display: flex; gap: .625rem; padding: .125rem 0; color: var(--ink-2); }
.lp-cov td::before {
    content: attr(data-label);
    flex: 0 0 5rem;
    color: var(--muted);
}
.lp-cov td.retailer {
    font-size: .9375rem;
    font-weight: 650;
    color: var(--ink);
    margin-bottom: .1875rem;
}
.lp-cov td.retailer::before { content: none; }

/* ---------- refusals ---------- */

.lp-refusals { display: grid; gap: 1.125rem; }
/* The left rule is the same annotation idiom `.opp` and `.line-body` use: a
   quiet edge that groups a claim with its reasoning. */
.lp-refusal { border-left: 2px solid var(--line); padding-left: .875rem; }
.lp-refusal-h { font-size: 1rem; font-weight: 650; margin: 0 0 .3125rem; }

/* ---------- your data ---------- */

/* A literal glyph, like every other icon in this product. There is no icon
   set and one page is not a reason to introduce one. */
.lp-ticks { list-style: none; padding: 0; margin: 0; max-width: 42rem; }
.lp-ticks li {
    position: relative;
    padding: .4375rem 0 .4375rem 1.5rem;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}
.lp-ticks li:last-child { border-bottom: 0; }
.lp-ticks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .4375rem;
    color: var(--save);
    font-weight: 700;
}

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

.lp-foot {
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 2rem 0 2.5rem;
}
.lp-foot-cols { display: grid; gap: 1.5rem; }
.lp-foot-head {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 620;
    color: var(--muted);
    margin: 0 0 .5rem;
}
.lp-foot-list { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.lp-foot-list li { margin-bottom: .375rem; }
.lp-foot-list a { color: var(--ink-2); }
.lp-foot-list a:hover { color: var(--brand); text-decoration: underline; }
.lp-foot-blurb { font-size: .8125rem; color: var(--muted); margin: .5rem 0 0; max-width: 22rem; }
.lp-foot-bar {
    margin: 2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .75rem;
    color: var(--muted);
}

/* ---------- /how-it-works ----------
 *
 * Borrows `.legal-page` / `.legal-body` wholesale. Only the sticky nav's
 * scroll offset and the closing CTA need saying. */

.lp-doc .legal-body h1,
.lp-doc .legal-body h2 { scroll-margin-top: 4rem; }
.lp-doc-cta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* ---------- 561px and up ---------- */

@media (min-width: 561px) {
    .lp-nav-links { display: flex; }
    .lp-band { padding: 3.25rem 0; }
    .lp-inner { padding: 0 1.5rem; }
    .lp-nav-inner { padding: .75rem 1.5rem; }
    .lp-h1 { font-size: 2.75rem; }
    .lp-h2 { font-size: 1.75rem; }
    .lp-lede { font-size: 1.0625rem; }
    .lp-panels.two { grid-template-columns: 1fr 1fr; }
    .lp-cards { grid-template-columns: 1fr 1fr; }
    .lp-refusals { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .lp-foot-cols { grid-template-columns: 1fr 1fr; }

    /* The tiers read as a two-column list once there is room for the term and
       its sentence side by side. */
    .lp-tiers {
        display: grid;
        grid-template-columns: 11rem 1fr;
        column-gap: 1.25rem;
        row-gap: .625rem;
        align-items: baseline;
    }
    .lp-tiers dt, .lp-tiers dt:first-child { margin-top: 0; }
    .lp-tiers dd { margin: 0; }
}

/* ---------- 821px and up ---------- */

@media (min-width: 821px) {
    .lp-band { padding: 4.5rem 0; }
    .lp-hero { padding: 4.5rem 0 5rem; }
    .lp-hero-inner { grid-template-columns: 1.35fr 1fr; align-items: center; gap: 3rem; }
    .lp-h1 { font-size: 3.25rem; }
    .lp-h2 { font-size: 2rem; }
    .lp-figure-n { font-size: 2.75rem; }

    .lp-panels { grid-template-columns: 1fr 1fr; }
    .lp-panel-wide { grid-column: 1 / -1; }
    .lp-claim-cols { grid-template-columns: 1fr 1.15fr; gap: 2rem; }
    .lp-cards { grid-template-columns: repeat(3, 1fr); }
    .lp-foot-cols { grid-template-columns: 2fr 1fr 1fr 1.4fr; }

    /* Back to a real table once four columns fit. */
    .lp-cov thead { display: table-header-group; }
    .lp-cov tr { display: table-row; padding: 0; border-bottom: 0; }
    .lp-cov td, .lp-cov th {
        display: table-cell;
        padding: .5rem .75rem .5rem 0;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
    }
    .lp-cov td::before { content: none; }
    .lp-cov td.retailer { margin-bottom: 0; }
    .lp-cov th {
        text-align: left;
        font-size: .75rem;
        font-weight: 620;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .05em;
    }
}

/* ---------- spacing utilities, re-asserted ----------
 *
 * Keep this block last. Anything appended after it re-opens the bug described
 * where the utilities are first declared.
 *
 * Every utility declared up there is restated here, not just the four
 * `.mt-*` that had visibly broken: the override is a property of the
 * shorthand, not of those four names, and the other six were one appended
 * component rule away from the same silence. */

.mt-1 { margin-top: .375rem; }
.mt-2 { margin-top: .625rem; }
.mt-3 { margin-top: .875rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: .375rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.my-3 { margin: .75rem 0; }
.mr-1 { margin-right: .375rem; }
.ml-2 { margin-left: .5rem; }