/* The Made Standard — brand design tokens */
:root {
    --paper: #FAF6EE;
    --ink: #172742;
    --clay: #A8432F;
    --gold: #B8862F;
    --green: #3C6B4A;
    --paper-2: #F3ECDD;
    --line: #E3D9C6;
    --muted: #5A5247;          /* darkened from #6B6357 to clear WCAG AA on paper-2 (now ~5.5:1) */

    /* Derived/interaction colors (kept as tokens, not stray hex) */
    --clay-dark: #8f3826;     /* clay :hover/:active */
    --gold-dark: #a2761f;     /* gold :hover/:active */
    --ink-dark: #0f1c30;      /* ink :hover/:active */
    --ink-lift: #2c4e90;      /* lighter navy for ink-on-ink gradients (monograms etc.) */
    --ink-soft: #cfd6e0;      /* muted text on dark ink bands */

    /* Spacing scale (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Section rhythm + layout */
    --container-max: 1080px;
    --measure: 65ch;          /* readable body line length */
    --section-y: clamp(48px, 7vw, 80px);

    /* Radii (slightly soft — gentle, family-friendly edges) */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Soft sage tint — warm secondary surface (matches the marketing site) */
    --sage: #EAEFE7;

    /* Motion */
    --ease: cubic-bezier(.2, .6, .2, 1);
    --t-fast: .12s;
    --t-base: .18s;

    /* Focus ring (visible keyboard focus everywhere) */
    --focus-ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--clay);

    /* Elevation — single source of truth so a brand refresh doesn't drift. */
    --shadow-sm:   0 4px 12px rgba(23, 39, 66, .02);     /* quiet resting surface */
    --shadow-card: 0 10px 30px rgba(23, 39, 66, .08);    /* card hover lift */
    --shadow-gold: 0 6px 20px rgba(184, 134, 47, .08);   /* gold/seal accent lift */
    --shadow-pop:  0 8px 24px rgba(23, 39, 66, .25);     /* persistent floating UI (mobile CTA) */
}

* { box-sizing: border-box; }

/* Visible keyboard focus on every interactive element */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* Skip-to-content link */
.skip-link {
    position: absolute;
    left: var(--space-3);
    top: -120px;
    z-index: 1000;
    background: var(--ink);
    color: var(--paper) !important;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: var(--space-3); text-decoration: none; }

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

html { scroll-behavior: smooth; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

h1, h2, h3, .brand-name {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    /* Editorial wrap — eliminates orphaned trailing words on hero/section headings.
       text-wrap: balance is widely supported in modern browsers and degrades silently. */
    text-wrap: balance;
}

/* Pretty wrap for long-form prose — keeps last-line widows in check on ledes and body copy. */
.lede, .about-section p, .verify-box p, .honest-framing p {
    text-wrap: pretty;
}

a { color: var(--clay); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }

/* Header */
.site-header {
    border-bottom: 1px solid var(--line);
    background: rgba(250, 246, 238, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-seal {
    display: block;
    width: 38px; height: 38px;
    flex-shrink: 0;
}
.brand-name { font-size: 20px; }
.brand-seal { transition: transform var(--t-base) var(--ease); }
.brand:hover .brand-seal { transform: rotate(8deg); }

.site-nav { display: flex; align-items: center; position: relative; }
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-toggle-cb { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.site-nav a:not(.nav-cta) {
    color: var(--ink); font-weight: 500; font-size: 15px;
    padding: 8px 2px; position: relative;
}
.site-nav a:not(.nav-cta)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--gold); border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--t-base) var(--ease);
}
.site-nav a:not(.nav-cta):hover { text-decoration: none; color: var(--clay); }
/* Active-page indicator (underline) */
.site-nav a.active { color: var(--ink); }
.site-nav a.active::after {
    transform: scaleX(1);
}
.nav-cta {
    background: var(--ink); color: var(--paper) !important;
    padding: 11px 18px; border-radius: var(--radius-pill); font-size: 14px;
    font-weight: 600; line-height: 1;
    transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-cta:hover { text-decoration: none; background: var(--ink-dark); }
.nav-cta:active { transform: translateY(1px); }

/* CSS-only mobile menu toggle (checkbox-driven; hidden on desktop) */
.nav-toggle {
    display: none; align-items: center; gap: 8px; cursor: pointer;
    min-height: 44px; padding: 0 var(--space-3);
    font-weight: 600; font-size: 15px; color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff;
}
.nav-toggle:hover { border-color: var(--muted); }
.nav-toggle-cb:focus-visible + .nav-toggle { box-shadow: var(--focus-ring); }

/* Breadcrumb */
.breadcrumb { background: var(--paper); border-bottom: 1px solid var(--line); }
.breadcrumb ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    list-style: none; margin: 0; padding: var(--space-3) 0;
    font-size: 13px; color: var(--muted);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li:not(:first-child)::before { content: "/"; color: var(--line); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--clay); text-decoration: none; }
.breadcrumb li[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Hero */
.hero { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 64px 0 56px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600; color: var(--gold); margin: 0 0 14px; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); margin: 0 0 16px; max-width: 16ch; }
.lede { font-size: 19px; color: var(--muted); max-width: 60ch; margin: 0; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-6) 0 var(--space-2); }
.filters input[type="search"], .filters select {
    font: inherit; padding: 11px 14px; border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff; color: var(--ink); min-width: 200px;
    min-height: 44px;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.filters input[type="search"]:hover, .filters select:hover { border-color: var(--muted); }
.filters .check { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--muted); min-height: 44px; cursor: pointer; }
.filters .check input { width: 18px; height: 18px; accent-color: var(--clay); }
.filters button {
    font: inherit; font-weight: 600; cursor: pointer;
    background: var(--clay); color: #fff; border: 0;
    padding: 11px 20px; border-radius: var(--radius); min-height: 44px;
    transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.filters button:hover { background: var(--clay-dark); }
.filters button:active { transform: translateY(1px); }
.result-count { color: var(--muted); font-size: 14px; margin: var(--space-2) 0 var(--space-5); }

/* Grid + cards */
.grid, .featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}
.featured-grid { margin-bottom: 0; }
.card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 20px; color: var(--ink);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
a.card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--gold); }
/* Static (non-link) cards — e.g. product cards on detail page — don't lift */
.card.product:hover { transform: none; box-shadow: none; border-color: var(--line); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-cat { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 600; }
a.card-cat-link { display: inline-block; }
a.card-cat-link:hover { color: var(--clay); text-decoration: none; }
.card h3 { font-size: 21px; margin: 0 0 4px; }
.card-loc { font-size: 13px; color: var(--muted); margin: 0 0 6px; }

/* Small "Verified Mon YYYY" stamp on directory cards — quiet credibility on every tile. */
.card-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 2px 10px 2px 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--green);
    background: var(--sage);
    border-radius: var(--radius-pill);
}
.card-verified-mark {
    font-size: 11px;
    line-height: 1;
}

