/* burnaltar.css — 🗿🔥 The Burn Altar.
 *
 * Modeled on emberfield.css: same dark-panel, gold-glow, Comic-Sans identity,
 * and self-sufficient on purpose — nav.css is the only other stylesheet this
 * page links, so the footer/trust-strip rules are copied here rather than
 * shared.
 *
 * nav.css CONSUMES --navbar-bg, --glow, --c-gold and --c-orange from the
 * page's own stylesheet (it carries a fallback since 1203b4f, but the brand
 * colours belong to the page). Declared first, below, as on every sibling.
 *
 * THE ALTAR'S MOTION CONTRACT. The one place this page spends its boldness is
 * THE FIRE — a three-layer CSS flame that breathes while idle, rages while the
 * oracle reads the smoke (data-mood="pending"), and either births the prizes
 * (reveal) or just... settles back down (nothing). The fire NEVER celebrates
 * before the chain's Settled state has landed — burnaltar.js flips the mood
 * only from on-chain truth. Under prefers-reduced-motion the flames hold
 * still and outcomes simply appear.
 */

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

:root {
    --nav-h: 80px;
    --touch: 44px;

    /* The four tokens nav.css needs. Do not remove. */
    --navbar-bg: rgba(0, 0, 0, 0.95);
    --glow: 0 0 10px rgba(255, 69, 0, 0.7);
    --c-gold: #ffcf48;
    --c-orange: orange;

    --c-red: #ff4500;
    --c-green: #2ecc71;
    --c-stone: #4a4038;        /* the altar stone */
    --c-stone-deep: #241f1a;
    --c-ember: #ff7a18;

    /* TEXT CONTRAST — the same two solid warm neutrals as the casino siblings. */
    --c-soft: #f2ece0;
    --c-dim: #ded6c6;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body, "Comic Sans MS", system-ui, sans-serif);
    /* Same art treatment as wheel/plinko/dice/crash/hilo/mines — the house sky. */
    background: url('images/BlazeitBG.png') no-repeat center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-color: #b0e8f7;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    padding-top: calc(var(--nav-h) + 24px);
}

@media screen and (max-width: 768px) {
    body { padding-top: calc(var(--nav-h) + 16px); }
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: #000; color: var(--c-gold); padding: 10px 16px; z-index: 3000;
}
.skip-link:focus { left: 8px; top: calc(var(--nav-h) + 8px); }

main.container {
    flex: 1 1 auto;
    width: min(1500px, 96vw);
    margin: 0 auto 24px;
    padding: 18px;
    background: rgba(0, 0, 20, 0.75);
    border-radius: 18px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.6fr) minmax(260px, 1fr);
    gap: 18px;
    align-items: start;
}

.info-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.info-panel h3, .info-panel h2 { text-align: center; }
.game-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }

@media screen and (max-width: 1100px) {
    main.container { grid-template-columns: 1fr; }
    /* Spine first on a phone: the fire and the buttons above the fold. */
    .game-panel { order: -1; }
}

.stats {
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 207, 72, 0.35);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--glow);
    width: 100%;
    color: var(--c-soft);
}
.stats h3, .stats h2 { margin: 0 0 10px; color: var(--c-gold); font-size: 1.05rem; }
.stats p { margin: 6px 0; font-size: 0.95rem; line-height: 1.45; }

/* Stat rows — byte-identical treatment to the casino siblings (the rail
   pattern the CONSISTENCY gate pins): label recedes, the span[id] value goes
   big, bold, gold and tabular. `:has(span[id])` spares the prose paragraphs. */
.stats p:has(span[id]) {
    display: block;
    margin: 0;
    padding: 6px 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-dim, #ded6c6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stats p:has(span[id]):last-child { border-bottom: none; }

/* [hidden] MUST beat the display:block above (specificity 0,3,2 vs 0,2,2) —
   the replay-button lesson, enforced by source-gates for this exact shape. */
.stats p:has(span[id])[hidden] { display: none; }

.stats p:has(span[id]) span[id] {
    display: inline-block;
    margin-left: 2px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-gold, #ffcf48);
    font-variant-numeric: tabular-nums;
}

.ba-mode-note {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--c-orange);
    border-radius: 6px;
    background: rgba(255, 140, 0, 0.09);
}

