/* "What you get free": the value breakdown (A: a paper receipt; G: an arcade price board), and the
   home-page frame that holds it. Loaded on the home pages and on /start, after a.css / g.css. */

.vb{--vb-bg:#FBF8F1;--vb-ink:#1A1712;--vb-mute:#7D7468;--vb-line:#D8CDBB;--vb-free:#13803E;--vb-free-bg:#E3F4E8;--vb-acc:#E3341C;
  position:relative;background:var(--vb-bg);color:var(--vb-ink);border-radius:6px;padding:22px 22px 30px;font-family:var(--sans);text-align:left;
  box-shadow:0 1px 1px rgba(40,20,0,.12),0 24px 44px -24px rgba(40,20,0,.55)}
.vb .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* A: torn receipt edge at the bottom */
[data-variant="a"] .vb{-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x}
.vb-k{margin:0;font:400 .6875rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--vb-mute)}
.vb-h{margin:8px 0 0;font-weight:800;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;letter-spacing:-.04em;color:var(--vb-ink)}
.vb-h span{color:var(--vb-free)}
.vb-always{margin:10px 0 0;display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 9px;border-radius:99px;background:var(--vb-free-bg);color:var(--vb-free);font-weight:700;font-size:.8125rem}
.vb-always::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.vb-list{list-style:none;margin:16px 0 0;padding:0;border-top:1.5px dashed var(--vb-line)}
.vb-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--vb-line)}
.vb-n b{display:block;font-weight:650;font-size:.9375rem;line-height:1.25}
.vb-n small{display:block;margin-top:2px;color:var(--vb-mute);font-size:.8rem;line-height:1.3}
.vb-p{display:flex;align-items:center;gap:8px;white-space:nowrap}
.vb s{position:relative;text-decoration:none;color:var(--vb-mute);font:400 .8125rem/1 var(--mono);font-variant-numeric:tabular-nums}
.vb s::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:var(--vb-acc);transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.35,1) calc(var(--i,0) * 70ms + 120ms)}
.vb em{font-style:normal;font-weight:800;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--vb-free);background:var(--vb-free-bg);padding:4px 8px;border-radius:99px;transition:opacity .3s calc(var(--i,0) * 70ms + 420ms),transform .4s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0) * 70ms + 420ms)}
.vb-row s,.vb-row em{--i:inherit}
.vb-row{--i:0}
html.motion .vb:not(.in) s::after{transform:scaleX(0)}
html.motion .vb:not(.in) em{opacity:0;transform:scale(.5)}
.vb-tot{margin-top:14px;padding-top:12px;border-top:2px solid var(--vb-ink);display:grid;gap:6px}
.vb-tot p{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vb-tv span{font-weight:600}
.vb-tv s{font-size:1rem}
.vb-pay span{font-weight:800;font-size:1.0625rem}
.vb-pay b{font-weight:850;font-size:1.9rem;letter-spacing:-.04em;line-height:1;color:var(--vb-free)}
.vb-truth{margin-top:18px;padding-top:14px;border-top:1.5px dashed var(--vb-line)}
.vb-pays{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;counter-reset:p}
.vb-pays li{display:grid;grid-template-columns:7.2rem 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--vb-line);font-size:.875rem;line-height:1.38}
.vb-when{font:400 .6875rem/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--vb-mute);padding-top:2px}
.vb-what b{font-weight:700}
.vb-all{margin:12px 0 0;font-weight:700;font-size:.9375rem}
.vb-foot{margin:10px 0 0;font-size:.75rem;color:var(--vb-mute)}
.vb-compact .vb-row{padding:7px 0}
.vb-compact .vb-n b{font-size:.875rem}
@media (max-width:420px){.vb{padding:18px 16px 26px}.vb-pays li{grid-template-columns:1fr;gap:2px}}

