/* ── Video poker progressive jackpots — /video-poker/strategy/progressives/ ── Rebuilt from the user's mock (2026-10-29) on the game guides' kit (video-poker-guide.css, body.btf-vpg-page): sections, heads, fields, the glass hero panel and its toggle, callouts, the boxed site tables, the dollar fields, the green-hold cards, the FAQ and the closing card come from there. What's here is this mock's own: the hero's meter and result, the three checks and the meter in pay-table units, the calculator's two cards, the break-even story and bars, the kings example, the dark two-facts panel, with their phone layouts. Markup: blocks/btf-vpprog-*; script: assets/js/video-poker-progressives.js. ──────────────────────────────────────────────────────────────────────── */ /* ── hero: one jackpot, two pay tables ──────────────────────────────────── */ @media ( min-width: 960px ) { body.btf-vpprog-page .vpg-hero-grid { grid-template-columns: 1.1fr 1fr; } body.btf-vpprog-page .vpprog-panel { justify-self: end; } } body.btf-vpprog-page .vpprog-panel { width: 100%; max-width: 470px; padding: 1.625rem 1.75rem 1.5rem; } body.btf-vpprog-page .vpprog-panel .vpg-quads-label { margin: 0; font-size: .5rem; letter-spacing: .09em; color: #CFBA86; } body.btf-vpprog-page .vpprog-meter-display { margin: 1.125rem 0 1.375rem; padding: 1.31rem 1.19rem 1.19rem; background: rgba( 21, 47, 37, .12 ); border-top: 1px solid rgba( 184, 150, 86, .33 ); border-bottom: 1px solid rgba( 184, 150, 86, .33 ); text-align: center; } body.btf-vpprog-page .vpprog-meter-label { display: block; font: 400 .5rem/1.7 var( --mono ); letter-spacing: .16em; text-transform: uppercase; color: #D0BB87; } body.btf-vpprog-page .vpprog-meter-display strong { display: block; margin: .5rem 0 .31rem; font: 400 3.81rem/1.1 var( --serif ); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: #E2C587; } body.btf-vpprog-page .vpprog-meter-display strong span { font-size: .55em; letter-spacing: 0; color: #BBAB80; } body.btf-vpprog-page .vpprog-meter-display small { display: block; font-size: .69rem; color: #BBCDB4; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpg-quads-title { margin: 0 0 1.19rem; font-size: 2.06rem; line-height: 1.1; letter-spacing: -.015em; } body.btf-vpprog-page .vpprog-panel .vpg-quads-title em { color: #CFB576; } body.btf-vpprog-page .vpg-toggle.vpprog-hero-toggle { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 7px; margin-bottom: 1.375rem; } body.btf-vpprog-page .vpg-toggle.vpprog-hero-toggle[hidden] { display: none; } body.btf-vpprog-page .vpprog-hero-toggle button { min-width: 0; padding: 10px 8px; border-radius: 6px; font-size: .69rem; line-height: 1.6; } body.btf-vpprog-page .vpprog-hero-result strong { display: block; font: 400 2.875rem/1.1 var( --serif ); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #E0C48A; } body.btf-vpprog-page .vpprog-hero-label { display: block; margin: .31rem 0 .94rem; font: 400 .5625rem/1.8 var( --mono ); color: #B8C9AF; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpprog-hero-copy { min-height: 65px; margin: 0; font: 400 .75rem/1.8 var( --sans ); color: #D5DFCE; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpprog-hero-note { margin: 1rem 0 0; padding-top: .94rem; border-top: 1px solid rgba( 255, 255, 255, .145 ); font: 400 .625rem/1.8 var( --sans ); color: #AEBFA7; } /* ── a progressive grows ────────────────────────────────────────────────── */ body.btf-vpprog-page .vpprog-scope { margin: 1.8rem 0; border-radius: 0 7px 7px 0; } body.btf-vpprog-page .vpprog-rule { display: grid; grid-template-columns: minmax( 0, .8fr ) minmax( 0, 2.8fr ); gap: 2.25rem; padding: 1.5rem 0; border-top: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-rule .vpprog-rule-label { margin: 0; padding-top: 5px; font-size: .5625rem; } body.btf-vpprog-page .vpprog-rule-body { min-width: 0; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-rule-title { margin: 0 0 .75rem; font: 400 1.69rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpprog-page .btf-vpg-section .vpprog-rule-copy { margin: 0; font-size: .875rem; line-height: 1.85; color: var( --muted ); } body.btf-vpprog-page .vpprog-rule-copy strong { color: var( --th-ink ); font-weight: 600; } body.btf-vpprog-page .vpprog-conversion { display: grid; grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 1fr ); gap: 2rem; align-items: center; margin: 1.25rem 0; padding: 1.56rem 1.69rem; background: #E9EDDE; border: 1px solid #D2D7C5; border-radius: 8px; } body.btf-vpprog-page .vpprog-conversion-figure { min-width: 0; } body.btf-vpprog-page .vpprog-conversion .vpg-label { margin: 0; font-size: .5rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: .875rem 0 0; color: var( --forest ); white-space: nowrap; } body.btf-vpprog-page .vpprog-sum strong { font: 400 2.06rem/1.2 var( --serif ); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } body.btf-vpprog-page .vpprog-sum strong small { font-size: 1.06rem; letter-spacing: 0; } body.btf-vpprog-page .vpprog-sum > span[aria-hidden] { font: 400 1.125rem/1.4 var( --serif ); color: var( --gold ); } body.btf-vpprog-page .btf-vpg-section .vpprog-conversion-copy { margin: 0; font-size: .75rem; line-height: 1.85; color: #55604A; } /* ── the jackpot calculator ─────────────────────────────────────────────── */ body.btf-vpprog-page .vpprog-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1.56rem 0 1.5rem; } body.btf-vpprog-page .vpprog-presets-label { margin-right: 5px; font: 400 .69rem/1.4 var( --sans ); color: var( --muted ); } body.btf-vpprog-page .vpprog-presets .vpg-toggle { gap: 8px; } body.btf-vpprog-page .vpprog-presets .vpg-toggle button { padding: 9px 13px; background: var( --paper ); border-color: #C8CBBB; border-radius: 6px; font-size: .69rem; line-height: 1.6; } body.btf-vpprog-page .vpprog-presets .vpg-toggle button:hover:not( [aria-pressed="true"] ):not( :disabled ) { background: var( --paper ); border-color: var( --forest ); } body.btf-vpprog-page .vpprog-presets .vpg-toggle button[aria-pressed="true"] { background: var( --forest ); border-color: var( --forest ); color: var( --cream ); } body.btf-vpprog-page .vpprog-layout { display: grid; grid-template-columns: minmax( 0, .85fr ) minmax( 0, 1.3fr ); gap: 1.5rem; align-items: start; } body.btf-vpprog-page .vpprog-inputs { min-width: 0; padding: 1.69rem 1.75rem 1.375rem; background: var( --paper ); border: 1px solid var( --line ); border-radius: 9px; } body.btf-vpprog-page .vpprog-inputs .vpg-field { gap: 8px; font-size: .75rem; color: var( --forest ); } body.btf-vpprog-page .vpprog-inputs .vpg-field + .vpg-field { margin-top: 1.375rem; } body.btf-vpprog-page .vpprog-inputs .vpg-field :is( select, input ) { height: 46px; background-color: #FFF; border-color: #BFC3B1; border-radius: 5px; font-size: .94rem; } body.btf-vpprog-page .vpprog-inputs [aria-invalid="true"] { border-color: var( --red ); outline: 1px solid var( --red ); } body.btf-vpprog-page .btf-vpg-section .vpprog-hint { margin: .44rem 0 1.31rem; font-size: .625rem; line-height: 1.75; color: var( --muted ); } body.btf-vpprog-page .btf-vpg-section .vpprog-hint + .vpg-field { margin-top: 0; } body.btf-vpprog-page .vpprog-ratio { margin-top: 1.25rem; padding-top: 1.19rem; border-top: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-ratio .vpg-label { margin: 0; font-size: .5625rem; } body.btf-vpprog-page .vpprog-ratio strong { display: block; margin: .5rem 0; font: 400 2.25rem/1.15 var( --serif ); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var( --forest ); } body.btf-vpprog-page .vpprog-ratio small { display: block; font: 400 .625rem/1.7 var( --mono ); color: var( --muted ); } body.btf-vpprog-page .btf-vpg-section .vpprog-hint.vpprog-range { margin: .81rem 0 0; line-height: 1.8; } body.btf-vpprog-page .vpprog-results { min-width: 0; overflow: hidden; background: var( --paper ); border: 1px solid #CBD0BE; border-radius: 9px; } body.btf-vpprog-page .vpprog-rtp { padding: 1.56rem 1.8rem 1.44rem; background: var( --forest ); color: var( --cream ); } body.btf-vpprog-page .vpprog-rtp .vpg-label { margin: 0; font-size: .5625rem; letter-spacing: .07em; color: #D5DABB; } body.btf-vpprog-page .vpprog-rtp strong { display: block; margin: .69rem 0 .625rem; font: 400 3.56rem/1.1 var( --serif ); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #E0C68C; } body.btf-vpprog-page .btf-vpg-section .vpprog-rtp-status { margin: 0; font-size: .75rem; line-height: 1.7; color: #D3DFCD; } body.btf-vpprog-page .vpprog-list { margin: 0; padding: 0 1.8rem; } body.btf-vpprog-page .vpprog-list > div { display: flex; justify-content: space-between; align-items: center; gap: 17px; padding: 1.125rem 0; border-bottom: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-list dt { margin: 0; font: 400 .75rem/1.6 var( --sans ); color: var( --forest ); } body.btf-vpprog-page .vpprog-list dt small { display: block; margin-top: 3px; font-size: .625rem; line-height: 1.7; color: var( --muted ); } body.btf-vpprog-page .vpprog-list dd { flex-shrink: 0; margin: 0; font: 500 .75rem/1.6 var( --mono ); white-space: nowrap; font-variant-numeric: tabular-nums; color: var( --forest ); } body.btf-vpprog-page .vpprog-net { padding: 1.375rem 1.8rem 1.56rem; } body.btf-vpprog-page .vpprog-net .vpg-label { margin: 0; font-size: .5625rem; } body.btf-vpprog-page .vpprog-net strong { display: block; margin: .56rem 0 .625rem; font: 400 2.44rem/1.15 var( --serif ); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var( --forest ); } body.btf-vpprog-page .btf-vpg-section .vpprog-net-copy { margin: 0; font-size: .69rem; line-height: 1.8; color: var( --muted ); } body.btf-vpprog-page .btf-vpg-section .vpprog-error { margin: 1.31rem 0 0; } body.btf-vpprog-page .vpg-callout.vpprog-reality { margin-top: 1.5rem; padding: 1.44rem 1.56rem; background: #EEECDF; border-radius: 0 7px 7px 0; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-reality-title { margin: 0 0 .75rem; font: 400 1.56rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpprog-page .btf-vpg-section .vpprog-reality .vpg-callout-copy { margin: 0 0 .625rem; font-size: .75rem; color: var( --muted ); } body.btf-vpprog-page .btf-vpg-section .vpprog-reality .vpg-callout-copy:last-child { margin-bottom: 0; } body.btf-vpprog-page .prose .btf-vpg-section .vpprog-reality a.vpg-inline-link:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { font-size: inherit; font-weight: 400; } body.btf-vpprog-page .vpprog-paytable { margin-top: 1.56rem; overflow: hidden; background: var( --paper ); border: 1px solid var( --line ); border-radius: 7px; } body.btf-vpprog-page .vpprog-paytable > summary { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: 1.125rem 1.375rem; color: var( --forest ); font: 500 .82rem/1.5 var( --sans ); list-style: none; cursor: pointer; } body.btf-vpprog-page .vpprog-paytable > summary::-webkit-details-marker { display: none; } body.btf-vpprog-page .vpprog-paytable > summary::before { content: ''; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var( --forest ); transition: transform .15s; } body.btf-vpprog-page .vpprog-paytable[open] > summary::before { transform: rotate( 90deg ); } body.btf-vpprog-page .vpprog-paytable-in { padding: 0 1.375rem 1.44rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-paytable-copy { max-width: 84ch; margin: 0 0 1.125rem; font-size: .75rem; line-height: 1.8; color: var( --muted ); } body.btf-vpprog-page .vpprog-paytable .vpg-box { max-width: 650px; } body.btf-vpprog-page .prose .vpprog-paytable-table thead th { padding: .6rem 1.06rem; font-size: .56rem; } body.btf-vpprog-page .prose .vpprog-paytable-table tbody th { padding: .6rem 1.06rem; font-size: .75rem; font-weight: 500; } body.btf-vpprog-page .prose .vpprog-paytable-table td { padding: .6rem 1.06rem; font-size: .75rem; white-space: nowrap; } body.btf-vpprog-page .prose .vpprog-paytable-table tr.is-key th, body.btf-vpprog-page .prose .vpprog-paytable-table tr.is-key td { background: #E9ECDF; color: var( --forest ); } body.btf-vpprog-page .btf-vpg-section .vpprog-method { margin: 1.31rem 0 0; font-size: .69rem; line-height: 1.85; } /* ── a weaker base table needs a bigger jackpot ─────────────────────────── */ body.btf-vpprog-page .prose .vpprog-break-table td { white-space: nowrap; } body.btf-vpprog-page .prose .vpprog-break-table td:nth-child( 3 ) { background: rgba( 234, 240, 223, .4 ); color: var( --forest ); font-weight: 600; } body.btf-vpprog-page .vpprog-sub { display: block; margin-top: 3px; font: 400 .625rem/1.5 var( --sans ); color: var( --muted ); } body.btf-vpprog-page .btf-vpg-section .vpprog-break-fine { margin: 1.06rem 0 0; } body.btf-vpprog-page .vpprog-story { display: grid; grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr ); gap: 2.75rem; align-items: center; margin-top: 2.06rem; padding-top: 1.94rem; border-top: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-story-text { min-width: 0; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-story-title { margin: 0 0 1.06rem; font: 400 1.81rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpprog-page .btf-vpg-section .vpprog-story-copy { margin: 0 0 .94rem; font-size: .82rem; line-height: 1.85; color: var( --muted ); } body.btf-vpprog-page .btf-vpg-section .vpprog-story-copy:last-child { margin-bottom: 0; } body.btf-vpprog-page .vpprog-story-copy strong { color: var( --th-ink ); font-weight: 600; } body.btf-vpprog-page .vpprog-bars { min-width: 0; } body.btf-vpprog-page .vpprog-bar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 1.06rem 1.19rem; background: var( --cream ); border-top: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-bar:first-child { border-top: 0; border-radius: 7px 7px 0 0; } body.btf-vpprog-page .vpprog-bar.is-best { background: #E7ECDC; border-bottom: 1px solid #D3DAC4; border-radius: 0 0 7px 7px; } body.btf-vpprog-page .vpprog-bar span { max-width: 21ch; font: 400 .69rem/1.6 var( --sans ); color: var( --muted ); } body.btf-vpprog-page .vpprog-bar strong { font: 400 1.75rem/1.1 var( --serif ); white-space: nowrap; font-variant-numeric: tabular-nums; color: var( --forest ); } body.btf-vpprog-page .btf-vpg-section .vpprog-bars-note { margin: .75rem 0 0; font-size: .625rem; line-height: 1.75; color: var( --muted ); } /* ── keep the kings? ────────────────────────────────────────────────────── */ body.btf-vpprog-page .vpprog-box { display: grid; grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 1fr ); overflow: hidden; background: var( --paper ); border: 1px solid #D7D1C3; border-radius: 10px; } body.btf-vpprog-page .vpprog-hand-area { min-width: 0; padding: 1.8rem 2rem 1.69rem; } body.btf-vpprog-page .vpprog-hand-area > .vpg-label { margin: 0; font-size: .5625rem; } body.btf-vpprog-page .vpprog-hand { gap: 9px; margin: 1.44rem 0; } body.btf-vpprog-page .vpprog-hand .vpg-card { flex: 0 1 65px; width: 65px; max-width: 65px; height: 98px; background: #F3EEE3; border-color: #D0CABA; border-radius: 6px; box-shadow: none; } body.btf-vpprog-page .vpprog-hand .vpg-card.is-held { background: #FCFBF5; border-color: #57734D; box-shadow: none; } body.btf-vpprog-page .vpprog-hand .vpg-card:not( .is-held ) { opacity: .53; } body.btf-vpprog-page .vpprog-hand .vpg-card.is-red { color: #963F38; } body.btf-vpprog-page .vpprog-hand .vpg-card-corner { top: 7px; left: 8px; font-size: 1.56rem; } body.btf-vpprog-page .vpprog-hand .vpg-card-pip { top: 29px; font-size: 2.06rem; line-height: 1.2; } body.btf-vpprog-page .vpprog-hand .vpg-card-tag { padding: 4px 0 3px; background: #E0DCCF; color: #6C695D; font-size: .44rem; letter-spacing: .03em; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-result-title { margin: 0 0 .75rem; font: 400 1.81rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpprog-page .btf-vpg-section .vpprog-result-copy { min-height: 72px; margin: 0 0 1.25rem; font-size: .82rem; line-height: 1.85; color: var( --muted ); } body.btf-vpprog-page .vpprog-holds { padding-top: 1rem; border-top: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-holds .vpprog-holds-label { margin: 0 0 .25rem; font-size: .5rem; } body.btf-vpprog-page .vpprog-hold { display: flex; justify-content: space-between; align-items: center; gap: 17px; padding: .5rem 0; font: 400 .75rem/1.5 var( --sans ); color: var( --muted ); } body.btf-vpprog-page .vpprog-hold strong { font: 400 .75rem/1.5 var( --mono ); font-variant-numeric: tabular-nums; } body.btf-vpprog-page .vpprog-hold.is-best { color: var( --forest ); } body.btf-vpprog-page .vpprog-hold.is-best strong { font-weight: 600; } body.btf-vpprog-page .vpprog-controls { min-width: 0; padding: 1.8rem 1.875rem 1.69rem; background: #F0EEE5; border-left: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-controls .vpg-field { font-size: .75rem; color: var( --forest ); } body.btf-vpprog-page .vpprog-controls .vpg-field select { height: 46px; background-color: #FFF; border-color: #BFC3B1; border-radius: 5px; font-size: .94rem; } body.btf-vpprog-page .vpprog-slider-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 1.75rem 0 .5rem; } body.btf-vpprog-page .vpprog-slider-head label { font: 500 .75rem/1.4 var( --sans ); color: var( --forest ); } body.btf-vpprog-page .vpprog-slider-head output { font: 400 1.75rem/1 var( --serif ); white-space: nowrap; font-variant-numeric: tabular-nums; color: var( --forest ); } body.btf-vpprog-page .vpprog-range { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var( --forest ); cursor: pointer; } body.btf-vpprog-page .vpprog-range:disabled { cursor: default; } body.btf-vpprog-page .vpprog-scale { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 1.375rem; font: 400 .5625rem/1.5 var( --mono ); color: var( --muted ); } body.btf-vpprog-page .vpprog-meter-presets { gap: 7px; } body.btf-vpprog-page .vpprog-meter-presets button { padding: 8px 12px; background: var( --paper ); border-color: #C5C9B7; border-radius: 6px; font-size: .625rem; line-height: 1.5; } body.btf-vpprog-page .vpprog-meter-presets button:hover:not( [aria-pressed="true"] ):not( :disabled ) { background: #E8ECDF; } body.btf-vpprog-page .btf-vpg-section .vpprog-tie-note { margin: 1.56rem 0 1.25rem; padding-left: 1.06rem; border-left: 2px solid var( --gold ); font-size: .82rem; line-height: 1.85; color: #4C5844; } body.btf-vpprog-page .btf-vpg-section .vpprog-scope-note { margin: 0; font-size: .69rem; line-height: 1.85; color: var( --muted ); } body.btf-vpprog-page .vpprog-explainer { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.1fr ) minmax( 0, 1fr ); gap: 1.875rem; margin-top: 1.8rem; padding-top: 1.75rem; border-top: 1px solid #D4CEBF; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-explainer-title { margin: 0; font: 400 1.56rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpprog-page .btf-vpg-section .vpprog-explainer-copy { margin: 0; font-size: .75rem; line-height: 1.85; color: var( --muted ); } body.btf-vpprog-page .vpprog-explainer-copy strong { color: var( --th-ink ); font-weight: 600; } /* ── positive expectation, no promise ───────────────────────────────────── */ body.btf-vpprog-page .vpprog-panel-dark { display: grid; grid-template-columns: minmax( 0, 1.2fr ) minmax( 0, 1fr ) minmax( 0, 1fr ); margin: 1.8rem 0 1.5rem; overflow: hidden; background: var( --forest ); border: 1px solid #2E4938; border-radius: 9px; color: var( --cream ); } body.btf-vpprog-page .vpprog-panel-dark > * { min-width: 0; padding: 1.69rem; } body.btf-vpprog-page .vpprog-dark-intro .vpg-label { margin: 0; font-size: .5rem; line-height: 1.9; color: #C8B27A; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-dark-title { margin: 1rem 0; font: 400 1.875rem/1.2 var( --serif ); color: var( --cream ); } body.btf-vpprog-page .btf-vpg-section .vpprog-dark-copy { margin: 0; font-size: .75rem; line-height: 1.85; color: #C2D0B8; } body.btf-vpprog-page .vpprog-stat { padding-top: 1.94rem; border-left: 1px solid rgba( 255, 255, 255, .125 ); } body.btf-vpprog-page .vpprog-stat strong { display: block; margin-bottom: .625rem; font: 400 2.75rem/1.1 var( --serif ); letter-spacing: -.015em; white-space: nowrap; font-variant-numeric: tabular-nums; color: #DFC387; } body.btf-vpprog-page .vpprog-stat-label { display: block; margin-bottom: 1.06rem; font: 400 .82rem/1.5 var( --sans ); color: #E4E9DD; } body.btf-vpprog-page .btf-vpg-section .vpprog-stat .vpprog-dark-copy { font-size: .69rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-after { max-width: 100ch; margin: 0 0 1.5rem; font-size: .875rem; line-height: 1.85; color: var( --muted ); } body.btf-vpprog-page .vpprog-exit { display: grid; grid-template-columns: minmax( 0, .8fr ) minmax( 0, 2.8fr ); gap: 2.25rem; padding-top: 1.44rem; border-top: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-exit .vpprog-exit-label { margin: 0; padding-top: 5px; font-size: .5rem; } body.btf-vpprog-page .vpprog-exit-body { min-width: 0; } body.btf-vpprog-page .btf-vpg-section .vpprog-exit-copy { margin: 0 0 .625rem; font-size: .82rem; line-height: 1.85; color: var( --muted ); } body.btf-vpprog-page .prose .btf-vpg-section .vpprog-exit a.vpg-inline-link:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { font-size: .82rem; font-weight: 400; } /* ── narrower ───────────────────────────────────────────────────────────── */ @media ( max-width: 1000px ) { body.btf-vpprog-page .vpprog-panel { padding: 1.5rem; } body.btf-vpprog-page .vpprog-hero-toggle button { font-size: .625rem; } body.btf-vpprog-page .vpprog-conversion { gap: 1.56rem; padding: 1.5rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-sum { column-gap: 10px; } body.btf-vpprog-page .vpprog-sum strong { font-size: 1.81rem; } body.btf-vpprog-page .vpprog-sum strong small { font-size: .94rem; } body.btf-vpprog-page .vpprog-story { gap: 1.875rem; } body.btf-vpprog-page .vpprog-bar { padding: 1.06rem; } body.btf-vpprog-page .vpprog-bar strong { font-size: 1.625rem; } body.btf-vpprog-page .vpprog-hand-area, body.btf-vpprog-page .vpprog-controls { padding: 1.69rem 1.56rem; } body.btf-vpprog-page .vpprog-hand { gap: 7px; } body.btf-vpprog-page .vpprog-hand .vpg-card { height: 92px; } body.btf-vpprog-page .vpprog-explainer { gap: 1.44rem; } body.btf-vpprog-page .vpprog-panel-dark > * { padding: 1.56rem; } body.btf-vpprog-page .vpprog-panel-dark > .vpprog-stat { padding-top: 1.94rem; } body.btf-vpprog-page .vpprog-stat strong { font-size: 2.44rem; } } @media ( max-width: 900px ) { body.btf-vpprog-page .vpprog-layout { grid-template-columns: minmax( 0, .9fr ) minmax( 0, 1.2fr ); gap: 1.25rem; } body.btf-vpprog-page .vpprog-inputs { padding: 1.5rem 1.31rem; } body.btf-vpprog-page .vpprog-rtp { padding: 1.5rem; } body.btf-vpprog-page .vpprog-rtp strong { font-size: 3.06rem; } body.btf-vpprog-page .vpprog-list { padding: 0 1.5rem; } body.btf-vpprog-page .vpprog-list > div { gap: 12px; } body.btf-vpprog-page .vpprog-list dt, body.btf-vpprog-page .vpprog-list dd { font-size: .69rem; } body.btf-vpprog-page .vpprog-net { padding: 1.375rem 1.5rem; } body.btf-vpprog-page .vpprog-net strong { font-size: 2.25rem; } body.btf-vpprog-page .vpprog-ratio strong { font-size: 1.94rem; } } /* the hero stacks below 960px: the panel goes full width */ @media ( max-width: 959px ) { body.btf-vpprog-page .vpprog-panel { max-width: 560px; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpprog-hero-copy { min-height: 0; } } @media ( max-width: 800px ) { body.btf-vpprog-page .vpprog-panel { padding: 1.69rem 1.8rem; } body.btf-vpprog-page .vpprog-panel .vpg-quads-label { font-size: .5625rem; } body.btf-vpprog-page .vpprog-meter-display { padding: 1.19rem; } body.btf-vpprog-page .vpprog-meter-display strong { font-size: 3.94rem; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpg-quads-title { font-size: 2.19rem; } body.btf-vpprog-page .vpprog-hero-toggle button { font-size: .75rem; } body.btf-vpprog-page .vpprog-hero-result strong { font-size: 3.06rem; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpprog-hero-copy { font-size: .82rem; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpprog-hero-note { font-size: .69rem; } body.btf-vpprog-page .vpprog-rule { grid-template-columns: 1fr; gap: .625rem; } body.btf-vpprog-page .vpprog-rule .vpprog-rule-label { padding-top: 0; } body.btf-vpprog-page .vpprog-conversion { grid-template-columns: 1fr; gap: 1.25rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-conversion-copy { font-size: .82rem; } body.btf-vpprog-page .vpprog-sum strong { font-size: 2.19rem; } body.btf-vpprog-page .vpprog-sum strong small { font-size: 1.125rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-sum { column-gap: 15px; } body.btf-vpprog-page .vpprog-story { grid-template-columns: 1fr; gap: 1.44rem; } body.btf-vpprog-page .vpprog-bar span { max-width: none; font-size: .75rem; } body.btf-vpprog-page .vpprog-bar strong { font-size: 1.81rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-bars-note { font-size: .69rem; } body.btf-vpprog-page .vpprog-box { grid-template-columns: 1fr; } body.btf-vpprog-page .vpprog-hand-area { padding: 1.8rem; } body.btf-vpprog-page .vpprog-controls { padding: 1.8rem; border-left: 0; border-top: 1px solid var( --line ); } body.btf-vpprog-page .vpprog-hand { max-width: 410px; gap: 9px; } body.btf-vpprog-page .vpprog-hand .vpg-card { height: 99px; } body.btf-vpprog-page .btf-vpg-section .vpprog-result-copy { min-height: 0; max-width: 65ch; } body.btf-vpprog-page .vpprog-holds, body.btf-vpprog-page .vpprog-controls .vpg-field { max-width: 430px; } body.btf-vpprog-page .vpprog-meter-presets button { font-size: .69rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-tie-note { font-size: .875rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-scope-note { font-size: .75rem; } body.btf-vpprog-page .vpprog-explainer { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.25rem; } body.btf-vpprog-page .vpprog-explainer-title { grid-column: 1 / -1; } body.btf-vpprog-page .vpprog-panel-dark { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } body.btf-vpprog-page .vpprog-dark-intro { grid-column: 1 / -1; border-bottom: 1px solid rgba( 255, 255, 255, .125 ); } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-dark-title { margin: .8rem 0; } body.btf-vpprog-page .vpprog-stat:nth-child( 2 ) { border-left: 0; } body.btf-vpprog-page .vpprog-stat strong { font-size: 2.81rem; } body.btf-vpprog-page .vpprog-exit { grid-template-columns: 1fr; gap: .625rem; } body.btf-vpprog-page .vpprog-exit .vpprog-exit-label { padding-top: 0; } } @media ( max-width: 760px ) { body.btf-vpprog-page .vpprog-layout { grid-template-columns: minmax( 0, .95fr ) minmax( 0, 1.1fr ); gap: 1.06rem; } body.btf-vpprog-page .vpprog-inputs { padding: 1.44rem 1.125rem; } body.btf-vpprog-page .vpprog-inputs .vpg-field :is( select, input ) { font-size: 1rem; } body.btf-vpprog-page .vpprog-rtp { padding: 1.44rem 1.25rem; } body.btf-vpprog-page .vpprog-rtp strong { font-size: 2.69rem; } body.btf-vpprog-page .vpprog-rtp .vpg-label { font-size: .5rem; } body.btf-vpprog-page .vpprog-list { padding: 0 1.25rem; } body.btf-vpprog-page .vpprog-list > div { display: block; padding: 1rem 0; } body.btf-vpprog-page .vpprog-list dd { margin-top: 7px; font-size: .82rem; } body.btf-vpprog-page .vpprog-net { padding: 1.31rem 1.25rem; } body.btf-vpprog-page .vpprog-net .vpg-label { font-size: .5rem; } body.btf-vpprog-page .vpprog-ratio strong { font-size: 1.81rem; } } @media ( max-width: 620px ) { /* the break-even table: labelled cards rather than scroll sideways */ body.btf-vpprog-page .prose .vpprog-break-table thead { display: none; } body.btf-vpprog-page .prose .vpprog-break-table, body.btf-vpprog-page .prose .vpprog-break-table tbody { display: block; } body.btf-vpprog-page .prose .vpprog-break-table tr { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: .6rem 1rem; padding: .95rem 1rem 1rem; border-top: 1px solid var( --rule ); } body.btf-vpprog-page .prose .vpprog-break-table tr:first-child { border-top: 0; } body.btf-vpprog-page .prose .vpprog-break-table tbody th { grid-column: 1 / -1; padding: 0; border: 0; } body.btf-vpprog-page .prose .vpprog-break-table td { display: block; padding: 0; border: 0; background: none; text-align: left; font-size: .8rem; } body.btf-vpprog-page .prose .vpprog-break-table td:nth-child( 3 ) { background: none; } body.btf-vpprog-page .prose .vpprog-break-table td::before { content: attr( data-label ); display: block; margin-bottom: .2rem; font: 400 .56rem/1.5 var( --mono ); letter-spacing: .1em; text-transform: uppercase; white-space: normal; color: var( --muted ); } } @media ( max-width: 600px ) { body.btf-vpprog-page .vpprog-panel { padding: 1.5rem 1.44rem; } body.btf-vpprog-page .vpprog-panel .vpg-quads-label { font-size: .44rem; letter-spacing: .07em; } body.btf-vpprog-page .vpprog-meter-display { padding: 1.25rem 0; } body.btf-vpprog-page .vpprog-meter-display strong { font-size: 3.69rem; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpg-quads-title { font-size: 2.06rem; } body.btf-vpprog-page .vpg-toggle.vpprog-hero-toggle { gap: 6px; } body.btf-vpprog-page .vpprog-hero-toggle button { font-size: .625rem; } body.btf-vpprog-page .vpprog-hero-result strong { font-size: 2.81rem; } body.btf-vpprog-page .vpprog-hero-label { font-size: .5rem; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpprog-hero-copy { font-size: .75rem; } body.btf-vpprog-page .vpprog-scope { margin: 1.56rem 0; } body.btf-vpprog-page .vpprog-rule { padding: 1.44rem 0; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-rule-title { font-size: 1.625rem; } body.btf-vpprog-page .vpprog-rule .vpprog-rule-label { font-size: .5rem; } body.btf-vpprog-page .vpprog-conversion { gap: 1.125rem; padding: 1.44rem 1.31rem; } body.btf-vpprog-page .vpprog-conversion .vpg-label { font-size: .44rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-sum { column-gap: 10px; } body.btf-vpprog-page .vpprog-sum strong { font-size: 1.81rem; } body.btf-vpprog-page .vpprog-sum strong small, body.btf-vpprog-page .vpprog-sum > span[aria-hidden] { font-size: .94rem; } body.btf-vpprog-page .vpprog-presets { gap: 7px; margin: 1.44rem 0; } body.btf-vpprog-page .vpprog-presets-label { flex-basis: 100%; margin: 0 0 3px; } body.btf-vpprog-page .vpprog-presets .vpg-toggle { width: 100%; gap: 7px; } body.btf-vpprog-page .vpprog-presets .vpg-toggle button { flex: 1 1 45%; padding: 9px 11px; font-size: .625rem; text-align: left; } body.btf-vpprog-page .vpprog-layout { grid-template-columns: 1fr; gap: 1.25rem; } body.btf-vpprog-page .vpprog-inputs { padding: 1.5rem 1.44rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-hint { font-size: .69rem; } body.btf-vpprog-page .vpprog-ratio strong { font-size: 2.25rem; } body.btf-vpprog-page .vpprog-rtp { padding: 1.56rem 1.5rem; } body.btf-vpprog-page .vpprog-rtp strong { font-size: 3.25rem; } body.btf-vpprog-page .vpprog-rtp .vpg-label { font-size: .5625rem; } body.btf-vpprog-page .vpprog-list { padding: 0 1.5rem; } body.btf-vpprog-page .vpprog-list > div { display: flex; gap: 15px; padding: 1.125rem 0; } body.btf-vpprog-page .vpprog-list dt { font-size: .69rem; } body.btf-vpprog-page .vpprog-list dt small { font-size: .5625rem; } body.btf-vpprog-page .vpprog-list dd { margin: 0; font-size: .69rem; } body.btf-vpprog-page .vpprog-net { padding: 1.44rem 1.5rem; } body.btf-vpprog-page .vpprog-net .vpg-label { font-size: .5625rem; } body.btf-vpprog-page .vpprog-net strong { font-size: 2.5rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-net-copy { font-size: .75rem; } body.btf-vpprog-page .vpg-callout.vpprog-reality { padding: 1.375rem 1.31rem; } body.btf-vpprog-page .vpprog-paytable > summary { padding: 1.06rem 1.25rem; font-size: .75rem; } body.btf-vpprog-page .vpprog-paytable-in { padding: 0 1.125rem 1.25rem; } body.btf-vpprog-page .prose .vpprog-paytable-table tbody th, body.btf-vpprog-page .prose .vpprog-paytable-table td { padding: .6rem .75rem; font-size: .69rem; } body.btf-vpprog-page .vpprog-story { margin-top: 1.75rem; padding-top: 1.625rem; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-story-title { font-size: 1.75rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-story-copy { font-size: .875rem; } body.btf-vpprog-page .vpprog-bar { gap: 12px; } body.btf-vpprog-page .vpprog-bar span { max-width: 20ch; font-size: .625rem; } body.btf-vpprog-page .vpprog-bar strong { font-size: 1.75rem; } body.btf-vpprog-page .vpprog-hand-area, body.btf-vpprog-page .vpprog-controls { padding: 1.56rem 1.44rem; } body.btf-vpprog-page .vpprog-hand-area > .vpg-label { font-size: .5rem; } body.btf-vpprog-page .vpprog-hand { gap: 6px; margin: 1.375rem 0; } body.btf-vpprog-page .vpprog-hand .vpg-card { flex-basis: 58px; width: 58px; height: 88px; } body.btf-vpprog-page .vpprog-hand .vpg-card-corner { left: 7px; font-size: 1.44rem; } body.btf-vpprog-page .vpprog-hand .vpg-card-pip { top: 27px; font-size: 1.81rem; } body.btf-vpprog-page .vpprog-hand .vpg-card-tag { font-size: .375rem; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-result-title { font-size: 1.75rem; } body.btf-vpprog-page .vpprog-holds .vpprog-holds-label { font-size: .44rem; } body.btf-vpprog-page .vpprog-hold, body.btf-vpprog-page .vpprog-hold strong { font-size: .69rem; } body.btf-vpprog-page .vpprog-slider-head output { font-size: 1.69rem; } body.btf-vpprog-page .vpprog-slider-head label { font-size: .69rem; } body.btf-vpprog-page .vpprog-meter-presets { gap: 6px; } body.btf-vpprog-page .vpprog-meter-presets button { padding: 8px 10px; font-size: .625rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-tie-note { font-size: .82rem; } body.btf-vpprog-page .vpprog-explainer { display: block; padding-top: 1.56rem; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-explainer-title { margin-bottom: 1.06rem; font-size: 1.69rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-explainer-copy { margin-bottom: 1rem; font-size: .82rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-explainer-copy:last-child { margin-bottom: 0; } body.btf-vpprog-page .vpprog-panel-dark { display: block; } body.btf-vpprog-page .vpprog-panel-dark > * { padding: 1.56rem; } body.btf-vpprog-page .vpprog-dark-intro { border-bottom: 0; } body.btf-vpprog-page .vpprog-stat { border-left: 0; border-top: 1px solid rgba( 255, 255, 255, .125 ); } body.btf-vpprog-page .vpprog-panel-dark > .vpprog-stat { padding-top: 1.56rem; } body.btf-vpprog-page .vpprog-stat strong { font-size: 2.94rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-stat .vpprog-dark-copy { max-width: 40ch; } } @media ( max-width: 400px ) { body.btf-vpprog-page .vpprog-panel { padding: 1.375rem 1.19rem; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpg-quads-title { font-size: 1.94rem; } body.btf-vpprog-page .vpprog-hero-result strong { font-size: 2.625rem; } body.btf-vpprog-page .vpprog-hero-toggle button { font-size: .5625rem; } body.btf-vpprog-page .vpprog-conversion { padding: 1.31rem 1.19rem; } body.btf-vpprog-page .vpprog-sum strong { font-size: 1.69rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-sum { column-gap: 8px; } body.btf-vpprog-page .vpprog-sum strong small { font-size: .875rem; } body.btf-vpprog-page .vpprog-hand-area, body.btf-vpprog-page .vpprog-controls { padding: 1.44rem 1.25rem; } body.btf-vpprog-page .vpprog-hand { gap: 5px; } body.btf-vpprog-page .vpprog-hand .vpg-card { height: 82px; } body.btf-vpprog-page .vpprog-hand .vpg-card-corner { left: 6px; font-size: 1.31rem; } body.btf-vpprog-page .vpprog-hand .vpg-card-pip { top: 26px; font-size: 1.625rem; } body.btf-vpprog-page .vpprog-hold, body.btf-vpprog-page .vpprog-hold strong { font-size: .625rem; } body.btf-vpprog-page .vpprog-bar strong { font-size: 1.56rem; } body.btf-vpprog-page .vpprog-panel-dark > * { padding: 1.5rem; } } @media ( max-width: 360px ) { body.btf-vpprog-page .vpprog-inputs { padding: 1.375rem 1.19rem; } body.btf-vpprog-page .vpprog-rtp { padding: 1.44rem 1.25rem; } body.btf-vpprog-page .vpprog-rtp strong { font-size: 2.875rem; } body.btf-vpprog-page .vpprog-list { padding: 0 1.25rem; } body.btf-vpprog-page .vpprog-list dt, body.btf-vpprog-page .vpprog-list dd { font-size: .625rem; } body.btf-vpprog-page .vpprog-net { padding: 1.375rem 1.25rem; } body.btf-vpprog-page .vpprog-net strong { font-size: 2.25rem; } body.btf-vpprog-page .vpg-callout.vpprog-reality { padding: 1.25rem 1.125rem; } body.btf-vpprog-page .prose .btf-vpg-section h3.vpprog-reality-title { font-size: 1.5rem; } body.btf-vpprog-page .vpprog-presets .vpg-toggle button { padding: 9px; font-size: .5625rem; } } @media ( max-width: 350px ) { body.btf-vpprog-page .vpprog-panel { padding: 1.31rem 1rem; } body.btf-vpprog-page .vpprog-panel .vpg-quads-label { font-size: .375rem; } body.btf-vpprog-page .vpprog-meter-display strong { font-size: 3.375rem; } body.btf-vpprog-page .btf-vpg-hero .vpprog-panel .vpg-quads-title { font-size: 1.81rem; } body.btf-vpprog-page .vpprog-hero-result strong { font-size: 2.5rem; } body.btf-vpprog-page .vpprog-sum strong { font-size: 1.5rem; } body.btf-vpprog-page .vpprog-sum strong small { font-size: .81rem; } body.btf-vpprog-page .btf-vpg-section .vpprog-sum { column-gap: 7px; } body.btf-vpprog-page .vpprog-hand-area, body.btf-vpprog-page .vpprog-controls { padding: 1.375rem 1.06rem; } body.btf-vpprog-page .vpprog-hand .vpg-card { height: 75px; } body.btf-vpprog-page .vpprog-hand .vpg-card-pip { top: 23px; font-size: 1.5rem; } body.btf-vpprog-page .vpprog-hand .vpg-card-tag { font-size: .3125rem; } body.btf-vpprog-page .vpprog-meter-presets button { padding: 8px 9px; font-size: .5625rem; } body.btf-vpprog-page .vpprog-slider-head { gap: 12px; } body.btf-vpprog-page .vpprog-slider-head output { font-size: 1.56rem; } body.btf-vpprog-page .vpprog-hold { gap: 10px; } body.btf-vpprog-page .vpprog-bar span { font-size: .5625rem; } body.btf-vpprog-page .vpprog-bar strong { font-size: 1.5rem; } body.btf-vpprog-page .vpprog-bar { padding: .94rem; } } /* ── print: the whole page, not the kit's chart-only print ──────────────── */ @media print { body.btf-vpprog-page .hero, body.btf-vpprog-page .btf-vpg-section:not( #chart ), body.btf-vpprog-page .btf-th-summary { display: block !important; } body.btf-vpprog-page .btf-vpg-section { padding: 1.4rem 0 !important; border-bottom: 1px solid #ccc !important; } body.btf-vpprog-page .hero, body.btf-vpprog-page .vpprog-rtp, body.btf-vpprog-page .vpprog-panel-dark, body.btf-vpprog-page .btf-th-summary { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.btf-vpprog-page .vpg-hero-cta, body.btf-vpprog-page .vpprog-hero-toggle, body.btf-vpprog-page .vpprog-presets, body.btf-vpprog-page .vpprog-paytable, body.btf-vpprog-page .vpprog-controls { display: none !important; } body.btf-vpprog-page .vpprog-box { display: block; } /* the answers print open */ body.btf-vpprog-page .vpg-faq details::details-content { content-visibility: visible; display: block; height: auto; } body.btf-vpprog-page .vpg-faq summary::after { display: none; } body.btf-vpprog-page .vpprog-rule, body.btf-vpprog-page .vpprog-conversion, body.btf-vpprog-page .vpprog-layout, body.btf-vpprog-page .vpprog-box, body.btf-vpprog-page .vpprog-story, body.btf-vpprog-page .vpprog-panel-dark, body.btf-vpprog-page .vpg-faq details, body.btf-vpprog-page .btf-th-summary-card { break-inside: avoid; } }