/* 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; } }

/* UnlistedSIM — "a registry you can check" visual system (design pass of 9 October 2026).
   Loaded after engine/assets/site.css + esim.css (same file), so it can override anything. Presentation only: no content
   is hidden, moved off screen or replaced. The only display:none in this file: the native <summary> markers (replaced by
   drawn chevrons) and the header links behind the Menu button from 861 to 1023 px (the engine's own phone pattern,
   extended; the same links are in the footer). Folding stays the engine's <details> ("collapsed"). Wide tables and the
   phone "On this page" row scroll sideways inside their box, with every item reachable. Visual order only changes on
   the home page, where the finder is drawn right under the page head and the quick answer after it (section 7).

   Identity: calm, precise, documented. Cool porcelain paper, graphite ink, ONE accent (verdigris teal #0b7563) kept for
   actions, prices and links. One dark contrast element per page (the call-to-action panel) + the graphite footer and
   top bar. Inter for everything, a confident scale with slightly tight headings; numbers in tabular figures; small
   "registry" labels (dates, counts, step numbers, the quick-answer label) in the system monospace. No capitals labels,
   no decorative gradients, no emoji, one icon family (the engine's stroke icons, thinned to 1.75).

   System: 8 px spacing grid (--s1…--s12) · type scale --fs-* · three radii (6 / 10 / 16) · two shadows · hairlines.
   Every colour pair is checked for WCAG AA (ratios noted beside the tokens).

   1 tokens · 2 base · 3 top bar + header · 4 buttons · 5 page head · 6 layout + rhythm (document rail) · 7 home hero +
   destination finder · 8 quick answer, toc, panels · 9 tables · 10 eSIM plans · 11 regions, cards, steps, trust, stats,
   coins · 12 ranking + comparison · 13 faq, folds, sources, definitions · 14 cta, related, link grid · 15 footer + sticky
   buy bar · 16 tablet · 17 phones · 18 forced colours + reduced motion */

/* ------------------------------------------------------------------------------------------------ 1. tokens */
/* :root:root outranks the inline :root{} the engine writes from site.json → theme */
:root:root {
  /* paper */
  --porcelain: #f6f7f7;         /* page */
  --paper: #ffffff;             /* cards, fields, tables */
  --mist: #edf1f0;              /* tinted bands, hero (= theme.surface) */
  --mist-2: #e2e8e6;            /* code, pressed states (= theme.surface2) */
  --line: #dde3e1;              /* hairlines */
  --line-2: #c6cfcc;            /* table head rule, ghost button edge */
  --field: #8a9693;             /* edges of text fields: 3.06:1 on white */
  /* ink */
  --ink: #0f1720;               /* 16.8:1 on porcelain */
  --ink-2: #2b3640;             /* body copy: 11.5:1 on porcelain, 10.8:1 on mist */
  --muted: #4a5561;             /* 7.1:1 porcelain · 6.7:1 mist · 6.1:1 mist-2 · 6.8:1 teal-tint */
  /* the accent */
  --teal: #0b7563;              /* 5.6:1 on white · 5.2:1 porcelain · 4.9:1 mist · 5.1:1 teal-tint; white on it 5.6:1 */
  --teal-hover: #085c4e;        /* white on it 7.9:1 */
  --teal-tint: #ecf5f2;         /* highlighted rows, selected states */
  --teal-line: #b5d6ce;         /* edge of tinted elements */
  --teal-bright: #5cc8b0;       /* accent on graphite only: 9.4:1 on #0b1014 */
  /* graphite */
  --graphite: #0b1014;          /* footer */
  --graphite-2: #0e141a;        /* call-to-action panel */
  --graphite-3: #17212a;        /* raised elements on graphite */
  --on-dark: #e6ecea;           /* 16:1 on graphite */
  --on-dark-2: #a9b5b2;         /* 9:1 on graphite, 8.8:1 on graphite-2 */
  --line-dark: rgb(230 236 234 / .12);
  /* states */
  --yes: #1d7a4e;               /* 5.3:1 on white, 4.8:1 on teal-tint */
  --no: #b42318;                /* 6.6:1 on white */
  --warn-bg: #fdf6e7; --warn-line: #ecd9a6; --warn-ink: #7a4b00; /* 6.9:1 */

  /* spacing (8 px grid) */
  --s05: 4px; --s1: 8px; --s15: 12px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s7: 56px; --s8: 64px; --s10: 80px; --s12: 96px;
  /* type scale */
  --fs-xs: 13px; --fs-sm: 14px; --fs-ui: 15px; --fs-base: 16px; --fs-md: 17px; --fs-lg: 19px; --fs-xl: 22px; --fs-2xl: 30px; --fs-3xl: 44px;
  --fs-hero: clamp(40px, 1.6rem + 2.4vw, 58px);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* radii, shadows */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow-1: 0 1px 2px rgb(15 23 32 / .05), 0 1px 1px rgb(15 23 32 / .03);
  --shadow-2: 0 1px 2px rgb(15 23 32 / .04), 0 12px 32px -14px rgb(15 23 32 / .22);
  --hdr-h: 68px;
  --wrap: 1200px;
  --rail: 216px;                /* "On this page" column of document pages */

  /* engine variables, mapped onto the system */
  --accent: var(--teal); --accent-2: var(--ink); --accent-ink: #fff;
  --bg: var(--porcelain); --surface: var(--mist); --surface-2: var(--mist-2); --text: var(--ink); --border: var(--line);
  --radius: var(--r-md); --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --focus: var(--teal);
  --topbar-bg: #0a0f13; --topbar-ink: #d5e2de;
}

/* ------------------------------------------------------------------------------------------------ 2. base */
/* focus and anchors never land under the sticky header (WCAG 2.4.11) */
html { background: var(--porcelain); scroll-padding-top: calc(var(--hdr-h) + 24px); }
body { background: var(--porcelain); color: var(--ink); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11" 0; }
::selection { background: var(--teal); color: #fff; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); font-weight: 650; }
h1 { font-size: var(--fs-3xl); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 var(--s2); }
h2 { font-size: var(--fs-2xl); line-height: 1.18; letter-spacing: -0.022em; margin: 0 0 var(--s2); scroll-margin-top: 0; }
h3 { font-size: 20px; line-height: 1.35; letter-spacing: -0.012em; font-weight: 600; margin: var(--s4) 0 var(--s1); scroll-margin-top: 0; }
h4 { font-size: 17px; line-height: 1.4; letter-spacing: -0.005em; font-weight: 600; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--s2); }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color .15s ease, text-decoration-color .15s ease, background-color .15s ease, border-color .15s ease; }
a:hover { color: var(--teal-hover); text-decoration-thickness: 1px; text-decoration-color: currentColor; }
main strong { font-weight: 600; color: var(--ink); }
code { font-family: var(--font-mono); font-size: .86em; background: var(--mist-2); color: var(--ink); padding: .1em .36em; border-radius: 4px; }
blockquote { border-left: 2px solid var(--line-2); color: var(--ink-2); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }
/* one icon family: the engine's stroke icons, a touch finer */
.ic { stroke-width: 1.75; }
/* numbers line up everywhere they are compared */
:is(.tbl, .facts-table, .esp, .esf, .esr, .lg, .stats, .rank-meta, .pay-table, .hp-tiers, .meta, .checked, time) { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); padding: 0 24px; }
/* drawn flags: crisp corners and a hairline ring on any background */
img.flag { width: 20px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgb(15 23 32 / .12); }
h1 img.flag-h1 { width: .82em; height: .615em; margin-right: .32em; vertical-align: -.02em; border-radius: 5px; box-shadow: 0 0 0 1px rgb(15 23 32 / .12); }

/* prose */
.content { font-size: var(--fs-md); line-height: 1.65; }
:where(.content, .related, .about-box) :where(p, li) { color: var(--ink-2); }
:where(.content) :where(ul, ol):not([class]) { padding-left: 1.25em; }
:where(.content :where(ul, ol):not([class])) > li { margin: 6px 0; }
:where(.content) ul:not([class]) > li::marker { color: var(--teal); }
:where(.content) ol:not([class]) > li::marker { color: var(--muted); font: 500 .88em var(--font-mono); }

/* labels: sentence case, no letter-spacing (the :root prefix beats the engine's phone rules of the same shape) */
:root :is(.kicker, .qa-label, .tbl thead th, .tiers thead th, .pay-table thead th, .f-pay-h, .lg-group, .cs-label, .pt-h,
  .hp-k, .hp-pay, .card-tag, .plan-badge, .tier-badge, .hp-badge, .shot-tag, .esf-h, .f-h) { text-transform: none; letter-spacing: 0; }
:root :is(.qa-q, .f-h, .f-contact-h, .rank-badge, .about-h, .method-h, .callout-h, .card-tag, .plan-badge, .tier-badge, .def dt,
  .toc-h, .pc-h, .bc-k, .step-name, .trust-t, .cta-h, .stat-v, .plan-price, .esr-n) { font-weight: 600; }