.card-tag { font-size: 15px; color: var(--ink); margin: 0; }
.card.product .card-tag { color: var(--muted); }
.card-recall { font-size: 12.5px; color: var(--clay-dark); font-weight: 500; margin: 8px 0 0; }

/* Empty / edge states — intentional, on-brand */
.empty {
    grid-column: 1 / -1;
    color: var(--muted);
    text-align: center;
    padding: var(--space-7) var(--space-5);
    margin-bottom: var(--space-8);
    background: var(--paper-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}
.empty::before {
    content: "✦";
    display: block;
    font-size: 28px;
    color: var(--gold);
    margin-bottom: var(--space-3);
}
.empty a { font-weight: 600; }

/* Directory pagination */
.pager {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: var(--space-4);
    margin: 0 0 var(--space-8);
}
.pager-link {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 10px 18px; border-radius: var(--radius);
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-weight: 600;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
a.pager-link:hover { text-decoration: none; border-color: var(--gold); background: var(--paper-2); }
.pager-link.is-disabled { color: var(--muted); background: var(--paper-2); cursor: default; opacity: .6; }
.pager-status { color: var(--muted); font-size: 14px; }

/* Brand avatar — logo or monogram fallback */
.card-avatar { margin: 12px 0 14px; }
.card-logo {
    width: 52px; height: 52px;
    object-fit: contain; border-radius: 10px;
    border: 1px solid var(--line); background: #fff;
}
.card-monogram {
    width: 52px; height: 52px; border-radius: 10px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-lift) 100%);
    color: #fff;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.5rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}

/* Brand Imagery (Cards & Details) */
.card-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    display: flex;
    background: var(--paper-2);
}
.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-base) var(--ease);
}
a.card:hover .card-image {
    transform: scale(1.05);
}
.card-monogram.hero {
    width: 100%;
    height: 100%;
    font-size: 3rem;
}
.detail-media {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    margin-bottom: 32px;
    overflow: hidden;
    display: flex;
    background: var(--paper-2);
}
.card-monogram.detail-hero {
    width: 100%;
    height: 100%;
    font-size: 5rem;
    border-radius: 12px;
}
/* Verification badge — a crisp "seal" (never color alone: keeps text label) */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; line-height: 1;
    padding: 6px 11px; border-radius: var(--radius-pill);
    white-space: nowrap; letter-spacing: .01em;
    cursor: help;
}
.badge-mark {
    display: block;
    flex-shrink: 0;
}
/* Signature moment: Certified badge "stamps" itself onto the page once. */
@keyframes stampIn {
    0%   { transform: scale(1.7) rotate(-10deg); opacity: 0; }
    65%  { transform: scale(.96) rotate(1deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}
.badge-cert {
    background: rgba(60,107,74,.12);
    color: var(--green);
    border: 1px solid rgba(60,107,74,.35);
    animation: stampIn .45s var(--ease) both;
}
.badge-claim { background: rgba(184,134,47,.14); color: var(--gold); border: 1px solid rgba(184,134,47,.40); }

/* Detail page */
.detail { padding: var(--space-6) var(--space-5) var(--space-8); }
.back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--muted); font-weight: 500;
    min-height: 44px;
}
.back:hover { color: var(--clay); text-decoration: none; }
.detail-head { display: flex; justify-content: space-between; gap: var(--space-5); align-items: flex-start; margin: var(--space-4) 0 var(--space-6); }
.detail-head h1 { font-size: clamp(28px, 4vw, 42px); margin: 8px 0 6px; }
.detail-head .lede { max-width: var(--measure); }
.detail-loc { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.verify-box { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: var(--space-7); }
.verify-box.claimed { border-left-color: var(--gold); }
.verify-box h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }
.verify-box p { max-width: var(--measure); }
.verify-status { margin: 0 0 10px; }
.t-cert { color: var(--green); }
.t-claim { color: var(--gold); }
.verify-date { color: var(--muted); font-size: 14px; }
.report-issue { margin: 16px 0 0; }
.report-issue a { font-size: 14px; color: var(--muted); text-decoration: underline; }
.report-issue a:hover { color: var(--clay); }
.price { font-weight: 600; color: var(--clay); margin: 0 0 8px; font-size: 16px; }
/* Buy / visit — secondary (ghost) button, part of the unified button system */
.buy {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: auto; font-weight: 600; font-size: 14px;
    padding: 10px 18px; min-height: 44px;
    border: 1.5px solid var(--line); border-radius: var(--radius);
    color: var(--ink) !important; background: transparent;
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.buy:hover { text-decoration: none; border-color: var(--clay); background: rgba(168, 67, 47, .05); }
.buy:active { transform: translateY(1px); }
.card.product .buy { margin-top: 12px; align-self: flex-start; }
.brand-links { margin-top: var(--space-6); }
.brand-links .buy { background: var(--clay); color: #fff !important; border-color: var(--clay); }
.brand-links .buy:hover { background: var(--clay-dark); border-color: var(--clay-dark); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--paper-2); padding: var(--space-7) 0; margin-top: var(--space-7); }
.footer-lockup { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.footer-seal { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.footer-tag { font-family: "Fraunces", serif; font-size: 20px; color: var(--ink); margin: 0; }
.footer-links {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
    margin: var(--space-2) 0 var(--space-3); font-size: 14px;
}
.footer-links a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--clay); }
.footer-links a.footer-link-muted { color: var(--muted); }
.footer-links a.footer-link-muted:hover { color: var(--clay); }
.footer-fine { color: var(--muted); font-size: 13px; margin: 0; }

/* Waitlist */
.waitlist-band { background: var(--ink); color: var(--paper); padding: var(--section-y) 0; position: relative; overflow: hidden; }
/* Reversed seal stamp — legible mark/accent on the dark band */
.waitlist-band::after {
    content: "";
    position: absolute;
    top: 50%; right: -40px;
    width: 300px; height: 300px;
    transform: translateY(-50%);
    background: url("/icons/seal-reversed.svg") no-repeat center / contain;
    opacity: .08;
    pointer-events: none;
}
.waitlist-band .container { position: relative; z-index: 1; }
.waitlist-band h2 { color: var(--paper); font-size: clamp(26px, 3.5vw, 36px); margin: 0 0 10px; }
.waitlist-band .lede { color: var(--ink-soft); margin: 0 0 22px; max-width: var(--measure); }
.waitlist-form { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.waitlist-form input[type="email"] {
    font: inherit; padding: 13px 16px; border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff; color: var(--ink);
    min-width: 280px; min-height: 48px; flex: 1 1 280px; max-width: 420px;
}
.waitlist-form button {
    font: inherit; font-weight: 600; cursor: pointer; border: 0;
    background: var(--gold); color: var(--ink); padding: 13px 24px; border-radius: var(--radius);
    min-height: 48px;
    transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.waitlist-form button:hover { background: var(--gold-dark); }
.waitlist-form button:active { transform: translateY(1px); }
.waitlist-form button:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.waitlist-page { padding: var(--section-y) var(--space-5); max-width: 640px; }
.waitlist-page .lede { max-width: var(--measure); }
.waitlist-thanks .waitlist-seal {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px; margin-bottom: var(--space-4);
    border-radius: 50%; border: 2px solid var(--green); color: var(--green);
    font-size: 26px;
}
.waitlist-thanks h1 { color: var(--green); }
.waitlist-thanks .buy { margin-top: var(--space-5); }
/* Validation errors — louder than empty states, on-brand, never alarming.
   Plain field-level errors (single message) stay inline; summary blocks with a
   <ul> get the full alert treatment (border, tint, ⚠ glyph). */
.field-error, .validation-summary-errors {
    color: var(--clay-dark);
    font-size: 14px;
    display: block;
    margin: var(--space-3) 0;
    line-height: 1.45;
}
.validation-summary-errors:has(ul),
.field-error:has(ul) {
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    background: #fbeee8;             /* soft clay tint — calm, on-brand */
    border-left: 3px solid var(--clay);
    border-radius: var(--radius);
    position: relative;
}
.validation-summary-errors:has(ul)::before,
.field-error:has(ul)::before {
    content: "⚠";
    position: absolute;
    left: 12px;
    top: 12px;
    color: var(--clay);
    font-size: 14px;
    line-height: 1;
}
.validation-summary-errors:has(ul) ul,
.field-error:has(ul) ul {
    margin: 0;
    padding-left: var(--space-4);
}
/* Fallback for older browsers without :has() — plain list, still readable. */
.field-error ul, .validation-summary-errors ul { margin: 0; padding-left: 20px; }

/* Mobile navigation — collapse to a disclosure menu */
@media (max-width: 760px) {
    .nav-toggle { display: inline-flex; }
    .nav-links {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-width: 220px;
        padding: var(--space-2);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        z-index: 100;
    }
    .nav-toggle-cb:checked ~ .nav-links { display: flex; }
    .nav-links a:not(.nav-cta) { padding: 12px 14px; border-radius: var(--radius-sm); min-height: 44px; display: flex; align-items: center; }
    .nav-links a:not(.nav-cta):hover { background: var(--paper-2); }
    .site-nav a.active::after { display: none; }
    .nav-links a.active:not(.nav-cta) { background: var(--paper-2); color: var(--clay); }
    .nav-cta { text-align: center; margin-top: var(--space-1); }
}

@media (max-width: 640px) {
    .detail-head { flex-direction: column; }
}

/* --- Added for Verification & Homepage upgrades --- */
.hero-ctas {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 28px;
    flex-wrap: wrap;
}

/* Hero trust counter — quiet, factual reinforcement under the CTAs. */
.hero-tally {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--muted);
    letter-spacing: .02em;
}
.hero-tally strong {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hero-tally-sep {
    margin: 0 .55em;
    color: var(--gold);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 13px 24px;
    min-height: 44px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
    border: 2px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.btn-primary {
    background: var(--clay);
    color: #fff !important;
    border-color: var(--clay);
}
.btn-primary:hover {
    background: var(--clay-dark);
    border-color: var(--clay-dark);
    text-decoration: none;
}
.btn-secondary {
    background: transparent;
    color: var(--ink) !important;
    border-color: var(--line);
}
.btn-secondary:hover {
    background: rgba(23, 39, 66, 0.04);
    text-decoration: none;
    border-color: var(--muted);
}

.trust-strip {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 16px 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}
.trust-strip-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    flex-wrap: wrap;
    justify-content: center;
}
.trust-strip-inner a {
    color: var(--clay);
    font-weight: 600;
    text-decoration: underline;
}
.trust-strip-inner a:hover {
    color: var(--clay-dark);
}
.trust-strip-seal {
    color: var(--gold);
    font-size: 16px;
}

.category-section {
    padding: 48px 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.section-title {
    font-size: 24px;
    font-family: "Fraunces", Georgia, serif;
    margin: 0 0 20px;
    font-weight: 600;
    color: var(--ink);
}
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.category-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    min-height: 140px;
    transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.category-tile:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    text-decoration: none;
    box-shadow: var(--shadow-gold);
}
.category-tile h4 {
    font-family: "Fraunces", Georgia, serif;
    font-size: 20px;
    margin: 0 0 6px;
    color: var(--ink);
}
.category-tile-arrow {
    color: var(--clay);
    font-weight: bold;
    margin-left: 4px;
    display: inline-block;
    transition: transform var(--t-base) var(--ease);
}
.category-tile:hover .category-tile-arrow {
    transform: translateX(3px);
}
.category-tile-desc {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}

.featured-section {
    padding: 32px 24px 48px;
    max-width: 1080px;
    margin: 0 auto;
    border-bottom: 1px solid var(--line);
    margin-bottom: 48px;
}

/* How Verification Works page layouts */
.how-it-works-hero {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    padding: 64px 24px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Seal stamp flourish (subtle, behind the headline) */
.how-it-works-hero::before,
.about-hero::before {
    content: "";
    position: absolute;
    top: 50%; right: -90px;
    width: 360px; height: 360px;
    transform: translateY(-50%) rotate(-8deg);
    background: url("/icons/seal.svg") no-repeat center / contain;
    opacity: .06;
    pointer-events: none;
}
.how-it-works-hero .container,
.about-hero .container { position: relative; z-index: 1; }
.how-it-works-hero h1 {
    font-size: clamp(32px, 5vw, 48px);
    margin: 0 auto 16px;
    max-width: 24ch;
}
.how-it-works-hero .lede {
    margin: 0 auto;
}

.badge-explanation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0 48px;
}
.badge-explanation-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.badge-explanation-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
}
.badge-explanation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.badge-explanation-card p {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
}

/* Reusable section scaffolding used by HowItWorks, Safety, and similar
   content pages — replaces inline padding/font-size/margin sprinkled across
   markup with a single, token-driven rhythm. */
.info-section {
    padding: var(--space-7) 0 var(--space-5);
}
.info-section + .info-section {
    padding-top: var(--space-5);
}
.info-section-title {
    font-size: clamp(24px, 3vw, 28px);
    margin: 0 0 var(--space-2);
    color: var(--ink);
}
.info-section .lede {
    margin-top: 0;
}

/* Editorial callout — paragraph framed by a left rule. Two color variants
   (gold / clay) so we don't ship one-off inline borders. */
.callout-quote {
    margin-top: var(--space-3);
    padding-left: var(--space-4);
    font-weight: 500;
    border-left: 2px solid var(--gold);
}
.callout-quote--clay { border-left-color: var(--clay); }

/* Small footnote-style paragraph (used after callouts on Safety / HowItWorks). */
.section-note {
    margin-top: var(--space-3);
    font-size: 14px;
    color: var(--muted);
}
.section-note--ink {
    color: var(--ink);
    font-size: 15px;
}

.safety-page { padding-bottom: var(--space-8); }

/* FTC-standard box decorative title (Safety page). */
.ftc-standard-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ftc-standard-seal {
    color: var(--gold);
    font-size: 24px;
    line-height: 1;
}

.ftc-standard-box {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 32px;
    margin: 48px 0;
    position: relative;
    overflow: hidden;
}
.ftc-standard-box::before {
    content: "✦";
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 140px;
    color: rgba(184, 134, 47, 0.05);
    pointer-events: none;
}
.ftc-standard-box h3 {
    margin-top: 0;
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 12px;
}
.ftc-standard-box p {
    font-size: 16px;
    margin: 0;
    color: var(--ink);
    line-height: 1.6;
    max-width: 80ch;
}

.evidence-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0 48px;
}
.evidence-list-card {
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.evidence-list-card.strong {
    border-left: 4px solid var(--green);
}
.evidence-list-card.strong h3 { color: var(--green); }
.evidence-list-card.weak {
    border-left: 4px solid var(--clay);
}
.evidence-list-card.weak h3 { color: var(--clay); }
.evidence-list-card h3 {
    margin-top: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.evidence-list-card ul {
    padding-left: 20px;
    margin: 0;
}
.evidence-list-card li {
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--ink);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 40px 0 48px;
}
.process-step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.process-step-num {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
}
.process-step h4 {
    margin: 0 0 8px;
    font-size: 16px;
}
.process-step p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

.honest-framing {
    margin: 48px 0;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.honest-framing h2 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 14px;
}
.honest-framing p {
    font-size: 16px;
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}

.report-section {
    background: var(--paper-2);
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 36px 24px;
    text-align: center;
    margin: 48px 0;
}
.report-section h3 {
    margin-top: 0;
    font-size: 22px;
    margin-bottom: 12px;
}
.report-section p {
    font-size: 16px;
    color: var(--muted);
    margin: 0 0 24px;
    line-height: 1.5;
}

.cta-band {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 64px 0 48px;
    flex-wrap: wrap;
}

/* About page */
.about-hero {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    padding: 72px 0 64px;
    position: relative;
    overflow: hidden;
}
.about-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    margin: 0 0 18px;
    max-width: 18ch;
}
.about-hero .lede {
    max-width: 58ch;
}

.about-body {
    padding-top: 8px;
}
.about-section {
    padding: 40px 0;
    max-width: 68ch;
}
.about-section h2 {
    font-size: clamp(24px, 3vw, 30px);
    margin: 0 0 16px;
}
.about-section p {
    font-size: 18px;
    color: var(--ink);
    margin: 0 0 16px;
    line-height: 1.65;
}
.about-section p:last-child {
    margin-bottom: 0;
}

.pull-quote {
    margin: 24px 0;
    padding: 48px 24px;
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.pull-quote-seal {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    color: var(--gold);
    font-size: 22px;
}
.pull-quote blockquote {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-size: clamp(24px, 3.5vw, 34px);
    line-height: 1.25;
    color: var(--ink);
}

.about-founder {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 36px;
    align-items: center;
    max-width: none;
}
.founder-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    aspect-ratio: 1 / 1;
    background: var(--paper-2);
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}
.founder-photo-seal {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    color: var(--gold);
    font-size: 18px;
}
.founder-photo.has-image {
    padding: 0;
    border: 1px solid var(--line);
    overflow: hidden;
}
.founder-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-founder-copy { min-width: 0; }
.about-founder-copy h2 { margin-top: 0; }

.beliefs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}
.beliefs-list li {
    position: relative;
    padding-left: 30px;
    font-size: 18px;
    color: var(--ink);
    line-height: 1.6;
}
.beliefs-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--gold);
    font-size: 16px;
}

