:root {
    --bg-1: #f6f3f7;
    --bg-2: #f2eef3;
    --paper: #fbf8fc;
    --ink: #2f2832;
    --muted: #6e6572;
    --primary: #e77fb4;
    /* primary */
    --primary-strong: #cf689d;
    /* primary strong */
    --accent: #f5cbe1;
    /* accent */
    --ring: #f7d7e8;

    /* CTA colors */
    --cta-1: #d973a9;
    --cta-2: #c75f96;

    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-lg: 0 18px 40px rgba(34, 27, 37, 0.14);
    --shadow-md: 0 10px 24px rgba(34, 27, 37, 0.08);
    --shadow-sm: 0 6px 16px rgba(34, 27, 37, 0.06);

    --font: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

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

html,
body {
    height: 100%;
}

body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 10% -10%, var(--bg-2), transparent 70%),
        radial-gradient(1000px 600px at 110% 110%, var(--bg-2), transparent 70%),
        linear-gradient(180deg, var(--bg-1), var(--bg-1));
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@supports not (height: 100svh) {
    body {
        min-height: 100vh;
    }
}

.wrap {
    max-width: min(1180px, 98vw);
    margin: 0 auto;
    padding: min(4vw, 40px);
    position: relative;
}

main.wrap {
    flex: 1 0 auto;
    align-content: center;
}

/* Light background accents (kept subtle for consistency) */
.bg-blobs::before,
.bg-blobs::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
    opacity: .28;
}

