/* =============================================================================
   FindThatRoof — design system

   Palette is taken directly from the logo: #1c2730 charcoal and #5d9821 green.

   The raw brand green is only 3.5:1 on white, so it cannot carry body text. Two
   derived greens do the accessible work: --green-deep (5.0:1 on white) for
   buttons and links, and --green-light (6.4:1 on the charcoal hero) for text on
   dark. Core --green stays for marks, rules and borders where contrast rules do
   not apply.

   System fonts throughout: the map embed already spends the network budget on
   Google Maps, so the page itself makes zero font requests.
   ============================================================================= */

:root {
    /* Straight from the logo */
    --ink: #1c2730;
    --green: #5d9821;

    /* Derived for contrast */
    --green-deep: #4a7c1a;
    --green-light: #7fb84a;
    --green-tint: #eef5e6;

    --ink-soft: #55636e;
    --bg: #ffffff;
    --bg-alt: #f5f7f8;
    --surface: #ffffff;
    --line: #e1e6ea;
    --line-strong: #c8d1d8;

    --brand: var(--ink);
    --brand-ink: #ffffff;

    --hero-bg: linear-gradient(160deg, #22303b 0%, #1c2730 55%, #151e26 100%);
    --hero-ink: #ffffff;
    --hero-ink-soft: #b3c0cb;
    --hero-chip-bg: rgba(255, 255, 255, 0.08);
    --hero-chip-line: rgba(255, 255, 255, 0.16);

    --btn-primary-bg: var(--green-deep);
    --btn-primary-ink: #ffffff;
    --btn-primary-bg-hover: #579020;

    --strong-card-bg: var(--ink);
    --strong-card-ink: #ffffff;
    --strong-card-soft: #b3c0cb;
    --strong-card-mark: var(--green-light);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(28, 39, 48, 0.05), 0 8px 24px rgba(28, 39, 48, 0.07);
    --shadow-lg: 0 2px 6px rgba(28, 39, 48, 0.06), 0 18px 48px rgba(28, 39, 48, 0.13);

    /* Deliberately tight. The map is the point of the page; everything else earns
       its vertical space or loses it. */
    --section-y: clamp(2.5rem, 4.5vw, 3.75rem);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Must stay above the sticky header's max height, or #map lands under it. */
    scroll-padding-top: 7rem;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

img, svg {
    max-width: 100%;
}

a {
    color: inherit;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --- Layout ----------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 4vw, 2rem);
}

.wrap--wide {
    max-width: 1600px;
}

.wrap--narrow {
    max-width: 780px;
}

.section {
    padding-block: var(--section-y);
}

.section--alt {
    background: var(--bg-alt);
    border-block: 1px solid var(--line);
}

.section-head {
    max-width: 60ch;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    gap: 0.6rem;
}

.section-head h2 {
    font-size: clamp(1.5rem, 2.9vw, 2.05rem);
}

.section-head p {
    color: var(--ink-soft);
    font-size: 1.02rem;
}

.eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--radius-sm) 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* --- Buttons ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.45rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn--primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-ink);
}

.btn--primary:hover {
    background: var(--btn-primary-bg-hover);
}

.btn--ghost {
    border-color: currentColor;
    color: inherit;
    background: transparent;
}

.btn--sm {
    padding: 0.48rem 0.95rem;
    font-size: 0.9rem;
}

/* --- Header ----------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: clamp(4.5rem, 9vw, 6rem);
}

/* Height drives the logo; width follows so it can never distort. The asset is the
   tagline-free lockup, trimmed to its ink, so every pixel of this height is wordmark
   rather than the padding the raw export carried. */
.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-logo img {
    height: clamp(3rem, 6.5vw, 4.5rem);
    width: auto;
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.6rem);
    font-size: 0.94rem;
}

.site-nav a {
    text-decoration: none;
    color: var(--ink-soft);
    font-weight: 550;
}

.site-nav a:hover {
    color: var(--ink);
}

.site-nav .btn {
    color: var(--ink);
}

@media (max-width: 660px) {
    .site-nav a:not(.btn) {
        display: none;
    }
}