.about-cta { margin-top: 24px; }
.about-cta-secondary {
    color: var(--paper) !important;
    border-color: rgba(250, 246, 238, 0.4);
}
.about-cta-secondary:hover {
    background: rgba(250, 246, 238, 0.08);
    border-color: var(--paper);
}

@media (max-width: 768px) {
    .evidence-comparison, .badge-explanation-grid, .process-steps {
        grid-template-columns: 1fr;
    }
    .about-founder {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .founder-photo {
        aspect-ratio: 16 / 9;
        max-width: 320px;
    }
}

/* Error / 404 page */
.error-page {
    padding: var(--section-y) 0;
    text-align: center;
}
.error-page .container { max-width: 640px; }
.error-seal {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px; margin-bottom: var(--space-5);
    border-radius: 50%; border: 2px solid var(--gold); color: var(--gold);
    font-size: 30px;
}
.error-page h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 var(--space-4); }
.error-page .lede { margin: 0 auto var(--space-6); max-width: 52ch; }
.error-page .hero-ctas { justify-content: center; }
.error-reqid { margin-top: var(--space-6); font-size: 13px; color: var(--muted); }
.error-reqid code { background: var(--paper-2); padding: 2px 6px; border-radius: 4px; }

/* Search wrapper and clear button */
.search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 200px;
    max-width: 300px;
}
.search-wrapper input[type="search"] {
    width: 100%;
    padding-right: 36px !important;
}
.search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: none;
}
.search-clear:hover {
    color: var(--clay);
}

