/* OddsBoss simplified landing page (brands/oddsboss/landing/index.html). Loaded after landing.css, which already
   carries the OddsBoss tokens, fonts and gold-button layer (brands/oddsboss/landing.css). Reuses the shared bf2-*
   components; everything new is ob-*. Grounds: navy (header, hero, final), white, one Ice band (plans), Night footer.
   Gold (.bf2-cta-lime) only on navy: header, hero, All-Access card, final band. */

/* ---------- Global ---------- */
.ob { font: 500 17px/26px var(--f-body); }
.ob h2 { font-size: 38px; line-height: .95; max-width: 18ch; color: var(--ink); }
.ob h3 { font-size: 24px; line-height: 1; }
.ob-sec { padding-block: 72px; }
.ob-lead { font-size: 18px; line-height: 27px; font-weight: 600; }
.ob-body { font-size: 17px; line-height: 26px; color: var(--muted); }
.ob-eyebrow { font: 800 13px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ob-cap { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }
.ob-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px; font-weight: 800; color: var(--deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ob-sec-head { display: grid; gap: 16px; }
.ob-sub { max-width: 60ch; }
.ob .bf2-cta { min-height: 56px; }
.ob .bf2-cta-outline { border-color: var(--g); }
@media (min-width: 980px) {
  .ob { --head-h: 72px; font-size: 18px; line-height: 28px; }
  .ob h2 { font-size: 56px; }
  .ob h3 { font-size: 26px; }
  .ob-sec { padding-block: 120px; }
  .ob-lead { font-size: 20px; line-height: 30px; }
  .ob-body { font-size: 18px; line-height: 28px; }
  .ob-eyebrow { font-size: 14px; }
}

/* Screenshot frame: one style. On white a soft drop; on navy a deeper drop. No hard offset. */
.ob .bf2-shot { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -28px rgba(7,29,69,.35); }
.ob .bf2-hero-band .bf2-shot { border: 0; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
@media (max-width: 979px) {
  .ob .bf2-shot picture { aspect-ratio: 4 / 3.2; }
  .ob .bf2-shot img { height: 100%; object-fit: cover; object-position: left top; }
}
@media (max-width: 699px) {
  .ob .bf2-shot img { height: auto; }
}

/* ---------- 0. Header ---------- */
.ob .bf2-head-cta { font-size: 18px; }
.ob-login { display: none; color: #FFFFFF; font-weight: 700; font-size: 16px; text-decoration: none; min-height: 44px; align-items: center; padding-inline: 4px; }
.ob-login:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lime); }
.ob-nav-age { display: none; }
.ob .bf2-nav.open .ob-nav-age { display: block; padding-top: 16px; font-size: 15px; font-weight: 700; color: var(--on-green-soft); }
@media (min-width: 980px) { .ob .bf2-head-in { min-height: 72px; } }
@media (min-width: 1100px) {
  .ob .bf2-nav { gap: 32px; margin-left: 48px; }
  .ob .bf2-nav a { font-size: 16px; }
  .ob .bf2-nav .ob-nav-login { display: none; }
  .ob-login { display: inline-flex; }
  .ob .bf2-head-right { gap: 16px; }
}

/* ---------- 1. Hero ---------- */
.ob .bf2-hero { padding-block: 28px 48px; gap: 28px; }
.ob .bf2-hero-copy { gap: 0; }
.ob .bf2-hero h1 { font-size: 52px; line-height: .92; max-width: none; }
.ob .bf2-hero h1 span { display: block; }
.ob-h1-b { color: var(--lime); }
.ob-hero .ob-lead { margin-top: 16px; color: #FFFFFF; max-width: 46ch; }
.ob-btns { display: grid; gap: 10px; width: 100%; max-width: 420px; margin-top: 24px; }
.ob .bf2-hero .bf2-cta { width: 100%; max-width: 420px; margin: 0; }
.ob-cta-ghost { background: transparent; color: #FFFFFF; border: 2px solid rgba(255,255,255,.6); box-shadow: none; }
@media (hover: hover) { .ob-cta-ghost:hover { background: rgba(255,255,255,.08); border-color: #FFFFFF; } }
.ob .ob-terms { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--on-green-soft); max-width: none; }
.ob-hero-art { margin: 0; min-width: 0; }
.ob-hero-cap { display: none; }
@media (min-width: 980px) {
  .ob .bf2-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding-block: 88px 112px; }
  .ob .bf2-hero h1 { font-size: 76px; }
  .ob-hero .ob-lead { margin-top: 24px; }
  .ob-btns { display: flex; flex-wrap: wrap; gap: 12px; max-width: none; margin-top: 36px; }
  .ob .bf2-hero .ob-btns .bf2-cta { width: auto; padding-inline: 20px; font-size: 20px; }
  .ob .bf2-hero .ob-btns .bf2-cta-lime { min-width: 240px; }
  .ob .ob-terms { margin-top: 14px; }
  .ob-hero-art { justify-self: end; width: 100%; max-width: 640px; }
  .ob-hero-cap { display: block; margin-top: 14px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--on-green-soft); }
}

/* ---------- 2. Facts + books ---------- */
.ob-books { padding-block: 72px 56px; }
.ob .ob-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.ob .ob-facts li:nth-child(n+3) { margin-top: 20px; }
.ob .ob-facts li { display: grid; gap: 8px; align-content: start; border: 0; padding: 0; grid-row: span 2; grid-template-rows: subgrid; }
.ob .ob-facts li > b { align-self: end; }
.ob .ob-facts .ob-fig-word { font-size: 32px; line-height: 1; }
.ob-fig-word span, .ob-nw { white-space: nowrap; }
.ob .ob-facts .ob-fig-word span { font: inherit; color: inherit; line-height: inherit; }
.ob .ob-facts b { font: 900 44px/.95 var(--f-head); text-transform: uppercase; color: var(--deep); font-variant-numeric: tabular-nums; }
.ob .ob-facts li > span { font-size: 16px; line-height: 24px; color: var(--muted); max-width: 22ch; }
.ob-marquee { margin-top: 40px; gap: 14px; padding-block: 4px; }
.ob .ob-marquee .bf2-mq-row { gap: 40px; animation-name: ob-mq; }
.ob .ob-marquee .bf2-mq-row li { font: 800 18px/1.2 var(--f-body); color: var(--muted); border: 0; padding: 4px 0; background: none; letter-spacing: 0; }
@keyframes ob-mq { to { transform: translateX(calc(-50% - 20px)); } }
@media (max-width: 699px) { .ob .ob-marquee .bf2-mq-rev { display: none; } .ob .ob-marquee .bf2-mq-row:first-child { animation-duration: 70s; } }
@media (min-width: 700px) { .ob .ob-marquee .ob-mq-m { display: none; } .ob .ob-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 32px; } .ob .ob-facts li:nth-child(n+3) { margin-top: 0; } }
@media (min-width: 980px) {
  .ob-books { padding-block: 96px 72px; }
  .ob .ob-facts b { font-size: 64px; }
  .ob .ob-facts .ob-fig-word { font-size: 48px; }
  .ob-marquee { margin-top: 56px; }
}

/* ---------- 3. How it works ---------- */
.ob .ob-how { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.ob .ob-how-head { gap: 0; }
.ob-how-head h2 { margin-top: 12px; }
.ob-how-head .ob-body { margin-top: 16px; max-width: 52ch; }
.ob .ob-steps { border: 0; padding: 0; gap: 14px; }
.ob-steps li { font-size: 17px; line-height: 26px; }
.ob .bf2-checks li::before { border-color: var(--g); }
.ob .ob-slip { border: 2px solid var(--line); box-shadow: 8px 8px 0 var(--mint); padding: 20px; gap: 14px; border-radius: 14px; }
.ob-slip figcaption { font-size: 15px; }
.ob-slip .bf2-odds { min-width: 3.4em; text-align: right; }
.ob-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-tiles p { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.ob-tiles span { font-size: 13px; font-weight: 700; color: var(--muted); }
.ob-tiles b { font: 900 32px/1 var(--f-head); color: var(--deep); font-variant-numeric: tabular-nums; }
.ob-slip .bf2-result { font-size: 17px; }
.ob-slip .bf2-calc-note { font-size: 14px; }
.ob-honest { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 979px) {
  .ob-how-head { order: 1; } .ob-how-card { order: 2; } .ob-steps { order: 3; }
}
@media (min-width: 980px) {
  .ob .ob-how { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 72px; row-gap: 0; align-items: start; }
  .ob-how-head { grid-column: 1; grid-row: 2; }
  .ob-steps { grid-column: 1; grid-row: 3; margin-top: 32px; }
  .ob-how-card { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .ob .ob-slip { padding: 28px; }
  .ob-steps li { font-size: 18px; line-height: 28px; }
}

/* ---------- 4. The catch ---------- */
.ob .ob-catch { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.ob-catch-head { display: grid; }
.ob-catch-head h2 { margin-top: 12px; }
.ob-second { margin-top: 12px; font: 800 24px/1.1 var(--f-body); color: var(--deep); }
.ob-catch-head .ob-body { margin-top: 16px; max-width: 52ch; }
.ob .ob-catch-media { margin: 0; display: grid; gap: 12px; position: static; }
.ob-catch-head { order: 1; } .ob .ob-catch-media { order: 2; } .ob-catch-link { order: 3; margin-top: -8px; }
@media (min-width: 980px) {
  .ob .ob-catch {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 0;
    grid-template-areas: "media ." "media head" "media link" "media ."; grid-template-rows: 1fr auto auto 1fr; align-items: start;
  }
  .ob .ob-catch-media { grid-area: media; max-width: 640px; width: 100%; }
  .ob-catch-head { grid-area: head; }
  .ob-catch-link { grid-area: link; margin-top: 24px; }
  .ob-second { font-size: 26px; }
}

/* ---------- 5. Tools, 4 tabs ---------- */
.ob-tools-grid { display: grid; gap: 20px; margin-top: 32px; }
.ob-vtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-vtabs [role="tab"] {
  min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; color: var(--deep);
  font: 900 15px/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; text-align: center;
  display: grid; align-content: center; gap: 6px;
}
.ob-vtabs [role="tab"][aria-selected="true"] { background: var(--sel); border-color: var(--sel); color: #FFFFFF; }
.ob-tab-line, .ob-tab-price { display: none; }
@media (hover: hover) { .ob-vtabs [role="tab"]:not([aria-selected="true"]):hover { background: var(--soft); } }
.ob-panel { display: grid; gap: 16px; align-content: start; }
.ob-panel + .ob-panel { margin-top: 56px; } /* no-JS: all four stacked */
.ob-panel:focus-visible { outline-offset: 6px; border-radius: 4px; }
.ob-panel-head { display: grid; gap: 6px; }
.ob-panel-head p { color: var(--muted); font-size: 17px; line-height: 24px; }
.ob-panel-cols { display: grid; gap: 20px; }
.ob-best { font: 800 13px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ob-bestfor { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.ob-bestfor li { font-size: 15px; line-height: 22px; color: var(--muted); padding-block: 10px; border-bottom: 1px solid var(--line); }
.ob-bestfor li:first-child { border-top: 1px solid var(--line); }
.ob-bestfor b { font: 900 22px/1 var(--f-head); text-transform: uppercase; color: var(--deep); letter-spacing: .01em; }
.ob-panel .bf2-checks { gap: 10px; font-size: 16px; line-height: 24px; }
.ob-panel .bf2-checks li::before { margin-top: 7px; }
.ob-panel-foot { display: grid; gap: 14px; margin-top: 4px; }
.ob-priceline { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--deep); }
.ob-panel-foot .bf2-cta { width: 100%; }
.ob-also { margin-top: 40px; font-size: 17px; line-height: 26px; color: var(--muted); max-width: 70ch; }
/* With JS: panels stack in one grid cell (the tallest sets the height, so switching never jumps); one shows. */
.js .ob-panels { display: grid; }
.js .ob-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .18s ease; }
.js .ob-panel + .ob-panel { margin-top: 0; }
.js .ob-panel.on { visibility: visible; opacity: 1; }
html:not(.js) .ob-vtabs { display: none; }
@media (min-width: 980px) {
  .ob-tools-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; margin-top: 48px; align-items: start; }
  .ob-vtabs { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); position: sticky; top: calc(var(--head-h) + 32px); }
  .ob-vtabs [role="tab"] {
    min-height: 88px; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
    text-align: left; justify-items: start; gap: 6px; font-size: 20px;
  }
  .ob-vtabs [role="tab"][aria-selected="true"] { border-radius: 10px; border-bottom-color: var(--sel); }
  .ob-tab-line { display: block; font: 500 15px/22px var(--f-body); text-transform: none; letter-spacing: 0; color: var(--muted); }
  .ob-tab-price { display: block; font: 700 15px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--deep); }
  .ob-vtabs [aria-selected="true"] .ob-tab-line, .ob-vtabs [aria-selected="true"] .ob-tab-price { color: #FFFFFF; }
  .ob-panel { gap: 24px; }
  .ob-panel .bf2-shot { max-width: 720px; }
  /* the tab already names the tool and its one-liner: keep the panel heading for screen readers only */
  .ob-panel-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ob-panel-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .ob-panel-foot { grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-top: -4px; }
  .ob-panel-foot .bf2-cta { width: auto; }
  html:not(.js) .ob-panel-head { position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; }
}

/* ---------- 6. Plans ---------- */
.ob .bf2-plans-head { gap: 20px; }
.ob .bf2-plans-head > div:first-child { gap: 16px; }
.ob .bf2-toggle { display: grid; grid-template-columns: 1fr 1fr; width: 100%; justify-self: stretch; border-color: var(--line); }
.ob .bf2-toggle button { justify-content: center; font-size: 16px; color: var(--deep); }
.ob .bf2-toggle button[aria-pressed="true"] { background: var(--sel); color: #FFFFFF; }
.ob .bf2-toggle button span { background: var(--soft); color: var(--deep); }
.ob .bf2-toggle button[aria-pressed="true"] span { background: #FFFFFF; color: var(--sel); }
.ob-plans3 { display: grid; gap: 16px; margin-top: 32px; align-items: start; }
.ob .ob-plan, .ob .ob-all { margin: 0; gap: 0; padding: 24px 20px; border-radius: 16px; display: flex; flex-direction: column; }
.ob .ob-plan { border: 1px solid var(--line); box-shadow: none; }
.ob .ob-plan h3, .ob .ob-all h3 { font-size: 26px; line-height: 1; min-height: 0; display: block; }
.ob .ob-plan .bf2-price, .ob .ob-all .bf2-price { margin-top: 16px; }
.ob .ob-plan .bf2-price { font-size: 48px; }
.ob .bf2-billed { min-height: 0; margin-top: 6px; }
.ob-effort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border-block: 1px solid var(--line); }
.ob-effort div { padding: 12px 8px 12px 0; display: grid; gap: 4px; align-content: start; }
.ob-effort div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.ob-effort dt { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--muted); }
.ob-effort dd { margin: 0; font: 900 20px/1.05 var(--f-head); text-transform: uppercase; color: var(--deep); }
.ob .ob-plan .bf2-checks, .ob .ob-all .bf2-checks { margin: 20px 0 24px; font-size: 16px; line-height: 23px; gap: 10px; }
.ob .ob-plan .bf2-cta, .ob .ob-all .bf2-cta { margin-top: auto; width: 100%; font-size: 21px; }
/* All-Access: the navy card */
.ob .ob-all { position: relative; align-items: stretch; background: var(--deep); color: #FFFFFF; border: 3px solid var(--lime); box-shadow: 8px 8px 0 var(--g); order: -1; margin-top: 14px; }
.ob .ob-all .bf2-ribbon { position: absolute; top: -15px; left: 22px; margin: 0; background: var(--lime); color: var(--pitch-deep); }
.ob .ob-all h3 { color: var(--lime); }
.ob .ob-all .bf2-price { color: #FFFFFF; font-size: 56px; }
.ob .ob-all .bf2-price small, .ob .ob-all .bf2-billed { color: var(--on-green-mute); }
.ob .ob-all .ob-effort { border-color: rgba(255,255,255,.22); }
.ob .ob-all .ob-effort div + div { border-left-color: rgba(255,255,255,.22); }
.ob .ob-all .ob-effort dt { color: var(--on-green-mute); }
.ob .ob-all .ob-effort dd { color: var(--lime); }
.ob .ob-all .bf2-checks { color: #FFFFFF; font-weight: 600; }
.ob .ob-all .bf2-checks li::before { border-color: var(--lime); }
.ob .ob-all .bf2-plan-terms { margin-top: 12px; font-size: 14px; color: var(--on-green-mute); }
.ob-plan-rows { display: grid; gap: 12px; margin-top: 32px; }
.ob-plan-rows p { display: grid; gap: 2px; font-size: 16px; line-height: 24px; color: var(--muted); background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; }
.ob-plan-rows a { justify-self: start; }
.ob-plan-rows b { color: var(--ink); font-weight: 800; }
.ob-plan-rows a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; vertical-align: middle; font-weight: 800; color: var(--deep); text-underline-offset: 3px; white-space: nowrap; }
.ob-billing { margin-top: 16px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); max-width: 80ch; }
@media (min-width: 980px) {
  .ob .bf2-plans-head { grid-template-columns: 1fr auto; align-items: end; }
  .ob #plans-h2 { max-width: none; }
  .ob-plan-rows p { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; padding: 10px 24px; }
  .ob .bf2-toggle { display: inline-flex; width: auto; }
  .ob .bf2-toggle button { padding-inline: 20px; }
  .ob-plans3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); gap: 24px; margin-top: 48px; align-items: stretch; }
  .ob .ob-plan, .ob .ob-all { padding: 28px; }
  .ob .ob-all { order: 0; margin-top: 0; }
  .ob .ob-plan .bf2-price { font-size: 56px; }
  .ob .ob-all .bf2-price { font-size: 64px; }
}

/* ---------- 7. FAQ ---------- */
.ob .ob-faq { display: grid; gap: 28px; }
.ob .bf2-q h3 { font: 800 18px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; }
.ob .bf2-q button { min-height: 64px; }
.ob .bf2-q button::after { background: var(--soft); color: var(--g); }
.ob .bf2-q button[aria-expanded="true"]::after { background: var(--g); color: #FFFFFF; }
.ob .bf2-a { padding: 0 0 22px; }
@media (min-width: 980px) { .ob .bf2-a { padding-right: 52px; } }
.ob .bf2-a p { font-size: 17px; line-height: 26px; color: var(--muted); max-width: 62ch; }
@media (min-width: 980px) {
  .ob .ob-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
  .ob .bf2-faq-side { top: calc(var(--head-h) + 32px); }
  .ob .bf2-q h3 { font-size: 19px; }
}

/* ---------- 8. Final CTA ---------- */
.ob .ob-final { display: grid; gap: 24px; padding-top: 64px; }
.ob .bf2-final h2 { font-size: 44px; line-height: .92; max-width: 14ch; color: #FFFFFF; }
.ob .bf2-final-copy { gap: 0; }
.ob .bf2-final-copy .ob-lead { margin-top: 18px; max-width: 50ch; color: #FFFFFF; }
.ob-final-act { display: grid; gap: 8px; width: 100%; margin-top: 28px; }
.ob .bf2-final .bf2-cta { width: 100%; max-width: 420px; }
.ob-final-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #FFFFFF; font-weight: 800; font-size: 17px; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--lime); }
.ob-final-link:hover { color: var(--lime); }
.ob .bf2-final .bf2-terms { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--on-green-soft); max-width: none; }
.ob .bf2-final-art { justify-items: center; align-self: end; }
.ob .bf2-final-art img { width: auto; height: 120px; display: block; }
@media (min-width: 980px) {
  .ob .ob-final { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; padding-top: 112px; align-items: end; }
  .ob .bf2-final-copy { padding-bottom: 112px; }
  .ob .bf2-final h2 { font-size: 64px; max-width: none; }
  .ob .bf2-final-copy .ob-lead { margin-top: 24px; }
  .ob-final-act { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
  .ob .bf2-final .bf2-cta { width: auto; min-width: 280px; }
  .ob .bf2-final .bf2-terms { margin-top: 14px; }
  .ob .bf2-final-art { justify-items: end; }
  .ob .bf2-final-art img { height: 220px; }
}

/* ---------- 9. Footer ---------- */
.ob .ob-foot { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); }
.ob-foot .bf2-foot-in { gap: 12px; }
.ob-foot-top { display: grid; gap: 16px; margin-bottom: 8px; }
.ob .ob-foot .bf2-foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ob .ob-foot .bf2-foot-links a, .ob-foot-fill { font-size: 15px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.ob-foot-fill { color: var(--on-green-mute); }
.ob .ob-foot .bf2-foot-line { font-size: 15px; line-height: 22px; font-weight: 700; color: #FFFFFF; }
.ob .ob-foot .bf2-foot-line:focus { outline: none; }
.ob .ob-foot .bf2-foot-line:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.ob-foot-note { font-size: 14px; line-height: 20px; color: var(--on-green-mute); max-width: 80ch; }
.ob .bf2-foot-legal { font-size: 14px; color: var(--on-green-mute); }
@media (min-width: 980px) {
  .ob .ob-foot { padding-block: 48px; }
  .ob-foot-top { grid-template-columns: auto 1fr; align-items: center; gap: 32px; margin-bottom: 16px; }
  .ob .ob-foot .bf2-foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; }
}

/* ---------- Sale (FINAL-SALE-SPEC; brands/oddsboss/sale.json, sale.js) ----------
   One switch: html.ob-sale (also .sale-<id>) while the sale runs; [data-sale="on"] / [data-sale="off"] twins swap with
   it. Without JS and after the deadline the page is exactly the normal one. Pumpkin only ever sits on navy (or inside a
   Midnight edge), never on white, never touching a gold button, never in figures. */
:root { --pumpkin: #F57C1F; }
html:not(.ob-sale) [data-sale="on"], html.ob-sale [data-sale="off"] { display: none !important; }

/* Banner: Night Blue strip, 3px Pumpkin rule inside its 40px; not sticky; the whole strip is one link to #plans. */
.ob-sale-bar { display: block; box-sizing: border-box; height: 40px; background: #071D45; border-bottom: 3px solid var(--pumpkin); color: #FFFFFF; text-decoration: none; overflow: hidden; }
.ob-sale-bar:focus { outline: none; }
.ob-sale-bar:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.ob-sale-in { display: flex; justify-content: center; align-items: center; gap: 6px; height: 100%; white-space: nowrap; font: 700 14px/1 var(--f-body); }
.ob-sb-label { margin-right: 2px; font: 900 13px/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--pumpkin); }
.ob-sb-dot { color: #E3EDFA; }
.ob-sb-ends { font-weight: 600; color: #E3EDFA; }
.ob-cd { font-weight: 800; color: var(--lime); font-variant-numeric: tabular-nums; }
.ob-sb-link { text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .ob-sale-bar:hover .ob-sb-msg { text-decoration: underline; text-underline-offset: 2px; } }
.ob-sb-w { display: none; }
@media (max-width: 374px) { .ob-sb-label { display: none; } }
@media (min-width: 1100px) {
  .ob-sale-in { gap: 16px; font-size: 15px; }
  .ob-sb-w { display: inline; }
  .ob-sb-n { display: none; }
  .ob-sb-label { margin-right: 0; }
}

/* Hero: the price clause in Floodlight. */
.ob-sale-price { font-weight: 800; color: var(--lime); }

/* ---------- Halloween atmosphere (owner's brief, 29 Oct): moon, bats, jack-o-lanterns, fog, one faceless ghost ----------
   All of it is .ob-hw / [data-sale="on"], so it exists only inside html.ob-sale and goes at the deadline. Decoration is
   absolutely positioned (no height, no layout shift), clipped by its band, below the text and never over a gold button.
   Images are loading="lazy" (hidden ones never download). Motion: slow fog drift and a gentle bat bob; none with
   prefers-reduced-motion. Adult register: silhouettes, flat moon, fog, Hank calm; no faces on ghosts, no candy, no kids. */
.ob-hw { pointer-events: none; }
.ob-hw img, .ob-hw svg { display: block; }
.ob-sb-bat { flex: none; width: 24px; height: 12px; fill: var(--pumpkin); }
.ob-sb-bat-r { transform: scaleX(-1); }
.ob-sale-bar { background: radial-gradient(50% 160% at 50% 130%, rgba(245,124,31,.16), rgba(245,124,31,0) 70%), #071D45; }

/* Fog: two tiled layers drifting in opposite directions along a band's bottom edge. */
.ob-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; overflow: hidden; z-index: 0; }
.ob-fog i { position: absolute; left: 0; bottom: -24px; width: 200%; height: 100%; background-repeat: repeat-x; background-size: 50% 100%;
  background-image: radial-gradient(ellipse 24% 52% at 14% 78%, rgba(214,226,255,.23), rgba(214,226,255,0) 70%),
    radial-gradient(ellipse 30% 46% at 44% 88%, rgba(214,226,255,.19), rgba(214,226,255,0) 70%),
    radial-gradient(ellipse 22% 50% at 72% 80%, rgba(214,226,255,.22), rgba(214,226,255,0) 70%),
    radial-gradient(ellipse 26% 40% at 94% 92%, rgba(214,226,255,.18), rgba(214,226,255,0) 70%);
  animation: ob-fog 70s linear infinite; }
.ob-fog i + i { bottom: -48px; opacity: .8; animation-duration: 110s; animation-direction: reverse; }
@keyframes ob-fog { to { transform: translateX(-50%); } }
@keyframes ob-bob { 50% { transform: translateY(-5px); } }
@keyframes ob-drift { 50% { transform: translate(6px, -8px); } }

/* Hero band: orange glow on navy; content above the fog. */
html.ob-sale .bf2-hero-band { position: relative; overflow: clip; background-image: radial-gradient(circle at 100% 0, rgba(245,124,31,.22), rgba(245,124,31,0) 340px); }
html.ob-sale .ob-hero { position: relative; z-index: 1; }
html.ob-sale .ob-hero-art { position: relative; }
html.ob-sale .ob-hero-art .bf2-shot { position: relative; z-index: 1; }
/* Phones/tablets: a glow with bats in the top-right corner, beside the H1 (the 390 first-screen budget is untouched). */
.ob-hw-sky { position: absolute; z-index: 0; top: 66px; right: -32px; width: 150px; height: 150px;
  background: radial-gradient(closest-side, var(--pumpkin) 57%, rgba(245,124,31,.32) 60%, rgba(245,124,31,0)); }
@media (max-width: 374px) { .ob-hw-sky { display: none; } } /* narrow phones: the H1 wraps under it */
.ob-hw-sky .ob-hw-bats { position: absolute; top: 40px; left: 22px; width: 96px; height: auto; animation: ob-bob 7s ease-in-out infinite; }
/* Hero art (all sizes): bats over the moon behind the frame (desktop), pumpkins on the ground at the band's base. */
.ob-hw-heroart { position: absolute; inset: 0; }
.ob-hw-heroart .ob-hw-bats { display: none; }
.ob-hw-heroart .ob-hw-pumpkins { position: absolute; z-index: 2; right: -8px; bottom: -48px; width: 112px; height: auto; }
.ob-moon { display: none; }
@media (min-width: 960px) {
  html.ob-sale .bf2-hero-band { background-image: radial-gradient(circle at 86% 22%, rgba(245,124,31,.24), rgba(245,124,31,0) 460px); }
  .ob-hw-sky { display: none; }
  .ob-moon { display: block; position: absolute; top: -80px; right: -95px; width: 280px; height: 280px; border-radius: 50%; background: var(--pumpkin); box-shadow: 0 0 90px 24px rgba(245,124,31,.32); z-index: 0; }
  .ob-hw-heroart .ob-hw-bats { display: block; position: absolute; z-index: 0; top: -62px; right: -40px; width: 230px; height: auto; animation: ob-bob 8s ease-in-out infinite; }
  .ob-hw-heroart .ob-hw-pumpkins { right: 0; bottom: -112px; width: 176px; }
}

/* All-Access card, monthly: Pumpkin ribbon with a hard Midnight edge (reads where it overlaps the Ice section). */
.ob .ob-all .bf2-ribbon.ob-ribbon-sale { background: var(--pumpkin); color: var(--pitch-deep); box-shadow: 0 0 0 2px var(--pitch-deep); }
.ob .ob-all.ob-all-sale .bf2-price small { margin-left: 6px; }
/* ...and a small moon with two bat silhouettes in its top-right corner (sale monthly view only). */
.ob-hw-card { display: none; position: absolute; top: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: var(--pumpkin); box-shadow: 0 0 28px 4px rgba(245,124,31,.35); }
.ob-all-sale .ob-hw-card { display: block; }
.ob-hw-card svg { position: absolute; fill: var(--pitch-deep); }
.ob-hw-card .ob-bat-a { width: 32px; height: 15px; left: 6px; top: 24px; animation: ob-bob 6s ease-in-out infinite; }
.ob-hw-card .ob-bat-b { width: 20px; height: 10px; right: 8px; top: 12px; animation: ob-bob 7s ease-in-out -2s infinite; }

/* Final band: kicker with the second (last) countdown; the Halloween scene; glow and fog. */
.ob-sale-kicker { margin: 0 0 12px; font-size: 15px; line-height: 22px; font-weight: 600; color: #E3EDFA; }
.ob-sale-kicker .ob-sale-label { font-weight: 700; color: var(--pumpkin); }
html.ob-sale .bf2-final { position: relative; overflow: clip; background-image: radial-gradient(circle at 50% 100%, rgba(245,124,31,.2), rgba(245,124,31,0) 300px); }
html.ob-sale .ob-final { position: relative; z-index: 1; }
.ob-hw-scene { position: relative; display: block; width: 300px; height: 220px; }
.ob-final-moon { position: absolute; top: 0; left: 50%; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; background: var(--pumpkin); box-shadow: 0 0 60px 14px rgba(245,124,31,.3); }
.ob .ob-hw-scene .ob-hw-bats { position: absolute; top: 6px; left: 150px; width: 104px; height: auto; animation: ob-bob 7s ease-in-out infinite; }
.ob .ob-hw-scene .ob-hw-ghost { display: none; }
.ob .ob-hw-scene .ob-hank-sale { position: absolute; bottom: 0; left: 50%; width: auto; height: 210px; margin-left: -92px; }
.ob .ob-hw-scene .ob-hw-pumpkins { position: absolute; bottom: 0; left: 0; width: 96px; height: auto; }
@media (min-width: 980px) {
  html.ob-sale .bf2-final { background-image: radial-gradient(circle at 84% 70%, rgba(245,124,31,.22), rgba(245,124,31,0) 420px); }
  .ob-hw-scene { width: 440px; height: 380px; }
  .ob-final-moon { top: 8px; left: auto; right: 40px; width: 250px; height: 250px; margin-left: 0; }
  .ob .ob-hw-scene .ob-hw-bats { top: 18px; left: auto; right: 44px; width: 170px; }
  .ob .ob-hw-scene .ob-hw-ghost { display: block; position: absolute; top: 96px; left: 0; width: 76px; height: 99px; fill: rgba(227,237,250,.16); transform-origin: 50% 100%; rotate: -6deg; animation: ob-drift 12s ease-in-out infinite; }
  .ob .ob-hw-scene .ob-hank-sale { left: auto; right: 40px; height: 340px; margin-left: 0; }
  .ob .ob-hw-scene .ob-hw-pumpkins { left: 30px; width: 150px; }
}

@media (prefers-reduced-motion: reduce) { .ob-hw, .ob-hw * { animation: none !important; } }

/* ---------- 5b. Testimonials (testimonials.json; hidden until real entries are enabled) ---------- */
.ob-reviews .ob-sec { padding-top: 0; }
.ob-quotes { display: grid; gap: 16px; margin-top: 32px; }
.ob-quote { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 14px; background: #FFFFFF; }
.ob-quote blockquote { margin: 0; }
.ob-quote blockquote p { font-size: 17px; line-height: 26px; font-weight: 600; color: var(--ink); }
.ob-quote figcaption { margin-top: auto; display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--muted); }
.ob-q-name { font-size: 16px; font-weight: 800; color: var(--deep); }
.ob-q-disc { font-size: 13px; font-weight: 600; }
@media (min-width: 980px) {
  .ob-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
  .ob-quote { padding: 28px; }
  .ob-quote blockquote p { font-size: 18px; line-height: 28px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ob .ob-marquee .bf2-mq-row { gap: 8px 32px; }
  .js .ob-panel { transition: none; }
}