/* --- Hero ------------------------------------------------------------------- */
/* Kept short on purpose so the map sits as close to the top as it can. */
.hero {
    background: var(--hero-bg);
    color: var(--hero-ink);
    padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* No max-width of its own: the hero keeps .wrap's 1120px so its left edge lines up with the
   header logo above it and the section copy below it. It used to be capped at 860px, which
   pushed the hero text ~130px further in than anything else on the page and read as a band of
   dead space down the left of the fold. Line length is held by --title/--deck max-widths
   instead, which is where that job belongs. */
.hero__inner {
    display: grid;
    gap: 0.9rem;
    justify-items: start;
}

/* Deliberately allowed to run the full width of the text column. At 520px the tagline
   strip inside the artwork lands around 18px, which is the whole point of putting the
   full lockup here rather than in the header. */
.hero__logo {
    width: min(100%, 520px);
    height: auto;
    display: block;
    margin-bottom: 0.35rem;
}

.hero .eyebrow {
    color: var(--green-light);
}

.hero__title {
    font-size: clamp(1.95rem, 4.6vw, 3rem);
    font-weight: 800;
    max-width: 20ch;
}

.hero__title span {
    display: block;
    color: var(--hero-ink-soft);
    font-weight: 700;
}

.hero__deck {
    max-width: 62ch;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    color: var(--hero-ink-soft);
}

/* Deck + trust chips as one block, so the split layout can move them together. */
.hero__copy {
    display: grid;
    gap: 0.9rem;
    justify-items: start;
    align-content: start;
}

/* Two columns once there is room for two sensible measures side by side. Below this the
   hero stays stacked, which is the only thing that works on a phone. */
@media (min-width: 900px) {
    .hero__inner--split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        column-gap: clamp(2rem, 4vw, 3.5rem);
        align-items: start;
    }

    /* The lockup spans both columns and sets the width of the band above the split. */
    .hero__inner--split .hero__logo {
        grid-column: 1 / -1;
    }

    /* Optical, not mechanical: a 48px headline carries far more space above its cap height
       than 17px body text does, so matching the box tops leaves the right column looking
       high. This drops it onto the headline's first line. */
    .hero__inner--split .hero__copy {
        padding-top: 0.55rem;
    }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.trust-strip li {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--hero-chip-bg);
    border: 1px solid var(--hero-chip-line);
    font-size: 0.85rem;
    font-weight: 550;
    color: var(--hero-ink);
}

/* --- Breadcrumbs ------------------------------------------------------------ */
.breadcrumbs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1.15rem;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.breadcrumbs a {
    color: var(--ink-soft);
}

/* --- Map: the centrepiece --------------------------------------------------- */
.map-section {
    padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--bg);
}

.map-lede {
    display: grid;
    gap: 0.4rem;
    max-width: 66ch;
    margin-bottom: 1.15rem;
}

.map-lede h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.map-lede p {
    color: var(--ink-soft);
    font-size: 1rem;
}

/* Reserves the embed's final height before it paints. --map-reserved-height is
   set inline from SiteOptions.MapHeight and must match the SisterSite config,
   otherwise the page shifts when the widget arrives. */
.map-frame {
    position: relative;
    min-height: var(--map-reserved-height, 72vh);
}

/* The embed used to write height inline on its own .idms-card, which defeated its own mobile
   override and clipped the whole address list. It now sets only --idms-card-h and lets its
   stylesheet own the rest, so the !important patch that used to live here is gone. Do not
   reintroduce one: a bounded mobile height is theirs to set, and !important would eat it
   silently. */

.map-skeleton {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 1rem;
    justify-items: center;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-alt);
    transition: opacity 0.3s ease;
}

.map-skeleton.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.map-skeleton__pulse {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 3px solid var(--line-strong);
    border-top-color: var(--green);
    animation: spin 0.9s linear infinite;
}

.map-skeleton__label {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.map-noscript {
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-alt);
    color: var(--ink-soft);
    text-align: center;
}

/* Compact "how to use it" hints sitting directly under the map — the same four
   points the long-form section used to make, at a quarter of the height. */
.map-hints {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem 1.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.map-hints li {
    font-size: 0.925rem;
    color: var(--ink-soft);
    padding-left: 1.6rem;
    position: relative;
}

.map-hints li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 2px;
    background: var(--green);
}

.map-hints strong {
    color: var(--ink);
    font-weight: 650;
}

/* --- Steps ------------------------------------------------------------------ */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.1rem;
}

.step {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    padding: 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.step__num {
    display: grid;
    place-items: center;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 50%;
    background: var(--green-tint);
    color: var(--green-deep);
    font-weight: 800;
    font-size: 0.9rem;
}

.step h3 {
    font-size: 1.04rem;
}

.step p {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/* --- Honesty callout -------------------------------------------------------- */
.honesty {
    margin-top: 1.5rem;
    padding: 1.15rem 1.4rem;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--green);
    background: var(--surface);
    max-width: 76ch;
}

.honesty p {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.honesty strong {
    color: var(--ink);
}

/* --- Comparison ------------------------------------------------------------- */
.compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
}

.compare__card {
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius);
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.compare__card h3 {
    font-size: 1.1rem;
}

.compare__card ul {
    display: grid;
    gap: 0.6rem;
}

.compare__card li {
    padding-left: 1.6rem;
    position: relative;
    font-size: 0.95rem;
}

.compare__card li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
}

.compare__card--weak {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}

.compare__card--weak li::before {
    content: "\00d7";
    color: var(--line-strong);
    font-size: 1.15rem;
    line-height: 1.3;
}

.compare__card--strong {
    background: var(--strong-card-bg);
    color: var(--strong-card-ink);
    box-shadow: var(--shadow-lg);
}

.compare__card--strong li {
    color: var(--strong-card-soft);
}

.compare__card--strong li strong {
    color: var(--strong-card-ink);
}

.compare__card--strong li::before {
    content: "\2713";
    color: var(--strong-card-mark);
}

