/* "Become a host" (JB-3979). Loaded only on the landing_become_a_host routes.
   Same approach as how-it-works.css (JB-3963): every selector lives under
   .bah2, the page's <main>, and every class carries a bh- prefix, so nothing
   here reaches the site header, footer or the help launcher, and nothing of
   Bootstrap's .btn, .card, .badge leaks in. Light only: the site has no dark
   theme. The one rule outside .bah2 is the help-launcher lift at the bottom,
   keyed to a class only this page's script sets. */

.bah2 {
  --bh-bg: #faf8fc;
  --bh-surface: #ffffff;
  --bh-surface-2: #f3eff8;
  --bh-surface-3: #ebe5f3;
  --bh-ink: #1d1630;
  --bh-ink-2: #4b4360;
  --bh-ink-3: #7a7190;
  --bh-line: #e3dcec;
  --bh-coral: #e0563a;
  --bh-coral-ink: #ffffff;
  --bh-coral-soft: #fde9e3;
  --bh-coral-text: #b8401f;
  --bh-purple: #4a22b5;
  --bh-purple-soft: #ece6fb;
  --bh-purple-text: #4a22b5;
  --bh-ok: #1f8a5b;
  --bh-ok-soft: #e2f5ec;
  --bh-warn: #a86400;
  --bh-warn-soft: #fff2dc;
  --bh-bar-bg: rgba(255, 255, 255, .92);
  --bh-shadow: 0 1px 2px rgba(40, 20, 80, .06), 0 8px 24px rgba(40, 20, 80, .08);
  --bh-shadow-lg: 0 2px 4px rgba(40, 20, 80, .06), 0 20px 48px rgba(40, 20, 80, .14);
  --bh-hero: linear-gradient(135deg, #4a22b5 0%, #8a3d9c 52%, #f2795a 100%);
  --bh-radius: 20px;

  display: block;
  background: var(--bh-bg);
  color: var(--bh-ink);
  font-family: 'JWguest Sans', 'circular', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Resets against Bootstrap and common.css, inside the page only. common.css
   pins every h1-h6 to font-weight 600 !important, hence the !important on
   the heading weights. */
.bah2 *, .bah2 *::before, .bah2 *::after { box-sizing: border-box; }
.bah2 h1, .bah2 h2, .bah2 h3, .bah2 h4 { margin: 0; line-height: 1.15; letter-spacing: -.015em; color: inherit; font-family: inherit; }
.bah2 h1, .bah2 h2 { font-weight: 800 !important; }
.bah2 h3 { font-weight: 700 !important; }
.bah2 .bh-step h3 { font-weight: 800 !important; }
.bah2 p { margin: 0; }
.bah2 ul, .bah2 ol { margin: 0; padding: 0; list-style: none; }
.bah2 blockquote, .bah2 figure { margin: 0; }
.bah2 a { color: inherit; }
.bah2 small { font-size: inherit; }
.bah2 b { font-weight: 700; }
.bah2 svg { flex: none; }
.bah2 .bh-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .bah2 .bh-wrap { padding: 0 32px; } }

/* Pills */
.bah2 .bh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; }
.bah2 .bh-btn-coral { background: var(--bh-coral); color: var(--bh-coral-ink); box-shadow: 0 6px 18px rgba(224, 86, 58, .32); }
.bah2 .bh-btn-coral:hover { filter: brightness(1.06); color: var(--bh-coral-ink); }
.bah2 .bh-btn-glass { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.bah2 .bh-btn-glass:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.bah2 .bh-btn-white, .bah2 .bh-btn-white:hover { background: #fff; color: #2a1460; }
.bah2 .bh-btn:focus-visible, .bah2 summary:focus-visible, .bah2 .bh-final a:focus-visible { outline: 3px solid var(--bh-coral); outline-offset: 3px; }
/* A site-wide rule capitalises every button and link label; the labels here
   are written in sentence case on purpose. */
.bah2 .bh-btn, .bah2 .bh-btn:hover, .bah2 .bh-btn:focus { text-transform: none; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .bah2 .bh-btn { transition: transform .15s, filter .15s, background .15s; }
  .bah2 .bh-btn:hover { transform: translateY(-1px); }
}

/* Hero */
.bah2 .bh-hero { background: var(--bh-hero); color: #fff; position: relative; overflow: hidden; }
.bah2 .bh-hero::before { content: ""; position: absolute; right: -12%; bottom: -45%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent); pointer-events: none; }
.bah2 .bh-hero .bh-wrap { position: relative; padding-top: 44px; padding-bottom: 52px; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .bah2 .bh-hero .bh-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; padding-top: 72px; padding-bottom: 84px; } }
.bah2 .bh-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .88; margin-bottom: 14px; }
.bah2 .bh-hero h1 { font-size: clamp(36px, 7.4vw, 62px); font-weight: 800; max-width: 14ch; }
.bah2 .bh-hero-lede { margin-top: 16px; font-size: clamp(17px, 2.2vw, 20px); max-width: 50ch; opacity: .95; }
.bah2 .bh-hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.bah2 .bh-hero-cta .bh-btn-coral { box-shadow: 0 10px 26px rgba(30, 6, 40, .35); }
@media (max-width: 559px) { .bah2 .bh-hero-cta .bh-btn { flex: 1 1 100%; } }
.bah2 .bh-hero-sub { margin-top: 12px; font-size: 14px; opacity: .85; }
.bah2 .bh-proof { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.bah2 .bh-proof li { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); border-radius: 18px; padding: 12px 12px 11px; min-width: 0; }
.bah2 .bh-proof b { display: block; font-size: clamp(20px, 3.4vw, 26px); font-weight: 800; line-height: 1.1; }
.bah2 .bh-proof span { display: block; font-size: 13px; opacity: .9; margin-top: 3px; line-height: 1.3; }
.bah2 .bh-hero-art { display: none; position: relative; min-width: 0; }
@media (min-width: 960px) { .bah2 .bh-hero-art { display: block; } }
.bah2 .bh-hero-art .bh-ui { color: var(--bh-ink); }
.bah2 .bh-hero-art .bh-ui + .bh-ui { margin-top: 14px; }
.bah2 .bh-hero-art .bh-ui:first-child { margin-right: 48px; }
.bah2 .bh-hero-art .bh-ui:last-child { margin-left: 48px; }

