/* ================================================================
   Boot Kit funnel — /bootkit (advertorial) and /bootkit/order
   Deliberately LIGHT: long-form sales copy reads better on white,
   and the black header/footer from the site layout frames it.
   ================================================================ */

:root {
    --bk-ink: #111114;
    --bk-ink-soft: #4a4a52;
    --bk-line: #e3e3e8;
    --bk-cream: #fdf4e5;
    --bk-yellow: #f7b500;
    --bk-yellow-dk: #d99f00;
    --bk-green: #1a8a4a;
    --bk-red: #d62828;
}

.bk {
    background: #fff;
    color: var(--bk-ink);
    font-family: "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
}

.bk-wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }
.bk-wrap--wide { max-width: 1040px; }

/* ---------------- Advertorial ---------------- */

.bk-article { padding: 54px 0 40px; }

.bk-h1 {
    font-size: clamp(2rem, 6.6vw, 3.15rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: center;
    margin: 0 0 26px;
    text-wrap: balance;
}

.bk-deck {
    font-size: clamp(1.05rem, 2.6vw, 1.3rem);
    line-height: 1.6;
    text-align: center;
    color: var(--bk-ink);
    margin: 0 auto 40px;
    max-width: 640px;
    text-wrap: pretty;
}

.bk-figure { margin: 0 0 46px; }
.bk-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Placeholder shown wherever a photo hasn't been supplied yet. */
.bk-figure--empty {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    border: 2px dashed var(--bk-line);
    border-radius: 10px;
    background: #fafafb;
    color: #8b8b95;
    text-align: center;
    padding: 46px 24px;
    font-size: .95rem;
    line-height: 1.45;
}
.bk-figure--empty strong { font-size: .78rem; letter-spacing: 1.6px; color: #a8a8b2; }
.bk-figure--empty span { max-width: 420px; font-weight: 600; color: #6f6f7a; }
.bk-figure--empty code {
    font-size: .8rem; background: #eeeef2; color: #7a7a86;
    padding: 3px 8px; border-radius: 4px;
}

.bk-reason { margin: 0 0 46px; }
.bk-reason h2 {
    font-size: clamp(1.5rem, 4.4vw, 2.05rem);
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: -0.3px;
    margin: 0 0 18px;
    text-wrap: balance;
}
.bk-reason p {
    font-size: clamp(1.05rem, 2.5vw, 1.19rem);
    line-height: 1.66;
    margin: 0 0 20px;
    text-wrap: pretty;
}

/* ---------------- Dashed "coupon" offer box ---------------- */

.bk-offer {
    border: 4px dashed var(--bk-ink);
    background: var(--bk-cream);
    border-radius: 6px;
    padding: 34px 24px 30px;
    margin: 56px 0 34px;
    text-align: center;
}
/* Give the product shot more room where the screen is narrowest. */
@media (max-width: 560px) {
    .bk-offer { padding: 26px 14px 24px; }
}

.bk-offer__headline {
    font-size: clamp(1.5rem, 4.6vw, 2.1rem);
    font-weight: 900;
    line-height: 1.14;
    margin: 0 0 14px;
    text-wrap: balance;
}
.bk-offer__kicker { font-weight: 800; font-size: 1.05rem; margin: 0 0 8px; }
.bk-offer__sub { font-size: 1.08rem; line-height: 1.55; margin: 0 auto 22px; max-width: 460px; }

.bk-offer__rule { border: 0; border-top: 1px solid rgba(0,0,0,.14); margin: 22px auto; max-width: 80%; }

/* Fills the dashed box edge to edge. At 300px this was unreadable on a
   phone — the product shot has to carry the offer. */
.bk-offer__img { width: 100%; margin: 0 auto 26px; }
.bk-offer__img img {
    width: 100%; height: auto; display: block;
    border-radius: 8px;
}

.bk-offer__bullets { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; }
.bk-offer__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.45;
    padding: 9px 0;
}
.bk-offer__bullets .ic { flex: none; font-size: 1.25rem; line-height: 1.2; }

.bk-scarcity { font-weight: 800; letter-spacing: .3px; margin: 18px 0 0; }
.bk-scarcity span { color: var(--bk-red); }

/* ---------------- CTA button ---------------- */

.bk-cta {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    background: var(--bk-yellow);
    color: #111;
    font-family: inherit;
    font-weight: 900;
    font-size: clamp(1.02rem, 2.7vw, 1.2rem);
    line-height: 1.3;
    letter-spacing: .3px;
    text-align: center;
    padding: 20px 26px;
    border-radius: 999px;
    box-shadow: 0 4px 0 var(--bk-yellow-dk);
    transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bk-cta:hover { background: #ffc42b; }
.bk-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bk-yellow-dk); }
.bk-cta small { display: block; font-weight: 700; font-size: .86em; opacity: .82; margin-top: 3px; }

.bk-cta--standalone { margin: 40px 0 10px; }

/* ================================================================
   Order page
   ================================================================ */

.bk-order { padding: 40px 0 70px; }

.bk-order__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 900px) {
    .bk-order__grid { grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
    .bk-order__media { position: sticky; top: 92px; }
}

/* --- Gallery --- */

.bk-hero { position: relative; border-radius: 12px; overflow: hidden; background: #f4f4f6; }
.bk-hero img { width: 100%; height: auto; display: block; }
.bk-hero--empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
    border: 2px dashed var(--bk-line);
    color: #8b8b95;
    text-align: center;
    padding: 90px 24px;
    font-size: .95rem;
    line-height: 1.45;
}
.bk-hero--empty strong { font-size: .78rem; letter-spacing: 1.6px; color: #a8a8b2; }
.bk-hero--empty span { max-width: 340px; font-weight: 600; color: #6f6f7a; }
.bk-badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--bk-yellow); color: #111;
    font-weight: 900; font-size: .78rem; letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 8px 14px; border-radius: 5px;
}

.bk-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.bk-thumbs button {
    flex: none; width: 76px; height: 76px; padding: 0;
    border: 2px solid var(--bk-line); border-radius: 10px;
    background: #f4f4f6; cursor: pointer; overflow: hidden;
}
.bk-thumbs button[aria-current="true"] { border-color: var(--bk-ink); }
.bk-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Product head --- */

.bk-stars { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.bk-stars__icons { color: var(--bk-yellow-dk); letter-spacing: 2px; font-size: 1.15rem; }
.bk-stars__proof { font-size: 1rem; font-weight: 600; }

.bk-title {
    font-size: clamp(1.7rem, 4.6vw, 2.35rem);
    font-weight: 900; line-height: 1.1; letter-spacing: -0.4px;
    margin: 0 0 12px;
}
.bk-tagline { font-size: 1.12rem; line-height: 1.5; color: var(--bk-ink-soft); margin: 0 0 20px; }

.bk-checks { list-style: none; padding: 0; margin: 0 0 24px; }
.bk-checks li {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 7px 0; font-size: 1.03rem; line-height: 1.45;
}
.bk-checks svg { flex: none; margin-top: 3px; color: var(--bk-ink); }

.bk-salebar {
    display: block;
    background: var(--bk-green); color: #fff;
    font-weight: 800; letter-spacing: .5px; text-align: center;
    padding: 15px 18px; border-radius: 8px; margin: 0 0 24px;
    font-size: clamp(.92rem, 2.3vw, 1.02rem);
}

/* --- Tier selector --- */

.bk-choose { font-size: 1.05rem; margin: 0 0 16px; }
.bk-choose strong { font-weight: 800; }

.bk-tiers { display: flex; flex-direction: column; gap: 14px; margin: 0 0 26px; }

.bk-tier { position: relative; }
.bk-tier input { position: absolute; opacity: 0; pointer-events: none; }

.bk-tier__card {
    display: flex; align-items: center; gap: 15px;
    border: 2px solid var(--bk-line);
    background: #f6f6f8;
    border-radius: 10px;
    padding: 18px 18px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bk-tier input:checked + .bk-tier__card {
    border-color: var(--bk-ink);
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.bk-tier input:focus-visible + .bk-tier__card { outline: 3px solid var(--bk-yellow); outline-offset: 2px; }

.bk-tier__dot {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid #b4b4bd; background: #fff;
    display: grid; place-items: center;
}
.bk-tier input:checked + .bk-tier__card .bk-tier__dot { border-color: var(--bk-ink); }
.bk-tier__dot::after { content: ""; width: 13px; height: 13px; border-radius: 50%; background: transparent; }
.bk-tier input:checked + .bk-tier__card .bk-tier__dot::after { background: var(--bk-ink); }

.bk-tier__body { flex: 1 1 auto; min-width: 0; }
.bk-tier__name { font-size: clamp(1.06rem, 2.8vw, 1.24rem); font-weight: 800; line-height: 1.25; }
.bk-tier__sub { font-size: .95rem; color: var(--bk-ink-soft); margin-top: 2px; }

.bk-tier__price { flex: none; text-align: right; }
.bk-tier__now { font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 900; line-height: 1.2; }
.bk-tier__was { font-size: .98rem; color: #8b8b95; text-decoration: line-through; }

.bk-tier__ribbon {
    position: absolute; top: -11px; right: 14px; z-index: 2;
    background: var(--bk-ink); color: #fff;
    font-size: .72rem; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 11px; border-radius: 4px;
}

/* Bonus rows attached under a tier */
.bk-bonuses { list-style: none; padding: 0; margin: 0; }
.bk-bonuses li {
    display: flex; align-items: center; gap: 12px;
    background: #e9e9ee;
    border-top: 1px solid #dcdce3;
    padding: 12px 18px;
    font-weight: 700; font-size: .98rem;
}
.bk-bonuses li:first-child { margin-top: -6px; padding-top: 16px; }
.bk-bonuses li:last-child { border-radius: 0 0 10px 10px; }
.bk-bonuses .lbl { flex: 1 1 auto; }
.bk-bonuses .val { color: #8b8b95; text-decoration: line-through; font-weight: 600; }

/* What's included, under the selector */
.bk-includes {
    border: 1px solid var(--bk-line); border-radius: 10px;
    padding: 18px 20px; margin: 0 0 26px; background: #fafafb;
}
.bk-includes h3 { margin: 0 0 12px; font-size: .82rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bk-ink-soft); }
.bk-includes ul { list-style: none; padding: 0; margin: 0; }
.bk-includes li { display: flex; gap: 10px; padding: 5px 0; font-size: 1.02rem; line-height: 1.45; }
.bk-includes li::before { content: "✓"; font-weight: 900; flex: none; }

/* --- Checkout form --- */

.bk-form { border-top: 1px solid var(--bk-line); padding-top: 28px; }
.bk-form h3 {
    font-size: .82rem; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--bk-ink-soft);
    margin: 0 0 16px;
}
.bk-form h3 + .bk-row, .bk-form h3 + .bk-field { margin-top: 0; }

.bk-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .bk-row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { .bk-row--zip { grid-template-columns: 2fr 1fr 1fr; } }

.bk-field { margin-bottom: 14px; }
.bk-field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 6px; }
.bk-field input, .bk-field select {
    width: 100%; font-family: inherit; font-size: 1rem;
    padding: 12px 13px;
    border: 1px solid #c9c9d2; border-radius: 8px;
    background: #fff; color: var(--bk-ink);
}
.bk-field input:focus, .bk-field select:focus {
    outline: none; border-color: var(--bk-ink); box-shadow: 0 0 0 3px rgba(247,181,0,.35);
}
.bk-field--err input { border-color: var(--bk-red); }
.bk-field .err { color: var(--bk-red); font-size: .85rem; font-weight: 600; margin-top: 5px; }

#bk-card-container { padding: 4px 0 2px; min-height: 62px; }
.bk-card-errors { color: var(--bk-red); font-size: .9rem; font-weight: 600; min-height: 20px; }

.bk-total {
    display: flex; align-items: baseline; justify-content: space-between;
    border-top: 2px solid var(--bk-ink); margin-top: 22px; padding-top: 16px;
    font-weight: 900;
}
.bk-total__label { font-size: 1.05rem; }
.bk-total__value { font-size: 1.6rem; }

.bk-reassure { text-align: center; font-size: .93rem; color: var(--bk-ink-soft); margin: 14px 0 0; line-height: 1.5; }
.bk-guarantee { text-align: center; font-weight: 700; margin: 10px 0 0; }

.bk-alert {
    border-radius: 8px; padding: 14px 16px; margin: 0 0 20px;
    font-weight: 600; line-height: 1.45;
}
.bk-alert--err { background: #fde8e8; color: #9b1c1c; border: 1px solid #f5c2c2; }

/* ---------------- Thanks page ---------------- */

.bk-thanks { padding: 70px 0 80px; text-align: center; }
.bk-thanks__check {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--bk-green); color: #fff;
    display: grid; place-items: center; margin: 0 auto 22px;
    font-size: 2rem; font-weight: 900;
}
.bk-thanks h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 900; margin: 0 0 14px; }
.bk-thanks p { font-size: 1.08rem; line-height: 1.6; margin: 0 auto 16px; max-width: 560px; }

.bk-receipt {
    border: 1px solid var(--bk-line); border-radius: 10px;
    background: #fafafb; padding: 22px; margin: 28px auto 24px;
    max-width: 460px; text-align: left;
}
.bk-receipt dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; }
.bk-receipt dt { font-weight: 700; color: var(--bk-ink-soft); font-size: .95rem; }
.bk-receipt dd { margin: 0; text-align: right; font-weight: 700; }
.bk-receipt .tot { border-top: 1px solid var(--bk-line); padding-top: 10px; }


/* ---------------- Punch line, pull quote, positioning ---------------- */

.bk-punch {
    text-align: center;
    font-weight: 900;
    font-size: clamp(1.05rem, 2.8vw, 1.32rem);
    line-height: 1.45;
    max-width: 620px;
    margin: -22px auto 40px;
    text-wrap: balance;
}

.bk-pull {
    font-weight: 900;
    font-size: clamp(1.12rem, 3vw, 1.38rem) !important;
    line-height: 1.35 !important;
    border-left: 5px solid var(--bk-yellow);
    padding-left: 16px;
    margin: 0 0 20px !important;
    text-wrap: balance;
}

.bk-position {
    display: block;
    background: var(--bk-ink);
    color: #fff;
    text-align: center;
    font-weight: 900;
    font-size: clamp(1.08rem, 2.9vw, 1.42rem);
    line-height: 1.42;
    padding: 30px 26px;
    border-radius: 10px;
    margin: 10px 0 46px;
    text-wrap: balance;
}
.bk-position--inline {
    font-size: clamp(.98rem, 2.4vw, 1.08rem);
    padding: 16px 18px;
    margin: 0 0 22px;
}

/* ---------------- Value stack (order page) ---------------- */

.bk-stack { list-style: none; padding: 0; margin: 0 0 4px; }
.bk-stack li {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #dedee5;
    font-size: 1rem; line-height: 1.4;
}
.bk-stack__thumb {
    flex: none; width: 44px; height: auto;
    aspect-ratio: 17 / 22;            /* 8.5 x 11 — the documents are letter pages */
    border-radius: 4px; object-fit: contain;
    background: #fff; border: 1px solid var(--bk-line);
    box-shadow: 0 1px 3px rgba(0,0,0,.09);
    align-self: center;
}
.bk-stack__thumb--empty {
    display: grid; place-items: center;
    border-style: dashed; background: #fafafb; box-shadow: none;
    font-size: .5rem; font-weight: 700; color: #b0b0ba;
    text-align: center; line-height: 1.1; padding: 3px;
    overflow: hidden; word-break: break-all;
}
.bk-stack__lbl { flex: 1 1 auto; font-weight: 700; }
.bk-stack__lbl em {
    font-style: normal; font-weight: 900; font-size: .72rem; letter-spacing: 1px;
    background: var(--bk-yellow); color: #111;
    padding: 2px 6px; border-radius: 3px; margin-right: 7px;
    position: relative; top: -1px;
}
.bk-stack__val { flex: none; color: #8b8b95; text-decoration: line-through; font-weight: 600; }

.bk-stack__total,
.bk-stack__yours {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 0; padding: 11px 0 0; font-weight: 900;
}
.bk-stack__total { color: var(--bk-ink-soft); font-size: 1.02rem; }
.bk-stack__total span:last-child { text-decoration: line-through; }
.bk-stack__yours { font-size: 1.22rem; padding-top: 4px; }
.bk-stack__yours span:last-child { color: var(--bk-green); }

/* ---------------- Kit manifest (sales page) ---------------- */

.bk-manifest { margin: 0 0 40px; }
.bk-manifest h2 {
    font-size: clamp(1.45rem, 4.2vw, 1.95rem);
    font-weight: 900; line-height: 1.15; margin: 0 0 22px;
    text-align: center; text-wrap: balance;
}
.bk-manifest__list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.bk-manifest__list li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--bk-line);
}
@media (max-width: 520px) {
    .bk-manifest__tag { display: none; }
}
.bk-manifest__list li:last-child { border-bottom: 0; }

.bk-manifest__thumb {
    flex: none; width: 76px; height: auto;
    aspect-ratio: 17 / 22;            /* 8.5 x 11 — the documents are letter pages */
    border-radius: 5px; object-fit: contain;
    background: #fff; border: 1px solid var(--bk-line);
    box-shadow: 0 2px 6px rgba(0,0,0,.11);
}
.bk-manifest__thumb--empty {
    display: grid; place-items: center;
    border-style: dashed; background: #fafafb; box-shadow: none;
    font-size: .58rem; font-weight: 700; color: #b0b0ba;
    text-align: center; line-height: 1.15; padding: 4px;
    word-break: break-all;
}

.bk-manifest__tag {
    flex: none; width: 68px; text-align: center;
    font-size: .64rem; font-weight: 900; letter-spacing: 1px;
    padding: 5px 0; border-radius: 4px;
    /* Same yellow as the FREE tag on the order page. The old grey-on-grey
       was close to illegible. */
    background: var(--bk-yellow); color: #111;
    margin-top: 3px;
}
/* The book isn't a bonus — black keeps it distinct without losing contrast. */
.bk-manifest__tag.is-core { background: var(--bk-ink); color: #fff; }

.bk-manifest__body { display: flex; flex-direction: column; gap: 4px; }
.bk-manifest__body strong { font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.bk-manifest__body span { font-size: 1rem; line-height: 1.55; color: var(--bk-ink-soft); }


/* ---------------- Author / personal statement ---------------- */

.bk-author {
    border-top: 3px solid var(--bk-ink);
    border-bottom: 3px solid var(--bk-ink);
    padding: 34px 0;
    margin: 8px 0 46px;
}

/* Sits after the written statement, so it reads as "and here's the man". */
.bk-author__banner { margin: 30px 0 0; }
.bk-author__banner img {
    width: 100%; height: auto; display: block;
    border-radius: 10px;
}

.bk-author__eyebrow {
    font-size: .78rem; font-weight: 900; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--bk-ink-soft);
    margin: 0 0 8px !important;
}

.bk-author__name {
    font-size: clamp(1.7rem, 4.8vw, 2.3rem);
    font-weight: 900; line-height: 1.1; letter-spacing: -0.4px;
    margin: 0 0 4px;
}
.bk-author__role {
    font-weight: 700; color: var(--bk-ink-soft);
    margin: 0 0 22px !important;
}

.bk-author__body p {
    font-size: clamp(1.05rem, 2.5vw, 1.19rem);
    line-height: 1.66;
    margin: 0 0 18px;
    text-wrap: pretty;
}

.bk-author__sign {
    font-weight: 900;
    font-size: 1.12rem !important;
    margin: 24px 0 0 !important;
}

/* The coaching pitch — ties to the consultation tier */
.bk-coach {
    background: var(--bk-cream);
    border: 2px solid var(--bk-ink);
    border-radius: 10px;
    padding: 26px 24px;
    margin-top: 30px;
}
.bk-coach h3 {
    font-size: clamp(1.25rem, 3.4vw, 1.55rem);
    font-weight: 900; line-height: 1.2;
    margin: 0 0 12px;
    text-wrap: balance;
}
.bk-coach p {
    font-size: 1.06rem; line-height: 1.6;
    margin: 0 0 20px;
    text-wrap: pretty;
}
.bk-coach__cta {
    display: inline-block;
    background: var(--bk-ink); color: #fff;
    font-weight: 800; font-size: 1rem; letter-spacing: .3px;
    padding: 15px 26px; border-radius: 999px;
    transition: background .15s ease;
}
.bk-coach__cta:hover { background: #33333c; }


/* ---------------- Test-mode banner ---------------- */

.bk-testbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    background: #fde8e8; border: 2px solid var(--bk-red);
    border-radius: 8px; padding: 14px 16px; margin: 0 0 22px;
    color: #7f1d1d; font-size: .97rem; line-height: 1.5;
}
.bk-testbar strong:first-child {
    background: var(--bk-red); color: #fff;
    font-size: .72rem; letter-spacing: 1.2px; font-weight: 900;
    padding: 4px 9px; border-radius: 4px;
}
.bk-testbar form { margin-left: auto; }
.bk-testbar button {
    border: 1px solid var(--bk-red); background: transparent; color: #7f1d1d;
    font-family: inherit; font-weight: 700; font-size: .85rem;
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.bk-testbar button:hover { background: var(--bk-red); color: #fff; }


/* ---------------- Video clips ---------------- */

.bk-video {
    position: relative;
    margin: 0 0 26px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    /* Reserve the space before metadata loads so nothing jumps. */
    aspect-ratio: 16 / 9;
}
.bk-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.bk-video--hero { margin-bottom: 34px; }

/* A vertical phone clip shouldn't be letterboxed into a wide black band. */
@media (max-width: 620px) {
    .bk-video { aspect-ratio: auto; }
    .bk-video video { height: auto; }
}