/* ==========================================================================
   Public site.

   Built for the target reader: a parent or customer on an Android phone,
   outdoors, on 3G. That drives every decision here — system fonts so nothing
   blocks on a download, high contrast so it survives sunlight, 44px tap
   targets, and one accent colour spent only on calls to action and the
   verified badge so the badge stays the loudest thing on the page.

   Layout is mobile-first. The grid goes 1 column, 2 at 40rem, 3 at 64rem.
   ========================================================================== */

:root {
    --bg:            #faf9f6;
    --surface:       #ffffff;
    --surface-sunk:  #f1efe9;
    --line:          #e3e0d8;
    --line-strong:   #c8c4b8;

    --fg:            #17160f;
    --fg-muted:      #5f5c51;
    --fg-faint:      #8b877b;

    /* Spent only on primary actions and the verified badge. */
    --accent:        #0d6e4a;
    --accent-hover:  #095539;
    --accent-soft:   #e0f0e8;
    --accent-text:   #ffffff;

    --warn:          #8a5a00;
    --warn-soft:     #fdf3de;
    --info:          #17527e;

    --radius:        12px;
    --radius-sm:     8px;
    --tap:           44px;
    --shadow:        0 1px 2px rgba(23, 22, 15, .05);
    --shadow-lift:   0 2px 10px rgba(23, 22, 15, .08);

    --wrap:          76rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:           #14150f;
        --surface:      #1d1f18;
        --surface-sunk: #262820;
        --line:         #343629;
        --line-strong:  #4a4d3d;

        --fg:           #eceada;
        --fg-muted:     #a8a596;
        --fg-faint:     #7d7a6d;

        --accent:       #3fbc8a;
        --accent-hover: #55cd9c;
        --accent-soft:  #12352a;
        --accent-text:  #06130d;

        --warn:         #dfb35d;
        --warn-soft:    #35290f;
        --info:         #7db4e0;

        --shadow:       none;
        --shadow-lift:  none;
    }
}

*, *::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: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    /* System stack: nothing to download, nothing to block rendering. */
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
    overflow-wrap: break-word;
}

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

a { color: var(--info); text-underline-offset: 2px; }
a:hover { color: var(--fg); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 680; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

@media (min-width: 48rem) {
    h1 { font-size: 2.1rem; }
    h2 { font-size: 1.4rem; }
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }

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

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--accent-text);
    padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--accent-text); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 60px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1rem;
}

.brand {
    font-weight: 750;
    font-size: 1.05rem;
    color: var(--fg);
    text-decoration: none;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.brand:hover { color: var(--fg); }

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

.site-nav a {
    display: none;
    align-items: center;
    min-height: 40px;
    padding: 0 .75rem;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    text-decoration: none;
    font-size: .94rem;
    font-weight: 550;
}
.site-nav a:hover { background: var(--surface-sunk); color: var(--fg); }
.site-nav a[aria-current="page"] { color: var(--fg); background: var(--surface-sunk); }

@media (min-width: 56rem) {
    .site-nav a { display: inline-flex; }
}

/* Below 56rem the same links live in a disclosure panel. */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
@media (min-width: 56rem) { .nav-toggle { display: none; } }

.nav-panel {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: .5rem 1rem 1rem;
}
.nav-panel[data-open="true"] { display: block; }
@media (min-width: 56rem) { .nav-panel { display: none !important; } }

.nav-panel a {
    display: block;
    padding: .8rem .25rem;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    text-decoration: none;
    font-weight: 550;
}
.nav-panel a:last-child { border-bottom: 0; }

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

.hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 2rem 0 1.75rem;
}
.hero__inner { max-width: 48rem; margin: 0 auto; padding: 0 1rem; text-align: center; }
.hero h1 { margin-bottom: .4rem; }
.hero__sub { color: var(--fg-muted); margin-bottom: 1.5rem; font-size: 1.02rem; }

.search {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
}

@media (min-width: 40rem) {
    .search {
        flex-direction: row;
        background: var(--surface);
        border: 2px solid var(--line-strong);
        border-radius: var(--radius);
        padding: .35rem;
        gap: .35rem;
    }
    .search:focus-within { border-color: var(--accent); }
}

.search__field { flex: 1 1 auto; min-width: 0; }
.search__region { flex: 0 0 auto; }

.search input[type="search"],
.search select {
    width: 100%;
    min-height: var(--tap);
    padding: .6rem .8rem;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: 1rem;
}

