/* ── No-Deposit Bonuses — scoped page styles ─────────────────────────────
   Port of nodeposit-styles.css, scoped under body.btf-db-page.
   Prototype dark-mode variants dropped (the live site is cream-only).
   Short prototype tokens (--forest, --gold, …) aliased onto --th-*.
   The "Best offers" list is rendered dynamically from the btf_bonus CPT
   (bonus_type = no_deposit) by the btf-db-offers block.
   IMPORTANT: do NOT alias --ink (cycle with texas-holdem's --th-ink:var(--ink)).
   ──────────────────────────────────────────────────────────────────────── */

body.btf-db-page {
	--forest:    var( --th-forest );
	--forest-2:  var( --th-forest-2 );
	--forest-3:  var( --th-forest-3 );
	--gold:      var( --th-gold );
	--gold-soft: var( --th-gold-soft );
	--cream:     var( --th-cream );
	--cream-2:   var( --th-cream-2 );
	--cream-3:   var( --th-cream-3 );
	--ink-2:     var( --th-ink-2 );
	--muted:     var( --th-muted );
	--hair:      var( --th-hair );
	--red:       var( --th-red );
	--serif:     var( --th-serif );
	--sans:      var( --th-sans );
	--mono:      var( --th-mono );
}

/* ── Selection on dark backgrounds (gold) ─────────────────────────────── */
body.btf-db-page .btf-db-hero ::selection,
body.btf-db-page .btf-db-hero::selection,
body.btf-db-page .btf-db-summary ::selection,
body.btf-db-page .btf-db-summary::selection { background: rgba( 212, 180, 74, .4 ); color: var( --on-dark ); }

/* ── Editorial sections wrapper ───────────────────────────────────────── */
body.btf-db-page .btf-db-section { padding: 4rem 0 3rem; scroll-margin-top: 80px; }
@media ( max-width: 800px ) { body.btf-db-page .btf-db-section { padding: 3rem 0 2rem; } }
body.btf-db-page .btf-db-section > .wrap > .btf-th-eyebrow { margin-bottom: .9rem; }
body.btf-db-page .prose .btf-db-section h2.btf-th-display,
body.btf-db-page .btf-db-section h2.btf-th-display { margin: 0 0 .55em; }
body.btf-db-page .prose .btf-db-section .btf-th-lede,
body.btf-db-page .btf-db-section .btf-th-lede { margin: 0 0 2rem; color: var( --ink-2 ); }
body.btf-db-page .btf-db-section .btf-th-lede b { color: var( --ink ); font-weight: 600; }

/* ── Hero card (honest headline) + stat strip ─────────────────────────── */
body.btf-db-page .btf-db-hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.5rem; }
body.btf-db-page .db-hero-card { background: linear-gradient( 160deg, rgba( 201, 162, 74, .18 ), rgba( 243, 238, 226, .04 ) ); border: 1px solid rgba( 201, 162, 74, .32 ); border-radius: 18px; padding: 1.8rem 1.9rem; display: flex; flex-direction: column; gap: 1rem; }
body.btf-db-page .db-hero-card-tag { font-family: var( --mono ); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var( --gold-soft ); }
body.btf-db-page .db-hero-figs { display: flex; align-items: center; gap: 1rem; }
body.btf-db-page .db-hero-fig { display: flex; flex-direction: column; gap: .15rem; }
body.btf-db-page .db-hero-fig b { font-family: var( --serif ); font-weight: 300; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1; color: rgba( 243, 238, 226, .7 ); }
body.btf-db-page .db-hero-fig.big b { font-size: 2.8rem; color: var( --cream ); }
body.btf-db-page .db-hero-fig span { font-family: var( --mono ); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: rgba( 243, 238, 226, .6 ); }
body.btf-db-page .db-hero-arrow { font-family: var( --serif ); font-size: 1.6rem; color: var( --gold-soft ); }
body.btf-db-page .prose .db-hero-card-note,
body.btf-db-page .db-hero-card-note { margin: 0; font-family: var( --serif ); font-style: italic; font-size: 1rem; line-height: 1.5; color: rgba( 243, 238, 226, .8 ); }