/* Sections */
.bah2 .bh-sec { padding: 64px 0; }
@media (min-width: 720px) { .bah2 .bh-sec { padding: 88px 0; } }
.bah2 .bh-sec-alt { background: var(--bh-surface-2); border-top: 1px solid var(--bh-line); border-bottom: 1px solid var(--bh-line); }
.bah2 .bh-kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bh-coral-text); margin-bottom: 10px; }
.bah2 .bh-h2 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 800; max-width: 22ch; }
.bah2 .bh-lede { margin-top: 12px; color: var(--bh-ink-2); max-width: 60ch; font-size: 18px; }

/* Cards */
.bah2 .bh-grid3 { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .bah2 .bh-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Intro film (JB-3980): a full-width card after "Why host", with the call to
   list under the player. The facade is styled by the shared partial
   frontend.common.intro-film. The section above keeps its own bottom
   padding, so this one drops its top. */
.bah2 .bh-film { padding-top: 0; }
.bah2 .bh-film-card { background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: 28px; padding: 20px; box-shadow: var(--bh-shadow); min-width: 0; }
@media (min-width: 720px) { .bah2 .bh-film-card { padding: 32px; } }
.bah2 .bh-film-head { margin-bottom: 22px; }
.bah2 .bh-film .jwg-film { border-color: var(--bh-line); }
.bah2 .bh-film-cta { margin-top: 22px; display: flex; justify-content: center; }
@media (max-width: 559px) { .bah2 .bh-film-cta .bh-btn { flex: 1 1 100%; } }

.bah2 .bh-card { background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: var(--bh-radius); padding: 24px; box-shadow: var(--bh-shadow); min-width: 0; }
.bah2 .bh-card h3 { font-size: 20px; font-weight: 700; margin: 14px 0 6px; }
.bah2 .bh-card p { color: var(--bh-ink-2); font-size: 16px; }
.bah2 .bh-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--bh-purple-soft); color: var(--bh-purple-text); }
.bah2 .bh-ico-c { background: var(--bh-coral-soft); color: var(--bh-coral-text); }
.bah2 .bh-ico-g { background: var(--bh-ok-soft); color: var(--bh-ok); }