/* Safety & Standards Page */
.hazard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 32px 0 48px;
}
.hazard-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.hazard-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
}
.hazard-icon {
    font-size: 32px;
    margin-bottom: 16px;
    display: inline-block;
}

@media (max-width: 768px) {
    .hazard-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Warmth & trust pass (mom-appeal): lifestyle hero, tile imagery, founder note, mobile CTA --- */

/* Split hero: copy left, lifestyle photo right */
.hero-split { padding: var(--space-7) 0; }
.hero-split-inner {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: var(--space-7);
    align-items: center;
}
.hero-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transform: rotate(1.2deg);
    background: var(--paper-2);
}
.hero-media img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 860px) {
    .hero-split-inner { grid-template-columns: 1fr; gap: var(--space-5); }
    .hero-media { transform: none; max-width: 560px; }
}

/* Category tiles with warm imagery */
.category-tile { padding: 0; overflow: hidden; }
.category-tile-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
}
.category-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-base) var(--ease);
}
.category-tile:hover .category-tile-media img { transform: scale(1.04); }
.category-tile-body { padding: 18px 20px 20px; }

/* Featured brands sit on a soft sage band (gentle rhythm between paper sections) */
.featured-section {
    background: var(--sage);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    max-width: none;
    padding: var(--space-7) var(--space-5);
    margin-bottom: var(--space-7);
}
.featured-section .section-title,
.featured-section .featured-grid { max-width: var(--container-max); margin-left: auto; margin-right: auto; }
.featured-section .section-title { margin-bottom: var(--space-5); }