body.btf-db-page .db-stats { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: .8rem; margin-top: 2.2rem; }
@media ( max-width: 760px ) { body.btf-db-page .db-stats { grid-template-columns: 1fr 1fr; } }
@media ( max-width: 600px ) {
	body.btf-db-page .db-stats { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: .7rem; padding-bottom: .5rem; scrollbar-width: none; }
	body.btf-db-page .db-stats::-webkit-scrollbar { display: none; }
	body.btf-db-page .db-stat { flex: 0 0 72%; scroll-snap-align: start; }
}
body.btf-db-page .db-stat { display: grid; grid-template-columns: 32px 1fr; gap: .8rem; background: rgba( 243, 238, 226, .05 ); border: 1px solid rgba( 243, 238, 226, .12 ); border-radius: 12px; padding: 1rem 1.2rem; align-items: start; }
body.btf-db-page .db-stat-icon { font-size: 1.3rem; line-height: 1.2; }
body.btf-db-page .db-stat-text { display: flex; flex-direction: column; gap: .1rem; }
body.btf-db-page .db-stat-label { font-family: var( --mono ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var( --gold-soft ); }
body.btf-db-page .db-stat-text b { font-family: var( --serif ); font-weight: 500; font-size: 1.15rem; color: var( --cream ); letter-spacing: -.01em; }
body.btf-db-page .db-stat-text small { font-size: .76rem; line-height: 1.35; color: rgba( 243, 238, 226, .6 ); }

/* ── Offer cards (dynamic from CPT) ───────────────────────────────────── */
body.btf-db-page .db-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media ( max-width: 760px ) { body.btf-db-page .db-offers { grid-template-columns: 1fr; } }
body.btf-db-page .db-offer { position: relative; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: 16px; padding: 1.6rem 1.7rem; display: flex; flex-direction: column; border-top-width: 3px; }
body.btf-db-page .db-offer.good { border-top-color: var( --forest ); }
body.btf-db-page .db-offer.ok   { border-top-color: var( --gold ); }
body.btf-db-page .db-offer.pick { border-color: var( --gold ); box-shadow: 0 6px 28px rgba( 201, 162, 74, .16 ); }
body.btf-db-page .db-offer-ribbon { position: absolute; top: -1px; right: 1.4rem; background: var( --gold ); color: #fff; font-family: var( --mono ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: .3em .7em; border-radius: 0 0 6px 6px; }
body.btf-db-page .db-offer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var( --hair ); }
body.btf-db-page .db-offer-id { display: flex; align-items: center; gap: .7rem; }
body.btf-db-page .db-offer-rank { font-family: var( --serif ); font-weight: 300; font-size: 1.6rem; color: var( --muted ); }
body.btf-db-page .db-offer.pick .db-offer-rank { color: var( --gold ); }
body.btf-db-page .prose .db-offer-id h3.btf-th-display,
body.btf-db-page .db-offer-id h3.btf-th-display { font-size: 1.3rem; margin: 0; line-height: 1.05; }
body.btf-db-page .db-offer-amount { text-align: right; flex-shrink: 0; }
body.btf-db-page .db-offer-amount b { font-family: var( --serif ); font-weight: 400; font-size: 2.1rem; letter-spacing: -.02em; line-height: 1; color: var( --forest ); display: block; }
body.btf-db-page .db-offer-amount span { font-family: var( --mono ); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var( --muted ); }
body.btf-db-page .prose .db-offer-note,
body.btf-db-page .db-offer-note { margin: 0 0 1.2rem; font-size: .93rem; line-height: 1.55; color: var( --ink-2 ); flex: 1; }
body.btf-db-page .db-offer-terms { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 1.1rem 1.2rem; background: var( --cream ); border: 1px solid var( --hair ); border-radius: 10px; margin-bottom: 1.2rem; }
body.btf-db-page .db-term { display: flex; flex-direction: column; gap: .1rem; }
body.btf-db-page .db-term-k { font-family: var( --mono ); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var( --muted ); }
body.btf-db-page .db-term-v { font-family: var( --serif ); font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; color: var( --ink ); }
body.btf-db-page .db-term-v.sm { font-size: .92rem; line-height: 1.2; }
body.btf-db-page .db-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.btf-db-page .db-offer-code { display: flex; flex-direction: column; gap: .2rem; }
body.btf-db-page .db-offer-code span { font-family: var( --mono ); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var( --muted ); }
body.btf-db-page .db-offer-code code { font-family: var( --mono ); font-size: .85rem; font-weight: 600; color: var( --forest ); background: rgba( 29, 52, 38, .07 ); padding: .25em .55em; border-radius: 4px; border: 1px dashed rgba( 29, 52, 38, .3 ); }
body.btf-db-page .db-offer-btn { white-space: nowrap; }
/* base.css gives .btn-primary a lift + drop-shadow on hover. That reads well on
   the dark felt hero, but inside a light offer card the shadow appears from
   nowhere under a pale button and looks like a smudge. Darken the fill instead —
   scoped to the claim button so the hero CTAs keep the site-standard lift. */
body.btf-db-page .db-offer-btn:hover,
body.btf-db-page .db-offer-btn:focus-visible {
	background: var( --cream-3 );
	color: var( --forest );
	transform: none;
	box-shadow: none;
}
body.btf-db-page .prose .db-offers-disclosure,
body.btf-db-page .db-offers-disclosure { margin: 1.4rem 0 0; font-size: .82rem; line-height: 1.5; color: var( --muted ); }
body.btf-db-page .db-offers-disclosure a { color: var( --forest ); text-decoration: underline; }
body.btf-db-page .db-offers-empty { background: var( --cream-2 ); border: 1px dashed var( --hair ); border-radius: 16px; padding: 2.2rem; text-align: center; color: var( --ink-2 ); font-size: 1rem; line-height: 1.6; }

/* ── Flow ─────────────────────────────────────────────────────────────── */
body.btf-db-page .db-flow { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media ( max-width: 700px ) { body.btf-db-page .db-flow { grid-template-columns: 1fr; } }
body.btf-db-page .db-flow-step { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: 12px; padding: 1.3rem 1.4rem; align-items: start; }
body.btf-db-page .db-flow-step.key { border-color: var( --gold ); background: linear-gradient( 100deg, rgba( 201, 162, 74, .08 ), var( --cream-2 ) 55% ); }
body.btf-db-page .db-flow-n { width: 34px; height: 34px; border-radius: 50%; background: var( --forest ); color: var( --cream ); display: grid; place-items: center; font-family: var( --serif ); font-size: 1.15rem; }
body.btf-db-page .db-flow-step.key .db-flow-n { background: var( --gold ); color: #fff; }
body.btf-db-page .prose .db-flow-text h4.btf-th-display,
body.btf-db-page .db-flow-text h4.btf-th-display { font-size: 1.12rem; margin: 0 0 .3em; }
body.btf-db-page .prose .db-flow-text p,
body.btf-db-page .db-flow-text p { margin: 0; font-size: .9rem; line-height: 1.5; color: var( --ink-2 ); }

/* ── Traps ────────────────────────────────────────────────────────────── */
body.btf-db-page .db-traps { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1rem; }
@media ( max-width: 860px ) { body.btf-db-page .db-traps { grid-template-columns: 1fr 1fr; } }
@media ( max-width: 520px ) { body.btf-db-page .db-traps { grid-template-columns: 1fr; } }
body.btf-db-page .db-trap { background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: 14px; padding: 1.5rem 1.6rem; border-left-width: 3px; }
body.btf-db-page .db-trap.sev-high { border-left-color: var( --red ); }
body.btf-db-page .db-trap.sev-med  { border-left-color: var( --gold ); }
body.btf-db-page .db-trap.sev-low  { border-left-color: var( --ink-2 ); }
body.btf-db-page .db-trap-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
body.btf-db-page .db-trap-icon { font-size: 1.4rem; line-height: 1; }
body.btf-db-page .prose .db-trap-head h4.btf-th-display,
body.btf-db-page .db-trap-head h4.btf-th-display { font-size: 1.12rem; margin: 0; flex: 1; }
body.btf-db-page .db-trap-sev { font-family: var( --mono ); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: .25em .5em; border-radius: 4px; }
body.btf-db-page .db-trap-sev.sev-high { background: rgba( 139, 36, 36, .12 ); color: var( --red ); }
body.btf-db-page .db-trap-sev.sev-med  { background: rgba( 201, 162, 74, .18 ); color: #7d5e1a; }
body.btf-db-page .db-trap-sev.sev-low  { background: var( --cream-3 ); color: var( --muted ); }
body.btf-db-page .prose .db-trap p,
body.btf-db-page .db-trap p { margin: 0; font-size: .9rem; line-height: 1.55; color: var( --ink-2 ); }

/* ── Wagering math ────────────────────────────────────────────────────── */
body.btf-db-page .db-math { background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: 16px; padding: 1.8rem; }
body.btf-db-page .db-math-track { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .9rem; align-items: center; margin-bottom: 1.4rem; }
@media ( max-width: 640px ) { body.btf-db-page .db-math-track { grid-template-columns: 1fr; } body.btf-db-page .db-math-op { justify-self: center; transform: rotate( 90deg ); } }
body.btf-db-page .db-math-cell { background: var( --cream ); border: 1px solid var( --hair ); border-radius: 12px; padding: 1.2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
body.btf-db-page .db-math-cell.hi { background: var( --forest ); border-color: var( --forest ); }
body.btf-db-page .db-math-k { font-family: var( --mono ); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var( --muted ); }
body.btf-db-page .db-math-cell.hi .db-math-k { color: var( --gold-soft ); }
body.btf-db-page .db-math-cell b { font-family: var( --serif ); font-weight: 400; font-size: 2rem; letter-spacing: -.02em; line-height: 1; color: var( --ink ); }
body.btf-db-page .db-math-cell.hi b { color: var( --cream ); }
body.btf-db-page .db-math-sub { font-size: .76rem; color: var( --ink-2 ); }
body.btf-db-page .db-math-cell.hi .db-math-sub { color: rgba( 243, 238, 226, .75 ); }
body.btf-db-page .db-math-op { font-family: var( --serif ); font-size: 1.5rem; color: var( --muted ); }
body.btf-db-page .db-math-result { background: var( --cream ); border: 1px solid var( --hair ); border-left: 3px solid var( --red ); border-radius: 0 10px 10px 0; padding: 1.2rem 1.4rem; }
body.btf-db-page .prose .db-math-result p,
body.btf-db-page .db-math-result p { margin: 0; font-size: 1rem; line-height: 1.65; color: var( --ink-2 ); }
body.btf-db-page .db-math-result b { color: var( --ink ); }

/* ── Reality quote ────────────────────────────────────────────────────── */
body.btf-db-page .db-reality { margin-top: 1.4rem; background: var( --forest ); border-radius: 16px; padding: 2rem 2.2rem; position: relative; }
body.btf-db-page .db-reality-mark { font-family: var( --serif ); font-size: 3.5rem; line-height: .6; color: var( --gold-soft ); display: block; margin-bottom: .3rem; }
body.btf-db-page .prose .db-reality h3.btf-th-display,
body.btf-db-page .db-reality h3.btf-th-display { font-size: 1.6rem; color: var( --cream ); margin: 0 0 .6em; max-width: 32ch; }
body.btf-db-page .prose .db-reality p,
body.btf-db-page .db-reality p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: rgba( 243, 238, 226, .85 ); max-width: 76ch; }

/* ── Verdict ──────────────────────────────────────────────────────────── */
body.btf-db-page .db-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media ( max-width: 700px ) { body.btf-db-page .db-verdict { grid-template-columns: 1fr; } }
body.btf-db-page .db-verdict-col { border-radius: 16px; padding: 1.7rem 1.9rem; border: 1px solid var( --hair ); }
body.btf-db-page .db-verdict-col.claim { background: rgba( 29, 52, 38, .06 ); border-color: rgba( 29, 52, 38, .2 ); }
body.btf-db-page .db-verdict-col.skip  { background: rgba( 139, 36, 36, .05 ); border-color: rgba( 139, 36, 36, .2 ); }
body.btf-db-page .db-verdict-tag { font-family: var( --mono ); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 1.1rem; }
body.btf-db-page .db-verdict-col.claim .db-verdict-tag { color: var( --forest ); }
body.btf-db-page .db-verdict-col.skip .db-verdict-tag  { color: var( --red ); }
body.btf-db-page .db-verdict-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .85rem; }
body.btf-db-page .db-verdict-col li { position: relative; padding-left: 1.9em; font-size: .98rem; line-height: 1.5; color: var( --ink ); }
body.btf-db-page .db-verdict-col li::before { position: absolute; left: 0; top: -.05em; font-family: var( --mono ); font-weight: 700; font-size: 1.1em; }
body.btf-db-page .db-verdict-col.claim li::before { content: "\2713"; color: var( --forest ); }
body.btf-db-page .db-verdict-col.skip li::before  { content: "\2715"; color: var( --red ); }

/* ── Callout (verdict "one rule") ─────────────────────────────────────── */
body.btf-db-page .db-callout { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; padding: 1.1rem 1.3rem; border-radius: 10px; margin: 1.4rem 0 0; font-size: .95rem; line-height: 1.6; background: rgba( 29, 52, 38, .07 ); border: 1px solid rgba( 29, 52, 38, .18 ); color: var( --ink ); }
body.btf-db-page .db-callout-icon { font-family: var( --mono ); font-size: .68rem; letter-spacing: .12em; font-weight: 700; padding: .25rem .55rem; border-radius: 3px; text-transform: uppercase; background: var( --forest ); color: var( --cream ); align-self: flex-start; }
body.btf-db-page .db-callout-body b { font-weight: 700; }

/* ── Summary (forest felt) ────────────────────────────────────────────── */
body.btf-db-page .btf-db-summary { background: var( --forest ); color: var( --cream ); padding: 4.5rem 0; margin-top: 1rem; }
body.btf-db-page .btf-db-sm-eyebrow { font-family: var( --mono ); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var( --gold-soft ); }
body.btf-db-page .prose .btf-db-sm-display,
body.btf-db-page .btf-db-sm-display { font-family: var( --serif ); font-weight: 300; font-size: clamp( 1.9rem, 4vw, 2.6rem ); letter-spacing: -.02em; color: var( --cream ); margin: .4em 0 1em; }
body.btf-db-page .btf-db-sm-display em { color: var( --gold-soft ); font-style: italic; }
body.btf-db-page .btf-db-summary-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1.2rem; }
@media ( max-width: 760px ) { body.btf-db-page .btf-db-summary-grid { grid-template-columns: 1fr; } }
body.btf-db-page .btf-db-summary-card { background: rgba( 243, 238, 226, .05 ); border: 1px solid rgba( 243, 238, 226, .12 ); border-radius: 14px; padding: 1.6rem 1.7rem; }
body.btf-db-page .btf-db-summary-num { font-family: var( --mono ); font-size: .85rem; font-weight: 600; color: var( --gold-soft ); }
body.btf-db-page .prose .btf-db-summary-card h4.btf-th-display,
body.btf-db-page .btf-db-summary-card h4.btf-th-display { font-size: 1.2rem; color: var( --cream ); margin: .5rem 0 .5em; }
body.btf-db-page .prose .btf-db-summary-card p,
body.btf-db-page .btf-db-summary-card p { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba( 243, 238, 226, .82 ); }

/* ── Bonus calculator ─────────────────────────────────────────────────────
   Cream panel matching the offer cards: a form row that wraps to one column
   on mobile, real-offer preset chips, and a results ledger whose verdict row
   flips green/red on the sign of the EV. */
body.btf-db-page .db-calc { background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: 16px; padding: 1.6rem 1.7rem; }
body.btf-db-page .db-calc-form { display: grid; grid-template-columns: repeat( 5, 1fr ); gap: 1rem; }
@media ( max-width: 900px ) { body.btf-db-page .db-calc-form { grid-template-columns: 1fr 1fr; } }
@media ( max-width: 520px ) { body.btf-db-page .db-calc-form { grid-template-columns: 1fr; } }
body.btf-db-page .db-calc-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
body.btf-db-page .db-calc-field label { font-family: var( --mono ); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var( --muted ); }
body.btf-db-page .db-calc-field label i { font-style: normal; opacity: .7; text-transform: none; letter-spacing: .02em; }
body.btf-db-page .db-calc-money { display: flex; align-items: center; gap: .3rem; background: var( --cream ); border: 1px solid var( --hair ); border-radius: 8px; padding: .5rem .7rem; }
body.btf-db-page .db-calc-money span { font-family: var( --serif ); font-size: 1.05rem; color: var( --muted ); }
body.btf-db-page .db-calc-money input { flex: 1; min-width: 0; border: 0; background: none; font-family: var( --serif ); font-weight: 500; font-size: 1.05rem; color: var( --ink ); padding: 0; }
body.btf-db-page .db-calc-money input:focus { outline: none; }
body.btf-db-page .db-calc-money:focus-within { border-color: var( --gold ); box-shadow: 0 0 0 3px rgba( 201, 162, 74, .18 ); }
body.btf-db-page .db-calc-field select { background: var( --cream ); border: 1px solid var( --hair ); border-radius: 8px; padding: .55rem .7rem; font-family: var( --serif ); font-weight: 500; font-size: 1.05rem; color: var( --ink ); width: 100%; }
body.btf-db-page .db-calc-field select:focus-visible { outline: 2px solid var( --gold ); outline-offset: 1px; }

body.btf-db-page .db-calc-toggle { display: flex; gap: 0; border: 1px solid var( --hair ); border-radius: 8px; overflow: hidden; background: var( --cream ); }
body.btf-db-page .db-calc-toggle button { flex: 1; border: 0; background: none; padding: .55rem .5rem; font-family: var( --sans ); font-size: .78rem; font-weight: 600; color: var( --muted ); cursor: pointer; transition: background .15s, color .15s; }
body.btf-db-page .db-calc-toggle button + button { border-left: 1px solid var( --hair ); }
body.btf-db-page .db-calc-toggle button.is-active { background: var( --forest ); color: var( --on-dark ); }

body.btf-db-page .db-calc-presets { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var( --hair ); }
body.btf-db-page .db-calc-presets-k { font-family: var( --mono ); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var( --muted ); margin-right: .2rem; }
body.btf-db-page .db-calc-preset { display: inline-flex; align-items: baseline; gap: .4rem; background: var( --cream ); border: 1px solid var( --hair ); border-radius: 999px; padding: .35rem .8rem; font-family: var( --serif ); font-size: .95rem; color: var( --ink ); cursor: pointer; transition: border-color .15s, background .15s; }
body.btf-db-page .db-calc-preset i { font-style: normal; font-family: var( --mono ); font-size: .62rem; letter-spacing: .04em; color: var( --muted ); }
body.btf-db-page .db-calc-preset:hover { border-color: var( --gold ); }
body.btf-db-page .db-calc-preset.is-active { border-color: var( --gold ); background: rgba( 201, 162, 74, .12 ); }

body.btf-db-page .db-calc-out { margin-top: 1.4rem; background: var( --cream ); border: 1px solid var( --hair ); border-radius: 12px; padding: .4rem 1.1rem 1.1rem; }
body.btf-db-page .db-calc-row { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var( --hair ); }
body.btf-db-page .db-calc-k { font-family: var( --mono ); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var( --muted ); flex: 1; }
body.btf-db-page .db-calc-v { font-family: var( --serif ); font-weight: 500; font-size: 1.25rem; letter-spacing: -.01em; color: var( --ink ); }
body.btf-db-page .db-calc-v.neg { color: var( --red ); }
body.btf-db-page .db-calc-flag { font-family: var( --mono ); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: var( --gold ); background: rgba( 201, 162, 74, .14 ); border-radius: 4px; padding: .2em .5em; }
body.btf-db-page .db-calc-verdict { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: baseline; margin-top: .9rem; padding: 1rem 1.1rem; border-radius: 10px; border: 1px solid var( --hair ); }
body.btf-db-page .db-calc-verdict.good { background: rgba( 46, 139, 87, .09 ); border-color: rgba( 46, 139, 87, .35 ); }
body.btf-db-page .db-calc-verdict.bad  { background: rgba( 155, 44, 44, .07 ); border-color: rgba( 155, 44, 44, .3 ); }
body.btf-db-page .db-calc-verdict b { font-family: var( --serif ); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: -.02em; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
body.btf-db-page .db-calc-verdict.good b { color: var( --forest ); }
body.btf-db-page .db-calc-verdict.bad  b { color: var( --red ); }
body.btf-db-page .db-calc-verdict-note { font-size: .88rem; line-height: 1.5; color: var( --ink-2 ); grid-column: 1; }
body.btf-db-page .prose .db-calc-note,
body.btf-db-page .db-calc-note { margin: 1rem 0 0; font-size: .82rem; line-height: 1.5; color: var( --muted ); }

/* ── Hero card: two offers side by side is a comparison, not a sequence ────
   The shared component lays its figures out in a row with a big/small pair,
   which reads as "this becomes that". These are alternatives at equal weight,
   so on this page the card stacks them and divides them with a "vs" rule —
   and stacking also stops "300% at 40×" wrapping mid-figure at 1440px. */
body.btf-db-page .db-hero-figs { flex-direction: column; align-items: stretch; gap: .55rem; }
body.btf-db-page .db-hero-fig { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; }
body.btf-db-page .db-hero-fig b,
body.btf-db-page .db-hero-fig.big b { font-size: 1.75rem; white-space: nowrap; color: var( --cream ); }
body.btf-db-page .db-hero-fig span { text-align: right; white-space: nowrap; }
body.btf-db-page .db-hero-arrow { display: flex; align-items: center; gap: .7rem; font-family: var( --mono ); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var( --gold-soft ); }
body.btf-db-page .db-hero-arrow::before,
body.btf-db-page .db-hero-arrow::after { content: ""; flex: 1; height: 1px; background: rgba( 201, 162, 74, .3 ); }