/* Steps */
.bah2 .bh-steps { display: grid; gap: 20px; margin-top: 36px; }
.bah2 .bh-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: 28px; padding: 22px; box-shadow: var(--bh-shadow); min-width: 0; }
@media (min-width: 860px) {
  .bah2 .bh-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 34px; gap: 40px; align-items: center; }
  .bah2 .bh-step:nth-child(2) .bh-step-txt { order: 2; }
}
.bah2 .bh-step-txt { min-width: 0; }
.bah2 .bh-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--bh-hero); color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 14px; }
.bah2 .bh-step h3 { font-size: clamp(22px, 2.8vw, 27px); font-weight: 800; margin-bottom: 8px; }
.bah2 .bh-step-txt > p { color: var(--bh-ink-2); }
.bah2 .bh-ticks { margin-top: 14px; display: grid; gap: 8px; }
.bah2 .bh-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--bh-ink-2); min-width: 0; }
.bah2 .bh-ticks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 999px; background: var(--bh-ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%231f8a5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.bah2 .bh-ticks b { color: var(--bh-ink); }

/* Screen-like mocks */
.bah2 .bh-mock { background: var(--bh-surface-2); border: 1px solid var(--bh-line); border-radius: 22px; padding: 18px 16px 16px; min-width: 0; position: relative; }
@media (min-width: 860px) { .bah2 .bh-mock { padding: 24px 22px 22px; } }
.bah2 .bh-mock-label { position: absolute; top: -11px; left: 18px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--bh-surface); color: var(--bh-ink-3); border: 1px solid var(--bh-line); padding: 2px 10px; border-radius: 999px; line-height: 1.5; }
.bah2 .bh-ui { background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: 18px; box-shadow: var(--bh-shadow); padding: 16px; min-width: 0; }
.bah2 .bh-ui + .bh-ui { margin-top: 12px; }
.bah2 .bh-ui-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bah2 .bh-ui-title { font-weight: 700; }
.bah2 .bh-ui-sub { font-size: 14px; color: var(--bh-ink-3); }
.bah2 .bh-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.4; padding: 4px 11px; border-radius: 999px; background: var(--bh-purple-soft); color: var(--bh-purple-text); white-space: nowrap; }
.bah2 .bh-badge-ok { background: var(--bh-ok-soft); color: var(--bh-ok); }
.bah2 .bh-badge-coral { background: var(--bh-coral-soft); color: var(--bh-coral-text); }
.bah2 .bh-badge-warn { background: var(--bh-warn-soft); color: var(--bh-warn); }
.bah2 .bh-dot { width: 8px; height: 8px; border-radius: 99px; background: currentColor; }