.title {
    margin: 0;
    color: var(--c-gold);
    text-shadow: 0 0 12px rgba(255, 69, 0, 0.8);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    text-align: center;
}
.tagline { margin: 0; color: var(--c-dim); text-align: center; }

.ba-banner {
    width: 100%;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: bold;
    text-align: center;
}
.ba-banner-warn { background: rgba(255, 69, 0, 0.18); border: 1px solid var(--c-red); color: #ffd9c9; }
.ba-banner-info { background: rgba(58, 167, 232, 0.14); border: 1px solid #3aa7e8; color: #cfe9fb; }

/* ============================ THE FIRE ============================ */
/* A stone plinth under a living flame. Three teardrop layers, offset flicker
   phases; the mood attribute scales the whole pyre. */
.ba-hero {
    width: 100%;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(255, 122, 24, 0.18), transparent 62%),
        linear-gradient(170deg, var(--c-stone) 0%, var(--c-stone-deep) 90%);
    border: 4px solid #6b5a3a;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(255, 207, 72, 0.35);
    padding: 22px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.ba-fire {
    position: relative;
    width: 180px;
    height: 210px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: transform 0.6s ease;
}

.ba-flame {
    position: absolute;
    bottom: 44px;
    left: 50%;
    border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    animation: ba-flicker 1.7s ease-in-out infinite;
}
.ba-flame-outer {
    width: 96px; height: 128px;
    background: radial-gradient(ellipse at 50% 78%, #ff4500 0%, #d63000 68%, rgba(214, 48, 0, 0) 100%);
    filter: blur(1px);
    opacity: 0.95;
}
.ba-flame-mid {
    width: 64px; height: 92px;
    background: radial-gradient(ellipse at 50% 80%, #ff7a18 0%, #ff5e00 70%, rgba(255, 94, 0, 0) 100%);
    animation-duration: 1.3s;
    animation-delay: 0.25s;
}
.ba-flame-core {
    width: 34px; height: 56px;
    background: radial-gradient(ellipse at 50% 85%, #ffcf48 0%, #ffb020 75%, rgba(255, 176, 32, 0) 100%);
    animation-duration: 1.05s;
    animation-delay: 0.5s;
}
.ba-altar-stone {
    position: relative;
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(0 0 14px rgba(255, 122, 24, 0.55));
}

@keyframes ba-flicker {
    0%, 100% { transform: translateX(-50%) scale(1) rotate(-1.5deg); }
    30%      { transform: translateX(-52%) scale(1.06, 0.97) rotate(1.2deg); }
    60%      { transform: translateX(-48%) scale(0.95, 1.05) rotate(-0.8deg); }
    80%      { transform: translateX(-51%) scale(1.03, 0.99) rotate(0.6deg); }
}

/* The breathing heat-glow behind the pyre — the room feels warm before you
   read a single word. Pure ambience: it never encodes an outcome. */
.ba-heat {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 240px;
    height: 190px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 75%, rgba(255, 122, 24, 0.35), rgba(255, 69, 0, 0.12) 55%, transparent 75%);
    filter: blur(10px);
    animation: ba-heat-breathe 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ba-heat-breathe {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.12); }
}
.ba-hero[data-mood="pending"] .ba-heat { animation-duration: 1.1s; }

/* Embers — six sparks riding the updraft, each on its own phase and drift.
   They rise, wobble, fade, and are reborn at the coals. */
.ba-ember {
    position: absolute;
    bottom: 60px;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffcf48 0%, #ff7a18 60%, transparent 100%);
    opacity: 0;
    animation: ba-ember-rise 3.4s linear infinite;
    pointer-events: none;
}
.ba-ember-1 { margin-left: -34px; animation-delay: 0s;    animation-duration: 3.1s; }
.ba-ember-2 { margin-left: 22px;  animation-delay: 0.6s;  animation-duration: 3.7s; width: 4px; height: 4px; }
.ba-ember-3 { margin-left: -10px; animation-delay: 1.2s;  animation-duration: 2.9s; }
.ba-ember-4 { margin-left: 38px;  animation-delay: 1.7s;  animation-duration: 4.1s; width: 3px; height: 3px; }
.ba-ember-5 { margin-left: -46px; animation-delay: 2.3s;  animation-duration: 3.5s; width: 4px; height: 4px; }
.ba-ember-6 { margin-left: 8px;   animation-delay: 2.8s;  animation-duration: 3.2s; }
@keyframes ba-ember-rise {
    0%   { transform: translate(0, 0) scale(1);        opacity: 0; }
    8%   { opacity: 0.95; }
    45%  { transform: translate(9px, -78px) scale(0.8); opacity: 0.7; }
    75%  { transform: translate(-7px, -132px) scale(0.55); opacity: 0.35; }
    100% { transform: translate(4px, -170px) scale(0.3);  opacity: 0; }
}
/* The oracle's rage doubles the updraft. */
.ba-hero[data-mood="pending"] .ba-ember { animation-duration: 1.4s; }

/* A win bathes the whole hero in gold for as long as the mood lasts. */
.ba-hero[data-mood="reveal"] {
    border-color: var(--c-gold);
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.55),
        0 0 34px rgba(255, 207, 72, 0.65);
    transition: box-shadow 0.8s ease, border-color 0.8s ease;
}

/* Moods. Pending: the pyre rages. Nothing: it shrinks back, chastened. */
.ba-hero[data-mood="pending"] .ba-fire { transform: scale(1.18); }
.ba-hero[data-mood="pending"] .ba-flame { animation-duration: 0.55s; }
.ba-hero[data-mood="pending"] .ba-flame-mid { animation-duration: 0.42s; }
.ba-hero[data-mood="pending"] .ba-flame-core { animation-duration: 0.34s; }
.ba-hero[data-mood="nothing"] .ba-fire { transform: scale(0.82); }
.ba-hero[data-mood="reveal"] .ba-fire { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    .ba-flame, .ba-heat, .ba-ember { animation: none; }
    .ba-ember { opacity: 0; }        /* frozen sparks read as dirt — hide them */
    .ba-heat { opacity: 0.8; }       /* the warm glow stays, statically */
    .ba-fire { transition: none; }
    .ba-hero[data-mood="reveal"] { transition: none; }
}

.ba-readout {
    margin: 0;
    text-align: center;
    color: var(--c-dim);
    font-size: 1rem;
    min-height: 1.4em;
}

/* The prizes that rise out of the fire at reveal. */
.ba-prize-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 4px 0 2px;
}
.ba-prize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--c-gold);
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: bold;
    color: var(--c-gold);
    animation: ba-rise 0.6s ease both;
}
.ba-prize-nothing { border-color: rgba(255, 255, 255, 0.25); color: var(--c-dim); }
@keyframes ba-rise {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ba-prize { animation: none; }
}