.bg-blobs::before {
    left: -8%;
    bottom: 10%;
    width: 42vw;
    height: 42vw;
    background: radial-gradient(closest-side, #fbf6fb, transparent 70%);
}

.bg-blobs::after {
    right: -10%;
    top: -12%;
    width: 30vw;
    height: 30vw;
    background: radial-gradient(closest-side, #fbf7fb, transparent 70%);
}

/* ========== Hero ========== */
.hero {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: clamp(16px, 3vw, 28px);
}

.title {
    margin: 0 0 10px;
    font-weight: 800;
    font-size: clamp(36px, 6vw, 96px);
    line-height: 1.08;
    letter-spacing: .2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subtitle {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(16px, 2.1vw, 18px);
    color: var(--muted);
    padding-inline: 6px;
}

/* ========== Card & question line (made wider + bigger) ========== */
.card {
    position: relative;
    z-index: 1;
    margin: clamp(20px, 4vw, 40px) auto 14px;
    padding: clamp(22px, 4.2vw, 42px);
    /* roomier than before */
    background: linear-gradient(180deg, #fbf8fc, #fbf7fc);
    border: 1px solid #f9ebf4;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.question-line {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 2.2vw, 18px);
    align-items: center;
    justify-content: center;
    font-size: clamp(22px, 3.5vw, 34px);
    /* larger text */
    text-align: center;
}

.question-line .txt {
    font-weight: 700;
    color: var(--ink);
}

.question-line .qmark {
    font-weight: 800;
    color: var(--primary-strong);
    transform: translateY(1px);
}

/* ========== Native picker (input[list]) with our own centered arrow ========== */
.picker {
    display: inline-grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0;

    /* Wider inputs to balance with larger text (still responsive) */
    flex: 1 1 360px;
    /* preferred width */
    min-width: 220px;
    /* shrink floor */
    max-width: 460px;
    /* avoid overgrowing */

    background: var(--paper);
    border: 2px solid rgba(231, 127, 180, 0.28);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .12s ease, transform .12s ease, border-color .15s ease;
}

.picker:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.picker:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--ring), var(--shadow-sm);
}

.picker-input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-weight: 800;
    color: var(--primary-strong);
    padding: clamp(10px, 1.6vw, 14px) clamp(10px, 1.6vw, 14px) clamp(10px, 1.6vw, 14px) clamp(18px, 2vw, 22px);
}

.picker-input::placeholder {
    color: #8d8391;
    font-weight: 700;
}

/* Hide native chevron (keep our button) */
.picker-input::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.picker-input::-ms-clear,
.picker-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.picker-caret {
    display: inline-grid;
    place-items: center;
    margin: 4px;
    padding: 0;
    width: clamp(36px, 3vw, 42px);
    height: clamp(36px, 3vw, 42px);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(180deg, var(--accent), #fbf6fb);
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, filter .1s ease;
    align-self: center;
}

.picker-caret:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.picker-caret:active {
    transform: translateY(0);
    filter: brightness(.98);
}

.picker-caret svg {
    display: block;
    opacity: .9;
}

/* ========== CTA (stand out more with new color/shine) ========== */
.actions {
    margin-top: clamp(16px, 3vw, 24px);
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.btn {
    --px: clamp(18px, 2.6vw, 26px);
    --py: clamp(12px, 1.8vw, 14px);
    border: 0;
    padding: var(--py) var(--px);
    border-radius: var(--radius-pill);
    font-weight: 900;
    font-size: clamp(18px, 2.1vw, 20px);
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    gap: 12px;
    align-items: center;

    color: #fbf8fc;
    background: linear-gradient(180deg, var(--cta-1), var(--cta-2));
    box-shadow:
        0 0 0 4px rgba(241, 180, 212, 0.35),
        var(--shadow-md);
    transition: transform .12s ease, box-shadow .12s ease, filter .1s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 6px rgba(241, 180, 212, 0.4), var(--shadow-lg);
}

.btn:active {
    transform: translateY(0);
    filter: brightness(.98);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(241, 180, 212, 0.55), var(--shadow-md);
}

.note {
    margin: 14px 8px 6px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

/* Link note (soft, on-brand) */
.linkNote {
    margin: 10px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}

.linkNote a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: 800;
    color: var(--primary-strong);
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.linkNote a:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    box-shadow: var(--shadow-md);
}

.linkNote a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring), var(--shadow-sm);
}


/* ========== Two inline quick-list boxes under the card ========== */
.quick-lists {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: clamp(14px, 2.4vw, 24px);
    align-items: start;
    margin-top: 10px;
}

.quick-card {
    background: linear-gradient(180deg, #fbf8fc, #fbf7fc);
    border: 1px solid #f9ebf4;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: clamp(14px, 2.6vw, 22px);
}

.quick-title {
    margin: 0 0 10px;
    font-weight: 800;
    font-size: clamp(18px, 2.4vw, 24px);
    color: var(--ink);
    letter-spacing: .2px;
}

.quick-title-top {
    margin: 0 0 10px;
    color: var(--ink);
    letter-spacing: .2px;
    opacity: 0.5;
}

.em-cat {
    color: var(--primary-strong);
}

.em-dog {
    color: var(--primary);
}

.ranked {
    counter-reset: r;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.ranked li {
    counter-increment: r;
    background: #fbf8fc;
    border: 1px solid #faf0f7;
    border-radius: 12px;
    padding: 10px 12px 10px 44px;
    position: relative;
    font-weight: 700;
    color: var(--ink);
}

.ranked li::before {
    content: counter(r);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
    color: #fbf8fc;
    background: linear-gradient(180deg, var(--primary), var(--primary-strong));
    box-shadow: 0 4px 10px rgba(207, 104, 157, 0.18);
}

ol.ranked a{
  color: #2f2832;
  text-decoration: none;
  display: inline-block;
  padding: 0.18rem 0.35rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

ol.ranked a:hover,
ol.ranked a:focus-visible{
  color: var(--primary-strong);
  border-color: rgba(210, 75, 140, 0.55);
  background-color: rgba(210, 75, 140, 0.10);
  transform: translateY(-1px);
  outline: none;
}


/* ========== Soft divider before articles ========== */
.section-divider {
    height: 22px;
    margin: clamp(18px, 3vw, 28px) 0;
    background: linear-gradient(90deg, transparent, #f9e8f3 35%, transparent);
    border-radius: 999px;
    opacity: .55;
}

/* ========== Articles band (full-bleed background) ========== */
.articles-band {
    position: relative;
    margin: 0 calc(-1 * min(4vw, 40px));
    /* bleed to page edges */
    padding: clamp(10px, 2.6vw, 24px) 0 clamp(18px, 3.2vw, 36px);
}

.articles-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 10% 0%, #f9f6fa 0%, transparent 60%),
        radial-gradient(900px 500px at 100% 100%, #faf7fb 0%, transparent 60%),
        linear-gradient(180deg, #fbf7fb, #faf7fb);
    z-index: 0;
}

.articles-inner {
    position: relative;
    z-index: 1;
    max-width: min(1180px, 100vw);
    margin: 0 auto;
    padding: 0 min(4vw, 40px);
}

.articles {
    display: grid;
    gap: clamp(16px, 3vw, 28px);
}

.article {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    gap: clamp(16px, 3vw, 32px);
    align-items: center;
    background: linear-gradient(180deg, #fbf8fc, #fbf7fc);
    border: 1px solid #f9ebf4;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: clamp(14px, 2.6vw, 22px);
    overflow: hidden;
}

.article.reverse .media {
    order: 2;
}

.article.reverse .content {
    order: 1;
}

.content h3 {
    margin: 0 0 8px;
    font-weight: 900;
    font-size: clamp(20px, 2.8vw, 28px);
    letter-spacing: .2px;
    color: var(--ink);
}

.content p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(16px, 2.2vw, 18px);
    line-height: 1.65;
}

/* reveal-on-scroll transitions */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.reveal-left {
    transform: translateX(-18px);
}

.reveal-right {
    transform: translateX(18px);
}

.reveal-left.in,
.reveal-right.in {
    transform: none;
}

/* ============================================
       Responsive media slots (for .article .media)
       ============================================ */
.article .media {
    /* Default aspect ratio (desktop) */
    --media-w: 16;
    --media-h: 10;

    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    /* subtle placeholder */
    border: 1px solid #faf0f7;
    box-shadow: var(--shadow-sm);

    /* Prevent layout shift before image loads */
    aspect-ratio: var(--media-w) / var(--media-h);
    contain: layout paint;
}

/* Make the future image fill the slot and crop gracefully */
.article .media>img,
.article .media>picture>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* fill frame, crop edges if needed */
    object-position: center;
    /* crop origin */
}

/* Quick per-slot ratio tweaks via data attribute */
.article .media[data-ratio="4x3"] {
    --media-w: 4;
    --media-h: 3;
}

.article .media[data-ratio="3x2"] {
    --media-w: 3;
    --media-h: 2;
}

.article .media[data-ratio="16x9"] {
    --media-w: 16;
    --media-h: 9;
}

/* Prefer a slightly taller frame on narrower screens */
@media (max-width: 920px) {
    .article .media {
        --media-w: 3;
        --media-h: 2;
    }
}

@media (max-width: 560px) {
    .article .media {
        --media-w: 4;
        --media-h: 3;
    }
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
    .article .media::before {
        content: "";
        display: block;
        padding-top: calc(var(--media-h) / var(--media-w) * 100%);
    }

    .article .media>img,
    .article .media>picture>img {
        position: absolute;
    }
}

/* Optional crop positioning helpers */
.article .media.pos-top>img {
    object-position: center top;
}

.article .media.pos-bottom>img {
    object-position: center bottom;
}

.article .media.pos-left>img {
    object-position: left center;
}

.article .media.pos-right>img {
    object-position: right center;
}

/* ========== Responsive guarantees ========== */
@media (max-width: 920px) {
    .quick-lists {
        grid-template-columns: 1fr;
    }

    .article {
        grid-template-columns: 1fr;
    }

    .article.reverse .media {
        order: 1;
    }

    /* image first on mobile for both */
    .article.reverse .content {
        order: 2;
    }
}

@media (max-width: 560px) {
    .picker {
        flex-basis: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .subtitle {
        padding-inline: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ===== Utilities ===== */
.vh {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

/* ==========================================================
   Topbar (hidden until scroll), responsive, and search styling
   ========================================================== */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    transform: translateY(-120%);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
    /* soft glassy background using your palette */
    background: linear-gradient(180deg, rgba(251, 248, 252, 0.78), rgba(251, 247, 251, 0.76));
    border-bottom: 1px solid rgba(231, 127, 180, 0.18);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 10px 26px rgba(34, 27, 37, 0.08);
}

.topbar.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.topbar-inner {
    max-width: min(1180px, 98vw);
    margin: 0 auto;
    padding: 10px min(4vw, 40px);
    display: grid;
    grid-template-columns: 1fr minmax(260px, 1.6fr) 1fr;
    /* L / C / R */
    align-items: center;
    gap: 14px;

    /* Enable container queries on the topbar content for smarter hiding of search */
    container-type: inline-size;
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--primary-strong);
    background: linear-gradient(180deg, #fbf8fc, #f8dceb);
    border-radius: 999px;
    border: 1px solid #f9ebf4;
    box-shadow: 0 6px 16px rgba(207, 104, 157, 0.14) inset;
}

.brand-text {
    font-weight: 900;
    letter-spacing: .2px;
    font-size: clamp(16px, 2vw, 20px);
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Links (right side) */
.top-links {
    justify-self: end;
    display: inline-flex;
    gap: clamp(10px, 2vw, 18px);
    flex-wrap: wrap;
}

.top-link {
    font-weight: 800;
    text-decoration: none;
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 10px;
    transition: background-color .12s ease, box-shadow .12s ease;
}

.top-link.hubCard {
    padding: 0px;
}

.top-link:hover {
    background: #fbf8fc;
    box-shadow: var(--shadow-sm);
}

/* Center Search (collapsed -> expanded) */
.nav-search {
    justify-self: center;
    position: relative;
    width: min(680px, 100%);
    display: flex;
    justify-content: center;
}

.nav-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    font-weight: 900;
    font-size: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-pill);
    color: var(--primary-strong);
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, filter .1s ease;
}

.nav-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.nav-search-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring), var(--shadow-sm);
}

/* Expanded form (host) */
.nav-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    /* Pet | Food | Go */
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    /* a hint of peach to separate from inputs */
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-md);
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Inputs (now distinct pills with subtle icons) */
.nav-input {
    border: 1px solid #f9ebf4;
    outline: none;
    background: #fbf8fc;
    font: inherit;
    font-weight: 800;
    color: var(--primary-strong);
    padding: 10px 12px 10px 40px;
    /* room for icon */
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    /* prevent overflow in grid */
}

.nav-input::placeholder {
    color: #8d8391;
    font-weight: 700;
}

/* PET input: deeper tint & paw icon */
.nav-input--pet {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cf689d' viewBox='0 0 24 24'%3E%3Ccircle cx='7.5' cy='7' r='3'/%3E%3Ccircle cx='16.5' cy='7' r='3'/%3E%3Ccircle cx='6.5' cy='13.5' r='2.6'/%3E%3Ccircle cx='17.5' cy='13.5' r='2.6'/%3E%3Cpath d='M12 14.2c-3.6 0-5.3 2.1-5.3 3.8 0 1.3 1.1 2.5 2.8 2.8 1.7.3 2.4-.6 2.5-.7.1.1.8 1 2.5.7 1.7-.3 2.8-1.5 2.8-2.8 0-1.7-1.7-3.8-5.3-3.8Z'/%3E%3C/svg%3E") 12px 50% / 18px 18px no-repeat,
        linear-gradient(180deg, #fbf8fc, #fff5f1);
    border-color: #f9e8f3;
    color: var(--primary-strong);
}

/* FOOD input: lighter tint & apple icon */
.nav-input--food {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e77fb4' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3c-1.3.1-2.4.8-3.1 1.9-.6.9-.9 1.9-.8 2.8 1.1.1 2.2-.4 3-1.4.7-.9 1-1.9.9-3.3zM18.2 8.2c-1.4 0-2.5.6-3.2.6-.8 0-2-.6-3.3-.6-1.6 0-3.1.9-4 2.4-1.4 2.2-1.2 6 .7 8.7.7 1 1.7 2.1 3 2.1 1.2 0 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1 3-2 1-1.2 1.4-2.3 1.5-2.7-3.4-1.3-2.8-7.5-3.1-8.5z'/%3E%3C/svg%3E") 12px 50% / 18px 18px no-repeat,
        linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border-color: #f9ebf4;
    color: var(--primary);
}

/* Focus ring for both inputs */
.nav-input:focus {
    box-shadow: 0 0 0 4px var(--ring), var(--shadow-sm);
    border-color: var(--primary);
}

/* Compact button for form submit */
.btn-small {
    --px: 16px;
    --py: 10px;
    font-size: 16px;
    padding: var(--py) var(--px);
}

/* =========================
   Responsive – Topbar search
   ========================= */

/* Container query: when the topbar content area is too narrow, hide center search.
   This adapts even if you change padding or link lengths. */
@container (max-width: 860px) {
    .nav-search {
        display: none !important;
    }

    .topbar-inner {
        grid-template-columns: 1fr auto;
    }

    /* brand | links */
    .brand-text {
        display: none;
    }

    /* keep icon only */
}

/* Media-query fallback for older browsers without container queries */
@media (max-width: 860px) {
    .nav-search {
        display: none !important;
    }

    .topbar-inner {
        grid-template-columns: 1fr auto;
    }

    .brand-text {
        display: none;
    }
}

/* When there IS room but the screen is mid-sized, keep the search layout tidy */
@media (min-width: 861px) and (max-width: 1024px) {
    .nav-search-form {
        grid-template-columns: 1fr 1fr auto;
    }
}

/* Extra small screens: tighten link padding so both links fit nicely */
@media (max-width: 480px) {
    .top-links {
        gap: 10px;
    }

    .top-link {
        padding: 6px 8px;
        font-size: 15px;
    }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {

    .topbar,
    .nav-search-btn {
        transition: none !important;
    }
}

/* ===== Footer ===== */
.site-footer {
    margin-top: clamp(24px, 4vw, 40px);
    background:
        radial-gradient(800px 400px at 0% 0%, #f9f6fa 0%, transparent 65%),
        radial-gradient(800px 400px at 100% 100%, #faf7fb 0%, transparent 65%),
        linear-gradient(180deg, #fbf7fb, #faf7fb);
    border-top: 1px solid #f9ebf4;
    box-shadow: 0 -8px 24px rgba(34, 27, 37, 0.06);
}

.footer-inner {
    max-width: min(1180px, 100vw);
    margin: 0 auto;
    padding: clamp(18px, 3vw, 28px) min(4vw, 40px);
    display: grid;
    grid-template-columns: 1fr auto;
    /* left: links | right: brand */
    gap: clamp(12px, 2vw, 24px);
    align-items: start;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 8px;
}

.footer-links a {
    display: inline-block;
    text-decoration: none;
    font-weight: 800;
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 10px;
    transition: background-color .12s ease, box-shadow .12s ease;
}

.footer-links a:hover {
    background: #fbf8fc;
    box-shadow: var(--shadow-sm);
}

/* Reuse brand styles; tweak alignment for footer */
.footer-brand {
    justify-self: end;
}

.copyright {
    border-top: 1px solid #f9ebf4;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    padding: 10px min(4vw, 40px) 18px;
    /* add some breathing room */
}

.copyright p {
    margin: 0;
    /* stop margin collapsing outside the footer */
}

/* Footer responsiveness */
@media (max-width: 700px) {
    .footer-inner {
        grid-template-columns: 1fr;
        /* stack links above brand */
    }

    .footer-brand {
        justify-self: start;
    }
}

/* =========================================================
   ARTICLE TEMPLATE – scoped enhancements
   Affect only article-page classes: .article.full, .card-toc,
   .card-section, .qa, .safety-meter
   ========================================================= */

.title.articleTitle {
    margin: 80px 0 10px;
    font-weight: 800;
    font-size: clamp(36px, 6vw, 84px);
    line-height: 1.08;
    letter-spacing: .2px;
    color: var(--primary)
}

/* ---------- Quick Answer Card ---------- */
.articles-band[aria-label="Quick answer"] .article {
    /* make the quick answer card feel a bit stronger */
    background: linear-gradient(180deg, #fbf8fc, #fff9f5);
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-sm);
}

.articles-band[aria-label="Quick answer"] .content h3 {
    margin-bottom: 10px;
}

/* “panic summary” block */
.articles-band[aria-label="Quick answer"] .qa {
    --qa-bg: #fbf7fb;
    --qa-border: #f9ebf4;
    background: linear-gradient(180deg, #fbf8fc, var(--qa-bg));
    border: 1px solid var(--qa-border);
    border-left: 6px solid var(--primary);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 14px rgba(34, 27, 37, 0.04) inset;
}

.articles-band[aria-label="Quick answer"] .qa-bottom-line {
    margin: 0 0 8px;
    font-weight: 900;
    color: var(--primary-strong);
    font-size: clamp(16px, 2.1vw, 18px);
}

.articles-band[aria-label="Quick answer"] .qa-why {
    margin: 0 0 10px;
    color: var(--muted);
}

.articles-band[aria-label="Quick answer"] .qa-actions {
    margin-top: 8px;
}

.articles-band[aria-label="Quick answer"] .qa-actions ul {
    margin: 0;
    padding-left: 20px;
}

.articles-band[aria-label="Quick answer"] .qa-actions li {
    margin: 4px 0;
    font-weight: 700;
    position: relative;
}

/* ---------- Safety Meter (1..5) ---------- */
.safety-meter {
    --meter-1: #da5865;
    /* danger */
    --meter-2: #ea8067;
    /* risky (peach) */
    --meter-3: #f0a870;
    /* caution (amber) */
    --meter-4: #9bc9a0;
    /* mostly safe (green) */
    --meter-5: #6db991;
    /* safe */
    --meter-off: #faf0f7;

    display: grid;
    gap: 10px;
    align-content: center;
    justify-items: center;
    height: 100%;
}

.safety-meter .meter-bars {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 8px 6px;
    background: #fbf8fc;
    border: 1px solid #f9ebf4;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.safety-meter .bar {
    width: 14px;
    height: 54px;
    border-radius: 10px;
    background: var(--meter-off);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05);
}

.safety-meter .meter-label {
    margin: 0;
    font-weight: 800;
    color: var(--ink);
    font-size: 14px;
    opacity: .9;
}

/* Fill bars based on level (reversed scale: 1 = safe, 5 = danger) */
.safety-meter[data-level="1"] .bar-1 {
    background: var(--meter-5);
    /* safe */
}

.safety-meter[data-level="2"] .bar-1,
.safety-meter[data-level="2"] .bar-2 {
    background: var(--meter-4);
    /* mostly safe */
}

.safety-meter[data-level="3"] .bar-1,
.safety-meter[data-level="3"] .bar-2,
.safety-meter[data-level="3"] .bar-3 {
    background: var(--meter-3);
    /* caution */
}

.safety-meter[data-level="4"] .bar-1,
.safety-meter[data-level="4"] .bar-2,
.safety-meter[data-level="4"] .bar-3,
.safety-meter[data-level="4"] .bar-4 {
    background: var(--meter-2);
    /* risky */
}

.safety-meter[data-level="5"] .bar-1,
.safety-meter[data-level="5"] .bar-2,
.safety-meter[data-level="5"] .bar-3,
.safety-meter[data-level="5"] .bar-4,
.safety-meter[data-level="5"] .bar-5 {
    background: var(--meter-1);
    /* danger */
}

.safety-meter[data-level="1"] .meter-label {
    color: var(--meter-5);
}

.safety-meter[data-level="2"] .meter-label {
    color: var(--meter-4);
}

.safety-meter[data-level="3"] .meter-label {
    color: var(--meter-3);
}

.safety-meter[data-level="4"] .meter-label {
    color: var(--meter-2);
}

.safety-meter[data-level="5"] .meter-label {
    color: var(--meter-1);
}


/* ---------- Hero Summary Card (full width) ---------- */
/* Make this “full” article card stack vertically and center content */
.article.full {
    grid-template-columns: 1fr;
}

.article.full .content {
    max-width: 820px;
    margin: 0 auto;
}

/* ---------- Table of Contents Card (UPDATED) ---------- */
.card.card-toc {
    /* set desired items per column on large screens (9 items → 5/4) */
    --toc-rows: 3;

    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-sm);
}

.card.card-toc h2 {
    font-weight: 900;
    letter-spacing: .2px;
}

/* Base: single column, mobile-first */
.card.card-toc .toc-list {
    /* override old multi-column props if they linger */
    column-count: initial !important;
    column-gap: initial !important;

    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 16px;

    list-style: none;
    padding: 0;
    margin: 12px 0 0;

    counter-reset: toc;
}

/* Medium: two columns, row-wise fill (1,2 / 3,4 / …) */
@media (min-width: 560px) {
    .card.card-toc .toc-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 28px;
    }
}

/* Large: two columns, column-wise fill (1..5 left, 6..9 right) */
@media (min-width: 980px) {
    .card.card-toc .toc-list {
        grid-template-columns: none;
        /* let rows define height */
        grid-auto-flow: column;
        /* fill by columns */
        grid-template-rows: repeat(var(--toc-rows), auto);
        grid-auto-columns: 1fr;
        gap: 8px 28px;
    }
}

.card.card-toc .toc-list li {
    break-inside: avoid;
    width: 100%;
    position: relative;
    margin: 0;
    padding-left: 40px;
    /* room for the numbered chip */
    min-height: 32px;
}

.card.card-toc .toc-list li::before {
    counter-increment: toc;
    content: counter(toc);
    position: absolute;
    left: 0;
    top: 0.65em;
    /* aligns chip with first line of link text */
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 13px;
    font-weight: 900;
    color: #fbf8fc;
    background: linear-gradient(180deg, var(--primary), var(--primary-strong));
    box-shadow: 0 4px 10px rgba(207, 104, 157, 0.18);
}

/* Links: larger tap target + safe wrapping */
.card.card-toc .toc-list a {
    display: block;
    text-decoration: none;
    font-weight: 800;
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 10px;
    transition: background-color .12s ease, box-shadow .12s ease;

    /* keep long terms from breaking layout */
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.35;
}

.card.card-toc .toc-list a:hover {
    background: #fbf8fc;
    box-shadow: var(--shadow-sm);
}

/* ---------- Section Cards (S1..S9) ---------- */
.card.card-section {
    background: linear-gradient(180deg, #fbf8fc, #fbf7fc);
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 96px;
    /* account for sticky topbar */
}

.card.card-section .section-title {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: .2px;
}

/* Nice target highlight when jumping from ToC */
@keyframes sectionPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(207, 104, 157, 0.35);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(207, 104, 157, 0.0);
    }
}

.card.card-section:target {
    animation: sectionPulse 1s ease-out 1;
    border-color: rgba(207, 104, 157, 0.55);
}

/* Typographic rhythm inside section cards */
.card.card-section p,
.card.card-section li {
    color: var(--muted);
}

.card.card-section p+p {
    margin-top: 8px;
}

.card.card-section ul,
.card.card-section ol {
    padding-left: 20px;
}

.card.card-section li+li {
    margin-top: 6px;
}

/* ---------- Responsive touch-ups ---------- */
@media (max-width: 920px) {

    /* Quick answer: stack safer on narrow screens */
    .articles-band[aria-label="Quick answer"] .article {
        grid-template-columns: 1fr;
    }

    .safety-meter {
        margin-top: 10px;
    }
}

/* =========================================================
   ARTICLES HUB – card layout + pagination
   ========================================================= */

/* Hub list: ALWAYS image left, text right */
.articles-band[aria-label="All articles"] .article {
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.4fr);
}

/* Override the global .article.reverse rules for the hub only */
.articles-band[aria-label="All articles"] .article .media {
    order: 1;
}

.articles-band[aria-label="All articles"] .article .content {
    order: 2;
}

.articles-band[aria-label="All articles"] .article.reverse .media {
    order: 1 !important;
}

.articles-band[aria-label="All articles"] .article.reverse .content {
    order: 2 !important;
}

@media (max-width: 920px) {
    .articles-band[aria-label="All articles"] .article {
        grid-template-columns: 1fr;
        /* stack on mobile */
    }
}

/* Hub card title link: clean, no pill hover background from .top-link */
.articles-band[aria-label="All articles"] .content h3 a.top-link {
    padding: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    color: var(--ink);
}

.articles-band[aria-label="All articles"] .content h3 a.top-link:hover {
    text-decoration: underline;
    background: transparent;
    box-shadow: none;
}

/* ---------------- Pagination ---------------- */
.pagination {
    margin: clamp(16px, 4vw, 32px) auto 0;
}

.pagination-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    flex-wrap: wrap;

    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border: 1px solid #f9ebf4;
    border-radius: var(--radius-pill);
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
}

/* Prev/Next links */
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 10px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid #f9ebf4;
    background: #fbf8fc;
    font-weight: 800;
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.page-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: #fbf7fb;
}

.page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring), var(--shadow-sm);
}

.page-link.disabled,
.page-link[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
}

/* Number buttons */
.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-num,
.page-num.is-current {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-pill);
    border: 1px solid #f9ebf4;
    background: #fbf8fc;
    font-weight: 900;
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

a.page-num:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: #fbf7fb;
}