/* --- Contractor page feature grid ------------------------------------------- */
.usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem 1.85rem;
}

.usage__item {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    padding-top: 0.95rem;
    border-top: 3px solid var(--green);
}

.usage__item h3 {
    font-size: 1.04rem;
}

.usage__item p {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/* --- Generated pages: city and shingle colour ------------------------------- */

/* Swatch colours come from the pin data as inline styles, so nothing here sets one. A hard
   coded palette would be a guess about a real roof, which is the one thing these pages must
   not do. */
.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.85rem;
}

.swatch {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.swatches--linked .swatch {
    padding: 0;
}

.swatches--linked .swatch a {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.swatches--linked .swatch a:hover {
    background: var(--green-tint);
}

.swatch__chip {
    width: 100%;
    height: 2.6rem;
    border-radius: 5px;
    /* Inset rather than a solid border: a light shingle needs an edge to read against white,
       and a dark one should not get a halo. */
    box-shadow: inset 0 0 0 1px rgba(28, 39, 48, 0.18);
    margin-bottom: 0.35rem;
}

.swatch__name {
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--ink);
}

.swatch__count {
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.product-block {
    margin-bottom: 1.75rem;
}

.product-block h3 {
    font-size: 1rem;
    margin-bottom: 0.7rem;
    color: var(--ink-soft);
    font-weight: 650;
}

/* --- Link sets (hub listings and cross-links) ------------------------------- */
.linkset {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.linkset h3 {
    font-size: 1.05rem;
    margin-bottom: 0.85rem;
}

.linkset__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1.5rem;
}

.linkset__list--wide {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.linkset__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

.linkset__list a {
    color: var(--green-deep);
    text-decoration: none;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.linkset__list a:hover {
    text-decoration: underline;
}

.linkset__chip {
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(28, 39, 48, 0.18);
}

.linkset__meta {
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Fact grid -------------------------------------------------------------- */
.factgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.fact {
    background: var(--surface);
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.1rem;
}

.fact__value {
    font-size: 1.6rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.fact__value--mono {
    font-size: 1.05rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: 0;
}

.fact__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

/* --- Two-column detail ------------------------------------------------------ */
.detail-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem 2.5rem;
}

.detail-cols h3 {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
}

.detail-cols h3 ~ h3 {
    margin-top: 1.4rem;
}

.tally {
    display: grid;
    gap: 0.3rem;
}

.tally li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
}

.tally__count {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.zips {
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

/* Colour page hero: swatch beside the headline once there is room for both. */
.hero__inner--swatch {
    align-items: start;
}

.hero__swatch {
    display: none;
}

@media (min-width: 720px) {
    .hero__inner--swatch {
        grid-template-columns: 8.5rem minmax(0, 1fr);
        column-gap: 1.75rem;
    }

    .hero__swatch {
        display: block;
        width: 8.5rem;
        height: 8.5rem;
        border-radius: var(--radius);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    }
}

/* --- FAQ (native disclosure, no JavaScript) --------------------------------- */
.faq {
    display: grid;
    gap: 0.6rem;
}

.faq__item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    cursor: pointer;
    font-weight: 650;
    font-size: 0.99rem;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__chevron {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--green-deep);
    transition: transform 0.2s ease;
}

.faq__item[open] .faq__chevron {
    transform: rotate(180deg);
}

.faq__item > p {
    padding: 0 1.15rem 1.15rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/* --- CTA band --------------------------------------------------------------- */
.cta-band {
    background: var(--ink);
    color: #ffffff;
    padding-block: clamp(1.85rem, 3.5vw, 2.6rem);
}

.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.cta-band h2 {
    font-size: clamp(1.3rem, 2.3vw, 1.65rem);
    margin-bottom: 0.3rem;
}

.cta-band p {
    color: var(--hero-ink-soft);
    max-width: 48ch;
    font-size: 0.98rem;
}

/* --- Footer ----------------------------------------------------------------- */
/* Now that the logo assets are genuinely transparent there is no white box to hide, so
   the footer takes --bg-alt for a little separation from the FAQ section above it. */
.site-footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    padding-block: clamp(2rem, 4vw, 2.75rem) 1.5rem;
    font-size: 0.92rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.8fr) 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 760px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

.site-footer__brand {
    display: grid;
    gap: 0.8rem;
    align-content: start;
    justify-items: start;
}

.site-footer__brand img {
    height: 3.5rem;
    width: auto;
    display: block;
}

.site-footer__blurb {
    color: var(--ink-soft);
    max-width: 40ch;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1.5px solid var(--green);
    color: var(--green-deep);
    font-weight: 650;
    font-size: 0.85rem;
    text-decoration: none;
}

.verified-badge__icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.site-footer__links {
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.site-footer__links h2 {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.site-footer__links a {
    color: var(--ink-soft);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.site-footer__legal {
    margin-top: 1.85rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.82rem;
    max-width: 86ch;
}

/* --- Blazor error UI -------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.7rem 1.25rem;
    background: #ffe9a8;
    color: #2b2100;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
}