/* ResortPass.watch — Homepage-specific styles (V4)
   Loaded after base.css. Contains ONLY the hero shell, radar backdrop,
   live status board, hero metadata, notify panels and the history ledger;
   every shared primitive (header, buttons, sections, FAQ, footer, modal,
   forms) lives in base.css. */

/* ============ Hero shell — distinct product surface ============ */
.hero-shell {
    position: relative;
    /* Tracker-first: big enough to feel premium, but the trust band + history
       become reachable without a full viewport of scrolling. Content-driven
       below 900px (see media query) so nothing gets clipped on small screens. */
    min-height: clamp(560px, 84svh, 860px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--line-strong);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, 0)),
        #0b0c0f;
}
.hero-backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-backdrop::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(11, 12, 15, .94) 0%, rgba(11, 12, 15, .72) 40%, rgba(11, 12, 15, .36) 68%, rgba(11, 12, 15, .74) 100%),
        linear-gradient(180deg, rgba(11, 12, 15, .1), rgba(11, 12, 15, .65));
}

/* subtle CSS radar */
.hero-radar {
    position: absolute;
    width: min(980px, 78vw);
    aspect-ratio: 1;
    right: -150px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: .56;
}
.hero-radar::before {
    content: "";
    position: absolute; inset: 0; border-radius: 50%;
    background:
        repeating-radial-gradient(circle at center,
            transparent 0 13%,
            rgba(255, 255, 255, .052) 13.1% 13.3%,
            transparent 13.45% 26%);
    mask-image: radial-gradient(circle, #000 0 72%, transparent 84%);
    -webkit-mask-image: radial-gradient(circle, #000 0 72%, transparent 84%);
}
.hero-radar-grid {
    position: absolute; inset: 10%; border-radius: 50%;
    background:
        linear-gradient(to right, transparent calc(50% - .5px), rgba(255, 255, 255, .045) 50%, transparent calc(50% + .5px)),
        linear-gradient(to bottom, transparent calc(50% - .5px), rgba(255, 255, 255, .045) 50%, transparent calc(50% + .5px));
}
.hero-radar-sweep {
    position: absolute; inset: 4%; border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0 308deg,
        rgba(124, 224, 162, .02) 326deg,
        rgba(124, 224, 162, .13) 346deg,
        rgba(124, 224, 162, .42) 359deg,
        transparent 360deg);
    animation: radarSweep 10s linear infinite;
    filter: blur(.2px);
}
.hero-ping {
    position: absolute;
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(124, 224, 162, .85);
    box-shadow: 0 0 0 5px rgba(124, 224, 162, .055), 0 0 24px rgba(124, 224, 162, .28);
}
.hero-ping.p1 { left: 58%; top: 29%; }
.hero-ping.p2 { left: 37%; top: 62%; opacity: .5; }
.hero-ping.p3 { left: 72%; top: 67%; opacity: .36; }
.hero-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(120px); opacity: .11; }
.hero-glow-gold { right: 34%; top: 18%; background: #d8ae67; }
.hero-glow-silver { right: 3%; bottom: 2%; background: #c8ccd5; opacity: .08; }

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

/* hero layout */
.hero-v4 {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 54px;
    align-items: center;
    padding-top: 54px;
    padding-bottom: 54px;
    width: min(calc(100% - 32px), var(--max));
    margin: 0 auto;
}
.hero-v4-copy { position: relative; z-index: 2; }
.eyebrow {
    color: var(--muted); font-size: .77rem; letter-spacing: .16em;
    text-transform: uppercase; margin-bottom: 18px;
}
.hero-v4 h1 {
    margin: 0; max-width: 660px;
    font-size: clamp(3.8rem, 7vw, 7rem);
    line-height: .88;
    letter-spacing: -.066em;
    font-weight: 780;
}
/* metallic product terms — refined, matching the board accents */
.hero-v4 h1 .w-gold {
    background: linear-gradient(180deg, #e6c684 8%, #c39a55 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d8ae67;
    padding-right: .06em; /* keeps the last glyph inside the clipped gradient box */
}
.hero-v4 h1 .w-silver {
    background: linear-gradient(180deg, #e8ebf1 8%, #aab0bc 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #c8ccd5;
    padding-right: .06em;
}
.hero-v4 h1 .amp,
.hero-v4 h1 .h1-dot,
.hero-v4 h1 .h1-sub { color: #f7f7f5; }
.hero-v4 h1 .h1-sub {
    display: block;
    margin-top: 14px;
    font-size: clamp(1.55rem, 3.1vw, 3rem);
    font-weight: 600; letter-spacing: -.03em; color: #f7f7f5;
    line-height: 1.1;
}
.hero-sub {
    max-width: 520px; margin: 24px 0 0;
    color: var(--muted); font-size: 1.08rem; line-height: 1.62;
}
.hero-sub strong { color: var(--text); font-weight: 650; }
.hero-actions { margin-top: 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-link {
    color: var(--muted); font-weight: 650;
    display: inline-flex; align-items: center; gap: 8px;
}
.hero-link:hover { color: var(--text); }

/* ============ Live status board ============ */
.hero-status-board {
    position: relative; z-index: 2;
    border: 1px solid var(--line-strong);
    background: rgba(14, 16, 20, .78);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
    border-radius: 28px;
    overflow: hidden;
}
.hero-pass {
    position: relative;
    padding: 30px 32px 28px;
    min-height: 230px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.hero-pass + .hero-pass { border-top: 1px solid var(--line-strong); }
.hero-pass::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: .95;
}
.hero-pass-gold::before { background: linear-gradient(180deg, #f5d495, #a8792e); }
.hero-pass-silver::before { background: linear-gradient(180deg, #f0f2f6, #8f95a1); }
.hero-pass-gold { background: linear-gradient(90deg, rgba(216, 174, 103, .08), transparent 42%); }
.hero-pass-silver { background: linear-gradient(90deg, rgba(200, 204, 213, .055), transparent 42%); }

.hero-pass-top, .hero-pass-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.hero-pass-name {
    display: flex; align-items: center; gap: 11px;
    font-size: 1.02rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
/* Pass-Namen in Metallfarbe */
.hero-pass-gold .hero-pass-name { color: var(--gold); }
.hero-pass-silver .hero-pass-name { color: var(--silver); }
.metal-dot {
    width: 11px; height: 11px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 0 16px rgba(255, 255, 255, .06);
}
.gold-dot { background: linear-gradient(135deg, #f0d29a, #a87427); }
.silver-dot { background: linear-gradient(135deg, #f4f5f7, #8b909a); }
.hero-pass-tier {
    color: var(--subtle); font-size: .77rem; text-transform: uppercase; letter-spacing: .12em;
}
.hero-state {
    font-size: clamp(3rem, 5.4vw, 5.8rem);
    line-height: .95; letter-spacing: -.058em; font-weight: 760;
    margin: 26px 0 30px;
    transition: color .25s ease;
    color: #eceae6; /* explicit: body is light now — sold_out must not inherit dark text */
}
.hero-pass[data-state="available"] .hero-state { color: var(--brand); }
.hero-pass[data-state="unknown"] .hero-state { color: var(--unknown); }
.hero-pass[data-state="stale"] .hero-state,
.hero-pass[data-state="unknown"] .hero-state { font-size: clamp(1.6rem, 3vw, 2.9rem); }
.hero-pass-bottom { color: var(--muted); font-size: .9rem; }
.hero-freshness {
    color: #b9bdc7; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hero-freshness b { color: var(--brand); font-weight: 700; }
.hero-freshness b.stale-word { color: var(--danger); }

.hero-board-meta {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .018);
}
.hero-board-meta > div {
    padding: 15px 18px; color: var(--muted); font-size: .82rem; text-align: center;
}
.hero-board-meta > div + div { border-left: 1px solid var(--line); }
.live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
    display: inline-block; margin-right: 8px;
    box-shadow: 0 0 0 5px rgba(124, 224, 162, .08);
}
.live-dot.stale { background: var(--danger); box-shadow: 0 0 0 5px rgba(215, 164, 138, .08); }

/* ============ Trust band (hero-foot, moved out of the hero) ============ */
.trust-band {
    background: #0b0c0f;
    border-bottom: 1px solid var(--line-strong);
}
.trust-band-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
    padding: 12px 0;
    color: var(--subtle); font-size: .78rem;
    font-variant-numeric: tabular-nums;
}
.tb-item { display: inline-flex; align-items: center; }
.trust-band b { color: var(--muted); font-weight: 650; }
.trust-band .chip { color: var(--brand); font-weight: 650; }
.trust-band .chip.stale { color: var(--danger); }

/* ============ Notify (compact conversion block) ============ */
.notify-compact {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
    padding: 4px 0 2px;
}
.notify-compact .btn { min-width: 148px; }
.notify-micro {
    flex-basis: 100%; margin: 2px 0 0;
    color: var(--light-subtle); font-size: .82rem;
}

/* ============ Check history timeline (primary tracker element) ============
   All rows + pagination live inside ONE shared card — a contained data
   block, not loose rows on the page background. */
.hist-card {
    background: var(--light-surface);
    border: 1px solid var(--light-hairline);
    border-radius: 14px;
    padding: 4px 18px 0;
    box-shadow: 0 1px 3px rgba(32, 34, 36, .04);
}
.hist-list {
    list-style: none; margin: 0; padding: 0;
    font-variant-numeric: tabular-nums;
}
.hist-row {
    display: grid; grid-template-columns: 130px 1fr 1fr; gap: 6px 18px;
    align-items: center;
    min-height: 44px; padding: 9px 0;
    border-bottom: 1px solid var(--light-hairline);
}
.hist-row:last-child { border-bottom: 0; }
.hist-row .h-time { color: var(--light-subtle); font-size: .84rem; white-space: nowrap; }
.hist-row .h-pass { display: flex; align-items: center; gap: 8px; min-width: 0; }
.h-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--light-subtle);
}
.h-dot[data-s="sold_out"] { background: #cf5f4e; }
.h-dot[data-s="available"] { background: var(--acc-calm, #3a9e6d); }
.h-dot[data-s="unknown"] { background: var(--unknown, #9aa0aa); }
.h-label {
    font-size: .64rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
    flex: none;
}
.h-label.gold { color: #b08a2e; }
.h-label.silver { color: #8d949e; }
.h-word { color: var(--light-muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-word[data-s="available"] { color: var(--acc-calm, #3a9e6d); font-weight: 650; }
.h-word[data-s="unknown"] { color: var(--light-subtle); font-style: italic; }
.hist-row.is-available { border-bottom-color: rgba(58, 158, 109, .35); }
.history-empty { padding: 26px 0; color: var(--light-subtle); border-bottom: 1px solid var(--light-hairline); list-style: none; }
.hist-card .history-empty { border-bottom: 0; }
.hist-loading { opacity: .55; transition: opacity .15s ease; }

/* pagination — bottom edge of the SAME card */
.hist-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0 12px;
    border-top: 1px solid var(--light-hairline);
    margin-top: 4px;
}
.hist-nav {
    min-height: 44px; padding: 8px 16px;
    border: 1px solid var(--light-hairline); border-radius: 10px;
    background: var(--light-surface); color: var(--light-text);
    font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.hist-nav:hover:not(:disabled) { border-color: var(--light-muted); }
.hist-nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hist-nav:disabled { opacity: .38; cursor: not-allowed; }
.hist-page { color: var(--light-subtle); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* ============ Methodology line (replaces the three step panels) ============ */
.how-line { padding-top: 30px; }
.how-steps {
    list-style: none; margin: 0; padding: 14px 0 4px;
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    border-top: 1px solid var(--light-hairline);
    color: var(--light-muted); font-size: .9rem;
}
.how-steps .mdi { color: var(--brand); font-size: 1.1rem; vertical-align: -2px; margin-right: 7px; }

/* ============ Gold vs Silver — calm editorial cards ============
   Light surface, hairline border, thin metal left-border accent,
   plain title line (no header bar), 3 facts, one primary CTA + text link. */
.pass-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pass-card {
    display: flex; flex-direction: column; gap: 9px;
    padding: 16px 18px 15px;
    background: var(--light-surface);
    border: 1px solid var(--light-hairline);
    border-left-width: 3px; border-radius: 14px;
}
.pass-card.gold { border-left-color: #d4af37; }
.pass-card.silver { border-left-color: #a8adb5; }
.pass-card-title { display: flex; align-items: baseline; gap: 9px; }
.pass-card-title .metal-dot { align-self: center; }
.pass-card-name { font-weight: 750; font-size: 1.08rem; color: var(--light-text); }
.pass-card-tier {
    font-size: .62rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
    color: var(--light-subtle);
}
.pass-card-desc { margin: 0; color: var(--light-muted); font-size: .88rem; line-height: 1.45; }
.pass-facts { list-style: none; margin: 1px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pass-facts li {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--light-text); font-size: .86rem; line-height: 1.35;
}
.pass-facts li::before {
    content: "\F012C"; /* mdi check */
    font-family: "Material Design Icons";
    font-size: .92rem; line-height: 1; flex: none;
    color: var(--acc-calm, #3a9e6d);
}
.pass-card.silver .pass-facts li:nth-child(2)::before,
.pass-card.silver .pass-facts li:nth-child(3)::before { content: "\F0156"; color: var(--light-subtle); } /* mdi close */
.pass-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.pass-ctas .btn { width: 100%; justify-content: center; }
.pass-details-link {
    color: var(--light-muted); font-size: .82rem; font-weight: 600; text-decoration: none;
    padding: 2px 0;
}
.pass-details-link:hover { color: var(--light-text); }
.pass-details-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* guide link under both cards — full comparison lives in the guide */
.pass-guide-row { padding: 12px 0 0; }
.pass-guide-link {
    color: var(--light-muted); font-weight: 650; font-size: .9rem; text-decoration: none;
}
.pass-guide-link:hover { color: var(--light-text); }

/* calculator strip under the guide link — natural next step after
   "which ResortPass fits me?" (question + subline + compact brand button) */
.pass-calc-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 14px; padding: 14px 16px;
    border: 1px solid var(--light-hairline);
    border-radius: 12px;
    background: var(--light-surface);
}
.pass-calc-q { margin: 0 0 2px; font-weight: 700; font-size: .95rem; }
.pass-calc-s { margin: 0; color: var(--light-muted); font-size: .85rem; }
.pass-calc-row .btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .pass-calc-row .btn { width: 100%; }
}

/* ============ Floating alert CTA (appears after hero) ============
   Same brand/CTA color as the hero primary button (#1d5c3f), but keeps
   the calm v14 geometry: 10px radius, compact size, subtle shadow. */
.fab {
    position: fixed; z-index: 60;
    right: 20px; bottom: 20px;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 11px 18px;
    border-radius: 10px;
    background: #1d5c3f; color: #fff;
    border: 1px solid #1d5c3f;
    font-weight: 650; font-size: .9rem; text-decoration: none;
    box-shadow: 0 2px 10px rgba(29, 92, 63, .24);
    /* hidden by default — shown by JS once the hero leaves the viewport */
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease,
                box-shadow .15s ease, background .15s ease;
}
.fab:hover { background: #175034; border-color: #175034; box-shadow: 0 3px 12px rgba(29, 92, 63, .30); }
.fab.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fab .mdi { font-size: 1.05rem; color: #fff; }
@media (max-width: 720px) {
    .fab {
        left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px);
        justify-content: center;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    /* keep footer links and the pagination reachable behind the FAB */
    .footer-bottom { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .fab { transition: opacity .18s ease; transform: none; }
}

.faq-more { padding: 12px 0 0; }

/* ============ "Heute im Europa-Park" — flat native section ============
   Sits inside a regular .wrap.section with a static section-head
   (kicker + title + sub, i18n via data-i18n); this block only renders
   the status line, links and attribution. No card, no widget box. */
.park-today {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: auto;
    display: block;
    box-shadow: none;
}
.pt-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
.pt-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--light-text); font-size: 1rem; }
.pt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--light-subtle); }
.pt-dot[data-open="open"] { background: var(--acc-calm, #3a9e6d); }
.pt-dot[data-open="closed"] { background: #6b7078; }
.pt-hours { color: var(--light-muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.pt-meta {
    margin: 8px 0 0; color: var(--light-muted); font-size: .86rem;
    font-variant-numeric: tabular-nums;
}
/* one shared outer card grouping status + actions (radius/border match
   hist-card / pass-card); attribution stays outside below it */
.pt-card {
    background: var(--light-surface);
    border: 1px solid var(--light-hairline);
    border-radius: 14px;
    padding: 16px 16px 14px;
    box-shadow: 0 1px 3px rgba(32, 34, 36, .04);
}
.pt-card .pt-actions { margin-top: 14px; }
.pt-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.pt-action {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 9px 12px;
    background: var(--light-surface);
    border: 1px solid var(--light-hairline);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s ease;
}
.pt-action:hover { border-color: var(--light-muted); }
.pt-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pt-action-icon { font-size: 1.15rem; color: #1d5c3f; flex: none; }
.pt-action-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pt-action-title { color: var(--light-text); font-weight: 650; font-size: .86rem; line-height: 1.25; }
.pt-action-sub { color: var(--light-subtle); font-size: .74rem; line-height: 1.3; }
.pt-action-chev { margin-left: auto; font-size: 1rem; color: var(--light-subtle); flex: none; }
/* ============ FAQ (homepage) — compact rhythm, ~10-15% less height ============ */
#faq .section-head { margin-bottom: 20px; }
#faq .faq details { padding: 10px 0; }
#faq .faq details[open] { padding-bottom: 2px; }
#faq .faq summary { min-height: 44px; align-items: center; }
#faq .faq details p { margin: 6px 0 0; line-height: 1.55; }
/* "Alle Fragen ansehen" — clear secondary CTA, no button look */
.faq-more a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--light-text); font-weight: 650; font-size: .92rem;
    text-decoration: none; padding: 12px 0;
}
.faq-more a:hover { color: var(--acc-calm); }
.faq-more a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* FAQ → footer transition: clean, not stretched */
footer { margin-top: 64px; }

/* ============ Footer (homepage) — slightly tighter on mobile ============ */
@media (max-width: 560px) {
    footer { margin-top: 44px; padding: 24px 0 34px; }
    .footer-bottom { margin-top: 16px; padding-top: 14px; }
    /* park actions stack into three equal rows */
    .pt-actions { grid-template-columns: 1fr; gap: 8px; }
    .pt-action { padding: 10px 12px; }
}

/* ============ Responsive (homepage-specific) ============ */
@media (max-width: 900px) {
    .hero-shell { min-height: auto; }
    .hero-v4 { grid-template-columns: 1fr; gap: 28px; padding-top: 34px; padding-bottom: 34px; }
    .hero-v4-copy { max-width: 700px; }
    .hero-radar { width: 760px; right: -320px; top: 38%; }
    .hero-glow-gold { right: 10%; top: 18%; }
    .hero-status-board { border-radius: 22px; }
}
@media (max-width: 560px) {
    .hero-v4 { width: min(calc(100% - 24px), var(--max)); }
    .hero-v4 { padding-top: 16px; padding-bottom: 16px; gap: 20px; }
    .hero-v4 h1 { font-size: 3.05rem; line-height: .92; }
    .hero-sub { margin-top: 10px; font-size: .95rem; line-height: 1.5; }
    .hero-actions { margin-top: 14px; }
    .hero-status-board { border-radius: 18px; }
    .hero-pass { min-height: 0; padding: 18px 18px 16px 20px; }
    .hero-state { margin: 12px 0 14px; font-size: 2.8rem; }
    .hero-pass[data-state="stale"] .hero-state,
    .hero-pass[data-state="unknown"] .hero-state { font-size: 1.5rem; }
    .hero-pass-bottom { align-items: flex-start; flex-direction: column; gap: 6px; }
    .hero-board-meta { grid-template-columns: 1fr 1fr; }
    .hero-board-meta > div { padding: 12px 10px; font-size: .72rem; }
    .hero-board-meta > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
    .hero-radar { width: 620px; right: -340px; top: 30%; opacity: .48; }
    .hero-glow-gold { width: 280px; height: 280px; right: 6%; top: 20%; }
    .trust-band-row { gap: 4px 12px; padding: 10px 0; }
    /* history: time on its own line, gold/silver two-column below */
    .hist-row { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 0; }
    .hist-row .h-time { grid-column: 1 / -1; font-size: .8rem; }
    .hist-pager { gap: 8px; }
    .hist-nav { padding: 8px 12px; font-size: .84rem; }
    .notify-compact .btn { flex: 1 1 45%; justify-content: center; }
    /* gold vs silver: cards stacked, primary CTA full width */
    .pass-cards { grid-template-columns: 1fr; }
    .pass-card { padding: 14px 16px 13px; gap: 8px; }
}
@media (max-width: 360px) {
    .hero-v4 h1 { font-size: 2.7rem; }
    .hero-state { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-radar-sweep { animation: none !important; transform: rotate(28deg); }
}