.page-num.is-current,
.page-num[aria-current="page"] {
    background: linear-gradient(180deg, var(--primary), var(--primary-strong));
    color: #fbf8fc;
    border-color: #fbf6fb;
    box-shadow: 0 0 0 4px rgba(241, 180, 212, 0.35), var(--shadow-sm);
    cursor: default;
}

.page-num:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring), var(--shadow-sm);
}

/* Tighten on very small screens */
@media (max-width: 420px) {
    .page-link {
        padding: 8px 12px;
    }

    .page-num,
    .page-num.is-current {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
    }
}

/* Pets hub: ALWAYS image left, content right */
.articles-band[aria-label="All pets"] .article {
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.4fr);
}

.articles-band[aria-label="All pets"] .article .media {
    order: 1;
}

.articles-band[aria-label="All pets"] .article .content {
    order: 2;
}

.articles-band[aria-label="All pets"] .article.reverse .media {
    order: 1 !important;
}

.articles-band[aria-label="All pets"] .article.reverse .content {
    order: 2 !important;
}

@media (max-width: 920px) {
    .articles-band[aria-label="All pets"] .article {
        grid-template-columns: 1fr;
    }
}

/* When the header gets a bit tight but search is still visible,
   shrink nav link padding/size so 3 links stay on one line */
