/* ============================================================
   TikkBay mobile web experience
   Ported one to one from the approved mobile mockup (v2), whose
   copy, spacing, and order maths were verified against this
   codebase. Every rule lives under the 767.98px breakpoint; the
   only rule outside it hides mobile only markup on desktop.
   Fonts come from programme.css (Fraunces and Inter variable),
   already loaded by the shared layout.
   ============================================================ */

@media (min-width: 768px) {
    .mw-only { display: none !important; }
}

@media (max-width: 767.98px) {

    :root {
        --mw-ivory: #fffdf7;
        --mw-gold-100: #fffbeb;
        --mw-gold-200: #fef3c7;
        --mw-gold-400: #fcd34d;
        --mw-gold-500: #fbbf24;
        --mw-gold-600: #f59e0b;
        --mw-gold-700: #d97706;
        --mw-gold-800: #b45309;
        --mw-navy-50: #f1f5f9;
        --mw-navy-100: #e2e9f0;
        --mw-navy-200: #c7d4e1;
        --mw-navy-300: #9db3c9;
        --mw-navy-400: #6a8aac;
        --mw-navy-500: #436690;
        --mw-navy-600: #2f4d72;
        --mw-navy-700: #1e3a5f;
        --mw-navy-800: #1a3050;
        --mw-navy-900: #172a44;
        --mw-ink: #172a44;
        --mw-body: #46536b;
        --mw-muted: #7d89a0;
        --mw-hairline: rgba(23, 42, 68, .12);
        --mw-hairline-soft: rgba(23, 42, 68, .07);
        --mw-display: 'Fraunces', Georgia, Cambria, serif;
        --mw-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    }

    /* ---- Page shell: retire the desktop chrome ---- */
    .mw-hide,
    .pg-shell-nav,
    .pg-shell-footer { display: none !important; }

    html { overflow-x: hidden; }
    body.mw-on {
        overflow-x: hidden;
        background: var(--mw-ivory);
        font-family: var(--mw-sans);
        color: var(--mw-body);
        margin: 0 !important;
        /* Room for the fixed top bar, whose height is pinned below. */
        padding-top: 59px !important;
        padding-bottom: 0;
    }
    body.mw-on main { padding-top: 0 !important; }
    body.mw-lock { overflow: hidden; }

    .mw-only img { display: block; max-width: 100%; }
    .mw-only a { text-decoration: none; color: inherit; }
    .mw-only h1, .mw-only h2, .mw-only h3, .mw-only h4 {
        font-family: var(--mw-display);
        font-feature-settings: "ss01" on, "calt" on;
        letter-spacing: -0.012em;
        color: var(--mw-ink);
        font-weight: 500;
    }
    .mw-only button { font-family: var(--mw-sans); cursor: pointer; }
    svg.mw-st {
        width: 22px; height: 22px;
        stroke: currentColor; stroke-width: 1.6; fill: none;
        stroke-linecap: round; stroke-linejoin: round;
        display: block;
    }

    /* ---- Top app bar ---- */
    .mw-tbar {
        position: fixed; top: 0; left: 0; right: 0; z-index: 50;
        background: rgba(255, 253, 247, .94);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--mw-hairline-soft);
        display: flex; align-items: center; gap: 10px;
        padding: 10px 18px;
        min-height: 59px; box-sizing: border-box;
        transition: transform .3s ease, opacity .3s ease;
    }
    /* The bar is fixed rather than sticky because the page shell sets
       overflow-x on html and body, which makes them scroll containers
       and quietly stops a sticky child from ever pinning. Fixed ignores
       that entirely, and it is what the desktop header already does.
       Being out of flow, its height is reserved on the body above. */
    /* The top bar carries all the navigation now that the bottom dock is
       gone, so it behaves exactly as the desktop header does: it steps
       out of the way while the reader scrolls down the page and returns
       the moment they scroll back up. */
    body.mw-tbar-away .mw-tbar {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .mw-tbar { transition: none; }
    }
    .mw-tbar .mw-logo img { height: 26px; width: auto; }
    .mw-tbar .mw-sp { flex: 1; }
    .mw-citychip {
        display: inline-flex; align-items: center; gap: 6px;
        border: 1px solid var(--mw-hairline); border-radius: 999px;
        padding: 5px 11px 5px 9px;
        font-size: 12px; font-weight: 600; color: var(--mw-ink);
        background: #fff;
    }
    .mw-citychip em {
        font-style: normal; font-size: 9px; letter-spacing: .09em;
        color: var(--mw-muted); text-transform: uppercase; font-weight: 600;
    }
    .mw-icobtn {
        width: 38px; height: 38px; border-radius: 12px;
        border: 1px solid var(--mw-hairline-soft);
        background: transparent; color: var(--mw-ink);
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 auto;
    }
    .mw-tbar .mw-txtlink { font-size: 13px; font-weight: 600; color: var(--mw-ink); }
    .mw-tbar .mw-title { font-family: var(--mw-display); font-size: 17px; color: var(--mw-ink); font-weight: 500; }
    .mw-avball {
        width: 40px; height: 40px; border-radius: 50%;
        background: var(--mw-navy-900); color: #fff;
        font-weight: 700; font-size: 12.5px;
        display: flex; align-items: center; justify-content: center;
        flex: 0 0 auto; border: none;
    }
    .mw-avball.sm { width: 34px; height: 34px; font-size: 11px; }

    /* ---- Buttons and text links ---- */
    .mw-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        font-weight: 600; font-size: 14.5px;
        border-radius: 10px; padding: 13px 22px;
        border: 1px solid transparent;
    }
    .mw-btn-gold { background: var(--mw-gold-600); color: #231a05; }
    .mw-btn-navy { background: var(--mw-navy-900); color: #fff; }
    .mw-btn-outline { background: transparent; border-color: var(--mw-hairline); color: var(--mw-ink); }
    .mw-btn-block { display: flex; width: 100%; }
    .mw-btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 9px; }
    .mw-tlink {
        font-size: 13px; font-weight: 600; color: var(--mw-ink);
        text-decoration: underline; text-decoration-color: var(--mw-gold-500);
        text-underline-offset: 3px;
        background: none; border: none; padding: 0;
    }
    .mw-tlink.gold { color: var(--mw-gold-800); }

    /* ---- Editorial primitives ---- */
    .mw-pad { padding: 0 20px; }
    .mw-eyebrow {
        font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
        font-weight: 700; color: var(--mw-gold-700);
        display: inline-block;
    }
    .mw-eyebrow.navy { color: var(--mw-navy-500); }
    .mw-h-display { font-size: 34px; line-height: 1.12; margin: 10px 0 12px; }
    .mw-h-display em { font-style: italic; color: var(--mw-gold-700); }
    .mw-h-sec { font-size: 23px; line-height: 1.2; margin: 6px 0 4px; }
    .mw-lead { font-size: 14.5px; color: var(--mw-body); }
    .mw-microlead { font-size: 13px; color: var(--mw-muted); }
    .mw-sec { padding: 34px 0 8px; }
    .mw-sec.mw-pad { padding: 34px 20px 8px; }
    .mw-sec-head {
        display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
        padding: 0 20px; margin-bottom: 14px;
    }
    .mw-sec-head .mw-more { font-size: 12.5px; font-weight: 600; color: var(--mw-gold-800); white-space: nowrap; }
    .mw-rule { height: 1px; background: var(--mw-hairline-soft); margin: 26px 20px 0; }
    .mw-crumbs {
        font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
        font-weight: 600; color: var(--mw-muted);
        display: flex; gap: 7px; flex-wrap: wrap; padding: 14px 20px 0;
    }
    .mw-crumbs b { color: var(--mw-gold-700); font-weight: 700; }

    /* ---- Forms ---- */
    .mw-flabel {
        display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
        font-weight: 700; color: var(--mw-muted); margin: 0 0 7px;
    }
    .mw-finput, .mw-fselect, .mw-farea {
        width: 100%; font-family: var(--mw-sans); font-size: 15px; color: var(--mw-ink);
        background: #fff; border: 1px solid var(--mw-hairline); border-radius: 10px;
        padding: 12px 14px;
        -webkit-appearance: none; appearance: none;
    }
    .mw-finput:focus, .mw-fselect:focus, .mw-farea:focus {
        outline: none; border-color: var(--mw-gold-500);
        box-shadow: 0 0 0 3px rgba(251, 191, 36, .18);
    }
    .mw-finput::placeholder, .mw-farea::placeholder { color: #a7b0c0; }
    .mw-fselect {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346536b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 13px center;
        padding-right: 36px;
    }
    .mw-farea { min-height: 96px; resize: vertical; }
    .mw-frow { margin-bottom: 15px; }
    .mw-fnote { font-size: 11.5px; color: var(--mw-muted); }
    .mw-ferr { font-size: 12px; color: #b3413a; margin-top: 6px; }
    .mw-fgood {
        font-size: 12.5px; color: #0f7a4d; background: #effaf3;
        border: 1px solid #c9ecd8; border-radius: 9px; padding: 9px 12px;
        display: flex; justify-content: space-between; gap: 10px;
    }

    /* ---- Chips, pills, ledgers, panels ---- */
    .mw-chiprow {
        display: flex; gap: 8px; overflow-x: auto;
        padding: 2px 20px 6px;
        scrollbar-width: none;
    }
    .mw-chiprow::-webkit-scrollbar { display: none; }
    .mw-chip {
        flex: 0 0 auto;
        font-size: 12.5px; font-weight: 600; color: var(--mw-ink);
        border: 1px solid var(--mw-hairline); border-radius: 999px;
        padding: 7px 14px; background: #fff;
        display: inline-flex; align-items: center; gap: 6px;
        white-space: nowrap;
    }
    .mw-chip.on { background: var(--mw-gold-100); border-color: var(--mw-gold-500); color: var(--mw-gold-800); }
    .mw-pill {
        font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
        padding: 4px 9px; border-radius: 5px;
        border: 1px solid var(--mw-hairline); color: var(--mw-muted);
        white-space: nowrap; display: inline-block;
    }
    .mw-pill.gold { background: var(--mw-gold-100); border-color: var(--mw-gold-400); color: var(--mw-gold-800); }
    .mw-pill.green { background: #effaf3; border-color: #bfe7cf; color: #0f7a4d; }
    .mw-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 7px 0; }
    .mw-kv b { color: var(--mw-ink); font-weight: 600; }
    .mw-panel { border: 1px solid var(--mw-hairline); border-radius: 14px; background: #fff; }
    .mw-panel-soft { border: 1px solid var(--mw-hairline-soft); border-radius: 14px; background: rgba(255, 255, 255, .6); }

    /* ---- Home ---- */
    .mw-hero { padding: 26px 20px 6px; }
    .mw-hero .mw-h-display { font-size: 37px; }
    .mw-searchbar {
        display: flex; align-items: center; gap: 9px;
        border: 1px solid var(--mw-hairline); background: #fff;
        border-radius: 12px; padding: 12px 14px;
        color: var(--mw-muted); font-size: 14.5px;
        margin: 16px 0 12px; width: 100%; text-align: left;
    }
    .mw-searchbar svg.mw-st { width: 19px; height: 19px; flex: 0 0 auto; }
    .mw-searchbar input {
        flex: 1; border: none; background: none; outline: none;
        font-family: var(--mw-sans); font-size: 14.5px; color: var(--mw-ink);
        min-width: 0;
    }
    .mw-searchbar input::placeholder { color: var(--mw-muted); }

    /* Featured hero rail: full width slides that snap one per swipe.
       The track owns the page gutters as scroll padding so each card
       centres exactly where the single card used to sit. */
    .mw-stubs {
        display: flex; gap: 12px;
        margin: 22px 0 4px; padding: 0 20px;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding: 0 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mw-stubs::-webkit-scrollbar { display: none; }
    .mw-stubs .mw-stub { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
    .mw-stub {
        position: relative; margin: 22px 20px 4px;
        background: var(--mw-navy-900); border-radius: 16px;
        color: #fff; overflow: hidden; display: block;
    }
    .mw-stub .mw-art { height: 168px; overflow: hidden; }
    .mw-stub .mw-art img { width: 100%; height: 100%; object-fit: cover; }
    .mw-stub .mw-bd { padding: 14px 18px 16px; position: relative; }
    .mw-stub .mw-when {
        font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
        font-weight: 700; color: var(--mw-gold-400);
    }
    .mw-stub h3 { color: #fff; font-size: 19px; margin: 5px 0 2px; }
    .mw-stub .mw-where { font-size: 12.5px; color: var(--mw-navy-200); }
    .mw-stub .mw-row { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
    .mw-stub .mw-from { font-size: 14px; font-weight: 600; color: #fff; }
    .mw-stub .mw-cta { font-size: 12.5px; font-weight: 700; color: var(--mw-gold-400); }
    .mw-stub .mw-tag {
        position: absolute; top: 12px; left: 12px; z-index: 2;
        background: var(--mw-gold-500); color: #231a05;
        font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
        padding: 4px 9px; border-radius: 5px;
    }
    .mw-stub .mw-perf { position: absolute; left: 0; right: 0; top: 168px; height: 0; border-top: 2px dashed rgba(255, 255, 255, .28); }
    .mw-stub .mw-perf::before, .mw-stub .mw-perf::after {
        content: ""; position: absolute; top: -9px; width: 18px; height: 18px;
        border-radius: 50%; background: var(--mw-ivory);
    }
    .mw-stub .mw-perf::before { left: -10px; }
    .mw-stub .mw-perf::after { right: -10px; }
    .mw-stub .mw-dots { position: absolute; right: 14px; top: 146px; display: flex; gap: 5px; z-index: 2; }
    .mw-stub .mw-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
    .mw-stub .mw-dots i.on { background: var(--mw-gold-400); }

    .mw-rail {
        display: flex; gap: 14px; overflow-x: auto;
        padding: 2px 20px 10px;
        scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .mw-rail::-webkit-scrollbar { display: none; }
    .mw-ecard {
        flex: 0 0 292px; scroll-snap-align: start;
        border: 1px solid var(--mw-hairline); border-radius: 14px;
        background: #fff; overflow: hidden; position: relative;
        display: block;
    }
    .mw-ecard .mw-media { height: 158px; position: relative; background: var(--mw-navy-100); }
    .mw-ecard .mw-media img { width: 100%; height: 100%; object-fit: cover; }
    .mw-ecard .mw-save {
        position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
        border-radius: 10px; background: rgba(255, 253, 247, .92);
        border: none; color: var(--mw-ink);
        display: flex; align-items: center; justify-content: center;
    }
    .mw-ecard .mw-save svg.mw-st { width: 17px; height: 17px; }
    .mw-ecard .mw-flag {
        position: absolute; top: 10px; left: 10px;
        background: var(--mw-gold-500); color: #231a05;
        font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
        padding: 4px 8px; border-radius: 5px;
        /* Urgency tags run to two words, and a badge that wrapped would
           read as a mistake. It stays on one line. */
        white-space: nowrap;
    }
    .mw-ecard .mw-bd { padding: 12px 15px 13px; }
    .mw-ecard .mw-when {
        font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
        font-weight: 700; color: var(--mw-gold-700);
    }
    .mw-ecard h3 { font-size: 17.5px; line-height: 1.24; margin: 5px 0 3px; }
    .mw-ecard .mw-where { font-size: 12px; color: var(--mw-muted); }
    .mw-ecard .mw-ft {
        display: flex; align-items: center; justify-content: space-between;
        border-top: 1px solid var(--mw-hairline-soft);
        margin-top: 11px; padding-top: 10px;
    }
    .mw-ecard .mw-from { font-size: 13px; color: var(--mw-body); }
    .mw-ecard .mw-from b { color: var(--mw-ink); font-weight: 700; font-size: 14px; }
    .mw-ecard .mw-from.free { color: #0f7a4d; font-weight: 700; }
    .mw-ecard .mw-go { font-size: 11.5px; font-weight: 700; color: var(--mw-gold-800); letter-spacing: .02em; }
    .mw-cards-col { display: flex; flex-direction: column; gap: 14px; padding: 0 20px; }
    .mw-cards-col .mw-ecard { flex: none; width: 100%; }

    .mw-catrow {
        display: flex; align-items: center; gap: 13px;
        padding: 12px 20px; border-bottom: 1px solid var(--mw-hairline-soft);
    }
    .mw-catrow img { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; }
    .mw-catrow .mw-nm { font-family: var(--mw-display); font-weight: 500; font-size: 16.5px; color: var(--mw-ink); flex: 1; }
    .mw-catrow .mw-ct { font-size: 11.5px; color: var(--mw-muted); white-space: nowrap; }
    .mw-catrow .mw-arr { color: var(--mw-gold-700); font-size: 15px; }

    .mw-sched .mw-lrow {
        display: flex; padding: 14px 20px; gap: 15px; align-items: flex-start;
        border-bottom: 1px solid var(--mw-hairline-soft);
    }
    .mw-sched .mw-d { text-align: center; min-width: 34px; }
    .mw-sched .mw-d b { display: block; font-family: var(--mw-display); font-size: 20px; font-weight: 600; color: var(--mw-ink); line-height: 1; }
    .mw-sched .mw-d span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mw-gold-700); }
    .mw-sched .mw-t { flex: 1; }
    .mw-sched .mw-t h4 { font-size: 15.5px; line-height: 1.25; margin-bottom: 2px; }
    .mw-sched .mw-t p { font-size: 11.5px; color: var(--mw-muted); }
    .mw-sched .mw-t p b { color: var(--mw-gold-800); font-weight: 600; }
    .mw-sched .mw-p { text-align: right; white-space: nowrap; }
    .mw-sched .mw-p b { display: block; font-size: 13px; color: var(--mw-ink); font-weight: 700; }
    .mw-sched .mw-p .free { color: #0f7a4d; }

    .mw-revwrap {
        background: #fff;
        border-top: 1px solid var(--mw-hairline-soft); border-bottom: 1px solid var(--mw-hairline-soft);
        padding: 30px 0 26px; margin-top: 34px;
    }
    .mw-revcard {
        flex: 0 0 300px; scroll-snap-align: start;
        border: 1px solid var(--mw-hairline-soft); border-top: 2px solid var(--mw-gold-500);
        border-radius: 12px; background: var(--mw-ivory);
        padding: 16px 17px 14px;
    }
    .mw-revcard .mw-stars { color: var(--mw-gold-600); font-size: 12px; letter-spacing: 2px; }
    .mw-revcard .mw-stars .mw-off { color: var(--mw-navy-100); }
    .mw-revcard blockquote {
        font-family: var(--mw-display); font-style: italic; font-size: 15px;
        color: var(--mw-ink); line-height: 1.5; margin: 9px 0 13px;
    }
    .mw-revcard .mw-who { display: flex; align-items: center; gap: 9px; }
    .mw-revcard .mw-av {
        width: 30px; height: 30px; border-radius: 50%;
        background: var(--mw-navy-900); color: #fff;
        font-size: 10.5px; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
    }
    .mw-revcard .mw-who b { display: block; font-size: 12.5px; color: var(--mw-ink); }
    .mw-revcard .mw-who span { font-size: 11px; color: var(--mw-muted); }
    .mw-revmeta { display: flex; align-items: center; gap: 8px; padding: 0 20px 14px; font-size: 12.5px; color: var(--mw-muted); }
    .mw-revmeta b { color: var(--mw-ink); }

    .mw-figures { background: var(--mw-navy-900); color: #fff; padding: 30px 20px 6px; margin-top: 36px; }
    .mw-figures .mw-grid {
        display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center;
        padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .mw-figures .mw-grid b { display: block; font-family: var(--mw-display); font-size: 26px; font-weight: 600; color: #fff; }
    .mw-figures .mw-grid b i { color: var(--mw-gold-400); font-style: normal; }
    .mw-figures .mw-grid span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mw-navy-300); font-weight: 600; }
    .mw-band { padding: 28px 0 34px; }
    .mw-band .mw-pic { margin: 18px 0 0; height: 190px; overflow: hidden; }
    .mw-band .mw-pic img { width: 100%; height: 100%; object-fit: cover; }
    .mw-band .mw-eyebrow { color: var(--mw-gold-400); }
    .mw-band h2 { color: #fff; font-size: 27px; line-height: 1.15; margin: 9px 0 10px; }
    .mw-band h2 em { font-style: italic; color: var(--mw-gold-400); }
    .mw-band p { font-size: 13.5px; color: var(--mw-navy-200); }
    .mw-band .mw-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 18px 0 20px; }
    .mw-band .mw-trio b { display: block; font-family: var(--mw-display); font-size: 16px; color: var(--mw-gold-400); font-weight: 500; }
    .mw-band .mw-trio span { font-size: 10.5px; color: var(--mw-navy-300); line-height: 1.4; display: block; }

    /* ---- Colophon (replaces the desktop footer) ---- */
    .mw-mfoot {
        position: relative; background: var(--mw-navy-900);
        color: var(--mw-navy-200);
        padding: 34px 24px 22px; text-align: center; margin-top: 26px;
    }
    .mw-mfoot::before {
        content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 12px;
        background: radial-gradient(circle at 8px 0, var(--mw-ivory) 5.5px, transparent 6px);
        background-size: 17px 12px; background-repeat: repeat-x;
    }
    .mw-mfoot .mw-logo img { height: 24px; margin: 0 auto; }
    .mw-mfoot .mw-tagline { font-size: 12.5px; color: var(--mw-navy-300); margin: 12px auto 16px; max-width: 270px; line-height: 1.65; }
    .mw-mfoot .mw-menucta {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 12.5px; font-weight: 600; color: var(--mw-gold-400);
        border: 1px solid rgba(252, 211, 77, .35); border-radius: 999px;
        padding: 9px 18px; background: none;
    }
    .mw-mfoot .mw-bottom {
        margin-top: 20px; padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        font-size: 10.5px; color: var(--mw-navy-400);
        display: flex; flex-direction: column; gap: 5px;
    }
    .mw-mfoot .mw-byline a { color: var(--mw-gold-400); font-weight: 600; }
    .mw-mfoot .mw-llc { font-size: 9.5px; color: var(--mw-navy-500); margin-top: 6px; }

    /* ---- Discover ---- */
    .mw-resulthead { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px; margin: 4px 0 10px; }
    .mw-resulthead .mw-cnt { font-size: 12px; color: var(--mw-muted); }
    .mw-sortrow { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 12px; font-size: 12px; color: var(--mw-muted); }
    .mw-sortrow b { color: var(--mw-ink); font-weight: 600; }
    .mw-pgn { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px; font-size: 13px; color: var(--mw-muted); }
    .mw-pgn a { font-weight: 600; color: var(--mw-ink); }

    /* ---- Sheets (filters, tickets, account) ---- */
    .mw-dim {
        position: fixed; inset: 0; background: rgba(15, 23, 38, .45);
        z-index: 70; opacity: 0; pointer-events: none;
        transition: opacity .22s ease;
    }
    .mw-dim.open { opacity: 1; pointer-events: auto; }
    .mw-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
        background: var(--mw-ivory);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -18px 50px rgba(15, 23, 38, .3);
        transform: translateY(104%);
        transition: transform .28s cubic-bezier(.32, .72, .3, 1);
        max-height: 88vh; display: flex; flex-direction: column;
    }
    .mw-sheet.open { transform: translateY(0); }
    .mw-sheet .mw-grab { display: flex; justify-content: center; padding: 9px 0 2px; flex: 0 0 auto; }
    .mw-sheet .mw-grab i { width: 42px; height: 4px; border-radius: 2px; background: rgba(23, 42, 68, .18); }
    .mw-sheet .mw-sh-head {
        display: flex; align-items: baseline; justify-content: space-between;
        padding: 8px 20px 12px; border-bottom: 1px solid var(--mw-hairline-soft);
        flex: 0 0 auto;
    }
    .mw-sheet .mw-sh-head h3 { font-size: 20px; }
    .mw-sheet .mw-sh-head .mw-x { font-size: 12.5px; font-weight: 600; color: var(--mw-muted); background: none; border: none; }
    .mw-sheet .mw-sh-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .mw-sheet .mw-sh-foot { flex: 0 0 auto; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mw-hairline-soft); }
    .mw-sheet .mw-grp {
        padding: 16px 20px 8px;
        font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
        font-weight: 700; color: var(--mw-muted);
    }

    /* ---- Event detail ---- */
    /* The cover shows the whole artwork whatever its aspect ratio: the
       stage grows with the image up to a cap, the image letterboxes
       inside it, and a blurred copy of the same artwork fills the bars
       so the frame never reads as empty. */
    .mw-cover { position: relative; background: var(--mw-navy-900); overflow: hidden; }
    .mw-cover .mw-cvbg {
        position: absolute; inset: -28px;
        background-size: cover; background-position: center;
        filter: blur(26px) saturate(1.08);
        opacity: .5;
    }
    .mw-cover img.mw-cvimg {
        position: relative; display: block;
        width: 100%; height: auto;
        min-height: 190px; max-height: min(480px, 124vw);
        object-fit: contain;
    }
    .mw-cover .mw-cdots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
    .mw-cover .mw-cdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
    .mw-cover .mw-cdots i.on { background: var(--mw-gold-400); }
    .mw-cover .mw-count {
        position: absolute; right: 12px; bottom: 10px;
        background: rgba(13, 20, 33, .65); color: #fff;
        font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    }
    .mw-actions { display: flex; gap: 18px; padding: 12px 20px 0; }
    .mw-actions a, .mw-actions button {
        font-size: 12.5px; font-weight: 600; color: var(--mw-ink);
        text-decoration: underline; text-decoration-color: var(--mw-hairline);
        text-underline-offset: 3px; background: none; border: none; padding: 0;
    }
    .mw-facts { margin: 18px 20px 0; border-top: 1px solid var(--mw-hairline-soft); }
    .mw-fact { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-fact .mw-k {
        flex: 0 0 86px;
        font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
        font-weight: 700; color: var(--mw-muted); padding-top: 3px;
    }
    .mw-fact .mw-v { min-width: 0; }
    .mw-fact .mw-v b { display: block; font-size: 14px; color: var(--mw-ink); font-weight: 600; }
    .mw-fact .mw-v span { font-size: 12px; color: var(--mw-muted); }
    .mw-fact .mw-v a { color: var(--mw-gold-800); font-weight: 600; }
    .mw-prose { padding: 0 20px; font-size: 14.5px; color: var(--mw-body); }
    .mw-prose p { margin-bottom: 13px; }
    .mw-prose h2 { font-size: 21px; margin: 26px 0 10px; }
    .mw-prose ul, .mw-prose ol { padding-left: 20px; margin-bottom: 13px; }
    .mw-prose li { margin-bottom: 6px; }
    .mw-prose img { border-radius: 12px; }
    .mw-prose a { color: var(--mw-gold-800); font-weight: 600; }
    .mw-mapfacade {
        margin: 6px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 13px;
        height: 172px;
        background: linear-gradient(rgba(23, 42, 68, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 42, 68, .045) 1px, transparent 1px);
        background-size: 26px 26px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 8px; text-align: center;
    }
    .mw-mapfacade .mw-pin { width: 10px; height: 10px; border-radius: 50%; background: var(--mw-gold-600); box-shadow: 0 0 0 5px var(--mw-gold-200); }
    .mw-mapfacade b { font-size: 13px; color: var(--mw-ink); }
    .mw-mapfacade span { font-size: 11px; color: var(--mw-muted); display: block; }
    .mw-hostcard {
        margin: 8px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 13px;
        background: #fff; padding: 14px 15px;
        display: flex; align-items: center; gap: 12px;
        width: calc(100% - 40px); text-align: left;
        font: inherit; color: inherit; cursor: pointer;
        transition: border-color .15s;
    }
    .mw-hostcard:active { border-color: var(--mw-navy-300); }
    .mw-hostcard .mw-id { min-width: 0; flex: 1; }
    .mw-hostcard .mw-id b { display: flex; align-items: center; gap: 5px; min-width: 0; }
    .mw-hostcard .mw-hname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mw-hostcard .mw-verified { flex: 0 0 auto; }
    .mw-hostcard .mw-hostgo { flex: 0 0 18px; color: var(--mw-muted); }
    .mw-hostcard .mw-hostgo svg { width: 18px; height: 18px; }
    .mw-hostcard img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
    .mw-hostcard .mw-mono {
        width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
        background: var(--mw-navy-900); color: #fff;
        font-size: 13px; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
    }
    .mw-hostcard .mw-id { flex: 1; min-width: 0; }
    .mw-hostcard .mw-id b { display: block; font-size: 14.5px; color: var(--mw-ink); font-weight: 600; }
    .mw-hostcard .mw-id span { font-size: 11.5px; color: var(--mw-muted); }

    .mw-cdown { margin: 18px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 14px; background: #fff; padding: 13px 16px 12px; }
    .mw-cdown .mw-lbl { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mw-gold-700); font-weight: 700; }
    .mw-cdown .mw-cells { display: flex; align-items: baseline; gap: 0; margin-top: 6px; }
    .mw-cdown .mw-cell { flex: 1; text-align: center; }
    .mw-cdown .mw-cell b { display: block; font-family: var(--mw-display); font-size: 23px; font-weight: 600; color: var(--mw-ink); font-variant-numeric: tabular-nums; }
    .mw-cdown .mw-cell span { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mw-muted); font-weight: 600; }
    .mw-cdown .mw-csep { color: var(--mw-navy-200); font-family: var(--mw-display); font-size: 19px; transform: translateY(-3px); }
    .mw-cdown .mw-sub { text-align: center; font-size: 10.5px; color: var(--mw-muted); margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--mw-hairline-soft); }

    /* ---- Ticket rows, steppers, buy and pay bars ---- */
    .mw-tkrow { padding: 15px 0; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-tkrow .mw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .mw-tkrow .mw-top b { font-family: var(--mw-display); font-size: 16.5px; color: var(--mw-ink); font-weight: 500; }
    .mw-tkrow .mw-top .mw-pr { font-size: 15px; font-weight: 700; color: var(--mw-ink); white-space: nowrap; }
    .mw-tkrow .mw-sub { font-size: 12px; color: var(--mw-muted); margin: 3px 0 9px; }
    .mw-tkrow .mw-ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .mw-tkrow .mw-note { font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: var(--mw-gold-700); }
    .mw-tkrow .mw-note.grey { color: var(--mw-muted); }
    .mw-tkrow .mw-note.urgent { color: #dc2626; }
    .mw-tkrow.soldout .mw-top b, .mw-tkrow.soldout .mw-top .mw-pr { color: var(--mw-muted); }
    .mw-stepper { display: inline-flex; align-items: center; border: 1px solid var(--mw-hairline); border-radius: 10px; background: #fff; }
    .mw-stepper button { width: 36px; height: 34px; border: none; background: none; font-size: 17px; color: var(--mw-ink); line-height: 1; }
    .mw-stepper button:disabled { color: var(--mw-navy-200); }
    .mw-stepper span { min-width: 30px; text-align: center; font-size: 14.5px; font-weight: 700; color: var(--mw-ink); }

    .mw-buybar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
        background: rgba(255, 253, 247, .88);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid rgba(23, 42, 68, .09);
        box-shadow: 0 -12px 32px rgba(23, 42, 68, .10);
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
        display: flex; align-items: center; gap: 14px;
        transition: opacity .28s ease, transform .28s ease;
    }
    /* The purchase bar stands down once the colophon is on screen: the
       buyer has reached the end of the page and the bar would otherwise
       sit on top of the footer. It returns the moment they scroll back
       up into the body of the page. */
    .mw-buybar.mw-buybar-away {
        opacity: 0;
        transform: translateY(100%);
        pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .mw-buybar { transition: none; }
    }
    .mw-buybar::before {
        content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(217, 119, 6, .5), transparent);
    }
    .mw-buybar .mw-amt .mw-fr { display: block; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mw-gold-700); font-weight: 700; margin-bottom: 2px; }
    .mw-buybar .mw-amt b { display: block; font-family: var(--mw-display); font-size: 19px; color: var(--mw-ink); font-weight: 600; line-height: 1.1; white-space: nowrap; }
    .mw-buybar .mw-amt span { font-size: 10.5px; color: var(--mw-muted); }
    .mw-buybar .mw-btn { flex: 1; border-radius: 999px; padding: 14px 20px; font-size: 14px; letter-spacing: .01em; }
    /* Reserve room for the fixed purchase bar so the last of the page
       content, and the colophon, can scroll clear of it. */
    /* Room for the sticky purchase bar. This sits on the content, not on
       the body: the colophon is the body's last child, so padding there
       left a band of bare page below the footer once the reader reached
       the end. Reserving the space inside main keeps the last of the
       content clear of the bar and lets the footer close the page. */
    body.mw-on.mw-hasbuybar main { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

    .mw-paybar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
        background: rgba(255, 253, 247, .88);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid rgba(23, 42, 68, .09);
        box-shadow: 0 -12px 32px rgba(23, 42, 68, .10);
        padding: 12px 18px calc(9px + env(safe-area-inset-bottom, 0px));
    }
    .mw-paybar::before {
        content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(217, 119, 6, .5), transparent);
    }
    .mw-paybar .mw-btn-block { border-radius: 999px; padding: 15px 20px; font-size: 14.5px; }
    .mw-paybar .mw-btn-gold {
        background: linear-gradient(180deg, var(--mw-gold-400), var(--mw-gold-500));
        box-shadow: 0 8px 22px rgba(217, 119, 6, .32), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(180, 83, 9, .28);
        color: #231a05;
    }
    .mw-paybar .mw-fine { text-align: center; font-size: 10px; color: var(--mw-muted); margin-top: 7px; }
    .mw-confidence {
        margin: 16px 20px 0;
        background: var(--mw-gold-100); border: 1px solid var(--mw-gold-200);
        border-radius: 12px; padding: 13px 15px;
        font-size: 12px; color: var(--mw-body);
    }
    .mw-confidence b { color: var(--mw-ink); }

    /* ---- Checkout ---- */
    .mw-holdline { padding: 10px 20px 0; font-size: 12.5px; color: var(--mw-body); }
    .mw-holdline b { color: var(--mw-gold-700); font-weight: 700; }
    .mw-osum { margin: 14px 20px 0; }
    .mw-osum .mw-ev { display: flex; gap: 12px; padding: 13px 14px; }
    .mw-osum .mw-ev img { width: 64px; height: 52px; border-radius: 9px; object-fit: cover; flex: 0 0 64px; }
    .mw-osum .mw-ev b { display: block; font-family: var(--mw-display); font-weight: 500; font-size: 15px; color: var(--mw-ink); line-height: 1.25; }
    .mw-osum .mw-ev span { font-size: 11px; color: var(--mw-muted); }
    .mw-osum .mw-lines { border-top: 1px solid var(--mw-hairline-soft); padding: 8px 14px 12px; }
    .mw-osum .mw-lines .mw-kv { font-size: 13px; padding: 5px 0; }
    .mw-osum .mw-lines .disc, .mw-osum .mw-lines .disc b { color: #0f7a4d; }
    .mw-osum .mw-grand { border-top: 1px solid var(--mw-hairline); margin-top: 6px; padding-top: 9px; font-size: 15px; }
    .mw-osum .mw-grand b { font-size: 16.5px; font-weight: 700; }
    .mw-osum .mw-heldtag {
        margin: 0 14px 13px; text-align: center;
        font-size: 11.5px; color: var(--mw-gold-800);
        background: var(--mw-gold-100); border: 1px solid var(--mw-gold-200);
        border-radius: 8px; padding: 7px;
    }
    .mw-cochunk { padding: 24px 20px 0; }
    .mw-cochunk h2 { font-size: 20px; margin: 5px 0 14px; }
    .mw-attcard { border: 1px solid var(--mw-hairline); border-radius: 12px; background: #fff; padding: 13px 14px; margin-bottom: 11px; }
    .mw-attcard .mw-ah { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .mw-attcard .mw-ah b { font-size: 13px; color: var(--mw-ink); font-weight: 700; }
    .mw-attcard .mw-ah .mw-same { font-size: 11.5px; font-weight: 600; color: var(--mw-gold-800); text-decoration: underline; text-underline-offset: 3px; background: none; border: none; }
    .mw-attcard .mw-ah .mw-adm {
        font-size: 9px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700;
        color: var(--mw-gold-700); border: 1px solid var(--mw-gold-400);
        border-radius: 5px; padding: 2px 7px; margin-left: 8px;
    }
    .mw-groupnote { font-size: 12px; color: var(--mw-body); background: var(--mw-gold-100); border: 1px solid var(--mw-gold-200); border-radius: 10px; padding: 10px 13px; margin: 2px 0 11px; }
    .mw-paybox {
        border: 1.5px solid var(--mw-navy-900); border-radius: 12px; background: #fff;
        padding: 13px 15px;
        display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    }
    .mw-paybox b { display: block; font-size: 14.5px; color: var(--mw-ink); }
    .mw-paybox span { font-size: 11.5px; color: var(--mw-muted); }
    .mw-paybox .mw-auto { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--mw-gold-700); white-space: nowrap; }
    .mw-payopt { border: 1px solid var(--mw-hairline); border-radius: 12px; background: #fff; padding: 13px 15px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .mw-payopt.on { border: 1.5px solid var(--mw-navy-900); }
    .mw-payopt .mw-rb { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--mw-navy-300); flex: 0 0 17px; position: relative; }
    .mw-payopt.on .mw-rb { border-color: var(--mw-gold-600); }
    .mw-payopt.on .mw-rb::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mw-gold-600); }
    .mw-payopt b { display: block; font-size: 14px; color: var(--mw-ink); }
    .mw-payopt span { font-size: 11px; color: var(--mw-muted); display: block; }

    /* ---- Confirmation pass, wallet ---- */
    .mw-okmark {
        width: 52px; height: 52px; border-radius: 50%;
        border: 1.5px solid var(--mw-gold-500); color: var(--mw-gold-600);
        display: flex; align-items: center; justify-content: center;
        margin: 30px auto 14px;
    }
    .mw-pass {
        margin: 20px 20px 0; border: 1px solid var(--mw-hairline);
        border-radius: 16px; background: #fff; overflow: hidden;
        box-shadow: 0 14px 34px -18px rgba(23, 42, 68, .35);
    }
    .mw-pass .mw-ph2 { background: var(--mw-navy-900); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; }
    .mw-pass .mw-ph2 span { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--mw-gold-400); }
    .mw-pass .mw-ph2 img { height: 16px; }
    .mw-pass .mw-bd { padding: 15px 16px 13px; }
    .mw-pass .mw-bd h3 { font-size: 18px; line-height: 1.25; margin-bottom: 6px; }
    .mw-pass .mw-bd .mw-mt { font-size: 12px; color: var(--mw-body); }
    .mw-pass .mw-bd .mw-mt b { color: var(--mw-ink); font-weight: 600; }
    .mw-pass .mw-split { display: flex; gap: 14px; align-items: center; }
    .mw-pass .mw-qr { flex: 0 0 96px; }
    .mw-pass .mw-qr img, .mw-pass .mw-qr svg { width: 96px; height: 96px; display: block; }
    .mw-pass .mw-perfline { position: relative; border-top: 2px dashed var(--mw-hairline); margin: 0 -16px; }
    .mw-pass .mw-perfline::before, .mw-pass .mw-perfline::after {
        content: ""; position: absolute; top: -9px; width: 18px; height: 18px;
        border-radius: 50%; background: var(--mw-ivory); border: 1px solid var(--mw-hairline);
    }
    .mw-pass .mw-perfline::before { left: -10px; }
    .mw-pass .mw-perfline::after { right: -10px; }
    .mw-pass .mw-ft { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 16px 13px; }
    .mw-pass .mw-ft b { font-size: 13.5px; color: var(--mw-ink); font-weight: 700; }
    .mw-pass .mw-ft span { font-size: 11px; letter-spacing: .08em; color: var(--mw-muted); font-family: ui-monospace, Menlo, monospace; }
    .mw-passacts { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 0; }
    .mw-segseg { display: flex; gap: 8px; padding: 14px 20px 4px; }
    .mw-segseg a, .mw-segseg button {
        flex: 1; text-align: center;
        font-size: 12.5px; font-weight: 600; padding: 9px 0;
        border-radius: 999px; border: 1px solid var(--mw-hairline);
        background: #fff; color: var(--mw-muted);
    }
    .mw-segseg a.on, .mw-segseg button.on { background: var(--mw-navy-900); border-color: var(--mw-navy-900); color: #fff; }
    .mw-ordcard { margin: 14px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 14px; background: #fff; overflow: hidden; }
    .mw-ordcard .mw-oh { display: flex; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-ordcard .mw-oh img { width: 58px; height: 48px; border-radius: 9px; object-fit: cover; flex: 0 0 58px; }
    .mw-ordcard .mw-oh b { display: block; font-family: var(--mw-display); font-weight: 500; font-size: 15px; color: var(--mw-ink); line-height: 1.25; }
    .mw-ordcard .mw-oh span { font-size: 11px; color: var(--mw-muted); }
    .mw-tickrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--mw-hairline-soft); font-size: 12.5px; }
    .mw-tickrow:last-child { border-bottom: none; }
    .mw-tickrow .mw-mini { width: 34px; height: 34px; border: 1px solid var(--mw-hairline); border-radius: 7px; padding: 3px; flex: 0 0 34px; }
    .mw-tickrow .mw-mini img, .mw-tickrow .mw-mini svg { width: 100%; height: 100%; display: block; }
    .mw-tickrow .mw-tt { min-width: 0; }
    .mw-tickrow .mw-tt b { display: block; color: var(--mw-ink); font-weight: 600; }
    .mw-tickrow .mw-tt span { font-size: 10.5px; color: var(--mw-muted); font-family: ui-monospace, Menlo, monospace; letter-spacing: .05em; }
    .mw-tickrow .mw-act { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--mw-gold-800); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
    .mw-ordfoot { display: flex; align-items: center; gap: 14px; padding: 11px 14px; font-size: 11.5px; border-top: 1px solid var(--mw-hairline-soft); }
    .mw-ordfoot a { font-weight: 600; color: var(--mw-ink); text-decoration: underline; text-decoration-color: var(--mw-gold-500); text-underline-offset: 3px; }
    .mw-ordfoot .mw-rt { margin-left: auto; color: var(--mw-muted); }

    /* ---- Blog, article, guides, authors ---- */
    .mw-mast { text-align: center; padding: 28px 22px 8px; }
    .mw-mast .mw-h-display { font-size: 31px; }
    .mw-featart { margin: 16px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 14px; background: #fff; overflow: hidden; display: block; }
    .mw-featart img { height: 170px; width: 100%; object-fit: cover; }
    .mw-featart .mw-bd { padding: 15px 17px 16px; }
    .mw-featart h3 { font-size: 20px; line-height: 1.22; margin: 6px 0 8px; }
    .mw-featart p { font-size: 13px; color: var(--mw-body); }
    .mw-artcard { display: flex; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-artcard img { width: 96px; height: 74px; object-fit: cover; border-radius: 9px; flex: 0 0 96px; }
    .mw-artcard .mw-tt { min-width: 0; }
    .mw-artcard h4 { font-size: 15.5px; line-height: 1.28; margin: 4px 0 4px; }
    .mw-artcard .mw-by { font-size: 11px; color: var(--mw-muted); }
    .mw-artcard .mw-by b { color: var(--mw-ink); font-weight: 600; }
    .mw-arthero { text-align: center; padding: 24px 22px 4px; }
    .mw-arthero h1 { font-size: 26px; line-height: 1.2; margin: 9px 0 10px; }
    .mw-arthero .mw-by { font-size: 12px; color: var(--mw-muted); }
    .mw-arthero .mw-by b { color: var(--mw-ink); font-weight: 600; }
    .mw-artimg { margin: 16px 20px 0; border-radius: 14px; overflow: hidden; }
    .mw-artimg img { width: 100%; height: 190px; object-fit: cover; }
    .mw-inbrief {
        margin: 16px 20px 0;
        border: 1px solid var(--mw-gold-200); border-left: 3px solid var(--mw-gold-500);
        background: var(--mw-gold-100); border-radius: 0 12px 12px 0;
        padding: 13px 15px;
    }
    .mw-inbrief b { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mw-gold-800); margin-bottom: 6px; }
    .mw-inbrief p { font-size: 13px; color: var(--mw-body); }
    .mw-pullq {
        margin: 18px 20px; border-left: 2px solid var(--mw-gold-500); padding-left: 15px;
        font-family: var(--mw-display); font-style: italic;
        font-size: 16.5px; color: var(--mw-ink); line-height: 1.5;
    }
    .mw-authorcard { margin: 24px 20px 0; border-top: 1px solid var(--mw-hairline-soft); padding-top: 16px; display: flex; gap: 12px; align-items: center; }
    .mw-authorcard img, .mw-authorcard .mw-mono { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; }
    .mw-authorcard .mw-mono { background: var(--mw-navy-900); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .mw-authorcard b { display: block; font-size: 14px; color: var(--mw-ink); }
    .mw-authorcard span { font-size: 11.5px; color: var(--mw-muted); }
    .mw-guiderow { display: flex; gap: 15px; align-items: baseline; padding: 16px 20px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-guiderow .mw-no { font-family: var(--mw-display); font-size: 14px; font-weight: 600; color: var(--mw-gold-700); }
    .mw-guiderow h4 { flex: 1; font-size: 16.5px; line-height: 1.3; }
    .mw-guiderow .mw-mt { font-size: 10.5px; color: var(--mw-muted); white-space: nowrap; }
    .mw-gmeta { display: flex; gap: 20px; padding: 14px 20px 0; }
    .mw-gmeta div b { display: block; font-family: var(--mw-display); font-size: 15px; color: var(--mw-ink); font-weight: 600; }
    .mw-gmeta div span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mw-muted); font-weight: 600; }
    .mw-gstep { display: flex; gap: 15px; padding: 18px 20px 0; }
    .mw-gstep .mw-no { font-family: var(--mw-display); font-size: 15px; font-weight: 600; color: var(--mw-gold-700); padding-top: 2px; }
    .mw-gstep h4 { font-size: 17px; margin-bottom: 5px; }
    .mw-gstep p { font-size: 13.5px; color: var(--mw-body); }
    .mw-authrow { display: flex; gap: 13px; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-authrow .mw-mono {
        width: 46px; height: 46px; border-radius: 50%;
        background: var(--mw-navy-900); color: #fff;
        font-size: 13px; font-weight: 700;
        display: flex; align-items: center; justify-content: center; flex: 0 0 46px;
    }
    .mw-authrow .mw-id { flex: 1; min-width: 0; }
    .mw-authrow .mw-id b { display: block; font-family: var(--mw-display); font-size: 16.5px; font-weight: 500; color: var(--mw-ink); }
    .mw-authrow .mw-id span { font-size: 11.5px; color: var(--mw-muted); display: block; }
    .mw-authrow .mw-ct { font-size: 10.5px; color: var(--mw-muted); white-space: nowrap; }
    .mw-aprof { text-align: center; padding: 26px 24px 0; }
    .mw-aprof .mw-mono {
        width: 74px; height: 74px; border-radius: 50%;
        background: var(--mw-navy-900); color: #fff;
        font-size: 21px; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 12px;
    }
    .mw-aprof h1 { font-size: 26px; }
    .mw-aprof .mw-rl { font-size: 12.5px; color: var(--mw-muted); margin-top: 3px; }
    .mw-aprof p.mw-bio { font-size: 13.5px; color: var(--mw-body); text-align: left; margin-top: 14px; }
    .mw-alat { padding: 14px 20px; border-bottom: 1px solid var(--mw-hairline-soft); display: block; }
    .mw-alat span { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--mw-gold-700); }
    .mw-alat h4 { font-size: 15.5px; line-height: 1.3; margin-top: 4px; }
    .mw-alat .mw-tg { font-size: 10.5px; color: var(--mw-muted); margin-top: 3px; }

    /* ---- How it works, about, pricing ---- */
    .mw-stepcard { padding: 16px 20px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-stepcard .mw-no { font-family: var(--mw-display); font-size: 13px; font-weight: 600; color: var(--mw-gold-700); }
    .mw-stepcard h4 { font-size: 17.5px; margin: 4px 0 4px; }
    .mw-stepcard p { font-size: 13px; color: var(--mw-body); }
    .mw-callout {
        margin: 20px 20px 0;
        border: 1px solid var(--mw-hairline-soft); border-left: 3px solid var(--mw-gold-500);
        border-radius: 0 12px 12px 0; background: #fff; padding: 14px 16px;
    }
    .mw-callout h4 { font-size: 16px; margin-bottom: 4px; }
    .mw-callout p { font-size: 12.5px; color: var(--mw-body); }
    .mw-feecar { display: flex; gap: 12px; overflow-x: auto; padding: 6px 20px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .mw-feecar::-webkit-scrollbar { display: none; }
    .mw-feecard { flex: 0 0 218px; scroll-snap-align: start; border: 1px solid var(--mw-hairline); border-radius: 13px; background: #fff; padding: 15px 16px 13px; }
    .mw-feecard.on { border-color: var(--mw-gold-500); background: var(--mw-gold-100); box-shadow: 0 8px 22px -14px rgba(180, 120, 10, .5); }
    .mw-feecard .mw-mk { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--mw-muted); }
    .mw-feecard.on .mw-mk { color: var(--mw-gold-800); }
    .mw-feecard .mw-rt { font-family: var(--mw-display); font-size: 23px; font-weight: 600; color: var(--mw-ink); margin: 7px 0 1px; }
    .mw-feecard .mw-per { font-size: 11px; color: var(--mw-muted); }
    .mw-feecard .mw-via { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--mw-navy-500); border-top: 1px solid var(--mw-hairline-soft); margin-top: 11px; padding-top: 9px; }
    .mw-feecap { padding: 10px 20px 0; font-size: 11.5px; color: var(--mw-muted); }
    .mw-ctaband { background: var(--mw-navy-800); color: #fff; text-align: center; padding: 32px 22px 34px; margin-top: 34px; }
    .mw-ctaband h2 { color: #fff; font-size: 24px; margin-bottom: 16px; }
    .mw-ctaband .mw-btns { display: flex; flex-direction: column; gap: 9px; }
    .mw-ledger3 { margin: 16px 20px 0; border-top: 1px solid var(--mw-hairline-soft); }
    .mw-ledger3 .mw-row { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-ledger3 .mw-row b { flex: 0 0 128px; font-family: var(--mw-display); font-weight: 500; font-size: 14.5px; color: var(--mw-ink); line-height: 1.3; }
    .mw-ledger3 .mw-row p { font-size: 12px; color: var(--mw-body); }
    .mw-capgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 6px 20px 0; }
    .mw-capgrid .mw-cap svg.mw-st { width: 21px; height: 21px; color: var(--mw-navy-700); }
    .mw-capgrid .mw-cap h4 { font-size: 14.5px; margin: 7px 0 3px; }
    .mw-capgrid .mw-cap p { font-size: 11.5px; color: var(--mw-body); line-height: 1.45; }
    .mw-segg { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mw-hairline-soft); border-top: 1px solid var(--mw-hairline-soft); border-bottom: 1px solid var(--mw-hairline-soft); margin-top: 16px; }
    .mw-segg div { background: var(--mw-ivory); padding: 16px 18px; }
    .mw-segg h4 { font-size: 16px; margin-bottom: 4px; }
    .mw-segg p { font-size: 11.5px; color: var(--mw-body); }
    .mw-founder { margin: 18px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 14px; background: #fff; padding: 16px 17px; }
    .mw-founder .mw-fh { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
    .mw-founder .mw-mono { width: 46px; height: 46px; border-radius: 50%; background: var(--mw-navy-900); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
    .mw-founder .mw-fh b { display: block; font-size: 14px; color: var(--mw-ink); }
    .mw-founder .mw-fh span { font-size: 11px; color: var(--mw-muted); }
    .mw-founder p { font-size: 13px; color: var(--mw-body); margin-bottom: 9px; }

    /* ---- FAQs, support ---- */
    .mw-faq { padding: 14px 20px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-faq summary { list-style: none; }
    .mw-faq summary::-webkit-details-marker { display: none; }
    .mw-faq .mw-q { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; cursor: pointer; }
    .mw-faq .mw-q h4 { font-size: 16px; line-height: 1.3; }
    .mw-faq .mw-q .mw-mk { font-family: var(--mw-display); color: var(--mw-gold-700); font-size: 17px; }
    .mw-faq .mw-a { font-size: 13px; color: var(--mw-body); margin-top: 8px; }
    .mw-lane { padding: 16px 20px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-lane h4 { font-size: 17px; margin-bottom: 4px; }
    .mw-lane p { font-size: 12.5px; color: var(--mw-body); margin-bottom: 7px; }

    /* ---- Careers ---- */
    .mw-rolerow { padding: 16px 20px; border-bottom: 1px solid var(--mw-hairline-soft); display: flex; align-items: center; gap: 12px; }
    .mw-rolerow .mw-id { flex: 1; min-width: 0; }
    .mw-rolerow h4 { font-size: 18px; }
    .mw-rolerow span { font-size: 11.5px; color: var(--mw-muted); }
    .mw-roleul { padding: 0 20px; }
    .mw-roleul li { list-style: none; font-size: 13.5px; color: var(--mw-body); padding: 7px 0 7px 18px; position: relative; }
    .mw-roleul li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 1.5px; background: var(--mw-gold-600); }

    /* ---- Curated access, states, reviews, email preferences ---- */
    .mw-packrow { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-packrow.on { background: var(--mw-gold-100); border-left: 3px solid var(--mw-gold-500); padding-left: 17px; }
    .mw-packrow .mw-id { flex: 1; min-width: 0; }
    .mw-packrow h4 { font-size: 17px; }
    .mw-packrow span { font-size: 11px; color: var(--mw-muted); display: block; }
    .mw-packrow .mw-pr { text-align: right; }
    .mw-packrow .mw-pr b { display: block; font-family: var(--mw-display); font-size: 16.5px; font-weight: 600; color: var(--mw-ink); }
    .mw-packrow .mw-pr i { font-style: normal; font-size: 9.5px; letter-spacing: .08em; color: var(--mw-muted); }
    .mw-statecard { margin: 14px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 14px; background: #fff; padding: 18px 18px 16px; text-align: center; }
    .mw-statecard .mw-lb { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mw-muted); margin-bottom: 8px; }
    .mw-statecard h3 { font-size: 20px; margin-bottom: 7px; }
    .mw-statecard h3 em { font-style: italic; color: var(--mw-gold-700); }
    .mw-statecard p { font-size: 12.5px; color: var(--mw-body); }
    .mw-statecard .mw-btn { margin-top: 13px; }
    .mw-stars5 { display: flex; gap: 7px; justify-content: flex-start; padding: 2px 0 6px; }
    .mw-stars5 svg { width: 26px; height: 26px; }
    .mw-ratelb { font-size: 12px; color: var(--mw-gold-800); font-weight: 600; }
    .mw-cc { text-align: right; font-size: 10px; color: var(--mw-muted); margin-top: 4px; }
    .mw-prefcard { border: 1px solid var(--mw-hairline); border-radius: 12px; background: #fff; padding: 13px 14px; margin-bottom: 10px; display: flex; gap: 12px; }
    .mw-prefcard.on { border-color: var(--mw-gold-500); background: var(--mw-gold-100); }
    .mw-prefcard .mw-rb { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--mw-navy-300); flex: 0 0 17px; margin-top: 2px; position: relative; }
    .mw-prefcard.on .mw-rb { border-color: var(--mw-gold-600); }
    .mw-prefcard.on .mw-rb::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mw-gold-600); }
    .mw-prefcard b { display: block; font-size: 14px; color: var(--mw-ink); }
    .mw-prefcard span { font-size: 11.5px; color: var(--mw-muted); }

    /* ---- Auth ---- */
    .mw-authwrap { padding: 34px 24px 0; }
    .mw-authcard {
        border: 1px solid var(--mw-hairline); border-radius: 16px; background: #fff;
        padding: 24px 20px;
        box-shadow: 0 18px 44px -26px rgba(23, 42, 68, .35);
    }
    .mw-authcard h1 { font-size: 25px; text-align: center; }
    .mw-authcard .mw-sub { text-align: center; font-size: 12.5px; color: var(--mw-muted); margin: 6px 0 20px; }
    .mw-authlinks { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12.5px; }
    .mw-under { text-align: center; font-size: 12.5px; color: var(--mw-muted); margin-top: 18px; }
    .mw-intent { border: 1px solid var(--mw-hairline); border-radius: 13px; background: #fff; padding: 14px 15px; margin-bottom: 10px; position: relative; display: block; cursor: pointer; }
    .mw-intent.sel { border-color: var(--mw-gold-500); background: var(--mw-gold-100); }
    .mw-intent b { display: block; font-family: var(--mw-display); font-weight: 500; font-size: 16.5px; color: var(--mw-ink); }
    .mw-intent span { font-size: 11.5px; color: var(--mw-muted); }
    .mw-intent .mw-tick { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--mw-navy-200); }
    .mw-intent.sel .mw-tick { border-color: var(--mw-gold-600); background: var(--mw-gold-600); }
    .mw-intent.sel .mw-tick::after {
        content: ""; position: absolute; inset: 4px 4px 6px 4px;
        border-left: 2px solid #fff; border-bottom: 2px solid #fff;
        transform: rotate(-45deg) translate(1px, -1px);
    }
    .mw-intent input { position: absolute; opacity: 0; pointer-events: none; }
    .mw-regchips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
    .mw-regchips span { font-size: 10.5px; font-weight: 700; color: var(--mw-gold-800); background: var(--mw-gold-100); border: 1px solid var(--mw-gold-400); border-radius: 999px; padding: 4px 10px; }

    /* ---- Errors and empty states ---- */
    .mw-errblk { text-align: center; padding: 52px 26px 10px; }
    .mw-errblk .mw-code { font-family: var(--mw-display); letter-spacing: .5em; color: var(--mw-gold-600); font-size: 14px; margin: 10px 0 6px; }
    .mw-errblk h1 { font-size: 31px; line-height: 1.15; }
    .mw-errblk h1 em { font-style: italic; color: var(--mw-gold-700); }
    .mw-errblk p { font-size: 13.5px; color: var(--mw-body); margin: 12px auto 18px; max-width: 300px; }
    .mw-errled { margin: 26px 20px 0; border-top: 1px solid var(--mw-hairline-soft); }
    .mw-errled .mw-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--mw-hairline-soft); font-size: 13px; }
    .mw-errled .mw-row b { font-family: var(--mw-display); color: var(--mw-ink); font-weight: 600; min-width: 34px; }
    .mw-errled .mw-row i { font-style: italic; font-family: var(--mw-display); color: var(--mw-gold-700); }
    .mw-errled .mw-row span { margin-left: auto; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mw-muted); font-weight: 600; white-space: nowrap; }

    /* ---- Drawer (More) and account sheet ---- */
    .mw-drawer {
        position: fixed; inset: 0; background: var(--mw-ivory); z-index: 80;
        display: flex; flex-direction: column;
        transform: translateX(102%);
        transition: transform .28s cubic-bezier(.32, .72, .3, 1);
    }
    .mw-drawer.open { transform: translateX(0); }
    .mw-drawer .mw-dh { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--mw-hairline-soft); flex: 0 0 auto; }
    .mw-drawer .mw-dh img { height: 24px; }
    .mw-drawer nav { padding: 8px 0 0; overflow: auto; flex: 1 1 auto; }
    .mw-drawer .mw-grp { padding: 16px 22px 4px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--mw-gold-700); }
    .mw-drawer a.mw-big { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 22px; font-family: var(--mw-display); font-size: 21px; color: var(--mw-ink); }
    .mw-drawer a.mw-big small { font-family: var(--mw-sans); font-size: 10.5px; color: var(--mw-muted); }
    .mw-drawer .mw-dfoot { margin-top: auto; padding: 16px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mw-hairline-soft); flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; }
    .mw-drawer .mw-legal { text-align: center; font-size: 10.5px; color: var(--mw-muted); margin-top: 3px; }
    .mw-acctrow { display: flex; align-items: center; gap: 13px; padding: 13px 22px; border-bottom: 1px solid var(--mw-hairline-soft); font-size: 15px; color: var(--mw-ink); font-weight: 500; }
    .mw-acctrow svg.mw-st { width: 20px; height: 20px; color: var(--mw-navy-600); flex: 0 0 auto; }
    .mw-acctrow .mw-sub2 { font-size: 10.5px; color: var(--mw-muted); display: block; font-weight: 400; }
    .mw-acctrow span.mw-rt { margin-left: auto; color: var(--mw-muted); font-size: 13px; }
    .mw-acctid { display: flex; align-items: center; gap: 13px; padding: 14px 22px; border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-acctid .mw-id b { display: block; font-size: 15.5px; color: var(--mw-ink); font-weight: 700; }
    .mw-acctid .mw-id span { font-size: 12px; color: var(--mw-muted); }

    /* ---- Long form legal and generic content adaptation ---- */
    .mw-legalbody { padding: 0 20px 8px; }
    .mw-legalbody h2 { font-size: 19px; margin: 24px 0 8px; }
    .mw-legalbody h3 { font-size: 16px; margin: 18px 0 6px; }
    .mw-legalbody p, .mw-legalbody li { font-size: 13.5px; color: var(--mw-body); line-height: 1.65; }
    .mw-legalbody ul, .mw-legalbody ol { padding-left: 20px; margin: 8px 0 12px; }
    .mw-toc { margin: 14px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 13px; background: #fff; padding: 6px 0; }
    .mw-toc a { display: flex; gap: 12px; align-items: baseline; padding: 9px 16px; font-size: 13px; color: var(--mw-ink); border-bottom: 1px solid var(--mw-hairline-soft); }
    .mw-toc a:last-child { border-bottom: none; }
    .mw-toc a b { font-family: var(--mw-display); color: var(--mw-gold-700); font-weight: 600; min-width: 20px; }
}

/* The production countdown component (pg-cd) restyled to the mobile
   card inside mobile-only wrappers, matching the mockup countdown. */
@media (max-width: 767.98px) {
    .mw-only .pg-cd {
        margin: 18px 20px 0; border: 1px solid var(--mw-hairline); border-radius: 14px;
        background: #fff; padding: 13px 16px 12px;
    }
    .mw-only .pg-cd-lbl, .mw-only .pg-cd .pg-cd-quiet:first-child {
        font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
        color: var(--mw-gold-700); font-weight: 700;
    }
    .mw-only .pg-cd-grid { display: flex; align-items: baseline; margin-top: 6px; }
    .mw-only .pg-cd-cell { flex: 1; text-align: center; }
    .mw-only .pg-cd-num {
        display: block; font-family: var(--mw-display); font-size: 23px; font-weight: 600;
        color: var(--mw-ink); font-variant-numeric: tabular-nums;
    }
    .mw-only .pg-cd-cell .pg-cd-lbl, .mw-only .pg-cd-cell span:last-child {
        font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
        color: var(--mw-muted); font-weight: 600;
    }
    .mw-only .pg-cd-dot { color: var(--mw-navy-200); font-family: var(--mw-display); font-size: 19px; }
    .mw-only .pg-cd-line, .mw-only .pg-cd-quiet {
        text-align: center; font-size: 10.5px; color: var(--mw-muted);
        margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--mw-hairline-soft);
    }
}

/* Auth pages: the desktop split shell restyled to the mockup's single
   centred card. One DOM, no duplicate forms, Turnstile untouched. */
@media (max-width: 767.98px) {
    body.mw-nochrome .mw-mfoot { display: none !important; }

    .pg-auth { display: block !important; padding: 34px 24px 40px !important; min-height: 0 !important; background: var(--mw-ivory) !important; }
    .pg-auth-panel { display: none !important; }
    .pg-auth-main { padding: 0 !important; display: block !important; max-width: none !important; }
    .pg-auth-card {
        box-sizing: border-box !important;
        max-width: none !important; width: 100% !important; margin: 0 !important;
        border: 1px solid var(--mw-hairline) !important; border-radius: 16px !important;
        background: #fff !important; padding: 24px 20px !important;
        box-shadow: 0 18px 44px -26px rgba(23, 42, 68, .35) !important;
    }
    .pg-auth-title {
        font-family: var(--mw-display) !important; font-size: 25px !important;
        text-align: center !important; color: var(--mw-ink) !important; font-weight: 500 !important;
        letter-spacing: -0.012em;
    }
    .pg-auth-sub { text-align: center !important; font-size: 12.5px !important; color: var(--mw-muted) !important; margin: 6px 0 20px !important; }
    .pg-af { margin-bottom: 15px; }
    .pg-af-label {
        display: block !important; font-size: 10px !important; letter-spacing: .14em !important;
        text-transform: uppercase !important; font-weight: 700 !important;
        color: var(--mw-muted) !important; margin: 0 0 7px !important;
    }
    .pg-af-input, .pg-af select, .pg-af textarea, .pg-auth-card select {
        box-sizing: border-box !important;
        width: 100% !important; font-family: var(--mw-sans) !important; font-size: 15px !important;
        color: var(--mw-ink) !important; background: #fff !important;
        border: 1px solid var(--mw-hairline) !important; border-radius: 10px !important;
        padding: 12px 14px !important; box-shadow: none !important;
    }
    .pg-af-input:focus { border-color: var(--mw-gold-500) !important; box-shadow: 0 0 0 3px rgba(251, 191, 36, .18) !important; outline: none !important; }
    .pg-af-err { font-size: 12px; color: #b3413a; margin-top: 6px; }
    .pg-auth-actions { margin-top: 18px; }
    .pg-auth-actions .pg-btn, .pg-auth-card button[type="submit"] {
        display: flex !important; width: 100% !important; align-items: center; justify-content: center;
        background: var(--mw-navy-900) !important; color: #fff !important;
        border-radius: 10px !important; padding: 13px 22px !important;
        font-weight: 600 !important; font-size: 14.5px !important; border: none !important;
    }
    .pg-af-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; font-size: 12.5px; }
    .pg-af-link, .pg-auth-switch a {
        color: var(--mw-ink) !important; font-weight: 600 !important;
        text-decoration: underline !important; text-decoration-color: var(--mw-gold-500) !important;
        text-underline-offset: 3px !important;
    }
    .pg-auth-switch { text-align: center; font-size: 12.5px; color: var(--mw-muted); margin-top: 18px; }
    .pg-auth-band { border-radius: 10px; padding: 10px 13px; font-size: 12.5px; margin-bottom: 13px; display: flex; gap: 8px; }
    .pg-auth-band-warn { background: var(--mw-gold-100); border: 1px solid var(--mw-gold-200); color: var(--mw-gold-800); }
    .pg-auth-band-ok { background: #effaf3; border: 1px solid #c9ecd8; color: #0f7a4d; }
}

/* Register: the two step flow's intent cards, selection chips and
   step chrome, in the mockup's language. The mockup places the step
   heading as a mast on the ivory ground with the intent cards and
   fields flowing straight beneath it, so the register page sheds the
   boxed card the sign in page keeps. */
@media (max-width: 767.98px) {
    .pg-auth-wide .pg-auth-card {
        border: 0 !important; background: transparent !important;
        box-shadow: none !important; padding: 0 !important;
    }
    .pg-auth-wide .pg-auth-title { font-size: 27px !important; padding: 0 4px; }
    .pg-auth-wide .pg-auth-sub { max-width: 300px; margin-left: auto !important; margin-right: auto !important; }
    .pg-intent-grid { display: block !important; }
    .pg-intent-card {
        display: block !important; width: 100%; text-align: left !important;
        border: 1px solid var(--mw-hairline) !important; border-radius: 13px !important;
        background: #fff !important; padding: 14px 15px !important; margin-bottom: 10px !important;
        position: relative !important; cursor: pointer;
    }
    .pg-intent-card.sel { border-color: var(--mw-gold-500) !important; background: var(--mw-gold-100) !important; }
    .pg-intent-card b, .pg-intent-title {
        display: block; font-family: var(--mw-display) !important; font-weight: 500 !important;
        font-size: 16.5px !important; color: var(--mw-ink) !important;
    }
    .pg-intent-card span:not(.pg-intent-tick), .pg-intent-sub { font-size: 11.5px !important; color: var(--mw-muted) !important; }
    .pg-intent-tick {
        position: absolute !important; top: 12px !important; right: 12px !important;
        width: 18px !important; height: 18px !important; border-radius: 50% !important;
        border: 1.5px solid var(--mw-navy-200) !important; background: transparent !important;
    }
    .pg-intent-card.sel .pg-intent-tick { border-color: var(--mw-gold-600) !important; background: var(--mw-gold-600) !important; }
    .pg-intent-card.sel .pg-intent-tick::after {
        content: ""; position: absolute; inset: 4px 4px 6px 4px;
        border-left: 2px solid #fff; border-bottom: 2px solid #fff;
        transform: rotate(-45deg) translate(1px, -1px);
    }
    .pg-reg-selcount { text-align: center; font-size: 12.5px; color: var(--mw-muted); margin: 6px 0 12px; }
    .pg-reg-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
    .pg-reg-chip {
        font-size: 10.5px !important; font-weight: 700 !important; color: var(--mw-gold-800) !important;
        background: var(--mw-gold-100) !important; border: 1px solid var(--mw-gold-400) !important;
        border-radius: 999px !important; padding: 4px 10px !important;
    }
    .pg-reg-back { font-size: 12.5px; color: var(--mw-muted); background: none; border: none; margin-bottom: 10px; }
    .pg-af-hint { font-size: 11.5px; color: var(--mw-muted); margin-top: 6px; }
    .pg-af-pass { position: relative; }
    .pg-af-pass .pg-af-input { padding-right: 46px !important; }
    .pg-af-reveal {
        position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
        width: 36px; height: 36px; background: none; border: none; color: var(--mw-muted);
        display: flex; align-items: center; justify-content: center;
    }
    .pg-af-reveal svg { width: 19px; height: 19px; }
    .pg-af-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mw-body); }
    .pg-ref-q { font-size: 12.5px; }
}

/* Checkout: the desktop two column flow restyled to the mockup's
   single column story. One DOM; the sticky gold pay action, the
   summary card, the panels and the gateway choices all take the
   phone language. */
@media (max-width: 767.98px) {
    /* The heading's breathing room is padding on this shell, not a margin
       on the heading. A top margin on the first child had nothing to sit
       against and collapsed straight out of the shell, dragging the ivory
       down with it and leaving a band of bare page showing between the bar
       and the panel. Padding cannot collapse, so the ivory stays flush to
       the bar and the space appears inside it, where it was wanted. */
    .pg-checkout { padding: 26px 0 30px !important; background: var(--mw-ivory) !important; }
    .pg-checkout .pg-wrap, .pg-checkout .pg-co-layout { display: block !important; padding: 0 !important; max-width: none !important; }
    .pg-co-back { display: inline-block; margin: 12px 20px 0; font-size: 12.5px; font-weight: 600; color: var(--mw-ink); text-decoration: underline; text-decoration-color: var(--mw-gold-500); text-underline-offset: 3px; }
    .pg-co-main { padding: 0 20px !important; }
    .pg-co-sub { font-size: 12.5px; color: var(--mw-body); padding: 10px 0 0; }
    .pg-co-sub b, .pg-co-sub strong { color: var(--mw-gold-700); font-weight: 700; }
    .pg-checkout h1, .pg-checkout .pg-co-title { font-family: var(--mw-display) !important; font-size: 24px !important; color: var(--mw-ink) !important; font-weight: 500 !important; }
    .pg-checkout h2 { font-family: var(--mw-display) !important; font-size: 20px !important; color: var(--mw-ink) !important; font-weight: 500 !important; margin: 5px 0 14px !important; }
    .pg-checkout .pg-panel {
        border: 1px solid var(--mw-hairline) !important; border-radius: 14px !important;
        background: #fff !important; padding: 14px 15px !important; margin: 14px 0 0 !important;
        box-shadow: none !important;
    }
    .pg-checkout .pg-panel-h { font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 700 !important; color: var(--mw-muted) !important; margin-bottom: 10px !important; }
    .pg-checkout .pg-lg { font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 700 !important; color: var(--mw-navy-500) !important; }
    .pg-checkout .pg-fld { margin-bottom: 15px !important; }
    .pg-checkout .pg-fld label { display: block; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 700 !important; color: var(--mw-muted) !important; margin: 0 0 7px !important; }
    .pg-checkout .pg-fld input, .pg-checkout .pg-fld select, .pg-checkout .pg-fld textarea, .pg-checkout input[type="text"], .pg-checkout input[type="email"], .pg-checkout input[type="tel"], .pg-checkout select, .pg-checkout textarea {
        box-sizing: border-box !important; width: 100% !important;
        font-family: var(--mw-sans) !important; font-size: 15px !important; color: var(--mw-ink) !important;
        background: #fff !important; border: 1px solid var(--mw-hairline) !important;
        border-radius: 10px !important; padding: 12px 14px !important; box-shadow: none !important;
    }
    .pg-checkout input[type="checkbox"], .pg-checkout input[type="radio"] { width: auto !important; padding: 0 !important; }
    .pg-checkout .pg-fld-err { font-size: 12px; color: #b3413a; margin-top: 6px; padding: 0; text-align: left; }
    .pg-checkout .pg-help { font-size: 11.5px !important; color: var(--mw-muted) !important; }
    .pg-checkout .pg-os {
        border: 1px solid var(--mw-hairline) !important; border-radius: 14px !important;
        background: #fff !important; padding: 13px 14px !important; margin: 14px 0 0 !important;
        position: static !important; box-shadow: none !important; max-width: none !important;
    }
    .pg-checkout .pg-os-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px !important; padding: 5px 0 !important; color: var(--mw-body); }
    .pg-checkout .pg-os-line b { color: var(--mw-ink); font-weight: 600; }
    .pg-checkout .pg-fee { font-size: 13px !important; color: var(--mw-body) !important; }
    .pg-checkout .pg-os-total, .pg-checkout .pg-os-grand { border-top: 1px solid var(--mw-hairline); margin-top: 6px; padding-top: 9px; font-size: 15px !important; color: var(--mw-ink); font-weight: 700; }
    .pg-checkout .pg-hold-band, .pg-checkout .pg-smap-hold {
        text-align: center; font-size: 11.5px !important; color: var(--mw-gold-800) !important;
        background: var(--mw-gold-100) !important; border: 1px solid var(--mw-gold-200) !important;
        border-radius: 8px !important; padding: 7px !important;
    }
    .pg-checkout .pg-gw-n { font-size: 14px !important; color: var(--mw-ink) !important; font-weight: 600 !important; }
    .pg-checkout .pg-gw-d { font-size: 11px !important; color: var(--mw-muted) !important; }
    .pg-checkout .pg-co-payaction { margin: 20px 0 0 !important; }
    .pg-checkout .pg-co-payaction .pg-btn, .pg-checkout button[type="submit"].pg-btn {
        display: flex !important; width: 100% !important; align-items: center; justify-content: center;
        border-radius: 999px !important; padding: 15px 20px !important;
        font-size: 14.5px !important; font-weight: 600 !important; border: none !important;
        background: linear-gradient(180deg, var(--mw-gold-400), var(--mw-gold-500)) !important;
        color: #231a05 !important;
        box-shadow: 0 8px 22px rgba(217, 119, 6, .32), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(180, 83, 9, .28) !important;
    }
    .pg-checkout .pg-terms-note { text-align: center; font-size: 10px !important; color: var(--mw-muted) !important; margin-top: 8px; }
    /* Ticket choices read as hairline separated rows on the phone, as
       in the mockup: no box border, no radius, no stacking gap, just a
       bottom rule. The desktop card border otherwise survives with the
       row's zero side padding and the content bleeds into it. */
    .pg-checkout .pg-co-tk {
        padding: 15px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--mw-hairline-soft) !important;
        border-radius: 0 !important;
    }
    .pg-checkout .pg-co-tk + .pg-co-tk { margin-top: 0 !important; }
    .pg-checkout .pg-co-tk.pg-soldout { background: transparent !important; }
    .pg-checkout .pg-quiet-act { font-size: 11.5px; font-weight: 600; color: var(--mw-gold-800); text-decoration: underline; text-underline-offset: 3px; }
}

/* ------------------------------------------------------------
   Content pages: one adaptation layer for the shared editorial
   vocabulary the company, blog, guides, authors, careers, legal
   and support pages are built from. It brings every pg- surface
   to the phone language of the mockup: 20px gutters, Fraunces
   masts, ledger rows, stacked cards, quiet rules.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .pg-hero { padding: 26px 0 10px !important; }
    .pg-hero-grid { display: block !important; }
    .pg-hero-art, .pg-hero-frame, .pg-hero-stub { display: none !important; }
    .pg-section { padding: 30px 0 8px !important; }
    .pg-wrap, .pg-wrap-narrow { max-width: none !important; padding: 0 20px !important; }
    main h1:not(.mw-h-display):not(.pg-auth-title) {
        font-family: var(--mw-display) !important; font-size: 31px !important;
        line-height: 1.14 !important; color: var(--mw-ink) !important;
        letter-spacing: -0.012em !important; font-weight: 500 !important;
    }
    main h1:not(.mw-h-display):not(.pg-auth-title) em { font-style: italic; color: var(--mw-gold-700); }
    .pg-section h2, .pg-section-head h2 {
        font-family: var(--mw-display) !important; font-size: 23px !important;
        line-height: 1.2 !important; color: var(--mw-ink) !important; font-weight: 500 !important;
    }
    .pg-eyebrow {
        font-size: 10px !important; letter-spacing: .18em !important; text-transform: uppercase !important;
        font-weight: 700 !important; color: var(--mw-gold-700) !important;
    }
    .pg-hero .pg-sub, .pg-lede { font-size: 14.5px !important; line-height: 1.6 !important; color: var(--mw-body) !important; max-width: none !important; }
    .pg-section-head { display: block !important; margin-bottom: 14px !important; }
    .pg-lead-rule { display: none !important; }
    .pg-textlink {
        font-size: 13px; font-weight: 600; color: var(--mw-ink) !important;
        text-decoration: underline !important; text-decoration-color: var(--mw-gold-500) !important;
        text-underline-offset: 3px !important;
    }
    .pg-btn { border-radius: 10px !important; padding: 13px 22px !important; font-size: 14.5px !important; }
    .pg-hero .pg-btn, .pg-cta .pg-btn { display: flex !important; width: 100% !important; justify-content: center; box-sizing: border-box; }

    /* Numbered walkthrough steps */
    .pg-step { display: flex !important; gap: 15px !important; padding: 18px 0 0 !important; }
    .pg-step .pg-no, .pg-no {
        font-family: var(--mw-display) !important; font-size: 15px !important;
        font-weight: 600 !important; color: var(--mw-gold-700) !important;
    }
    .pg-step h3, .pg-step h4 { font-family: var(--mw-display) !important; font-size: 17px !important; color: var(--mw-ink) !important; font-weight: 500 !important; margin-bottom: 5px !important; }
    .pg-step p { font-size: 13.5px !important; color: var(--mw-body) !important; }

    /* Platform fact ledger (about, how it works) */
    .pg-plat-item {
        display: flex !important; gap: 14px !important; padding: 13px 0 !important;
        border-bottom: 1px solid var(--mw-hairline-soft) !important; align-items: flex-start !important;
    }
    .pg-picon { width: 21px !important; height: 21px !important; flex: 0 0 21px !important; color: var(--mw-navy-700) !important; }
    .pg-picon svg { width: 21px; height: 21px; }
    .pg-k { font-family: var(--mw-display) !important; font-weight: 500 !important; font-size: 14.5px !important; color: var(--mw-ink) !important; }
    .pg-v { font-size: 12px !important; color: var(--mw-body) !important; }

    /* Blog cards. The mockup presents a list post as a thumbnail beside
       a text column, hairline separated with no box. The copy sits in
       .pg-post-body so a single flex rule does the whole job; the
       desktop stack is untouched because it lays the same structure out
       as a block. */
    .pg-post {
        display: flex !important; gap: 13px !important;
        padding: 16px 0 !important; align-items: flex-start !important;
        border-bottom: 1px solid var(--mw-hairline-soft) !important;
        border-radius: 0 !important; background: none !important; box-shadow: none !important;
    }
    .pg-post > img {
        width: 96px !important; height: 74px !important; object-fit: cover;
        border-radius: 9px !important; flex: 0 0 96px !important; margin: 0 !important;
        aspect-ratio: auto !important;
    }
    .pg-post .pg-post-body { min-width: 0; flex: 1; }
    .pg-post .pg-k { font-size: 9.5px !important; letter-spacing: .13em !important; }
    .pg-post h3, .pg-post h2 {
        font-family: var(--mw-display) !important; font-size: 15.5px !important;
        line-height: 1.28 !important; color: var(--mw-ink) !important;
        font-weight: 500 !important; margin: 4px 0 !important;
    }
    /* The excerpt is the first thing to go at this width: the thumbnail
       column leaves too little room for it to read as anything but
       clutter, and the mockup drops it for the same reason. */
    .pg-post .pg-post-body p { display: none !important; }
    .pg-post .pg-by { font-size: 11px !important; color: var(--mw-muted) !important; margin-top: 3px !important; }
    .pg-post .pg-by b, .pg-post .pg-by .pg-by-author { color: var(--mw-ink) !important; font-weight: 600 !important; }
    .pg-post-grid { display: block !important; padding-bottom: 24px !important; }

    /* The lead article keeps its full bleed image and full copy: it is
       the one card with the room to carry them. */
    .pg-blog-feature {
        display: block !important; margin: 16px 20px 0 !important;
        border: 1px solid var(--mw-hairline) !important; border-radius: 14px !important;
        background: #fff !important; overflow: hidden !important; padding: 0 !important;
    }
    .pg-blog-feature img { width: 100% !important; height: 170px !important; object-fit: cover !important; border-radius: 0 !important; }
    .pg-blog-feature .pg-bf-txt { padding: 15px 17px 16px !important; }
    .pg-blog-feature h2 { font-family: var(--mw-display) !important; font-size: 20px !important; line-height: 1.22 !important; margin: 6px 0 8px !important; }
    .pg-blog-feature p { font-size: 13px !important; color: var(--mw-body) !important; }
    .pg-monogram {
        background: var(--mw-navy-900) !important; color: #fff !important;
        border-radius: 50% !important; font-weight: 700 !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
    }

    /* Two up segments collapse */
    .pg-segment, .pg-seg-grid, .pg-two { display: block !important; }

    /* ---- Authors ----------------------------------------------------
       Author profile: the mockup centres the identity block, sets the
       facts as label and value rows, and turns each post into a stacked
       date, title and tag. Authors index: the desktop row collapses to
       an avatar beside a name, with the topic chips beneath. */
    .pg-aup-head {
        display: block !important;
        text-align: center !important;
        padding: 26px 24px 0 !important;
    }
    .pg-aup-head .pg-monogram-lg {
        width: 74px !important; height: 74px !important;
        font-size: 21px !important;
        margin: 0 auto 12px !important; display: flex !important;
    }
    .pg-aup-head .pg-aup-id h1 { font-size: 26px !important; }
    .pg-aup-head .pg-aup-role { font-size: 12.5px !important; margin-top: 3px !important; }
    .pg-aup-head .pg-aup-bio {
        font-size: 13.5px !important; color: var(--mw-body) !important;
        text-align: left !important; margin-top: 14px !important; max-width: none !important;
    }

    .pg-aup-meta {
        display: block !important;
        margin: 18px 20px 0 !important; padding: 0 !important;
        border-top: 1px solid var(--mw-hairline-soft) !important;
        border-bottom: 0 !important;
    }
    .pg-aup-meta .pg-m {
        display: flex !important; gap: 14px !important; padding: 13px 0 !important;
        border-bottom: 1px solid var(--mw-hairline-soft) !important;
    }
    .pg-aup-meta .pg-k {
        flex: 0 0 86px; font-size: 9.5px !important; letter-spacing: .13em !important;
        padding-top: 3px; color: var(--mw-muted) !important;
    }
    .pg-aup-meta .pg-v {
        font-family: var(--mw-display); font-size: 14px !important;
        color: var(--mw-ink) !important; font-weight: 500 !important; margin-top: 0 !important;
    }

    .pg-aup-posts { padding: 8px 0 24px !important; }
    .pg-aup-post {
        display: block !important;
        padding: 14px 20px !important;
        border-bottom: 1px solid var(--mw-hairline-soft) !important;
    }
    .pg-aup-post .pg-d {
        display: block !important; width: auto !important; flex: none !important;
        font-size: 10px !important; letter-spacing: .13em; text-transform: uppercase;
        font-weight: 700; color: var(--mw-gold-700) !important;
    }
    .pg-aup-post > span:not(.pg-d):not(.pg-c) { display: block !important; }
    .pg-aup-post h3 {
        font-family: var(--mw-display) !important; font-size: 15.5px !important;
        line-height: 1.3 !important; margin: 4px 0 0 !important;
    }
    /* The excerpt gives way to the tag, as the mockup does: at this
       width the title and its subject carry the row on their own. */
    .pg-aup-post .pg-excerpt { display: none !important; }
    .pg-aup-post .pg-c {
        display: block !important; margin-top: 3px !important;
        font-size: 10.5px !important; color: var(--mw-muted) !important;
        text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important;
    }

    .pg-au-row {
        display: flex !important; align-items: flex-start !important;
        gap: 13px !important; flex-wrap: wrap !important;
        padding: 16px 0 !important;
    }
    .pg-au-row .pg-monogram { width: 46px !important; height: 46px !important; font-size: 15px !important; flex: 0 0 46px !important; }
    .pg-au-row .pg-au-who { flex: 1 1 auto !important; min-width: 0 !important; }
    .pg-au-row .pg-au-who h2 { font-family: var(--mw-display) !important; font-size: 16px !important; }
    .pg-au-row .pg-au-role { font-size: 12px !important; color: var(--mw-muted) !important; }
    .pg-au-row .pg-au-cnt {
        width: auto !important; text-align: left !important;
        font-size: 11px !important; color: var(--mw-muted) !important;
        flex: 0 0 auto !important; align-self: center !important;
    }
    .pg-au-row .pg-au-topics {
        flex: 1 0 100% !important; max-width: none !important;
        justify-content: flex-start !important; margin-top: 2px !important;
    }
    .pg-topic-chip { font-size: 10.5px !important; padding: 4px 10px !important; }

    /* Support and general forms */
    .pg-fld { margin-bottom: 15px !important; }
    .pg-fld label { display: block; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 700 !important; color: var(--mw-muted) !important; margin: 0 0 7px !important; }
    .pg-fld input, .pg-fld select, .pg-fld textarea {
        box-sizing: border-box !important; width: 100% !important;
        font-family: var(--mw-sans) !important; font-size: 15px !important; color: var(--mw-ink) !important;
        background: #fff !important; border: 1px solid var(--mw-hairline) !important;
        border-radius: 10px !important; padding: 12px 14px !important; box-shadow: none !important;
    }
    .pg-flow-status, .pg-fs-mark { font-size: 12.5px !important; }
    .pg-panel { border: 1px solid var(--mw-hairline) !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; }
    .pg-on-white { background: #fff !important; }

    /* Legal articles */
    .pg-legal h2, .pg-prose h2 { font-family: var(--mw-display) !important; font-size: 19px !important; color: var(--mw-ink) !important; margin: 24px 0 8px !important; font-weight: 500 !important; }
    .pg-legal h3, .pg-prose h3 { font-family: var(--mw-display) !important; font-size: 16px !important; color: var(--mw-ink) !important; margin: 18px 0 6px !important; font-weight: 500 !important; }
    .pg-legal p, .pg-legal li, .pg-prose p, .pg-prose li { font-size: 13.5px !important; line-height: 1.65 !important; color: var(--mw-body) !important; }
}

/* Error pages: the centred playbill treatment. */
@media (max-width: 767.98px) {
    .pg-err { text-align: center !important; padding: 52px 26px 10px !important; max-width: none !important; }
    .pg-err-code {
        font-family: var(--mw-display) !important; letter-spacing: .5em !important;
        color: var(--mw-gold-600) !important; font-size: 14px !important; margin: 10px 0 6px !important;
    }
    .pg-err h1 { font-size: 31px !important; }
    .pg-err p { font-size: 13.5px !important; color: var(--mw-body) !important; margin: 12px auto 18px !important; max-width: 300px !important; }
    .pg-err-actions { display: flex; flex-direction: column; gap: 9px; }
    .pg-err-actions .pg-btn { display: flex !important; width: 100% !important; justify-content: center; box-sizing: border-box; }
}

/* Order confirmation: the seal, the one line that matters, and the
   passes as a swipeable rail of ticket cards. */
@media (max-width: 767.98px) {
    .pg-confirm-hero { padding: 26px 24px 6px !important; text-align: center !important; }
    .pg-confirm-hero .pg-seal, .pg-seal {
        width: 52px !important; height: 52px !important; border-radius: 50% !important;
        border: 1.5px solid var(--mw-gold-500) !important; color: var(--mw-gold-600) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        margin: 4px auto 14px !important; background: none !important; box-shadow: none !important;
    }
    .pg-seal svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }
    .pg-confirm-hero h1 { font-size: 30px !important; margin: 0 0 8px !important; }
    .pg-confirm-hero p { font-size: 13.5px !important; color: var(--mw-body) !important; }
    .pg-confirm-hero p b { color: var(--mw-ink); }
    .pg-confirm-wrap { padding: 0 !important; max-width: none !important; }
    /* The passes swipe; nothing else does. This rule used to sit on the
       whole ticket body, which swept the closing actions and the note
       into the same horizontal rail and pushed them off the right edge
       where no one could reach them. */
    .pg-confirm .pg-passrail {
        display: flex !important; gap: 14px !important; overflow-x: auto !important;
        padding: 14px 20px 6px !important;
        scroll-snap-type: x mandatory; scrollbar-width: none;
        align-items: stretch;
    }
    .pg-confirm .pg-passrail::-webkit-scrollbar { display: none; }
    .pg-confirm [data-poll-ticket-body] { display: block !important; }
    .pg-confirm .pg-pass {
        flex: 0 0 86% !important; scroll-snap-align: center !important;
        border: 1px solid var(--mw-hairline) !important; border-radius: 16px !important;
        background: #fff !important; overflow: hidden !important; margin: 0 !important;
        box-shadow: 0 14px 34px -18px rgba(23, 42, 68, .35) !important;
        max-width: none !important;
    }
    /* The gutter to the right of a pass is an invitation to swipe. With a
       single ticket there is nothing to swipe to, so it fills the rail. */
    .pg-confirm .pg-passrail .pg-pass:only-child { flex: 0 0 100% !important; }
    .pg-confirm .pg-pass-top { background: var(--mw-navy-900) !important; color: #fff !important; padding: 11px 16px !important; }
    .pg-confirm .pg-pass-top * { color: inherit; }
    .pg-confirm .pg-pass-mid { padding: 15px 16px 13px !important; }
    .pg-confirm .pg-pass h3, .pg-confirm .pg-cp-title { font-family: var(--mw-display) !important; font-size: 18px !important; color: var(--mw-ink) !important; font-weight: 500 !important; }
    .pg-confirm .pg-qr { flex: 0 0 96px !important; }
    .pg-confirm .pg-qr img, .pg-confirm .pg-qr svg { width: 96px !important; height: 96px !important; }
    .pg-confirm .pg-pass-bottom { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 16px 13px !important; border-top: 2px dashed var(--mw-hairline) !important; }
    .pg-confirm .pg-seatline { font-size: 12px !important; color: var(--mw-body) !important; }
    .pg-confirm .pg-code { font-size: 11px !important; letter-spacing: .08em !important; color: var(--mw-muted) !important; font-family: ui-monospace, Menlo, monospace !important; }
    .pg-confirm-actions { display: flex !important; flex-direction: column !important; gap: 9px !important; padding: 16px 20px 0 !important; }
    .pg-confirm-actions .pg-btn { display: flex !important; width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
    .pg-confirm-next { padding: 0 20px !important; }
    .pg-confirm-panel { border: 1px solid var(--mw-hairline) !important; border-radius: 14px !important; background: #fff !important; margin: 14px 20px 0 !important; padding: 13px 14px !important; max-width: none !important; box-shadow: none !important; }
}

/* FAQs and the fee carousel, in the phone language. */
@media (max-width: 767.98px) {
    main details {
        padding: 14px 0; border-bottom: 1px solid var(--mw-hairline-soft);
        border-radius: 0 !important; background: none !important; box-shadow: none !important;
    }
    main details summary { list-style: none; cursor: pointer; }
    main details summary::-webkit-details-marker { display: none; }
    main details summary h3, main details summary h4, main details summary {
        font-family: var(--mw-display) !important; font-size: 16px !important;
        line-height: 1.3 !important; color: var(--mw-ink) !important; font-weight: 500 !important;
    }
    main details p, main details div { font-size: 13px; color: var(--mw-body); }
    main details[open] summary { margin-bottom: 8px; }

    .pg-fee-rail {
        grid-auto-columns: 218px !important; gap: 12px !important;
        padding: 6px 20px 8px !important; margin: 0 -20px !important;
    }
    .pg-fee-card {
        border: 1px solid var(--mw-hairline) !important; border-radius: 13px !important;
        background: #fff !important; padding: 15px 16px 13px !important; box-shadow: none !important;
    }
    .pg-fee-card.you { border-color: var(--mw-gold-500) !important; background: var(--mw-gold-100) !important; }
    .pg-fee-nav { display: none !important; }
}