/* ── Video poker game guides — shared components ───────────────────────────
   The rebuilt game guides (Double Bonus, Jacks or Better, Bonus Poker; from
   the user's mocks, 2026-10-12), scoped under body.btf-vpg-page: paper
   sections with a hairline, a sand band for the analyzer, cards drawn as
   cards (rank corner, pip, HOLD / DISCARD tag), the site table with its felt
   header, the chart in a felt-topped <details>, story rows, callouts, the
   steps list, the game cards and the hero's quads card. Hero chrome, display
   headings and eyebrows come from texas-holdem.css. The chart prints alone,
   as text, on one A4 page. Markup: blocks/btf-vpd-*, blocks/btf-vpj-*,
   blocks/btf-vpb-*; script: assets/js/video-poker-guide.js; cards drawn by
   btf_vpg_card_html() in inc/vpg.php.

   NOTE: do NOT alias --ink (circular with texas-holdem's --th-ink).
   ──────────────────────────────────────────────────────────────────────── */
body.btf-vpg-page {
	--forest:    var( --th-forest );
	--forest-2:  var( --th-forest-3 );
	--gold:      var( --th-gold );
	--gold-soft: var( --th-gold-soft );
	--cream:     var( --th-cream );
	--paper:     var( --th-cream-2 );
	--sand:      var( --bg2 );
	--ink-2:     var( --th-ink-2 );
	--muted:     var( --th-muted );
	--line:      rgba( 28, 24, 20, .13 );
	--red:       var( --th-red );
	--serif:     var( --th-serif );
	--sans:      var( --th-sans );
	--mono:      var( --th-mono );
}