.ba-result {
    width: 100%;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
    font-weight: bold;
    font-size: 1.05rem;
}
.ba-result-win { background: rgba(46, 204, 113, 0.16); border: 1px solid var(--c-green); color: #d8ffe9; }
.ba-result-nothing { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--c-dim); }

/* ============================ CONSOLE ============================ */
.ba-console { display: flex; flex-direction: column; gap: 8px; }
.ba-chance-line { text-align: center; font-size: 1rem; color: var(--c-soft); }
.ba-chance-line strong { color: var(--c-gold); }
.ba-fee-line { text-align: center; color: var(--c-dim); font-size: 0.85rem; }

.ba-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.wallet-btn {
    font-family: inherit;
    min-height: var(--touch);
    border-radius: 12px;
    border: 2px solid var(--c-gold);
    background: linear-gradient(180deg, #ff7a18, #d64500);
    /* Black, like every orange action button (and the lore pages' Altar CTA).
       White measured 2.6:1 on #ff7a18; black is 8.1:1 there, 4.7:1 at #d64500. */
    color: #000;
    font-size: 1.05rem;
    font-weight: bold;
    padding: 10px 22px;
    cursor: pointer;
    text-shadow: none;
    box-shadow: 0 0 14px rgba(255, 122, 24, 0.5);
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.wallet-btn:not(:disabled):hover,
.wallet-btn:not(:disabled):focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 207, 72, 0.75);
    outline: none;
}
.wallet-btn:disabled { opacity: 0.55; cursor: default; }