@media (min-width: 40rem) {
    .search input[type="search"],
    .search select { border: 0; padding: .5rem .7rem; }
    .search select { border-left: 1px solid var(--line); border-radius: 0; min-width: 11rem; }
    .search input:focus-visible, .search select:focus-visible { outline-offset: -2px; }
}

.search button {
    min-height: var(--tap);
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-text);
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}
.search button:hover { background: var(--accent-hover); }

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin-top: 1.25rem;
}
.quick-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 .8rem;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    background: var(--surface);
    color: var(--fg-muted);
    text-decoration: none;
    font-size: .87rem;
}
.quick-links a:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------- category strip -- */

.strip {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.strip__scroll {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .85rem 1rem;
    max-width: var(--wrap);
    margin: 0 auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.strip__scroll::-webkit-scrollbar { height: 4px; }
.strip__scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.chip {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    flex: 0 0 auto;
    min-height: 40px;
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--surface);
    color: var(--fg);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 550;
    white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--fg); }
.chip__count { color: var(--fg-faint); font-size: .82rem; font-variant-numeric: tabular-nums; }
.chip[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip[aria-current="page"] .chip__count { color: var(--bg); opacity: .7; }

/* ------------------------------------------------------------- sections -- */

.section { padding: 2rem 0; }
.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.section__head h2 { margin: 0; }
.section__more { font-size: .92rem; font-weight: 600; white-space: nowrap; }

/* Browse links up into the hub pages a listing belongs to. Wraps rather than
   scrolls: on a narrow phone these should stack, not hide. */
.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
.link-list li { margin: 0; }
.link-list a {
    display: inline-block;
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .92rem;
    text-decoration: none;
}
.link-list a:hover, .link-list a:focus { border-color: var(--accent); }

.intro {
    max-width: 46rem;
    color: var(--fg-muted);
    font-size: 1.02rem;
    margin-bottom: 1.5rem;
}
.intro p { margin-bottom: .85rem; }

/* ---------------------------------------------------------------- cards -- */

.grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: var(--shadow);
    position: relative;
}
.card:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); }

.card__top { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .6rem; }

/* The tile is always present; a photograph sits on top of it. A missing or
   still-loading image therefore shows a neutral square with the initial,
   never a broken-image icon. */
.card__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    overflow: hidden;
}
.card__thumb--initial {
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; color: var(--fg-faint);
}
.card__thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.card__title { font-size: 1.05rem; font-weight: 650; margin: 0 0 .2rem; line-height: 1.3; }
.card__title a { color: var(--fg); text-decoration: none; }
/* The whole card is the target, but the name stays the accessible label. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:hover { text-decoration: underline; }

.card__category { color: var(--fg-muted); font-size: .87rem; }

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    color: var(--fg-muted);
    font-size: .87rem;
    margin-top: auto;
    padding-top: .7rem;
}
.card__meta span { display: inline-flex; align-items: center; gap: .3rem; }

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.card__cta {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 .9rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 650;
    position: relative; z-index: 1;
}
.card__cta:hover { background: var(--accent-hover); color: var(--accent-text); }

.card__save-form { position: relative; z-index: 1; margin-right: auto; }

.card__save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap); min-height: var(--tap);
    margin: -.3rem 0 -.3rem -.5rem;
    border: 0; background: none; cursor: pointer;
    color: var(--fg-faint);
}
.card__save:hover { color: var(--accent); }

/* A draft has no page to link to, so the card states that plainly rather
   than offering a dead link. */
.card--unlisted { background: var(--surface-sunk); border-style: dashed; }
.card--unlisted .card__title { color: var(--fg-muted); }
.card--unlisted .card__note { font-size: .82rem; color: var(--fg-faint); margin-top: .5rem; }

/* --------------------------------------------------------------- badges -- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .6rem;
    border-radius: 100px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* The product's core promise, and the most distinctive element on the site. */
.badge--verified {
    background: var(--accent);
    color: var(--accent-text);
}
.badge--verified svg { width: 12px; height: 12px; }

.badge--unverified { background: var(--surface-sunk); color: var(--fg-muted); border: 1px solid var(--line-strong); }
.badge--level { background: var(--surface-sunk); color: var(--fg-muted); font-weight: 600; }

/* ----------------------------------------------------------- breadcrumbs -- */

