/* Shared base stylesheet. Brand look comes from CSS variables set per site (site.json → theme). */
/* Inter, self-hosted (engine/assets/fonts, SIL OFL 1.1): used by the theme fonts "grotesk" (layout.mjs FONTS);
   downloaded only by pages that use it, the main latin file is preloaded by layout.mjs */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --accent: #2563eb;
  --accent-2: #7c3aed;
  --accent-ink: #ffffff;
  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-2: #eef0f4;
  --text: #0f172a;
  --muted: #5b6475;
  --border: #e3e6ec;
  --radius: 14px;
  --font-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1120px;
  --yes: #16a34a;
  --no: #dc2626;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 var(--font-body); text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin-top: 2.2em; scroll-margin-top: 90px; }
h3 { font-size: 1.18rem; margin-top: 1.6em; scroll-margin-top: 90px; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin: .25em 0; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); padding: .12em .38em; border-radius: 6px; }
blockquote { border-left: 3px solid var(--accent); padding: .2em 0 .2em 1em; color: var(--muted); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--bg); padding: 8px 12px; }

/* top bar + header */
.topbar { background: var(--topbar-bg, var(--text)); color: var(--topbar-ink, var(--bg)); font-size: .85rem; text-align: center; padding: 7px 0; }
.topbar a { color: inherit; }
.topbar strong { color: var(--accent-2, var(--accent)); filter: brightness(1.3); }
.hdr { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--border); }
.hdr-in { display: flex; align-items: center; gap: 22px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 800 1.2rem/1 var(--font-head); letter-spacing: -0.02em; }
.logo-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: .95rem; }
.nav { display: flex; gap: 20px; flex: 1; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.menu { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; font: inherit; color: var(--text); }
@media (max-width: 860px) {
  .menu { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 66px; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 16px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .hdr-cta { display: none; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: calc(var(--radius) - 4px); font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: transform .12s ease, box-shadow .12s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
/* premium charter (docs/sessions/DESIGN-PREMIUM-PROXY.md): one solid brand colour, no gradient, no coloured glow */
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgb(15 23 42 / .12); }
.btn-ghost { border-color: var(--border); color: var(--text); background: var(--bg); }
.btn-sm { padding: 8px 14px; font-size: .92rem; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }

/* page head */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 22px 0 0; font-size: .86rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.crumbs a { color: var(--muted); text-decoration: none; }
.page-head { padding: 34px 0 10px; max-width: 860px; }
.page-head.hero { padding: 64px 0 28px; max-width: 920px; }
.page-head.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
.kicker { display: inline-block; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; }
.lede { font-size: 1.18rem; color: var(--muted); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0; }
.badges li { margin: 0; font-size: .88rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.meta { font-size: .88rem; color: var(--muted); margin-top: 10px; }

/* content */
.content { max-width: 860px; }
.t-home .content, .t-pricing .content, .t-hub .content { max-width: none; }
.quick-answer { margin: 22px 0 28px; padding: 20px 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-left: 5px solid var(--accent); }
.qa-label { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.qa-q { font-weight: 700; margin-bottom: 6px; }
.qa-text p:last-child { margin-bottom: 0; }
.toc { max-width: 860px; margin: 8px 0 26px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .93rem; }
.toc-h { font-weight: 700; margin: 0 0 4px; }
.toc ol { margin: 0; columns: 2 260px; }
.toc a { color: var(--text); text-decoration: none; }

.facts-table, .tbl table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.facts-table th, .facts-table td, .tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.facts-table th { width: 38%; color: var(--muted); font-weight: 600; }
.facts { margin: 8px 0 10px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.tbl thead th { background: var(--surface); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tbl tbody th { font-weight: 700; }
.tbl tr.hl { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tbl tr.hl th { color: var(--accent); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl caption { caption-side: bottom; padding: 8px 12px; color: var(--muted); font-size: .85rem; text-align: left; }
.table-note { font-size: .88rem; color: var(--muted); margin-top: 8px; }
.yes { color: var(--yes); font-weight: 800; }
.no { color: var(--no); font-weight: 800; }

/* pricing */
.pricing { margin-top: 10px; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 22px 18px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.plan.popular { border: 2px solid var(--accent); box-shadow: var(--shadow-md, 0 16px 36px -18px rgb(15 23 42 / .28)); }
.plan-badge { position: absolute; top: -12px; left: 16px; margin: 0; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--accent-ink); padding: 3px 10px; border-radius: 999px; }
.plan-name { margin: 0 0 4px; font-size: 1.05rem; }
.plan-qty { margin: 0; color: var(--muted); font-size: .92rem; }
.plan-price { margin: 10px 0 0; font: 800 2rem/1.1 var(--font-head); letter-spacing: -0.03em; }
.plan-unit { margin: 2px 0 12px; color: var(--accent); font-weight: 700; font-size: .92rem; }
.plan-features { list-style: none; padding: 0; font-size: .9rem; margin: 0 0 16px; flex: 1; }
.plan-features li::before { content: "✓ "; color: var(--yes); font-weight: 800; }
.plan .btn { width: 100%; }
.pricing-note { font-size: .88rem; color: var(--muted); margin-top: 12px; }

/* faq */
.faq-item { border-bottom: 1px solid var(--border); padding: 4px 0 6px; }
.faq-item h3 { margin-top: 1.1em; }

/* steps */
.step-list { list-style: none; counter-reset: s; padding: 0; }
.step-list > li { counter-increment: s; position: relative; padding: 2px 0 6px 52px; margin-bottom: 12px; }
.step-list > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); color: var(--accent); }
.step-name { font-weight: 700; margin: 4px 0 2px; }

/* cards */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { padding: 18px 18px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.card h3 { margin-top: 0; font-size: 1.05rem; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card p { color: var(--muted); font-size: .95rem; }
.card-tag { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin: 0 0 6px; }

/* ranking */
.rank-list { list-style: none; padding: 0; }
.rank { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 6px; margin-bottom: 14px; }
.rank.self { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.rank-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rank-head h3 { margin: 0; }
.rank-n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 800; }
.rank-badge { font-size: .76rem; font-weight: 800; background: var(--accent); color: var(--accent-ink); padding: 3px 10px; border-radius: 999px; }
.rank-verdict { margin: 10px 0; }
.rank-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .9rem; margin: 0 0 8px; }
.rank-meta dt { display: inline; color: var(--muted); }
.rank-meta dt::after { content: ": "; }
.rank-meta dd { display: inline; margin: 0; font-weight: 600; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: .92rem; }
.pc-h { font-weight: 700; margin: 0; }
@media (max-width: 600px) { .pc { grid-template-columns: 1fr; } }
.disclosure { font-size: .82rem; color: var(--muted); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 10px 0 20px; }
.stat { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.stat-v { margin: 0; font: 800 1.8rem/1.1 var(--font-head); letter-spacing: -0.03em; color: var(--accent); }
.stat-l { margin: 4px 0 0; font-weight: 600; font-size: .93rem; }
.stat-n { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }

/* cta */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 36px 0; padding: 26px 28px; border-radius: calc(var(--radius) + 6px); background: var(--accent); color: var(--accent-ink); }
.cta-h { font: 800 1.45rem/1.25 var(--font-head); margin: 0 0 4px; }
.cta-t p { margin: 0; opacity: .92; }
.cta .btn-primary { background: var(--accent-ink); color: var(--accent); box-shadow: none; }
.cta .btn-ghost { background: transparent; color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 50%, transparent); }
.cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* code */
.code { position: relative; margin: 0 0 1.4em; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #0b1020; }
.code figcaption { font-size: .82rem; color: #9aa4bf; padding: 8px 14px; border-bottom: 1px solid #1d2540; font-family: var(--font-mono); }
.code pre { margin: 0; padding: 16px; overflow-x: auto; }
.code code { background: none; padding: 0; color: #e6e9f2; font-size: .86rem; line-height: 1.6; }
.copy { position: absolute; top: 6px; right: 8px; font: 600 .75rem var(--font-body); background: #1d2540; color: #cbd2e6; border: 0; border-radius: 6px; padding: 4px 8px; cursor: pointer; }

/* callout */
.callout { padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); margin: 0 0 1.2em; }
.callout.warn { background: color-mix(in srgb, #f59e0b 12%, var(--bg)); border-color: color-mix(in srgb, #f59e0b 50%, var(--border)); }
.callout.success { background: color-mix(in srgb, #16a34a 11%, var(--bg)); border-color: color-mix(in srgb, #16a34a 45%, var(--border)); }
.callout-h { font-weight: 800; margin: 0 0 4px; }
.callout p:last-child { margin-bottom: 0; }

/* definitions, link grid, sources */
.defs dl { margin: 0; }
.def { padding: 12px 0; border-bottom: 1px solid var(--border); }
.def dt { font-weight: 800; }
.def dd { margin: 4px 0 0; }
.def dd p:last-child { margin-bottom: 0; }
.lg { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; font-size: .95rem; }
.lg a { text-decoration: none; }
.lg-note { color: var(--muted); font-size: .82rem; }
.lg-group { font-weight: 800; margin: 18px 0 6px; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sources ol { font-size: .9rem; color: var(--muted); }
.coins { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.coins li { margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; }
.coin-code { font: 800 1.05rem var(--font-mono); color: var(--accent); }
.coin-name { font-weight: 600; font-size: .92rem; }
.coin-note { color: var(--muted); font-size: .8rem; }

/* related + about */
.related { max-width: 860px; margin-top: 30px; }
.related-list { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.related-list li { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.related-list a { font-weight: 700; text-decoration: none; }
.related-list p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.about-box { max-width: 860px; margin: 34px 0 10px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); font-size: .92rem; color: var(--muted); }
.about-h { font-weight: 800; color: var(--text); margin: 0 0 4px; }
.about-box p:last-child { margin: 0; }

/* footer */
.ftr { margin-top: 70px; background: var(--surface); border-top: 1px solid var(--border); padding: 44px 0 18px; font-size: .93rem; }
.ftr .wrap:first-child { display: grid; grid-template-columns: minmax(220px, 1.2fr) 2fr; gap: 34px; }
@media (max-width: 760px) { .ftr .wrap:first-child { grid-template-columns: 1fr; } }
.f-logo { font: 800 1.2rem var(--font-head); margin: 0 0 6px; }
.f-desc { color: var(--muted); }
.coins-mini { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.coins-mini li { margin: 0; font: 700 .75rem var(--font-mono); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; background: var(--bg); }
.f-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.f-h { font-weight: 800; margin: 0 0 8px; }
.f-col ul { list-style: none; padding: 0; margin: 0; }
.f-col a { color: var(--muted); text-decoration: none; }
.f-col a:hover { color: var(--text); }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; }
.langs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }

/* home layout helpers */
.t-home .sec, .t-home .cards-sec, .t-home .faq, .t-home .ranking, .t-home .tbl { max-width: 1120px; }
.t-home .sec > p, .t-home .faq-item, .t-home .quick-answer { max-width: 860px; }

/* ==========================================================================================================
   v2 — trust & conversion layer: icons, hero visual, trust row, coin logos, band, sticky buy bar, polish.
   Everything uses the theme variables (light + dark), no external resource; site theme.css still loads after.
   ========================================================================================================== */
:root {
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .05), 0 3px 10px -6px rgb(15 23 42 / .10);
  --shadow-md: 0 2px 4px rgb(15 23 42 / .04), 0 16px 36px -18px rgb(15 23 42 / .28);
  --focus: color-mix(in srgb, var(--accent) 75%, var(--text));
}
h1, h2, h3, .cta-h { text-wrap: balance; }
p, li { text-wrap: pretty; }
code, .sources li, .facts-table td { overflow-wrap: anywhere; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ic { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; }
.coin-logo { display: block; width: 22px; height: 22px; flex: none; }

/* buttons: clearer states */
.btn { line-height: 1.25; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease; cursor: pointer; }
.btn .ic { width: 1.05em; height: 1.05em; transition: transform .15s ease; }
.btn:hover .ic { transform: translateX(2px); }
/* hover: the same brand colour, a step towards the text colour (darker on light themes, lighter on dark ones) */
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); box-shadow: 0 2px 6px -2px rgb(15 23 42 / .25); }
.cta .btn-primary:hover { background: color-mix(in srgb, var(--accent-ink) 90%, var(--accent)); }
.btn:active { transform: translateY(0); filter: none; }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* header */
.hdr { box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 50%, transparent), 0 6px 20px -18px rgb(15 23 42 / .5); }
.nav { gap: 4px; }
.nav a { padding: 7px 11px; border-radius: 8px; transition: background-color .15s ease, color .15s ease; }
.nav a:hover { background: var(--surface); }
.nav a[aria-current] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.logo-mark { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
@media (max-width: 860px) {
  .nav { box-shadow: 0 18px 30px -24px rgb(15 23 42 / .5); }
  .nav a { padding: 12px 4px; border-radius: 0; }
  .nav a:hover, .nav a[aria-current] { background: none; color: var(--accent); }
}

/* hero: reassurance line + optional visual (two columns on wide screens) */
.hero-note { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 14px; font-size: .92rem; color: var(--muted); }
.hero-note .ic { width: 16px; height: 16px; margin-top: .25em; color: var(--yes); }
.page-head.hero.has-visual { max-width: none; }
.hero-main { min-width: 0; }
.hero-visual { min-width: 0; margin-top: 30px; }
@media (min-width: 960px) {
  .page-head.hero.has-visual { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
  .page-head.hero.has-visual h1 { font-size: clamp(2.2rem, 4.1vw, 3.35rem); }
  .has-visual .hero-visual { margin-top: 0; }
}
.hero-term { margin: 0; border-radius: calc(var(--radius) + 2px); overflow: hidden; background: #0b1020; color: #e6e9f2; border: 1px solid #1d2540; box-shadow: 0 30px 60px -32px rgb(2 6 23 / .6); }
.ht-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #10172b; border-bottom: 1px solid #1d2540; }
.ht-dots { display: inline-flex; gap: 6px; flex: none; }
.ht-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ht-dots i:nth-child(2) { background: #febc2e; }
.ht-dots i:nth-child(3) { background: #28c840; }
.ht-title { font: 600 .78rem var(--font-mono); color: #9aa4bf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-body { margin: 0; padding: 16px 18px 18px; font: .82rem/1.75 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ht-body code { background: none; padding: 0; border-radius: 0; color: inherit; font: inherit; }
.ht-c { color: #7180a6; }
.ht-p { color: color-mix(in srgb, var(--accent) 65%, #fff); font-weight: 700; user-select: none; }
.ht-cmd { color: #f4f6fb; }
.ht-v { color: #9ee6bd; }
.ht-o { color: #a9b3cc; }
.hero-term figcaption { padding: 10px 16px; font-size: .8rem; color: #9aa4bf; border-top: 1px solid #1d2540; }
.hero-price { position: relative; padding: 26px 22px 20px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); background: var(--bg); box-shadow: var(--shadow-md); }
.hero-price::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; border-radius: calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0; background: var(--accent); }
.hp-k { margin: 0 0 4px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hp-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 16px; }
.hp-from-l { font-weight: 600; color: var(--muted); }
.hp-from strong { font: 800 clamp(2.4rem, 5vw, 3rem)/1 var(--font-head); letter-spacing: -.035em; color: var(--text); }
.hp-unit { font-weight: 700; color: var(--muted); margin-left: -6px; }
.hp-tiers { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.hp-tiers li { margin: 0; }
.hp-tiers a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.hp-tiers a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.hp-pop a { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); box-shadow: inset 3px 0 0 var(--accent); }
.hp-n { font-weight: 700; line-height: 1.3; }
.hp-n small { display: block; font-weight: 500; font-size: .82rem; color: var(--muted); }
.hp-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 800 .66rem/1.6 var(--font-body); font-style: normal; text-transform: uppercase; letter-spacing: .06em; vertical-align: 2px; background: var(--accent); color: var(--accent-ink); }
.hp-p { text-align: right; font: 800 1.15rem/1.2 var(--font-head); white-space: nowrap; }
.hp-p small { display: block; font: 600 .78rem/1.4 var(--font-body); color: var(--muted); }
.hp-btn { width: 100%; }
.hp-note { margin: 10px 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.hp-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.hp-pay .coin-row { gap: 6px; }

/* icon tiles on cards, stats, steps, trust */
.card-ic, .stat-ic, .trust-ic, .step-ic { display: inline-grid; place-items: center; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.card-ic { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 12px; }
.card-ic .ic, .trust-ic .ic { width: 21px; height: 21px; }
.stat-ic { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px; }
.stat-ic .ic { width: 18px; height: 18px; }
.step-list > li.has-ic { padding-left: 60px; }
.step-ic { position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 12px; }
.step-ic .ic { width: 21px; height: 21px; }
.step-list > li.has-ic::before { z-index: 1; left: 28px; top: -7px; width: 22px; height: 22px; font-size: .7rem; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--bg); }

/* cards: depth + whole-card click when the card links somewhere */
.card { position: relative; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link p a { position: relative; z-index: 1; }
.card-link:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-link h3 a:focus-visible { outline: none; }

/* trust row */
.trust-sec { margin: 18px 0 8px; }
.trust { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.trust > li { margin: 0; display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm); }
.trust-ic { width: 40px; height: 40px; border-radius: 11px; }
.trust-t { margin: 1px 0 2px; font-weight: 750; line-height: 1.3; }
.trust-d { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) { .trust.n-3, .trust.n-5, .trust.n-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trust.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-sec.compact .trust { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.trust-sec.compact .trust > li { align-items: center; gap: 9px; padding: 0; border: 0; background: none; box-shadow: none; }
.trust-sec.compact .trust-ic { width: 28px; height: 28px; border-radius: 8px; }
.trust-sec.compact .trust-ic .ic { width: 16px; height: 16px; }
.trust-sec.compact .trust-t { margin: 0; font-size: .93rem; }

/* coins: logos */
.coins li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.coins li > .coin-logo { grid-row: 1 / span 3; width: 34px; height: 34px; }
.coins li > :not(.coin-logo) { grid-column: 2; }
.coin-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.coin-row li { margin: 0; display: inline-flex; align-items: center; gap: 7px; font: 700 .88rem var(--font-mono); }
.coinstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 22px 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cs-label { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cs-note { margin: 0 0 0 auto; font-size: .86rem; color: var(--muted); }
@media (max-width: 640px) { .cs-note { margin-left: 0; flex-basis: 100%; } }

/* band: full-width alternate background without horizontal overflow (shadow + clip-path, no 100vw) */
.band { position: relative; margin: 48px 0; padding: 36px 0 26px; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
.band > :first-child { margin-top: 0; }
.band > :first-child > :first-child { margin-top: 0; }
.band .card, .band .trust > li, .band .plan, .band .stat, .band .coinstrip, .band .coins li, .band .rank, .band .table-wrap, .band .hp-tiers a { background: var(--bg); }

/* pricing cards */
.plans { gap: 16px; }
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.plan { box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.plan:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plan.popular { box-shadow: var(--shadow-md); }
@media (min-width: 900px) { .plan.popular { transform: translateY(-6px); } .plan.popular:hover { transform: translateY(-8px); } }
.plan-price { font-size: 2.15rem; }
.plan-features { border-top: 1px solid var(--border); padding-top: 12px; }
.plan-features li { margin: .35em 0; }

/* tables */
.table-wrap { box-shadow: var(--shadow-sm); }
.tbl th, .tbl td { padding: 12px 14px; }
.tbl :where(tbody tr:nth-child(even)) { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tbl :where(tbody tr):hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tbl tr.hl th:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.facts-table th, .facts-table td { padding: 11px 12px; }

/* faq, stats, related */
.faq-item { padding: 8px 0 12px; }
.faq-item h3 { font-size: 1.1rem; margin: 1em 0 .45em; }
.faq-a p:last-child { margin-bottom: .35em; }
.stat { box-shadow: var(--shadow-sm); }
.related-list li { transition: border-color .15s ease; }
.related-list li:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* footer: brand + support, columns, payments row, legal links */
.ftr { margin-top: 80px; padding-top: 52px; }
.f-logo { display: flex; align-items: center; gap: 10px; }
.f-logo .logo-mark { width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; }
.f-desc { font-size: .9rem; line-height: 1.6; max-width: 48ch; }
.f-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: .9rem; }
.f-contact-h { flex-basis: 100%; font-weight: 800; }
.f-contact a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; opacity: .85; overflow-wrap: anywhere; }
.f-contact a:hover { opacity: 1; text-decoration: underline; }
.f-col li { margin: .45em 0; }
.f-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.f-pay-h { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.f-pay-n { margin: 0 0 0 auto; font-size: .85rem; opacity: .75; }
.f-pay + .f-bottom { margin-top: 18px; }
.f-bottom p { margin: 0; }
.f-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 0; }
.f-legal li { margin: 0; }
.f-legal a, .langs a { color: inherit; text-decoration: none; }
.f-legal a:hover, .langs a:hover { text-decoration: underline; }
.coins-mini li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; }
.coins-mini .coin-logo { width: 18px; height: 18px; }
@media (max-width: 640px) { .f-pay-n { margin-left: 0; flex-basis: 100%; } }

/* sticky buy bar (site.stickyCta), small screens only */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-top: 1px solid var(--border); box-shadow: 0 -10px 26px -18px rgb(0 0 0 / .45); transition: transform .2s ease; }
  .sticky-cta .btn { flex: 1; }
  .sc-note { margin: 0; flex: 0 1 auto; max-width: 46%; font-size: .8rem; line-height: 1.3; color: var(--muted); }
  body.has-sticky { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.sticky-off .sticky-cta { transform: translateY(115%); }
}

/* header on small screens: compact buy button; it gives way to the sticky buy bar on phones */
@media (max-width: 860px) {
  .hdr-in { gap: 12px; }
  .hdr .hdr-cta { white-space: nowrap; padding: 7px 12px; font-size: .86rem; }
  .logo { min-width: 0; }
  .logo-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 420px) {
  .hdr .hdr-cta { display: none; }
}
/* small screens: no horizontal overflow at 375 px */
@media (max-width: 520px) {
  .btn { white-space: normal; text-align: center; }
  .hero-btns .btn { flex: 1 1 100%; }
  .cta { padding: 22px 18px; }
  .cta-btns { width: 100%; }
  .cta-btns .btn { flex: 1 1 100%; }
  .hero-price { padding: 22px 16px 18px; }
  .ht-body { font-size: .76rem; padding: 14px; }
  .tbl th, .tbl td, .facts-table th, .facts-table td { padding: 10px 9px; }
  .tbl thead th { font-size: .78rem; letter-spacing: .02em; }
  .step-list > li { padding-left: 48px; }
  .step-list > li.has-ic { padding-left: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .plan:hover, .card-link:hover, .plan.popular, .plan.popular:hover { transform: none; }
}

/* drawn flags (emoji flags show as letters on Windows) + header login link */
img.flag { display: inline-block; width: 20px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); vertical-align: -2px; margin-right: 8px; }
h1 img.flag-h1 { width: .9em; height: .675em; vertical-align: -.02em; margin-right: .3em; border-radius: 5px; }
.hdr-login { color: var(--text); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.hdr-login:hover { color: var(--accent); }

/* visually hidden (screen readers only) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* pricing = purchase page: included line, tier table, payment reminder (once per page) */
.plan-incl { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }
.plan-incl strong { color: var(--text); }
.tiers { margin-top: 18px; }
.tiers table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tiers th, .tiers td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tiers thead th { background: var(--surface); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tiers tr:last-child th, .tiers tr:last-child td { border-bottom: 0; }
.tiers tr.hl { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tiers caption { caption-side: top; text-align: left; padding: 10px 12px 4px; font-weight: 700; }
.tiers td:last-child a { font-weight: 700; }
.tier-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--accent); color: var(--accent-ink); vertical-align: 1px; }
.pay-terms { margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .92rem; }
.band .pay-terms { background: var(--bg); }
.pt-h { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pay-terms ul { list-style: none; padding: 0; margin: 0; }
.pay-terms li { display: flex; gap: 10px; align-items: flex-start; margin: .35em 0; }
.pay-terms li > svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.cs-solo { margin: 14px 0; font-size: .9rem; color: var(--muted); }

/* paymentSteps */
.pay-table { margin: 10px 0 4px; }
.pay-table table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.pay-table th, .pay-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pay-table thead th { background: var(--surface); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pay-table tbody th { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pay-table tr:last-child th, .pay-table tr:last-child td { border-bottom: 0; }
.pay-help { font-size: .9rem; color: var(--muted); }

/* productShots: real client-area screenshots, each one links to the full-size image */
.shots { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.shots.n-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.shot { margin: 0; }
.shot-link { display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); cursor: zoom-in; }
.shot-link img { display: block; width: 100%; height: auto; }
.shot-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.shot figcaption { margin-top: 8px; font-size: .9rem; color: var(--muted); }
.shot-tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); color: var(--text); }
.shot-dlg { max-width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--text); }
.shot-dlg::backdrop { background: rgb(0 0 0 / .72); }
.shot-dlg img { display: block; max-width: 100%; max-height: calc(94vh - 52px); width: auto; height: auto; margin: 0 auto; }
.shot-dlg p { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 0; padding: 10px 14px; font-size: .9rem; }
.shot-dlg button { font: inherit; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 4px 12px; cursor: pointer; }

/* ranking methodology + dated competitor prices */
.method { margin: 0 0 18px; padding: 14px 18px; border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); font-size: .93rem; }
.method-h { margin: 0 0 4px; font-weight: 800; }
.method p:last-child { margin-bottom: 0; }
.checked { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .86rem; color: var(--muted); }
.checked > svg { width: 16px; height: 16px; flex: none; }

/* "collapsed": true on any block → folded section (details/summary, works without JS) */
.fold { margin: 26px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.fold > summary { cursor: pointer; padding: 14px 18px; font: 700 1.05rem/1.3 var(--font-head); list-style-position: inside; }
.fold > summary:hover { color: var(--accent); }
.fold[open] > summary { border-bottom: 1px solid var(--border); }
.fold > :not(summary) { margin: 0; padding: 4px 18px 10px; }
.fold > :not(summary) > h2:first-child { margin-top: .8em; font-size: 1.25rem; }

/* brand logo drawn outside the engine (engine/assets/logos/<slug>/), height fixed, width from the SVG ratio */
.logo.has-img { gap: 0; }
.logo-img { display: block; height: 34px; width: auto; max-width: min(240px, 54vw); }
.f-logo.has-img .logo-img { height: 30px; max-width: 240px; }

/* API reference (/docs/api/, engine/lib/apidocs.mjs): one section per endpoint */
.endpoint { margin-top: 2.4em; padding-top: .2em; border-top: 1px solid var(--border); }
.endpoint > h2 { margin-top: 1em; }
.ep-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -2px 0 16px; }
.ep-m { font: 800 .82rem/1 var(--font-mono); letter-spacing: .05em; padding: 7px 10px; border-radius: 7px; color: #fff; background: #1d4ed8; }
.ep-get { background: #0f766e; }
.ep-patch, .ep-put { background: #a16207; }
.ep-delete { background: #b91c1c; }
.ep-path { font-size: .95rem; padding: 5px 10px; overflow-wrap: anywhere; }
.ep-auth { display: flex; align-items: flex-start; gap: 8px; font-size: .95rem; color: var(--muted); }
.ep-auth .ic { flex: none; margin-top: .3em; color: var(--accent); }
.ep-h { font-size: 1.02rem; margin: 1.5em 0 .6em; }
.ep-h code { font-size: .85em; }
.ep-tbl { margin: 0 0 1.1em; }
.ep-tbl th:first-child { white-space: nowrap; }
.ep-tbl td { font-size: .95rem; }
.ep-none { color: var(--muted); font-size: .95rem; }
.code-tabs { margin: 0 0 1.4em; }
.code-tabs .ct-bar { display: none; }
.code-tabs.js .ct-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-bar [role="tab"] { min-height: 44px; padding: 0 16px; font: 700 .95rem var(--font-body); color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; cursor: pointer; }
.ct-bar [role="tab"]:hover { color: var(--text); }
.ct-bar [aria-selected="true"] { color: #e6e9f2; background: #0b1020; border-color: #0b1020; }
.code-tabs.js .code { border-top-left-radius: 0; margin-bottom: 0; }
.code-tabs.js .code figcaption { display: none; }
.code-tabs .code[hidden] { display: none; }
@media (max-width: 640px) {
  /* parameter tables as stacked cards: no sideways scrolling on phones */
  .ep-tbl { border: 0; box-shadow: none; overflow: visible; }
  .ep-tbl table, .ep-tbl tbody, .ep-tbl tr, .ep-tbl th, .ep-tbl td { display: block; width: auto; }
  .ep-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ep-tbl tr { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
  .ep-tbl :where(tbody tr:nth-child(even)) { background: var(--bg); }
  .ep-tbl th, .ep-tbl td { padding: 3px 0; border: 0; white-space: normal; }
  .ep-tbl td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--muted); }
}

/* location pages (plan 3.5): buy card after the quick answer, a sticky side column on wide screens */
.buy-rail { margin: 0 0 30px; }
.buy-card { position: relative; padding: 22px 18px 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--bg); box-shadow: var(--shadow-md); }
.buy-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0; background: var(--accent); }
.bc-k { display: flex; align-items: center; margin: 0 0 6px; font-weight: 800; font-size: 1rem; line-height: 1.3; }
.buy-card .hp-from { margin-bottom: 14px; }
.buy-card .hp-from strong { font-size: 2.4rem; }
.buy-card .hp-tiers a { min-height: 48px; }
.bc-trust { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.bc-trust .ic { flex: none; margin-top: .2em; color: var(--yes); }
@media (min-width: 1040px) {
  .t-location .content.has-buy { position: relative; max-width: none; padding-right: 336px; }
  .content.has-buy > .buy-rail { position: absolute; top: 22px; right: 0; bottom: 0; z-index: 2; width: 300px; margin: 0; }
  .content.has-buy .buy-card { position: sticky; top: 86px; }
}

/* ==========================================================================================================
   3.8 — phones (checked at 375 px on home, pricing, location, guide, FAQ and API pages of the 5 sites):
   no sideways scroll, touch targets of at least 44 px, no text under 15 px, one-line top bar, balanced pills.
   `:root` raises the specificity above the site theme.css rules of the same shape (they load after this file).
   ========================================================================================================== */
.table-wrap { position: relative; } /* keeps absolutely positioned children (.vh) inside the scroll box */
main, .ftr { overflow-wrap: break-word; } /* long URLs in plain text wrap instead of widening the page */
.kicker, .badges li { text-wrap: balance; }
.kicker .k-s { white-space: nowrap; }
.topbar .tb-sep { white-space: pre; }
@media (max-width: 760px) {
  /* top bar: one line, the first statement only (the rest is repeated on the page) */
  :root .topbar { padding: 10px 0; font-size: 15px; line-height: 1.35; }
  .topbar .wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .tb-sep, .topbar .tb-s ~ .tb-s { display: none; }

  /* text floor: 15 px */
  :root :is(.crumbs ol, .kicker, .meta, .badges li, .qa-label, .hero-note, .lede small, .toc, .toc-h, .table-note, .checked,
    .tbl table, .facts-table, .tbl thead th, .tiers table, .tiers thead th, .tiers caption, .tier-badge, .pay-table table, .pay-table thead th,
    .plan-qty, .plan-unit, .plan-badge, .plan-features, .plan-incl, .pricing-note, .pay-terms, .pt-h, .pay-help, .cs-label, .cs-note, .cs-solo,
    .hp-k, .hp-note, .hp-pay, .hp-badge, .hp-n small, .hp-p small, .coin-row li, .coins-mini li, .coin-note, .coin-name,
    .trust-t, .trust-d, .card p, .card-tag, .stat-l, .stat-n, .lg, .lg-note, .lg-group, .related-list p, .sources ol, .about-box, .disclosure,
    .rank-meta, .pc, .method, .shot figcaption, .shot-tag, .callout, .step-list, .faq-a, .defs, .code figcaption, .copy,
    .ftr, .f-desc, .f-h, .f-contact, .f-bottom, .f-pay-h, .f-pay-n, .sc-note, .hdr-login, .nav a, .menu, .ep-m, .ep-auth, .bc-trust) {
    font-size: 15px;
  }
  :root code { font-size: max(15px, .88em); }
  :root :is(.table-wrap, .facts-table) :is(th, td, caption) { font-size: 15px; }
  :root body :is(.plan .btn, .btn-sm, .hdr-cta, .sticky-cta .btn) { font-size: 15px; }
  :root .code code, :root .ht-body { font-size: 15px; }
  :root .kicker, :root .qa-label, :root .cs-label, :root .hp-k, :root .pt-h, :root .f-pay-h, :root .plan-badge, :root .hp-badge, :root .tier-badge { letter-spacing: .04em; }
  .sc-note { line-height: 1.25; }
  :root .kicker { border-radius: 12px; line-height: 1.45; }

  /* touch targets: 44 px */
  :root .btn { min-height: 46px; }
  .menu { min-height: 44px; }
  .logo, .hdr-login { display: inline-flex; align-items: center; min-height: 44px; }
  .hdr-login { padding: 0 4px; }
  .crumbs ol { margin-top: 12px; row-gap: 0; }
  .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .toc li { margin: 0; }
  .toc a { display: block; padding: 10px 0; }
  .f-col li, .f-legal li, .langs li, .lg li, .related-list li { margin: 0; }
  .f-col a, .f-legal a, .langs a, .f-contact a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .lg a { display: flex; align-items: center; min-height: 44px; }
  .sources li { margin: 0; }
  .sources a { display: inline-block; min-width: 44px; padding: 11px 0; }
  .related-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  :root .trust-sec.compact .trust-t { font-size: 15px; }
  .tbl td > a:only-child, .tiers td > a:only-child, .facts-table td > a:only-child { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .fold > summary { min-height: 44px; display: flex; align-items: center; }
  /* copy button: a 44 px tab in the corner of the code box, in the caption bar when there is one */
  .code figcaption { display: flex; align-items: center; min-height: 44px; padding-right: 84px; }
  .code > pre:first-child, .code-tabs.js .code pre { padding-top: 52px; }
  .copy { top: 0; right: 0; min-width: 72px; min-height: 44px; padding: 0 12px; border-radius: 0 0 0 10px; }
  .ht-body { padding: 14px; }
}
.bc-k { font-size: 1.15rem; margin-bottom: 0; }
.bc-p { margin: 0 0 10px; font-size: .95rem; color: var(--muted); }

/* tables on phones, 480 px and less (proxy sites: engine/lib/layout.mjs phoneTables marks the tables).
   .tw-stack (3–4 columns, pricing tier table): one card per row, the first cell as its title, the other cells led by their
   column header (data-label; the generated label is left out of the accessibility tree where "/ ''" is supported, the
   ARIA roles keep the table semantics and the visually hidden <thead> keeps the headers).
   .tw-scroll (5 columns or more): the sideways scroll stays, with a hint line above the table (.tw-hint, arrows icon) and a
   shade on the right edge that fades out once the last column is reached (scroll-driven animation where supported; the
   last column gets room so the shade never covers its text elsewhere). */
.tw-hint { display: none; }
@media (max-width: 480px) {
  :root .table-wrap.tw-stack { overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .tw-stack table, .tw-stack tbody, .tw-stack tr, .tw-stack th, .tw-stack td, .tw-stack caption { display: block; width: auto; }
  .tw-stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  :root .tw-stack caption { padding: 0 0 8px; text-align: left; }
  :root .tw-stack tbody tr { margin: 0 0 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
  :root .tw-stack tbody tr:not(.hl) { background: var(--bg); }
  :root .tw-stack tbody tr.hl { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  :root .tw-stack tbody :is(th, td) { padding: 3px 0; border: 0; white-space: normal; text-align: left; }
  :root .tw-stack tbody tr > :first-child { padding: 0 0 6px; box-shadow: none; font-weight: 700; color: var(--text); }
  .tw-stack [data-label]::before { content: attr(data-label) ": "; content: attr(data-label) ": " / ""; font-weight: 600; color: var(--muted); }
  :root .tw-stack td.tw-act { padding-top: 6px; }
  /* short values (.tw-pairs): two or three label-over-value pairs per line, the link of a hidden-header column (Buy) on
     the title line */
  :root .tw-pairs tbody tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr)); gap: 6px 10px; align-items: start; }
  :root .tw-pairs tbody tr > :first-child { grid-column: 1 / -1; padding-bottom: 2px; }
  :root .tw-pairs tbody :is(th, td) { padding: 0; overflow-wrap: normal; hyphens: auto; }
  .tw-pairs [data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-weight: 500; }
  :root .tw-pairs td.tw-act { padding: 0; }
  :root .tw-pairs tbody tr:has(> .tw-act) > :first-child { grid-column: 1 / -2; grid-row: 1; align-self: center; }
  :root .tw-pairs tbody tr > .tw-act { grid-column: -2 / -1; grid-row: 1; justify-self: end; align-self: center; }
  /* inside a numbered step (payment confirmations): the cards take the full width, under the step's icon column */
  .step-list > li > .tw-stack { margin-left: -48px; }
  .step-list > li.has-ic > .tw-stack { margin-left: -56px; }

  .tw-hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 6px; color: var(--muted); font-size: 15px; line-height: 1.3; }
  .tw-hint .ic { width: 18px; height: 18px; }
  :root .table-wrap.tw-scroll { display: grid; }
  .tw-scroll > table { grid-area: 1 / 1; min-width: 100%; }
  .tw-scroll::after { content: ""; grid-area: 1 / 1; justify-self: end; position: sticky; right: 0; width: 18px; pointer-events: none; box-shadow: inset -12px 0 10px -10px color-mix(in srgb, var(--text) 38%, transparent); }
  :root .tw-scroll :is(th, td):last-child { padding-right: 24px; }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 480px) {
    .tw-scroll::after { opacity: 0; animation: tw-edge linear both; animation-timeline: scroll(nearest inline); }
  }
}
@keyframes tw-edge { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* sources: collapsed; competitor references are plain text */
.sources details { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 26px; }
.sources summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: .92rem; }
.sources ol { margin-top: 10px; }
.src-u { color: var(--muted); font-size: .85em; }
.ext-ref { text-decoration: underline dotted color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px; }
/* language menu (header): <details>, opens without JS; site.js closes it on outside click / Escape (CONTENT-GUIDE § 8) */
.lang-menu { position: relative; flex: none; }
.lang-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 9px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .9rem; letter-spacing: .02em; white-space: nowrap; user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ''; }
.lang-menu > summary .ic { width: 18px; height: 18px; }
.lang-menu > summary:hover, .lang-menu[open] > summary { color: var(--text); background: var(--surface); }
.lang-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; list-style: none; margin: 0; padding: 6px; min-width: 190px; max-height: min(70vh, 460px); overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px -18px rgb(15 23 42 / .45); }
.lm-list li { margin: 0; }
.lm-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .95rem; }
.lm-list a:hover, .lm-list a:focus-visible { background: var(--surface); }
.lm-list a[aria-current] { font-weight: 700; color: var(--accent); }
.lm-list a[aria-current]::after { content: '✓'; }
.langs a[aria-current] { font-weight: 700; color: var(--text); }
@media (max-width: 860px) { .lang-menu { margin-left: -4px; } }
@media (max-width: 760px) {
  .lang-menu > summary { min-height: 44px; min-width: 44px; justify-content: center; font-size: 15px; }
  .lm-list { position: fixed; left: 16px; right: 16px; top: auto; margin-top: 6px; min-width: 0; }
  .lm-list a { min-height: 44px; font-size: 15px; }
}
/* phones: globe only, tighter header; a drawn logo scales down instead of running under the buttons (long translated labels) */
@media (max-width: 520px) {
  .lang-menu .lm-code { display: none; }
  .hdr-in { gap: 8px; }
  .hdr .logo.has-img { flex: 0 1 auto; min-width: 64px; }
  .hdr .logo-img { height: auto; max-height: 34px; max-width: 100%; }
}

/* ---------------------------------------------------------------- domain-name sites (engine/lib/tlds.mjs) */
/* tldPricing: price table of the extensions. Category chips = radio buttons: the filter works without JavaScript (:has);
   site.js adds sortable headers and a text filter. */
.tldp-f { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.tldp-f legend { float: left; margin: 0 6px 0 0; padding: 6px 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
.tldp-f label { position: relative; cursor: pointer; }
.tldp-f input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tldp-f span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: .88rem; font-weight: 600; }
.tldp-f input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tldp-f input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tldp:has(input[value="generic"]:checked) tbody tr:not([data-g~="generic"]),
.tldp:has(input[value="tech"]:checked) tbody tr:not([data-g~="tech"]),
.tldp:has(input[value="business"]:checked) tbody tr:not([data-g~="business"]),
.tldp:has(input[value="country"]:checked) tbody tr:not([data-g~="country"]),
.tldp:has(input[value="lifestyle"]:checked) tbody tr:not([data-g~="lifestyle"]),
.tldp:has(input[value="open"]:checked) tbody tr:not([data-g~="open"]),
.tldp:has(input[value="private"]:checked) tbody tr:not([data-g~="private"]),
.tldp tbody tr.tldp-hide { display: none; }
.tldp td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tldp td.tldp-r { white-space: normal; font-size: .9rem; color: var(--muted); min-width: 9rem; }
.tldp td.tldp-r.warn { color: var(--text); }
.tldp tbody th a { text-decoration: none; font-weight: 800; }
.tldp th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tldp th button::after { content: '↕'; opacity: .45; font-size: .9em; }
.tldp th[aria-sort="ascending"] button::after { content: '↑'; opacity: 1; }
.tldp th[aria-sort="descending"] button::after { content: '↓'; opacity: 1; }
.tldp th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tldp-q { display: block; width: 100%; max-width: 320px; margin: 0 0 12px; padding: 9px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); }
/* domainSearch: GET form to the client area + popular extensions */
.dsearch { margin: 26px 0; }
.ds-form { display: flex; gap: 10px; max-width: 680px; }
.ds-form input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 13px 16px; font: inherit; font-size: 1.05rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: calc(var(--radius) - 4px); }
.ds-form input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.ds-form .btn svg { width: 18px; height: 18px; }
.ds-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ds-pop-h { margin: 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
.ds-pop ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ds-pop li { margin: 0; }
.ds-pop a, .ds-pop li > span { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .9rem; }
.ds-pop a:hover { border-color: var(--accent); }
.ds-pop strong + span { color: var(--muted); font-variant-numeric: tabular-nums; }
.ds-note { font-size: .88rem; color: var(--muted); margin-top: 10px; }
@media (max-width: 560px) {
  .ds-form { flex-direction: column; }
  .ds-form .btn { width: 100%; }
}

/* ---------------------------------------------------------------- eSIM sites
   Added after site.css by engine/build.mjs for the sites with site.json "kind": "esim" only (the other sites keep
   site.css unchanged). Plan table .esp (block esimPlans), destination finder .esf (esimFinder), region grid .esr
   (esimRegions). See engine/lib/esim.mjs and docs/CONTENT-GUIDE.md § 10. */

/* Plan table: the data / validity chips filter the rows WITHOUT JavaScript (radio buttons + :has), like the .tldp chips.
   Buckets (engine/lib/esim.mjs): data s ≤ 3 GB, m ≤ 10 GB, l > 10 GB, u unlimited; validity a ≤ 7 d, b ≤ 15 d, c ≤ 30 d, d > 30 d. */
.esp-f { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 14px; }
.esp-fs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.esp-fs legend { float: left; margin: 0 4px 0 0; padding: 6px 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
.esp-fs label { position: relative; cursor: pointer; }
.esp-fs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.esp-fs span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.esp-fs input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.esp-fs input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.esp:has(.esp-fd input[value="s"]:checked) tbody tr:not([data-d="s"]),
.esp:has(.esp-fd input[value="m"]:checked) tbody tr:not([data-d="m"]),
.esp:has(.esp-fd input[value="l"]:checked) tbody tr:not([data-d="l"]),
.esp:has(.esp-fd input[value="u"]:checked) tbody tr:not([data-d="u"]),
.esp:has(.esp-ft input[value="a"]:checked) tbody tr:not([data-t="a"]),
.esp:has(.esp-ft input[value="b"]:checked) tbody tr:not([data-t="b"]),
.esp:has(.esp-ft input[value="c"]:checked) tbody tr:not([data-t="c"]),
.esp:has(.esp-ft input[value="d"]:checked) tbody tr:not([data-t="d"]) { display: none; }
/* no plan for this amount + validity: message instead of an empty table */
.esp-none { display: none; margin: 10px 0 0; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); font-size: .92rem; }
.esp:has(.esp-fd input[value="s"]:checked):has(.esp-ft input[value="a"]:checked):not(:has(tbody tr[data-d="s"][data-t="a"])) .esp-none,
.esp:has(.esp-fd input[value="s"]:checked):has(.esp-ft input[value="b"]:checked):not(:has(tbody tr[data-d="s"][data-t="b"])) .esp-none,
.esp:has(.esp-fd input[value="s"]:checked):has(.esp-ft input[value="c"]:checked):not(:has(tbody tr[data-d="s"][data-t="c"])) .esp-none,
.esp:has(.esp-fd input[value="s"]:checked):has(.esp-ft input[value="d"]:checked):not(:has(tbody tr[data-d="s"][data-t="d"])) .esp-none,
.esp:has(.esp-fd input[value="m"]:checked):has(.esp-ft input[value="a"]:checked):not(:has(tbody tr[data-d="m"][data-t="a"])) .esp-none,
.esp:has(.esp-fd input[value="m"]:checked):has(.esp-ft input[value="b"]:checked):not(:has(tbody tr[data-d="m"][data-t="b"])) .esp-none,
.esp:has(.esp-fd input[value="m"]:checked):has(.esp-ft input[value="c"]:checked):not(:has(tbody tr[data-d="m"][data-t="c"])) .esp-none,
.esp:has(.esp-fd input[value="m"]:checked):has(.esp-ft input[value="d"]:checked):not(:has(tbody tr[data-d="m"][data-t="d"])) .esp-none,
.esp:has(.esp-fd input[value="l"]:checked):has(.esp-ft input[value="a"]:checked):not(:has(tbody tr[data-d="l"][data-t="a"])) .esp-none,
.esp:has(.esp-fd input[value="l"]:checked):has(.esp-ft input[value="b"]:checked):not(:has(tbody tr[data-d="l"][data-t="b"])) .esp-none,
.esp:has(.esp-fd input[value="l"]:checked):has(.esp-ft input[value="c"]:checked):not(:has(tbody tr[data-d="l"][data-t="c"])) .esp-none,
.esp:has(.esp-fd input[value="l"]:checked):has(.esp-ft input[value="d"]:checked):not(:has(tbody tr[data-d="l"][data-t="d"])) .esp-none,
.esp:has(.esp-fd input[value="u"]:checked):has(.esp-ft input[value="a"]:checked):not(:has(tbody tr[data-d="u"][data-t="a"])) .esp-none,
.esp:has(.esp-fd input[value="u"]:checked):has(.esp-ft input[value="b"]:checked):not(:has(tbody tr[data-d="u"][data-t="b"])) .esp-none,
.esp:has(.esp-fd input[value="u"]:checked):has(.esp-ft input[value="c"]:checked):not(:has(tbody tr[data-d="u"][data-t="c"])) .esp-none,
.esp:has(.esp-fd input[value="u"]:checked):has(.esp-ft input[value="d"]:checked):not(:has(tbody tr[data-d="u"][data-t="d"])) .esp-none { display: block; }
.esp th, .esp td { vertical-align: middle; }
.esp td { font-variant-numeric: tabular-nums; }
.esp .esp-d, .esp .esp-p, .esp .esp-g { white-space: nowrap; }
.esp .esp-p strong { font-size: 1.05rem; }
.esp-sub { display: block; margin-top: 2px; font-size: .8rem; font-weight: 500; color: var(--muted); white-space: normal; }
.esp-reg a { color: inherit; }
.esp-muted { color: var(--muted); font-size: .88rem; }
.esp-tag { display: inline-block; margin: 0 4px 3px 0; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.esp-tag.g5 { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); }
.esp td.esp-b { text-align: right; white-space: nowrap; }
.esp tbody th a { font-weight: 800; text-decoration: none; }
.esp th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.esp th button::after { content: '↕'; opacity: .45; font-size: .9em; }
.esp th[aria-sort="ascending"] button::after { content: '↑'; opacity: 1; }
.esp th[aria-sort="descending"] button::after { content: '↓'; opacity: 1; }
.esp th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Phones: one card per plan (data + validity | price + price per GB, then the network line and a full-width Buy button);
   with JS the sortable headers become a row of chips above the cards */
@media (max-width: 640px) {
  .esp .table-wrap { overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  .esp table, .esp tbody { display: block; }
  .esp caption { display: block; padding: 0 2px 8px; }
  .esp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .esp.js thead { position: static; display: block; width: auto; height: auto; overflow: visible; clip: auto; }
  .esp.js thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; background: none; }
  .esp.js thead th { display: block; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: .75rem; }
  .esp.js thead th:not([data-sort]) { display: none; }
  .esp tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm); }
  .esp tbody tr.hl { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
  .esp tbody th, .esp tbody td { display: block; padding: 0; border: 0; text-align: left; box-shadow: none; }
  .esp tr.hl th:first-child { box-shadow: none; }
  .esp .esp-d { grid-column: 1; grid-row: 1; font-size: 1.05rem; white-space: normal; }
  .esp .esp-t { grid-column: 1; grid-row: 2; color: var(--muted); font-size: .92rem; }
  .esp .esp-p { grid-column: 2; grid-row: 1; text-align: right; }
  .esp .esp-g { grid-column: 2; grid-row: 2; text-align: right; font-size: .85rem; color: var(--muted); }
  .esp .esp-n { grid-column: 1 / -1; margin-top: 6px; }
  .esp td.esp-b { grid-column: 1 / -1; margin-top: 8px; text-align: left; }
  .esp td.esp-b .btn { width: 100%; }
  .esp-mix tbody th[scope="row"] { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
  .esp-mix .esp-d, .esp-mix .esp-p { grid-row: 2; }
  .esp-mix .esp-t, .esp-mix .esp-g { grid-row: 3; }
  .esp .tier-badge { margin-left: 4px; }
}

/* Destination finder: the search box is shown by esim.js; without JS the full list stays visible */
.esf { margin: 26px 0; }
.esf-q { max-width: 560px; margin: 0 0 14px; }
.esf-q[hidden] { display: none; }
.esf-q label { display: block; margin: 0 0 6px; font-weight: 700; }
.esf-q input { box-sizing: border-box; width: 100%; padding: 13px 16px; font: inherit; font-size: 1.05rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: calc(var(--radius) - 4px); }
.esf-q input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.esf-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.esf-pop-h { margin: 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
.esf-pop ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.esf-pop li { margin: 0; }
.esf-pop a { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .9rem; }
.esf-pop a:hover { border-color: var(--accent); }
.esf-pop img.flag { margin-right: 6px; }
.esf-pop a span { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
.esf-typing .esf-pop { display: none; }
.esf-h { margin: 14px 0 6px; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.esf-h[hidden], .esf-list[hidden], .esf-none[hidden] { display: none; }
.esf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 6px; max-height: 26rem; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.esf-list.esf-rl { max-height: none; }
.esf-list li { margin: 0; }
.esf-list li.esf-hide { display: none; }
.esf-list a, .esf-x { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: calc(var(--radius) - 6px); color: var(--text); text-decoration: none; }
.esf-list a:hover, .esf-list a:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.esf-list img.flag { flex: none; margin: 0; }
.esf-n { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.esf-n small { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); }
.esf-p { flex: none; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.esf-none { margin: 10px 0 0; color: var(--muted); }
.esf-note { margin-top: 10px; font-size: .88rem; color: var(--muted); }
@media (max-width: 520px) { .esf-list { grid-template-columns: minmax(0, 1fr); max-height: 22rem; } }

/* Regional and global eSIMs */
.esr { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.esr li { margin: 0; }
.esr a, .esr li > div { box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .12s ease; }
.esr a:hover { border-color: var(--accent); transform: translateY(-2px); }
.esr-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.esr-flags img.flag { margin: 0; }
.esr-n { font-size: 1.08rem; font-weight: 800; }
.esr-c { font-size: .88rem; color: var(--muted); }
.esr-p { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.band .esr a, .band .esr li > div, .band .esf-list { background: var(--bg); }
@media (max-width: 520px) {
  .esr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .esr a, .esr li > div { padding: 12px; }
  .esr-flags img.flag:nth-child(n + 5) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .esr a { transition: none; } .esr a:hover { transform: none; } }

/* =====================================================================================================================
   eSIMwithCrypto — design system. Appended after engine/assets/site.css + esim.css (same file), so it overrides them.
   Identity: energetic and crisp. Electric cobalt (--accent #2a45f5) for actions, prices and links only; deep ink navy
   (--ink #0b1020) for headings, counters and the single dark band of a page (the final call to action); cool tinted
   surfaces; one small "signal" colour (volt lime, --signal) used on the dark ink only, never as text on white.
   Inter (theme font "grotesk") for headings and body: heavy weights and tight tracking on headings, tabular figures on
   prices. Brand logo: engine/assets/logos/esimwithcrypto/ (the letter e drawn as a SIM card, cut corner top right, its
   counter a small SIM card, + the name in Inter with "with" in a lighter weight; text converted to paths), printed by
   the engine as <img class="logo-img">. The CSS SIM card (.logo-mark) is only the fallback when those files are missing.

   Rules this file follows
   - No decorative gradient, no coloured glow, no uppercase label (sentence case + weight/size contrast), no emoji.
   - 8 px spacing grid (--s-*), one type scale (--fs-*), three radii (--r-sm/md/lg), two shadows (--shadow-sm/md).
   - DOM order is never changed (GEO: the quick answer stays the first block): the home hero is rebuilt with CSS order.
   - Never hide indexable text: the only display:none here target text-free decorative parts and JS-only controls;
     the duplicate label of the hero search field is visually hidden (still read by screen readers), not removed.
   - One 3 px focus ring everywhere (cobalt; white on the dark band). Every sticky layer reserves its room
     (scroll-padding). prefers-reduced-motion and forced-colors are handled at the end.
   Colour tokens printed inline by the engine (--accent, --surface, --border, --radius, --muted…) live in site.json "theme".

   Contents: 1 tokens · 2 base · 3 top bar + header · 4 buttons · 5 page head · 6 home · 7 destination finder
   · 8 plan table · 9 region grid · 10 panels · 11 tables · 12 steps · 13 cards, trust, stats, ranking, link grid, coins
   · 14 FAQ, folds, sources, definitions · 15 call to action · 16 related · 17 footer · 18 long-form layouts · 19 band,
   sticky bar · 20 phones · 21 motion, forced colours
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- 1. tokens */
:root {
  /* colour (site.json theme: accent #2a45f5, accent2 #1a2fc4, surface #f4f6fe, surface2 #e9edfd, border #e1e5f2) */
  --ink: #0b1020;                 /* headings, counters, the dark band */
  --ink-2: #262d42;               /* body copy (14:1 on white) */
  --accent-hover: #1a2fc4;        /* links and buttons on hover (9.3:1 on white) */
  --accent-soft: #edf0ff;         /* highlighted rows: best price per GB, our own row */
  --accent-line: #c5cdfb;         /* border of the highlighted cards and pills */
  --signal: #c6f135;              /* volt lime: small highlights on the dark ink only (14.5:1 there) */
  --line: var(--border);          /* hairline */
  --line-strong: #c6cce0;         /* ghost buttons, chips, decorative rules */
  --field: #79839d;               /* text-entry borders: 3.7:1 on white, 3.4:1 on the tint (WCAG 1.4.11) */
  --placeholder: #5d6683;         /* 5.6:1 on white */
  --row-hover: #f7f8fe;
  --on-dark: rgb(255 255 255 / .8);

  /* type scale 12 / 13 / 14 / 15 / 16 / 17 / 18 / 20 / 24 / 32 / 40 / 48 / 64 */
  --fs-12: .75rem; --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem; --fs-17: 1.0625rem;
  --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem; --fs-64: 4rem;
  --lh-tight: 1.04; --lh-head: 1.18; --lh-snug: 1.4; --lh-body: 1.65;

  /* spacing: 8 px grid */
  --s-half: 4px; --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-7: 56px;
  --s-8: 64px; --s-10: 80px; --s-12: 96px;
  --section: var(--s-12);         /* rhythm between home sections (64 px on phones) */
  --measure: 760px;               /* reading column: about 72 characters of Inter at 17 px */

  /* radii: controls and chips / cards, buttons, tables / large panels and the hero search */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;

  /* two shadows (engine names reused, so every engine component gets them) */
  --shadow-sm: 0 1px 2px rgb(11 16 32 / .06);
  --shadow-md: 0 1px 2px rgb(11 16 32 / .05), 0 18px 40px -24px rgb(11 16 32 / .32);

  /* controls: three heights */
  --h-sm: 36px; --h-md: 44px; --h-lg: 52px;
  --focus: var(--accent);
  --hdr-h: 65px;                  /* sticky header height (64 px + hairline) */

  /* drawn icons (CSS masks coloured with a background, or a fixed-colour background image) */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 1 1.5 6h7zM5 15l3.5-5h-7z'/%3E%3C/svg%3E");
  --i-sort-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 3 1.5 9h7z'/%3E%3C/svg%3E");
  --i-sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 13l3.5-6h-7z'/%3E%3C/svg%3E");
  --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576080' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------------------------------- 2. base */
/* focus and anchors land below the sticky header */
html { scroll-padding-top: calc(var(--hdr-h) + 16px); }
:root :is(h2, h3), .content h2 { scroll-margin-top: var(--s-1); } /* adds to scroll-padding: 65 + 16 + 8 px */
body { color: var(--ink-2); font-size: var(--fs-17); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #d6ddff; color: var(--ink); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.012em; line-height: var(--lh-head); }
h1 { font-size: clamp(2.125rem, 1.45rem + 2.2vw, 3.125rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); font-weight: 750; letter-spacing: -0.026em; margin: 2.2em 0 .55em; }
h2::before { content: none; }
h3 { font-size: var(--fs-20); letter-spacing: -0.014em; line-height: 1.3; margin: 1.6em 0 .45em; }
h4 { font-size: var(--fs-17); line-height: 1.35; }
p, li, .facts-table :is(th, td) { text-wrap: pretty; }
@media (min-width: 761px) { .facts-table th { text-wrap: balance; } }
.qa-q, .sources summary { text-wrap: balance; }
strong, b { color: var(--ink); font-weight: 650; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: color .15s ease, text-decoration-color .15s ease; }
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; text-decoration-thickness: 1px; }

/* focus: one visible ring everywhere (3 px cobalt, offset); white on the dark band and the top bar */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.topbar :focus-visible, .cta :focus-visible, .cta .btn:focus-visible { outline-color: #fff; }

/* lists inside prose: quiet markers (cobalt stays on actions and prices), even rhythm; component lists keep their own */
.content :is(ul, ol):not([class]) > li::marker { color: var(--muted); }
.content ol:not([class]) > li::marker { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.content :is(ul, ol):not([class]) > li { margin: .4em 0; }
.content :is(ul, ol):not([class]) > li > p { margin: 0 0 .35em; }
.content :is(ul, ol):not([class]) > li > p:last-child { margin-bottom: 0; }
.content ul:not([class]):has(+ ul:not([class])) { margin-bottom: 0; }
code { background: var(--surface-2); color: var(--ink); border-radius: var(--r-sm); }
blockquote { border-left: 3px solid var(--line-strong); color: var(--ink-2); }
hr { height: 1px; margin: var(--s-6) 0; border: 0; background: var(--line); }

/* no uppercase label anywhere (sentence case; :root beats the engine's phone letter-spacing rule) */
:root :is(.kicker, .qa-label, .cs-label, .hp-k, .hp-pay, .hp-badge, .pt-h, .f-pay-h, .lg-group, .card-tag, .plan-badge, .tier-badge, .shot-tag,
  .esf-h, .tbl thead th, .tiers thead th, .pay-table thead th) { text-transform: none; letter-spacing: 0; }

/* -------------------------------------------------------------------------------------------- 3. top bar + header */
.topbar { background: var(--ink); color: var(--on-dark); font-size: var(--fs-13); letter-spacing: 0; padding: 8px 0; }
.topbar strong { color: var(--signal); filter: none; font-weight: 650; }
.topbar a { color: #fff; }

.hdr { background: rgb(255 255 255 / .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); box-shadow: none; }
.hdr-in { min-height: 64px; gap: var(--s-3); }
.logo { gap: 10px; color: var(--ink); font: 800 1.1875rem/1 var(--font-head); letter-spacing: -0.03em; }
.logo:hover { color: var(--ink); }
/* the drawn logo (engine/assets/logos/esimwithcrypto/logo.svg, 34 px high, 30 px in the footer): no hover effect; the
   focus ring follows the logo's rounded box instead of touching the letters */
.logo.has-img { border-radius: var(--r-sm); }
.logo.has-img:focus-visible { outline-offset: 5px; }
/* fallback when the logo files are missing: a SIM card drawn in CSS (rounded rectangle, top-right corner cut) */
.logo-mark { position: relative; display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 26px; height: 32px; padding-top: 4px; border-radius: 5px; background: var(--accent); color: #fff; box-shadow: none; font: 800 16px/1 var(--font-head); letter-spacing: 0; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.logo:hover .logo-mark { background: var(--accent-hover); }
.nav { gap: 2px; margin-left: var(--s-1); }
.nav a { padding: 8px 12px; border-radius: var(--r-sm); color: #3a4360; font-size: var(--fs-15); font-weight: 550; text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.nav a:hover { color: var(--ink); background: var(--surface); }
.nav a[aria-current] { color: var(--ink); background: none; font-weight: 650; text-decoration: underline 2px var(--accent); text-underline-offset: 10px; }
.hdr-login { padding: 8px 4px; color: var(--ink); font-size: var(--fs-15); font-weight: 600; }
.hdr-login:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.hdr .hdr-cta { min-height: var(--h-md); padding: 0 18px; font-size: var(--fs-15); }
.menu { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: #fff; color: var(--ink); font-weight: 600; font-size: var(--fs-15); cursor: pointer; }
.menu:hover { border-color: var(--ink); }
/* 861-1119 px: logo + 6 links + Log in + the button need about 1,100 px of the wrap's content box, so the links go
   behind Menu there too (the engine folds them at 860 px); the button stays */
@media (min-width: 861px) and (max-width: 1119px) {
  .menu { display: inline-block; margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
}
@media (max-width: 1119px) {
  /* full-bleed panel, link text on the 16 px page edge; the current page keeps a non-colour cue (bar + weight) */
  .nav { top: 64px; margin-left: 0; padding: 4px 16px 16px; box-shadow: var(--shadow-md); }
  .nav a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line); text-decoration: none; }
  .nav a:hover { background: none; color: var(--accent); text-decoration: none; }
  .nav a[aria-current] { padding-left: 12px; background: none; color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: inset 3px 0 0 var(--accent); }
}
/* WCAG 1.4.12 (user text spacing): the button drops to a second row instead of pushing the page sideways */
@media (min-width: 1120px) { .hdr-in { flex-wrap: wrap; row-gap: 8px; } .hdr-in > .hdr-cta { margin-left: auto; } }
@media (max-width: 860px) { .logo-txt { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; } }

/* ---------------------------------------------------------------------------------------------------- 4. buttons */
/* three sizes (sm 36 / md 44 / lg 52), one radius, solid cobalt primary that turns ink on hover, white ghost */
.btn { min-height: var(--h-md); padding: 0 20px; gap: 8px; border: 1px solid transparent; border-radius: var(--r-md); font: 650 var(--fs-16)/1.2 var(--font-body); letter-spacing: -0.005em; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
button.btn { font-family: var(--font-body); }
.btn:hover, .btn:active { transform: none; filter: none; }
.btn-sm { min-height: var(--h-sm); padding: 0 14px; font-size: var(--fs-15); }
.btn-lg { min-height: var(--h-lg); padding: 0 26px; font-size: var(--fs-17); }
.btn-primary, .hdr-cta { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.btn-primary:hover, .hdr-cta:hover { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; filter: none; }
.btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn .ic { width: 18px; height: 18px; }

/* -------------------------------------------------------------------------------------------------- 5. page head */
.crumbs ol { margin-top: var(--s-3); align-items: center; font-size: var(--fs-14); color: var(--muted); }
.crumbs li + li::before { color: var(--line-strong); opacity: 1; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--ink-2); }
.page-head { padding: var(--s-4) 0 var(--s-1); max-width: 860px; }
.page-head h1 { margin-bottom: var(--s-2); }
/* inner pages: breadcrumbs + title sit on one full-bleed tinted header band (shadow + clip-path, no 100vw), the
   content starts on white; the quick answer is the first white card */
body:not(.t-home) main.wrap > :is(.crumbs, .page-head) { position: relative; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
body:not(.t-home) main.wrap > .crumbs { padding-top: var(--s-3); }
body:not(.t-home) main.wrap > .crumbs > ol { margin-top: 0; }
body:not(.t-home) main.wrap > .page-head { padding: var(--s-4) 0 var(--s-6); }
body:not(.t-home) main.wrap > .page-head > :last-child { margin-bottom: 0; }
body:not(.t-home) main.wrap > .page-head + :is(.toc, .content) { margin-top: var(--s-5); }
body:not(.t-home) .content > .quick-answer:first-child { margin-top: var(--s-5); }
:root .kicker { display: block; margin: 0 0 var(--s-2); padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent); font: 650 var(--fs-15)/1.4 var(--font-body); }
.lede { max-width: 64ch; color: #3d4661; font-size: 1.1875rem; line-height: 1.55; }
.lede p:last-child { margin-bottom: 0; }
.meta { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
/* country pages: the drawn flag before the H1, with a hairline ring (white flags stay visible) */
h1 img.flag-h1 { width: .8em; height: .6em; margin-right: .32em; vertical-align: .02em; border-radius: 4px; box-shadow: 0 0 0 1px rgb(11 16 32 / .14); }
img.flag { border-radius: 3px; box-shadow: 0 0 0 1px rgb(11 16 32 / .12); }
/* hero proof points (any page with hero badges): inline checks, never pills */
.badges { gap: 8px 28px; margin: var(--s-3) 0 0; }
.badges li { position: relative; margin: 0; padding: 0 0 0 24px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: var(--fs-15); font-weight: 500; }
.badges li::before { content: ""; position: absolute; left: 0; top: .22em; width: 16px; height: 16px; background: var(--accent); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.badges li strong { color: var(--ink); font-weight: 650; }
.hero-note { color: var(--muted); }
.hero-note .ic { color: var(--muted); }
.hero-btns { gap: 12px; margin: var(--s-3) 0 var(--s-2); }

/* ------------------------------------------------------------------------------------------------------- 6. home */
/* DOM order is untouched (the quick answer stays the first block for GEO). The hero is rebuilt visually: .content
   becomes transparent to layout, so the page head (H1, lede, proof points) and the destination finder (the first
   .esf of the page) form ONE centred band, the finder right under the proof points; the quick answer follows. */
.t-home main.wrap { display: flex; flex-direction: column; }
.t-home main.wrap > .content { display: contents; }
.t-home main.wrap > .page-head { order: -2; }
.t-home .content > .esf:not(.esf ~ .esf) { order: -1; }
.t-home :is(main.wrap > .page-head, .content > .esf:not(.esf ~ .esf)) { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
.t-home main.wrap > .page-head { width: 100%; max-width: none; margin: 0; padding: var(--s-10) 0 0; text-align: center; }
.t-home .page-head .kicker { margin-bottom: var(--s-2); }
.t-home .page-head h1 { max-width: 13.5em; margin: 0 auto; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4rem); font-weight: 800; letter-spacing: -0.042em; line-height: var(--lh-tight); text-wrap: balance; }
.t-home .page-head .lede { max-width: 720px; margin: var(--s-3) auto 0; color: #3d4661; font-size: var(--fs-18); text-wrap: balance; }
.t-home .page-head .lede p { text-wrap: balance; }
.t-home .page-head .lede strong { color: var(--ink); font-weight: 700; }
.t-home .page-head .badges { justify-content: center; margin: var(--s-3) 0 0; }
.t-home .page-head .hero-btns { justify-content: center; }
.t-home .page-head .hero-note { justify-content: center; }
.t-home .content > .esf:not(.esf ~ .esf) { position: relative; z-index: 1; width: 100%; margin: 0; padding: var(--s-6) 0 var(--s-8); }
.t-home main.wrap:not(:has(> .content > .esf)) > .page-head { padding-bottom: var(--s-8); } /* no finder: the band closes itself */
/* With subgrid, the page head's box also wraps the finder (its children sit on the parent's rows 1-6, the finder on
   row 7, over the page head's own tint), as a search hero usually does: site.js watches .page-head.hero,
   so the phone buy bar stays tucked away until the whole hero, finder included, has scrolled away. The spacing moves
   from the page head's padding to its children's margins (a subgrid's padding does not push items on empty rows). */
@supports (grid-template-rows: subgrid) {
  .t-home main.wrap:has(> .content > .esf):has(> .page-head:not(.has-visual)) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) { grid-column: 1; grid-row: 1 / span 7; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; align-content: start; padding: 0; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > * { grid-column: 1; min-width: 0; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > .kicker { grid-row: 1; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > h1 { grid-row: 2; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > .lede { grid-row: 3; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > .hero-btns { grid-row: 4; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > .hero-note { grid-row: 5; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > :is(.badges, .meta) { grid-row: 6; }
  .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > :first-child { margin-top: var(--s-10); }
  .t-home main.wrap:has(> .content > .esf):has(> .page-head:not(.has-visual)) > .content > .esf:not(.esf ~ .esf) { grid-column: 1; grid-row: 7; align-self: start; margin-top: var(--s-6); padding: 0 0 var(--s-8); background: none; box-shadow: none; clip-path: none; }
  @media (max-width: 760px) {
    .t-home main.wrap:has(> .content > .esf) > .page-head:not(.has-visual) > :first-child { margin-top: var(--s-6); }
    .t-home main.wrap:has(> .content > .esf):has(> .page-head:not(.has-visual)) > .content > .esf:not(.esf ~ .esf) { margin-top: var(--s-5); padding-bottom: var(--s-6); }
  }
}

/* below the hero: one rhythm (96 px, 64 px on phones), white and tinted sections alternate */
.t-home .content > *, .t-home main.wrap > .related { margin-top: var(--section); margin-bottom: 0; }
.t-home .content > .quick-answer { width: 100%; max-width: var(--measure); margin: var(--s-8) auto 0; }
.t-home .content > .fold { margin-top: var(--s-4); }
.t-home .content > .fold + .fold { margin-top: var(--s-2); }
.t-home .content > .sources { margin-top: var(--s-4); }
.t-home .content > .sources details { margin-top: 0; }
.t-home .content > * > h2:first-child, .t-home .band > * > h2:first-child { margin-top: 0; }
.t-home h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); letter-spacing: -0.032em; margin-bottom: var(--s-3); }
.t-home h2 + p { margin-top: calc(-1 * var(--s-1)); }
.t-home :is(.steps, .trust-sec, .cards-sec, .esp, .esr-sec, .linkgrid) > p { max-width: 68ch; color: var(--muted); }
.t-home .table-note { max-width: 72ch; }
.t-home .faq-item { max-width: none; }
.t-home .sec > p, .t-home .faq-item, .t-home .quick-answer { max-width: var(--measure); }

/* "How it works": three short columns, the site's one counter style (ink-ringed disc, see 12) joined by a hairline */
.t-home .steps .step-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-5) 0 0; }
.t-home .steps .step-list:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t-home .steps .step-list > li { margin: 0; padding: 0; }
.t-home .steps .step-list > li::before { position: relative; display: grid; margin: 0 0 var(--s-2); }
.t-home .steps .step-list > li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 44px; right: calc(-1 * var(--s-4) + 12px); bottom: auto; width: auto; height: 1px; background: var(--line-strong); }
.t-home .steps .step-name { margin: 0 0 var(--s-1); font-size: var(--fs-20); letter-spacing: -0.012em; }
.t-home .steps .step-list > li > p:not(.step-name) { margin: 0; color: var(--muted); font-size: var(--fs-16); }

/* FAQ in a band (wide screens): heading across the top, questions as a 2-up grid */
@media (min-width: 1000px) {
  .t-home .band .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: 0; align-items: stretch; }
  .t-home .band .faq > h2 { grid-column: 1 / -1; position: static; margin: 0 0 var(--s-2); }
  .t-home .band .faq > .faq-item:nth-child(2), .t-home .band .faq > .faq-item:nth-child(3) { padding-top: var(--s-2); }
  .t-home .band .faq > .faq-item:nth-last-child(2):nth-child(even) { padding-bottom: 0; border-bottom: 0; }
  .t-home .faq-a { font-size: var(--fs-16); }
  .t-home .band .faq > .faq-item h3 { text-wrap: pretty; }
}

/* --------------------------------------------------------------------------------------------- 7. destination finder */
/* The search box is shown by esim.js (hidden attribute removed); without JS the full list stays visible and every link
   works. One large field (3 px focus ring on the field), popular chips with flags and "from" prices, the regions as
   tiles, the countries in a framed list that scrolls inside its own box. */
.esf { margin: var(--s-4) 0; }
.esf-q { max-width: 640px; margin: 0 0 var(--s-3); }
.esf-q label { margin: 0 0 var(--s-1); color: var(--ink); font-size: var(--fs-15); font-weight: 650; }
.esf-q input { height: 52px; padding: 0 16px 0 46px; border: 1px solid var(--field); border-radius: var(--r-md); background: #fff var(--i-search) no-repeat 16px 50% / 20px; color: var(--ink); font: 400 var(--fs-18)/1.2 var(--font-body); box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none; transition: border-color .15s ease; }
.esf-q input:hover { border-color: var(--ink); }
.esf-q input:focus { outline: none; border-color: var(--ink); box-shadow: var(--shadow-sm); }
.esf-q input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.esf-q input::placeholder { color: var(--placeholder); opacity: 1; }
.esf-q input::-webkit-search-cancel-button { cursor: pointer; }
/* popular destinations: flag, name, price */
.esf-pop { gap: 8px 10px; margin: 0 0 var(--s-3); }
.esf-pop-h { color: var(--muted); font-size: var(--fs-14); font-weight: 600; }
:root .esf-pop ul > li { margin: 0; }
.esf-pop a { gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: var(--fs-15); line-height: 1.25; text-decoration: none; transition: border-color .15s ease; }
.esf-pop a:hover { border-color: var(--ink); color: var(--ink); }
.esf-pop img.flag { margin: 0; }
.esf-pop a strong { font-weight: 650; }
.esf-pop a span { margin-left: 0; color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }
/* list labels and lists */
.esf-h { margin: var(--s-3) 0 var(--s-1); color: var(--ink); font-size: var(--fs-15); font-weight: 650; }
.esf-list { gap: 2px 8px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.esf-list:not(.esf-rl) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.esf-list a, .esf-x { gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink); line-height: 1.3; }
.esf-list a:hover { background: var(--row-hover); color: var(--ink); }
.esf-list a:hover .esf-n { color: var(--accent); }
.esf-list a:focus-visible { outline-offset: -3px; background: var(--row-hover); }
.esf-n { font-size: var(--fs-16); font-weight: 600; transition: color .15s ease; }
.esf-n small { margin-top: 2px; color: var(--muted); font-size: var(--fs-13); font-weight: 400; }
.esf-p { color: var(--ink-2); font-size: var(--fs-14); }
/* regions: wide tiles with a drawn globe, the price in cobalt */
.esf-list.esf-rl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-1); max-height: none; padding: 0; border: 0; background: none; overflow: visible; }
.esf-rl a, .esf-rl .esf-x { min-height: 64px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color .15s ease; }
.esf-rl a::before, .esf-rl .esf-x::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--accent); -webkit-mask: var(--i-globe) center / contain no-repeat; mask: var(--i-globe) center / contain no-repeat; }
.esf-rl a:hover { border-color: var(--ink); background: #fff; }
.esf-rl a:focus-visible { outline-offset: 2px; background: #fff; }
.esf-rl .esf-n { font-size: var(--fs-17); font-weight: 700; }
.esf-rl .esf-p { color: var(--accent); font-size: var(--fs-15); font-weight: 650; }
.esf-none { margin: var(--s-2) 0 0; padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs-15); }
.esf-note { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
.esf > p:not([class]) { max-width: 68ch; color: var(--muted); }

/* home hero version: big centred field, popular destinations as 4 x 2 tiles (flag, name, then the price: long and
   translated names wrap instead of being cut), the lists on the same 960 px axis */
.t-home .esf > h2 { margin: 0 0 var(--s-2); font-size: var(--fs-24); letter-spacing: -0.02em; text-align: center; }
.t-home .esf > p:not([class]) { margin-inline: auto; text-align: center; text-wrap: balance; }
.esf:has(> h2) .esf-q label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* the H2 above is the visible prompt */
.t-home .esf-q { max-width: 760px; margin: 0 auto var(--s-3); }
.t-home .esf-q input { height: 64px; padding-left: 56px; border-radius: var(--r-lg); background-position: 20px 50%; background-size: 22px; font-size: var(--fs-20); box-shadow: var(--shadow-md); }
.t-home .esf-pop { max-width: 960px; margin: 0 auto var(--s-5); justify-content: center; }
.t-home .esf-pop-h { flex-basis: 100%; text-align: center; }
.t-home .esf-pop ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); width: 100%; }
.t-home .esf-pop li { display: flex; min-width: 0; }
.t-home .esf-pop a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 12px; row-gap: 1px; width: 100%; min-width: 0; min-height: 64px; padding: 10px 16px; border-color: var(--line); border-radius: var(--r-md); }
.t-home .esf-pop a:hover { border-color: var(--ink); }
.t-home .esf-pop a img.flag { grid-row: 1 / span 2; align-self: center; width: 24px; height: 18px; }
.t-home .esf-pop a strong { min-width: 0; font-size: var(--fs-16); line-height: 1.25; overflow-wrap: anywhere; }
.t-home .esf-pop a span { grid-column: 2; margin: 0; font-size: var(--fs-15); line-height: 1.3; }
.t-home .esf > :is(.esf-h, .esf-list, .esf-none, .esf-note) { width: 100%; max-width: 960px; margin-inline: auto; }
.t-home .esf-h { margin-top: var(--s-3); }
.t-home .esf-pop + .esf-h { margin-top: 0; }
.t-home .esf-list:not(.esf-rl) { max-height: 22rem; overflow-y: auto; }
/* the contained lists say "more below": a soft fade over an empty bottom pad (the last row and the keyboard focus
   scroll above it); the scroll hands over to the page at both ends */
:is(.t-home, .t-hub) .esf-list:not(.esf-rl) { padding-bottom: 40px; scroll-padding-block: 6px 44px; overscroll-behavior: auto; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.t-home .esf-list:not(.esf-rl) { border-color: transparent; } /* a white panel on the tint: no frame to cut by the fade */
.t-hub .esf-list:not(.esf-rl) { border-color: transparent; background: var(--surface); } /* a tinted panel on white */
.t-hub .esf-list:not(.esf-rl) a:is(:hover, :focus-visible) { background: #fff; }

/* -------------------------------------------------------------------------------------------------- 8. plan table */
/* framed table, discreet header, airy rows, the price column in ink and heavier, price per GB muted, both right-aligned
   tabular figures; the best price per GB row tinted with a cobalt edge; filter chips as radio buttons */
.esp { margin: var(--s-4) 0; }
.esp .table-wrap { overflow-x: auto; }
.esp :is(th, td) { padding: 14px 16px; }
/* tabular figures on the figures only (Inter's tnum also widens the hyphen of "Top-up") */
.esp td { font-variant-numeric: normal; }
.esp td:is(.esp-p, .esp-g) { font-variant-numeric: tabular-nums; }
.esp thead th { white-space: nowrap; }
.esp tbody th.esp-d, .esp-mix tbody td.esp-d { color: var(--ink); font-size: var(--fs-16); font-weight: 700; }
.esp .esp-sub { margin-top: 3px; color: var(--muted); font-size: var(--fs-13); font-weight: 400; line-height: 1.4; }
.esp .esp-reg a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); }
.esp .esp-reg a:hover { color: var(--accent); text-decoration-color: currentColor; }
.esp td.esp-t { color: var(--ink-2); white-space: nowrap; }
.esp td.esp-p { text-align: right; white-space: nowrap; }
.esp td.esp-p strong { color: var(--ink); font-size: var(--fs-18); font-weight: 750; letter-spacing: -0.01em; }
.esp td.esp-g { text-align: right; color: var(--muted); font-size: var(--fs-15); white-space: nowrap; }
.esp .esp-muted { color: var(--muted); font-size: var(--fs-14); }
/* header cells of the price and per-GB columns follow their figures (whatever the column position: hide, mixed) */
.esp table:has(td.esp-p:nth-child(2)) thead th:nth-child(2), .esp table:has(td.esp-p:nth-child(3)) thead th:nth-child(3),
.esp table:has(td.esp-p:nth-child(4)) thead th:nth-child(4), .esp table:has(td.esp-p:nth-child(5)) thead th:nth-child(5),
.esp table:has(td.esp-g:nth-child(3)) thead th:nth-child(3), .esp table:has(td.esp-g:nth-child(4)) thead th:nth-child(4),
.esp table:has(td.esp-g:nth-child(5)) thead th:nth-child(5), .esp table:has(td.esp-g:nth-child(6)) thead th:nth-child(6) { text-align: right; }
.esp thead th button { justify-content: inherit; }
.esp table:has(td.esp-p) thead th[style], .esp thead th:has(> button) { vertical-align: middle; }
.esp td.esp-n { color: var(--muted); font-size: var(--fs-14); }
.esp-tag { margin: 0 4px 2px 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; line-height: 1.5; }
.esp-tag.g5 { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.esp td.esp-b { width: 1%; padding-left: 8px; }
/* one buy button per row: a quiet cobalt outline that fills on hover; the best price per GB row keeps it filled */
.esp td.esp-b .btn { min-width: 72px; }
.esp td.esp-b .btn-primary { background: #fff; border-color: var(--accent-line); color: var(--accent); }
.esp td.esp-b .btn-primary:hover, .esp tr.hl td.esp-b .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.esp tr.hl td.esp-b .btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.esp tbody th > a { color: var(--ink); font-weight: 700; text-decoration: none; }
.esp tbody th > a:hover { color: var(--accent); text-decoration: underline; }
.esp .esp-sub a { font-weight: 400; }
/* best price per GB: a quiet cobalt pill next to the amount, the row tinted */
.tier-badge { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-12); font-weight: 650; line-height: 1.45; vertical-align: 2px; white-space: nowrap; }
.esp tbody tr.hl, .esp tbody tr.hl:hover { background: var(--accent-soft); }
.esp tbody tr.hl > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
.esp tbody tr.hl .tier-badge { background: #fff; }
/* sortable headers (esim.js): drawn arrows, 3.8:1 on the header tint */
.esp th button { gap: 6px; color: inherit; font: inherit; }
.esp th button:hover { color: var(--ink); }
.esp th button::after { content: ""; flex: none; width: 8px; height: 13px; background: currentColor; opacity: .75; -webkit-mask: var(--i-sort) center / contain no-repeat; mask: var(--i-sort) center / contain no-repeat; }
.esp th[aria-sort="ascending"] button::after { opacity: 1; -webkit-mask-image: var(--i-sort-up); mask-image: var(--i-sort-up); }
.esp th[aria-sort="descending"] button::after { opacity: 1; -webkit-mask-image: var(--i-sort-down); mask-image: var(--i-sort-down); }
.esp th button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* filter chips (radio buttons): the legend in a fixed gutter, the whole chip is the hit area */
.esp-f { gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-2); }
.esp-fs { position: relative; align-items: center; gap: 8px; padding-left: 72px; }
.esp-fs legend { position: absolute; left: 0; top: 0; float: none; margin: 0; padding: 0; color: var(--muted); font-size: var(--fs-14); font-weight: 600; line-height: 40px; }
.esp-fs span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink-2); font-size: var(--fs-14); font-weight: 600; transition: border-color .15s ease, background-color .15s ease; }
.esp-fs label:hover span { border-color: var(--ink); }
.esp-fs input { inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.esp-fs input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.esp-fs input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.esp-none { margin: var(--s-2) 0 0; padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs-15); }
.esp .table-note { margin-top: var(--s-2); }

/* ------------------------------------------------------------------------------------------------- 9. region grid */
.esr-sec { margin: var(--s-4) 0; }
.esr { gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.esr:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.esr:has(> li:only-child) { grid-template-columns: minmax(0, 420px); }
.esr li { display: flex; }
.esr a, .esr li > div { flex: 1 1 auto; gap: 4px; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; transition: border-color .15s ease; }
.esr a:hover { border-color: var(--ink); transform: none; }
.esr-flags { gap: 6px; margin-bottom: var(--s-1); }
.esr-n { color: var(--ink); font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.012em; }
.esr a:hover .esr-n { color: var(--accent); }
.esr-c { color: var(--muted); font-size: var(--fs-14); }
.esr-p { margin-top: auto; padding-top: var(--s-2); color: var(--accent); font-size: var(--fs-15); font-weight: 650; }

/* -------------------------------------------------------------------------------------------------------- 10. panels */
/* the quick answer: calm white card, the only panel with a cobalt edge */
.quick-answer { margin: var(--s-3) 0 var(--s-5); padding: var(--s-3) var(--s-3) var(--s-3) 28px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-md); box-shadow: none; }
.qa-label { margin: 0 0 var(--s-1); color: var(--muted); font-size: var(--fs-14); font-weight: 600; }
.qa-q { margin: 0 0 6px; color: var(--ink); font-size: var(--fs-18); font-weight: 700; line-height: 1.35; }
.qa-text p { margin-bottom: .6em; }
.qa-text p:last-child { margin-bottom: 0; }
/* tinted panels: callout, methodology, table of contents */
.callout, .method, .toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.callout { margin: var(--s-4) 0; padding: var(--s-2) var(--s-3); }
.callout-h, .method-h { margin: 0 0 4px; color: var(--ink); font-weight: 700; }
.callout.warn { background: #fff8e8; border-color: #f0dca6; }
.callout.success { background: #edf8f1; border-color: #c9e7d4; }
.callout > :last-child { margin-bottom: 0; }
.method { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-left: 1px solid var(--line); border-radius: var(--r-md); }
.method p:last-child { margin-bottom: 0; }
.checked { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
.toc { max-width: var(--measure); margin: var(--s-2) 0 var(--s-4); padding: var(--s-2) var(--s-3); font-size: var(--fs-15); }
.toc-h { margin: 0 0 6px; color: var(--ink); font-size: var(--fs-15); font-weight: 650; }
.toc ol { padding-left: 1.8em; column-gap: var(--s-6); }
.toc li { margin: 0; padding: .2em 0; break-inside: avoid; }
.toc li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.t-legal .toc ol { list-style: none; padding-left: 0; }
/* publisher note: slim line, not a second panel (the footer repeats its sentence) */
.about-box { max-width: var(--measure); margin: var(--s-8) 0 0; padding: var(--s-3) 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: var(--fs-14); }
.about-h { color: var(--ink); font-size: var(--fs-14); font-weight: 650; }

/* -------------------------------------------------------------------------------------------------------- 11. tables */
/* framed, discreet light header, hairline rows, hover tint, our own row tinted with a cobalt edge */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.table-wrap > table { margin: 0; }
.tbl table, .facts-table { font-size: var(--fs-15); }
.tbl :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tbl thead th, .tiers thead th, .pay-table thead th { padding-block: 12px; background: var(--surface); color: var(--muted); font-size: var(--fs-13); font-weight: 600; line-height: 1.35; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.tbl tbody th { color: var(--ink); font-weight: 650; }
.tbl :where(tbody tr:nth-child(even)) { background: transparent; }
.tbl :where(tbody tr):hover, .pay-table tbody tr:hover { background: var(--row-hover); }
.tbl tr.hl, .tbl tr.hl:hover { background: var(--accent-soft); }
.tbl tr.hl th { color: var(--ink); }
.tbl tr.hl > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tbl caption { padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-13); }
.table-note { max-width: 72ch; margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
.table-note p:last-child { margin-bottom: 0; }
.tbl, .facts { margin: var(--s-4) 0; }
.yes { color: var(--yes); }
.no { color: var(--no); }
.tbl :is(.yes, .no) { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 15px/1 "Segoe UI Symbol", ui-sans-serif, system-ui, sans-serif; }
.tbl .yes { background: #e8f5ed; }
.tbl .no { background: #fdecea; }

/* key facts: a framed spec sheet */
.facts-table { border: 1px solid var(--line); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.facts-table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts-table tr:last-child > * { border-bottom: 0; }
.facts-table th { width: 13rem; background: var(--surface); color: var(--muted); font-weight: 500; }
.facts-table td { color: var(--ink-2); }
.facts-table :is(.yes, .no) { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 15px/1 "Segoe UI Symbol", ui-sans-serif, system-ui, sans-serif; }
.facts-table .yes { background: #e8f5ed; }
.facts-table .no { background: #fdecea; }

/* confirmation times (paymentSteps): the coin cell is a real table cell again */
.pay-table { position: relative; z-index: 1; margin: var(--s-2) 0 var(--s-1); }
.pay-table table { font-size: var(--fs-15); }
.pay-table :is(th, td) { padding: 12px 16px; vertical-align: middle; }
.pay-table tbody th { display: table-cell; white-space: nowrap; color: var(--ink); font-weight: 650; }
.coin-logo { max-width: none; }
.pay-table tbody th .coin-logo { display: inline-block; width: 20px; height: 20px; margin: -3px 8px 0 0; vertical-align: middle; }
.pay-table :is(thead th, td):nth-child(3) { text-align: right; padding-right: 28px; font-variant-numeric: tabular-nums; }
.pay-help { color: var(--muted); font-size: var(--fs-15); }
/* one tone for every coin logo (footer, coin strip, coin cards, confirmation table): cool grey disc, white glyph; the
   brand colours come back on hover. The SVGs are inline, so they are recoloured, not filtered. */
:is(.coins-mini, .coinstrip, .coins) .coin-logo, .pay-table .coin-logo { filter: none; opacity: 1; }
:is(.coins-mini, .coinstrip, .coins) li:not(:hover):not(:focus-within) .coin-logo circle, .pay-table .coin-logo circle { fill: #7d86a1; }
:is(.coins-mini, .coinstrip, .coins) li:not(:hover):not(:focus-within) .coin-logo :is(path, ellipse):not([fill="none"]):not([fill="none"] *),
.pay-table .coin-logo :is(path, ellipse):not([fill="none"]):not([fill="none"] *) { fill: #fff; }

/* comparison tables: row labels keep one readable line */
.cmp tbody th { min-width: 9rem; }
/* dense tables (5 columns or more) in the reading column: one step smaller, tighter cells */
@media (min-width: 761px) {
  .tbl:not(.esp) table:has(thead th:nth-child(5)) { font-size: var(--fs-14); }
  .tbl:not(.esp) table:has(thead th:nth-child(5)) :is(th, td) { padding-inline: 12px; }
  /* matrices (8 columns or more) scroll sideways inside their frame: readable column floors, the row label stays
     pinned on the left, a soft edge shadow while more columns hide on the right */
  .tbl:not(.esp) .table-wrap:has(> table thead th:nth-child(8)) { background: linear-gradient(to left, #fff 45%, rgb(255 255 255 / 0)) right / 40px 100% no-repeat local, linear-gradient(to left, rgb(11 16 32 / .12), rgb(11 16 32 / 0)) right / 14px 100% no-repeat scroll, #fff; }
  .tbl:not(.esp) table:has(thead th:nth-child(8)) td { min-width: 6.5rem; }
  .tbl:not(.esp) table:has(thead th:nth-child(8)) :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; min-width: 9rem; background: #fff; box-shadow: inset -1px 0 0 var(--line); }
  .tbl:not(.esp) table:has(thead th:nth-child(8)) thead th:first-child { background: var(--surface); }
  .tbl:not(.esp) table:has(thead th:nth-child(8)) tr.hl > th:first-child { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--line); }
  .tbl:not(.esp) table:has(thead th:nth-child(8)) tbody tr:hover > th { background: var(--row-hover); }
}

/* ------------------------------------------------------------------------------------------------------ 12. steps */
/* the site's one counter style: a white disc with an ink ring and tabular numerals, joined by a hairline (vertical
   here, horizontal in the home's columns); the decorative icon tiles are dropped (aria-hidden SVG, no text) */
.steps { margin: var(--s-4) 0; }
.step-list { margin: var(--s-3) 0; }
.step-list .step-ic { display: none; }
.step-list > li, .step-list > li.has-ic { position: relative; margin: 0; padding: 0 0 var(--s-3) 52px; }
.step-list > li::before, .step-list > li.has-ic::before { left: 0; top: 0; z-index: 1; box-sizing: border-box; width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font: 700 var(--fs-15)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.step-list > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 40px; bottom: 8px; width: 2px; background: var(--line-strong); }
.step-list > li:last-child { padding-bottom: 0; }
.step-name { margin: 3px 0 4px; color: var(--ink); font-size: var(--fs-18); font-weight: 700; line-height: 1.4; }
.step-list > li > p:not(.step-name) { margin: 0 0 var(--s-1); }
.step-list > li > p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------- 13. cards, trust, stats, ranking, link grid */
/* one card language: white, hairline border, radius md, 24 px padding, no shadow; equal heights in every grid */
.cards { gap: var(--s-2); align-items: stretch; }
.card { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin: 0 0 6px; font-size: var(--fs-17); line-height: 1.35; }
.card h3 a { color: var(--ink); }
.card p { margin: 0 0 .5em; color: var(--muted); font-size: var(--fs-15); line-height: 1.55; }
.card .card-tag { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-13); font-weight: 600; line-height: 1.4; }
.card-link:hover { border-color: var(--ink); box-shadow: none; transform: none; }
.card-link:hover h3 a { color: var(--accent); }
.card-link:focus-within { outline: none; }
.card-link:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-ic, .stat-ic, .trust-ic { width: auto; height: auto; background: none; border: 0; border-radius: 0; color: var(--accent); }
.card-ic { margin-bottom: var(--s-2); }
:is(.card-ic, .trust-ic) .ic { width: 24px; height: 24px; }
/* full rows where possible: 2 and 4 cards as rows of 2, 3, 5, 6 and 9 cards as rows of 3, 7 and 8 as rows of 4 */
@media (min-width: 640px) { .cards:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .cards:is(:has(> :nth-child(3):last-child), :has(> :nth-child(5):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards:is(:has(> :nth-child(7):last-child), :has(> :nth-child(8):last-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.trust-sec { margin: var(--s-4) 0; }
.trust { gap: var(--s-2); margin: var(--s-4) 0 0; align-items: stretch; }
.trust > li { flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.trust-sec.compact .trust > li { flex-direction: row; }
/* in the 760 px reading column, four trust items run as 2 x 2 */
@media (min-width: 900px) { :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq) .content .trust.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trust-t { margin: 0 0 6px; color: var(--ink); font-size: var(--fs-17); font-weight: 700; line-height: 1.35; }
.trust-d { color: var(--muted); font-size: var(--fs-15); line-height: 1.55; }

.stats { gap: var(--s-2); margin: var(--s-3) 0; }
.stat { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.stat-ic .ic { width: 22px; height: 22px; }
.stat-v { color: var(--ink); font-size: var(--fs-32); font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stat-l { color: var(--ink-2); font-size: var(--fs-15); }
.stat-n { font-size: var(--fs-13); }
@media (min-width: 900px) { .stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ranking { margin: var(--s-4) 0; }
.rank-list { margin: var(--s-3) 0; }
.rank { margin: 0 0 var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.rank.self { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #fff; }
.rank-head { gap: 12px; }
.rank-head h3 { font-size: var(--fs-20); }
.rank-head h3 a { color: var(--ink); text-decoration: none; }
.rank-head h3 a:hover { color: var(--accent); text-decoration: underline; }
/* the site's one counter style (see 12): white disc, ink ring; our own entry is the single filled disc */
.rank-n { box-sizing: border-box; width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font: 700 var(--fs-15)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.rank.self .rank-n { background: var(--ink); color: #fff; }
.rank-badge { padding: 0; border-radius: 0; background: none; color: var(--muted); font: 600 var(--fs-14)/1.5 var(--font-body); }
.rank.self .rank-badge { background: none; color: var(--accent); font-weight: 650; }
.rank > .rank-verdict { max-width: 68ch; margin: 12px 0 var(--s-2); }
.rank > :last-child, .rank .pc, .rank .pc ul, .rank .pc li:last-child { margin-bottom: 0; }
.rank-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 var(--s-2); padding: 12px 0; border-block: 1px solid var(--line); font-size: var(--fs-15); }
.rank-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-meta dt, .rank-meta dd { display: block; }
.rank-meta dt { color: var(--muted); font-size: var(--fs-13); }
.rank-meta dt::after { content: none; }
.rank-meta dd { color: var(--ink); font-weight: 500; }
.pc { gap: 8px var(--s-4); margin-bottom: var(--s-1); font-size: var(--fs-15); }
.pc-h { color: var(--ink); }
.pc ul { list-style: none; margin: 6px 0 var(--s-1); padding: 0; }
.pc li { position: relative; margin: .3em 0; padding-left: 1.3em; }
.pc li::before { position: absolute; left: 0; font-weight: 800; }
.pc > div:first-child:not(:only-child) li::before { content: "+"; color: var(--accent); }
.pc > div:last-child li::before { content: "\2212"; color: var(--no); }
@media (min-width: 601px) { .pc > div:only-child { grid-column: 2; } }
.disclosure { font-size: var(--fs-13); }

/* link grid: the list item is the chip (equal heights per row), its link covers the whole chip; a note ("from
   $1.09") sits under the name, aligned with it after the flag, as in the hero's popular destinations */
.linkgrid { margin: var(--s-4) 0; }
.lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s-1); font-size: var(--fs-15); }
.lg li { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: var(--h-md); margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color .15s ease; }
.lg li:hover { border-color: var(--ink); }
.lg a { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; line-height: 1.3; text-decoration: none; }
.lg a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lg li:hover > a { color: var(--accent); }
.lg a:focus-visible { outline: none; }
.lg li:has(> a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.lg a img.flag { margin: 0; flex: none; }
.lg-note { color: var(--muted); font-size: var(--fs-13); line-height: 1.35; font-variant-numeric: tabular-nums; }
.lg li:has(> a > img.flag) > .lg-note { padding-left: 30px; }
.lg-group { margin: var(--s-3) 0 var(--s-1); color: var(--ink); font-size: var(--fs-15); font-weight: 650; }

.coinstrip { gap: 10px 20px; margin: var(--s-4) 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
:root .cs-label { color: var(--ink); font-size: var(--fs-15); font-weight: 650; }
.coinstrip .cs-note { flex-basis: 100%; margin: 0; }
.coin-row li { color: var(--ink-2); font: 600 var(--fs-14)/1 var(--font-body); }
.coins li { align-content: center; row-gap: 2px; border-color: var(--line); border-radius: var(--r-md); background: #fff; }
.coin-code { color: var(--ink); font-family: var(--font-body); line-height: 1.3; }
.coin-name { color: var(--ink-2); line-height: 1.35; }
.coin-note { line-height: 1.4; }

/* --------------------------------------------------------------------------------- 14. FAQ, folds, sources, definitions */
.faq-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq > .faq-item:last-child { padding-bottom: 0; }
.faq-item h3 { margin: 0 0 var(--s-1); font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.006em; line-height: 1.35; }
.faq-a { color: var(--ink-2); }
.faq-a p:last-child { margin-bottom: 0; }

/* collapsed blocks ("collapsed" option): a full-width row with a drawn chevron */
.fold { margin: var(--s-4) 0; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 56px; padding: 0 var(--s-3); color: var(--ink); font: 650 var(--fs-17)/1.3 var(--font-body); cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::marker { content: ""; }
.fold > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.fold[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.fold > summary:hover { color: var(--accent); }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > :not(summary) { margin: 0; padding: var(--s-1) var(--s-3) var(--s-3); }
.fold > :not(summary) > h2:first-child { margin-top: var(--s-2); font-size: var(--fs-20); }
/* a folded key-facts table: the fold is the frame (no card in a card), the row hairlines stay */
.fold .facts-table { border-width: 1px 0 0; border-radius: 0; }
.fold > .facts { padding-inline: 0; padding-bottom: 0; }
.fold > .facts > h2:first-child { padding-inline: var(--s-3); }
.fold .facts-table :is(th, td):first-child { padding-left: var(--s-3); }
.fold .facts-table tr:last-child > * { border-bottom: 0; }
.fold .facts-table tr:last-child > th { border-bottom-left-radius: calc(var(--r-md) - 1px); }

.sources details { margin-top: var(--s-4); padding-top: var(--s-1); border-top: 1px solid var(--line); }
.sources summary { list-style: none; display: inline-flex; align-items: flex-start; gap: 10px; min-height: 0; padding-block: 12px; color: var(--ink-2); font-size: var(--fs-15); font-weight: 600; line-height: 1.4; cursor: pointer; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::marker { content: ""; }
.sources summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.sources details[open] summary::before { transform: rotate(45deg); }
.sources summary:hover { color: var(--accent); }
.sources ol { padding-left: 2.2em; color: var(--muted); }
.sources li::marker { font-variant-numeric: tabular-nums; }
.src-t { color: var(--ink-2); }
.src-u { font-size: inherit; }
.ext-ref { text-decoration-color: var(--line-strong); }

.defs { margin: var(--s-4) 0; }
.def { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.def:last-child { border-bottom: 0; }
.def dt { color: var(--ink); font-size: var(--fs-17); font-weight: 700; }
.def dd { margin: 4px 0 0; color: var(--ink-2); }

/* ------------------------------------------------------------------------------------------------ 15. call to action */
/* the single dark band of a page: ink panel, centred, one cobalt button; volt lime only for a strong word in it */
.cta { flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-8) 0; padding: var(--s-8) var(--s-4); border-radius: var(--r-lg); background: var(--ink); color: #fff; text-align: center; }
.cta > div:first-child { min-width: 0; max-width: 680px; }
.cta > div:first-child::before { content: ""; display: block; width: 32px; height: 4px; margin: 0 auto var(--s-3); border-radius: 2px; background: var(--signal); } /* the signal mark, on the dark band only */
.cta-h { margin: 0 0 var(--s-1); color: #fff; font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.15 var(--font-head); letter-spacing: -0.032em; overflow-wrap: anywhere; }
.cta-t { overflow-wrap: anywhere; }
.cta-t p { margin: 0; color: var(--on-dark); opacity: 1; text-wrap: balance; }
.cta-t strong { color: var(--signal); }
.cta-t a { color: #fff; }
.cta-btns { justify-content: center; gap: 12px; }
.cta .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cta .btn-primary:hover { background: #fff; border-color: #fff; color: var(--ink); }
.cta .btn-ghost { background: transparent; border-color: rgb(255 255 255 / .35); color: #fff; }
.cta .btn-ghost:hover { background: transparent; border-color: #fff; color: #fff; }
/* an earlier call to action on a page that has two: light panel, the page keeps one dark band */
.content > .cta:has(~ .cta), .content > .cta:has(~ .band .cta) { padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.content > .cta:has(~ .cta) .cta-h, .content > .cta:has(~ .band .cta) .cta-h { color: var(--ink); font-size: var(--fs-24); }
.content > .cta:has(~ .cta) > div:first-child::before, .content > .cta:has(~ .band .cta) > div:first-child::before { content: none; }
.content > .cta:has(~ .cta) .cta-t :is(p, strong), .content > .cta:has(~ .band .cta) .cta-t :is(p, strong) { color: var(--ink-2); }
.content > .cta:has(~ .cta) .cta-t a, .content > .cta:has(~ .band .cta) .cta-t a { color: var(--accent); }
.content > .cta:has(~ .cta) .btn-primary:hover, .content > .cta:has(~ .band .cta) .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.content > .cta:has(~ .cta) .btn-ghost, .content > .cta:has(~ .band .cta) .btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.content > .cta:has(~ .cta) .btn-ghost:hover, .content > .cta:has(~ .band .cta) .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.content > .cta:has(~ .cta) :focus-visible, .content > .cta:has(~ .band .cta) :focus-visible { outline-color: var(--accent); }
/* a call to action inside a band: no band-on-band, the dark panel stays a panel */
.band > .cta { margin: 0; }

/* ------------------------------------------------------------------------------------------------------ 16. related */
.related { max-width: none; margin-top: var(--section); }
.related > h2 { margin: 0 0 var(--s-3); font-size: var(--fs-24); }
.related > :last-child { margin-bottom: 0; }
.related-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-2); align-items: stretch; }
.related-list li { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; gap: 6px; padding: var(--s-3) 52px var(--s-3) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color .15s ease; }
.related-list li::after { content: ""; position: absolute; top: 28px; right: 22px; width: 18px; height: 18px; background: var(--ink); -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform .15s ease, background-color .15s ease; }
.related-list li:hover { border-color: var(--ink); }
.related-list li:hover::after { background: var(--accent); transform: translateX(3px); }
.related-list a { color: var(--ink); font-size: var(--fs-17); font-weight: 650; line-height: 1.35; text-decoration: none; }
.related-list a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.related-list li:hover a { color: var(--accent); }
.related-list p { margin: 0; color: var(--muted); font-size: var(--fs-15); line-height: 1.5; }

/* ------------------------------------------------------------------------------------------------------- 17. footer */
.ftr { margin-top: var(--section); padding: var(--s-8) 0 var(--s-4); background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-15); }
.ftr .wrap:first-child { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
/* six link columns (eSIM, Features, Pay with, Compare, Policy, Company); the brand row uses the same grid: blurb over
   the first 4, Support over the last 2, so the e-mail address keeps one line. Tablets: 3 columns; phones: 2 (see 20) */
.f-brand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-3); align-items: start; }
.f-brand > * { grid-column: 1 / span 2; }
.f-brand > .f-contact { grid-column: 3; grid-row: 1 / span 2; align-self: start; max-width: none; }
@media (min-width: 1000px) {
  .f-brand { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-2); }
  .f-brand > * { grid-column: 1 / span 4; }
  .f-brand > .f-contact { grid-column: 5 / span 2; }
}
.f-logo { gap: 10px; margin-bottom: var(--s-2); color: var(--ink); font: 800 var(--fs-18)/1 var(--font-head); letter-spacing: -0.03em; }
.f-logo .logo-mark { width: 22px; height: 28px; padding-top: 3px; border-radius: 4px; font-size: 14px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.f-desc { max-width: 64ch; margin: 0; color: var(--muted); font-size: var(--fs-14); line-height: 1.6; }
.f-contact { gap: 4px 16px; font-size: var(--fs-14); }
.f-contact-h { color: var(--ink); font-weight: 650; }
.f-contact a { color: var(--ink-2); opacity: 1; }
.f-contact a:hover { color: var(--accent); }
.f-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
@media (min-width: 1000px) { .f-cols { grid-template-columns: repeat(6, auto); justify-content: space-between; column-gap: var(--s-2); } }
.f-h { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--fs-14); font-weight: 650; }
.f-col li { margin: 0 0 10px; }
.f-col a { color: var(--muted); font-size: var(--fs-15); line-height: 1.35; }
.f-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; }
/* payment row: monochrome coin logos (colour on hover); rules aligned with the columns */
.ftr :is(.f-pay, .f-bottom) { width: min(calc(var(--wrap) - 32px), calc(100% - 32px)); padding-inline: 0; border-top: 1px solid var(--line); }
.f-pay { gap: 10px 24px; margin-top: var(--s-6); padding-top: var(--s-3); }
:root .f-pay-h { color: var(--muted); font-size: var(--fs-14); font-weight: 600; }
.coins-mini { gap: 8px 20px; margin: 0; }
.coins-mini li { gap: 7px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font: 600 var(--fs-13)/1 var(--font-body); }
.coins-mini .coin-logo { width: 20px; height: 20px; }
.f-pay-n { color: var(--muted); font-size: var(--fs-14); opacity: 1; }
.f-bottom { margin-top: var(--s-3); padding-top: var(--s-3); color: var(--muted); font-size: var(--fs-14); }
.f-pay + .f-bottom { margin-top: var(--s-3); }
.f-legal a:hover { color: var(--ink); }

/* -------------------------------------------------------------------------------------------- 18. long-form layouts */
/* reading column: 760 px */
:is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-best, .t-report, .t-article) .content { max-width: var(--measure); }
.sec > h3, .content > h3 { margin-top: 1.8em; }

/* table of contents in a sticky right rail on wide screens (DOM order unchanged: the answer stays first). Column 1 is
   capped at the 760 px reading column and the rail pushed flush right. */
@media (min-width: 1200px) {
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact) main.wrap:has(> .toc) { display: grid; grid-template-columns: minmax(0, 760px) 256px; justify-content: space-between; column-gap: var(--s-8); align-items: start; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact) main.wrap:has(> .toc) > * { grid-column: 1; min-width: 0; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact) main.wrap:has(> .toc) > :is(.crumbs, .page-head) { grid-column: 1 / -1; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact) main.wrap > .toc { grid-column: 2; grid-row: 3 / span 8; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact) main.wrap:has(> .toc) > .content { max-width: var(--measure); }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact) main.wrap:has(> .toc) > .content > :last-child,
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact) main.wrap:has(> .toc) > .content > :last-child > :last-child { margin-bottom: 0; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact) main.wrap:has(> .toc) > .related .related-list > li:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
}

/* data-heavy pages (pricing, best-of, reports, hubs): running text keeps the reading column; plan tables, comparison
   tables, rankings, stats and grids use the full width, also when a section wraps them */
@media (min-width: 1000px) {
  :is(.t-pricing, .t-report, .t-best, .t-hub) .content { max-width: none; }
  :is(.t-pricing, .t-report, .t-best, .t-hub) .content > :not(.sec, .esp, .tbl, .esr-sec, .esf, .ranking, .stats-sec, .cards-sec, .trust-sec, .coins-sec, .linkgrid, .band, .cta),
  :is(.t-pricing, .t-report, .t-best, .t-hub) :is(.content, .band) > :is(.sec, .esp, .tbl, .esr-sec, .esf, .ranking, .stats-sec, .cards-sec, .trust-sec, .coins-sec, .linkgrid, .band) > :is(p, ul:not([class]), ol:not([class]), .facts, .defs, .faq, .callout, .method, .prose, .table-note, .checked, .disclosure, .esp-none, .esf-none, .esf-note, .steps, .pay-steps),
  :is(.t-pricing, .t-report, .t-best, .t-hub) .band > :is(.faq, .facts, .steps, .pay-steps, .prose, .callout) { max-width: var(--measure); }
  :is(.t-report, .t-best) .tbl:not(.esp) table { font-size: var(--fs-14); }
  :is(.t-report, .t-best) .tbl:not(.esp) :is(th, td) { padding: 12px; }
  .t-best .rank-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* a section of tables: its own tables follow one after the other at the same 32 px step */
  :is(.t-pricing, .t-report, .t-best, .t-hub) .sec > :is(.esp, .tbl) > h3:first-child { margin-top: var(--s-5); }
}
/* plan tables with a Destination column: one line per name, the flag beside it */
.esp-mix tbody th[scope="row"] { white-space: nowrap; }
.esp-mix tbody th[scope="row"] > a { display: inline-flex; align-items: center; }

/* wide data templates (pricing, best-of, report, hubs; FAQ from 1100 px): the quick answer sits right under the title
   and the table of contents follows it. DOM order untouched; .content becomes transparent to layout, as on the home
   page. Flex items keep their margins (no collapsing), so the rhythm is rebuilt. */
@media (min-width: 1000px) {
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap { display: flex; flex-direction: column; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap > .content { display: contents; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap > .toc { order: 1; margin: var(--s-5) 0 0; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > :not(.quick-answer) { order: 2; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap > :is(.related, .about-box) { order: 3; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > * { margin-block: 0; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > :not(.quick-answer, .cta, .band, .callout, .fold, .method) > :last-child,
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > :not(.quick-answer, .cta, .band, .callout, .fold, .method) > :last-child > :last-child { margin-bottom: 0; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > :not(.quick-answer) { margin-top: var(--s-6); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > :not(.quick-answer) > h2:first-child { margin-top: var(--s-4); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .quick-answer { margin-top: var(--s-3); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .cta { margin-top: var(--s-8); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .band { margin-top: var(--s-12); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .band > :first-child > h2:first-child { margin-top: 0; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .band + * { margin-top: var(--s-12); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .band + * > h2:first-child { margin-top: 0; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .sources { margin-top: var(--s-3); }
}
@media (min-width: 1100px) {
  .t-faq main.wrap { display: flex; flex-direction: column; }
  .t-faq main.wrap > .content { display: contents; }
  .t-faq main.wrap > .toc { order: 1; margin: var(--s-5) 0 0; }
  .t-faq .content > :not(.quick-answer) { order: 2; }
  .t-faq main.wrap > :is(.related, .about-box) { order: 3; }
  .t-faq .content > * { margin-block: 0; }
  .t-faq .content > :not(.quick-answer, .cta, .callout, .fold) > :last-child,
  .t-faq .content > :not(.quick-answer, .cta, .callout, .fold) > :last-child > :last-child { margin-bottom: 0; }
  .t-faq .content > .quick-answer { margin-top: var(--s-3); }
  .t-faq .content > :is(.faq, .facts, .sources) { margin-top: var(--s-6); }
  .t-faq .content > .cta { margin-top: var(--s-8); }
}
/* hubs: the finder's country list keeps its own scroll box, a little taller (the full list follows as links) */
.t-hub .esf-list:not(.esf-rl) { max-height: 30rem; }

/* FAQ page: category heading in a sticky left column, questions on the right */
@media (min-width: 1100px) {
  .t-faq .content { max-width: none; }
  .t-faq .content > :not(.faq, .facts, .cta, .sources) { max-width: var(--measure); }
  .t-faq .faq { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: space-between; column-gap: var(--s-7); align-items: start; padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .t-faq .faq > h2 { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: calc(var(--hdr-h) + var(--s-3)); margin: 0; font-size: var(--fs-24); }
  .t-faq .faq > .faq-item { grid-column: 2; max-width: 760px; }
  .t-faq .faq > .faq-item:first-of-type { padding-top: 0; }
  .t-faq .content > .facts { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: space-between; column-gap: var(--s-7); align-items: start; max-width: none; padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .t-faq .content > .facts > h2 { grid-column: 1; position: sticky; top: calc(var(--hdr-h) + var(--s-3)); margin: 0; font-size: var(--fs-24); }
  .t-faq .content > .facts > :not(h2) { grid-column: 2; margin-top: 0; }
  .t-faq .content > .sources { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: space-between; column-gap: var(--s-7); max-width: none; }
  .t-faq .content > .sources > * { grid-column: 2; min-width: 0; }
}

/* >= 1200 px, every template with a table of contents: a quiet rail on the right (sticky, a hairline on its left) */
@media (min-width: 1200px) {
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc { position: sticky; top: calc(var(--hdr-h) + var(--s-3)); max-height: calc(100vh - var(--hdr-h) - var(--s-6)); overflow: auto; max-width: none; margin: var(--s-5) 0 0; padding: 6px 6px var(--s-4) var(--s-2); scroll-padding-block: 8px 40px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; font-size: var(--fs-14); -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc ol { columns: auto; list-style: none; padding: 0; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc li { padding: 0; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc a { display: block; padding: 5px 0; color: var(--muted); line-height: 1.4; text-decoration: none; }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc a:hover { color: var(--accent); }
  :is(.t-guide, .t-location, .t-comparison, .t-about, .t-legal, .t-contact, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc a:focus-visible { outline-offset: 0; }
  .t-legal main.wrap > .toc a { padding: 3px 0; line-height: 1.35; }
  main.wrap > nav.toc { z-index: 1; }
  /* data templates: the flex column above becomes a 2-column grid with the same DOM and order rules. The rail sits
     beside the quick answer and the reading-column block after it; every other block spans the full width. */
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) { display: grid; grid-template-columns: minmax(0, 760px) 256px; justify-content: space-between; column-gap: var(--s-8); align-items: start; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > *,
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > .content > * { grid-column: 1 / -1; min-width: 0; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > .crumbs { grid-row: 1; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > .page-head { grid-row: 2; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > .content > .quick-answer { grid-column: 1; grid-row: 3; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap:has(> .toc) > .content > .quick-answer + :is(.facts, .sec:not(:has(.esp, .tbl, .ranking, .esr, .cards, .stats, .lg, .esf)), .prose, .callout) { grid-column: 1; grid-row: 4; }
  /* the rail never makes those rows taller (size containment): it takes their height and scrolls inside it when the
     page has many sections, so no blank gap opens under the quick answer */
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc { grid-column: 2; grid-row: 3 / span 2; position: static; align-self: stretch; contain: size; max-height: none; overflow: auto; }
  .t-faq main.wrap > .toc { grid-row: 3; }
}

/* legal pages: quiet, document-style sections */
.t-legal .content h2 { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); font-size: var(--fs-24); letter-spacing: -0.018em; }
.t-legal .content > .facts h2, .t-legal .content > :first-child h2 { padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------------------------------------- 19. band, sticky bar */
.band { margin: var(--s-12) 0; padding: var(--s-10) 0; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); }
.band > :last-child, .band > :last-child > :last-child { margin-bottom: 0; }
.band > :first-child, .band > :first-child > h2:first-child { margin-top: 0; }
.band .faq > .faq-item:last-child { padding-bottom: 0; border-bottom: 0; }
.band :is(.table-wrap, .card, .trust > li, .rank, .stat, .fold, .esr a, .esr li > div, .esf-list:not(.esf-rl), .esf-rl a, .lg a, .related-list li, .quick-answer, .facts-table) { background: #fff; }
.band :is(.callout, .method, .toc, .coinstrip) { background: #fff; }

.sticky-cta { border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgb(11 16 32 / .35); }
.sticky-cta .btn { min-height: 48px; }
.sc-note { color: var(--ink-2); }

/* ------------------------------------------------------------------------------------------------------- 20. phones */
@media (max-width: 760px) {
  :root { --section: var(--s-8); }
  html:has(body.has-sticky) { scroll-padding-bottom: 96px; } /* keyboard focus never hides under the buy bar */
  h1 { font-size: clamp(1.875rem, 1.2rem + 2.8vw, 2.125rem); letter-spacing: -0.032em; }
  h2 { margin-top: 1.9em; }
  .page-head { padding-top: var(--s-3); }
  body:not(.t-home) main.wrap > .crumbs { padding-top: var(--s-1); }
  body:not(.t-home) main.wrap > .page-head { padding: var(--s-2) 0 var(--s-4); }
  body:not(.t-home) main.wrap > .page-head + :is(.toc, .content) { margin-top: var(--s-3); }
  body:not(.t-home) .content > .quick-answer:first-child { margin-top: var(--s-3); }
  .lede { font-size: var(--fs-17); }
  .crumbs ol { align-items: center; }
  .crumbs li { display: inline-flex; align-items: center; min-height: 44px; }

  /* home hero */
  .t-home main.wrap > .page-head { padding-top: var(--s-6); }
  .t-home .page-head h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 2.75rem); letter-spacing: -0.038em; }
  .t-home .page-head .lede { font-size: var(--fs-17); }
  /* proof points: one list with a common left edge (the checks line up), centred as a group */
  .t-home .page-head .badges { flex-direction: column; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%; margin-inline: auto; }
  .t-home .page-head .badges li { text-align: left; }
  .t-home .content > .esf:not(.esf ~ .esf) { padding: var(--s-5) 0 var(--s-6); }
  .t-home .esf > h2 { font-size: var(--fs-20); }
  .t-home .esf-q input { height: 56px; padding-left: 48px; background-position: 16px 50%; background-size: 20px; font-size: var(--fs-18); }
  .t-home .esf-pop { margin-bottom: var(--s-4); }
  .t-home .esf-pop ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-home .esf-pop a { min-height: 60px; padding: 8px 12px; column-gap: 10px; }
  .t-home .esf-pop a img.flag { width: 20px; height: 15px; }
  .t-home .esf-list:not(.esf-rl) { max-height: 19rem; } /* a short window: the page keeps scrolling around it */
  .t-home .steps .step-list, .t-home .steps .step-list:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
  .t-home .steps .step-list > li { padding-left: 52px; }
  .t-home .steps .step-list > li::before { position: absolute; margin: 0; }
  .t-home .steps .step-list > li:not(:last-child)::after { top: 40px; bottom: calc(-1 * var(--s-3) + 8px); left: 15px; right: auto; width: 2px; height: auto; }
  .t-home .steps .step-name { margin-top: 3px; font-size: var(--fs-18); }
  .band { margin: var(--section) 0; padding: var(--s-7) 0; }

  /* text floor 15 px for what the engine floor does not cover; FAQ answers, steps, callouts at prose size */
  :root :is(.esp-sub, .esp-muted, .esp-tag, .esp-fs span, .esp-fs legend, .esp-none, .esp td.esp-n, .esf-pop-h, .esf-pop a, .esf-h, .esf-n small, .esf-p, .esf-none, .esf-note,
    .esr-c, .esr-p, .sources summary, .rank-badge, .rank-meta dt, .stat-n, .lg-note, .about-h, .f-logo .logo-mark, .src-u, .tier-badge) { font-size: 15px; }
  html:root body :is(.faq-a, .step-list, .callout, .method, .pc) { font-size: var(--fs-16); }

  /* touch targets */
  .menu { min-height: 44px; }
  .trust > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  .trust-ic { padding-top: 1px; }
  .esf-pop a { min-height: var(--h-md); }
  .rank-head h3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .tbl:not(.esp) tbody th > a:only-child { display: inline-block; min-width: 44px; padding-block: 10px; margin-block: -10px; }
  .sources a { display: inline; min-width: 0; padding: 13px 0; }
  .sources a:focus-visible, .tbl td > a:only-child:focus-visible { padding-block: 0; }
  .facts-table td > a:only-child:focus-visible { padding-block: 0; margin-block: 0; }
  :root .sources ol > li { margin: 0; padding-block: 6px; }

  /* tables: sticky first column, a soft edge shadow while more columns hide on the right */
  .tbl:not(.esp) .table-wrap { background: linear-gradient(to left, #fff 45%, rgb(255 255 255 / 0)) right / 40px 100% no-repeat local, linear-gradient(to left, rgb(11 16 32 / .13), rgb(11 16 32 / 0)) right / 14px 100% no-repeat scroll, #fff; }
  .tbl:not(.esp) :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 var(--line); }
  .tbl:not(.esp) thead th:first-child { background: var(--surface); }
  .tbl:not(.esp) tr.hl th { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--line); }
  /* wide tables (4+ columns) scroll with readable column floors; 2-3 column tables fit the screen instead */
  .cmp thead th { min-width: 7rem; }
  .tbl:not(.esp) td { min-width: 7.5rem; }
  .tbl:not(.esp) td:last-child:not(:nth-child(2)) { min-width: 10.9375rem; }
  .cmp tbody th { min-width: 7.5rem; max-width: 10.5rem; }
  .tbl :is(th, td) { padding: 12px; }
  .tbl:not(.esp) table:not(:has(thead th:nth-child(4))) :is(td, td:last-child:not(:nth-child(2)), thead th) { min-width: 0; }
  .tbl:not(.esp) table:not(:has(thead th:nth-child(4))) tbody th { min-width: 0; max-width: none; overflow-wrap: normal; }
  .tbl:not(.esp) table:not(:has(thead th:nth-child(4))) :is(th, td) { padding-inline: 8px; }
  .tbl:not(.esp) table:not(:has(thead th:nth-child(4))) :is(th, td):first-child { padding-left: 12px; }
  /* "them vs us" comparisons (empty corner cell | them | us): the row label sits above its two values, so both values
     get half the screen. The empty corner cell leaves the grid flow but stays in the accessibility tree. */
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))),
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))) :is(thead, tbody) { display: block; }
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))) tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))) thead th:first-child { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))) :is(th, td) { position: static; min-width: 0; max-width: none; padding-inline: 12px; }
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))) tbody th { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; box-shadow: none; background: none; }
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))) tbody td { padding-top: 6px; }
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))) tbody td:last-child { box-shadow: inset 1px 0 0 var(--line); }
  .cmp table:has(thead th:first-child:empty):not(:has(thead th:nth-child(4))) tr.hl > th { background: none; box-shadow: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
  .stat { padding: var(--s-2); overflow-wrap: anywhere; }

  /* key facts: label above its value */
  .facts-table, .facts-table tbody, .facts-table tr, .facts-table th, .facts-table td { display: block; width: auto; }
  .facts-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .facts-table tr:last-child { border-bottom: 0; }
  .facts-table :is(th, td) { padding: 0; border: 0; background: none; }
  .facts-table th { margin-bottom: 2px; }
  .facts-table td > a:only-child { display: inline-block; min-height: 0; padding-block: 10px; margin-block: -10px; }
  .facts-table { overflow: visible; }
  .tbl:not(.esp) td > a:only-child { display: inline; min-width: 0; min-height: 0; padding-block: 13px; }
  .fold > summary, .fold > :not(summary) { padding-inline: var(--s-2); }
  .fold .facts-table tr { padding-inline: var(--s-2); }
  .fold .facts-table :is(th, td):first-child { padding-left: 0; }
  .fold > .facts > h2:first-child { padding-inline: var(--s-2); }

  /* steps: the confirmation table uses the full width under the counters */
  .step-list > li > .pay-table { margin-left: -52px; }
  .pay-table :is(th, td) { padding: 10px 8px; }
  .pay-table :is(thead th, td):nth-child(3) { padding-right: 8px; }
  .pay-table td:last-child { white-space: normal; }
  .pay-table tbody th .coin-logo { width: 16px; height: 16px; margin-right: 5px; }

  /* table of contents: one horizontal rail of chips, so the answer shows on the first screen */
  .toc { padding: 12px 0 8px 12px; }
  .toc-h { padding-left: 4px; }
  .toc ol { display: flex; gap: 8px; columns: auto; max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior: auto; margin: 0; padding: 4px 32px 4px 4px; list-style: none; scroll-padding-inline: 4px 40px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .toc ol::-webkit-scrollbar { display: none; }
  .t-legal .toc ol { padding-left: 4px; }
  .toc li { display: flex; flex: none; margin: 0; padding: 0; }
  .toc a { display: flex; align-items: center; max-width: 17rem; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: 15px; line-height: 1.3; text-wrap: balance; text-decoration: none; }
  .toc a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
  .toc a:focus-visible { outline-offset: 0; }

  /* cards and grids stack */
  .rank-meta { grid-template-columns: 1fr 1fr; }
  .rank-head .rank-badge { box-sizing: border-box; flex-basis: 100%; margin-top: -8px; padding-left: 44px; }
  .related-list { grid-template-columns: minmax(0, 1fr); }
  .related-list p { overflow-wrap: anywhere; }
  .related-list li { padding: 16px 24px 20px; row-gap: 0; }
  .related-list a { margin-right: 28px; }
  .related-list li::after { top: 29px; }

  /* call to action */
  .cta { padding: var(--s-5) var(--s-2); }
  .cta .btn { padding-inline: 16px; }
  .cta-h { font-size: 1.375rem; }
  .content > .cta:has(~ .cta), .content > .cta:has(~ .band .cta) { padding: var(--s-5) var(--s-2); }
  .content > .cta:has(~ .cta) .cta-h, .content > .cta:has(~ .band .cta) .cta-h { font-size: 1.25rem; }

  /* footer: two compact columns, the page ends on the footer colour (room left for the buy bar) */
  .ftr { padding-top: var(--s-6); }
  .ftr .wrap:first-child { grid-template-columns: 1fr; gap: var(--s-4); }
  .f-brand { grid-template-columns: minmax(0, 1fr); }
  .f-brand > * { grid-column: 1; }
  .f-brand > .f-contact { grid-column: 1; grid-row: auto; margin-top: var(--s-2); }
  .f-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3) 12px; }
  .f-col li { margin: 0; }
  .f-h { margin: 0 0 2px; }
  .f-col a { line-height: 1.3; }
  .coins-mini { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px 28px; }
  body.has-sticky { padding-bottom: 0; }
  body.has-sticky .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* buy bar: the button keeps its label on one line, the note takes the rest */
  .sticky-cta { gap: 10px; }
  .sticky-cta .btn { flex: 0 0 auto; padding-inline: 14px; white-space: nowrap; }
  .sticky-cta .btn .ic { display: none; } /* decorative arrow (aria-hidden SVG, no text) */
  .sticky-cta .sc-note { flex: 1 1 0; min-width: 0; max-width: none; }

  /* link grid: two chips per row (the whole chip is the 44 px+ target) */
  .lg { grid-template-columns: minmax(0, 1fr); }
  .lg:has(> li > a > img.flag) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg li > a { min-height: 0; }
  .lg li { padding: 10px 12px; }
  .lg a { gap: 8px; }
  .lg li:has(> a > img.flag) > .lg-note { padding-left: 28px; }

  /* finder (every page): bigger rows, touch-size chips */
  .esf-q input { height: 52px; font-size: var(--fs-17); }
  .esf-list a, .esf-x { min-height: 56px; }
  .esf-rl a, .esf-rl .esf-x { min-height: 64px; }

  /* plan table filters: the legend on its own line, 44 px chips */
  .esp-f { gap: var(--s-2); }
  .esp-fs { padding-left: 0; }
  .esp-fs legend { position: static; float: left; flex-basis: 100%; width: 100%; line-height: 1.4; }
  .esp-fs span { min-height: 44px; }
  .esp th button { min-height: 44px; }
}

/* plan table on phones (640 px and less): one compact card per plan (data | price, validity | per GB, network | Buy) */
@media (max-width: 640px) {
  .esp .table-wrap { background: none; }
  .esp caption { padding: 0 2px var(--s-1); border: 0; color: var(--muted); font-size: 15px; }
  .esp tbody tr { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin: 0 0 var(--s-1); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
  .esp tbody tr:hover { background: #fff; }
  .esp tbody tr.hl, .esp tbody tr.hl:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
  .esp tbody tr.hl > :first-child { box-shadow: none; }
  .esp :is(tbody th, tbody td) { padding: 0; border: 0; }
  .esp .esp-d, .esp-mix tbody td.esp-d { font-size: var(--fs-18); }
  .esp .esp-t { font-size: 15px; }
  .esp td.esp-p strong { font-size: var(--fs-20); }
  .esp td.esp-g { font-size: 15px; }
  .esp .esp-n { grid-column: 1; grid-row: 3; align-self: center; margin-top: 12px; }
  .esp td.esp-b { grid-column: 2; grid-row: 3; width: auto; margin-top: 12px; padding: 0; text-align: right; }
  .esp td.esp-b .btn { width: auto; min-width: 104px; min-height: 44px; font-size: var(--fs-16); }
  .esp-mix .esp-n, .esp-mix td.esp-b { grid-row: 4; }
  .esp .tier-badge { display: inline-block; margin: 4px 0 0; }
  /* the caption ("Plans: 11 · prices in USD") goes under the cards, as on wide screens: the filters lead to the plans */
  .esp table { display: flex; flex-direction: column; }
  .esp caption { order: 3; padding: var(--s-1) 2px 0; }
  .esp tbody tr > :is(.esp-d, .esp-p) { align-self: first baseline; }
  .esp .esp-reg a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .esp.js thead tr { gap: 6px; padding: 0 0 var(--s-1); }
  .esp.js thead th { padding: 0; border: 0; background: none; font-size: 15px; }
  .esp.js thead th button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink-2); font-weight: 600; }
  .esp.js thead th[aria-sort] button { border-color: var(--ink); color: var(--ink); }
  .esp-mix tbody th[scope="row"] { margin-bottom: 4px; font-size: var(--fs-17); }
  .esp-mix tbody th[scope="row"] a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 560px) {
  /* ranking cards: tighter padding, each detail on one run-in line ("Best for: …") */
  .rank { padding: 20px 16px; }
  .rank-meta { grid-template-columns: 1fr; gap: var(--s-1); }
  .rank-meta > div { display: block; }
  .rank-meta :is(dt, dd) { display: inline; margin: 0; }
  .rank-meta dt::after { content: ": "; }
  .stat { min-width: 0; overflow-wrap: break-word; }
  .stat-v { font-size: var(--fs-24); }
  .stat-ic { display: none; } /* decorative icon, no text */
}
@media (max-width: 520px) {
  .logo { gap: 8px; font-size: 1.0625rem; }
  .menu { padding: 0 12px; }
  .hdr-in { gap: 10px; }
  .esr { grid-template-columns: minmax(0, 1fr); }
  .esr:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
  .esr a, .esr li > div { padding: var(--s-2) 20px; }
}
@media (max-width: 400px) {
  .hdr-in { gap: 8px; }
  .logo { gap: 7px; }
  .menu { padding: 0 10px; }
  .hdr-login { padding-inline: 2px; }
}
@media (max-width: 340px) {
  .hdr-in { gap: 6px; }
  .logo { font-size: .9375rem; letter-spacing: -0.035em; }
  :root .logo-mark { width: 22px; height: 28px; font-size: 14px; }
  .menu { padding: 0 8px; }
  .hdr-login { min-width: 44px; justify-content: center; padding-inline: 0; }
  .t-home .esf-pop ul { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------- 20b. review fixes (single review pass, 2026-10-09) */
/* plan tables with a Destination column (.esp-mix): keep the Buy column inside the frame from 641 px up */
@media (min-width: 641px) {
  .esp .tier-badge { display: block; width: fit-content; margin: 4px 0 0; }
  .esp :is(td, th).esp-d .esp-sub { max-width: 26ch; }
  .esp-mix :is(th, td) { padding-inline: 10px; }
  .esp-mix td.esp-b { padding-left: 4px; }
}
@media (min-width: 641px) and (max-width: 999px) { .esp-mix td.esp-b .btn { min-width: 0; padding-inline: 14px; } }
/* phone cards: a plan with no option chip shows no orphan dash */
@media (max-width: 640px) { .esp td.esp-n:not(:has(*)) { visibility: hidden; } }
/* Europe / Global rows of mixed plan tables: a globe where countries have a flag, so the names share one text edge */
.esp-mix tbody th[scope="row"] > a:not(:has(> img.flag))::before { content: ""; flex: none; width: 20px; height: 15px; margin-right: 8px; background: var(--accent); -webkit-mask: var(--i-globe) center / 15px no-repeat; mask: var(--i-globe) center / 15px no-repeat; }
/* long tables of contents on data templates (9+ entries): an open two-column box instead of a clipped rail */
@media (min-width: 1200px) {
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc li:nth-child(9)) { display: flex; align-items: stretch; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc:has(li:nth-child(9)) { position: static; align-self: stretch; contain: none; max-width: var(--measure); max-height: none; overflow: visible; margin: var(--s-5) 0 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-15); -webkit-mask-image: none; mask-image: none; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc:has(li:nth-child(9)) ol { columns: 2 260px; }
}
/* wide matrices (10+ columns): headers on one line, the two free-text columns wider so rows stay short */
.tbl:not(.esp) table:has(thead th:nth-child(10)) thead th { white-space: nowrap; }
.tbl:not(.esp) table:has(thead th:nth-child(14)) td:is(:nth-child(12), :nth-child(13)) { min-width: 13rem; }
/* /destinations/: 3 roomy columns of countries; popular destinations as 2-up tiles on phones (same as the home) */
.t-hub .esf-list:not(.esf-rl) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
@media (max-width: 760px) {
  .esf-pop-h { flex-basis: 100%; }
  .esf-pop ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); width: 100%; }
  .esf-pop li { display: flex; min-width: 0; }
  .esf-pop a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 10px; row-gap: 1px; width: 100%; min-width: 0; min-height: 60px; padding: 8px 12px; border-color: var(--line); border-radius: var(--r-md); }
  .esf-pop a img.flag { grid-row: 1 / span 2; align-self: center; }
  .esf-pop a strong { min-width: 0; overflow-wrap: anywhere; }
  .esf-pop a span { grid-column: 2; margin: 0; }
}
/* finder while typing: one aligned result list under the field */
.esf-typing .esf-list:not(.esf-rl) { grid-template-columns: minmax(0, 1fr); }
.t-home .esf.esf-typing > :is(.esf-h, .esf-list, .esf-none) { max-width: 760px; }
/* data templates: intro text of a nested table keeps the reading measure */
@media (min-width: 1000px) {
  :is(.t-pricing, .t-report, .t-best, .t-hub) .sec > :is(.esp, .tbl, .ranking, .esr-sec, .cards-sec, .trust-sec, .stats-sec, .coins-sec, .linkgrid) > :is(p, ul:not([class]), .table-note, .checked, .disclosure) { max-width: var(--measure); }
}
/* --------------------------------------------------------------------------------------- 21. motion, forced colours */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .related-list li:hover::after { transform: none; }
}
/* forced colours (Windows High Contrast): backgrounds become Canvas, so the selected filter chip, the SIM mark and the
   mask-drawn icons (sort arrows, proof-point checks, card arrows, region globes) get system colours instead */
@media (forced-colors: active) {
  .esp-fs input:checked + span { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .esp th button::after, .badges li::before, .related-list li::after, .esf-rl a::before, .esf-rl .esf-x::before, .esp-mix tbody th[scope="row"] > a::before { forced-color-adjust: none; background: CanvasText; }
  .logo-mark { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .esp tbody tr.hl > :first-child, .tbl tr.hl > :first-child { box-shadow: none; border-left: 3px solid Highlight; }
  .quick-answer { border-left-color: Highlight; }
}
/* the drawn logo is an image, which the system does not recolour: on a dark high-contrast theme (black Canvas) the ink
   name of logo.svg would vanish, so it is inverted there (name near white, the e a light blue); light themes keep it */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .logo-img[src*="/logo.svg"] { filter: invert(1) hue-rotate(180deg); }
}