@container (max-width: 1040px) {
    .top-links {
        gap: 10px;
    }

    .top-link {
        padding: 6px 8px;
        font-size: 15px;
    }
}

/* Fallback for older browsers without container queries */
@media (max-width: 1040px) {
    .topbar-inner:not(:has(.nav-search[style*="display: none"])) .top-links {
        gap: 10px;
    }

    .topbar-inner:not(:has(.nav-search[style*="display: none"])) .top-link {
        padding: 6px 8px;
        font-size: 15px;
    }
}

/* ARTICLES HUB – Advanced search card */
.card.card-adv-search {
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-sm);
    margin-top: clamp(10px, 2vw, 20px);
}

.adv-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    /* input | Search | Clear */
    gap: 8px;
    align-items: center;
}

.adv-input-wrap {
    position: relative;
}

.adv-input-wrap input {
    width: 100%;
    border: 1px solid #f9ebf4;
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border-radius: var(--radius-pill);
    padding: 12px 14px 12px 42px;
    font: inherit;
    font-weight: 800;
    color: var(--primary-strong);
    box-shadow: var(--shadow-sm);
}

.adv-input-wrap input::placeholder {
    color: #8d8391;
    font-weight: 700;
}

.adv-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-strong);
    opacity: .85;
}

.btn.btn-ghost {
    color: var(--ink);
    background: #fbf8fc;
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-sm);
}

