/* ==========================================================================
   FinancialAIvisor Early Black Friday page (/blackfriday/), 2026-10-16.
   Built on the structure of leadsystemsgo.com/blackfriday/, rebuilt for advisors.
   Page-scoped: every rule starts with .bf-, .gx-, .tb- or body.bf-page, so no
   other page that loads styles.css is affected. The countdown gating rule lives
   inline in the page <head>, so it holds even if this file fails.
   ========================================================================== */

body.bf-page {
  --bf-ink: #090E1A;
  --bf-ink-2: #0E1830;
  --bf-ink-line: #1F2B45;
  --bf-paper: #FFFFFF;
  --bf-mist: #F4F6FA;
  --bf-rule: #E2E8F0;
  --bf-text: #0F172A;
  --bf-text-2: #475569;
  --bf-on-ink: #C7D2E0;
  --bf-on-ink-2: #8292AA;
  --bf-gold: #C9A84C;
  --bf-gold-hi: #DDBF63;
  --bf-gold-ink: #7A5B0B;
  --bf-gold-wash: #FBF5E4;
  --bf-blue: #2563EB;
  --bf-blue-light: #93C5FD;
  --bf-blue-wash: #DBEAFE;
  --bf-blue-ink: #1D4ED8;
  --bf-blue-hi: #3B82F6;
  --bf-blue-lt: #60A5FA; /* accent text on the navy */
  --bf-blue-tint: #EAF1FF;
  --bf-green: #22C55E;
  --bf-green-fill: #16A34A;
  --bf-green-ink: #15803D;
  --bf-red: #DC2626;
  --bf-amber-bg: #FEF3C7;
  --bf-amber-line: #FCD34D;
  --bf-amber-ink: #92400E;
  --bf-head: 84px;
  --yes-bg: var(--bf-green-fill);
  --yes-mark: #FFFFFF;
  background: var(--bf-ink);
}
/* the shared stylesheet hangs a laptop picture on #how-it-works; this page's #how-it-works is a different section */
.bf-page #how-it-works::after { content: none; }

.bf-page .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; }
.bf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bf-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; background: #fff; color: var(--bf-ink); font-weight: 600; border-radius: 8px; }
.bf-skip:focus { top: 12px; }
.bf-page main :focus-visible { outline: 3px solid var(--bf-blue); outline-offset: 3px; border-radius: 4px; }


.bf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .bf-wrap { padding: 0 16px; } }

/* ---------- type ---------- */
.bf-page p { margin: 0; }
.bf-h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.bf-h4 { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; line-height: 1.25; margin: 0 0 14px; letter-spacing: -0.01em; }
.bf-h5 { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; line-height: 1.3; margin: 28px 0 10px; color: var(--bf-text-2); letter-spacing: 0; }
.bf-h5:first-child { margin-top: 0; }
.bf-head { max-width: 780px; margin-bottom: 40px; }
.bf-lede { margin: 16px 0 0 !important; font-size: 1.125rem; line-height: 1.6; color: var(--bf-text-2); max-width: 64ch; }
.bf-head--dark .bf-lede { color: var(--bf-on-ink-2); }