/* G: the arcade price board */
[data-variant="g"] .vb{--vb-bg:#FFFDF6;--vb-ink:#151312;--vb-mute:#6E665A;--vb-line:#151312;--vb-free:#0F7A4C;--vb-free-bg:#7EE0B8;--vb-acc:#FF5B3A;
  border:3px solid #151312;border-radius:20px;box-shadow:6px 6px 0 #151312;padding:22px 20px 22px}
[data-variant="g"] .vb-h{font-family:var(--disp);letter-spacing:-.02em}
[data-variant="g"] .vb-list{border-top:3px solid #151312}
[data-variant="g"] .vb-row{border-bottom:2px dotted rgba(21,19,18,.35)}
[data-variant="g"] .vb em{color:#151312;border:2px solid #151312;box-shadow:2px 2px 0 #151312;border-radius:8px;padding:3px 7px}
[data-variant="g"] .vb-always{background:#FFE45C;color:#151312;border:2px solid #151312}
[data-variant="g"] .vb-tot{border-top:3px solid #151312}
[data-variant="g"] .vb-pay b{font-family:var(--disp)}
[data-variant="g"] .vb-truth{border-top:3px dashed #151312}
[data-variant="g"] .vb-pays li{border-bottom:2px dotted rgba(21,19,18,.35)}

@media (prefers-reduced-motion:reduce){.vb s::after,.vb em{transition:none}}

/* ---------- home page frame ---------- */
.f-free{display:flex;flex-direction:column}
[data-variant="a"] .f-free{background:var(--yellow);color:#171204}
[data-variant="g"] .f-free{background:var(--sky)}
.fv-g{flex:1;display:grid;gap:clamp(28px,4vw,64px);align-items:center;margin-top:24px}
@media (min-width:1000px){.fv-g{grid-template-columns:1fr minmax(420px,520px)}}
.fv-say .lead{margin-top:20px}
.fv-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px;max-width:520px}
.fv-two div{border-radius:16px;padding:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
[data-variant="g"] .fv-two div{background:#FFFDF6;border:3px solid #151312;box-shadow:4px 4px 0 #151312;border-radius:16px}
.fv-two .mono,.fv-two p:first-child{margin:0;font:400 .6875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.fv-two b{display:block;margin-top:6px;font-weight:850;font-size:1.6rem;letter-spacing:-.03em;line-height:1}
.fv-two small{display:block;margin-top:6px;font-size:.8125rem;line-height:1.35;opacity:.85}
.fv-two .fv-paid b{color:#B3260F}
.fv-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}

/* ---------- /start ---------- */
.sf-side .vb{margin-top:6px}
.sf-side .vb-h{font-size:1.5rem}
.vb-det{display:block;margin:0}
.vb-mob{display:grid;gap:16px;margin:0 0 8px}
@media (min-width:1000px){.vb-mob{display:none}}
.vb-paybox{padding-bottom:22px}
.vb-paybox .vb-k{font-size:.75rem}
.sf-side .vb-paybox,.sf-side .sy-card{margin-top:0}
.vb-det>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--f-card,#fff);color:var(--f-ink,#151312);font-weight:750;box-shadow:inset 0 0 0 1.5px currentColor;min-height:48px}
.vb-det>summary::-webkit-details-marker{display:none}
.vb-det>summary b{color:#13803E}
.vb-det>summary i{flex:none;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.vb-det[open]>summary i{transform:rotate(-135deg)}
.vb-det[open]>summary{border-radius:14px 14px 0 0}
.vb-det .vb{border-radius:0 0 14px 14px}
[data-variant="g"] .vb-det>summary{border:3px solid #151312;box-shadow:none;background:#FFE45C}
[data-variant="g"] .vb-det[open] .vb{border-top:0;border-radius:0 0 18px 18px}
.st-review .vb{margin-top:18px}
@media (min-width:1000px){.sf-side{max-height:calc(100svh - 92px);overflow-y:auto;overscroll-behavior:contain;gap:18px}}