/* Founder note — a human voice right before the ask */
.founder-note { background: var(--paper-2); border-top: 1px solid var(--line); padding: var(--space-7) 0; }
.founder-note-inner { max-width: 720px; text-align: center; }
.founder-note-seal { color: var(--gold); font-size: 22px; display: block; margin-bottom: var(--space-3); }
.founder-note blockquote {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(19px, 2.6vw, 24px);
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 var(--space-4);
}
.founder-note a { font-weight: 600; }

/* Signature flourish — the founder note gently rises as it enters the viewport.
   Uses scroll-driven animations (Chromium 115+, Firefox 124+ behind flag, Safari
   experimental). The @supports gate means non-supporting browsers see the static
   layout exactly as before (no FOUC, no broken state). Already covered by the
   global prefers-reduced-motion reset above. */
@supports (animation-timeline: view()) {
    .founder-note-inner {
        opacity: 0;
        transform: translateY(18px);
        animation: founderRise linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 28%;
    }
    .founder-note-seal {
        animation: sealPulse 2.6s ease-out both;
        animation-timeline: view();
        animation-range: entry 30% entry 80%;
    }
}
@keyframes founderRise {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes sealPulse {
    0%   { transform: scale(1);    text-shadow: 0 0 0 rgba(184, 134, 47, 0); }
    35%  { transform: scale(1.12); text-shadow: 0 0 14px rgba(184, 134, 47, .35); }
    100% { transform: scale(1);    text-shadow: 0 0 0 rgba(184, 134, 47, 0); }
}

/* Waitlist privacy reassurance */
.form-privacy { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.waitlist-band .form-privacy { color: var(--ink-soft); }

/* Footer promise line */
.footer-promise { font-size: 13.5px; color: var(--muted); margin: 2px 0 0; }

/* Detail page: location pin + badge reassurance beside the visit CTA */
.loc-pin { vertical-align: -1px; margin-right: 4px; color: var(--clay); }
.brand-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.brand-links-assurance { display: inline-flex; align-items: center; gap: 8px; }
.brand-links-assurance-note { font-size: 13px; color: var(--muted); }

/* Thumb-zone CTA — small fixed pill on phones only */
.mobile-cta { display: none; }
@media (max-width: 760px) {
    .mobile-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        right: var(--space-4);
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        z-index: 90;
        background: var(--ink);
        color: var(--paper) !important;
        font-weight: 600;
        font-size: 14px;
        padding: 12px 18px;
        min-height: 44px;
        border-radius: var(--radius-pill);
        box-shadow: var(--shadow-pop);
    }
    .mobile-cta:hover { text-decoration: none; background: var(--ink-dark); }
    body { padding-bottom: 76px; } /* keep the pill clear of footer content */
}

/* --- Catalog engine: submit form + brand spec list --- */

/* Public submission / claim form */
.submit-page { padding: var(--section-y) 0 var(--space-8); max-width: 760px; }
.submit-intro { margin-bottom: var(--space-6); }
.submit-intro h1 { font-size: clamp(28px, 4.5vw, 42px); margin: 6px 0 14px; }
.submit-form { display: flex; flex-direction: column; gap: var(--space-5); }
.submit-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: var(--space-5) var(--space-5) var(--space-4);
    margin: 0;
}
.submit-fieldset legend {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    padding: 0 var(--space-2);
    margin-left: calc(var(--space-2) * -1);
}
.submit-form .form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.submit-form .form-field:last-child { margin-bottom: 0; }
.submit-form label { font-size: 14px; font-weight: 600; color: var(--ink); }
.submit-form .opt { font-weight: 400; color: var(--muted); font-size: 13px; }
.submit-form input,
.submit-form select,
.submit-form textarea {
    font: inherit; font-size: 16px; /* 16px avoids iOS zoom-on-focus */
    padding: 11px 14px; min-height: 46px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; color: var(--ink); width: 100%;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.submit-form textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.submit-form input:hover, .submit-form select:hover, .submit-form textarea:hover { border-color: var(--muted); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .form-grid-2 { grid-template-columns: 1fr; } }
.submit-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.submit-actions .form-privacy { margin: 0; }
/* Honeypot — visually hidden but reachable to bots that ignore CSS */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Submission success */
.submit-success { text-align: center; max-width: 560px; margin: var(--space-6) auto; }
.submit-success-seal {
    display: inline-grid; place-items: center;
    width: 60px; height: 60px; margin-bottom: var(--space-4);
    border-radius: 50%; border: 2px solid var(--green); color: var(--green); font-size: 28px;
}
.submit-success h1 { color: var(--green); margin-bottom: var(--space-3); }
.submit-success .btn { margin-top: var(--space-5); }

/* Brand-page "The details" spec list */
.brand-specs { margin: 0 0 var(--space-7); }
.brand-specs h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--space-4); }
.spec-list { margin: 0; display: grid; gap: var(--space-3); }
.spec { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4); align-items: baseline; }
.spec dt { font-weight: 600; color: var(--ink); margin: 0; }
.spec dd { margin: 0; color: var(--muted); }
.spec-certs { display: flex; flex-wrap: wrap; gap: 8px; }
.cert-chip {
    display: inline-flex; align-items: center;
    background: rgba(60,107,74,.10); color: var(--green);
    border: 1px solid rgba(60,107,74,.28);
    font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: var(--radius-pill);
}
@media (max-width: 560px) { .spec { grid-template-columns: 1fr; gap: 2px; } }