.crumbs { padding: .9rem 0 0; font-size: .87rem; color: var(--fg-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.crumbs li::after { content: "›"; margin-left: .35rem; color: var(--fg-faint); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--fg-muted); }
.crumbs [aria-current="page"] { color: var(--fg); }

/* --------------------------------------------------------------- browse -- */

.tabs {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.25rem;
    padding-bottom: 0;
}
.tabs a {
    flex: 0 0 auto;
    padding: .7rem .9rem;
    color: var(--fg-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: .94rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------ link lists -- */

.link-grid {
    display: grid;
    gap: .3rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.link-grid a {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: baseline;
    min-height: 40px;
    padding: .45rem .1rem;
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.link-grid a:hover { color: var(--accent); }
.link-grid .count { color: var(--fg-faint); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- pagination -- */

.pager { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-top: 1.75rem; }
.pager a, .pager span {
    min-width: var(--tap); min-height: var(--tap);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    text-decoration: none;
    font-size: .93rem;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 650; }
.pager__gap { border: 0; background: none; min-width: 1.5rem; color: var(--fg-faint); }
.pager__summary { margin-left: auto; color: var(--fg-muted); font-size: .87rem; }

/* ----------------------------------------------------------------- misc -- */

.empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--fg-muted);
}
.empty h2 { color: var(--fg); }

.source-note {
    font-size: .85rem;
    color: var(--fg-faint);
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.muted { color: var(--fg-muted); }
.small { font-size: .88rem; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------- results and facets -- */

.results { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }

@media (min-width: 62rem) {
    .results { grid-template-columns: 15rem 1fr; align-items: start; }
    .facets { position: sticky; top: 76px; }
}

.grid--results { grid-template-columns: 1fr; }
@media (min-width: 46rem) { .grid--results { grid-template-columns: repeat(2, 1fr); } }

.facets {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .25rem 1rem 1rem;
}

.facets__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0 .3rem;
}
.facets__head h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
                   color: var(--fg-faint); margin: 0; }
.facets__clear { font-size: .82rem; }

.facet { border-top: 1px solid var(--line); padding: .75rem 0 .35rem; }
.facet__title { font-size: .88rem; margin-bottom: .35rem; }

.facet__options { list-style: none; margin: 0; padding: 0; }

.facet__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 38px;
    padding: .3rem .5rem;
    margin: 0 -.5rem;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    text-decoration: none;
    font-size: .9rem;
}
.facet__option:hover { background: var(--surface-sunk); color: var(--fg); }

.facet__option--active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 650;
}
.facet__option--active:hover { background: var(--accent-soft); color: var(--accent); }

/* The active option doubles as its own remove control. */
.facet__option--active .facet__label::after {
    content: " ×";
    font-weight: 400;
}

.facet__count { color: var(--fg-faint); font-size: .82rem; font-variant-numeric: tabular-nums; }
.facet__option--active .facet__count { color: var(--accent); }

/* -------------------------------------------------------- listing page -- */

.listing { padding: 1.25rem 0 0; max-width: 52rem; }

.listing__head { margin-bottom: 1.25rem; }
.listing__head h1 { margin: .6rem 0 .3rem; }
.listing__sub { color: var(--fg); font-size: 1rem; margin-bottom: .3rem; }

.notice {
    background: var(--warn-soft);
    color: var(--warn);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    font-size: .92rem;
    margin-bottom: 1.25rem;
}
.notice a { color: inherit; }

/* Contact actions. WhatsApp leads because that is how a conversation
   usually starts here. Every target clears 44px. */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.75rem;
}
.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    flex: 1 1 auto;
}
.action:hover { border-color: var(--accent); color: var(--accent); }
.action--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}
.action--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }

@media (min-width: 40rem) {
    .action { flex: 0 0 auto; }
}

.listing__section { margin-bottom: 2rem; }
.listing__section h2 { margin-bottom: .75rem; }

.prose p { margin-bottom: .9rem; }

.facts { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 0 1.25rem; margin: 0; }
.facts dt { color: var(--fg-muted); padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.facts dd { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--line); }

@media (max-width: 34rem) {
    .facts { grid-template-columns: 1fr; }
    .facts dt {
        padding-bottom: 0; border-bottom: 0;
        font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
    }
}

/* ---------------------------------------------------------------- chart -- */

.chart-figure { margin: 0 0 1.25rem; }
.chart { width: 100%; height: auto; display: block; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: var(--accent); opacity: .1; stroke: none; }
.chart__dot { fill: var(--accent); }
.chart__axis { fill: var(--fg-faint); font-size: 11px; font-family: inherit; }
.chart__value { fill: var(--fg-muted); font-size: 11px; font-weight: 600; font-family: inherit; }

