/* =============================================================================
   BibleWake "Cinematic Dawn" — public marketing site (/, /privacy, /terms,
   /support, /not-found).

   Tokens are taken from docs/design/BibleWake/BibleWake Design System.html,
   which its README names authoritative when translating the system to a new
   surface, cross-checked against NicheA's BrandOverrides.xaml.

   Two hard constraints shape this file:

   1. css/admin.css is linked globally from App.razor and already defines --bg,
      --border, --r-sm/md/lg and --shadow-sm/md on :root. EVERY token here is
      therefore --cd-* prefixed (radii and shadows included) and every rule is
      scoped beneath .bw-site, so the two systems cannot collide.
   2. This file loads after admin.css, so the body rules below win the cascade.
   ============================================================================= */

.bw-site {
    /* surfaces */
    --cd-bg: #0E0C0A;
    --cd-bg2: #181410;
    --cd-card: #1E1A14;
    --cd-card2: #252018;
    --cd-card-amber: linear-gradient(135deg, rgba(212,151,74,.14), rgba(180,100,70,.06));
    /* gold spine */
    --cd-gold: #D4974A;
    --cd-gold2: #B07A38;
    --cd-gold3: #F0C878;
    --cd-amber: #E8924A;
    --cd-gold-glow: rgba(212,151,74,.22);
    --cd-grad-btn: linear-gradient(135deg, #E0A850, #C07830);
    /* text */
    --cd-tx1: #F2EAE0;
    --cd-tx2: #8A8070;
    --cd-tx3: #504840;
    --cd-tx-on-gold: #0E0C0A;
    /* borders */
    --cd-border: rgba(212,151,74,.16);
    --cd-border2: rgba(212,151,74,.07);
    --cd-border3: rgba(255,255,255,.06);
    /* semantic */
    --cd-success: #7BC97F;
    --cd-warn: #E0B860;
    /* sky + parchment (the Daily Verse surface) */
    --cd-sky-day-top: #6BB6E8;
    --cd-sky-day-mid: #B8DEF2;
    --cd-sky-day-bottom: #F4F8FA;
    --cd-ptx: #281800;
    --cd-ptx2: #705030;
    /* radius + touch */
    --cd-r-sm: 6px;
    --cd-r-md: 14px;
    --cd-r-lg: 20px;
    --cd-r-pill: 999px;
    --cd-touch-min: 44px;
    /* elevation */
    --cd-shadow-md: 0 4px 18px rgba(0,0,0,.5);
    --cd-shadow-lg: 0 8px 28px rgba(0,0,0,.6);
    --cd-glow-button: 0 6px 22px rgba(212,151,74,.35), 0 2px 8px rgba(0,0,0,.4);
    --cd-glow-wordmark: drop-shadow(0 0 18px rgba(212,151,74,.45));
    /* type */
    --cd-font-display: 'Playfair Display', Georgia, serif;
    --cd-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --cd-font-mono: 'DM Mono', ui-monospace, 'Courier New', monospace;
    /* layout */
    --cd-col: 1120px;
}

/* admin.css paints a light body; the marketing pages own the whole viewport. */
body:has(.bw-site) {
    margin: 0;
    background: var(--cd-bg, #0E0C0A);
}

.bw-site {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(135% 100% at 50% 0%, #2A1F12 0%, var(--cd-bg) 55%)
        var(--cd-bg);
    color: var(--cd-tx1);
    font-family: var(--cd-font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.bw-site *,
.bw-site *::before,
.bw-site *::after {
    box-sizing: border-box;
}

.bw-site img {
    max-width: 100%;
}

.bw-wrap {
    width: 100%;
    max-width: var(--cd-col);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Type roles ─────────────────────────────────────────────────────────── */

/* The mono eyebrow is the system's strongest signature: uppercase, wide
   tracking, gold. Every section opens with one. */
.bw-eyebrow {
    font-family: var(--cd-font-mono);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10.5px;
    color: var(--cd-gold);
    margin: 0 0 14px;
}

.bw-display {
    font-family: var(--cd-font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--cd-gold3);
    margin: 0;
}

.bw-h2 {
    font-family: var(--cd-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.6vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--cd-gold3);
    margin: 0 0 12px;
}

.bw-h3 {
    font-family: var(--cd-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--cd-gold3);
    margin: 0 0 8px;
}

.bw-lede {
    font-size: 1.0625rem;
    color: var(--cd-tx2);
    max-width: 46ch;
    margin: 18px 0 0;
}

.bw-body {
    color: var(--cd-tx2);
    margin: 0;
}

.bw-meta {
    font-family: var(--cd-font-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    color: var(--cd-tx2);
}

.bw-section {
    padding: clamp(56px, 9vw, 104px) 0;
}

.bw-section--tight {
    padding: clamp(40px, 6vw, 72px) 0;
}

.bw-section__head {
    max-width: 62ch;
    margin: 0 0 clamp(28px, 4vw, 48px);
}

/* Divider ornament from the design system: a gold hairline fading into ✦. */
.bw-rule {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--cd-gold);
    font-size: 11px;
    margin: 0;
}

.bw-rule::before,
.bw-rule::after {
    content: "";
    height: 1px;
    flex: 1;
}

.bw-rule::before { background: linear-gradient(90deg, transparent, rgba(212,151,74,.4)); }
.bw-rule::after  { background: linear-gradient(90deg, rgba(212,151,74,.4), transparent); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.bw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border: none;
    border-radius: var(--cd-r-pill);
    background: var(--cd-grad-btn);
    color: var(--cd-tx-on-gold);
    font-family: var(--cd-font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: var(--cd-glow-button);
    cursor: pointer;
    transition: filter .15s, transform .15s;
}

.bw-btn:hover { filter: brightness(1.06); }
.bw-btn:active { transform: translateY(1px); }

.bw-btn--ghost {
    background: rgba(255,255,255,.05);
    color: var(--cd-tx1);
    font-weight: 500;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: none;
}

.bw-link {
    color: var(--cd-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(212,151,74,.4);
    padding-bottom: 1px;
}

.bw-link:hover { color: var(--cd-gold3); border-bottom-color: var(--cd-gold3); }

/* ── Store buttons ──────────────────────────────────────────────────────── */

.bw-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}

.bw-store {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 22px;
    border-radius: var(--cd-r-pill);
    border: 1px solid rgba(212,151,74,.28);
    background: rgba(212,151,74,.06);
    color: var(--cd-tx1);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.bw-store:hover {
    border-color: var(--cd-gold);
    background: rgba(212,151,74,.12);
}

/* Not-yet-published: rendered as a <span>, so it is genuinely unclickable
   rather than a link that goes nowhere. */
.bw-store--soon {
    opacity: .5;
    cursor: default;
    border-style: dashed;
}

.bw-store--soon:hover {
    border-color: rgba(212,151,74,.28);
    background: rgba(212,151,74,.06);
}

.bw-store__icon {
    width: 26px;
    height: 26px;
    flex: none;
    fill: var(--cd-gold3);
}

.bw-store__text { display: flex; flex-direction: column; line-height: 1.2; }

.bw-store__kicker {
    font-family: var(--cd-font-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 9.5px;
    color: var(--cd-tx2);
}

.bw-store__name { font-weight: 600; font-size: 15px; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.bw-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(14,12,10,.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cd-border2);
}

.bw-header__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 68px;
}

.bw-wordmark {
    display: block;
    width: 133px;
    max-width: 42vw;
    aspect-ratio: 2141 / 420;
    flex: none;
}

.bw-wordmark img { display: block; width: 100%; height: auto; }

.bw-wordmark--hero {
    width: min(520px, 92vw);
    max-width: 100%;
    margin: 0 auto 26px;
    filter: var(--cd-glow-wordmark);
}

.bw-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.bw-navlink {
    padding: .45rem .85rem;
    border-radius: var(--cd-r-pill);
    color: var(--cd-tx2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color .15s, background .15s;
}

.bw-navlink:hover { color: var(--cd-tx1); background: rgba(255,255,255,.05); }

.bw-navlink--admin {
    font-family: var(--cd-font-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10.5px;
    color: var(--cd-tx3);
}

.bw-navlink--admin:hover { color: var(--cd-gold); }

.bw-lang {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--cd-r-pill);
    border: 1px solid var(--cd-border);
}

.bw-lang a {
    padding: 3px 10px;
    border-radius: var(--cd-r-pill);
    font-family: var(--cd-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    color: var(--cd-tx2);
    text-decoration: none;
}

.bw-lang a.is-active { background: rgba(212,151,74,.16); color: var(--cd-gold3); }

/* CSS-only mobile disclosure — same hidden-checkbox + <label> mechanism as the
   admin sidebar, so the marketing pages stay static SSR with no JavaScript. */
.bw-navtoggle { position: absolute; opacity: 0; pointer-events: none; }

.bw-burger {
    display: none;
    margin-left: auto;
    width: var(--cd-touch-min);
    height: var(--cd-touch-min);
    align-items: center;
    justify-content: center;
    border-radius: var(--cd-r-pill);
    color: var(--cd-gold);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .22em;
    padding-left: .22em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.bw-burger:hover { background: rgba(255,255,255,.05); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.bw-hero {
    position: relative;
    text-align: center;
    padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
    isolation: isolate;
}

.bw-hero__copy { max-width: 44ch; margin: 0 auto; }

.bw-hero .bw-lede { margin-left: auto; margin-right: auto; }

.bw-hero .bw-stores { justify-content: center; }

.bw-hero__terms { margin: 20px 0 0; }

/* Dawn backdrop: the radial glow + five-ray fan ported from the app's
   WelcomeBackdropDrawable, so the web hero and the app's Welcome screen share
   one composition. */
.bw-dawn {
    position: absolute;
    inset: -10% 0 auto 0;
    height: 150%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.bw-dawn__glow {
    position: absolute;
    left: 50%;
    top: 32%;
    width: 124%;
    height: 84%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side,
        rgba(232,160,80,.32) 0%,
        rgba(212,151,74,.14) 32%,
        rgba(180,100,70,.06) 60%,
        transparent 100%);
    animation: bwSunGlowPulse 6s ease-in-out infinite;
}

.bw-dawn__rays {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* ── Device mockups ─────────────────────────────────────────────────────── */

.bw-devices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 36px);
    align-items: end;
}

.bw-device-fig { margin: 0; }

.bw-device {
    position: relative;
    aspect-ratio: 138 / 300;
    border-radius: 34px;
    overflow: hidden;
    background: var(--cd-bg);
    box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 0 1px #111;
}

/* The lead frame sits proud, the way a store listing stages its hero shot. */
.bw-device-fig.is-lead { transform: translateY(-24px); }

.bw-device__shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bw-device__scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 70% at 50% 40%, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

.bw-device__ui {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    text-align: center;
}

.bw-device__clock {
    font-size: clamp(28px, 5.2vw, 44px);
    font-weight: 400;
    letter-spacing: -.04em;
    color: var(--cd-tx1);
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
    line-height: 1;
}

.bw-device__ampm {
    font-family: var(--cd-font-mono);
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--cd-tx1);
    opacity: .8;
}

.bw-device__verse {
    font-family: var(--cd-font-display);
    font-style: italic;
    font-size: clamp(11px, 1.5vw, 14px);
    line-height: 1.35;
    color: var(--cd-gold3);
}

.bw-device__attrib {
    font-family: var(--cd-font-mono);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cd-tx2);
    margin-top: 6px;
}

/* Pushes siblings apart inside a frame without magic margins. */
.bw-device__spacer { flex: 1 1 auto; }

/* Daily Verse rides the day-sky gradient, not a wallpaper — five stops, exactly
   as the design system specifies. Text flips to the parchment ink colours. */
.bw-device--sky {
    background: linear-gradient(180deg,
        var(--cd-sky-day-top) 0%, #8FCBEE 35%, var(--cd-sky-day-mid) 65%,
        #E5F1F8 95%, var(--cd-sky-day-bottom) 100%);
}

.bw-eyebrow--ink { color: var(--cd-ptx2); }
.bw-device__verse--ink { color: var(--cd-ptx); text-shadow: none; }
.bw-device__attrib--ink { color: var(--cd-ptx2); }

.bw-device__amen {
    align-self: center;
    padding: 8px 22px;
    border-radius: var(--cd-r-pill);
    background: var(--cd-grad-btn);
    color: var(--cd-tx-on-gold);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    box-shadow: 0 4px 14px rgba(212,151,74,.3);
}

.bw-chips--center { justify-content: center; }

/* Frosted-glass recipe from the design system's WakeUp spec. */
.bw-glass {
    background: rgba(20,16,12,.45);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(212,151,74,.3);
    border-radius: var(--cd-r-pill);
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

.bw-device__slide {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    font-size: 9.5px;
    color: var(--cd-tx1);
}

.bw-device__thumb {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--cd-grad-btn);
    box-shadow: 0 2px 8px rgba(212,151,74,.45);
}

.bw-device__slidelabel { flex: 1; text-align: center; padding-right: 26px; }

.bw-device__caption {
    display: block;
    margin-top: 14px;
    text-align: center;
}

/* ── Feature grid ───────────────────────────────────────────────────────── */

.bw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.bw-card {
    padding: 26px 24px;
    border-radius: var(--cd-r-lg);
    background: var(--cd-card-amber);
    border: 1px solid rgba(212,151,74,.22);
    box-shadow: 0 4px 20px rgba(212,151,74,.1);
}

.bw-card__mark {
    color: var(--cd-gold);
    font-size: 12px;
    letter-spacing: .3em;
    display: block;
    margin-bottom: 14px;
}

.bw-card--flat {
    background: rgba(255,255,255,.04);
    border-color: var(--cd-border3);
    box-shadow: none;
}

/* ── Reliability strip ──────────────────────────────────────────────────── */

.bw-spec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.bw-spec__item {
    padding: 22px 22px 24px;
    border-radius: var(--cd-r-md);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--cd-border3);
}

/* Platform tag: these claims are not identical on Android and iOS, and the
   page says so rather than averaging them into something untrue. */
.bw-tag {
    display: inline-block;
    padding: 3px 9px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-family: var(--cd-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(212,151,74,.12);
    color: var(--cd-gold3);
}

/* ── Verse challenge demo ───────────────────────────────────────────────── */

.bw-demo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.bw-demo__panel {
    padding: 24px;
    border-radius: var(--cd-r-lg);
    background: linear-gradient(135deg, rgba(212,151,74,.10), rgba(180,100,70,.04));
    border: 1px solid rgba(212,151,74,.18);
}

.bw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.bw-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--cd-r-pill);
    background: rgba(255,255,255,.06);
    color: var(--cd-tx2);
    font-size: 12.5px;
}

.bw-chip--on {
    background: var(--cd-grad-btn);
    color: var(--cd-tx-on-gold);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(212,151,74,.25);
}

.bw-chip--blank {
    min-width: 58px;
    border: 1px dashed rgba(212,151,74,.45);
    background: transparent;
}

/* ── Pricing ────────────────────────────────────────────────────────────── */

.bw-price {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--cd-r-lg);
    background: var(--cd-card-amber);
    border: 1px solid rgba(212,151,74,.22);
    box-shadow: 0 4px 20px rgba(212,151,74,.1);
    text-align: center;
}

.bw-price__amount {
    font-size: clamp(2.5rem, 7vw, 3.75rem);
    font-weight: 400;
    letter-spacing: -.04em;
    color: var(--cd-tx1);
    line-height: 1;
}

.bw-price__period { font-size: 1rem; color: var(--cd-tx2); letter-spacing: 0; }

.bw-price__list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    text-align: left;
    display: inline-block;
}

.bw-price__list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    color: var(--cd-tx1);
}

.bw-price__list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--cd-gold);
    font-size: 11px;
    top: .35em;
}

.bw-price .bw-stores { justify-content: center; }

.bw-price__terms {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--cd-tx2);
}

/* ── FAQ (native <details>, no JS) ──────────────────────────────────────── */

.bw-faq { max-width: 760px; margin: 0 auto; }

.bw-faq details {
    border-bottom: 1px solid var(--cd-border2);
    padding: 4px 0;
}

.bw-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 34px 18px 0;
    position: relative;
    font-weight: 500;
    color: var(--cd-tx1);
}

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

.bw-faq summary::after {
    content: "›";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    color: var(--cd-gold);
    font-size: 18px;
    transition: transform .15s;
}

.bw-faq details[open] summary::after { transform: translateY(-50%) rotate(-90deg); }

.bw-faq p { margin: 0 0 18px; color: var(--cd-tx2); }

/* ── Prose (legal + support pages) ──────────────────────────────────────── */

.bw-prose { max-width: 68ch; }
.bw-prose p, .bw-prose li { color: var(--cd-tx2); }
.bw-prose h2 { color: var(--cd-tx1); font-size: 1.125rem; margin: 32px 0 10px; }

.bw-note {
    background: rgba(212,151,74,.06);
    border-left: 3px solid var(--cd-gold);
    color: var(--cd-gold3);
    padding: 14px 18px;
    border-radius: var(--cd-r-sm);
    font-size: 14px;
    line-height: 1.7;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.bw-footer {
    border-top: 1px solid var(--cd-border2);
    padding: 44px 0 56px;
    background: rgba(10,8,6,.5);
}

.bw-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.bw-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-left: auto;
}

.bw-footer__links a {
    color: var(--cd-tx2);
    text-decoration: none;
    font-size: 14px;
}

.bw-footer__links a:hover { color: var(--cd-gold); }

.bw-footer__legal {
    width: 100%;
    color: var(--cd-tx3);
    font-size: 12.5px;
    margin: 12px 0 0;
}

.bw-footer__hosting {
    width: 100%;
    color: var(--cd-tx3);
    font-size: 12.5px;
    margin: 0;
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
/* Only the design system's existing keyframe family. Durations are the
   documented ones; nothing new is invented. */

@keyframes bwSunrayRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bwSunrayPulse  { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
@keyframes bwSunGlowPulse { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
                            50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.08); } }

.bw-dawn__rays { animation: bwSunrayPulse 7s ease-in-out infinite; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .bw-burger { display: inline-flex; }

    .bw-header__nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 10px 24px 20px;
        background: rgba(14,12,10,.97);
        border-bottom: 1px solid var(--cd-border);
        display: none;
    }

    .bw-navtoggle:checked ~ .bw-header__inner .bw-header__nav { display: flex; }

    .bw-navlink { padding: .7rem .2rem; font-size: 15px; }

    .bw-lang { align-self: flex-start; margin-top: 8px; }

    /* Three portrait frames don't fit; show the hero shot large and the other
       two beside it rather than shrinking all three into illegibility. */
    .bw-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .bw-device-fig.is-lead { transform: none; grid-column: 1 / -1; max-width: 300px; margin: 0 auto; }
}

@media (max-width: 560px) {
    .bw-devices { grid-template-columns: minmax(0, 1fr); max-width: 300px; margin: 0 auto; }
    .bw-stores { flex-direction: column; }
    .bw-store { width: 100%; }
}

/* The design system requires the atmospheric loops to stop under reduced
   motion; the content itself never depends on animation. */
@media (prefers-reduced-motion: reduce) {
    .bw-site *,
    .bw-site *::before,
    .bw-site *::after {
        animation: none !important;
        transition: none !important;
    }
}