/* ============================================================
   THE TRUSTED STANDARD — sister section (trusted worldwide).
   A deliberately distinct accent (deep teal-green) so this
   section never reads as the American-made (clay/gold + seal)
   experience. Tokens harmonize with the warm paper palette.
   ============================================================ */
:root {
    --trust: #2F6B5E;          /* The Trusted Standard accent */
    --trust-dark: #245447;     /* hover/active + emphasis text */
    --trust-soft: #E7F0EC;     /* tinted surface */
    --trust-ink: #1D4D42;      /* readable text on the tint */
}

/* Trusted badge — globe mark, teal pill. Reuses the base .badge layout. */
.badge-trusted {
    background: var(--trust-soft);
    color: var(--trust-ink);
    border-color: rgba(47, 107, 94, .28);
}

/* Trusted status word in the detail verify-box. */
.t-trusted { color: var(--trust-dark); }

/* Detail verify-box, trusted variant. */
.verify-box.trusted {
    background: var(--trust-soft);
    border-color: rgba(47, 107, 94, .30);
}
.verify-box.trusted h2 { color: var(--trust-ink); }

/* Section hero + strip accents. */
.trusted-hero .eyebrow { color: var(--trust-dark); }
.trusted-note {
    margin-top: var(--space-4);
    font-size: 14px;
    color: var(--muted);
}
.trusted-note a { color: var(--trust-dark); font-weight: 600; }
.trusted-strip { background: var(--trust-soft); }
.trusted-strip .trust-strip-seal { color: var(--trust); display: inline-flex; align-items: center; }