/* ----------------------------------------------------------- data table -- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th, .data-table td {
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}
.data-table thead th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fg-faint);
}
.data-table tbody th { font-weight: 650; }
.data-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------- provenance -- */

.provenance {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 2rem;
}
.provenance__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
                     color: var(--fg-faint); margin-bottom: .6rem; }
.provenance__list { list-style: none; margin: 0 0 .75rem; padding: 0; font-size: .9rem; }
.provenance__list li { padding: .2rem 0; }

/* -------------------------------------------------------- account forms -- */

.narrow { max-width: 34rem; }

.stacked-form { margin-top: 1.5rem; }
.stacked-form .field { margin-bottom: 1.1rem; }
.stacked-form label {
    display: block;
    font-size: .9rem;
    font-weight: 620;
    margin-bottom: .3rem;
}
.stacked-form .label__hint { font-weight: 400; color: var(--fg-muted); }

.stacked-form input[type="text"], .stacked-form input[type="email"],
.stacked-form input[type="tel"], .stacked-form input[type="password"],
.stacked-form select, .stacked-form textarea {
    width: 100%;
    min-height: var(--tap);
    padding: .6rem .75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: 1rem;
}
.stacked-form textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.stacked-form input[aria-invalid="true"] { border-color: #a8271d; }

.stacked-form button { width: 100%; }
@media (min-width: 34rem) { .stacked-form button { width: auto; min-width: 12rem; } }

.field__error { color: #a8271d; font-size: .87rem; margin: .3rem 0 0; }
.field__help { color: var(--fg-muted); font-size: .87rem; margin: .3rem 0 0; }
.label__hint { font-weight: 400; color: var(--fg-muted); }

@media (prefers-color-scheme: dark) {
    .field__error { color: #f08a80; }
    .stacked-form input[aria-invalid="true"] { border-color: #f08a80; }
}

/* Where the reader is in the claim process. */
.steps { list-style: none; margin: 1.5rem 0; padding: 0; counter-reset: step; }
.steps__item {
    position: relative;
    padding: .6rem 0 .6rem 2.25rem;
    color: var(--fg-faint);
    counter-increment: step;
}
.steps__item::before {
    content: counter(step);
    position: absolute;
    left: 0; top: .55rem;
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.steps__item--done { color: var(--fg-muted); }
.steps__item--done::before {
    content: "✓";
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}
.steps__item--current { color: var(--fg); font-weight: 600; }
.steps__item--current::before { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------- ad slots -- */

/*
 * Every slot reserves its height whether or not it is filled, so arriving
 * creative never pushes content around. Nothing renders above the main
 * content on mobile.
 */
.ad { display: block; margin: 1.25rem auto; text-align: center; overflow: hidden; }
.ad--top          { min-height: 90px; }
.ad--in_content   { min-height: 250px; }
.ad--sidebar      { min-height: 600px; }
.ad--bottom       { min-height: 250px; }
.ad--mobile_sticky {
    position: fixed; bottom: 0; left: 0; right: 0;
    min-height: 50px; margin: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    z-index: 25;
}
.ad__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); }

@media (max-width: 63.99rem) {
    .ad--top { display: none; }
}

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

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--line);
    margin-top: 3rem;
    padding: 2.5rem 0 2rem;
    font-size: .92rem;
}

.footer-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.footer-grid h3 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--fg-faint);
    margin-bottom: .7rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .1rem; }
.footer-grid li a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--fg-muted);
    text-decoration: none;
}
.footer-grid li a:hover { color: var(--accent); }

.footer-blurb { color: var(--fg-muted); max-width: 24rem; }
.footer-blurb strong { color: var(--fg); display: block; margin-bottom: .4rem; font-size: 1.02rem; }

.footer-bottom {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    color: var(--fg-faint);
    font-size: .85rem;
}
.footer-bottom a { color: var(--fg-muted); }

/* Required by the ODbL licence wherever OpenStreetMap data is used. */
.attribution { max-width: 34rem; }

/* Owned-listing rows in the account area: one action per line, comfortably
   tappable on a phone. */
.link-list--stacked { list-style: none; padding: 0; margin: 0; }
.link-list--stacked li {
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: baseline;
}
.link-list--stacked li:last-child { border-bottom: 0; }