.bah2 .bh-photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 64px 64px; gap: 8px; margin-top: 12px; }
.bah2 .bh-ph { border-radius: 12px; position: relative; overflow: hidden; }
.bah2 .bh-ph:first-child { grid-row: span 2; }
.bah2 .bh-ph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bah2 .bh-ph1 { background: linear-gradient(160deg, #ffd9b8, #f2795a 70%, #8a3d9c); }
.bah2 .bh-ph2 { background: linear-gradient(160deg, #e9e0ff, #a48be6); }
.bah2 .bh-ph3 { background: linear-gradient(160deg, #d8f2e6, #69b893); }
.bah2 .bh-ph4 { background: linear-gradient(160deg, #fff1cf, #e8b55a); }
.bah2 .bh-ph5 { background: linear-gradient(160deg, #ffe3d8, #f2a08a); }
.bah2 .bh-ph-add { background: var(--bh-surface-2); border: 1.5px dashed var(--bh-line); display: grid; place-items: center; color: var(--bh-ink-3); font-size: 13px; font-weight: 700; }
.bah2 .bh-field { margin-top: 12px; border: 1px solid var(--bh-line); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.bah2 .bh-field small { display: block; font-size: 12px; font-weight: 700; color: var(--bh-ink-3); }
.bah2 .bh-field span { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bah2 .bh-caret { display: inline-block; width: 2px; height: 1em; background: var(--bh-coral); vertical-align: -2px; margin-left: 1px; }
@media (prefers-reduced-motion: no-preference) { .bah2 .bh-caret { animation: bh-blink 1s steps(1) infinite; } }
@keyframes bh-blink { 50% { opacity: 0; } }
.bah2 .bh-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.bah2 .bh-type { border: 1px solid var(--bh-line); border-radius: 12px; padding: 8px 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--bh-ink-2); line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
.bah2 .bh-type.bh-on { border-color: var(--bh-coral); box-shadow: inset 0 0 0 1px var(--bh-coral); color: var(--bh-ink); }

.bah2 .bh-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 12px; text-align: center; font-size: 13px; }
.bah2 .bh-cal .bh-dh { font-size: 11px; font-weight: 700; color: var(--bh-ink-3); }
.bah2 .bh-cal .bh-d { padding: 6px 0; border-radius: 9px; font-weight: 600; background: var(--bh-surface-2); color: var(--bh-ink-2); font-variant-numeric: tabular-nums; }
.bah2 .bh-cal .bh-bk { background: var(--bh-purple); color: #fff; }
.bah2 .bh-cal .bh-ic { background: repeating-linear-gradient(135deg, var(--bh-surface-3) 0 4px, var(--bh-surface-2) 4px 8px); color: var(--bh-ink-3); }
.bah2 .bh-cal .bh-na { color: var(--bh-ink-3); text-decoration: line-through; background: transparent; box-shadow: inset 0 0 0 1px var(--bh-line); }
.bah2 .bh-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--bh-ink-3); }
.bah2 .bh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bah2 .bh-legend .bh-lg-bk { background: var(--bh-purple); }
.bah2 .bh-legend .bh-lg-ic { background: var(--bh-surface-3); }
.bah2 .bh-legend .bh-lg-na { box-shadow: inset 0 0 0 1px var(--bh-ink-3); }
.bah2 .bh-price-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; font-size: 15px; color: var(--bh-ink-2); min-width: 0; }
.bah2 .bh-price-row + .bh-price-row { border-top: 1px solid var(--bh-line); }
.bah2 .bh-price-row b { color: var(--bh-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bah2 .bh-toggle { flex: none; width: 36px; height: 22px; border-radius: 99px; background: var(--bh-surface-3); position: relative; }
.bah2 .bh-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.bah2 .bh-toggle.bh-on { background: var(--bh-ok); }
.bah2 .bh-toggle.bh-on::after { left: 17px; }

.bah2 .bh-track { display: grid; gap: 0; margin-top: 12px; }
.bah2 .bh-tr { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 16px; min-width: 0; }
.bah2 .bh-tr:last-child { padding-bottom: 0; }
.bah2 .bh-tr::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--bh-line); }
.bah2 .bh-tr:last-child::before { display: none; }
.bah2 .bh-tr-dot { flex: none; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; background: var(--bh-ok-soft); color: var(--bh-ok); position: relative; z-index: 1; }
.bah2 .bh-tr-dot.bh-now { background: var(--bh-coral); color: #fff; }
.bah2 .bh-tr b { display: block; font-size: 15px; }
.bah2 .bh-tr small { display: block; font-size: 13px; color: var(--bh-ink-3); }
.bah2 .bh-live { display: flex; gap: 12px; align-items: center; }
.bah2 .bh-live-ph { flex: none; width: 64px; height: 52px; border-radius: 12px; }
.bah2 .bh-live-txt { min-width: 0; }
.bah2 .bh-live-badge { margin-left: auto; }

.bah2 .bh-req-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.bah2 .bh-req-who > div { min-width: 0; }
.bah2 .bh-av { flex: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #8a3d9c, #f2795a); }
.bah2 .bh-av-b { background: linear-gradient(135deg, #4a22b5, #8a3d9c); }
.bah2 .bh-req-msg { margin-top: 12px; background: var(--bh-surface-2); border-radius: 16px 16px 16px 6px; padding: 10px 14px; font-size: 15px; }
.bah2 .bh-req-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.bah2 .bh-req-acts span { display: grid; place-items: center; min-height: 38px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; padding: 0 6px; line-height: 1.2; }
.bah2 .bh-ra-no { box-shadow: inset 0 0 0 1.5px var(--bh-line); color: var(--bh-ink-2); }
.bah2 .bh-ra-of { background: var(--bh-ink); color: var(--bh-surface); }
.bah2 .bh-ra-yes { background: var(--bh-coral); color: #fff; }
.bah2 .bh-timer { font-variant-numeric: tabular-nums; font-weight: 800; }

/* Mid CTA */
.bah2 .bh-mid { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: 24px; padding: 22px; box-shadow: var(--bh-shadow); }
.bah2 .bh-mid p { font-size: 19px; font-weight: 700; }
.bah2 .bh-mid small { display: block; font-size: 15px; font-weight: 500; color: var(--bh-ink-3); margin-top: 2px; }
.bah2 .bh-mid .bh-btn { flex: none; }
@media (max-width: 559px) { .bah2 .bh-mid .bh-btn { width: 100%; } }

/* Earnings */
.bah2 .bh-earn { display: grid; gap: 28px; margin-top: 36px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .bah2 .bh-earn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.bah2 .bh-payout { background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: 28px; padding: 22px; box-shadow: var(--bh-shadow-lg); min-width: 0; }
@media (min-width: 720px) { .bah2 .bh-payout { padding: 30px; } }
.bah2 .bh-payout-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bah2 .bh-payout-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 2px solid var(--bh-ink); }
.bah2 .bh-payout-total span { font-weight: 700; }
.bah2 .bh-payout-total b { font-size: clamp(28px, 4vw, 36px); font-weight: 800; font-variant-numeric: tabular-nums; }
.bah2 .bh-guest-pays { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; background: var(--bh-purple-soft); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--bh-ink); }
.bah2 .bh-guest-pays svg { color: var(--bh-purple-text); margin-top: 1px; }
.bah2 .bh-when { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bah2 .bh-when div { border-radius: 14px; padding: 10px; background: var(--bh-surface-2); font-size: 13px; color: var(--bh-ink-3); min-width: 0; line-height: 1.3; }
.bah2 .bh-when b { display: block; font-size: 14px; color: var(--bh-ink); margin-bottom: 2px; }
.bah2 .bh-when .bh-on { background: var(--bh-ok-soft); }
.bah2 .bh-when .bh-on b { color: var(--bh-ok); }
.bah2 .bh-example { margin-top: 14px; font-size: 13px; color: var(--bh-ink-3); }
.bah2 .bh-facts { display: grid; gap: 14px; }
.bah2 .bh-fact { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.bah2 .bh-fact h3 { font-size: 18px; font-weight: 700; }
.bah2 .bh-fact p { color: var(--bh-ink-2); font-size: 16px; margin-top: 2px; }
.bah2 .bh-fact .bh-ico { width: 44px; height: 44px; border-radius: 14px; }
.bah2 .bh-warn-line { margin-top: 6px; display: flex; gap: 10px; align-items: flex-start; background: var(--bh-warn-soft); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.bah2 .bh-warn-line svg { color: var(--bh-warn); margin-top: 1px; }

/* Control */
.bah2 .bh-ctrl { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bah2 .bh-ctrl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bah2 .bh-ctrl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bah2 .bh-pols { display: grid; gap: 6px; margin-top: 12px; }
.bah2 .bh-pol { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 10px; border-radius: 10px; background: var(--bh-surface-2); color: var(--bh-ink-2); min-width: 0; }
.bah2 .bh-pol b { color: var(--bh-ink); flex: none; }
.bah2 .bh-pol span { text-align: right; min-width: 0; }

/* Quotes */
.bah2 .bh-quotes { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .bah2 .bh-quotes { grid-template-columns: 1.25fr 1fr; } }
.bah2 .bh-quote { border-radius: 28px; padding: 28px; position: relative; min-width: 0; }
.bah2 .bh-quote-a { background: var(--bh-hero); color: #fff; }
.bah2 .bh-quote-b { background: var(--bh-surface); border: 1px solid var(--bh-line); box-shadow: var(--bh-shadow); }
.bah2 .bh-quote svg.bh-qm { opacity: .5; }
.bah2 .bh-quote svg.bh-qm-coral { color: var(--bh-coral); }
.bah2 .bh-quote blockquote { font-size: clamp(19px, 2.4vw, 23px); font-weight: 600; line-height: 1.4; margin-top: 10px; }
.bah2 .bh-quote figcaption { margin-top: 18px; display: flex; gap: 10px; align-items: center; font-size: 15px; }
.bah2 .bh-quote figcaption b { display: block; }
.bah2 .bh-quote-a .bh-av { background: rgba(255, 255, 255, .22); }
.bah2 .bh-quote-b figcaption { color: var(--bh-ink-2); }

/* FAQ */
.bah2 .bh-faq { margin-top: 28px; display: grid; gap: 10px; max-width: 820px; }
.bah2 .bh-faq details { background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: 18px; box-shadow: var(--bh-shadow); }
.bah2 .bh-faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 14px; align-items: center; border-radius: 18px; }
.bah2 .bh-faq summary::-webkit-details-marker { display: none; }
.bah2 .bh-faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 99px; background: var(--bh-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 12l5 5 5-5' fill='none' stroke='%23e0563a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/28px no-repeat; }
.bah2 .bh-faq details[open] summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .bah2 .bh-faq summary::after { transition: transform .2s; } }
.bah2 .bh-faq .bh-ans { padding: 0 20px 18px; color: var(--bh-ink-2); font-size: 16px; }
.bah2 .bh-faq .bh-ans p + p { margin-top: 8px; }

/* Final CTA */
.bah2 .bh-final { background: var(--bh-hero); color: #fff; position: relative; overflow: hidden; }
.bah2 .bh-final::before { content: ""; position: absolute; left: -10%; top: -50%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent); pointer-events: none; }
.bah2 .bh-final .bh-wrap { position: relative; padding-top: 64px; padding-bottom: 68px; text-align: center; }
.bah2 .bh-final h2 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; max-width: 18ch; margin: 0 auto; }
.bah2 .bh-final p { margin: 14px auto 0; max-width: 46ch; font-size: 18px; opacity: .95; }
.bah2 .bh-final .bh-hero-cta { justify-content: center; }
.bah2 .bh-final small { display: block; margin-top: 14px; font-size: 14px; opacity: .85; }
.bah2 .bh-final small a { color: #fff; text-decoration: underline !important; text-underline-offset: 3px; } /* common.css: a { text-decoration: none !important } */

/* Sticky call to action, phone only. Shown by the script once the hero's
   buttons have scrolled away, hidden again as soon as the final band comes
   into view and for everything below it, so it never sits over the end of the
   page or the site footer. Without JavaScript it is not shown at all: the
   hero, the mid-page box and the final band carry the same button. Below the
   site header (999) and its slide-in menus, above the page. */
.bah2 .bh-bar { display: none; }
@media (max-width: 719px) {
  .bah2.bh-js .bh-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bh-bar-bg); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--bh-line); box-shadow: 0 -8px 24px rgba(40, 20, 80, .10); transform: translateY(110%); visibility: hidden; }
  .bah2.bh-js .bh-bar.bh-show { transform: none; visibility: visible; }
  .bah2 .bh-bar-txt { min-width: 0; flex: 1; font-size: 13px; line-height: 1.3; color: var(--bh-ink-3); }
  .bah2 .bh-bar-txt b { display: block; font-size: 15px; color: var(--bh-ink); }
  .bah2 .bh-bar .bh-btn { flex: none; min-height: 50px; padding: 0 20px; font-size: 16px; }
}
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  .bah2.bh-js .bh-bar { transition: transform .25s ease, visibility .25s; }
}
@media (max-width: 380px) {
  .bah2 .bh-bar-txt { font-size: 12px; }
  .bah2 .bh-bar .bh-btn { padding: 0 16px; }
}

/* A help bubble in the bottom corner (the site's assistant is not mounted on
   this page on a phone today, the GTM-injected Chatbase one may be) rises
   above the bar while the bar is up. */
@media (max-width: 719px) {
  html.bh-bar-up .hc-ask-floating:not(.hc-open),
  html.bh-bar-up #chatbase-bubble-button { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; transition: bottom .25s ease; }
}