/* Tie the section's primary CTAs to the accent. */
.trusted-hero .btn-primary,
.trusted-empty .btn-primary {
    background: var(--trust);
    border-color: var(--trust);
}
.trusted-hero .btn-primary:hover,
.trusted-empty .btn-primary:hover {
    background: var(--trust-dark);
    border-color: var(--trust-dark);
}

/* Empty state for a not-yet-stocked section. */
.trusted-empty h2 { margin-bottom: var(--space-3); }
.trusted-empty .empty-sub { margin-top: var(--space-4); font-size: 14px; }

/* Nav link active state on the Trusted section. */
.nav-trusted.active { color: var(--trust-dark); }

/* ============================================================
   Standards library, sourced claims, and recall notices
   ============================================================ */

/* --- Origin line: identical treatment for every region --- */
.origin-line { color: var(--muted); font-size: 14px; margin: 0 0 var(--space-2); }
.origin-sep { margin: 0 6px; opacity: .6; }
.origin-regime { color: var(--muted); }
.detail-regime { color: var(--muted); font-size: .92em; }

/* --- Section notes: explain why a band exists, not just what's in it --- */
.section-note {
    max-width: 62ch;
    margin: -8px auto var(--space-5);
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

/* --- Per-claim citation lists --- */
.claims-heading {
    font-size: 15px;
    font-weight: 600;
    margin: var(--space-5) 0 var(--space-3);
    letter-spacing: .01em;
}
.claims-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.claim {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}
.claims-list > .claim:last-child { border-bottom: none; padding-bottom: 0; }
.claim-name { font-weight: 600; text-decoration: none; }
.claim-name:hover { text-decoration: underline; }
.claim-scope { color: var(--muted); font-size: 13.5px; flex: 1 1 260px; line-height: 1.45; }
.claim-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: 12.5px;
    color: var(--muted);
    margin-left: auto;
}
/* The verification method is stated plainly, including when it's weak. */
.claim-method {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper-2);
}
.claim-date { white-space: nowrap; }

/* --- Standards library --- */
.standards-group { margin-bottom: var(--space-7); }
.standards-group-note { color: var(--muted); max-width: var(--measure); margin-bottom: var(--space-4); }
.standards-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.standard-row { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.standards-list > .standard-row:last-child { border-bottom: none; padding-bottom: 0; }
.standard-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.standard-name { font-weight: 600; font-size: 17px; text-decoration: none; }
.standard-name:hover { text-decoration: underline; }
.standard-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
}
.standard-kind-mandatory { color: var(--clay); }
.standard-kind-voluntary { color: var(--gold-dark); }
.standard-kind-material  { color: var(--green); }
.standard-count { color: var(--muted); font-size: 13px; margin-left: auto; white-space: nowrap; }
.standard-summary { color: var(--muted); margin: 0; max-width: var(--measure); }
.standard-body { max-width: var(--measure); }
.standard-body h3 { margin-top: var(--space-5); font-size: 16px; }
.standards-cite-note { color: var(--muted); max-width: var(--measure); }

/* --- Callouts --- */
.callout {
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    background: var(--paper-2);
    max-width: var(--measure);
}
.callout p { margin: 0 0 var(--space-3); }
.callout p:last-child { margin-bottom: 0; }
.callout-warn { border-left-color: var(--gold); }
.callout-source { border-left-color: var(--green); }
.source-checked { color: var(--muted); font-size: 14px; }

