/* BCPS-014 mockup, shared layer on top of the live main.css.
   Idea: every site is a crypto checkout receipt. What you pay, who charges it, what stays
   on record. Live colours kept: orange of the logo, its dark grey, the light page.
   Variant files set the fonts and their own layout bits. */

:root {
  --ac: #F4902C; --ac2: #c97220; --ac3: #f6a84e; --ac-soft: #fdf1e4;
  --ink: #1d1b1a; --text: #3f3c3b; --mute: #7a7471; --dark: #464646;
  --bg: #f9f9f9; --panel: #fff; --line: #e8e2db; --line2: #d9d1c7;
  --wrap: 1200px; --r: 6px;
  --f-head: sans-serif; --f-text: sans-serif; --f-num: monospace; --f-price: sans-serif;
}

body { font-family: var(--f-text); color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.55; }
.container { max-width: var(--wrap) !important; padding: 0 20px; }
a { color: inherit; }

/* ── header and footer: live markup and colours, tighter ── */
.header { min-height: 0; padding: 18px 0; border-bottom: 1px solid var(--line); background: var(--panel); }
.header__logo { max-width: 180px; }
.header__nav-list { font-family: var(--f-head); }
.footer__inner { font-family: var(--f-head); }

/* ── type ── */
.intro__h1, .sect__h, .blk__h, .panel__h, .intro__h2, .v2-hero__title { font-family: var(--f-head); color: var(--ink); }
.intro { padding: 34px 0 10px; }
.intro__h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1.05; font-weight: 800; }
.intro__meta { font-size: .86rem; color: var(--mute); margin: 8px 0 18px; }
.intro__meta a, .prose a, .panel a, .v2-byline a { color: var(--ac2); text-decoration: underline; text-underline-offset: 2px; }
.intro__h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 8px; }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.intro__text p, .prose p { margin: 0 0 14px; }
.prose h2, .prose h3 { font-family: var(--f-head); color: var(--ink); margin: 22px 0 8px; }
.prose ul { list-style: disc; margin: 0 0 14px 22px; }

.sect { padding: 26px 0; }
.sect--text { padding: 34px 0; }
.sect__h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1.1; padding-bottom: 10px; border-bottom: 1px solid var(--ac); margin: 0 0 20px; }
.sect--text .sect__h { border: 0; padding: 0; margin-bottom: 12px; }
.sect--text .sect__h + .prose + .sect__h { margin-top: 30px; }

/* ── category list under the intro ── */
.hubnav { background: var(--panel); border-top: 3px solid var(--ac); padding: 14px 18px; }
.hubnav__h { font-family: var(--f-head); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.hubnav a { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line2); font-weight: 500; }
.hubnav a:last-child { border: 0; }
.hubnav a:hover span { color: var(--ac2); }
.hubnav small { color: var(--mute); font-family: var(--f-num); font-size: .8rem; }