.ba-action-btn { min-width: min(320px, 100%); }
.ba-hint { margin: 0; color: var(--c-dim); font-size: 0.85rem; text-align: center; }

.ba-tx-status { text-align: center; min-height: 1.3em; margin: 2px 0 0; }
.ba-tx-link { text-align: center; margin: 0; font-size: 0.9rem; }
.ba-tx-link a { color: var(--c-gold); }

/* ============================ AMOUNT ============================ */
.ba-amount input[type="text"] {
    width: 100%;
    min-height: var(--touch);
    border-radius: 10px;
    border: 2px solid rgba(255, 207, 72, 0.5);
    background: rgba(0, 0, 0, 0.6);
    color: var(--c-gold);
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 8px 12px;
}
.ba-amount input[type="text"]:focus-visible {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 10px rgba(255, 207, 72, 0.6);
}

.ba-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ba-chip {
    font-family: inherit;
    min-height: var(--touch);
    border-radius: 999px;
    border: 1px solid rgba(255, 207, 72, 0.55);
    background: rgba(0, 0, 0, 0.55);
    color: var(--c-soft);
    font-weight: bold;
    padding: 6px 14px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.ba-chip:not(:disabled):hover,
.ba-chip:not(:disabled):focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(255, 207, 72, 0.55);
    border-color: var(--c-gold);
    outline: none;
}
.ba-chip:disabled { opacity: 0.5; cursor: default; }
.ba-allin-chip { border-color: var(--c-red); color: #ffb59b; }

.ba-limits { color: var(--c-dim); font-size: 0.85rem; }
.ba-amount-error { color: #ffb59b; font-weight: bold; }
.ba-burn-note {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--c-red);
    border-radius: 6px;
    background: rgba(255, 69, 0, 0.09);
    font-size: 0.9rem;
}

/* ============================ PENDING / CLAIMS ============================ */
.ba-pending-line { font-weight: bold; color: var(--c-gold); }

.ba-claims-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ba-claims-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 207, 72, 0.07);
    border: 1px solid rgba(255, 207, 72, 0.25);
    font-size: 0.92rem;
}
.ba-claim-btn { width: 100%; }

/* ============================ ODDS TABLE ============================ */
.ba-odds-lead { line-height: 1.5; }
.ba-info-label { font-weight: bold; margin-top: 10px; }
.ba-info-list { margin: 4px 0 8px; padding-left: 20px; }
.ba-info-list li { margin: 3px 0; font-size: 0.92rem; }