body.btf-vpg-page .prose > .btf-vpg-section { max-width: none; }
body.btf-vpg-page .vpg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; }
body.btf-vpg-page .vph-c { white-space: nowrap; font-weight: 600; color: var( --th-ink ); }
body.btf-vpg-page .vph-c.is-red { color: #A33B2A; }
body.btf-vpg-page :is( .btf-vpg-section, .vpg-picker ) :is( button, select, input, summary, a ):focus-visible,
body.btf-vpg-page .btf-vpg-hero a:focus-visible { outline: 3px solid var( --gold-soft ); outline-offset: 3px; }

/* ── cards ─────────────────────────────────────────────────────────────── */
body.btf-vpg-page .vpg-hand { display: flex; gap: 7px; align-items: flex-start; justify-content: center; min-width: 0; }
body.btf-vpg-page .vpg-card,
body.btf-vpg-page .vpg-card-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; aspect-ratio: .69; background: #FCFAF6; border: 1px solid #A7AA9B; border-radius: 7px; color: var( --forest ); box-shadow: 0 3px 0 rgba( 0, 0, 0, .04 ); overflow: hidden; }
body.btf-vpg-page .vpg-card { max-width: 67px; opacity: .66; }
body.btf-vpg-page .vpg-card.is-held { opacity: 1; border: 2px solid var( --gold-soft ); box-shadow: 0 3px 0 rgba( 0, 0, 0, .09 ); }
body.btf-vpg-page .vpg-card.is-red,
body.btf-vpg-page .vpg-card-btn.is-red,
body.btf-vpg-page .vpg-picker-card.is-red { color: var( --red ); }
body.btf-vpg-page .vpg-card-corner { position: absolute; top: 7px; left: 7px; font: 500 1rem/1.05 var( --sans ); letter-spacing: -.04em; white-space: nowrap; }
body.btf-vpg-page .vpg-card-pip { font: 400 2.4rem/1 var( --serif ); margin-top: 2px; }
body.btf-vpg-page .vpg-card-tag { position: absolute; bottom: 0; left: 0; right: 0; min-height: 19px; display: flex; align-items: center; justify-content: center; color: var( --muted ); background: #E9E5DA; font: 400 .56rem/1.6 var( --mono ); letter-spacing: .045em; text-transform: uppercase; padding: 2px 1px; }
body.btf-vpg-page .is-held > .vpg-card-tag { color: var( --cream ); background: var( --forest ); }

/* ── hero ───────────────────────────────────────────────────────────────── */
@media ( min-width: 960px ) {
	body.btf-vpg-page .vpg-hero-grid { grid-template-columns: 1.25fr 1fr; gap: 2.9rem; }
}
body.btf-vpg-page .btf-vpg-hero .btf-th-hero-prose .hero-intro { margin: 0 0 1.35rem; max-width: 45ch; }
body.btf-vpg-page .btf-vpg-hero .btf-th-hero-prose .vpg-quick { font-family: var( --sans ); font-size: .9rem; line-height: 1.75; color: rgba( 244, 239, 230, .84 ); max-width: 49ch; margin: 0 0 1.7rem; }
body.btf-vpg-page .btf-vpg-hero .vpg-quick strong { color: #fff; font-weight: 600; }
body.btf-vpg-page .vpg-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
body.btf-vpg-page .vpg-hero-cta a { min-height: 46px; }
body.btf-vpg-page .vpg-hero-hand { margin-top: .4rem; padding: 1.55rem 1.45rem 1.4rem; background: rgba( 255, 255, 255, .02 ); border: 1px solid rgba( 255, 255, 255, .16 ); border-radius: 12px; }
body.btf-vpg-page .vpg-hero-hand-title { display: flex; align-items: center; gap: 9px; font: 400 .58rem/1.7 var( --mono ); letter-spacing: .09em; text-transform: uppercase; color: #D0BD8D; }
body.btf-vpg-page .vpg-hero-hand-title::before { content: ''; width: 18px; height: 1px; background: currentColor; flex: none; }
body.btf-vpg-page .vpg-hero-cards { gap: 8px; margin: 1.5rem 0 1.7rem; }
body.btf-vpg-page .vpg-hero-cards .vpg-card { max-width: 68px; }
body.btf-vpg-page .vpg-hero-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid rgba( 255, 255, 255, .15 ); padding-top: 1.2rem; }
body.btf-vpg-page .vpg-hero-compare > div + div { border-left: 1px solid rgba( 255, 255, 255, .15 ); padding-left: 18px; }
body.btf-vpg-page .vpg-hero-compare span { display: block; font-family: var( --sans ); font-size: .75rem; line-height: 1.5; color: #D2DDCE; }
body.btf-vpg-page .vpg-hero-compare strong { display: block; font: 400 2.45rem/1.15 var( --serif ); font-variant-numeric: tabular-nums; color: #E8D29E; margin: 6px 0 4px; }
body.btf-vpg-page .vpg-hero-compare > div + div strong { color: #F0EDE3; }
body.btf-vpg-page .vpg-hero-compare small { display: block; font-family: var( --sans ); color: #C8D3C3; font-size: .62rem; line-height: 1.5; }
body.btf-vpg-page .btf-vpg-hero .vpg-hero-hand .vpg-hero-hand-note { font-family: var( --sans ); font-size: .75rem; line-height: 1.7; color: #CBD6C6; margin: 1.25rem 0 .4rem; }
/* texas-holdem strips hero links to plain text at (0,6,2); this one keeps its underline */
body.btf-vpg-page .btf-vpg-hero :is( .vpg-hero-hand, .vpg-quads ) a.vpg-hero-hand-link:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font: 500 .75rem/1.6 var( --sans ); color: #EEE3C4; text-decoration: underline; text-underline-offset: 3px; }

/* the hero's four-of-a-kind card (Bonus Poker) */
body.btf-vpg-page .vpg-quads { min-width: 0; margin-top: .3rem; padding: 1.6rem 1.6rem 1.35rem; background: #193529; border: 1px solid rgba( 255, 255, 255, .16 ); border-radius: 12px; box-shadow: 0 10px 28px rgba( 16, 38, 27, .08 ); color: var( --cream ); }
body.btf-vpg-page .vpg-quads-label { display: block; margin-bottom: .6rem; font: 400 .625rem/1.7 var( --mono ); letter-spacing: .12em; text-transform: uppercase; color: #D0BD8D; }
body.btf-vpg-page .btf-vpg-hero .vpg-quads .vpg-quads-title { margin: 0 0 1.4rem; font: 400 2.1rem/1.08 var( --serif ); letter-spacing: -.02em; color: var( --cream ); }
body.btf-vpg-page .vpg-quads-title em { font-style: italic; color: #C9A86A; }
body.btf-vpg-page .vpg-quads-row { display: grid; grid-template-columns: 86px minmax( 0, 1fr ) 65px; gap: 13px; align-items: center; padding: 1.1rem 0; border-top: 1px solid rgba( 255, 255, 255, .13 ); }
body.btf-vpg-page .vpg-quads-rank { font: 400 2.2rem/1.1 var( --serif ); letter-spacing: -.055em; color: #F4EFE6; white-space: nowrap; }
body.btf-vpg-page .vpg-quads-name { min-width: 0; font: 400 .75rem/1.6 var( --sans ); color: #C7D5C8; }
body.btf-vpg-page .vpg-quads-award { min-width: 0; text-align: right; color: #E8D29E; font: 400 3.1rem/1 var( --serif ); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
body.btf-vpg-page .vpg-quads-award small { display: block; margin-top: 7px; color: #BDCDBC; font: 400 .56rem/1.5 var( --mono ); letter-spacing: 0; }
body.btf-vpg-page .vpg-quads-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 23px; padding-top: 1.05rem; border-top: 1px solid rgba( 255, 255, 255, .16 ); font: 400 .75rem/1.7 var( --sans ); color: #C7D5C8; }
body.btf-vpg-page .vpg-quads-foot strong { color: #F4EFE6; font-weight: 500; }
body.btf-vpg-page .btf-vpg-hero .vpg-quads .vpg-quads-foot-p { flex: 1 1 200px; margin: 0; font: inherit; color: inherit; }
body.btf-vpg-page .btf-vpg-hero .vpg-quads a.vpg-hero-hand-link:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { margin-top: .5rem; color: #E8D29E; font-size: .82rem; }

/* ── sections ───────────────────────────────────────────────────────────── */
body.btf-vpg-page .btf-vpg-section { padding: 3.8rem 0 3.75rem; background: var( --paper ); border-bottom: 1px solid var( --line ); scroll-margin-top: 80px; }
body.btf-vpg-page .btf-vpg-section.vpg-band { background: var( --sand ); padding-bottom: 2.8rem; }
body.btf-vpg-page .btf-vpg-section .btf-th-eyebrow { margin-bottom: .8rem; }
body.btf-vpg-page .prose .btf-vpg-section h2.btf-th-display { margin: 0 0 1.25rem; font-size: clamp( 2rem, 3.3vw, 2.56rem ); line-height: 1.08; color: var( --th-ink ); }
body.btf-vpg-page .btf-vpg-section .vpg-head { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 2.9rem; margin-bottom: 1.7rem; }
body.btf-vpg-page .btf-vpg-section .vpg-head > div { min-width: 0; }
body.btf-vpg-page .prose .btf-vpg-section .vpg-head h2.btf-th-display { margin-bottom: 0; }
body.btf-vpg-page .btf-vpg-section .vpg-head-lede { margin: 0; color: var( --muted ); font-size: .94rem; line-height: 1.75; }
body.btf-vpg-page .btf-vpg-section .vpg-head-lede strong { color: #4A4840; font-weight: 600; }
body.btf-vpg-page .btf-vpg-section .vpg-intro { max-width: 70ch; color: #383E35; font-size: 1rem; line-height: 1.7; margin: 0 0 1.7rem; }
body.btf-vpg-page .btf-vpg-section .vpg-fine { font-size: .8rem; line-height: 1.65; color: var( --muted ); margin: 0 0 1rem; }
body.btf-vpg-page .btf-vpg-section .vpg-fine a:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { color: var( --forest ); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.btf-vpg-page .vpg-label { display: block; color: var( --gold ); font: 400 .625rem/1.65 var( --mono ); letter-spacing: .09em; text-transform: uppercase; margin-bottom: .5rem; }
body.btf-vpg-page .prose .btf-vpg-section a.vpg-inline-link:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { color: var( --forest ); font-size: .82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
body.btf-vpg-page .vpg-noscript,
body.btf-vpg-page .vpg-error,
body.btf-vpg-page .vpg-chart-warning { border: 1px solid #BD9970; background: #F7EDDC; padding: 15px 18px; color: #5B3820; font-size: .875rem; line-height: 1.6; border-radius: 7px; }
body.btf-vpg-page .btf-vpg-section .vpg-noscript { margin: 0 0 1.25rem; }
body.btf-vpg-page .btf-vpg-section .vpg-error { margin: .9rem 0; }
body.btf-vpg-page .btf-vpg-section .vpg-chart-warning { margin: 0 0 1.25rem; }

/* the steps of a hand, and the callouts */
body.btf-vpg-page .prose ol.vpg-steps { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); list-style: none; margin: 0 0 1.55rem; padding: 0; border: 1px solid var( --line ); border-radius: 10px; background: var( --cream ); overflow: hidden; }
body.btf-vpg-page .prose .vpg-steps > li { display: grid; grid-template-columns: 24px minmax( 0, 1fr ); align-items: start; gap: 12px; margin: 0; padding: 1.55rem 1.4rem; }
body.btf-vpg-page .vpg-steps > li + li { border-left: 1px solid var( --line ); }
body.btf-vpg-page .vpg-step-n { padding-top: 3px; font: 400 .75rem/1.7 var( --mono ); color: var( --gold ); }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-step-title { margin: 0 0 .6rem; font: 600 1.06rem/1.4 var( --sans ); color: var( --forest ); }
body.btf-vpg-page .btf-vpg-section .vpg-step-copy { margin: 0; font-size: .875rem; line-height: 1.75; color: #454B40; }
body.btf-vpg-page .btf-vpg-section .vpg-step-copy a:not(.rc-cta):not(.btn-primary):not(.btn-ghost),
body.btf-vpg-page .btf-vpg-section .vpg-story-copy a:not(.rc-cta):not(.btn-primary):not(.btn-ghost),
body.btf-vpg-page .btf-vpg-section .vpg-game-name a:not(.rc-cta):not(.btn-primary):not(.btn-ghost),
body.btf-vpg-page .btf-vpg-section .vpg-faq-a a:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { color: var( --forest ); font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.btf-vpg-page .vpg-callout { padding: 1.1rem 1.4rem; border-left: 3px solid var( --gold ); background: var( --cream ); }
body.btf-vpg-page .btf-vpg-section .vpg-callout-copy { margin: 0; font-size: .875rem; line-height: 1.85; color: #454B40; }
body.btf-vpg-page .vpg-callout-copy strong { color: var( --forest ); font-weight: 600; }
body.btf-vpg-page .vpg-callout .vpg-text-btn { margin-top: .2rem; font-size: .82rem; line-height: 1.6; }
body.btf-vpg-page .vpg-callout .vpg-text-btn:not( [hidden] ) { display: flex; }
body.btf-vpg-page .vpg-stories + .vpg-callout { margin-top: .4rem; }
body.btf-vpg-page .vpg-callout + .vpg-lesson { margin-top: 1.6rem; }
body.btf-vpg-page .vpg-returns-note + .vpg-callout { margin-top: 1.25rem; }

/* which game you have: three cards (Bonus Poker) */
body.btf-vpg-page .vpg-games { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 15px; margin: 1.55rem 0 1.25rem; }
body.btf-vpg-page .vpg-game { min-width: 0; padding: 1.5rem 1.45rem; background: var( --cream ); border: 1px solid var( --line ); border-radius: 9px; }
body.btf-vpg-page .vpg-game.is-this { padding-top: 1.4rem; background: #E9EDDE; border-color: #B5C2A9; border-top: 3px solid var( --forest ); }
body.btf-vpg-page .vpg-game .vpg-label { font-size: .56rem; margin-bottom: .6rem; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-game-name { margin: 0 0 .8rem; font: 600 1.125rem/1.35 var( --sans ); color: var( --forest ); }
body.btf-vpg-page .btf-vpg-section .vpg-game-copy { margin: 0; font-size: .82rem; line-height: 1.8; color: #454B40; }
body.btf-vpg-page .vpg-game-copy strong { color: var( --forest ); font-weight: 600; }
body.btf-vpg-page .btf-vpg-section .vpg-games-note { font-size: .75rem; margin: 0 0 1.25rem; }

/* fields and buttons */
body.btf-vpg-page .vpg-field { display: flex; flex-direction: column; gap: 8px; font-family: var( --sans ); font-size: .82rem; line-height: 1.5; font-weight: 500; color: var( --th-ink ); }
body.btf-vpg-page .vpg-field select,
body.btf-vpg-page .vpg-field input { display: block; width: 100%; min-height: 44px; padding: 10px; border: 1px solid #BDBDAE; background: #FCFAF6; border-radius: 7px; font: 400 1rem/1.4 var( --sans ); color: var( --th-ink ); }
/* drawn selects: WebKit ignores the height of a native one, which leaves it under 44px */
body.btf-vpg-page .vpg-field select { -webkit-appearance: none; appearance: none; padding-right: 2.4rem; background: #FCFAF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B3A2D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center / 12px 8px; }
body.btf-vpg-page .vpg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 18px; border: 1px solid var( --forest ); border-radius: 8px; background: var( --forest ); color: var( --cream ); font: 600 .82rem/1.5 var( --sans ); cursor: pointer; }
body.btf-vpg-page .vpg-btn:hover { background: var( --forest-2 ); }
body.btf-vpg-page .vpg-btn:disabled { opacity: .55; cursor: default; }
body.btf-vpg-page .vpg-text-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 7px 0; border: 0; background: none; color: var( --forest ); font: 600 .82rem/1.5 var( --sans ); text-decoration: underline; text-underline-offset: 4px; text-align: left; cursor: pointer; }
body.btf-vpg-page .vpg-text-btn:hover { color: var( --gold ); }
body.btf-vpg-page .vpg-text-btn:disabled { opacity: .55; cursor: default; }
body.btf-vpg-page .vpg-text-btn[hidden] { display: none; }

/* ── the site table, refined ────────────────────────────────────────────── */
/* positioned, so the visually hidden labels inside a scrolling table stay inside its scroll box */
body.btf-vpg-page .vpg-table-wrap,
body.btf-vpg-page .vpg-table-wrap .table-scroll-wrap { position: relative; }
body.btf-vpg-page .vpg-table-wrap .table-scroll-wrap { margin-bottom: 0; }
body.btf-vpg-page .prose table.vpg-table { margin: 0; font-family: var( --sans ); }
body.btf-vpg-page .prose .vpg-table thead th { font: 600 .62rem/1.45 var( --mono ); letter-spacing: .07em; text-transform: uppercase; color: rgba( 244, 239, 230, .85 ); padding: .75rem 1rem; text-align: right; vertical-align: bottom; }
body.btf-vpg-page .prose .vpg-table thead th:first-child { text-align: left; }
body.btf-vpg-page .prose .vpg-table thead th span { display: block; font-weight: 400; font-size: .56rem; letter-spacing: .05em; color: rgba( 244, 239, 230, .58 ); }
body.btf-vpg-page .prose .vpg-table thead th span.vpg-sr { display: inline; }
body.btf-vpg-page .prose .vpg-table tbody th { text-align: left; font: 500 .84rem/1.5 var( --sans ); text-transform: none; letter-spacing: 0; color: var( --th-ink ); padding: .6rem 1rem; border-top: 1px solid var( --rule ); }
body.btf-vpg-page .prose .vpg-table td { font: 400 .8rem/1.5 var( --mono ); color: var( --ink-2 ); text-align: right; padding: .6rem 1rem; font-variant-numeric: tabular-nums; }
body.btf-vpg-page .prose .vpg-table tr.is-key th,
body.btf-vpg-page .prose .vpg-table tr.is-key td { background: rgba( 154, 123, 60, .13 ); color: var( --forest ); font-weight: 600; }

/* ── find your pay table ────────────────────────────────────────────────── */
body.btf-vpg-page .vpg-pay-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: start; }
body.btf-vpg-page .vpg-pay-layout > * { min-width: 0; }
body.btf-vpg-page .vpg-pay-controls { padding-top: 3px; }
body.btf-vpg-page .vpg-rtp { padding: 1.45rem 0 1.25rem; border-bottom: 1px solid var( --line ); margin-bottom: 1.1rem; }
body.btf-vpg-page .vpg-rtp > strong { display: block; color: var( --forest ); font: 400 3.25rem/1.05 var( --serif ); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
body.btf-vpg-page .btf-vpg-section .vpg-rtp-copy { font-size: .875rem; line-height: 1.65; color: var( --th-ink ); margin: .9rem 0 0; max-width: 40ch; }
body.btf-vpg-page .btf-vpg-section .vpg-pay-controls .vpg-fine { font-size: .75rem; margin-bottom: .9rem; }
body.btf-vpg-page .vpg-returns { display: grid; grid-template-columns: repeat( 4, 1fr ); margin-top: 1.6rem; padding: 1.05rem 0; border-top: 1px solid var( --line ); border-bottom: 1px solid var( --line ); }
body.btf-vpg-page .vpg-returns > div { display: flex; flex-direction: column; gap: 2px; padding: 0 1.45rem; }
body.btf-vpg-page .vpg-returns > div:first-child { padding-left: 0; }
body.btf-vpg-page .vpg-returns > div + div { border-left: 1px solid var( --line ); }
body.btf-vpg-page .vpg-returns span { font: 400 .69rem/1.6 var( --mono ); color: var( --muted ); }
body.btf-vpg-page .vpg-returns strong { font: 400 1.8rem/1.25 var( --serif ); color: var( --forest ); font-variant-numeric: tabular-nums; }
body.btf-vpg-page .btf-vpg-section .vpg-returns-note { font-size: .69rem; margin: .8rem 0 0; }
body.btf-vpg-page .vpg-returns.is-six { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
body.btf-vpg-page .vpg-returns.is-six > div { min-width: 0; padding: 0 1rem; }
body.btf-vpg-page .vpg-returns.is-six > div:first-child { padding-left: 0; }
body.btf-vpg-page .vpg-returns.is-six strong { font-size: 1.75rem; }
body.btf-vpg-page .vpg-lesson { display: grid; grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr ); align-items: center; gap: 2.6rem; margin-top: 1.9rem; padding-top: 1.8rem; border-top: 1px solid var( --line ); }
body.btf-vpg-page .vpg-lesson > * { min-width: 0; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-lesson-title { margin: .6rem 0 .8rem; font: 400 1.8rem/1.15 var( --serif ); letter-spacing: -.02em; color: var( --forest ); }
body.btf-vpg-page .btf-vpg-section .vpg-lesson-copy { margin: 0 0 .6rem; font-size: .875rem; line-height: 1.8; color: var( --th-ink ); }
body.btf-vpg-page .vpg-lesson .vpg-text-btn { font-size: .82rem; line-height: 1.65; }
body.btf-vpg-page .vpg-lesson-cards { justify-self: end; width: 100%; max-width: 345px; padding: 1.5rem 1.25rem; background: var( --cream ); border: 1px solid var( --line ); border-radius: 9px; }
body.btf-vpg-page .vpg-lesson-cards .vpg-hand { gap: 6px; }
body.btf-vpg-page .vpg-lesson-cards .vpg-card { max-width: 55px; }
body.btf-vpg-page .vpg-lesson-cards .vpg-card-pip { font-size: 1.95rem; }
body.btf-vpg-page .vpg-lesson-cards .vpg-card-corner { font-size: .875rem; left: 5px; top: 6px; }
body.btf-vpg-page .vpg-lesson-cards .vpg-card-tag { font-size: .5rem; min-height: 16px; }
body.btf-vpg-page .vpg-lesson.is-key .vpg-lesson-cards { background: #E9EDDE; border-color: #C7CFBC; }
body.btf-vpg-page .vpg-returns.is-three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); padding: 1.25rem 0; }
body.btf-vpg-page .vpg-returns.is-three > div { min-width: 0; padding: 0 1.55rem; }
body.btf-vpg-page .vpg-returns.is-three > div:first-child { padding-left: 0; }
body.btf-vpg-page .vpg-returns.is-three span { font: 400 .75rem/1.6 var( --sans ); text-transform: uppercase; letter-spacing: .02em; }
body.btf-vpg-page .vpg-returns.is-three strong { font-size: 2.3rem; }
body.btf-vpg-page .vpg-more { margin-top: 1.1rem; border-top: 1px solid var( --line ); border-bottom: 1px solid var( --line ); }
body.btf-vpg-page .vpg-more > summary { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: 1.1rem 1.8rem 1.1rem 0; color: var( --forest ); font: 500 .94rem/1.65 var( --sans ); cursor: pointer; list-style: none; }
body.btf-vpg-page .vpg-more > summary::-webkit-details-marker { display: none; }
body.btf-vpg-page .vpg-more > summary::before { content: ''; flex: none; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var( --gold ); transition: transform .15s; }
body.btf-vpg-page .vpg-more[open] > summary::before { transform: rotate( 90deg ); }
body.btf-vpg-page .btf-vpg-section .vpg-more-lede { max-width: 80ch; margin: 0 0 .5rem; font-size: .875rem; line-height: 1.8; color: var( --muted ); }
body.btf-vpg-page .vpg-change-item { padding: 1.25rem 0; border-top: 1px solid var( --line ); }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-change-title { margin: 0 0 .45rem; font: 600 1rem/1.4 var( --sans ); color: var( --forest ); }
body.btf-vpg-page .btf-vpg-section .vpg-change-copy { max-width: 78ch; margin: 0 0 .35rem; font-size: .875rem; line-height: 1.8; color: var( --th-ink ); }
body.btf-vpg-page .vpg-change-copy strong { font-weight: 600; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-compare-title { margin: 1.7rem 0 .6rem; font: 600 1.125rem/1.4 var( --sans ); color: var( --th-ink ); }
body.btf-vpg-page .btf-vpg-section .vpg-compare-copy { max-width: 92ch; margin: 0 0 .8rem; font-size: 1rem; line-height: 1.75; color: var( --th-ink ); }
body.btf-vpg-page .vpg-compare-copy strong { font-weight: 600; }

/* ── the analyzer ───────────────────────────────────────────────────────── */
body.btf-vpg-page .vpg-analyzer { padding: 1.7rem; background: var( --paper ); border: 1px solid #D0C9BB; border-radius: 12px; box-shadow: 0 6px 24px rgba( 33, 62, 49, .02 ); }
body.btf-vpg-page .vpg-analyzer-top { display: flex; align-items: center; gap: 1.1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var( --line ); }
body.btf-vpg-page .vpg-analyzer-name { flex: 1; min-width: 0; }
body.btf-vpg-page .vpg-analyzer-name .vpg-label { margin-bottom: 2px; }
body.btf-vpg-page .vpg-analyzer-name strong { display: block; color: var( --forest ); font: 500 1rem/1.5 var( --sans ); }
body.btf-vpg-page .vpg-analyzer-top select { -webkit-appearance: none; appearance: none; min-width: 104px; min-height: 44px; padding: 8px 2.1rem 8px 10px; border: 1px solid #B9BEAD; border-radius: 6px; color: var( --forest ); background: var( --cream ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B3A2D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .75rem center / 12px 8px; font: 400 .875rem/1.4 var( --sans ); }
body.btf-vpg-page .vpg-basis { max-width: 200px; padding-left: 1.1rem; border-left: 1px solid var( --line ); font: 400 .625rem/1.75 var( --mono ); color: var( --muted ); }
body.btf-vpg-page .vpg-editor { display: grid; grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); gap: 14px; max-width: 650px; margin: 1.75rem auto 1.05rem; }
body.btf-vpg-page .vpg-edit { min-width: 0; text-align: center; }
body.btf-vpg-page .vpg-editor .vpg-card { max-width: none; width: 100%; aspect-ratio: .75; border-width: 2px; }
body.btf-vpg-page .vpg-card-btn { width: 100%; padding: 0; aspect-ratio: .75; opacity: .75; border-width: 2px; border-color: #B7B9AD; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s, opacity .15s; }
body.btf-vpg-page .vpg-card-btn:hover { transform: translateY( -3px ); opacity: 1; border-color: var( --gold ); }
body.btf-vpg-page .vpg-card-btn.is-held { opacity: 1; border-color: var( --gold-soft ); box-shadow: 0 4px 0 #D3C19A; }
body.btf-vpg-page .vpg-editor .vpg-card-corner { font-size: 1.45rem; top: 11px; left: 11px; }
body.btf-vpg-page .vpg-editor .vpg-card-pip { font-size: 3.55rem; }
body.btf-vpg-page .vpg-editor .vpg-card-tag { min-height: 25px; font-size: .625rem; padding: 4px; }
body.btf-vpg-page .vpg-change { display: block; width: 100%; min-height: 44px; margin-top: 5px; padding: 8px 2px; border: 0; border-radius: 4px; background: none; color: var( --muted ); font: 400 .69rem/1.35 var( --sans ); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.btf-vpg-page .vpg-change:hover { color: var( --forest ); background: var( --cream ); }
body.btf-vpg-page .vpg-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.5rem; }
body.btf-vpg-page .vpg-actions .vpg-text-btn { font-size: .75rem; }
body.btf-vpg-page .vpg-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 1.2rem; border-top: 1px solid var( --line ); }
body.btf-vpg-page .vpg-presets-label { margin-right: 4px; font-family: var( --sans ); font-size: .75rem; color: var( --muted ); }
body.btf-vpg-page .vpg-presets button { min-height: 44px; padding: 7px 11px; border: 1px solid var( --line ); border-radius: 6px; background: var( --cream ); color: var( --forest ); font: 400 .72rem/1.4 var( --sans ); cursor: pointer; }
body.btf-vpg-page .vpg-presets button:hover { border-color: var( --gold ); background: #EEE7D8; }
body.btf-vpg-page .vpg-presets button[aria-pressed="true"] { border-color: var( --gold-soft ); background: #F2E9D3; }
body.btf-vpg-page .vpg-presets button:disabled { opacity: .55; cursor: default; }
body.btf-vpg-page .btf-vpg-section .vpg-preset-note { font-size: .69rem; line-height: 1.7; color: var( --muted ); margin: .6rem 0 1.4rem; }
body.btf-vpg-page .vpg-results { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #C6CBBD; border-radius: 8px; overflow: hidden; }
body.btf-vpg-page .vpg-best,
body.btf-vpg-page .vpg-yours { padding: 1.45rem 1.55rem; min-width: 0; }
body.btf-vpg-page .vpg-best { background: var( --forest ); color: var( --cream ); }
body.btf-vpg-page .vpg-yours { background: #EFF0E7; }
body.btf-vpg-page .vpg-best .vpg-label { color: #D5C391; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-result-hold { margin: .5rem 0 .8rem; min-height: 26px; font: 500 1.06rem/1.5 var( --sans ); color: inherit; }
body.btf-vpg-page .prose .btf-vpg-section .vpg-yours h3.vpg-result-hold { color: var( --th-ink ); }
body.btf-vpg-page .vpg-results strong { display: block; font: 400 3.06rem/1.08 var( --serif ); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
body.btf-vpg-page .vpg-yours strong { color: var( --forest ); }
body.btf-vpg-page .vpg-unit { display: block; margin-top: 5px; font: 400 .69rem/1.6 var( --sans ); }
body.btf-vpg-page .vpg-best .vpg-unit { color: #CFDBC9; }
body.btf-vpg-page .vpg-yours .vpg-unit { color: var( --muted ); }
body.btf-vpg-page .btf-vpg-section .vpg-result-detail { font-size: .75rem; line-height: 1.7; margin: 1rem 0 0; }
body.btf-vpg-page .btf-vpg-section .vpg-best .vpg-result-detail { color: #D8E0D1; }
body.btf-vpg-page .btf-vpg-section .vpg-yours .vpg-result-detail { color: #43523E; }
body.btf-vpg-page .vpg-why { padding: 1.3rem 0 1.25rem; border-bottom: 1px solid var( --line ); }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-why-title { margin: 0 0 .45rem; font: 600 1rem/1.4 var( --sans ); color: var( --th-ink ); }
body.btf-vpg-page .btf-vpg-section .vpg-why-copy { font-size: .875rem; line-height: 1.75; color: var( --th-ink ); margin: 0; max-width: 91ch; }
body.btf-vpg-page .vpg-outcomes,
body.btf-vpg-page .vpg-holds,
body.btf-vpg-page .vpg-method { border-bottom: 1px solid var( --line ); }
body.btf-vpg-page .vpg-outcomes > summary,
body.btf-vpg-page .vpg-holds > summary,
body.btf-vpg-page .vpg-method > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .8rem 0; color: var( --forest ); font: 500 .82rem/1.6 var( --sans ); cursor: pointer; list-style: none; }
body.btf-vpg-page .vpg-outcomes > summary::-webkit-details-marker,
body.btf-vpg-page .vpg-holds > summary::-webkit-details-marker,
body.btf-vpg-page .vpg-method > summary::-webkit-details-marker { display: none; }
body.btf-vpg-page .vpg-outcomes > summary::before,
body.btf-vpg-page .vpg-holds > summary::before,
body.btf-vpg-page .vpg-method > summary::before { content: ''; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var( --gold ); transition: transform .15s; }
body.btf-vpg-page .vpg-outcomes[open] > summary::before,
body.btf-vpg-page .vpg-holds[open] > summary::before,
body.btf-vpg-page .vpg-method[open] > summary::before { transform: rotate( 90deg ); }
body.btf-vpg-page .btf-vpg-section .vpg-outcomes-intro { max-width: 80ch; margin: 0 0 1rem; font-size: .8rem; line-height: 1.8; color: var( --muted ); }
body.btf-vpg-page .btf-vpg-section .vpg-scroll-hint { display: none; font-size: .625rem; color: var( --muted ); margin: -.3rem 0 .55rem; }
body.btf-vpg-page .vpg-holds-scroll { overflow-x: auto; margin-bottom: 1.1rem; }
body.btf-vpg-page .prose table.vpg-holds-table { min-width: 550px; }
body.btf-vpg-page .prose table.vpg-outcomes-table { min-width: 0; }
body.btf-vpg-page .prose .vpg-holds-table tbody th,
body.btf-vpg-page .prose .vpg-holds-table td { padding: .55rem .9rem; font-size: .76rem; }
body.btf-vpg-page .prose .vpg-holds-table tr.is-best th,
body.btf-vpg-page .prose .vpg-holds-table tr.is-best td { background: #E8EDDE; }
body.btf-vpg-page .prose .vpg-holds-table tr.is-yours th { box-shadow: inset 3px 0 0 var( --gold-soft ); }
body.btf-vpg-page .vpg-badge { display: inline-block; margin: 2px 0 1px 6px; padding: 1px 5px; border: 1px solid #BEC9B2; border-radius: 3px; background: #F8FAF3; color: var( --forest ); font: 400 .56rem/1.5 var( --mono ); white-space: nowrap; vertical-align: 1px; }
body.btf-vpg-page .btf-vpg-section .vpg-method-copy { font-size: .75rem; line-height: 1.8; color: var( --muted ); margin: 0 0 .95rem; max-width: 100ch; }
body.btf-vpg-page .btf-vpg-section .vpg-analyzer-foot { font-size: .69rem; line-height: 1.8; margin: 1.05rem 0 0; max-width: 95ch; }

/* the card picker */
body.btf-vpg-page .vpg-picker { width: min( 740px, calc( 100vw - 32px ) ); max-height: calc( 100dvh - 48px ); margin: auto; padding: 1.55rem 1.75rem 1.75rem; border: 1px solid #C5C8B6; border-radius: 13px; background: var( --paper ); color: var( --th-ink ); box-shadow: 0 15px 70px rgba( 0, 0, 0, .33 ); overflow-y: auto; }
body.btf-vpg-page .vpg-picker::backdrop { background: rgba( 18, 37, 31, .84 ); backdrop-filter: blur( 3px ); }
body.btf-vpg-page .vpg-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.btf-vpg-page .vpg-picker-head .vpg-label { margin-bottom: 0; }
body.btf-vpg-page .prose h2.vpg-picker-title { margin: 3px 0 .75rem; font: 400 2.1rem/1.08 var( --serif ); letter-spacing: -.02em; color: var( --th-ink ); }
body.btf-vpg-page .vpg-picker-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var( --line ); border-radius: 50%; background: var( --cream ); color: var( --forest ); font: 400 1.7rem/1 var( --serif ); cursor: pointer; }
body.btf-vpg-page .prose .vpg-picker .vpg-picker-note { margin: 0 0 1.25rem; font-size: .75rem; line-height: 1.6; color: var( --muted ); }
body.btf-vpg-page .vpg-picker-suit + .vpg-picker-suit { margin-top: 1.05rem; }
body.btf-vpg-page .prose h3.vpg-picker-suit-name { margin: 0 0 7px; font: 500 .75rem/1.6 var( --sans ); color: var( --forest ); }
body.btf-vpg-page .vpg-picker-grid { display: grid; grid-template-columns: repeat( 13, minmax( 0, 1fr ) ); gap: 5px; }
body.btf-vpg-page .vpg-picker-card { min-height: 45px; padding: 5px 0; border: 1px solid #B9C0AE; border-radius: 5px; background: #FCFAF6; color: var( --forest ); font: 400 .82rem/1.5 var( --sans ); white-space: nowrap; cursor: pointer; }
body.btf-vpg-page .vpg-picker-card:hover:not( :disabled ) { background: var( --cream ); border-color: var( --forest ); }
body.btf-vpg-page .vpg-picker-card.is-current { outline: 2px solid var( --gold-soft ); outline-offset: 0; background: #F2E9D3; }
body.btf-vpg-page .vpg-picker-card:disabled { background: #E7E5DF; color: #817F76; border-color: #D6D3CA; opacity: .6; text-decoration: line-through; cursor: default; }

/* ── same cards, a different reason ─────────────────────────────────────── */
body.btf-vpg-page .vpg-stories { margin-top: 1.95rem; }
body.btf-vpg-page .vpg-story { display: grid; grid-template-columns: .75fr 1.35fr; gap: 2.7rem; align-items: center; padding: 1.9rem 0; border-top: 1px solid var( --line ); }
body.btf-vpg-page .vpg-story > * { min-width: 0; }
body.btf-vpg-page .vpg-story-cards { padding: 1.6rem 1.25rem; background: var( --cream ); border: 1px solid var( --line ); border-radius: 9px; }
body.btf-vpg-page .vpg-story-cards .vpg-hand { gap: 6px; }
body.btf-vpg-page .vpg-story-cards .vpg-card { max-width: 55px; }
body.btf-vpg-page .vpg-story-cards .vpg-card-pip { font-size: 1.95rem; }
body.btf-vpg-page .vpg-story-cards .vpg-card-corner { font-size: .875rem; left: 5px; top: 6px; }
body.btf-vpg-page .vpg-story-cards .vpg-card-tag { font-size: .5rem; min-height: 16px; }
body.btf-vpg-page .vpg-story .vpg-label { font-size: .56rem; margin-bottom: .45rem; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-story-title { margin: 0 0 .75rem; font: 400 1.8rem/1.15 var( --serif ); letter-spacing: -.01em; color: var( --forest ); }
body.btf-vpg-page .btf-vpg-section .vpg-story-copy { font-size: .875rem; line-height: 1.8; color: var( --th-ink ); margin: 0 0 .55rem; }
body.btf-vpg-page .vpg-story-copy strong { font-weight: 600; }

/* ── the chart ──────────────────────────────────────────────────────────── */
body.btf-vpg-page .vpg-chart-toolbar { display: flex; align-items: flex-end; gap: 1.25rem; margin: 1.45rem 0 .6rem; }
body.btf-vpg-page .vpg-chart-toolbar .vpg-field { flex: 1; max-width: 460px; }
body.btf-vpg-page .vpg-chart-toolbar input { padding: 11px 13px; font-size: .94rem; }
body.btf-vpg-page .vpg-chart-toolbar[hidden] { display: none; }
body.btf-vpg-page .btf-vpg-section .vpg-chart-status { font-size: .75rem; line-height: 1.75; color: var( --muted ); max-width: 94ch; margin: 0 0 1.4rem; }
body.btf-vpg-page .vpg-chart-details { border: 1px solid var( --line ); border-radius: 9px; background: var( --paper ); overflow: hidden; }
body.btf-vpg-page .vpg-chart-details > summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 44px; padding: 1.05rem 1.4rem; background: var( --forest ); color: var( --cream ); font: 500 .94rem/1.6 var( --sans ); cursor: pointer; list-style: none; }
body.btf-vpg-page .vpg-chart-details > summary::-webkit-details-marker { display: none; }
body.btf-vpg-page .vpg-chart-details > summary > span { transition: transform .2s; }
body.btf-vpg-page .vpg-chart-details[open] > summary > span { transform: rotate( 180deg ); }
body.btf-vpg-page .btf-vpg-section .vpg-print-title { display: none; }
body.btf-vpg-page .vpg-key { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: .9rem 1.25rem; background: var( --cream ); font: 400 .66rem/1.5 var( --sans ); color: var( --muted ); }
body.btf-vpg-page .vpg-key span { display: flex; align-items: center; gap: 6px; }
body.btf-vpg-page .vpg-key i { display: inline-block; width: 12px; height: 16px; border: 1px solid #AAA99B; background: #FAF8F2; border-radius: 2px; }
body.btf-vpg-page .vpg-key i.is-held { border: 2px solid var( --gold-soft ); border-bottom: 4px solid var( --forest ); }
body.btf-vpg-page .vpg-chart-scroll { overflow-x: auto; }
body.btf-vpg-page .prose table.vpg-chart-table { min-width: 660px; border: 0; border-radius: 0; }
body.btf-vpg-page .prose .vpg-chart-table thead th:nth-child( 1 ) { width: 4.2rem; padding-left: 1.25rem; }
body.btf-vpg-page .prose .vpg-chart-table thead th:nth-child( 2 ),
body.btf-vpg-page .prose .vpg-chart-table thead th:nth-child( 3 ) { text-align: left; }
body.btf-vpg-page .prose .vpg-chart-table thead th:nth-child( 2 ) { width: 40%; }
body.btf-vpg-page .prose .vpg-chart-table thead th:nth-child( 4 ) { width: 6rem; }
/* on screen the chart opens right under the felt summary bar, so its header is light (as in the
   mocks), not the felt site header; the printed chart keeps the felt one */
@media screen {
	body.btf-vpg-page .vpg-key { border-bottom: 1px solid var( --line ); }
	body.btf-vpg-page .prose .vpg-chart-table thead { background: #F4F1E9; }
	body.btf-vpg-page .prose .vpg-chart-table thead th { color: var( --muted ); font-weight: 400; letter-spacing: .04em; }
}
body.btf-vpg-page .prose .vpg-chart-table tbody th,
body.btf-vpg-page .prose .vpg-chart-table td { vertical-align: middle; padding-top: .7rem; padding-bottom: .7rem; }
body.btf-vpg-page .prose .vpg-chart-table tbody th { font-size: .82rem; font-weight: 600; }
body.btf-vpg-page .prose .vpg-chart-table td.vpg-rank { text-align: left; padding-left: 1.25rem; font: 400 .69rem/1.5 var( --mono ); color: var( --gold ); }
body.btf-vpg-page .prose .vpg-chart-table td.vpg-chart-example { text-align: left; min-width: 193px; }
body.btf-vpg-page .prose .vpg-chart-table td.vpg-chart-act { text-align: right; padding-right: .9rem; }
body.btf-vpg-page .vpg-chart-row { scroll-margin-top: 90px; }
body.btf-vpg-page .vpg-chart-example .vpg-hand { justify-content: flex-start; gap: 4px; }
body.btf-vpg-page .vpg-chart-example .vpg-card { flex: 0 0 33px; width: 33px; max-width: 33px; aspect-ratio: .68; border-radius: 4px; box-shadow: none; }
body.btf-vpg-page .vpg-chart-example .vpg-card-corner { font-size: .56rem; left: 3px; top: 3px; }
body.btf-vpg-page .vpg-chart-example .vpg-card-pip { font-size: 1.2rem; margin-top: 1px; }
body.btf-vpg-page .vpg-chart-example .vpg-card-tag { min-height: 10px; padding: 1px 0; font-size: 5px; line-height: 1.2; }
body.btf-vpg-page .prose .btf-vpg-section a.vpg-note-ref:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { display: inline-block; margin-left: 4px; font: 400 .625rem/1.5 var( --mono ); color: var( --gold ); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
body.btf-vpg-page .vpg-analyze { min-height: 44px; padding: 6px 9px; border: 1px solid #CBCBBB; border-radius: 5px; background: var( --paper ); color: var( --forest ); font: 400 .66rem/1.4 var( --sans ); white-space: nowrap; cursor: pointer; }
body.btf-vpg-page .vpg-analyze:hover { border-color: var( --forest ); background: var( --cream ); }
body.btf-vpg-page .vpg-analyze[hidden] { display: none; }
body.btf-vpg-page .btf-vpg-section .vpg-chart-empty { padding: 1.4rem; margin: 0; font-size: .875rem; }
body.btf-vpg-page .vpg-chart-terms,
body.btf-vpg-page .vpg-chart-notes { padding: 1.45rem 1.5rem 0; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-chart-h { margin: 0 0 1rem; font: 400 1.56rem/1.2 var( --serif ); color: var( --forest ); }
body.btf-vpg-page .vpg-chart-terms dl { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin: 0; }
body.btf-vpg-page .vpg-chart-terms dt { margin-bottom: 5px; font: 600 .75rem/1.5 var( --sans ); color: var( --th-ink ); }
body.btf-vpg-page .vpg-chart-terms dd { margin: 0; font: 400 .75rem/1.8 var( --sans ); color: var( --muted ); }
body.btf-vpg-page .vpg-chart-notes { padding-top: 1.75rem; }
body.btf-vpg-page .btf-vpg-section .vpg-chart-notes-lede { font-size: .75rem; line-height: 1.75; color: var( --th-ink ); margin: 0 0 .8rem; }
body.btf-vpg-page .prose .vpg-chart-notes ol { list-style: none; counter-reset: vpg-note; margin: 0 0 1rem; padding: 0; }
body.btf-vpg-page .prose .vpg-chart-notes li { counter-increment: vpg-note; position: relative; margin: 0 0 .8rem; padding-left: 1.5rem; font: 400 .75rem/1.8 var( --sans ); color: var( --th-ink ); scroll-margin-top: 135px; }
body.btf-vpg-page .prose .vpg-chart-notes li::before { content: counter( vpg-note ) '.'; position: absolute; left: 0; top: 0; font-weight: 600; color: var( --gold ); }
body.btf-vpg-page .vpg-note-ex { display: block; font-size: .72rem; color: var( --muted ); }
body.btf-vpg-page .btf-vpg-section .vpg-chart-fine { padding: 0 1.5rem 1.5rem; margin: 0; font-size: .69rem; }

/* ── five credits is a wager ────────────────────────────────────────────── */
body.btf-vpg-page .vpg-money { display: grid; grid-template-columns: 1.45fr .8fr; gap: 2.8rem; align-items: start; }
body.btf-vpg-page .vpg-money > * { min-width: 0; }
body.btf-vpg-page .btf-vpg-section .vpg-money-p { font-size: .94rem; line-height: 1.8; color: var( --th-ink ); margin: 0 0 1.1rem; }
body.btf-vpg-page .btf-vpg-section .vpg-money-p:last-child { margin-bottom: 0; }
body.btf-vpg-page .vpg-money-p strong { font-weight: 600; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-money-h { margin: 1.7rem 0 .6rem; font: 600 1.125rem/1.4 var( --sans ); color: var( --th-ink ); }
body.btf-vpg-page .vpg-credits { margin-top: 2rem; padding: 1.5rem; background: var( --cream ); border: 1px solid var( --line ); border-top: 3px solid var( --gold ); border-radius: 8px; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-credits-title { margin: 0 0 .5rem; font: 400 1.75rem/1.15 var( --serif ); color: var( --forest ); }
body.btf-vpg-page .btf-vpg-section .vpg-credits-sub { margin: 0 0 .9rem; font-size: .69rem; line-height: 1.7; color: var( --muted ); }
body.btf-vpg-page .btf-vpg-section .vpg-credits-note { margin: 1rem 0 0; font-size: .69rem; line-height: 1.8; color: var( --muted ); }

/* ── questions ──────────────────────────────────────────────────────────── */
body.btf-vpg-page .vpg-variants { display: grid; grid-template-columns: repeat( 3, 1fr ); margin: 1.55rem 0 .8rem; background: var( --cream ); border: 1px solid var( --line ); border-radius: 8px; overflow: hidden; }
body.btf-vpg-page .vpg-variants > div { padding: 1.4rem; }
body.btf-vpg-page .vpg-variants > div + div { border-left: 1px solid var( --line ); }
body.btf-vpg-page .vpg-variants > div.is-this { background: #E9EDDE; }
body.btf-vpg-page .prose .btf-vpg-section h3.vpg-variant-name { margin: 0 0 .6rem; font: 600 1rem/1.4 var( --sans ); color: var( --forest ); }
body.btf-vpg-page .btf-vpg-section .vpg-variant-copy { margin: 0; font-size: .82rem; line-height: 1.75; color: var( --th-ink ); }
body.btf-vpg-page .btf-vpg-section .vpg-variants-note { font-size: .69rem; }
body.btf-vpg-page .vpg-faq { margin-top: 1.55rem; }
body.btf-vpg-page .vpg-faq details { border-bottom: 1px solid var( --line ); }
body.btf-vpg-page .vpg-faq summary { position: relative; padding: 1.35rem 2.2rem 1.35rem 0; font: 500 1.06rem/1.5 var( --sans ); color: var( --th-ink ); list-style: none; cursor: pointer; }
body.btf-vpg-page .vpg-faq summary::-webkit-details-marker { display: none; }
body.btf-vpg-page .vpg-faq summary::after { content: '+'; position: absolute; right: 3px; top: 1.32rem; font: 400 1.56rem/1 var( --serif ); color: var( --gold ); }
body.btf-vpg-page .vpg-faq details[open] summary::after { content: '\2212'; }
body.btf-vpg-page .btf-vpg-section .vpg-faq-a { max-width: 77ch; margin: 0 0 1.45rem; padding-right: 1.6rem; font-size: .94rem; line-height: 1.7; color: var( --th-ink ); }

/* ── smaller screens ────────────────────────────────────────────────────── */
@media ( max-width: 1000px ) {
	body.btf-vpg-page .btf-vpg-section .vpg-head { gap: 1.9rem; }
	body.btf-vpg-page .vpg-pay-layout { gap: 1.75rem; }
	body.btf-vpg-page .vpg-hero-hand { padding: 1.3rem 1.1rem; }
	body.btf-vpg-page .vpg-hero-compare { gap: 12px; }
	body.btf-vpg-page .vpg-hero-compare > div + div { padding-left: 12px; }
	body.btf-vpg-page .vpg-hero-compare strong { font-size: 2.2rem; }
	body.btf-vpg-page .vpg-story { gap: 1.9rem; grid-template-columns: .85fr 1.35fr; }
	body.btf-vpg-page .vpg-story-cards { padding: 1.45rem .95rem; }
	body.btf-vpg-page .vpg-money { gap: 1.9rem; }
	body.btf-vpg-page .vpg-credits { padding: 1.25rem; }
	body.btf-vpg-page .prose .vpg-steps > li { padding: 1.4rem 1.05rem; gap: 9px; grid-template-columns: 21px minmax( 0, 1fr ); }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-step-title { font-size: 1rem; }
	body.btf-vpg-page .vpg-returns.is-six { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); padding: 0; }
	body.btf-vpg-page .vpg-returns.is-six > div,
	body.btf-vpg-page .vpg-returns.is-six > div:first-child { padding: 1rem 1.25rem; }
	body.btf-vpg-page .vpg-returns.is-six > div:nth-child( 3n + 1 ) { border-left: 0; }
	body.btf-vpg-page .vpg-returns.is-six > div:nth-child( n + 4 ) { border-top: 1px solid var( --line ); }
	body.btf-vpg-page .vpg-lesson { gap: 1.75rem; }
	body.btf-vpg-page .vpg-quads { padding: 1.5rem 1.25rem 1.3rem; }
	body.btf-vpg-page .vpg-quads-row { grid-template-columns: 71px minmax( 0, 1fr ) 57px; gap: 10px; }
	body.btf-vpg-page .vpg-quads-rank { font-size: 1.95rem; }
	body.btf-vpg-page .vpg-quads-award { font-size: 2.8rem; }
	body.btf-vpg-page .vpg-game { padding: 1.3rem 1.1rem; }
	body.btf-vpg-page .vpg-game.is-this { padding-top: 1.2rem; }
	body.btf-vpg-page .vpg-returns.is-three > div { padding: 0 1.25rem; }
}
@media ( max-width: 760px ) {
	body.btf-vpg-page .btf-vpg-section { padding: 2.6rem 0; }
	body.btf-vpg-page .btf-vpg-section.vpg-band { padding: 2.6rem 0 2.2rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-head { grid-template-columns: 1fr; gap: .95rem; margin-bottom: 1.5rem; }
	body.btf-vpg-page .vpg-hero-hand { max-width: 490px; padding: 1.5rem; }
	body.btf-vpg-page .vpg-hero-cards { max-width: 385px; margin-left: auto; margin-right: auto; }
	body.btf-vpg-page .vpg-pay-layout { grid-template-columns: 1fr; gap: 1.5rem; }
	body.btf-vpg-page .vpg-rtp > strong { font-size: 3rem; }
	body.btf-vpg-page .vpg-analyzer { padding: 1.4rem; }
	body.btf-vpg-page .vpg-analyzer-top { flex-wrap: wrap; gap: .6rem .95rem; }
	body.btf-vpg-page .vpg-basis { flex-basis: 100%; max-width: none; padding: 0; border-left: 0; }
	body.btf-vpg-page .vpg-editor { gap: 9px; }
	body.btf-vpg-page .vpg-editor .vpg-card-corner { font-size: 1.25rem; top: 9px; left: 8px; }
	body.btf-vpg-page .vpg-editor .vpg-card-pip { font-size: 2.95rem; }
	body.btf-vpg-page .vpg-best,
	body.btf-vpg-page .vpg-yours { padding: 1.4rem 1.2rem; }
	body.btf-vpg-page .vpg-results strong { font-size: 2.7rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-scroll-hint { display: block; }
	body.btf-vpg-page .vpg-story { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.7rem 0; }
	body.btf-vpg-page .vpg-story-cards { max-width: 340px; width: 100%; padding: 1.45rem; }
	body.btf-vpg-page .vpg-money { grid-template-columns: 1fr; gap: 0; }
	body.btf-vpg-page .vpg-credits { max-width: 450px; margin-top: 1.6rem; }
	body.btf-vpg-page .vpg-variants > div { padding: 1.15rem; }
	body.btf-vpg-page .vpg-chart-toolbar { gap: .9rem; }
	body.btf-vpg-page .vpg-chart-terms dl { gap: 18px 20px; }
	body.btf-vpg-page .vpg-chart-terms,
	body.btf-vpg-page .vpg-chart-notes { padding-left: 1.25rem; padding-right: 1.25rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-chart-fine { padding-left: 1.25rem; padding-right: 1.25rem; }
	body.btf-vpg-page .vpg-picker-grid { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); gap: 6px; }
	body.btf-vpg-page .vpg-picker-card { min-height: 44px; }
	body.btf-vpg-page .prose ol.vpg-steps { grid-template-columns: 1fr; margin-bottom: 1.3rem; }
	body.btf-vpg-page .prose .vpg-steps > li { padding: 1.45rem; grid-template-columns: 26px minmax( 0, 1fr ); gap: 14px; }
	body.btf-vpg-page .vpg-steps > li + li { border-left: 0; border-top: 1px solid var( --line ); }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-step-title { font-size: 1.06rem; margin-bottom: .45rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-step-copy { max-width: 70ch; }
	body.btf-vpg-page .vpg-callout { padding: 1.05rem 1.3rem; }
	body.btf-vpg-page .vpg-lesson { grid-template-columns: 1fr; gap: 1.4rem; }
	body.btf-vpg-page .vpg-lesson-cards { justify-self: start; max-width: 340px; }
	body.btf-vpg-page .vpg-quads { width: 100%; max-width: 490px; margin-top: 0; padding: 1.6rem; }
	body.btf-vpg-page .vpg-quads-row { grid-template-columns: 95px minmax( 0, 1fr ) 70px; gap: 16px; }
	body.btf-vpg-page .vpg-quads-rank { font-size: 2.4rem; }
	body.btf-vpg-page .vpg-quads-award { font-size: 3.25rem; }
	body.btf-vpg-page .vpg-quads-name { font-size: .82rem; }
	body.btf-vpg-page .vpg-games { grid-template-columns: 1fr; gap: 12px; }
	body.btf-vpg-page .vpg-game { padding: 1.4rem; }
	body.btf-vpg-page .vpg-game.is-this { padding-top: 1.25rem; }
	body.btf-vpg-page .vpg-returns.is-three strong { font-size: 2rem; }
}
@media ( max-width: 480px ) {
	body.btf-vpg-page .vpg-hero-hand { padding: 1.25rem 1rem; }
	body.btf-vpg-page .vpg-hero-cards { gap: 6px; margin: 1.4rem 0; }
	body.btf-vpg-page .vpg-hero-cards .vpg-card { max-width: 58px; }
	body.btf-vpg-page .vpg-hero-cards .vpg-card-corner { top: 5px; left: 5px; font-size: .875rem; }
	body.btf-vpg-page .vpg-hero-cards .vpg-card-pip { font-size: 1.9rem; }
	body.btf-vpg-page .vpg-hero-cards .vpg-card-tag { font-size: .5rem; min-height: 16px; }
	body.btf-vpg-page .vpg-hero-hand-title { font-size: .5rem; letter-spacing: .08em; }
	body.btf-vpg-page .vpg-hero-compare span { font-size: .69rem; }
	body.btf-vpg-page .vpg-hero-compare strong { font-size: 2.2rem; }
	body.btf-vpg-page .vpg-hero-compare small { font-size: .56rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-head-lede { font-size: .875rem; }
	body.btf-vpg-page .prose .vpg-paytable tbody th,
	body.btf-vpg-page .prose .vpg-paytable td { padding: .55rem .65rem; font-size: .75rem; }
	body.btf-vpg-page .prose .vpg-paytable thead th { padding: .65rem; font-size: .58rem; }
	body.btf-vpg-page .vpg-returns { grid-template-columns: 1fr 1fr; padding: 0; margin-top: 1.3rem; }
	body.btf-vpg-page .vpg-returns > div,
	body.btf-vpg-page .vpg-returns > div:first-child { padding: .9rem .75rem; }
	body.btf-vpg-page .vpg-returns > div:nth-child( 3 ) { border-left: 0; }
	body.btf-vpg-page .vpg-returns > div:nth-child( n + 3 ) { border-top: 1px solid var( --line ); }
	body.btf-vpg-page .vpg-returns strong { font-size: 1.85rem; }
	body.btf-vpg-page .vpg-returns.is-six { grid-template-columns: 1fr 1fr; }
	body.btf-vpg-page .vpg-returns.is-six > div,
	body.btf-vpg-page .vpg-returns.is-six > div:first-child { padding: .95rem .8rem; }
	body.btf-vpg-page .vpg-returns.is-six > div:nth-child( n ) { border-left: 0; border-top: 0; }
	body.btf-vpg-page .vpg-returns.is-six > div:nth-child( 2n ) { border-left: 1px solid var( --line ); }
	body.btf-vpg-page .vpg-returns.is-six > div:nth-child( n + 3 ) { border-top: 1px solid var( --line ); }
	body.btf-vpg-page .vpg-returns.is-six strong { font-size: 1.85rem; }
	body.btf-vpg-page .prose .vpg-steps > li { padding: 1.25rem 1.05rem; grid-template-columns: 22px minmax( 0, 1fr ); gap: 11px; }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-step-title { font-size: 1rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-step-copy { font-size: .82rem; }
	body.btf-vpg-page .vpg-callout { padding: 1rem 1.1rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-callout-copy { font-size: .82rem; }
	body.btf-vpg-page .vpg-callout .vpg-text-btn { font-size: .75rem; }
	body.btf-vpg-page .vpg-lesson { margin-top: 1.5rem; padding-top: 1.5rem; gap: 1.1rem; }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-lesson-title { font-size: 1.75rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-lesson-copy { font-size: .82rem; }
	body.btf-vpg-page .vpg-lesson .vpg-text-btn { font-size: .75rem; }
	body.btf-vpg-page .vpg-lesson-cards { max-width: 100%; padding: 1.4rem 1rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-outcomes-intro { font-size: .69rem; }
	body.btf-vpg-page .vpg-quads { padding: 1.45rem 1.2rem 1.3rem; }
	body.btf-vpg-page .vpg-quads-label { font-size: .56rem; letter-spacing: .09em; }
	body.btf-vpg-page .btf-vpg-hero .vpg-quads .vpg-quads-title { font-size: 2rem; margin-bottom: 1.25rem; }
	body.btf-vpg-page .vpg-quads-row { grid-template-columns: 69px minmax( 0, 1fr ) 52px; gap: 10px; }
	body.btf-vpg-page .vpg-quads-rank { font-size: 1.95rem; }
	body.btf-vpg-page .vpg-quads-name { font-size: .69rem; }
	body.btf-vpg-page .vpg-quads-award { font-size: 2.8rem; }
	body.btf-vpg-page .vpg-quads-award small { font-size: .5rem; margin-top: 6px; }
	body.btf-vpg-page .vpg-quads-foot { gap: 8px 15px; font-size: .69rem; }
	body.btf-vpg-page .vpg-game { padding: 1.25rem; }
	body.btf-vpg-page .vpg-game.is-this { padding-top: 1.1rem; }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-game-name { font-size: 1.06rem; }
	body.btf-vpg-page .vpg-returns.is-three { grid-template-columns: 1fr; padding: 0; }
	body.btf-vpg-page .vpg-returns.is-three > div,
	body.btf-vpg-page .vpg-returns.is-three > div:first-child { padding: 1.05rem 0; }
	body.btf-vpg-page .vpg-returns.is-three > div + div { border-left: 0; border-top: 1px solid var( --line ); }
	body.btf-vpg-page .vpg-returns.is-three strong { font-size: 2.25rem; }
	body.btf-vpg-page .vpg-more > summary { font-size: .875rem; padding-right: 1rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-more-lede,
	body.btf-vpg-page .btf-vpg-section .vpg-change-copy { font-size: .82rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-compare-copy { font-size: .94rem; }
	body.btf-vpg-page .prose .vpg-outcomes-table thead th { padding: .55rem .45rem; font-size: .5rem; }
	body.btf-vpg-page .prose .vpg-outcomes-table tbody th,
	body.btf-vpg-page .prose .vpg-outcomes-table td { padding: .5rem .45rem; font-size: .72rem; }
	body.btf-vpg-page .prose .vpg-outcomes-table tbody th { min-width: 6.6rem; }
	body.btf-vpg-page .vpg-analyzer { padding: 1rem .75rem; border-radius: 9px; }
	body.btf-vpg-page .vpg-analyzer-top { padding-bottom: .95rem; gap: .55rem; }
	body.btf-vpg-page .vpg-analyzer-name strong { font-size: .82rem; }
	body.btf-vpg-page .vpg-analyzer-top select { min-width: 82px; font-size: .82rem; padding: 7px 1.9rem 7px 7px; background-position: right .6rem center; }
	body.btf-vpg-page .vpg-basis { font-size: .5rem; }
	body.btf-vpg-page .vpg-editor { gap: 6px; margin: 1.4rem 0 .75rem; }
	body.btf-vpg-page .vpg-card-btn,
	body.btf-vpg-page .vpg-editor .vpg-card { border-radius: 5px; aspect-ratio: .66; }
	body.btf-vpg-page .vpg-editor .vpg-card-corner { font-size: .82rem; top: 5px; left: 4px; }
	body.btf-vpg-page .vpg-editor .vpg-card-pip { font-size: 1.9rem; margin-top: 2px; }
	body.btf-vpg-page .vpg-editor .vpg-card-tag { font-size: .44rem; min-height: 17px; padding: 2px 0; }
	body.btf-vpg-page .vpg-change { font-size: .56rem; padding: 7px 0; margin-top: 3px; }
	body.btf-vpg-page .vpg-actions { gap: 7px 15px; margin-bottom: 1.1rem; }
	body.btf-vpg-page .vpg-actions .vpg-btn { flex-basis: 100%; }
	body.btf-vpg-page .vpg-presets { gap: 6px; padding-top: 1rem; }
	body.btf-vpg-page .vpg-presets-label { flex-basis: 100%; font-size: .69rem; margin-bottom: 3px; }
	body.btf-vpg-page .vpg-presets button { font-size: .66rem; padding: 8px 9px; }
	body.btf-vpg-page .btf-vpg-section .vpg-preset-note { font-size: .625rem; margin: .7rem 0 1.05rem; }
	body.btf-vpg-page .vpg-results { grid-template-columns: 1fr; }
	body.btf-vpg-page .vpg-best,
	body.btf-vpg-page .vpg-yours { padding: 1.25rem; }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-result-hold { font-size: 1rem; margin: .45rem 0 .6rem; min-height: 0; }
	body.btf-vpg-page .vpg-results strong { font-size: 2.75rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-result-detail { margin-top: .75rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-why-copy { font-size: .82rem; line-height: 1.8; }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-why-title { font-size: .94rem; }
	body.btf-vpg-page .vpg-outcomes > summary,
	body.btf-vpg-page .vpg-holds > summary,
	body.btf-vpg-page .vpg-method > summary { font-size: .75rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-method-copy { font-size: .69rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-analyzer-foot { font-size: .625rem; }
	body.btf-vpg-page .vpg-story-cards { max-width: 100%; padding: 1.4rem; }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-story-title { font-size: 1.75rem; }
	body.btf-vpg-page .vpg-story .vpg-label { font-size: .5rem; }
	body.btf-vpg-page .vpg-chart-toolbar { flex-direction: column; align-items: stretch; gap: .8rem; }
	body.btf-vpg-page .vpg-chart-toolbar .vpg-field { max-width: none; flex: auto; }
	body.btf-vpg-page .vpg-chart-toolbar .vpg-btn { align-self: flex-start; }
	body.btf-vpg-page .btf-vpg-section .vpg-chart-status { font-size: .69rem; }
	body.btf-vpg-page .vpg-chart-details > summary { font-size: .82rem; padding: .95rem 1rem; }
	body.btf-vpg-page .vpg-key { padding: .8rem 1rem; gap: 9px 17px; font-size: .58rem; }
	body.btf-vpg-page .vpg-chart-terms dl { grid-template-columns: 1fr; gap: 16px; }
	body.btf-vpg-page .vpg-chart-terms,
	body.btf-vpg-page .vpg-chart-notes { padding-left: 1rem; padding-right: 1rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-chart-fine { padding-left: 1rem; padding-right: 1rem; }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-chart-h { font-size: 1.5rem; }
	body.btf-vpg-page .btf-vpg-section .vpg-money-p { font-size: .875rem; }
	body.btf-vpg-page .vpg-credits { padding: 1.25rem; }
	body.btf-vpg-page .vpg-variants { grid-template-columns: 1fr; }
	body.btf-vpg-page .vpg-variants > div { padding: 1.2rem; }
	body.btf-vpg-page .vpg-variants > div + div { border-left: 0; border-top: 1px solid var( --line ); }
	body.btf-vpg-page .vpg-faq summary { font-size: 1rem; padding-top: 1.2rem; padding-bottom: 1.2rem; }
	body.btf-vpg-page .vpg-picker { width: calc( 100vw - 24px ); max-height: calc( 100dvh - 24px ); padding: 1.25rem .95rem; border-radius: 10px; }
	body.btf-vpg-page .prose h2.vpg-picker-title { font-size: 1.8rem; }
	body.btf-vpg-page .vpg-picker-card { font-size: .75rem; }
}
@media ( max-width: 350px ) {
	body.btf-vpg-page .vpg-quads { padding: 1.3rem 1rem 1.2rem; }
	body.btf-vpg-page .btf-vpg-hero .vpg-quads .vpg-quads-title { font-size: 1.8rem; }
	body.btf-vpg-page .vpg-quads-row { grid-template-columns: 57px minmax( 0, 1fr ) 44px; gap: 9px; }
	body.btf-vpg-page .vpg-quads-rank { font-size: 1.6rem; }
	body.btf-vpg-page .vpg-quads-name { font-size: .625rem; }
	body.btf-vpg-page .vpg-quads-award { font-size: 2.45rem; }
	body.btf-vpg-page .vpg-hero-cards { gap: 4px; }
	body.btf-vpg-page .vpg-hero-cards .vpg-card-corner { font-size: .69rem; left: 4px; }
	body.btf-vpg-page .vpg-hero-cards .vpg-card-pip { font-size: 1.56rem; }
	body.btf-vpg-page .vpg-hero-compare strong { font-size: 1.95rem; }
	body.btf-vpg-page .vpg-editor { gap: 4px; }
	body.btf-vpg-page .vpg-editor .vpg-card-corner { font-size: .69rem; left: 3px; }
	body.btf-vpg-page .vpg-editor .vpg-card-pip { font-size: 1.56rem; }
	body.btf-vpg-page .vpg-editor .vpg-card-tag { font-size: .375rem; min-height: 15px; }
	body.btf-vpg-page .vpg-change { font-size: .5rem; }
	body.btf-vpg-page .vpg-card-btn,
	body.btf-vpg-page .vpg-editor .vpg-card { aspect-ratio: .62; }
	body.btf-vpg-page .prose .vpg-paytable tbody th,
	body.btf-vpg-page .prose .vpg-paytable td { padding-left: .5rem; padding-right: .5rem; font-size: .69rem; }
	body.btf-vpg-page .vpg-picker-grid { gap: 4px; }
	body.btf-vpg-page .vpg-picker-card { font-size: .69rem; }
	body.btf-vpg-page .prose .vpg-outcomes-table thead th { padding-left: .3rem; padding-right: .3rem; }
	body.btf-vpg-page .prose .vpg-outcomes-table tbody th,
	body.btf-vpg-page .prose .vpg-outcomes-table td { padding-left: .3rem; padding-right: .3rem; font-size: .66rem; }
	body.btf-vpg-page .prose .vpg-outcomes-table tbody th { min-width: 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	body.btf-vpg-page .vpg-card-btn,
	body.btf-vpg-page .vpg-chart-details > summary > span { transition: none; }
}

/* ── print: the chart alone, as text, on one A4 page (44 lines fit) ───── */
@media print {
	@page { size: A4 portrait; margin: 10mm; }
	body.btf-vpg-page .site-header, body.btf-vpg-page .site-footer, body.btf-vpg-page .btf-th-progress, body.btf-vpg-page .hero,
	body.btf-vpg-page .author-bar, body.btf-vpg-page #changelog-drawer, body.btf-vpg-page .btf-vpg-section:not( #chart ),
	body.btf-vpg-page .btf-th-summary, body.btf-vpg-page .btf-th-toc, body.btf-vpg-page .btf-th-sidebar, body.btf-vpg-page .btf-th-gloss-tip,
	body.btf-vpg-page #chart .vpg-head, body.btf-vpg-page .vpg-chart-toolbar, body.btf-vpg-page .vpg-chart-status, body.btf-vpg-page .vpg-chart-warning,
	body.btf-vpg-page .vpg-chart-details > summary, body.btf-vpg-page .vpg-chart-empty, body.btf-vpg-page .vpg-key, body.btf-vpg-page .vpg-chart-terms,
	body.btf-vpg-page .vpg-chart-act, body.btf-vpg-page .vpg-chart-table thead th:last-child, body.btf-vpg-page .btf-vpg-section .vpg-chart-fine,
	body.btf-vpg-page .btf-vpg-section .vpg-chart-notes-lede { display: none !important; }
	body.btf-vpg-page, body.btf-vpg-page main, body.btf-vpg-page .btf-vpg-section { background: #fff !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
	body.btf-vpg-page .vpg-chart-details { border: 0; border-radius: 0; overflow: visible; background: #fff; }
	body.btf-vpg-page .btf-vpg-section .vpg-print-title { display: block; margin: 0 0 .5rem; font: 400 14pt/1.2 var( --serif ); color: #000; }
	body.btf-vpg-page .vpg-chart-scroll { overflow: visible; }
	body.btf-vpg-page .prose table.vpg-chart-table { min-width: 0; border: 1px solid #ccc; }
	body.btf-vpg-page .prose .vpg-chart-table thead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	body.btf-vpg-page .prose .vpg-chart-table thead th { padding: .25rem .4rem; font-size: 7pt; }
	body.btf-vpg-page .prose .vpg-chart-table tbody th,
	body.btf-vpg-page .prose .vpg-chart-table td { padding: .08rem .4rem; font-size: 8pt; line-height: 1.25; }
	body.btf-vpg-page .prose .vpg-chart-table td.vpg-rank { font-size: 7.5pt; line-height: 1.25; }
	body.btf-vpg-page .vpg-chart-row { break-inside: avoid; }
	body.btf-vpg-page .prose .btf-vpg-section a.vpg-note-ref:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { font-size: 6pt; color: #000; text-decoration: none; }
	/* the example deal as text: held cards dark, discards grey */
	body.btf-vpg-page .vpg-chart-example .vpg-hand { display: block; }
	body.btf-vpg-page .vpg-chart-example .vpg-card { display: inline; position: static; width: auto; max-width: none; margin-right: .35em; border: 0; background: none; box-shadow: none; opacity: 1; aspect-ratio: auto; overflow: visible; }
	body.btf-vpg-page .vpg-chart-example .vpg-card-pip,
	body.btf-vpg-page .vpg-chart-example .vpg-card-tag { display: none; }
	body.btf-vpg-page .vpg-chart-example .vpg-card-corner { position: static; font: 600 8pt/1.25 var( --sans ); letter-spacing: 0; color: #1C1814; }
	body.btf-vpg-page .vpg-chart-example .vpg-card-corner small { font-size: inherit; }
	body.btf-vpg-page .vpg-chart-example .vpg-card.is-red .vpg-card-corner { color: #A33B2A; }
	body.btf-vpg-page .vpg-chart-example .vpg-card:not( .is-held ) .vpg-card-corner { font-weight: 400; color: #A69F93; }
	body.btf-vpg-page .vpg-chart-example .vpg-card.is-red:not( .is-held ) .vpg-card-corner { color: #D3A99F; }
	body.btf-vpg-page .vpg-chart-notes { margin-top: .5rem; padding: .45rem .8rem; border: 1px solid #ccc; break-inside: avoid; }
	body.btf-vpg-page .prose .btf-vpg-section h3.vpg-chart-h { margin: 0 0 .25rem; font-size: 10pt; color: #000; }
	body.btf-vpg-page .prose .vpg-chart-notes ol { margin-bottom: 0; }
	body.btf-vpg-page .prose .vpg-chart-notes li { margin-bottom: .2rem; font-size: 7pt; line-height: 1.35; }
	body.btf-vpg-page .vpg-note-ex { font-size: 7pt; }
}