/* ------------------------------------------------------------------------------------------------ 3. top bar + header */
/* graphite strip: a teal status dot, the first statement in white, the rest in mint grey */
.topbar { padding: 9px 0; font-size: var(--fs-xs); line-height: 1.45; letter-spacing: 0; background: #0a0f13; color: #d5e2de; }
.topbar .wrap::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 0 0; border-radius: 50%; background: var(--teal-bright); vertical-align: .12em; box-shadow: 0 0 0 3px rgb(92 200 176 / .18); }
.topbar strong { color: #fff; filter: none; font-weight: 600; }
.topbar .tb-sep { color: #6f7d79; }
.topbar a { color: #fff; }
.topbar :focus-visible { outline-color: var(--teal-bright); }

.hdr { background: color-mix(in srgb, var(--porcelain) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); box-shadow: none; }
.hdr-in { min-height: var(--hdr-h); gap: var(--s3); }
.logo { gap: 11px; font: 650 19px/1 var(--font-head); letter-spacing: -0.02em; color: var(--ink); }
.logo:hover { color: var(--ink); }
/* the letter mark: a graphite square whose top-right corner is a teal notch (a SIM's cut corner, a registry tab) */
.logo-mark, .ftr .f-logo .logo-mark { position: relative; overflow: hidden; width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: #fff; font: 700 16px/1 var(--font-head); letter-spacing: -0.02em; box-shadow: none; }
.logo-mark::after { content: ""; position: absolute; top: 0; right: 0; width: 11px; height: 11px; background: var(--teal-bright); clip-path: polygon(0 0, 100% 0, 100% 100%); }
:root .nav { gap: 2px; }
:root .nav a { padding: 8px 12px; border-radius: var(--r-sm); background: none; font: 500 15px/1.4 var(--font-body); color: var(--ink-2); box-shadow: none; }
:root .nav a:hover { color: var(--ink); background: rgb(15 23 32 / .05); }
:root .nav a[aria-current] { color: var(--ink); background: rgb(15 23 32 / .07); font-weight: 600; }
.hdr-login { font: 500 15px/1.4 var(--font-body); color: var(--ink-2); }
.hdr-login:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
.menu { align-items: center; gap: 10px; padding: 0 14px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--paper); font: 600 15px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.menu::before { content: ""; width: 16px; height: 11px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.menu[aria-expanded="true"] { border-color: var(--ink); }
:root .skip:focus { top: 6px; left: 16px; padding: 6px 12px; border-radius: var(--r-sm); font: 600 15px/1.4 var(--font-body); color: var(--ink); background: var(--paper); box-shadow: var(--shadow-2); }

/* ------------------------------------------------------------------------------------------------ 4. buttons */
/* one family: 48 px, 10 px corners, a 1 px edge (painted as a border in forced colours), no lift, no glow */
.btn { min-height: 48px; padding: 0 22px; gap: 10px; border: 1px solid transparent; border-radius: var(--r-md); font: 600 16px/1.2 var(--font-body); letter-spacing: -0.005em; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover, .btn:active { transform: none; filter: none; }
.btn .ic { width: 18px; height: 18px; }
.btn:hover .ic { transform: translateX(2px); }
.btn-primary, .hero-btns .btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.btn-primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); filter: none; }
.btn-primary:active { background: #074d41; }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.btn-sm, :root .hdr .hdr-cta { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: var(--r-md); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ------------------------------------------------------------------------------------------------ 5. page head */
.crumbs ol { align-items: center; gap: 0; margin: var(--s3) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; margin: 0; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px 0 10px; border-top: 1.5px solid var(--line-2); border-right: 1.5px solid var(--line-2); transform: rotate(45deg); opacity: 1; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--ink-2); }
.page-head { max-width: 860px; padding: var(--s4) 0 var(--s5); }
/* kicker: a mono registry label behind a teal square, never a pill. The square hangs in the left padding, centred on
   the FIRST line: when the label wraps (phones), the text wraps beside it and the square never sits alone on a line */
:root .kicker { display: inline-block; position: relative; margin: 0 0 var(--s2); padding: 0 0 0 17px; background: none; border: 0; border-radius: 0; font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--ink-2); }
.kicker::before { content: ""; position: absolute; left: 0; top: calc(.75em - 3.5px); top: calc(.5lh - 3.5px); width: 7px; height: 7px; border-radius: 1.5px; background: var(--teal); }
.page-head h1 { text-wrap: balance; }
.lede, .page-head.hero .lede { max-width: 680px; font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-2); }
.lede p { margin: 0 0 var(--s15); }
.lede p:last-child { margin-bottom: 0; }
.meta { margin: var(--s3) 0 0; font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }
.hero-btns { gap: var(--s15); margin: var(--s4) 0 var(--s2); }
.hero-note { align-items: center; gap: 8px; margin: var(--s2) 0 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--muted); }
.hero-note .ic { width: 16px; height: 16px; margin-top: 0; color: var(--teal); }
/* hero badges: inline proof points with a drawn tick, never pills */
.badges { gap: 8px 24px; margin: var(--s3) 0 0; }
:root .badges li { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; font: 500 var(--fs-ui)/1.4 var(--font-body); color: var(--ink-2); }
.badges li::before { content: ""; flex: none; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* ------------------------------------------------------------------------------------------------ 6. layout + rhythm */
.content, .t-home .content, .t-pricing .content, .t-hub .content { max-width: none; }
body:not(.t-home):not(.t-pricing):not(.t-hub) .content { max-width: 860px; }
.content > * { margin-top: 0; margin-bottom: 0; }
.content > * + * { margin-top: var(--s8); }
.content > * > h2:first-child, .band > * > h2:first-child { margin-top: 0; }
.content > :is(.cards-sec, .trust-sec, .esr-sec, .esp, .linkgrid, .steps, .stats-sec, .coins-sec, .esf, .tbl, .faq, .ranking) > h2 + p { max-width: 720px; }
:where(.content) :where(.sec, .steps, .faq, .facts) h2:not(:first-child) { margin-top: var(--s6); }
.t-home .content > * + * { margin-top: var(--s12); }
.t-home .content > :is(section, div) > h2 { max-width: 760px; }
/* home: every block runs to the same right edge as the finder and the bands (the engine caps some at 1120 px, the
   wrap is 1200); the 860 px rule for 2- and 3-column home tables below is more specific and stays */
.t-home :is(.sec, .cards-sec, .faq, .ranking, .tbl) { max-width: none; }
/* reading measure: running text stops at about 80 characters, whatever the width of the column; tables, cards, plan
   tables and panels keep the full column */
body:not(.t-home) .content :is(p, dd, ul:not([class]), ol:not([class])) { max-width: 38em; }
/* tinted band, full width without horizontal scroll */
.band, .content > .band { margin-top: var(--s12); padding: var(--s10) 0; background: var(--mist); box-shadow: 0 0 0 100vmax var(--mist); clip-path: inset(0 -100vmax); }
.band + * { margin-top: var(--s12); }
.band > section > :last-child, .band .step-list { margin-bottom: 0; }
.band :is(.card, .trust > li, .stat, .coinstrip, .coins li, .rank, .esr a, .esr li > div, .esf-list, .fold) { background: var(--paper); } /* .table-wrap: section 9 */
main > .related { max-width: none; margin-top: var(--s10); }
.about-box { max-width: 860px; margin: var(--s8) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-size: var(--fs-ui); color: var(--muted); }
:root .about-h { margin: 0 0 4px; font: 600 var(--fs-ui)/1.5 var(--font-body); color: var(--ink); }
.about-box p { color: var(--muted); }

/* document pages with a contents list (≥ 1120 px): the reading column on the left, "On this page" as a sticky rail on
   the right, like a documentation site. The engine prints the toc between the page head and the content: the grid
   places it in its own column, rows 2 → end, without moving it in the DOM. */
@media (min-width: 1120px) {
  body:not(.t-home) main.wrap:has(> .toc) { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); column-gap: var(--s7); align-items: start; }
  body:not(.t-home) main.wrap:has(> .toc) > * { grid-column: 1; min-width: 0; }
  body:not(.t-home) main.wrap:has(> .toc) > .crumbs { grid-column: 1 / -1; }
  body:not(.t-home) main.wrap:has(> .toc) > .content { max-width: none; }
  /* the quick answer and the callouts line up with the tables under them; their text keeps the reading measure */
  body:not(.t-home) main.wrap:has(> .toc) > .content > :is(.quick-answer, .callout) { max-width: none; }
  :root body:not(.t-home) main.wrap > .toc { grid-column: 2; grid-row: 2 / span 5; position: sticky; z-index: 2; top: calc(var(--hdr-h) + 32px); max-height: calc(100vh - var(--hdr-h) - 64px); overflow-y: auto; margin: var(--s4) 0 0; padding: 0 0 0 var(--s3); border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; scrollbar-width: thin; }
  :root body:not(.t-home) main.wrap > .toc ol { columns: auto; margin: 0; padding: 0; list-style: none; }
  :root body:not(.t-home) main.wrap > .toc li { padding: 0; }
  :root body:not(.t-home) main.wrap > .toc a { display: block; padding: 6px 0; font-size: var(--fs-sm); line-height: 1.45; }
  /* the rail scrolls, so an outside focus ring would be clipped on its right and top edges: draw it inside */
  :root body:not(.t-home) main.wrap > .toc a:focus-visible { outline-offset: -2px; }
}

/* ------------------------------------------------------------------------------------------------ 7. home hero + destination finder */
/* DOM order is untouched. On the home page the finder must read as THE hero: the quick answer is written before it
   (answer first in the HTML), so .content becomes transparent to layout and the finder is drawn right under the page
   head (order), the answer right after it, then the other blocks in their written order. Nothing is hidden. */
.t-home main.wrap { display: flex; flex-direction: column; }
.t-home .content { display: contents; }
.t-home .page-head.hero { order: -2; }
.t-home .content > .esf { order: -1; margin-top: 0; }
.t-home .content > :first-child:not(.esf) { margin-top: var(--s10); }

/* one tinted band: page head + the finder's title, search and popular row. Each part paints the band (full width,
   no horizontal scroll); spacing is padding, so the parts join without a seam. The destination index sits below it. */
.t-home .page-head.hero,
.t-home .content > .esf > :where(h2, p:not([class]), .esf-q, .esf-pop) { background: var(--mist); box-shadow: 0 0 0 100vmax var(--mist); clip-path: inset(0 -100vmax); }
/* compact enough for the search field to sit inside the first 1440 × 900 screen */
.t-home .page-head.hero { max-width: none; width: 100%; margin: 0; padding: var(--s8) 0 0; text-align: center; }
.t-home .hero h1 { max-width: 19ch; margin: 0 auto var(--s3); font-size: var(--fs-hero); line-height: 1.03; letter-spacing: -0.038em; font-weight: 680; text-wrap: balance; }
.t-home .hero .lede { max-width: 680px; margin: 0 auto; font-size: 18px; line-height: 1.6; }
.t-home .hero .lede p { text-wrap: balance; }
.t-home .hero-btns { justify-content: center; margin: 28px 0 0; }
.t-home .hero-note { display: block; max-width: 600px; margin: var(--s15) auto 0; text-align: center; text-wrap: balance; }
.t-home .hero-note .ic { display: inline-block; margin: 0 6px 0 0; vertical-align: -.18em; }
.t-home .hero-note span { display: inline; }
.t-home .hero .badges { justify-content: center; }
.t-home .content > .esf > :where(h2, p:not([class]), .esf-q, .esf-pop) { margin-top: 0; margin-bottom: 0; }
.t-home .content > .esf > h2 { padding: var(--s5) 0 0; text-align: center; font-size: 20px; letter-spacing: -0.015em; max-width: none; }
.t-home .content > .esf > p:not([class]) { max-width: none; padding: var(--s1) 0 0; text-align: center; font-size: var(--fs-ui); color: var(--muted); }
/* 8 px of padding under the field: its focus halo is drawn whole inside the clipped band part */
.t-home .content > .esf > .esf-q { max-width: none; padding: var(--s3) 0 var(--s1); }
.t-home .content > .esf > .esf-q > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.t-home .content > .esf > .esf-pop { justify-content: center; padding: var(--s2) 0 var(--s10); }
.t-home .esf-pop-h { flex-basis: 100%; margin: 0 0 4px; text-align: center; }
.t-home .esf-pop ul { justify-content: center; max-width: 880px; }
.t-home .content > .esf:not(:has(> .esf-pop)) > .esf-q, .t-home .content > .esf.esf-typing > .esf-q { padding-bottom: var(--s10); }
.t-home .content > .esf > :is(.esf-pop, .esf-q) + .esf-h { margin-top: var(--s7); }

/* search field: one 64 px white field with a drawn magnifier and an Enter hint (the box is shown by esim.js) */
.esf-q { position: relative; max-width: 560px; margin: 0 0 var(--s2); }
.esf-q label { display: block; margin: 0 0 var(--s1); font: 500 var(--fs-ui)/1.5 var(--font-body); color: var(--ink-2); text-align: left; }
.esf-q input, .esf-q input:focus { display: block; width: 100%; height: 56px; padding: 0 20px 0 52px; font: 400 18px/1.2 var(--font-body); color: var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5561' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") no-repeat 18px 50% / 20px 20px; border: 1px solid var(--field); border-radius: var(--r-md); box-shadow: var(--shadow-1); transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; }
.esf-q input::placeholder { color: var(--muted); opacity: 1; }
.esf-q input::-webkit-search-cancel-button { cursor: pointer; }
.esf-q input:focus { outline: 2px solid transparent; border-color: var(--teal); box-shadow: var(--shadow-1), 0 0 0 1px var(--teal), 0 0 0 5px rgb(11 117 99 / .16); }
.t-home .esf-q input, .t-home .esf-q input:focus { height: 64px; padding: 0 112px 0 58px; font-size: 19px; background-position: 22px 50%; background-size: 22px 22px; border-radius: var(--r-lg); }
.t-home .esf-q input { box-shadow: var(--shadow-2); }
.t-home .esf-q input:focus { box-shadow: var(--shadow-2), 0 0 0 1px var(--teal), 0 0 0 5px rgb(11 117 99 / .16); }
/* keyboard hint (decorative, wide screens with a mouse only): Enter opens the first destination shown */
@media (min-width: 761px) and (hover: hover) {
  .esf-q::after { content: "Enter \21B5"; content: "Enter \21B5" / ""; position: absolute; right: 14px; bottom: 15px; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--porcelain); font: 500 12px/1.4 var(--font-mono); color: var(--muted); pointer-events: none; }
  .t-home .esf-q::after { right: calc(50% - 340px + 18px); bottom: 26px; }
}

/* popular destinations: flag, name and price in one quiet chip */
.esf-pop { align-items: center; gap: var(--s1); margin: 0 0 var(--s2); }
.esf-pop-h { margin: 0 4px 0 0; font: 500 var(--fs-sm)/1.5 var(--font-body); color: var(--muted); }
.esf-pop ul { gap: var(--s1); }
.esf-pop a { gap: 0; min-height: 38px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font-size: var(--fs-sm); line-height: 1.3; box-shadow: var(--shadow-1); }
.esf-pop a strong { font-weight: 600; color: var(--ink); }
.esf-pop a span { margin-left: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.esf-pop a:hover { border-color: var(--teal); color: var(--ink); }
.esf-pop a:hover span { color: var(--teal); }
.esf-pop img.flag { margin-right: 8px; }

/* the index: mono section labels on a hairline, regions as two cards, countries as a ruled four-column ledger in a
   contained scroll area (every row stays in the HTML and on screen by scrolling; nothing is collapsed) */
.esf-h { display: flex; align-items: center; gap: var(--s15); margin: var(--s4) 0 var(--s15); font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }
.esf-h::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.esf-list + .esf-h { margin-top: var(--s4); }
.esf-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 var(--s3); max-height: 34rem; margin: 0; padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior: auto;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), rgb(0 0 0 / .25)); mask-image: linear-gradient(#000 calc(100% - 48px), rgb(0 0 0 / .25)); }
.esf-typing .esf-list, .esf-list.esf-rl { -webkit-mask-image: none; mask-image: none; }
.esf-list li { border-bottom: 1px solid var(--line); }
.esf-list a, .esf-x { gap: var(--s15); min-height: 52px; margin: 0 -8px; padding: 8px; border-radius: var(--r-sm); color: var(--ink); }
.esf-list a:hover, .esf-list a:focus-visible { background: var(--mist); }
.esf-list a:focus-visible { outline-offset: -2px; }
.esf-list img.flag { width: 22px; height: 16px; }
.esf-n { font-size: var(--fs-ui); font-weight: 500; line-height: 1.3; color: var(--ink); }
.esf-n small { margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.esf-p { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.esf-list a:hover .esf-p { color: var(--teal); }
/* regions: two cards instead of ledger rows */
.esf-list.esf-rl { gap: var(--s15); max-height: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.esf-rl li { border: 0; }
.esf-rl a, .esf-rl .esf-x { min-height: 64px; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
.esf-rl a:hover { border-color: var(--teal); background: var(--paper); }
.esf-rl .esf-n { font-size: var(--fs-base); font-weight: 600; }
.esf-none { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-ui); }
.esf-note { margin: var(--s2) 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.band .esf-list { background: var(--paper); }

/* ------------------------------------------------------------------------------------------------ 8. quick answer, toc, panels */
/* the quick answer as a registry record: a mono header strip, the question, then the answer */
.quick-answer, .t-home .quick-answer { max-width: 860px; }
.quick-answer { padding: 0 var(--s4) var(--s4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
:root .qa-label { display: flex; align-items: center; gap: 10px; margin: 0 calc(-1 * var(--s4)) var(--s3); padding: 11px var(--s4); border-bottom: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; background: #fafbfb; font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--teal); }
.qa-label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 1.5px; background: var(--teal); }
.qa-q { margin: 0 0 var(--s15); font: 600 var(--fs-xl)/1.3 var(--font-head); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.qa-text { font-size: var(--fs-md); line-height: 1.65; }
.qa-text p { color: var(--ink-2); }
.qa-text p:last-child { margin-bottom: 0; }

/* contents (in the flow below 1120 px, a sticky rail above it: section 6) */
:root .toc { max-width: 860px; margin: 0 0 var(--s5); padding: var(--s2) var(--s3) var(--s2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-ui); }
:root .toc-h { margin: 0 0 var(--s1); font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.7em; columns: 2 260px; column-gap: var(--s5); }
.toc li { margin: 0; padding: 3px 0; break-inside: avoid; }
.toc li::marker { color: var(--muted); font: 400 12px var(--font-mono); }
.toc a { color: var(--ink-2); line-height: 1.45; text-decoration: none; }
.toc a:hover { color: var(--teal); text-decoration: underline; }

/* callouts: flat panels, the tone in the tint only */
.callout { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); font-size: var(--fs-base); }
.content > .callout { max-width: 860px; }
.callout.info { background: var(--mist); border-color: var(--line); }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.callout.warn .callout-h { color: var(--warn-ink); }
.callout.success { background: var(--teal-tint); border-color: var(--teal-line); }
.callout-h { margin: 0 0 4px; font-size: var(--fs-base); color: var(--ink); }
.callout p { color: var(--ink-2); }
.callout p:last-child { margin-bottom: 0; }

/* methodology + dated check lines */
.method { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); font-size: var(--fs-ui); }
:root .method-h { margin: 0 0 4px; font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--teal); }
.method p { color: var(--ink-2); }
.checked { gap: 8px; margin: var(--s15) 0 0; font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }
.checked > svg { width: 15px; height: 15px; }
.table-note { margin: var(--s15) 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.table-note p { color: var(--muted); }
.disclosure { margin: var(--s3) 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.prose > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------------------------------------ 9. tables */
/* white sheet, discreet head, airy hairline rows, a quiet hover; first column in ink */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); scrollbar-width: thin; }
/* scroll cue: a soft shadow on the edge where more columns wait (white covers that travel with the table hide it at
   each end; a table that fits shows none) */
.table-wrap, .band .table-wrap {
  background:
    linear-gradient(90deg, var(--paper) 30%, rgb(255 255 255 / 0)) left / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--paper) 30%, rgb(255 255 255 / 0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(15 23 32 / .16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(15 23 32 / .16), transparent) right / 12px 100% no-repeat scroll,
    var(--paper);
}
.table-wrap > table { margin: 0; }
.facts-table, .tbl table { font-size: var(--fs-ui); line-height: 1.5; }
.tbl :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl :is(th, td):first-child { padding-left: 20px; }
.tbl :is(th, td):last-child { padding-right: 20px; }
.tbl thead th { padding-top: 12px; padding-bottom: 12px; background: #fafbfb; font: 500 var(--fs-sm)/1.4 var(--font-body); color: var(--muted); border-bottom: 1px solid var(--line-2); vertical-align: bottom; white-space: nowrap; }
:root .tbl thead tr:last-child th { border-bottom: 1px solid var(--line-2); }
.tbl tbody th { font-weight: 600; color: var(--ink); }
.tbl:not(.esp) thead th { white-space: normal; } /* long heads wrap instead of forcing a sideways scroll */
.tbl:not(.esp) tbody th:first-child { min-width: 7.5em; } /* "United Kingdom" stays on one line */
.tbl td { color: var(--ink-2); }
.tbl :where(tbody tr:nth-child(even)), .tbl :where(tbody tr) { background: transparent; }
.tbl tbody tr:hover > * { background: #f8faf9; }
.tbl caption { caption-side: bottom; padding: 10px 20px; border-top: 1px solid var(--line); font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); text-align: left; }
.tbl > h3:first-child { margin-top: 0; }
/* home: a two- or three-column table keeps a reading width instead of stretching its last column over 1150 px */
.t-home .content > .tbl:not(.esp):not(:has(thead th:nth-child(4))) { max-width: 860px; }
/* /pricing/ price table (Destination · From · Lowest price per GB · Best-value plan · Plans): money and counts
   right-aligned in tabular figures, like the plan tables */
.t-pricing .sec .tbl:not(.esp) table:has(thead th:nth-child(5):last-child) :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(5)) { text-align: right; }
.tbl > .table-wrap { margin-top: var(--s3); }
.tbl > h2 + .table-wrap { margin-top: var(--s3); }
.yes { color: var(--yes); font-weight: 700; }
.no { color: var(--no); font-weight: 700; }

/* facts ("at a glance"): a two-column record on a white sheet */
.facts-table { border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); font-size: var(--fs-base); }
.facts-table :is(th, td) { padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.facts-table tr:last-child :is(th, td) { border-bottom: 0; }
.facts-table th { width: 34%; font-weight: 500; font-size: var(--fs-ui); color: var(--muted); }
.facts-table td { color: var(--ink); text-wrap: pretty; }
.facts > h2 + .facts-table, .facts > .facts-table { margin-top: var(--s3); margin-bottom: 0; }

/* payment networks table (paymentSteps) */
.pay-table { margin: var(--s2) 0 var(--s1); }
.pay-table table, .tiers table { font-size: var(--fs-ui); }
.pay-table :is(th, td), .tiers :is(th, td) { padding: 11px 16px; border-bottom: 1px solid var(--line); }
.pay-table thead th, .tiers thead th { background: #fafbfb; font: 500 var(--fs-sm)/1.4 var(--font-body); color: var(--muted); border-bottom: 1px solid var(--line-2); }
:root .pay-table thead tr:last-child th { border-bottom: 1px solid var(--line-2); }
.pay-table tbody th { gap: 10px; font-weight: 600; color: var(--ink); }
.pay-table td:nth-child(3) { text-align: right; }
.pay-table thead th:nth-child(3) { text-align: right; }
.pay-table td { color: var(--ink-2); }
.pay-help { margin: var(--s2) 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.tier-badge { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--teal-line); border-radius: var(--r-sm); background: var(--paper); color: var(--teal); font: 600 12px/1.45 var(--font-body); vertical-align: 1px; white-space: nowrap; }
.tiers tr.hl { background: var(--teal-tint); }
/* monochrome coin marks everywhere on light paper: an ink disc and white glyphs (no brand colours beside the teal) */
.coin-logo > circle:first-child { fill: var(--ink); }
.coin-logo > path { fill: #fff; }
.coin-logo > path[fill-opacity], .coin-logo > path[fill="#c9d3f7"] { fill-opacity: .65; }
.coin-logo > :is(g, ellipse) { stroke: #fff; }

/* ------------------------------------------------------------------------------------------------ 10. eSIM plans */
/* plan table (esimPlans): money right-aligned in tabular figures, the best price per GB marked by a tint and an
   outlined label, a full-width Buy button on the phone cards (section 17) */
.esp > .esp-f, .esp > h2 + p + .esp-f { margin-top: var(--s3); }
.esp-f { gap: var(--s15) var(--s4); margin: 0 0 var(--s2); }
.esp-fs { gap: 6px; }
.esp-fs legend { margin: 0 8px 0 0; padding: 7px 0; font: 500 var(--fs-sm)/1.5 var(--font-body); color: var(--muted); }
.esp-fs span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); font: 500 var(--fs-sm)/1 var(--font-body); color: var(--ink-2); font-variant-numeric: tabular-nums; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.esp-fs label:hover span { border-color: var(--ink-2); color: var(--ink); }
.esp-fs input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.esp-fs input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.esp .table-wrap { margin-top: 0; }
.esp > h2 + .table-wrap, .esp > h2 + p + .table-wrap { margin-top: var(--s3); }
.esp table { font-size: var(--fs-ui); }
.esp :is(th, td) { vertical-align: middle; }
.esp tbody :is(th, td) { padding-top: 13px; padding-bottom: 13px; }
.esp .esp-d { font-weight: 600; color: var(--ink); }
.esp .esp-t { color: var(--ink-2); }
.esp .esp-p, .esp .esp-g { text-align: right; }
.esp .esp-p strong { font-size: var(--fs-md); font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.esp .esp-g { color: var(--muted); }
/* the heads of the money columns follow their cells, whatever columns the block hides */
.esp table:has(td.esp-p:nth-child(2)) thead th:nth-child(2), .esp table:has(td.esp-g: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-g: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-g: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(5)) thead th:nth-child(5),
.esp table:has(td.esp-p:nth-child(6)) thead th:nth-child(6), .esp table:has(td.esp-g:nth-child(6)) thead th:nth-child(6) { text-align: right; }
.esp-sub { margin-top: 3px; font-size: var(--fs-xs); font-weight: 400; line-height: 1.4; color: var(--muted); }
.esp-reg a, .esp tbody th .esp-reg a { font-weight: 400; color: var(--muted); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.esp-reg a:hover { color: var(--teal); }
.esp-muted { color: var(--muted); font-size: var(--fs-sm); }
.esp-tag { margin: 0 4px 4px 0; padding: 1px 7px; border: 1px solid var(--line); border-radius: 5px; background: #f7f9f8; color: var(--ink-2); font: 500 12px/1.5 var(--font-body); }
.esp-tag.g5 { border-color: var(--teal-line); background: var(--teal-tint); color: var(--teal); }
.esp tbody th a { font-weight: 600; color: var(--ink); text-decoration: none; }
.esp tbody th a:hover { color: var(--teal); text-decoration: underline; }
.esp tbody th a img.flag { margin-right: 10px; }
.esp-mix tbody th[scope="row"] a:not(:has(img.flag)) { padding-left: 30px; } /* regions have no flag: names stay on one axis */
.esp td.esp-b { width: 1%; padding-left: 8px; }
.esp td.esp-b .btn { min-height: 38px; padding: 0 16px; font-size: var(--fs-sm); }
/* a column (or a stack of phone cards) of filled buttons is a wall of teal: at every width they are outlined, filled
   on hover and on the best row, so the one accent still marks the best plan */
.esp td.esp-b .btn-primary { background: var(--paper); border-color: var(--teal-line); color: var(--teal); box-shadow: none; }
.esp td.esp-b .btn-primary:hover, .esp tr.hl td.esp-b .btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.esp tr.hl td.esp-b .btn-primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); }
/* best price per GB: a teal tint across the row, a 2 px teal edge on its first cell */
.esp tr.hl > *, .esp tbody tr.hl:hover > * { background: var(--teal-tint); }
.esp tr.hl > :first-child { box-shadow: inset 2px 0 0 var(--teal); }
.esp .tier-badge { margin-left: 8px; }
.esp-none { margin: var(--s15) 0 0; padding: var(--s2) var(--s3); border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-ui); }
/* sortable heads (esim.js): a quiet drawn caret instead of the arrow glyphs */
.esp th button { gap: 6px; font: inherit; color: inherit; }
.esp th button:hover { color: var(--ink); }
.esp th button::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .35; font-size: 0; }
.esp th[aria-sort="ascending"] button::after { border-top: 0; border-bottom: 5px solid var(--teal); opacity: 1; }
.esp th[aria-sort="descending"] button::after { border-top-color: var(--teal); opacity: 1; }

/* ------------------------------------------------------------------------------------------------ 11. regions, cards, steps, trust, stats, coins */
/* regional eSIMs: equal cards, flags in a tight row, the price at the foot in teal */
.esr { gap: var(--s2); }
.esr-sec > h2 + .esr, .esr-sec > h2 + p + .esr { margin-top: var(--s3); }
.esr a, .esr li > div { gap: 4px; padding: var(--s3) var(--s3) 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); transition: border-color .15s ease, box-shadow .15s ease; }
.esr a:hover { border-color: var(--teal); box-shadow: var(--shadow-2); transform: none; color: var(--ink); }
.esr-flags { gap: 5px; margin-bottom: var(--s15); }
.esr-flags img.flag { width: 22px; height: 16px; }
.esr-n { font-size: 18px; letter-spacing: -0.012em; color: var(--ink); }
.esr-c { font-size: var(--fs-sm); color: var(--muted); }
.esr-p { padding-top: var(--s15); margin-top: auto; border-top: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--teal); }
/* no half-empty rows: two regions share the row, a single region keeps a card's width */
.esr:has(> :nth-child(2):last-child), .esf-list.esf-rl:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esr:has(> :only-child) { grid-template-columns: minmax(0, 420px); }

/* cards: equal heights per row (grid stretch), hairline edge, a quiet lift when the whole card links */
.cards { gap: var(--s2); }
.cards.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* no orphans in the reading column: 4 or 8 cards go two by two, a 7th card takes the whole last row */
body:not(.t-home) .cards.cols-3:is(:has(> :nth-child(4):last-child), :has(> :nth-child(8):last-child)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
body:not(.t-home) .cards.cols-3:has(> :nth-child(7):last-child) > :last-child { grid-column: 1 / -1; }
.cards-sec > h2 + .cards, .cards-sec > h2 + p + .cards { margin-top: var(--s3); }
.card { display: flex; flex-direction: column; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
.card-link:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: none; }
.card h3 { margin: 0 0 var(--s1); font-size: 18px; line-height: 1.35; }
.card h3 a { color: var(--ink); }
.card h3 a:hover, .card-link:hover h3 a { color: var(--teal); }
.card p { margin: 0 0 var(--s1); font-size: var(--fs-ui); line-height: 1.6; color: var(--ink-2); }
.card p:last-child { margin-bottom: 0; }
:root .card-tag { margin: 0 0 var(--s1); font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }
.card-ic, .stat-ic, .trust-ic, .step-ic { color: var(--teal); background: var(--teal-tint); border: 1px solid var(--teal-line); }
.card-ic { width: 40px; height: 40px; border-radius: var(--r-sm); margin-bottom: var(--s2); }
.card-ic .ic, .trust-ic .ic, .step-ic .ic { width: 20px; height: 20px; }

/* steps: a documented procedure. Mono step numbers (01, 02…) on a hairline spine; with icons, the icon takes the
   marker and the number becomes a small label above the step name */
.step-list { margin: var(--s3) 0 0; }
.steps > h2 + .step-list, .steps > h2 + p + .step-list { margin-top: var(--s4); }
.step-list > li { position: relative; margin: 0; padding: 0 0 var(--s4) 64px; }
.step-list > li:last-child { padding-bottom: 0; }
.step-list > li::before { content: counter(s, decimal-leading-zero); top: 0; left: 0; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line-2); color: var(--ink); font: 500 var(--fs-sm)/1 var(--font-mono); box-shadow: var(--shadow-1); }
.step-list > li::after { content: ""; position: absolute; left: 20px; top: 48px; bottom: 8px; width: 1px; background: var(--line-2); }
.step-list > li:last-child::after { content: none; }
.step-list > li.has-ic { padding-left: 64px; }
.step-ic { left: 0; top: 0; width: 40px; height: 40px; border-radius: var(--r-md); }
.step-list > li.has-ic::before { position: static; display: block; width: auto; height: auto; margin: 0 0 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--teal); font: 500 var(--fs-xs)/1.5 var(--font-mono); }
.step-name { margin: 8px 0 4px; font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.step-list > li.has-ic > .step-name { margin-top: 0; }
.step-list > li > p:not(.step-name), .step-list > li > :is(ul, ol) { margin: 0 0 var(--s1); font-size: var(--fs-base); color: var(--ink-2); }
.step-list > li > :last-child { margin-bottom: 0; }
.step-list > li > :not(.step-ic, .table-wrap) { max-width: 760px; }
/* a procedure on a tinted band (wide screens, full-width pages): its title on the left, the steps on the right */
@media (min-width: 1024px) {
  body:not(:has(main > .toc)) .band > .steps { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto 1fr; column-gap: var(--s8); align-content: start; }
  body:not(:has(main > .toc)) .band > .steps > h2 { grid-column: 1; grid-row: 1; margin: 0 0 var(--s2); }
  body:not(:has(main > .toc)) .band > .steps > h2 + p:not([class]) { grid-column: 1; grid-row: 2; margin: 0; color: var(--ink-2); }
  body:not(:has(main > .toc)) .band > .steps > .step-list { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  body:not(:has(main > .toc)) .band > .steps > :is(.pay-help, .table-note) { grid-column: 2; }
}

/* trust: a spec sheet. Hairline above each promise, icon tile, title, one line of proof */
.trust { gap: var(--s4) var(--s3); margin: var(--s3) 0 0; }
.trust > li { gap: var(--s2); padding: var(--s3) 0 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; box-shadow: none; }
.band .trust > li { background: none; }
.trust-ic { width: 36px; height: 36px; border-radius: var(--r-sm); }
.trust-t { margin: 4px 0 4px; font-size: var(--fs-md); line-height: 1.35; letter-spacing: -0.008em; color: var(--ink); }
.trust-d { font-size: var(--fs-ui); line-height: 1.55; color: var(--ink-2); }
.trust-sec.compact .trust { gap: var(--s15) var(--s4); }
.trust-sec.compact .trust > li { border: 0; padding: 0; }
.trust-sec.compact .trust-ic { width: 28px; height: 28px; background: none; border: 0; }
.trust-sec.compact .trust-t { font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); }

/* stats: big tabular figures in ink, the label under them */
.stats { gap: var(--s2); margin: var(--s3) 0 0; }
.stat { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
.stat-v { font: 650 34px/1.1 var(--font-head); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-l { margin: 8px 0 0; font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); }
.stat-n { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.stat-ic { width: 32px; height: 32px; border-radius: var(--r-sm); }

/* coins: equal cards in even rows (6 coins → 3 + 3 in the reading column, 2 + 2 + 2 on phones) */
.coins { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); grid-auto-rows: 1fr; gap: var(--s15); margin: var(--s3) 0 0; }
.coins li { padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
.coin-code { font: 600 var(--fs-ui)/1.3 var(--font-mono); color: var(--ink); }
.coin-name { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.coin-note { font-size: var(--fs-xs); color: var(--muted); }
.coinstrip { gap: var(--s15) var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
:root .cs-label { font: 500 var(--fs-sm)/1.5 var(--font-body); color: var(--muted); }
.coin-row li { font: 500 var(--fs-sm) var(--font-mono); color: var(--ink-2); }
.cs-note { font-size: var(--fs-sm); color: var(--muted); }

/* ------------------------------------------------------------------------------------------------ 12. ranking + comparison */
.rank-list { margin: var(--s3) 0 0; }
.rank { margin: 0 0 var(--s2); padding: var(--s3) var(--s4) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
.rank:last-child { margin-bottom: 0; }
/* our own entry: marked, never shouted. A teal edge and a faint tint */
.rank.self { border: 1px solid var(--teal-line); background: #f6fbf9; box-shadow: inset 3px 0 0 var(--teal), var(--shadow-1); }
.rank-head { gap: var(--s15) var(--s2); }
.rank-head h3 { font-size: 20px; letter-spacing: -0.015em; }
.rank-head h3 a { color: var(--ink); text-decoration: none; }
.rank-head h3 a:hover { color: var(--teal); text-decoration: underline; }
.rank-n { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--mist); color: var(--ink); font: 500 var(--fs-sm)/1 var(--font-mono); }
.rank.self .rank-n { background: var(--ink); color: #fff; }
.rank-badge { padding: 3px 10px; border: 1px solid var(--teal-line); border-radius: var(--r-sm); background: var(--paper); color: var(--teal); font-size: var(--fs-xs); line-height: 1.45; }
.rank-verdict { margin: var(--s15) 0 var(--s2); font-size: var(--fs-base); color: var(--ink-2); }
.rank-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin: 0 0 var(--s2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-ui); }
.rank-meta > div { padding: 10px 16px 10px 0; }
.rank-meta dt { display: block; font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }
.rank-meta dt::after { content: none; }
.rank-meta dd { display: block; font-weight: 500; color: var(--ink); }
.pc { gap: var(--s3); font-size: var(--fs-ui); }
:root .pc-h { margin: 0 0 4px; font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }
.pc ul { margin: 0; padding: 0; list-style: none; }
.pc li { position: relative; margin: 4px 0; padding-left: 20px; color: var(--ink-2); }
.pc li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 1.5px; background: var(--muted); }
.pc > div:first-child li::after { content: ""; position: absolute; left: 5.75px; top: calc(.62em - 3.75px); width: 1.5px; height: 9px; background: var(--teal); }
.pc > div:first-child li::before { background: var(--teal); }
/* comparison table: the brand row tinted with a teal edge (engine .hl) */
.tbl tr.hl, .tiers tr.hl { background: transparent; } /* the cells carry the tint: no darker seams between them */
.tbl tr.hl > *, .tbl tbody tr.hl:hover > * { background: var(--teal-tint); }
.tbl tr.hl th, .tbl tr.hl th:first-child { color: var(--ink); box-shadow: inset 2px 0 0 var(--teal); }
.cmp table { min-width: 640px; }
.cmp tbody td { text-wrap: pretty; }

/* ------------------------------------------------------------------------------------------------ 13. faq, folds, sources, definitions */
.faq > h2 { margin-bottom: var(--s3); }
.faq-item { padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0 0 var(--s1); font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; }
.faq-a { font-size: var(--fs-base); }
.faq-a p { color: var(--ink-2); }
.faq-a > :last-child { margin-bottom: 0; }
.t-home .faq-item, .t-home .content > .faq > p { max-width: none; }
/* wide FAQ (home, FAQ page): question and answer side by side, a ledger */
@media (min-width: 1024px) {
  :is(.t-home, .t-faq) .faq-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s6); }
  :is(.t-home, .t-faq) .faq-item h3 { margin: 0; padding-right: var(--s2); }
}

/* folds ("collapsed"): a white sheet with a drawn chevron */
.fold { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); overflow: clip; }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 56px; padding: 0 var(--s3); list-style: none; font: 600 var(--fs-md)/1.35 var(--font-head); color: var(--ink); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; }
.fold[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.fold > summary:hover { color: var(--teal); }
.fold > summary:focus-visible { outline-offset: -2px; }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > :not(summary) { margin: 0; padding: var(--s3); }
.fold > :not(summary) > h2:first-child { margin-top: 0; font-size: var(--fs-xl); }
.fold .facts-table { box-shadow: none; }

/* sources: a quiet numbered list behind a summary line */
.sources details { margin: 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); }
.sources summary { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; list-style: none; font: 500 var(--fs-ui)/1.4 var(--font-body); color: var(--ink-2); }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.sources details[open] summary::before { transform: rotate(45deg); }
.sources summary:hover { color: var(--ink); }
.sources ol { margin: var(--s1) 0 0; padding-left: 1.8em; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.sources li { margin: 6px 0; }
.sources li::marker { font: 400 12px var(--font-mono); }
.sources a { color: var(--ink-2); }
.sources a:hover { color: var(--teal); }
.src-u { font: 400 12px var(--font-mono); color: var(--muted); }

.defs dl { margin: var(--s2) 0 0; border-top: 1px solid var(--line); }
.def { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.def dt { color: var(--ink); font-size: var(--fs-md); }
.def dd { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-base); }
@media (min-width: 900px) { .def { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s4); } .def dd { margin: 0; } }

/* ------------------------------------------------------------------------------------------------ 14. cta, related, link grid */
/* the page's one dark element: a contained graphite panel (never a full band: it would merge with the footer) */
.cta { gap: var(--s3) var(--s5); padding: var(--s7) var(--s7); border: 1px solid var(--graphite-2); border-radius: var(--r-lg); background: var(--graphite-2); background-image: none; color: var(--on-dark); box-shadow: none; }
.cta > div:first-child { flex: 1 1 420px; min-width: 0; }
.content .cta .cta-h { margin: 0 0 var(--s1); font: 650 var(--fs-2xl)/1.18 var(--font-head); letter-spacing: -0.022em; color: #fff; }
.content .cta .cta-t p { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--on-dark-2); opacity: 1; }
.cta .cta-t a { color: var(--teal-bright); }
.cta-btns { gap: var(--s15); }
.cta .btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.cta .btn-primary:hover { background: var(--teal-hover); border-color: var(--teal-bright); color: #fff; } /* white on teal-hover 7.9:1; a lighter teal would drop under 4.5:1 */
.cta .btn-ghost { background: transparent; color: #fff; border-color: rgb(230 236 234 / .32); }
.cta .btn-ghost:hover { border-color: #fff; color: #fff; background: transparent; }
.cta :focus-visible { outline-color: var(--teal-bright); }

/* related pages: hairline-topped entries with an arrow on hover */
.related > h2 { margin: 0 0 var(--s3); font-size: var(--fs-xl); }
.related-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 var(--s4); margin: 0; }
.related-list li { position: relative; margin: 0; padding: var(--s2) var(--s3) var(--s3) 0; background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; transition: none; }
.related-list li:hover { border-color: var(--ink); }
:root .related-list a { font: 600 var(--fs-md)/1.35 var(--font-head); letter-spacing: -0.008em; color: var(--ink); text-decoration: none; }
:root .related-list a:hover { color: var(--teal); text-decoration: underline; }
.related-list li::after { content: "\2192"; content: "\2192" / ""; position: absolute; right: 0; top: var(--s2); color: var(--teal); opacity: 0; transition: opacity .15s ease; }
.related-list li:hover::after { opacity: 1; }
:root .related-list p { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }

/* link grid: a ruled index, the note (price) right-aligned in tabular figures */
.linkgrid > h2 + .lg, .linkgrid > h2 + p + .lg { margin-top: var(--s3); }
.lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 var(--s4); margin: 0; border-top: 1px solid var(--line); font-size: var(--fs-ui); }
.lg li { display: flex; align-items: center; justify-content: space-between; gap: var(--s15); min-height: 48px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
:root .lg a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 500; color: var(--ink); text-decoration: none; }
:root .lg a:hover { color: var(--teal); text-decoration: underline; }
.lg a img.flag { margin-right: 10px; }
.lg-note { flex: none; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
:root .lg-group { margin: var(--s4) 0 var(--s15); font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--muted); }

/* product screenshots, if any */
.shot-link { border-radius: var(--r-md); border-color: var(--line); box-shadow: var(--shadow-2); }
:root .shot-tag { padding: 1px 7px; border-radius: 5px; background: var(--mist-2); font: 500 12px/1.5 var(--font-mono); }
/* engine panels not used by the eSIM pages, kept in the family */
.hero-price, .buy-card { border-color: var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-2); }
.hero-price::before, .buy-card::before { background: var(--teal); height: 3px; }
.hp-from strong { color: var(--ink); font-weight: 650; }
.plan { border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
.plan:hover { transform: none; }
.plan.popular { border: 1px solid var(--teal); box-shadow: inset 0 3px 0 var(--teal), var(--shadow-2); transform: none; }
.plan-badge { background: var(--teal); border-radius: var(--r-sm); }
.plan-features li::before { color: var(--teal); }
.code { border-radius: var(--r-md); border-color: var(--graphite-3); background: var(--graphite-2); }

/* ------------------------------------------------------------------------------------------------ 15. footer + sticky buy bar */
.ftr { margin-top: var(--s12); padding: var(--s10) 0 var(--s4); background: var(--graphite); border-top: 0; color: var(--on-dark-2); font-size: var(--fs-ui); }
.ftr .wrap:first-child { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
/* brand row: logo + description on the left, support on the right */
.ftr .f-brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6); row-gap: var(--s15); align-items: start; padding-bottom: var(--s5); border-bottom: 1px solid var(--line-dark); }
.ftr .f-logo { grid-column: 1; margin: 0; gap: 11px; font: 650 19px/1 var(--font-head); letter-spacing: -0.02em; color: #fff; }
.ftr .f-logo .logo-mark { background: var(--on-dark); color: var(--graphite); }
.ftr .f-desc { grid-column: 1; max-width: 62ch; margin: 0; font-size: var(--fs-ui); line-height: 1.6; color: var(--on-dark-2); }
.ftr .f-contact { grid-column: 2; grid-row: 1 / span 2; align-self: start; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
:root .ftr :is(.f-h, .f-contact-h) { margin: 0 0 var(--s2); font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--on-dark-2); }
:root .ftr .f-contact-h { margin-bottom: 2px; flex-basis: auto; } /* :root: above the shared label rule just before */
.ftr .f-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.ftr .f-col ul { margin: 0; }
.ftr .f-col li { margin: 0 0 10px; }
.ftr a, .ftr .f-col a, .ftr .f-contact a { color: var(--on-dark); opacity: 1; font-size: var(--fs-ui); line-height: 1.45; text-decoration: none; }
.ftr a:hover, .ftr .f-col a:hover, .ftr .f-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgb(255 255 255 / .5); }
.ftr .f-contact a .ic { color: var(--teal-bright); }
.ftr :focus-visible { outline-color: var(--teal-bright); }
/* row rules drawn inside the wrap's gutters, on the content edges (a border would run under the 24 px padding) */
.ftr .f-pay, .ftr .f-bottom { position: relative; border-top: 0; }
.ftr .f-pay::before, .ftr .f-bottom::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--line-dark); }
.ftr .f-pay { gap: var(--s15) var(--s4); margin-top: var(--s7); padding-top: var(--s3); }
:root .ftr .f-pay-h { margin: 0; font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--on-dark-2); }
.ftr .coins-mini { gap: 8px var(--s3); margin: 0; }
:root .ftr .coins-mini li { gap: 8px; padding: 0; background: transparent; border: 0; border-radius: 0; font: 500 var(--fs-sm)/1 var(--font-mono); color: var(--on-dark); }
/* monochrome payment marks: one discreet disc and light glyphs for every coin */
.ftr .coins-mini .coin-logo { width: 20px; height: 20px; }
.ftr .coin-logo > circle:first-child { fill: rgb(230 236 234 / .14); }
.ftr .coin-logo > path { fill: var(--on-dark); }
.ftr .coin-logo > :is(g, ellipse) { stroke: var(--on-dark); }
.ftr .f-pay-n { font-size: var(--fs-sm); color: var(--on-dark-2); opacity: 1; }
.ftr .f-pay + .f-bottom { margin-top: var(--s3); }
.ftr .f-bottom { padding-top: var(--s3); font-size: var(--fs-sm); color: var(--on-dark-2); }
.ftr .f-bottom a, .ftr .f-legal a { font-size: var(--fs-sm); color: var(--on-dark-2); }
.ftr .f-legal { gap: 4px var(--s3); }

/* sticky buy bar (phones, engine): porcelain glass, the note in two lines beside a full button */
.sticky-cta { background: color-mix(in srgb, var(--porcelain) 94%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgb(15 23 32 / .28); }
.sticky-cta .btn { min-height: 48px; }
.sc-note { color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-note strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------------------------------------ 16. tablet */
@media (max-width: 1119px) {
  .ftr .f-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the menu takes over below 1024 px: logo + five links + Log in + button no longer fit one row with these gaps.
   The engine collapses the nav only up to 860 px, so its collapse rules are carried here from 861 to 1023. */
@media (max-width: 1023px) {
  .hdr-in { gap: var(--s15); }
  .menu { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 4px 24px 12px; background: var(--porcelain); border-bottom: 1px solid var(--line-2); box-shadow: 0 18px 30px -24px rgb(15 23 32 / .45); }
  .nav.open { display: flex; }
  :root .nav { gap: 0; }
  :root .nav a { display: flex; align-items: center; min-height: 48px; padding: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; font-size: 16px; }
  :root .nav a:last-child { border-bottom: 0; }
  :root .nav a:hover { background: none; color: var(--teal); }
  :root .nav a[aria-current] { background: none; color: var(--teal); }
  .cta { padding: var(--s5); }
}

/* ------------------------------------------------------------------------------------------------ 17. phones */
@media (max-width: 760px) {
  :root { --hdr-h: 60px; }
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); } /* focus never lands under the buy bar */
  .wrap { padding: 0 16px; }
  .hdr-in { min-height: 60px; }
  .nav { padding: 4px 16px 12px; }
  .logo { font-size: 18px; }
  h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.026em; }
  h2 { font-size: 25px; line-height: 1.22; letter-spacing: -0.018em; }
  h3 { font-size: 18px; }
  .content { font-size: 16px; }
  .page-head { padding: var(--s3) 0 var(--s4); }
  .lede, .page-head.hero .lede { font-size: 17px; }
  .content > * + * { margin-top: var(--s6); }
  .t-home .content > * + *, .band, .band + * { margin-top: var(--s8); }
  .band, .content > .band { padding: var(--s7) 0; }
  main > .related { margin-top: var(--s8); }

  /* text floor 15 px (the engine's list + this theme's mono labels and small figures) */
  :root :is(.topbar, .kicker, .meta, .qa-label, .toc-h, .checked, .esf-h, .esf-pop-h, .esf-pop a, .esf-n small, .esf-p, .esf-note,
    .esp-fs legend, .esp-fs span, .esp-sub, .esp-muted, .esp-tag, .tier-badge, .card-tag, .method-h, .rank-meta dt, .rank-badge, .pc-h,
    .lg-note, .lg-group, .sources ol, .src-u, .table-note, .pay-help, .disclosure, .stat-n, .coin-note, .coin-row li, .cs-label, .cs-note,
    .related-list p, .f-h, .f-contact-h, .f-pay-h, .f-bottom, .f-bottom a, .f-legal a, .coins-mini li, .sc-note, .tbl caption, .shot-tag, .esr-c) { font-size: 15px; }
  :root :is(.table-wrap, .facts-table) :is(th, td, caption) { font-size: 15px; }
  :root :is(.kicker, .qa-label, .tier-badge, .f-pay-h) { letter-spacing: 0; }
  :root .ftr :is(.f-h, .f-contact-h, .f-pay-h), :root .ftr .coins-mini li { font-size: 15px; }
  /* touch targets */
  :root .rank-n { font-size: 15px; }
  .sources summary { min-height: 44px; }
  :root .skip:focus { padding: 10px 14px; }
  .topbar .wrap::before { margin-right: 8px; }

  /* home hero */
  .t-home .page-head.hero { padding-top: var(--s5); }
  .t-home .hero h1 { margin-bottom: var(--s2); font-size: 35px; line-height: 1.07; letter-spacing: -0.03em; }
  .t-home .hero .lede { font-size: 16px; line-height: 1.55; }
  /* the two hero buttons side by side (two lines each if needed): the whole search field fits in the first screen */
  .t-home .hero-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s1); margin-top: var(--s3); }
  .t-home .hero-btns .btn { min-height: 52px; padding: 0 12px; font-size: 15px; line-height: 1.25; text-align: center; white-space: normal; }
  .t-home .content > .esf > .esf-q { padding-top: var(--s3); }
  .t-home .content > :first-child:not(.esf) { margin-top: var(--s8); } /* the quick answer, drawn after the finder */
  .t-home .esf-q input, .t-home .esf-q input:focus { height: 56px; padding-right: 16px; padding-left: 50px; font-size: 17px; background-position: 17px 50%; background-size: 20px 20px; border-radius: var(--r-md); }
  .esf-q input, .esf-q input:focus { font-size: 17px; }
  .t-home .content > .esf > .esf-pop { padding-bottom: var(--s7); }
  .t-home .content > .esf > :is(.esf-pop, .esf-q) + .esf-h { margin-top: var(--s5); }
  .esf-pop-h { flex-basis: 100%; margin: 0; }
  .t-home .esf-pop-h { text-align: center; }
  /* popular destinations: a tidy two-column grid of equal chips instead of a ragged centred cloud */
  .esf-pop ul, .t-home .esf-pop ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); width: 100%; max-width: none; }
  .esf-pop a { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 6px 10px; }
  .esf-pop a strong { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
  .esf-pop a span { margin-left: 6px; }
  .esf-list { max-height: min(30rem, 66vh); padding: 4px var(--s2); }
  .esf-list a, .esf-x { min-height: 56px; }
  .esf-list.esf-rl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); padding: 0; }
  .esf-rl a, .esf-rl .esf-x { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 12px; }
  .esf-rl .esf-n { flex-basis: 100%; }

  /* quick answer, toc, panels */
  .quick-answer { padding: 0 var(--s2) var(--s3); }
  :root .qa-label { margin: 0 calc(-1 * var(--s2)) var(--s2); padding: 10px var(--s2); }
  .qa-q { font-size: 19px; }
  .qa-text { font-size: 16px; }
  /* "On this page": one row of chips that scrolls sideways (every link stays in the HTML and is reached by swiping or
     tabbing), so the quick answer is no longer two screens down */
  :root .toc { padding: var(--s15) 0 var(--s15) var(--s2); }
  :root .toc ol { display: flex; gap: var(--s1); columns: auto; margin: 0; padding: 0 var(--s2) 4px 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
  :root .toc li { flex: none; margin: 0; padding: 0; }
  :root .toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--porcelain); white-space: nowrap; }
  :root .toc a:hover { border-color: var(--teal); }
  :root .toc a:focus-visible { outline-offset: -2px; }
  .callout, .method { padding: var(--s2); }

  /* tables: an edge-to-edge scroll sheet, airy cells */
  .tbl :is(th, td) { padding: 12px 12px; }
  .tbl :is(th, td):first-child { padding-left: 14px; }
  .tbl :is(th, td):last-child { padding-right: 14px; }
  .tbl caption { padding: 10px 14px; }
  /* wide tables: the first column stays pinned while the others scroll, every value column keeps a readable width */
  .tbl:not(.esp) :is(thead, tbody) tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
  .tbl:not(.esp) thead tr > :first-child { background: #fafbfb; }
  .tbl:not(.esp) tr.hl > :first-child { background: var(--teal-tint); box-shadow: inset 2px 0 0 var(--teal), 1px 0 0 var(--line); }
  .tbl:not(.esp) tbody td { min-width: 11em; }
  .tbl:not(.esp) tbody th:first-child { min-width: 9.6em; } /* padding included: "United Kingdom" stays on one line */
  /* facts: a stacked record, each label above its value, so long values get the full width */
  .facts-table, .facts-table tbody, .facts-table tr { display: block; }
  .facts-table :is(th, td) { display: block; width: auto; }
  .facts-table th { width: auto; padding: 12px 14px 2px; border-bottom: 0; }
  .facts-table td { padding: 0 14px 12px; }

  /* steps, trust, ranking */
  .step-list > li, .step-list > li.has-ic { padding-left: 56px; }
  .trust { gap: var(--s3); }
  .rank { padding: var(--s2) var(--s2) var(--s3); }
  .rank-head h3 { font-size: 18px; }
  .rank-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rank-meta > div:first-child { grid-column: 1 / -1; } /* "Best for", a sentence: the full card width */

  /* coins: two by two */
  .coins { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* faq */
  .faq-item { padding: var(--s2) 0 var(--s3); }
  .faq-item h3 { font-size: 17px; }

  /* cta: stacked, full-width buttons */
  .cta { padding: var(--s4) var(--s3); border-radius: var(--r-md); }
  .content .cta .cta-h { font-size: 24px; }
  .cta-btns, .cta-btns .btn { width: 100%; }

  /* related + link grid: touch rows */
  .related-list li { padding: var(--s15) var(--s3) var(--s2) 0; }
  .lg li { min-height: 52px; }
  :root .lg a { min-height: 44px; }

  /* footer */
  .ftr { padding-top: var(--s7); }
  .ftr .f-brand { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s4); }
  .ftr .f-contact { grid-column: 1; grid-row: auto; margin-top: var(--s1); }
  .ftr .f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
  .ftr .f-col li { margin: 0; }
  .ftr .f-pay { margin-top: var(--s5); }
  .ftr .f-bottom { flex-direction: column; gap: var(--s1); }
  .ftr .f-pay::before, .ftr .f-bottom::before { left: 16px; right: 16px; }
  .sc-note { max-width: 44%; }
  :root .hdr .hdr-cta { min-height: 44px; }
  .esp td.esp-b .btn { min-height: 44px; }
  .esp-fs span { min-height: 44px; }
}