.ba-bands-wrap { overflow-x: auto; }
.ba-bands {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.ba-bands th, .ba-bands td {
    padding: 4px 8px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ba-bands th:first-child, .ba-bands td:first-child { text-align: left; }
.ba-bands th { color: var(--c-gold); font-size: 0.82rem; }
.ba-bands tr.ba-band-active td { background: rgba(255, 207, 72, 0.1); color: var(--c-gold); font-weight: bold; }
.ba-bands td.ba-band-dark { color: rgba(255, 255, 255, 0.35); }

.ba-verify-head { font-weight: bold; color: var(--c-gold); margin-top: 12px; }
.ba-verify-note { font-size: 0.85rem; color: var(--c-dim); line-height: 1.5; }
.contract-link { color: var(--c-gold); }
.ba-pending-contract { color: var(--c-dim); font-style: italic; }

/* ============================ VAULT / CHRONICLE ============================ */
.ba-vault-list { list-style: none; margin: 4px 0 8px; padding: 0; }
.ba-vault-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ba-vault-list li:last-child { border-bottom: none; }
.ba-lane-dark { color: rgba(255, 255, 255, 0.4); }

.ba-chronicle h3, .ba-chronicle h2 { text-shadow: 0 0 8px rgba(255, 69, 0, 0.6); }

.ba-feed-status { color: var(--c-dim); font-size: 0.82rem; line-height: 1.5; }
.ba-feed-status a { color: var(--c-gold); }

/* ============================= footer ============================== */
/* Footer — the SITE-STANDARD block, byte-for-byte the one in wrapper.css /
   revoker.css / txdecoder.css and the rest. This page used to carry its own
   darker, dimmer variant (0.9 alpha, dim text, bigger padding); the owner saw
   the seam from page to page (2026-09-02: "the footer has to be the same in
   all of our pages"). tests/footer-parity.spec.js pins the computed result. */
.footer {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 14px;
    margin-top: 20px;
    box-sizing: border-box;
}
.footer p { margin: 0; }
.trust-strip {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: center;
    align-items: baseline;
    padding: 0 12px;
    font-size: 12px;
    color: #ded6c6; /* opaque: translucent text over a translucent panel has no contrast ratio (READABILITY rule) */
}
.trust-strip a { color: var(--c-gold); text-decoration: none; }
.trust-strip a:hover, .trust-strip a:focus-visible { color: var(--c-orange); text-decoration: underline; }
.trust-sep { opacity: 0.5; }

/* ---- ❓ how it works button + modal shell -------------------------------
   Button and SHELL/CARD are per-page on purpose (the house.html lesson,
   2026-08-19: linking viewer-modal.css alone styles nothing) — copied from
   bf.css, ids renamed to #baInfoBtn / #baInfoModal / #baInfoClose.
   viewer-modal.css (linked before this sheet) supplies the backdrop and the
   close button. */
.viewer-info-btn {
    display: block;
    width: max-content;
    max-width: 100%;
    font-family: inherit;
    font-size: 14px;
    margin: 0 auto 16px;
    padding: 6px 14px;
    min-height: var(--touch);
    border-radius: 999px;
    border: 1px solid rgba(255, 207, 72, .6);
    background: rgba(0, 0, 0, .45);
    color: var(--c-gold, #ffcf48);
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .2s ease, border-color .2s ease;
}
.viewer-info-btn:hover { background: rgba(0, 0, 0, .7); border-color: var(--c-gold, #ffcf48); }
.viewer-info-btn:focus-visible { outline: 3px solid var(--c-gold, #ffcf48); outline-offset: 2px; }

.viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.viewer-modal-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 26px 24px 24px;
    border-radius: 16px;
    border: 2px solid #ff7a18;
    background: rgba(10, 6, 2, .97);
    color: #fff;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, .8), 0 0 10px rgba(255, 69, 0, .7);
    animation: baModalIn .22s ease;
    /* ELI10 prose, not rap — left-aligned for reading, unlike the site-wide
       centered rap cards. */
    text-align: left;
}
.viewer-modal-card a { color: var(--c-gold, #ffcf48); }
@keyframes baModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .viewer-modal-card { animation: none; }
}
@media screen and (max-width: 768px) {
    .viewer-modal-card { padding: 22px 16px 18px; }
}

#baInfoTitle {
    margin: 0 0 4px;
    font-size: 20px;
    text-align: center;
    color: var(--c-gold, #ffcf48);
    text-shadow: 0 0 6px #ff8c00, 0 0 10px #ff4500;
    text-wrap: balance;
}
.ba-hiw-intro { margin: 0 0 12px; text-align: center; color: rgba(255, 255, 255, .75); font-size: 14px; }
.ba-hiw-steps { margin: 0 0 12px; padding-left: 1.3rem; }
.ba-hiw-steps li { margin: 0 0 8px; line-height: 1.6; font-size: 14px; }
.ba-hiw-fact { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.ba-hiw-fine { margin: 10px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .65); line-height: 1.55; }