.btn.btn-ghost:hover {
    background: #fbf7fb;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.adv-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.adv-label {
    font-weight: 900;
    color: var(--ink);
}

.adv-select {
    border: 1px solid #f9ebf4;
    background: #fbf8fc;
    border-radius: var(--radius-pill);
    padding: 10px 14px;
    font: inherit;
    font-weight: 800;
    color: var(--primary-strong);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 560px) {
    .adv-row {
        grid-template-columns: 1fr;
    }

    .adv-row .btn,
    .adv-row .btn-ghost {
        width: 100%;
    }
}

/* =========================================================
   RELATED ARTICLES – single card with bulleted list
   ========================================================= */
.card.card-section[aria-label="Related articles"] {
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border: 1px solid #f9ebf4;
    box-shadow: var(--shadow-sm);
}

.card.card-section[aria-label="Related articles"] .section-title {
    margin-bottom: 8px;
}

.related-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    gap: 8px;
}

/* Item container */
.related-list li {
    position: relative;
    margin: 0;
    padding: 10px 12px 10px 44px;
    /* room for paw chip */
    background: #fbf8fc;
    border: 1px solid #faf0f7;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

/* Paw chip (left) */
.related-list li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(207, 104, 157, 0.18);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Ccircle cx='7.5' cy='7' r='3'/%3E%3Ccircle cx='16.5' cy='7' r='3'/%3E%3Ccircle cx='6.5' cy='13.5' r='2.6'/%3E%3Ccircle cx='17.5' cy='13.5' r='2.6'/%3E%3Cpath d='M12 14.2c-3.6 0-5.3 2.1-5.3 3.8 0 1.3 1.1 2.5 2.8 2.8 1.7.3 2.4-.6 2.5-.7.1.1.8 1 2.5.7 1.7-.3 2.8-1.5 2.8-2.8 0-1.7-1.7-3.8-5.3-3.8Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat,
        linear-gradient(180deg, var(--primary), var(--primary-strong));
}