/* plan table on phones (< 641 px): one card per plan. Data + validity on the left, price + price per GB on the right,
   the network line, then a full-width Buy button; the best price per GB keeps its teal edge */
@media (max-width: 640px) {
  .esp-f { gap: var(--s15); }
  .esp-fs { gap: 6px; }
  .esp-fs legend { flex-basis: 100%; float: none; padding: 0 0 2px; }
  .esp-fs span { min-height: 44px; padding: 6px 14px; white-space: normal; line-height: 1.3; } /* a long label ("Unlimited (fair use: …)") wraps inside its chip instead of widening the page */
  .esp-fs label { max-width: 100%; }
  :root .esp .table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .esp caption { padding: 0 2px var(--s1); border-top: 0; font: 400 15px/1.5 var(--font-mono); }
  .esp.js thead th button { min-height: 44px; padding: 0 12px; }
  .esp.js thead th { min-height: 44px; display: inline-flex; align-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); font-size: 15px; }
  .esp.js thead tr { gap: 8px; padding: 0 0 var(--s15); }
  .esp tbody tr { gap: 2px var(--s15); margin: 0 0 var(--s15); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
  .esp tbody tr:hover > * { background: transparent; }
  .esp tbody tr.hl { border-color: var(--teal-line); background: var(--teal-tint); box-shadow: inset 3px 0 0 var(--teal), var(--shadow-1); }
  .esp tr.hl > *, .esp tbody tr.hl:hover > * { background: transparent; }
  :root .esp tr.hl > :first-child, :root .esp tr.hl th:first-child { box-shadow: none; }
  .esp tbody :is(th, td) { padding: 0; }
  :root .esp tbody :is(th, td) { padding-left: 0; padding-right: 0; }
  :root .esp .esp-d { font-size: 18px; } /* :root: above the engine's 15 px cell floor */
  .esp .esp-p strong { font-size: 19px; }
  .esp .esp-g { font-size: 15px; }
  .esp .esp-n { margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid var(--line); }
  .esp td.esp-b { width: auto; margin-top: var(--s15); }
  .esp td.esp-b .btn { min-height: 48px; font-size: 16px; }
  .esp .tier-badge { display: inline-block; margin: 4px 0 0; }
  /* the regional-plan link in a card: a 44 px touch target; the negative margin keeps the card's height */
  .esp .esp-reg a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
  .esp-mix tbody th[scope="row"] a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; }
}