/* ── the live photo card ── */
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pick { background: var(--panel); display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; }
.pick__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #222; }
.pick__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick__media::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.pick__rank { position: absolute; top: 10px; right: 12px; z-index: 1; color: #fff; font: 800 1.5rem/1 var(--f-price); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.flag { position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(40,38,37,.88); color: #fff; font: 700 11px/1.1 var(--f-text); text-transform: uppercase; padding: 5px 8px; border-radius: 3px; }
.flag b { display: block; color: var(--ac); font: 800 1.15rem/1 var(--f-price); }
.flag--sm { padding: 4px 6px; } .flag--sm b { font-size: 1rem; }
.pick__name { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: #fff; font: 700 1.45rem/1.05 var(--f-head); max-width: 52%; }
.pick__price { position: absolute; right: 12px; bottom: 8px; z-index: 1; color: var(--ac); font: 800 2.9rem/.9 var(--f-price); text-align: right; letter-spacing: -.5px; }
.pick__price--tok { font-size: 1.7rem !important; max-width: 46%; line-height: 1; }
.pick__price small { display: block; color: #fff; font: 600 .78rem/1.3 var(--f-text); letter-spacing: 0; text-transform: capitalize; }
.pick__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pick__text { font-size: .93rem; color: var(--text); }
.pick__pm { display: flex; gap: 8px; align-items: baseline; font-size: .82rem; color: var(--mute); border-top: 1px dashed var(--line2); padding-top: 8px; margin-top: auto; }
.pick__pm b { font-family: var(--f-num); color: var(--ink); font-size: .95rem; }
.pick .btns { margin-top: auto; }
.pick__pm + .btns { margin-top: 0; }

.tagline { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font: 600 11px/1 var(--f-text); text-transform: uppercase; letter-spacing: .3px; padding: 4px 6px; background: #f1ede8; color: var(--dark); border-radius: 3px; }
.tag--coin { background: var(--ac-soft); color: var(--ac2); font-family: var(--f-num); }

.ticks, .dashes { display: flex; flex-direction: column; gap: 6px; }
.ticks li, .dashes li { position: relative; padding-left: 20px; font-size: .9rem; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 10px; height: 6px; border-left: 2px solid var(--ac); border-bottom: 2px solid var(--ac); transform: rotate(-45deg); }
.dashes li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 10px; height: 2px; background: var(--dark); }
.ticks--sm li { font-size: .84rem; }

/* ── buttons: the live orange, no glow ── */
.btns { display: flex; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; background: var(--ac); color: #fff !important; font: 700 .95rem/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .3px; border-radius: var(--r); border: 2px solid var(--ac); white-space: nowrap; text-decoration: none !important; transition: background .15s; }
.btn:hover { background: var(--ac2); border-color: var(--ac2); }
.btn--ghost { background: transparent; color: var(--ac2) !important; }
.btn--ghost:hover { background: var(--ac-soft); color: var(--ac2) !important; border-color: var(--ac); }
.btns .btn { flex: 1; }
.btns .btn--ghost { flex: 0 0 auto; }
.btn--sm { padding: 7px 12px; font-size: .82rem; }
.btn--wide { width: 100%; padding: 14px 18px; font-size: 1.05rem; }

/* ── wide rows ── */
.rows { display: flex; flex-direction: column; gap: 14px; }
.row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; background: var(--panel); border-radius: var(--r); overflow: hidden; }
.row__media { position: relative; display: block; min-height: 160px; background: #222; }
.row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row__rank { position: absolute; right: 10px; top: 8px; color: #fff; font: 800 1.35rem/1 var(--f-price); text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.row__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.row__name { font: 700 1.3rem/1.1 var(--f-head); color: var(--ink); }
.row__name:hover { color: var(--ac2); }
.row__facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .8rem; color: var(--mute); margin-top: auto; }
.row__facts div { display: flex; gap: 5px; }
.row__facts dd { color: var(--ink); font-weight: 600; }
.warn { color: var(--ac2) !important; font-weight: 700; }
.row__buy { padding: 14px 16px; border-left: 1px dashed var(--line2); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.row__price { font: 800 2.2rem/1 var(--f-price); color: var(--ac); }
.row__price small { font: 600 .78rem var(--f-text); color: var(--mute); margin-left: 6px; text-transform: lowercase; }
.row__pm { font: .78rem var(--f-num); color: var(--mute); }
.row__buy .btns { flex-direction: column; gap: 6px; margin-top: 6px; }

/* ── filter bar ── */
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: -4px 0 18px; padding: 12px 14px; background: var(--panel); border-radius: var(--r); }
.fbar__group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fbar__lbl { font-size: .8rem; color: var(--mute); margin-right: 2px; }
.fbar__sort { display: flex; gap: 14px; align-items: center; margin-left: auto; font-size: .85rem; color: var(--mute); }
.fbar__sort select { font: inherit; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line2); border-radius: 4px; background: #fff; }
.fbar__count { font-size: .85rem; color: var(--mute); margin-left: auto; }
.fbar__sort .fbar__count { margin-left: 0; }
.fbar__count b { font-family: var(--f-num); color: var(--ink); }
.chip { font: 600 .82rem/1 var(--f-text); padding: 8px 11px; border: 1px solid var(--line2); background: #fff; color: var(--text); border-radius: 4px; cursor: pointer; }
.chip:hover { border-color: var(--ac); }
.chip.is-on { background: var(--dark); border-color: var(--dark); color: #fff; }
.chip--opt.is-on { background: var(--ac); border-color: var(--ac); }
.chip small { font-family: var(--f-num); opacity: .7; }
.empty { padding: 30px; text-align: center; background: var(--panel); color: var(--mute); }
[data-rank][hidden] { display: none !important; }

/* ── two panels ── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.panel { background: var(--panel); padding: 20px 22px; border-top: 3px solid var(--ac); }
.panel__h { font-size: 1.35rem; font-weight: 800; margin-bottom: 4px; }
.panel__lead { color: var(--mute); font-size: .88rem; margin-bottom: 12px; }
.cheap { counter-reset: c; }
.cheap li { counter-increment: c; display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--line2); }
.cheap li::before { content: counter(c); grid-row: span 2; font: 800 1.3rem/1 var(--f-price); color: var(--ac); }
.cheap a { font-weight: 700; color: var(--ink); text-decoration: none; }
.cheap span { grid-column: 2; font-size: .78rem; color: var(--mute); }
.cheap b { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 700 1.05rem var(--f-num); color: var(--ink); }
.billers > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line2); }
.billers dt { font-weight: 700; color: var(--ink); }
.billers dt small { font-family: var(--f-num); color: var(--ac2); margin-left: 4px; }
.billers dd { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .85rem; }
.billers dd a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line2); }
.billers dd a:hover { color: var(--ac2); border-color: var(--ac); }
.billers dd span { color: var(--mute); }

/* ── review ── */
.review { margin: 20px 0 40px; }
.v2-hero__img-wrap { border-radius: var(--r); margin-bottom: 0; }
.v2-hero__img { height: 300px; }
.v2-hero__title { color: #fff; font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
.v2-verified-badge { background: rgba(255,255,255,.18); color: #fff; backdrop-filter: none; border-radius: 3px; }
.v2-btc-badge { border-radius: 3px; }
.v2-hero__score { border-radius: var(--r); }
.v2-hero__score-num { font-family: var(--f-price); font-size: 2.3rem; }
.v2-byline { margin: 10px 0 14px; color: var(--mute); }

.jump { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; margin-bottom: 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: var(--bg); scrollbar-width: none; }
.jump a { flex: 0 0 auto; padding: 6px 12px; font: 600 .86rem var(--f-text); color: var(--text); border-radius: 4px; }
.jump a:hover { background: var(--panel); color: var(--ac2); }

.lead2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; margin-bottom: 22px; }
.lead2 .blk { margin: 0; }
.blk { background: var(--panel); padding: 22px 24px; margin: 0 0 22px; border-radius: var(--r); scroll-margin-top: 60px; }
.blk__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.blk__h { font-size: 1.45rem; font-weight: 800; line-height: 1.15; margin: 0 0 14px; }
.blk__more { font-size: .85rem; color: var(--ac2); text-decoration: underline; }

.verdict__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.verdict__h { font: 700 1rem var(--f-head); color: var(--ink); padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--ac); }
.verdict__col--watch .verdict__h { border-color: var(--dark); }

/* the receipt: dashed rules, mono figures, torn bottom edge */
.receipt { background: var(--panel); padding: 20px 22px 26px; border-radius: var(--r) var(--r) 0 0; position: relative; font-size: .9rem; margin-bottom: 22px; }
.receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 6px 0, transparent 6px, var(--panel) 6.5px) 0 0 / 12px 10px repeat-x; transform: rotate(180deg); }
.receipt__h { font: 800 1.25rem var(--f-head); color: var(--ink); margin: 0 0 8px; }
.score__sub { font: inherit; display: inline; margin: 0; }
.receipt__head { display: flex; justify-content: space-between; gap: 10px; font: 700 .76rem var(--f-num); text-transform: uppercase; letter-spacing: .6px; color: var(--mute); padding-bottom: 10px; border-bottom: 2px dashed var(--line2); }
.receipt__head span:last-child { color: var(--ink); }
.receipt__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.receipt__rows dt { color: var(--mute); flex: 0 0 auto; }
.receipt__rows dd { color: var(--ink); font-family: var(--f-num); font-size: .84rem; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 14px; border-top: 2px dashed var(--line2); margin-top: 6px; font: 700 .8rem var(--f-num); text-transform: uppercase; letter-spacing: .5px; }
.receipt__total b { font: 800 2.2rem/1 var(--f-price); color: var(--ac); letter-spacing: 0; }
.receipt__total small { font-size: .9rem; color: var(--mute); }

.plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.plan { position: relative; border: 1px solid var(--line2); border-radius: var(--r); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 3px; background: #fff; }
.plan--best { border: 2px solid var(--ac); }
.plan__period { font: 700 .78rem var(--f-text); text-transform: uppercase; letter-spacing: .4px; color: var(--mute); }
.plan__price { font: 800 2rem/1.05 var(--f-price); color: var(--ink); }
.plan__price del { font-size: 1.1rem; color: var(--mute); font-weight: 400; }
.is-month .plan__price { color: var(--ac2); }
.plan__pm { font: .82rem var(--f-num); color: var(--ac2); }
.plan__best { position: absolute; top: -10px; right: 10px; background: var(--ac); color: #fff; font: 700 11px/1 var(--f-text); text-transform: uppercase; padding: 4px 7px; border-radius: 3px; }
.plan__save { font-size: .78rem; font-weight: 700; color: var(--ac2); }
.plan__rebill { font-size: .78rem; color: var(--mute); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.seg__b { font: 600 .82rem var(--f-text); padding: 7px 12px; background: #fff; border: 0; cursor: pointer; color: var(--text); }
.seg__b.is-on { background: var(--dark); color: #fff; }
.plans--picker .plan { cursor: pointer; padding-left: 40px; }
.plans--picker .plan input { position: absolute; left: 14px; top: 17px; accent-color: var(--ac); width: 16px; height: 16px; }
.plans--picker .plan.is-picked { border-color: var(--ac); background: var(--ac-soft); }
.plans__go { margin-top: 16px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 4px 18px 4px 0; display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--mute); }
.steps li + li { padding-left: 18px; border-left: 1px dashed var(--line2); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 700 1.6rem/1 var(--f-num); color: var(--ac); }
.steps b { color: var(--ink); font: 700 1rem var(--f-head); }

.leaders > div { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.leaders dt { flex: 0 1 auto; min-width: 0; color: var(--text); }
.leaders dd { white-space: nowrap; }
.leaders dt small { font-family: var(--f-num); color: var(--mute); margin-left: 4px; }
.leaders > div::after { content: ''; order: 1; flex: 1; border-bottom: 2px dotted var(--line2); transform: translateY(-4px); }
.leaders dd { order: 2; font: 700 1rem var(--f-num); color: var(--ink); }
.leaders dd small { color: var(--mute); font-weight: 400; }
.leaders--sub dt { font-size: .9rem; }
.leaders--sub .is-fail dt, .leaders--sub .is-unverified dt { color: var(--mute); }
.leaders--sub .is-fail dd { color: var(--ac2); }
.score__more { margin-top: 12px; border-top: 1px dashed var(--line2); padding-top: 10px; }
.score__more summary { cursor: pointer; font: 700 .98rem var(--f-head); color: var(--ink); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.score__more summary b { font-family: var(--f-num); color: var(--ac2); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 22px; }
.facts > div { padding: 9px 0; border-bottom: 1px dashed var(--line2); }
.facts dt { font-size: .76rem; color: var(--mute); text-transform: uppercase; letter-spacing: .4px; }
.facts dd { font: 700 1.05rem var(--f-num); color: var(--ink); }

.checklist { background: var(--dark); color: #eee; }
.checklist .blk__h { color: #fff; }
.checklist__intro, .checklist__sub { color: #c9c4bf; font-size: .9rem; margin-bottom: 10px; }
.checklist__sub { margin-top: 16px; font-weight: 700; color: #fff; }
.marks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.marks li { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; background: rgba(255,255,255,.06); border-left: 3px solid #8a8580; font-size: .9rem; }
.marks li.ok { border-color: var(--ac); }
.marks li.no { border-color: #fff; background: rgba(244,144,44,.18); }
.marks b { flex: 0 0 74px; font: 700 .72rem var(--f-num); text-transform: uppercase; letter-spacing: .5px; color: var(--ac3); }
.marks--you li { border-color: #8a8580; }

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.proscons__h { font: 700 1.1rem var(--f-head); color: var(--ink); padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--ac); }
.proscons__h--con { border-color: var(--dark); }

.v2-inline-cta { border-radius: var(--r); margin: 0 0 22px; }
.v2-inline-cta__name { font-family: var(--f-head); }
.v2-review-body { font-size: 1.02rem; line-height: 1.7; }
.v2-review-body h3 { font-family: var(--f-head); }

.faq__i { border-bottom: 1px dashed var(--line2); }
.faq__i summary { cursor: pointer; padding: 12px 0; font: 700 1rem var(--f-head); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq__i summary::after { content: '+'; font-family: var(--f-num); color: var(--ac); font-size: 1.2rem; line-height: 1; }
.faq__i[open] summary::after { content: '\2212'; }
.faq__i div { padding: 0 0 14px; font-size: .93rem; }

.v2-reviewer { border-radius: var(--r); margin-bottom: 26px; }
.v2-reviewer__name { font-family: var(--f-head); }

.alts__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.alts__list li { display: flex; flex-direction: column; gap: 8px; }
.alts__list li > a:first-child { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; gap: 2px 10px; text-decoration: none; }
.alts__list img { grid-row: span 2; width: 96px; height: 64px; object-fit: cover; border-radius: 4px; }
.alts__name { font: 700 1rem var(--f-head); color: var(--ink); }
.alts__why { font: .8rem var(--f-num); color: var(--ac2); }
.alts__list .btn { align-self: flex-start; }

.related { margin-top: 10px; }
.related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mini { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.mini__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: #222; }
.mini__media img { width: 100%; height: 100%; object-fit: cover; }
.mini__name { font: 700 1.05rem var(--f-head); color: var(--ink); }
.mini__price { font: .82rem var(--f-num); color: var(--mute); }

.v2-sticky-cta { padding: 10px 20px; background: var(--ink); }
.v2-sticky-cta__inner { max-width: var(--wrap); justify-content: space-between; }
.v2-sticky-cta__name { font-family: var(--f-head); font-size: 1.2rem; text-transform: none; display: flex; flex-direction: column; line-height: 1.15; }
.v2-sticky-cta__name small { font: .78rem var(--f-num); color: #ccc; }
.page-review .footer { padding-bottom: 70px; }

/* local mockup switch */
.mock-switch { position: fixed; left: 10px; bottom: 80px; z-index: 2000; display: flex; background: #111; border-radius: 4px; overflow: hidden; font: 700 12px/1 monospace; }
.mock-switch a { color: #fff; padding: 8px 10px; cursor: pointer; }
.mock-switch a.is-on { background: var(--ac); }

/* ── phone ── */
@media (max-width: 900px) {
  .intro__grid, .lead2, .duo { grid-template-columns: 1fr; }
  .picks { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 180px minmax(0, 1fr); }
  .row__buy { grid-column: 1 / -1; border-left: 0; border-top: 1px dashed var(--line2); flex-direction: row; align-items: center; flex-wrap: wrap; }
  .row__buy .btns { flex-direction: row; margin: 0 0 0 auto; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .alts__list, .related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .container { padding: 0 14px; }
  .picks { grid-template-columns: 1fr; }
  .pick__price { font-size: 2.5rem; }
  .row { grid-template-columns: 1fr; }
  .row__media { min-height: 0; aspect-ratio: 16 / 9; }
  .row__buy .btns { width: 100%; margin: 0; }
  .fbar { flex-direction: column; align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr); }
  .fbar > * { min-width: 0; }
  .fbar__group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chip { flex: 0 0 auto; }
  .fbar__sort { margin: 0; justify-content: space-between; }
  .blk { padding: 18px 16px; }
  .v2-hero__img { height: 220px; }
  .verdict__cols, .proscons, .marks, .steps { grid-template-columns: 1fr; }
  .steps li + li { padding-left: 0; border-left: 0; border-top: 1px dashed var(--line2); padding-top: 10px; }
  .alts__list, .related__grid { grid-template-columns: 1fr; }
  .billers > div { grid-template-columns: 1fr; gap: 4px; }
  .hubnav { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 4px; background: none; border: 0; scrollbar-width: none; }
  .hubnav__h { display: none; }
  .hubnav a { flex: 0 0 auto; border: 1px solid var(--line2); border-radius: 4px; background: #fff; padding: 7px 10px; gap: 6px; }
  .hubnav a:last-child { border: 1px solid var(--line2); }
  .mock-switch { bottom: 70px; }
}
/* Variant C: Hanken Grotesk for heads and text, Fragment Mono for figures, the live Myriad condensed for prices. */
:root { --f-head: 'Hanken Grotesk', sans-serif; --f-text: 'Hanken Grotesk', sans-serif; --f-num: 'Fragment Mono', monospace; --f-price: 'Myriadpro', 'Arial Narrow', sans-serif; }
.intro__h1 { letter-spacing: -1.2px; }
.intro--c { padding-top: 30px; }
.intro__grid--c { grid-template-columns: minmax(0, 1fr) 420px; }

/* picker */
.picker { background: var(--dark); color: #eee; padding: 20px 20px 16px; border-radius: var(--r); }
.picker__h { font: 800 1.35rem var(--f-head); color: #fff; margin-bottom: 4px; }
.picker__q { font: 600 .78rem var(--f-num); text-transform: uppercase; letter-spacing: .5px; color: var(--ac3); margin: 12px 0 6px; }
.picker__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.picker .chip { background: transparent; color: #eee; border-color: #6d6965; }
.picker .chip.is-on { background: var(--ac); border-color: var(--ac); color: #fff; }
.picker__out { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; counter-reset: p; }
.picker__out li { counter-increment: p; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07); padding: 8px; border-radius: 4px; }
.picker__out li::before { content: counter(p); font: 800 1.4rem/1 var(--f-price); color: var(--ac); width: 16px; text-align: center; }
.picker__site { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; }
.picker__site img { width: 64px; height: 42px; object-fit: cover; border-radius: 3px; }
.picker__site span { display: flex; flex-direction: column; min-width: 0; }
.picker__site b { color: #fff; font-family: var(--f-head); }
.picker__site small { color: #c9c4bf; font: .76rem var(--f-num); }
.picker__none { color: #c9c4bf; }
.picker__none::before { display: none; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 34px; }
.tiles--top { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tiles--top .tile { grid-column: span 2; }
.tiles--top .tile:nth-child(-n+2) { grid-column: span 3; }
.tiles--top .tile:nth-child(-n+2) .pick__media { aspect-ratio: 16 / 8; }
.tiles--top .tile:nth-child(-n+2) .pick__price { font-size: 3.4rem; }
.tile { background: var(--panel); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.tile .pick__name { font-size: 1.25rem; }
.tile .pick__price { font-size: 2.3rem; }
.tile__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tile__line { font-size: .84rem; color: var(--text); }
.tile .btns { margin-top: auto; }

/* hubs */
.hubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hub { position: relative; display: block; aspect-ratio: 16 / 8; border-radius: var(--r); overflow: hidden; background: #222; text-decoration: none; }
.hub img { width: 100%; height: 100%; object-fit: cover; }
.hub::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.1)); }
.hub__name { position: absolute; left: 18px; bottom: 40px; z-index: 1; color: #fff; font: 800 1.8rem var(--f-head); }
.hub__meta { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: var(--ac3); font: .82rem var(--f-num); }
.hub:hover .hub__name { color: var(--ac); }

.duo--text { gap: 40px; }
.review .duo { margin-bottom: 22px; }
.review .duo .receipt, .review .duo .blk { margin: 0; }
.review .duo .steps { grid-template-columns: 1fr; }
.review .duo .steps li + li { padding-left: 0; border-left: 0; border-top: 1px dashed var(--line2); padding-top: 8px; }

@media (max-width: 900px) {
  .intro__grid--c { grid-template-columns: 1fr; }
  .tiles, .tiles--top { grid-template-columns: 1fr 1fr; }
  .tiles--top .tile, .tiles--top .tile:nth-child(-n+2) { grid-column: span 1; }
  .tiles--top .tile:first-child { grid-column: 1 / -1; }
  .hubs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .tiles, .tiles--top, .hubs { grid-template-columns: 1fr; }
  .tiles--top .tile:first-child { grid-column: auto; }
}
/* Variant D on top of C: A's header (Saira Condensed nav), crypto on the cards, coins in the checkout panel. */
.header__nav-list { font-family: 'Saira Condensed', 'Arial Narrow', sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .3px; }
.intro { padding-bottom: 0; }
.intro__h1 { margin-bottom: 18px; }
.sect__note { font-size: .86rem; color: var(--mute); margin: -10px 0 18px; }
.sect__note a { color: var(--ac2); text-decoration: underline; text-underline-offset: 2px; }

.paywith { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.paywith__l { font: 600 11px/1 var(--f-num); color: var(--mute); margin-left: 4px; }
.tile__facts { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: .8rem; color: var(--mute); border-top: 1px dashed var(--line2); padding-top: 7px; }
.tile__facts div { display: flex; gap: 5px; }
.tile__facts dd { font-family: var(--f-num); color: var(--ink); }
.tile__facts:empty { display: none; }

.billers--coins .billers__site { display: inline-flex; align-items: baseline; gap: 3px; }
.billers--coins i { font: normal 600 10.5px/1 var(--f-num); font-size: 11px; color: var(--ac2); background: var(--ac-soft); padding: 2px 4px; border-radius: 2px; }
.tile__note { flex-basis: 100%; }
.tiles--top3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--top3 .pick__price { font-size: 2.9rem; }
@media (max-width: 900px) { .tiles--top3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tiles--top3 { grid-template-columns: 1fr; } }

/* Long words in verdict lists must not push the page sideways on phones. */
.lead2 > *, .verdict__col { min-width: 0; }
.verdict__col li { overflow-wrap: anywhere; }
@media (max-width: 760px) { .lead2, .verdict__cols { grid-template-columns: minmax(0, 1fr); } }

/* Copy-paste snippets on /webmaster/: wrap instead of scrolling the page sideways. */
.page-content__body pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-alt, #f4f4f5); border: 1px solid var(--border, #e0e0e0); border-radius: 8px; padding: 12px 14px; font-size: .9rem; line-height: 1.5; }