/* --- Methodology page --- */
.hero-narrow { padding-block: var(--space-7) var(--space-5); }
.prose { max-width: 760px; padding-bottom: var(--space-8); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-5); font-size: 16px; }
.prose p, .prose li { max-width: var(--measure); }
.prose-updated { color: var(--muted); font-size: 14px; margin-top: var(--space-7); }
.source-hierarchy { counter-reset: src; }
.source-hierarchy li { margin-bottom: var(--space-3); }
.tier-explainer { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
.tier-explainer-row {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: var(--space-4);
    align-items: start;
}
.tier-explainer-row p { margin: 0; }

/* --- Recall notices --- */
.recalls-meta { color: var(--muted); font-size: 14px; margin-bottom: var(--space-4); }
.recall-list { list-style: none; padding: 0; margin: var(--space-5) 0; display: grid; gap: var(--space-5); }
.recall { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.recall-list > .recall:last-child { border-bottom: none; padding-bottom: 0; }
.recall-date {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    color: var(--muted);
    font-size: 12.5px;
    margin: 0 0 var(--space-2);
}
.recall-authority {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.recall-title { font-size: 16px; line-height: 1.4; margin: 0 0 var(--space-2); }
.recall-title a { text-decoration: none; }
.recall-title a:hover { text-decoration: underline; }
.recall-hazard { margin: 0 0 var(--space-2); font-size: 14.5px; max-width: var(--measure); }
.recall-hazard-label {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 10.5px;
    color: var(--clay);
    margin-right: var(--space-2);
}
.recall-company { color: var(--muted); font-size: 13.5px; margin: 0; }
.recall-match {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    opacity: .8;
}
.recall-note { color: var(--muted); font-size: 13.5px; max-width: var(--measure); }

/* A recall on a brand page outranks everything else on it. */
.recall-alert {
    border: 1px solid var(--clay);
    border-left: 4px solid var(--clay);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin: var(--space-5) 0;
    background: color-mix(in srgb, var(--clay) 4%, var(--paper));
}
.recall-alert > h2 { font-size: 17px; margin: 0 0 var(--space-3); color: var(--clay-dark); }
.recall-list-compact { gap: var(--space-4); margin: 0 0 var(--space-3); }

/* --- Safety Watch --- */
.watch-section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.watch-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.watch-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--clay) 3%, transparent);
}
.watch-brand { min-width: 0; }
.watch-name { font-weight: 600; font-size: 18px; color: var(--ink); text-decoration: none; }
.watch-name:hover { color: var(--clay); text-decoration: none; }
.watch-meta { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.watch-count { font-size: 14px; font-weight: 600; color: var(--clay-dark); white-space: nowrap; margin: 0; }
.watch-row .recall { grid-column: 1 / -1; border-bottom: none; padding-bottom: 0; }
.watch-band {
    border: 1px solid var(--line);
    border-left: 4px solid var(--clay);
    border-radius: var(--radius);
    padding: var(--space-5);
    background: color-mix(in srgb, var(--clay) 3%, transparent);
}

/* --- Admin stats --- */
.admin-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-5) 0; }
.admin-stats dt { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.admin-stats dd { margin: 4px 0 0; font-size: 24px; font-weight: 600; }
.admin-note { color: var(--muted); font-size: 13.5px; margin-top: var(--space-5); }
.admin-lede { color: var(--muted); max-width: var(--measure); }

@media (max-width: 600px) {
    .claim-meta { margin-left: 0; }
    .standard-count { margin-left: 0; }
    .tier-explainer-row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* --- Recall authority filter strip --- */
.authority-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: 0;
    margin: 0 0 var(--space-4);
    font-size: 14px;
}
.authority-strip li { display: flex; align-items: baseline; gap: 6px; }
.authority-strip a { text-decoration: none; }
.authority-strip a:hover { text-decoration: underline; }
.authority-strip a.is-active { font-weight: 600; color: var(--ink); }
.authority-count { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.authority-clear { color: var(--muted); }

/* Structured facts the EU feed publishes and the others don't. */
.recall-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-2);
    font-size: 12.5px;
}
.recall-fact {
    color: var(--muted);
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}
.recall-fact-quiet { border-style: dashed; opacity: .85; }

/* Admin per-authority table */
.admin-table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; font-size: 14px; }
.admin-table th, .admin-table td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
}
.admin-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    font-weight: 500;
}
.admin-table tbody td { font-variant-numeric: tabular-nums; }

/* --- Changelog --- */
.changelog-month { margin-bottom: var(--space-7); }
.changelog-month-heading {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    font-weight: 600;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-4);
}
.changelog-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.change { padding-left: var(--space-4); border-left: 3px solid var(--line); }
.change-added     { border-left-color: var(--green); }
.change-sourced   { border-left-color: var(--ink-lift); }
.change-corrected { border-left-color: var(--clay); }
.change-removed   { border-left-color: var(--muted); }
.change-policy    { border-left-color: var(--gold); }

.change-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    font-size: 12.5px;
    color: var(--muted);
}
.change-kind {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
}
.change-kind-added     { color: var(--green); }
.change-kind-sourced   { color: var(--ink-lift); }
.change-kind-corrected { color: var(--clay); }
.change-kind-removed   { color: var(--muted); }
.change-kind-policy    { color: var(--gold-dark); }

.change-summary { margin: 0 0 var(--space-2); font-weight: 600; max-width: var(--measure); }
.change-detail { margin: 0 0 var(--space-2); color: var(--muted); font-size: 15px; max-width: var(--measure); }
.change-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; font-size: 13.5px; }