/* small phones: the full brand name and a square mark always fit */
@media (max-width: 400px) {
  .hdr-in { gap: var(--s1); }
  .ftr .f-cols { column-gap: var(--s15); }
  .t-home .hero h1 { font-size: 34px; }
}

/* ------------------------------------------------------------------------------------------------ 18. forced colours + reduced motion */
@media (forced-colors: active) {
  /* states drawn with a background or a shadow, which forced colours drop */
  .esp-fs input:checked + span { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  :root .nav a[aria-current] { text-decoration: underline; text-underline-offset: .3em; }
  .tbl tr.hl > :first-child, .esp tr.hl > :first-child { border-left: 3px solid CanvasText; }
  .esp tbody tr.hl, .rank.self, .plan.popular { outline: 2px solid CanvasText; outline-offset: -2px; }
  .logo-mark { border: 1px solid CanvasText; }
  .logo-mark::after, .topbar .wrap::before, .kicker::before, .qa-label::before { forced-color-adjust: none; background: CanvasText; }
  .esf-q input:focus { outline: 2px solid Highlight; outline-offset: 2px; }
  .esf-list { -webkit-mask-image: none; mask-image: none; }
  .cta, .quick-answer, .card, .stat, .fold, .table-wrap, .facts-table, .esr a, .esf-list, .esf-rl a { border: 1px solid CanvasText; }
  .step-list > li::after, .esf-h::after { background: CanvasText; }
  .badges li::before { border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover .ic { transform: none; }
  .fold > summary::after, .sources summary::before { transition: none; }
}