/* Title link */
.related-list a {
    display: inline-block;
    text-decoration: none;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
    transition: color .12s ease, text-decoration-color .12s ease;
}

/* Meta line (already rendered as <small>) */
.related-list small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
}

/* Hover and focus states */
.related-list li:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: #fbf7fb;
    border-color: #f9e8f3;
}

.related-list li:hover a {
    text-decoration: underline;
}

.related-list a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring);
    border-radius: 8px;
    /* soft corner ring around the text */
}

/* Tighten spacing on very small screens */
@media (max-width: 420px) {
    .related-list li {
        padding: 10px 10px 10px 42px;
    }
}

/* =========================================================
   ARTICLE – Breadcrumbs
   ========================================================= */
.breadcrumbs {
    margin: 6px 0 10px;
}

.crumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: clamp(14px, 1.9vw, 15px);
    /* close to .subtitle scale */
}

.crumbs .crumb {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}

.crumbs .crumb+.crumb::before {
    content: "/";
    margin: 0 6px;
    color: #736a77;
    /* soft separator tint */
}

.crumbs a {
    text-decoration: none;
    font-weight: 800;
    color: var(--ink);
    padding: 4px 6px;
    border-radius: 8px;
    transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.crumbs a:hover {
    background: #fbf8fc;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.crumbs a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring), var(--shadow-sm);
}

.crumbs .current {
    font-weight: 800;
    color: var(--primary-strong);
    padding: 4px 6px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbf8fc, #fbf7fb);
    border: 1px solid #f9ebf4;
}

/* =========================================================
   ARTICLE – Quick answer refresh (bigger meter + danger-tinted QA)
   ========================================================= */

/* Give the meter more real estate on desktop */
.articles-band[aria-label="Quick answer"] .article.qa-focus {
    grid-template-columns: 1fr 1.2fr;
    /* content | meter */
}

@media (max-width: 920px) {
    .articles-band[aria-label="Quick answer"] .article.qa-focus {
        grid-template-columns: 1fr;
        /* stack on mobile */
    }
}

/* Danger-tinted QA box (left) driven by data-level */
.articles-band[aria-label="Quick answer"] .qa {
    --qa-bg: #fbf7fb;
    /* default base (will be overridden below) */
    --qa-border: #f9ebf4;
    /* default border */
    --qa-accent: var(--primary);

    background: linear-gradient(180deg, #fbf8fc, var(--qa-bg));
    border: 1px solid var(--qa-border);
    border-left: 8px solid var(--qa-accent);
    border-radius: 14px;
    padding: 16px 16px 14px;
    box-shadow: 0 4px 14px rgba(34, 27, 37, 0.04) inset;
}

/* Level mapping: 1(safe) -> 5(danger) */
.articles-band[aria-label="Quick answer"] .qa[data-level="1"] {
    --qa-bg: #f3fbf6;
    --qa-border: #d8efe3;
    --qa-accent: #6db991;
    /* safe green */
}

.articles-band[aria-label="Quick answer"] .qa[data-level="2"] {
    --qa-bg: #f8fcf4;
    --qa-border: #e5f3d6;
    --qa-accent: #9bc9a0;
    /* mostly safe */
}

.articles-band[aria-label="Quick answer"] .qa[data-level="3"] {
    --qa-bg: #fff9e9;
    --qa-border: #ffe8b6;
    --qa-accent: #f0a870;
    /* caution amber */
}

.articles-band[aria-label="Quick answer"] .qa[data-level="4"] {
    --qa-bg: #fff3ee;
    --qa-border: #ffd1c2;
    --qa-accent: #ea8067;
    /* risky peach */
}

.articles-band[aria-label="Quick answer"] .qa[data-level="5"] {
    --qa-bg: #fff0f0;
    --qa-border: #f9ecf5;
    --qa-accent: #da5865;
    /* danger red */
}

/* Typography inside QA (a touch more emphasis) */
.articles-band[aria-label="Quick answer"] .qa-bottom-line {
    margin: 0 0 8px;
    font-weight: 900;
    color: var(--ink);
    font-size: clamp(16px, 2.1vw, 18px);
}

.articles-band[aria-label="Quick answer"] .qa-why {
    margin: 0 0 10px;
    color: var(--muted);
}

/* Enlarge the safety meter without affecting others */
.safety-meter.is-xl {
    gap: 14px;
    align-content: center;
    justify-items: center;
}

.safety-meter.is-xl .meter-bars {
    padding: 12px 10px;
    gap: 10px;
    background: #fbf8fc;
    border: 1px solid #f9ebf4;
    border-radius: 14px;
    box-shadow: var(--shadow-sm), 0 0 0 6px rgba(241, 180, 212, 0.15);
    /* subtle halo */
}

.safety-meter.is-xl .bar {
    width: 18px;
    /* was 14px */
    height: 88px;
    /* was 54px */
    border-radius: 12px;
}

@media (max-width: 920px) {
    .safety-meter.is-xl .bar {
        height: 72px;
        /* keep big but reasonable on mobile */
    }
}

.safety-meter.is-xl .meter-label {
    font-size: 16px;
    /* slightly larger label */
    font-weight: 900;
    opacity: .95;
}

/* =========================================================
   ARTICLE – Summary hero image: slimmer height on desktop
   ========================================================= */
@media (min-width: 921px) {
    .articles-band[aria-label="Summary"] .article.full .media {
        --media-w: 21;
        --media-h: 9;
        /* wider aspect (21:9) → less vertical height */
    }
}

.refs a {
    color: var(--primary-strong);
}

sup a {
    color: var(--cta-2)
}

#contact-email-wrapper a {
    color: var(--cta-1);
    text-decoration: none;
    font-weight: 700;
    padding: 4px 8px;
    margin-left: -8px; /* Offsets the padding so it aligns perfectly with the text above */
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#contact-email-wrapper a:hover,
#contact-email-wrapper a:focus {
    background-color: var(--accent);
    color: var(--cta-2);
    text-decoration: none;
}

/* Stacks the logo and the email vertically */
.brand-group {
    display: flex;
    flex-direction: column;
    justify-self: end;  /* Keeps it aligned to the right of your grid */
    align-items: flex-start; /* Aligns the email text to the right edge */
    gap: 4px; /* Adjust this to change the spacing between logo and email */
}

/* Cleans up default paragraph spacing so it hugs the logo */
#contact-email-wrapper-footer {
    margin: 0;
}

/* Optional: Make the email link look clean and match your branding */
#contact-email-wrapper-footer a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

#contact-email-wrapper-footer a:hover {
    color: var(--cta-1);
}