/* ---------- icons and buttons ---------- */
.bf-i { width: 38px; height: 38px; display: inline-block; vertical-align: middle; flex: none; }
.bf-i--sm { width: 20px; height: 20px; }
.bf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 28px; border-radius: 12px; font: 600 1.1rem/1.2 var(--font-heading); text-decoration: none; text-align: center; transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.bf-btn:hover { transform: translateY(-2px); }
.bf-btn--buy { background: linear-gradient(180deg, var(--bf-blue-hi), var(--bf-blue)); color: #fff; box-shadow: 0 12px 32px -8px rgba(37, 99, 235, 0.55); }
.bf-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
.bf-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.bf-btn--ink { background: var(--bf-ink); color: #fff; }
.bf-btn--line { color: var(--bf-ink); box-shadow: inset 0 0 0 2px var(--bf-ink); background: transparent; border: 0; cursor: pointer; }
.bf-btn--xl { min-height: 72px; padding: 20px 46px; font-size: 1.35rem; }
/* a slot waiting for Ivan's link: looks final, does nothing, marked for review */
@media (prefers-reduced-motion: reduce) { .bf-btn, .bf-btn:hover { transition: none; transform: none; } }

/* ==========================================================================
   HERO: a white price tag over a wall of booked reviews
   ========================================================================== */
.bf-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bf-ink); color: #fff; padding: calc(var(--bf-head) + 64px) 0 104px; }
.bf-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-rows: repeat(5, auto) 1fr;
  grid-template-areas: "sale tag" "h1 tag" "sub tag" "facts tag" "ctas tag" ". tag";
  column-gap: 72px;
  align-items: start;
}
.bf-sale { grid-area: sale; justify-self: start; position: relative; margin: 0 0 22px !important; padding: 7px 16px 7px 26px; background: var(--bf-blue); color: #fff; font: 700 0.95rem/1.2 var(--font-heading); clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
.bf-sale::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; }
.bf-hero__h1 { grid-area: h1; margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.4rem, 1.4rem + 2.8vw, 3.7rem); line-height: 1.02; letter-spacing: -0.04em; color: #fff; text-wrap: balance; text-shadow: 0 2px 22px rgba(9, 14, 26, 0.6); }
.bf-hero__h1 .bf-h1-l1, .bf-hero__h1 .bf-h1-l2 { display: block; }
.bf-hero__h1 .bf-h1-l2 { margin-top: 0.4em; font-size: 0.5em; line-height: 1.12; letter-spacing: -0.02em; color: var(--bf-blue-lt); }
.bf-hero__sub { grid-area: sub; margin: 28px 0 0 !important; max-width: 56ch; font-size: 1.15rem; line-height: 1.6; color: var(--bf-on-ink); }
.bf-facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; padding: 0; list-style: none; }
.bf-facts li { display: flex; align-items: center; gap: 8px; font: 500 1rem/1.3 var(--font-body); color: #fff; }
.bf-hero .bf-i { --yes-bg: var(--bf-green); --yes-mark: var(--bf-ink); }
.bf-ctas { grid-area: ctas; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* the tag */
.bf-tag { grid-area: tag; position: relative; margin-top: 6px; transform: rotate(-2.2deg); transform-origin: 50% 0; filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.55)); }
.bf-tag::before { content: ""; position: absolute; left: calc(50% - 1px); top: -54px; width: 2px; height: 92px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0.55)); z-index: 2; }
.bf-tag__card { position: relative; background: var(--bf-paper); color: var(--bf-ink); padding: 92px 40px 34px; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border-radius: 22px; }
.bf-tag__card::before { content: ""; position: absolute; left: 50%; top: 30px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--bf-ink); box-shadow: 0 0 0 4px var(--bf-rule); }
.bf-tag__what { font: 600 1rem/1.3 var(--font-body); color: var(--bf-text-2); }
.bf-tag__price { margin: 22px 0 0 !important; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bf-was { position: relative; display: inline-block; font: 600 clamp(2.25rem, 1.6rem + 2vw, 3.25rem)/1 var(--font-heading); letter-spacing: -0.03em; color: #8B93A4; padding: 0 6px; }
.bf-was::after { content: ""; position: absolute; left: -5%; right: -5%; top: 50%; height: 10px; margin-top: -5px; border-radius: 8px; background: var(--bf-blue); transform: rotate(-11deg); transform-origin: left center; animation: bf-slash 520ms 350ms cubic-bezier(0.65, 0, 0.25, 1) both; }
@keyframes bf-slash { from { transform: rotate(-11deg) scaleX(0); } to { transform: rotate(-11deg) scaleX(1); } }
.bf-now { display: inline-flex; align-items: baseline; font: 700 clamp(5rem, 3.4rem + 5vw, 7.5rem)/0.95 var(--font-heading); letter-spacing: -0.055em; color: var(--bf-ink); animation: bf-stamp 420ms 820ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.bf-now small { font: 600 1.35rem/1 var(--font-heading); letter-spacing: -0.01em; margin-left: 6px; color: var(--bf-text-2); }
@keyframes bf-stamp { from { opacity: 0; transform: scale(1.35) rotate(-4deg); } to { opacity: 1; transform: none; } }
.bf-tag__plus { margin: 10px 0 0 !important; font: 600 1.1rem/1.3 var(--font-body); color: var(--bf-ink); }
.bf-tag__fees { margin: 4px 0 0 !important; font: 500 0.9rem/1.3 var(--font-body); color: var(--bf-text-2); }
.bf-tag__note { margin: 16px auto 0 !important; padding-top: 16px; border-top: 1.5px dashed #CBD5E1; max-width: 40ch; font-size: 0.92rem; line-height: 1.5; color: var(--bf-text-2); }
.bf-tag__ends { margin: 12px 0 0 !important; font: 600 0.92rem/1.4 var(--font-body); color: var(--bf-ink); }

/* countdown */
.bf-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.bf-count > div { background: var(--bf-ink); color: #fff; border-radius: 10px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; }
.bf-count b { font: 700 2rem/1 var(--font-heading); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bf-count span { margin-top: 4px; font: 500 0.78rem/1.2 var(--font-body); color: var(--bf-on-ink-2); }
.bf-count--band { max-width: 420px; margin: 22px 0; }
@media (prefers-reduced-motion: reduce) { .bf-was::after, .bf-now { animation: none; } }

/* the wall: the Go Grow film still (the advisor's office at night), under a shade that keeps the headline readable */
.bf-wall { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 90% at 85% 20%, #13244A 0%, var(--bf-ink) 60%); }
.bf-wall__poster, .bf-wall__poster img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bf-wall__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 14, 26, 0.95) 0%, rgba(9, 14, 26, 0.84) 38%, rgba(9, 14, 26, 0.4) 64%, rgba(9, 14, 26, 0.25) 100%),
    linear-gradient(180deg, rgba(9, 14, 26, 0.85) 0%, rgba(9, 14, 26, 0) 22%, rgba(9, 14, 26, 0) 74%, rgba(9, 14, 26, 1) 100%); }
.bf-wall__note { position: absolute; left: 32px; bottom: 30px; font: 500 0.78rem/1.3 var(--font-body); color: rgba(255, 255, 255, 0.6); }

@media (max-width: 959px) {
  .bf-hero { padding: calc(var(--bf-head) + 36px) 0 80px; }
  .bf-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "sale" "h1" "tag" "ctas" "sub" "facts"; }
  .bf-tag { margin: 64px auto 0; width: 100%; max-width: 480px; transform: rotate(-1.2deg); }
  .bf-wall__shade { background: linear-gradient(180deg, rgba(9, 14, 26, 0.9) 0%, rgba(9, 14, 26, 0.84) 30%, rgba(9, 14, 26, 0.88) 55%, rgba(9, 14, 26, 1) 80%); }
  .bf-wall__note { left: 16px; right: 16px; bottom: 24px; }
}
@media (max-width: 600px) {
  .bf-tag__card { padding: 76px 20px 24px; border-radius: 18px; }
  .bf-tag__card::before { top: 22px; }
  .bf-tag::before { top: -46px; height: 76px; }
  .bf-count b { font-size: 1.65rem; }
  .bf-hero__sub { font-size: 1.05rem; }
  .bf-ctas .bf-btn { width: 100%; }
}

/* ==========================================================================
   OUTCOMES: a band per value, read top to bottom
   ========================================================================== */
.bf-outcomes { background: var(--bf-mist); color: var(--bf-text); padding: 104px 0 72px; }
.bf-outcomes .bf-h2 { color: var(--bf-ink); }
.bf-outcomes .bf-head { margin-bottom: 16px; }
.bf-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 72px; align-items: center; padding: 64px 0; border-top: 1px solid var(--bf-rule); }
.bf-head + .bf-band { border-top: 0; padding-top: 40px; }
.bf-band--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.bf-band--flip .bf-band__copy { order: 2; }
.bf-band__h { margin: 0 0 14px; font: 700 clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem)/1.12 var(--font-heading); letter-spacing: -0.025em; color: var(--bf-ink); text-wrap: balance; }
.bf-band__copy > p { margin: 0 0 16px !important; max-width: 54ch; font-size: 1.08rem; line-height: 1.6; color: var(--bf-text-2); }
.bf-outlist { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 9px; }
.bf-outlist li { position: relative; padding-left: 30px; font: 600 1.02rem/1.4 var(--font-body); color: var(--bf-ink); }
.bf-outlist li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 20px; height: 20px; border-radius: 50%; background: var(--bf-green-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.bf-band__copy > .bf-band__why { padding-top: 12px; border-top: 1px solid var(--bf-rule); font-size: 0.92rem; color: var(--bf-text-2); }
.bf-band__why b { color: var(--bf-ink); }
.bf-band__media { position: relative; min-width: 0; }
.bf-week { max-width: 600px; margin-left: auto; margin-right: 0; }
.bf-week .fh-week__note { color: var(--bf-text-2); }
@media (max-width: 959px) {
  .bf-band, .bf-band--flip { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px 0; }
  .bf-band--flip .bf-band__copy { order: 0; }
  .bf-week { margin: 0; }
}
@media (max-width: 600px) {
  .bf-outcomes { padding: 72px 0 48px; }
  .bf-band__copy > p { font-size: 1rem; }
  .bf-week .fh-week__toast { left: 10px; }
}

/* ==========================================================================
   HOW IT WORKS: the old way (muted, a big X) next to what to do instead
   ========================================================================== */
.bf-how { background: var(--bf-paper); color: var(--bf-text); padding: 104px 0 96px; }
.bf-how .bf-h2 { color: var(--bf-ink); }
.bf-how__part { padding: 56px 0 8px; border-top: 1px solid var(--bf-rule); }
.bf-how .bf-head + .bf-how__part { padding-top: 28px; border-top: 0; }
.bf-how__part + .bf-how__part { margin-top: 48px; }
.bf-how__sys { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; font: 700 1rem/1 var(--font-heading); color: var(--bf-ink); }
.bf-how__sys::before { content: ""; width: 30px; height: 5px; border-radius: 3px; background: var(--bf-blue); }
.bf-how__part--close .bf-how__sys::before { background: var(--bf-blue); }
.bf-how__h { margin: 0; max-width: 32ch; font: 700 clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem)/1.12 var(--font-heading); letter-spacing: -0.02em; color: var(--bf-ink); text-wrap: balance; }
.bf-how__sub { margin: 14px 0 0 !important; font: 500 1.1rem/1.45 var(--font-body); color: var(--bf-text-2); }
.bf-how__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 44px; margin-top: 34px; align-items: start; }
.bf-how__side { min-width: 0; }
.bf-how__lab { display: inline-block; padding: 7px 12px; border-radius: 999px; font: 700 0.85rem/1.1 var(--font-heading); }
.bf-how__side--old .bf-how__lab { background: #F1F5F9; color: #475569; }
.bf-how__side--new .bf-how__lab { background: var(--bf-blue-tint); color: var(--bf-blue-ink); }
.bf-how__say { margin: 12px 0 18px !important; max-width: 48ch; font-size: 1rem; line-height: 1.55; color: var(--bf-text-2); }
.bf-how__side--new .bf-how__say { color: var(--bf-text); }
.bf-how__fig { position: relative; margin: 0; }
.bf-how__side--old .gx { background: #F8FAFC; box-shadow: none; filter: grayscale(0.4); }
.bf-how__x { position: absolute; top: 7%; left: 7%; width: 86%; height: 86%; pointer-events: none; overflow: visible; }
.bf-how__x path { fill: none; stroke: var(--bf-red); stroke-opacity: 0.75; stroke-width: 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bf-how__why { margin: 26px 0 0 !important; padding-top: 14px; max-width: 72ch; border-top: 1px solid var(--bf-rule); font-size: 0.95rem; line-height: 1.55; color: var(--bf-text-2); }
.bf-how__why b { color: var(--bf-ink); }
@media (max-width: 859px) {
  .bf-how { padding: 72px 0 64px; }
  .bf-how__pair { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   FOUR SYSTEMS
   ========================================================================== */
.bf-systems { background: var(--bf-ink-2); color: #fff; padding: 104px 0 88px; }
.bf-systems .bf-h2 { color: #fff; }
.bf-systems__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.bf-sys { padding: 0 26px 8px; border-left: 1px solid var(--bf-ink-line); }
.bf-sys:first-child { padding-left: 0; border-left: none; }
.bf-sys:last-child { padding-right: 0; }
.bf-sys__h { position: relative; margin: 0; padding-top: 18px; font: 700 1.8rem/1.1 var(--font-heading); letter-spacing: -0.03em; color: #fff; }
.bf-sys__h::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 5px; border-radius: 3px; background: var(--bf-blue-hi); }
.bf-sys--close .bf-sys__h::before { background: var(--bf-blue); }
.bf-sys__result { margin: 12px 0 18px !important; font: 700 1.2rem/1.25 var(--font-heading); letter-spacing: -0.01em; color: #fff; }
.bf-list { margin: 0; padding: 0; list-style: none; }
.bf-list li { position: relative; padding: 0 0 10px 28px; font-size: 1rem; line-height: 1.5; color: var(--bf-text); }
.bf-list li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 17px; height: 17px; border-radius: 50%; background: var(--bf-green-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.bf-list--dark li { color: var(--bf-on-ink); }
.bf-list--dark li::before { background-color: var(--bf-green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='%23090E1A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bf-terms-strip { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--bf-ink-line); list-style: none; }
.bf-terms-strip li { font: 500 1.02rem/1.4 var(--font-body); color: var(--bf-on-ink); }
.bf-terms-strip b { display: block; font: 600 0.85rem/1.3 var(--font-body); color: var(--bf-blue-lt); margin-bottom: 2px; }
@media (max-width: 1100px) {
  .bf-systems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .bf-sys:nth-child(3) { padding-left: 0; border-left: none; }
  .bf-sys:nth-child(2) { padding-right: 0; }
}
@media (max-width: 699px) {
  .bf-systems { padding: 72px 0 64px; }
  .bf-systems__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .bf-sys, .bf-sys:nth-child(n) { padding: 28px 0 8px; border-left: none; border-top: 1px solid var(--bf-ink-line); }
  .bf-sys:first-child { border-top: none; padding-top: 0; }
}

/* ==========================================================================
   THE COMPARISON: one card per company, a swipe row on phones, and a zoomable full table
   ========================================================================== */
.bf-compare { background: var(--bf-paper); color: var(--bf-text); padding: 104px 0 96px; }
.bf-compare .bf-h2 { color: var(--bf-ink); }
.bf-compare .bf-wrap { --bf-gutter: 32px; }
@media (max-width: 600px) { .bf-compare .bf-wrap { --bf-gutter: 16px; } }
.tb-ic { display: block; width: 22px; height: 22px; flex: none; }
.tb-ic--yes circle { fill: var(--bf-green-fill); }
.tb-ic--yes path { fill: none; stroke: #fff; stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
.tb-ic--no path { fill: none; stroke: var(--bf-red); stroke-width: 6; stroke-linecap: round; }
.tb-card--us .tb-ic--yes circle, .tb-us .tb-ic--yes circle { fill: var(--bf-green); }
.tb-card--us .tb-ic--yes path, .tb-us .tb-ic--yes path { stroke: var(--bf-ink); }
.tb-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 22px; padding: 0; list-style: none; }
.tb-legend li { display: flex; align-items: center; gap: 8px; font: 500 0.95rem/1.3 var(--font-body); color: var(--bf-text-2); }
.tb-legend em { font-style: normal; font-weight: 700; color: var(--bf-amber-ink); }
/* position: relative keeps the cards' .sr-only labels inside the swipe row's scroll box */
.tb-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tb-track:focus-visible { outline: 3px solid var(--bf-blue); outline-offset: 4px; border-radius: 22px; }
.tb-card { display: flex; flex-direction: column; min-width: 0; background: var(--bf-paper); border: 1px solid var(--bf-rule); border-radius: 20px; overflow: hidden; }
.tb-card header { padding: 20px 20px 14px; border-bottom: 1px solid var(--bf-rule); }
.tb-flag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--bf-blue); color: #fff; font: 700 0.75rem/1.3 var(--font-body); }
.tb-card h3 { margin: 0; min-height: 2.4em; font: 700 1.25rem/1.2 var(--font-heading); letter-spacing: -0.015em; color: var(--bf-ink); }
.tb-fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 8px 0 12px !important; }
.tb-num { font: 700 1.85rem/1.05 var(--font-heading); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--bf-ink); }
.tb-num--text { font-size: 1.25rem; }
.tb-was { font: 600 1rem/1 var(--font-heading); color: var(--bf-on-ink-2); text-decoration: line-through; text-decoration-color: var(--bf-blue-lt); text-decoration-thickness: 2px; }
.tb-per { font: 500 0.82rem/1.2 var(--font-body); color: var(--bf-text-2); }
.tb-sub { display: block; flex-basis: 100%; font: 500 0.8rem/1.3 var(--font-body); color: var(--bf-text-2); }
.tb-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 11px; border-radius: 10px; background: var(--bf-mist); font: 500 0.78rem/1.35 var(--font-body); color: var(--bf-text-2); }
.tb-strip span { font-weight: 700; color: var(--bf-ink); }
.tb-strip a { color: var(--bf-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tb-strip em { flex-basis: 100%; font-style: normal; }
.tb-card ul { flex: 1; margin: 0; padding: 8px 20px 6px; list-style: none; }
.tb-card li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 5px 0; border-top: 1px solid var(--bf-rule); font: 500 0.92rem/1.3 var(--font-body); color: var(--bf-ink); }
.tb-card li:first-child { border-top: none; }
.tb-ico { width: 22px; flex: none; }
.tb-card li.tb-no { color: #8A94A6; }
.tb-card li em { font-style: normal; font-weight: 600; color: var(--bf-amber-ink); }
.tb-card li.tb-text em { color: var(--bf-text-2); }
.tb-what em { display: block; }
.tb-star { margin-left: 2px; font: 700 0.8rem/1 var(--font-body); color: var(--bf-blue-ink); }
.tb-card footer { padding: 16px 20px 20px; border-top: 2px solid var(--bf-ink); background: var(--bf-mist); }
.tb-card footer > span:first-child { display: block; font: 500 0.82rem/1.3 var(--font-body); color: var(--bf-text-2); }
.tb-card footer b { display: block; font: 700 1.6rem/1.1 var(--font-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--bf-ink); }
.tb-keep { display: block; margin-top: 6px; font: 700 0.95rem/1.3 var(--font-body); color: var(--bf-green-ink); }
.tb-card footer small { display: block; margin-top: 4px; font: 400 0.75rem/1.35 var(--font-body); color: var(--bf-text-2); }
.tb-card--us { background: var(--bf-ink); border-color: var(--bf-ink); }
.tb-card--us header, .tb-card--us footer { border-color: var(--bf-ink-line); }
.tb-card--us h3, .tb-card--us li, .tb-card--us .tb-num, .tb-card--us footer b { color: #fff; }
.tb-card--us li { border-color: var(--bf-ink-line); }
.tb-card--us .tb-per, .tb-card--us footer > span:first-child { color: var(--bf-on-ink-2); }
.tb-card--us footer { background: var(--bf-ink-2); }
.tb-card--us .tb-strip { background: var(--bf-ink-2); color: var(--bf-on-ink-2); }
.tb-card--us .tb-strip span { color: var(--bf-blue-lt); }
.tb-card--us li em { color: var(--bf-on-ink); }
.tb-nav { display: none; }
.tb-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-items: start; margin-top: 18px; }
.tb-notes, .tb-disc { font: 400 0.8rem/1.5 var(--font-body); color: var(--bf-text-2); }
.tb-notes b { color: var(--bf-blue-ink); }
.tb-disc b { color: var(--bf-ink); }
.tb-open { grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 2px solid var(--bf-ink); border-radius: 999px; background: var(--bf-paper); color: var(--bf-ink); font: 700 0.95rem/1 var(--font-body); white-space: nowrap; cursor: zoom-in; }
.tb-open:hover { background: var(--bf-ink); color: #fff; }
.tb-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 1100px) {
  .tb-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 78%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--bf-gutter, 16px); padding: 4px var(--bf-gutter, 16px) 12px; margin: 0 calc(-1 * var(--bf-gutter, 16px)); scrollbar-width: thin; }
  .tb-card { scroll-snap-align: start; }
  .tb-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font: 600 0.85rem/1 var(--font-body); color: var(--bf-text-2); }
  .tb-swipe::after { content: "  \2192"; }
  .tb-dots { display: flex; gap: 6px; }
  .tb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #CBD2DC; transition: width 0.2s ease; }
  .tb-dots i.on { width: 20px; border-radius: 4px; background: var(--bf-blue); }
  .tb-foot { grid-template-columns: minmax(0, 1fr); }
  .tb-open { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
}
@media (max-width: 600px) {
  .tb-legend { gap: 8px 18px; }
  .tb-legend li { font-size: 0.88rem; }
  .tb-open { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .tb-dots i { transition: none; } }

/* sources and disclosures */
.bf-fine { margin-top: 28px; padding: 20px 24px; background: var(--bf-mist); border-radius: 14px; }
.bf-fine .bf-h4 { margin-bottom: 6px; font-size: 0.95rem; color: var(--bf-ink); }
.bf-disc { margin-top: 8px !important; font-size: 0.82rem; line-height: 1.55; color: var(--bf-text-2); }
.bf-disc b { color: var(--bf-ink); }
.bf-disc a, .bf-fine ol a { color: var(--bf-blue); font-weight: 600; text-underline-offset: 2px; }
.bf-fine ol { margin: 10px 0 0; padding-left: 1.3em; columns: 2; column-gap: 36px; }
.bf-fine ol li { break-inside: avoid; margin: 0 0 6px; font-size: 0.8rem; line-height: 1.5; color: var(--bf-text-2); }
@media (max-width: 899px) { .bf-fine ol { columns: 1; } }

/* the zoom viewer */
body.tb-lock { overflow: hidden; }
.tb-viewer { position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto 1fr auto; background: #060A13; }
.tb-viewer[hidden] { display: none; }
.tb-v-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; font: 700 1rem/1 var(--font-heading); }
.tb-v-ctl { display: flex; align-items: center; gap: 6px; }
.tb-v-ctl button { min-width: 44px; height: 44px; border-radius: 12px; border: 1px solid #2B3754; background: var(--bf-ink-2); color: #fff; font: 700 1.3rem/1 var(--font-heading); cursor: pointer; }
.tb-v-ctl .tb-v-fit { padding: 0 12px; font-size: 0.9rem; }
.tb-v-ctl .tb-v-close { background: var(--bf-blue); border-color: var(--bf-blue); color: #fff; font-size: 1.6rem; }
.tb-v-pct { min-width: 54px; text-align: center; font: 600 0.9rem/1 var(--font-body); color: var(--bf-on-ink); }
.tb-v-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.tb-v-stage:active { cursor: grabbing; }
.tb-v-doc { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.tb-v-tip { padding: 10px 16px 14px; text-align: center; font: 500 0.8rem/1.3 var(--font-body); color: var(--bf-on-ink-2); }
@media (max-width: 480px) { .tb-v-bar > span { display: none; } .tb-v-ctl { width: 100%; justify-content: space-between; } }
.tb-doc { width: 1120px; padding: 32px 36px 28px; border-radius: 18px; background: var(--bf-paper); color: var(--bf-text); }
.tb-full { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 400 0.98rem/1.4 var(--font-body); }
.tb-full thead th { padding: 14px 10px; text-align: center; vertical-align: bottom; border-bottom: 2px solid var(--bf-ink); font: 700 1.1rem/1.2 var(--font-heading); color: var(--bf-ink); }
.tb-full thead th small { display: block; margin-top: 4px; font: 500 0.8rem/1.3 var(--font-body); color: var(--bf-text-2); }
.tb-full thead th.tb-us { border-radius: 16px 16px 0 0; background: var(--bf-ink); color: #fff; }
.tb-full thead td { width: 28%; border-bottom: 2px solid var(--bf-ink); }
.tb-full .tb-flag { display: block; width: max-content; margin: 0 auto 8px; }
.tb-full tbody th[scope="row"] { padding: 11px 16px 11px 0; text-align: left; border-top: 1px solid var(--bf-rule); font: 600 0.98rem/1.3 var(--font-body); color: var(--bf-ink); }
.tb-full tbody td { padding: 9px 8px; text-align: center; border-top: 1px solid var(--bf-rule); }
.tb-full tbody td.tb-us { background: var(--bf-ink); color: #fff; border-top-color: var(--bf-ink-line); }
.tb-full tbody td .tb-ic { margin: 0 auto; width: 26px; height: 26px; }
.tb-full tbody tr.tb-grp th { padding: 22px 0 6px; text-align: left; font: 700 0.9rem/1.3 var(--font-heading); color: var(--bf-blue-ink); }
.tb-full tbody tr:last-child td.tb-us { border-radius: 0 0 16px 16px; }
.tb-full .tb-num { display: block; font-size: 1.3rem; }
.tb-full .tb-us .tb-num { color: #fff; }
.tb-full .tb-sub { margin-top: 3px; }
.tb-full .tb-us .tb-sub { color: var(--bf-on-ink-2); }
.tb-full .tb-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--bf-amber-bg); color: var(--bf-amber-ink); font: 700 0.78rem/1.4 var(--font-body); }
.tb-full .tb-neutral { display: inline-block; font: 600 0.85rem/1.3 var(--font-body); color: var(--bf-text-2); }
.tb-full .tb-cellnote { display: block; margin-top: 4px; font: 500 0.74rem/1.3 var(--font-body); color: var(--bf-blue-ink); }
.tb-docsrc { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bf-rule); display: grid; gap: 6px; }
.tb-srcplain { margin: 6px 0 0; padding-left: 1.1em; columns: 2; column-gap: 32px; font: 400 0.88rem/1.6 var(--font-body); }
.tb-srcplain a { color: var(--bf-ink); font-weight: 600; text-underline-offset: 2px; }

/* ==========================================================================
   ONE AT A TIME
   ========================================================================== */
.bf-vs-wrap { background: var(--bf-mist); color: var(--bf-text); padding: 104px 0 72px; }
.bf-vs-wrap .bf-h2 { color: var(--bf-ink); }
.bf-vs { padding: 44px 0 48px; border-top: 3px solid var(--bf-ink); }
.bf-vs__h { margin: 0 0 30px; font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1.1 var(--font-heading); letter-spacing: -0.03em; color: var(--bf-ink); }
.bf-vs__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.bf-quote { margin: 0; padding: 0 0 0 18px; border-left: 4px solid var(--bf-ink); font: 600 1.15rem/1.45 var(--font-heading); color: var(--bf-ink); letter-spacing: -0.01em; }
.bf-big { font-size: 1.1rem; line-height: 1.55; color: var(--bf-ink); }
.bf-src { margin: 10px 0 0 !important; font-size: 0.88rem; line-height: 1.5; color: var(--bf-text-2); }
.bf-src a { color: var(--bf-blue); font-weight: 600; text-underline-offset: 2px; }
.bf-note { margin: 12px 0 0 !important; font-size: 0.93rem; line-height: 1.5; color: var(--bf-text-2); }
.bf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bf-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #FCA5A5; color: #991B1B; font: 600 0.9rem/1.2 var(--font-body); }
.bf-chips li::before { content: ""; width: 12px; height: 12px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2L2 10' stroke='%23DC2626' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.bf-vs__money { background: var(--bf-ink); color: #fff; border-radius: 18px; padding: 28px 28px 30px; }
.bf-vs__money .bf-h5 { color: var(--bf-on-ink-2); margin-top: 0; }
.bf-vs__money > p { font-size: 1rem; line-height: 1.55; color: var(--bf-on-ink); }
.bf-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "track val"; align-items: center; column-gap: 14px; margin-top: 18px; }
.bf-bar__name { grid-area: name; font: 500 0.92rem/1.3 var(--font-body); color: var(--bf-on-ink); margin-bottom: 6px; }
.bf-bar__track { grid-area: track; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bf-bar__track i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: #94A3B8; }
.bf-bar b { grid-area: val; font: 700 1.3rem/1 var(--font-heading); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; min-width: 4.6em; text-align: right; }
.bf-bar--us .bf-bar__track i { background: var(--bf-blue-hi); }
.bf-bar--us .bf-bar__name { color: #fff; font-weight: 600; }
.bf-bar--est .bf-bar__track i { background: repeating-linear-gradient(135deg, #94A3B8 0 6px, #64748B 6px 12px); }
.bf-keep { margin: 26px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--bf-ink-line); font: 500 1rem/1.4 var(--font-body); color: var(--bf-on-ink); }
.bf-keep b { display: block; font: 700 clamp(2.2rem, 1.7rem + 2vw, 3rem)/1 var(--font-heading); letter-spacing: -0.04em; color: var(--bf-green); margin-bottom: 6px; }
.bf-gain { margin: 28px 0 0 !important; padding: 20px 24px; background: #fff; border-radius: 16px; border-left: 5px solid var(--bf-green-fill); font-size: 1.05rem; line-height: 1.55; color: var(--bf-text); }
.bf-gain__k { display: block; margin-bottom: 4px; font: 700 0.9rem/1.3 var(--font-heading); color: var(--bf-green-ink); }
.bf-gain b { color: var(--bf-ink); }
.bf-disc--vs { font-size: 0.8rem; }
.bf-buyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 24px; margin-top: 48px; padding: 24px 28px 34px; background: #fff; border-radius: 18px; box-shadow: 0 24px 48px -32px rgba(15, 23, 42, 0.4); }
.bf-buyrow p { flex: 1 1 280px; font-size: 0.98rem; line-height: 1.55; color: var(--bf-text-2); }
.bf-buyrow p b { color: var(--bf-ink); }
@media (max-width: 899px) {
  .bf-vs-wrap { padding: 72px 0 48px; }
  .bf-vs__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bf-vs__money { padding: 22px 18px 24px; }
}
@media (max-width: 767px) {
  .bf-buyrow { padding: 20px 18px 32px; }
  .bf-buyrow .bf-btn { width: 100%; }
}

/* ==========================================================================
   CTA: the one saturated band, checkout first
   ========================================================================== */
.bf-cta { background: var(--bf-blue); color: #fff; padding: 96px 0; }
.bf-cta__grid { display: grid; grid-template-columns: minmax(0, 760px); gap: 40px; }
.bf-cta .bf-h2 { color: #fff; }
.bf-cta__text { margin: 18px 0 0 !important; font-size: 1.12rem; line-height: 1.6; color: #fff; max-width: 52ch; }
.bf-cta .bf-count > div { background: var(--bf-ink); }
.bf-cta__buy { margin-top: 28px; }
.bf-cta__buy .bf-btn--xl { min-width: min(100%, 440px); box-shadow: 0 18px 36px -14px rgba(9, 14, 26, 0.6); }
.bf-cta__note { margin: 34px 0 0 !important; max-width: 46ch; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.bf-cta__alt { padding: 26px 0 0; border-top: 1.5px solid rgba(255, 255, 255, 0.35); }
.bf-cta__alth { margin: 0; font: 600 1.1rem/1.35 var(--font-heading); color: #fff; }
.bf-cta__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; }
.bf-cta__alt .bf-btn { min-height: 46px; padding: 10px 20px; font-size: 1rem; }
.bf-cta__alt .bf-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.35); }
.bf-cta__tel { font: 600 1rem/1.3 var(--font-body); color: #fff; }
.bf-askform { margin-top: 18px; padding: 10px; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(9, 14, 26, 0.45); }
.bf-askform[hidden] { display: none; }
.bf-formslot { min-height: 120px; position: relative; }
.bf-formslot iframe { display: block; width: 100%; border: 0; }
.bf-formslot__wait { padding: 28px 18px; font-size: 0.95rem; color: var(--bf-text-2); }
@media (max-width: 767px) {
  .bf-cta { padding: 72px 0; }
  .bf-btn--xl { min-height: 68px; padding: 18px 24px; font-size: 1.25rem; }
  .bf-cta__buy .bf-btn { width: 100%; }
  .bf-askform { padding: 4px; border-radius: 14px; }
}

/* ==========================================================================
   OFFER TERMS
   ========================================================================== */
.bf-terms { background: var(--bf-paper); color: var(--bf-text-2); padding: 64px 0 72px; border-top: 1px solid var(--bf-rule); }
.bf-terms .bf-h4 { color: var(--bf-ink); }
.bf-terms ul { margin: 0; padding: 0 0 0 1.1em; list-style: disc; max-width: 86ch; }
.bf-terms li { margin: 0 0 8px; font-size: 0.93rem; line-height: 1.55; }

/* the SmartAsset panel: no published price, so words instead of bars */
.bf-pay { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--bf-ink-line); font-size: 0.98rem; line-height: 1.5; color: var(--bf-on-ink); }
.bf-pay:first-of-type { border-top: 0; padding-top: 0; }
.bf-pay b { display: block; margin-bottom: 4px; font: 700 1rem/1.3 var(--font-heading); color: #fff; }
.bf-pay--us b { color: var(--bf-blue-lt); }


/* ==========================================================================
   THE LSG BLACK FRIDAY GRAPHICS, in FinancialAIvisor blue (ported 2026-10-17 from leadsystemsgo.com/blackfriday/bf.css):
   the films, the Hours calendars and bars, and the How it works old way vs instead graphics.
   ========================================================================== */
/* Go Grow film: a cinematic frame in the band; one cut per viewport, poster first */
.bf-film { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #0b0d11; box-shadow: 0 40px 80px -40px rgba(16, 24, 40, 0.75), 0 0 0 1px rgba(16, 24, 40, 0.08); }
.bf-film::before { content: ""; display: block; padding-top: 56.25%; }
.bf-film > picture, .bf-film > picture img, .bf-film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-film > video { opacity: 0; transition: opacity 0.8s ease; }
.bf-film > video.is-playing { opacity: 1; }
.bf-film figcaption { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 5px 9px; border-radius: 6px; background: rgba(12, 13, 17, 0.6); font: 500 0.74rem/1.3 var(--font-body); color: rgba(255, 255, 255, 0.78); backdrop-filter: blur(4px); }
.bf-band__caption { margin: 14px 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--bf-text-2); }
.bf-band__caption b { color: var(--bf-ink); }
.bf-outlist { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 9px; }
.bf-outlist li { position: relative; padding-left: 30px; font: 600 1.02rem/1.4 var(--font-body); color: var(--bf-ink); }
.bf-outlist li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 20px; height: 20px; border-radius: 50%; background: var(--bf-green-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.bf-band__why { margin: 0 0 14px !important; padding-top: 12px; border-top: 1px solid var(--bf-rule); font-size: 0.9rem !important; color: var(--bf-text-2) !important; }
.bf-band__why b { color: var(--bf-ink); }
@media (max-width: 767px) { .bf-film::before { padding-top: 150%; } .bf-film { border-radius: 18px; } }
/* Close film: the owner's calendar sits bottom left on the wide cut and bottom right on the tall cut, so the illustration
   tag takes the other corner. The tall cut shows whole (9:16) on phones: its app screens sit at the top edge. */
.bf-film--916 figcaption { left: auto; right: 14px; }
@media (max-width: 767px) {
  .bf-film--916::before { padding-top: 177.78%; }
  .bf-film--916 figcaption { right: auto; left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bf-film > video { display: none; } }

/* ── Hours graphics: the calendar weeks in the third results band, the bars as Go Close's visual.
   Designed graphics, not video. Warm greys = the chase work, orange = appointments with buyers, ink = the AI,
   green dashes = hours back. The final state is the default; html.hw-js (set in <head> when motion is allowed)
   stages the start, and bf.js plays the one reveal when each graphic comes into view. Each graphic lays out by its own width (container queries). ── */
.hw { margin: 0; --hw-call: #334155; --hw-text: #64748B; --hw-follow: #94A3B8; --hw-qual: #CBD5E1; --hw-ai: #0F172A; --hw-ai-2: #1E293B; --hw-ai-ic: #60A5FA; }
.hw figcaption { margin: 12px 0 0; font: 500 0.78rem/1.4 var(--font-body); color: var(--bf-text-2); }
.hw-ic { display: block; flex: none; width: 14px; height: 14px; }
.hw-av { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.hw-av svg { width: 16px; height: 16px; }
.hw-av--you { background: var(--hw-ai-2); color: #fff; }
.hw-av--ai { background: var(--bf-blue); color: #fff; }

/* ── A: two calendar weeks ─────────────────────────────────────────────────────────────────────────────── */
.hw-cals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hw-cal { --rw: 0px; min-width: 0; padding: 14px 14px 16px; background: var(--bf-paper); border: 1px solid var(--bf-rule); border-radius: 18px; box-shadow: 0 28px 56px -36px rgba(16, 24, 40, 0.45); }
.hw-cal--after { --rw: 92px; }
.hw-cal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 12px; }
.hw-cal__head b { font: 600 0.95rem/1.2 var(--font-heading); color: var(--bf-text); }
.hw-tag { margin-left: auto; padding: 5px 9px; border-radius: 999px; font: 600 0.72rem/1 var(--font-body); white-space: nowrap; }
.hw-tag--bad { background: #FEF3F2; color: #B42318; }
.hw-tag--good { background: #ECFDF3; color: var(--bf-green-ink); }
.hw-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) var(--rw); padding-bottom: 6px; font: 600 0.72rem/1 var(--font-body); color: var(--bf-text-2); text-align: center; }
.hw-days__ai { color: var(--bf-blue-ink); }
.hw-area { position: relative; height: 280px; }
.hw-area::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: var(--rw); border: 1px solid var(--bf-rule); border-radius: 10px; background-color: #F8FAFC;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(10% - 1px), #E9EEF5 calc(10% - 1px) 10%), repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), #E9EEF5 calc(100% / 6 - 1px) calc(100% / 6)); }
.hw-c, .hw-g { position: absolute; display: grid; place-items: center; border-radius: 5px;
  left: calc((100% - var(--rw)) * var(--d) / 6 + 2px); width: calc((100% - var(--rw)) / 6 - 4px);
  top: calc(var(--s) * 10% + 1px); height: calc(var(--h) * 10% - 2px); }
.hw-c .hw-ic { width: 12px; height: 12px; }
.hw-c--chase { border-radius: 0; clip-path: inset(0 round 5px); }
.hw-c--call { background: var(--hw-call); color: #fff; }
.hw-c--text { background: var(--hw-text); color: #fff; }
.hw-c--follow { background: var(--hw-follow); color: var(--hw-ai); }
.hw-c--qual { background: var(--hw-qual); color: var(--hw-call); }
.hw-c--appt { z-index: 2; background: var(--bf-blue); color: #fff; box-shadow: 0 8px 16px -8px rgba(37, 99, 235, 0.7); }
.hw-c--appt .hw-ic { width: 15px; height: 15px; }
.hw-g { border: 1.5px dashed rgba(18, 183, 106, 0.75); background: rgba(18, 183, 106, 0.07); }
/* the AI's lane: every chase block ends here, grouped by kind, four to a row */
.hw-rail { position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--rw) - 8px); display: flex; justify-content: center; padding-top: 8px; background: var(--hw-ai); border-radius: 10px; }
.hw-rail .hw-av { width: 24px; height: 24px; }
.hw-rail .hw-av svg { width: 14px; height: 14px; }
.hw-rail__done { position: absolute; bottom: 10px; left: 50%; display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--bf-green); color: #fff; }
.hw-rail__done svg { width: 13px; height: 13px; }
.hw-cal--after .hw-c--chase { z-index: 3; left: calc(100% - var(--rw) + 16px + var(--rc) * 18px); top: calc(42px + var(--rr) * 18px); width: 14px; height: 14px; clip-path: inset(0 round 4px); background: var(--hw-ai-2); color: var(--hw-ai-ic); }
.hw-cal--after .hw-c--chase .hw-ic { width: 9px; height: 9px; }
/* the reveal: the after week starts as packed as today, then the chase lifts into the AI's lane */
.hw-js .hw-cal--after .hw-c--chase { transition: left 0.9s cubic-bezier(0.65, 0, 0.25, 1), top 0.9s cubic-bezier(0.65, 0, 0.25, 1), width 0.9s, height 0.9s, clip-path 0.9s, background-color 0.6s, color 0.6s; transition-delay: calc(var(--i) * 30ms); }
.hw-js .hw-cal--after .hw-c--chase .hw-ic { transition: width 0.9s, height 0.9s; transition-delay: inherit; }
.hw-js .hw-g { transition: opacity 0.7s ease 1.5s; }
.hw-js .hw.is-stage .hw-cal--after .hw-c--chase { left: calc((100% - var(--rw)) * var(--d) / 6 + 2px); width: calc((100% - var(--rw)) / 6 - 4px); top: calc(var(--s) * 10% + 1px); height: calc(var(--h) * 10% - 2px); clip-path: inset(0 round 5px); }
.hw-js .hw.is-stage .hw-cal--after .hw-c--chase .hw-ic { width: 12px; height: 12px; }
.hw-js .hw.is-stage .hw-cal--after .hw-c--call { background: var(--hw-call); color: #fff; }
.hw-js .hw.is-stage .hw-cal--after .hw-c--text { background: var(--hw-text); color: #fff; }
.hw-js .hw.is-stage .hw-cal--after .hw-c--follow { background: var(--hw-follow); color: var(--hw-ai); }
.hw-js .hw.is-stage .hw-cal--after .hw-c--qual { background: var(--hw-qual); color: var(--hw-call); }
.hw-js .hw.is-stage .hw-g, .hw-js .hw.is-stage .hw-rail__done { opacity: 0; }
.hw-js .hw-rail__done { transition: opacity 0.5s ease 2.1s; }
/* key */
.hw-key { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 16px 0 0; padding: 0; list-style: none; font: 500 0.8rem/1.2 var(--font-body); color: var(--bf-text-2); }
.hw-key li { display: inline-flex; align-items: center; gap: 7px; }
.hw-key .hw-ic { width: 18px; height: 18px; padding: 3px; border-radius: 4px; }
.hw-key--call { background: var(--hw-call); color: #fff; }
.hw-key--text { background: var(--hw-text); color: #fff; }
.hw-key--follow { background: var(--hw-follow); color: var(--hw-ai); }
.hw-key--qual { background: var(--hw-qual); color: var(--hw-call); }
.hw-key--appt { background: var(--bf-blue); color: #fff; }
.hw-key--phone { display: none; }
.hw-key__back { width: 18px; height: 18px; border: 1.5px dashed rgba(18, 183, 106, 0.85); border-radius: 4px; background: rgba(18, 183, 106, 0.08); }

/* ── B: the hours in one bar ───────────────────────────────────────────────────────────────────────────── */
.hw--bars { padding: 22px 24px 18px; background: var(--bf-paper); border: 1px solid var(--bf-rule); border-radius: 18px; box-shadow: 0 28px 56px -36px rgba(16, 24, 40, 0.45); }
.hw-when { margin: 0 0 10px; font: 600 0.85rem/1 var(--font-heading); color: var(--bf-text-2); }
.hw-when ~ .hw-when { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--bf-rule); }
.hw-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 12px; }
.hw-row + .hw-row { margin-top: 10px; }
.hw-who { display: flex; align-items: center; gap: 8px; height: 60px; font: 600 0.9rem/1 var(--font-heading); color: var(--bf-text); }
.hw-bar { display: flex; gap: 3px; height: 60px; }
.hw-seg { flex: var(--w) 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; }
.hw-seg .hw-ic { width: 16px; height: 16px; }
.hw-seg--call, .hw-seg--text, .hw-seg--follow, .hw-seg--qual { border-radius: 0; clip-path: inset(0 round 8px); }
.hw-seg b { font: 600 0.95rem/1 var(--font-heading); white-space: nowrap; }
.hw-seg--call { background: var(--hw-call); color: #fff; }
.hw-seg--text { background: var(--hw-text); color: #fff; }
.hw-seg--follow { background: var(--hw-follow); color: var(--hw-ai); }
.hw-seg--qual { background: var(--hw-qual); color: var(--hw-call); }
.hw-seg--appt { background: var(--bf-blue); color: #fff; box-shadow: 0 10px 20px -10px rgba(37, 99, 235, 0.75); }
.hw-seg--appt .hw-ic { width: 20px; height: 20px; }
.hw-seg__word { font: 600 0.78rem/1 var(--font-body) !important; }
.hw-seg--back { border: 1.5px dashed rgba(18, 183, 106, 0.8); background: rgba(18, 183, 106, 0.07); color: var(--bf-green-ink); }
.hw-seg--back b { font-size: 1rem; }
.hw-seg--ai { background: var(--hw-ai); color: #fff; }
.hw-seg--ai .hw-ic { color: var(--hw-ai-ic); }
.hw-seg--total { align-items: flex-start; padding-left: 12px; gap: 3px; color: var(--bf-text); }
.hw-seg--total b { font: 700 1.35rem/1 var(--font-heading); }
.hw-seg--total small { font: 500 0.78rem/1 var(--font-body); color: var(--bf-text-2); }
.hw-names { display: flex; gap: 3px; margin-top: 7px; }
.hw-names span { flex: var(--w) 1 0; min-width: 0; font: 500 0.74rem/1.2 var(--font-body); color: var(--bf-text-2); text-align: center; }
.hw--bars figcaption { margin-top: 16px; }
/* the reveal: the four chase segments drop into the AI's bar, then the hours back and the total appear */
.hw-js .hw-seg--ai { transition: transform 0.75s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.5s ease; transition-delay: calc(0.1s + var(--n) * 140ms); }
.hw-js .hw-row--after .hw-seg--back, .hw-js .hw-seg--total { transition: opacity 0.7s ease 0.9s; }
.hw-js .hw.is-stage .hw-seg--ai { transform: translateY(-44px); opacity: 0; }
.hw-js .hw.is-stage .hw-row--after .hw-seg--back, .hw-js .hw.is-stage .hw-seg--total { opacity: 0; }
.hw { container-type: inline-size; }
@container (max-width: 599px) {
  .hw-cals { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 519px) {
  .hw-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hw-who { height: auto; font-size: 0.85rem; }
  .hw-who .hw-av { width: 24px; height: 24px; }
  .hw-who .hw-av svg { width: 14px; height: 14px; }
  .hw-bar { height: 56px; }
  .hw-seg b { font-size: 0.85rem; }
  .hw-seg__word { display: none; }
  .hw-seg--total { padding-left: 8px; }
  .hw-seg--total b { font-size: 1.15rem; }
  .hw-names { display: none; }
  .hw-key--phone { display: flex; margin-top: 12px; }
  .hw-key { gap: 8px 14px; font-size: 0.76rem; }
}
@media (max-width: 599px) { .hw--bars { padding: 18px 16px 16px; } }

/* shared card */
.hx-card { background: #fff; border: 1px solid var(--bf-rule); border-radius: 18px; box-shadow: 0 24px 48px -34px rgba(16, 24, 40, 0.45); }
.hx-zero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #FEF3F2; color: #B42318; font: 600 0.92rem/1.3 var(--font-body); }
.hx-zero b { font: 700 1.7rem/1 var(--font-heading); }

/* Go Grow, the old way: a boosted post */
.hx-post { padding: 16px 16px 18px; }
.hx-post__top { display: flex; align-items: center; gap: 10px; }
.hx-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #CBD5E1; font: 700 0.78rem/1 var(--font-heading); color: #334155; }
.hx-post__top b { display: block; font: 600 0.95rem/1.2 var(--font-heading); color: var(--bf-text); }
.hx-post__top small { font-size: 0.78rem; color: var(--bf-text-2); }
.hx-post__img { display: grid; place-items: center; margin: 12px 0 0; aspect-ratio: 5 / 2; border-radius: 12px; background: #E9EEF5; }
.hx-post__img svg { width: 40%; fill: #B8C2CF; }
.hx-post__boost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #F1F5F9; font-size: 0.9rem; line-height: 1.35; color: var(--bf-text-2); }
.hx-post__boost b { font: 700 1.3rem/1 var(--font-heading); color: #334155; }
.hx-post__stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; font: 600 0.88rem/1 var(--font-body); color: #475569; }
.hx-post__stats span { display: inline-flex; align-items: center; gap: 6px; }
.hx-post__stats svg { width: 16px; height: 16px; color: #94A3B8; }
.hx-post__cmts { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.hx-post__cmts li { display: flex; align-items: flex-start; gap: 8px; }
.hx-post__cmts i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #E2E8F0; font: 700 0.62rem/1 var(--font-heading); font-style: normal; color: #64748B; }
.hx-post__cmts span { padding: 7px 11px; border-radius: 14px; background: #F1F5F9; }
.hx-post__cmts b { display: block; font: 500 0.88rem/1.3 var(--font-body); color: #334155; }
.hx-post__cmts small { font-size: 0.72rem; color: #94A3B8; }

/* Go Grow, what to do instead: the ad goes out to the whole community; the few who answer light up and come back */
.g-stage { position: relative; }
.g-svg { display: block; width: 100%; height: auto; border: 1px solid var(--bf-rule); border-radius: 18px; box-shadow: 0 24px 48px -34px rgba(16, 24, 40, 0.45); }
.g-bg { fill: #F5F7FA; }
.g-streets rect { fill: #E5EAF0; }
.g-rings circle { fill: none; stroke: #2563EB; stroke-opacity: 0.2; stroke-width: 2; stroke-dasharray: 6 8; }
.g-pulse { display: none; }
.g-pulse circle { fill: none; stroke: #2563EB; stroke-width: 3; vector-effect: non-scaling-stroke; }
.g-lot { fill: #E9EEF5; }
.g-bldg { fill: #1E293B; }
.g-glass { fill: #DBEAFE; }
.g-ddoor { fill: #93C5FD; }
.g-stripe { fill: #2563EB; }
.g-roof { fill: #B8C2CF; }
.g-body { fill: #fff; stroke: #CBD5E1; stroke-width: 1.5; }
.g-door { fill: #CBD5E1; }
.g-win { fill: #E2E8F0; }
.g-glow { fill: url(#g-glow); opacity: 0; }
.g-h--ready .g-roof { fill: #2563EB; }
.g-h--ready .g-body { fill: #EAF1FF; stroke: #2563EB; }
.g-h--ready .g-door { fill: #2563EB; }
.g-h--ready .g-glow { opacity: 1; }
.g-ok circle { fill: #12B76A; }
.g-ok path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-line { fill: none; stroke: #2563EB; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.g-ad, .g-lab, .g-booked { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
.g-ad { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px -8px rgba(16, 24, 40, 0.4); font: 600 0.76rem/1 var(--font-body); color: var(--bf-text); }
.g-ad i { padding: 3px 6px; border-radius: 6px; background: var(--bf-blue); font: 700 0.68rem/1 var(--font-heading); font-style: normal; color: #fff; }
.g-lab { padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.9); font: 700 0.74rem/1 var(--font-heading); color: var(--bf-ink); }
.g-booked { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #ECFDF3; box-shadow: 0 6px 16px -8px rgba(6, 118, 71, 0.5); font: 700 0.76rem/1 var(--font-body); color: var(--bf-green-ink); }
.g-booked svg { width: 15px; height: 15px; }
/* the reveal: a wave goes out from the ad over every house; three light up; their lines run back; the visits are booked */
.hw-js .g-map .g-h--ready .g-roof, .hw-js .g-map .g-h--ready .g-body, .hw-js .g-map .g-h--ready .g-door { transition: fill 0.5s ease 2.3s, stroke 0.5s ease 2.3s; }
.hw-js .g-map .g-glow { transition: opacity 0.6s ease 2.3s; }
.hw-js .g-map .g-ok { transition: opacity 0.4s ease 2.6s; }
.hw-js .g-map .g-line { transition: stroke-dashoffset 1s cubic-bezier(0.5, 0, 0.2, 1); transition-delay: calc(2.8s + var(--i) * 0.2s); }
.hw-js .g-map .g-booked { transition: opacity 0.5s ease 4.1s, transform 0.5s ease 4.1s; }
.hw-js .g-map .g-rings { transition: opacity 0.8s ease 1.4s; }
.hw-js .g-map.is-stage .g-h--ready .g-roof { fill: #B8C2CF; }
.hw-js .g-map.is-stage .g-h--ready .g-body { fill: #fff; stroke: #CBD5E1; }
.hw-js .g-map.is-stage .g-h--ready .g-door { fill: #CBD5E1; }
.hw-js .g-map.is-stage .g-glow, .hw-js .g-map.is-stage .g-ok, .hw-js .g-map.is-stage .g-rings { opacity: 0; }
.hw-js .g-map.is-stage .g-line { stroke-dashoffset: 100; }
.hw-js .g-map.is-stage .g-booked { opacity: 0; transform: translate(-50%, -20%); }
.hw-js .g-map:not(.is-stage) .g-pulse { display: block; transform-box: view-box; transform-origin: 101px 196px; animation: g-pulse 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) 0.2s both; }
.hw-js .g-map:not(.is-stage) .g-pulse--2 { animation-delay: 0.75s; }
.hw-js .g-map:not(.is-stage) .g-h .g-body { animation: g-hit 0.9s ease var(--t); }
@keyframes g-pulse { from { transform: scale(0.04); opacity: 0.9; } to { transform: scale(1); opacity: 0; } }
@keyframes g-hit { 0% { fill: #fff; } 35% { fill: #DBEAFE; } 100% { fill: #fff; } }

/* Go Close, the old way: the 9:47 pm timeline */
.hx-tl { padding: 20px 20px 18px; }
.hx-tl__list { margin: 0; padding: 0; list-style: none; }
.hx-tl__list li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 12px; padding: 0 0 14px; font-size: 0.98rem; line-height: 1.5; color: #475569; }
.hx-tl__list time { font: 700 0.98rem/1.5 var(--font-heading); font-variant-numeric: tabular-nums; color: #1E293B; }

/* Go Convert, the old way: a site, a search that may not send anyone, an empty inbox */
.hx-web { display: grid; gap: 12px; }
.hx-browser { overflow: hidden; }
.hx-browser__bar { display: flex; align-items: center; gap: 5px; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--bf-rule); background: #F8FAFC; }
.hx-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; }
.hx-browser__bar span { margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #F1F5F9; font: 500 0.75rem/1.2 var(--font-body); color: #64748B; }
.hx-browser__page { display: grid; gap: 8px; padding: 18px 16px 20px; }
.hx-browser__page b { display: block; width: 55%; height: 14px; border-radius: 4px; background: #CBD5E1; }
.hx-browser__page i { display: block; height: 8px; border-radius: 4px; background: #E2E8F0; }
.hx-browser__page i + i { width: 78%; }
.hx-browser__page span { display: block; width: 92px; height: 26px; margin-top: 4px; border-radius: 8px; background: #E2E8F0; }
.hx-web__row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
.hx-search { padding: 12px 14px 14px; }
.hx-search__q { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--bf-rule); border-radius: 999px; font: 500 0.8rem/1.2 var(--font-body); color: #475569; }
.hx-search__q svg { flex: none; width: 14px; height: 14px; color: #94A3B8; }
.hx-search ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.hx-search li { height: 8px; border-radius: 4px; background: #E2E8F0; }
.hx-search li:nth-child(1) { width: 86%; }
.hx-search li:nth-child(2) { width: 68%; }
.hx-search li:nth-child(3) { width: 78%; }
.hx-search__you { margin: 12px 0 0; font: 600 0.8rem/1.3 var(--font-body); color: #94A3B8; }
.hx-inbox { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 14px; text-align: center; color: #475569; }
.hx-inbox svg { width: 26px; height: 26px; color: #94A3B8; }
.hx-inbox b { font: 700 1.8rem/1.1 var(--font-heading); color: #334155; }
.hx-inbox span { font-size: 0.8rem; line-height: 1.3; }
.hx-inbox small { margin-top: 4px; font-size: 0.72rem; color: #94A3B8; }

/* Go Convert, what to do instead: an AI answer recommends the business, the visitor lands, the site's AI chat books */
.hx-flow { display: grid; gap: 24px; }
.hx-ai { position: relative; max-width: 440px; padding: 14px 16px 16px; }
.hx-ai::after { content: ""; position: absolute; left: 22%; top: 100%; height: 24px; border-left: 2px dashed var(--bf-blue); transform-origin: top; }
.hx-ai__top, .hx-chat__top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 0.85rem/1 var(--font-heading); color: var(--bf-text); }
.hx-ai__av { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--bf-ink-2); color: #fff; }
.hx-ai__av svg { width: 13px; height: 13px; }
.hx-bub { margin: 0; max-width: 90%; padding: 9px 12px; border-radius: 14px; font-size: 0.88rem; line-height: 1.4; }
.hx-bub + .hx-bub, .hx-bub + .hx-booked { margin-top: 8px; }
.hx-bub--them { margin-left: auto; width: fit-content; background: #F1F5F9; color: var(--bf-text); border-bottom-right-radius: 4px; }
.hx-bub--ai { width: fit-content; background: var(--bf-ink-2); color: #E2E8F0; border-bottom-left-radius: 4px; }
.hx-bub--ai b { color: #fff; }
.hx-link { display: block; width: fit-content; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--bf-blue); font: 700 0.78rem/1.2 var(--font-body); color: #fff; }
.hx-site { position: relative; overflow: hidden; margin-left: 10%; }
.hx-site__hero { padding: 20px 16px 112px; background: linear-gradient(135deg, #13244A, #0B1324); }
.hx-site__hero b { display: block; font: 700 1.15rem/1.2 var(--font-heading); color: #fff; }
.hx-site__hero span { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 8px; background: var(--bf-blue); font: 700 0.78rem/1 var(--font-heading); color: #fff; }
.hx-chat { position: relative; width: min(88%, 310px); margin: -96px 14px 14px auto; padding: 12px; border: 1px solid var(--bf-rule); border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -18px rgba(16, 24, 40, 0.5); }
.hx-booked { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #ECFDF3; font: 700 0.82rem/1.2 var(--font-body); color: var(--bf-green-ink); }
.hx-booked svg { flex: none; width: 18px; height: 18px; color: var(--bf-green); }
/* the reveal: the answer, the link, the hop to the site, then the chat books the visit */
.hw-js .hx-flow .hx-ai .hx-bub--ai { transition: opacity 0.45s ease 0.5s, transform 0.45s ease 0.5s; }
.hw-js .hx-flow .hx-link { transition: opacity 0.4s ease 1s, transform 0.4s ease 1s; }
.hw-js .hx-flow .hx-ai::after { transition: transform 0.5s ease 1.4s; }
.hw-js .hx-flow .hx-site { transition: opacity 0.6s ease 1.8s, transform 0.6s ease 1.8s; }
.hw-js .hx-flow .hx-chat > [style*="--k"] { transition: opacity 0.45s ease, transform 0.45s ease; transition-delay: calc(2.6s + var(--k) * 0.6s); }
.hw-js .hx-flow.is-stage .hx-ai .hx-bub--ai, .hw-js .hx-flow.is-stage .hx-link, .hw-js .hx-flow.is-stage .hx-chat > [style*="--k"] { opacity: 0; transform: translateY(6px); }
.hw-js .hx-flow.is-stage .hx-ai::after { transform: scaleY(0); }
.hw-js .hx-flow.is-stage .hx-site { opacity: 0; transform: translateY(14px); }

@media (max-width: 959px) {
  .bf-how__pair { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 767px) {
  .bf-how { padding: 72px 0 64px; }
  .bf-how__part { padding-top: 40px; }
  .bf-how__part + .bf-how__part { margin-top: 32px; }
  .bf-how__pair { margin-top: 24px; }
  .bf-how__sub { font-size: 1rem; }
  .g-ad { font-size: 0.68rem; }
  .g-lab, .g-booked { font-size: 0.66rem; }
  .g-booked svg { width: 12px; height: 12px; }
  .hx-site { margin-left: 6%; }
}
@media (max-width: 479px) {
  .hx-web__row { grid-template-columns: minmax(0, 1fr); }
}

/* the questions row in the bottom section: the same strategy-session form */
.bf-cta__ask { color: #fff; text-decoration: underline; text-underline-offset: 3px; }