/* 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: linear-gradient(135deg, var(--accent), var(--accent-2)); 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); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 6px 20px -8px var(--accent); }
.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: 0 14px 40px -22px var(--accent); }
.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: linear-gradient(135deg, var(--accent), var(--accent-2)); 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); }
.btn-primary:hover { box-shadow: 0 12px 28px -12px var(--accent); filter: saturate(1.08) brightness(1.04); }
.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), 0 6px 14px -8px var(--accent); }
@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: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.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: 0 20px 44px -24px var(--accent); }
@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: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.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); }

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

/* =====================================================================================================================
   BuyDomainsCrypto — design system. Appended after engine/assets/site.css (same file), so it can override anything.
   Identity: light and energetic, money green + black, Inter (grotesk) for headings AND body, direct and numeric.

   Rules this file follows
   - Accent green (#0a7d3e, --accent) only on actions, prices and links. Black (--ink) for headings, list and step
     numbers (one counter style: a white disc with an ink ring) and the single dark band of a page (the final call to action).
   - Every fixed or sticky layer reserves its room: html scroll-padding keeps keyboard focus clear of the sticky header,
     the sticky price-table header (pricing) and the phone buy bar (WCAG 2.4.11).
   - No gradients used as decoration, no coloured glows, no uppercase labels (sentence case + weight/size contrast).
   - 8 px spacing grid (--s-*), one type scale (--fs-*), three radii (--r-sm/md/lg), two shadows (--shadow-sm/md).
   - Never hide indexable text: folding only through the engine's <details> ("collapsed"); the only display:none in this
     file target text-free decorative icons, the JS filter input of the home price table, and the header links behind
     the Menu button from 861 to 1119 px (the engine's own phone pattern, extended). The empty corner cell of the
     stacked comparison tables (phones) is visually hidden, not removed, so screen readers keep 3 column headers.
   Colour tokens printed inline by the engine (--accent, --surface, --border, --radius, --muted…) live in site.json "theme".

   Contents: 1 tokens · 2 base · 3 top bar + header · 4 buttons · 5 page head · 6 home · 7 domain search · 8 panels
   (quick answer, callout, method, toc, about) · 9 tables · 10 steps · 11 cards, trust, stats, ranking, link grid, coins
   · 12 FAQ, folds, sources · 13 call to action · 14 related · 15 footer · 16 long-form layouts · 17 phones · forced colours
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- 1. tokens */
:root {
  /* colour (site.json theme: accent #0a7d3e, surface #f5f9f6, surface2 #e9f2ec, border #e3ebe5, muted #4a5a50) */
  --ink: #0b0f0c;                 /* headings, dark band */
  --ink-2: #27322b;               /* body copy */
  --accent-hover: #065c2c;        /* links and buttons on hover (= theme accent2) */
  --cash: #22c55e;                /* bright green: small highlights on black only, never as text on white */
  --cash-soft: #edf7f0;           /* highlighted table row (brand row) */
  --line: var(--border);          /* hairline */
  --line-strong: #c9d6cd;         /* ghost buttons, chips, decorative rules */
  --field: #7d8c82;               /* text-entry borders: 3.5:1 on white (WCAG 1.4.11 non-text contrast) */

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

  /* spacing: 8 px grid */
  --s-half: 4px; --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-7: 56px;
  --s-8: 64px; --s-10: 80px; --s-12: 96px;
  --section: var(--s-12);         /* vertical rhythm between home sections (64 px on phones) */

  /* radii: small controls / cards, buttons, tables / large panels */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;

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

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

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

/* ---------------------------------------------------------------------------------------------------- 2. base */
/* focus and anchors land below the sticky header (+ the sticky price-table header on wide pricing screens) */
html { scroll-padding-top: calc(var(--hdr-h) + 16px); }
@media (min-width: 1000px) { html:has(body.t-pricing) { scroll-padding-top: calc(var(--hdr-h) + 44px + 16px); } }
:root :is(h2, h3), .content h2 { scroll-margin-top: var(--s-1); } /* adds to scroll-padding: 65 + 16 + 8 px */
body { color: var(--ink-2); font-size: var(--fs-17); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; line-height: var(--lh-head); }
h1 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); font-weight: 750; letter-spacing: -0.022em; margin: 2.2em 0 .5em; }
h2::before { content: none; }
h3 { font-size: var(--fs-20); line-height: 1.3; margin: 1.6em 0 .4em; }
p, li, .facts-table :is(th, td) { text-wrap: pretty; } /* no one-word last line in prose or key-fact labels/values */
/* wide screens: key facts balance their 2 lines instead (pretty broke "photo-/ID", "at-/cost", "top-/up" there);
   the question of the answer block and the sources label never end on a lone word ("TRC-20?", "(14)") */
@media (min-width: 761px) { .facts-table :is(th, td) { text-wrap: balance; } }
.qa-q, .sources summary { text-wrap: balance; }
strong { color: var(--ink); font-weight: 650; }

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

/* focus: one visible ring everywhere (3 px green, offset); white on the black bands */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* a sideways-scrolling table without a link inside is a Tab stop of its own (keyboard-focusable scroller): same ring */
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.topbar :focus-visible, .cta :focus-visible, .cta .btn:focus-visible { outline-color: #fff; }

/* lists inside prose: quiet ink markers (green stays on actions and prices), even rhythm. Only unclassed lists, so
   component lists (steps, ranking, related…) keep their own paragraph margins. */
.content :is(ul, ol):not([class]) > li::marker { color: var(--muted); }
.content ol:not([class]) > li::marker { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.content :is(ul, ol):not([class]) > li { margin: .4em 0; }
.content :is(ul, ol):not([class]) > li > p { margin: 0 0 .35em; }
.content :is(ul, ol):not([class]) > li > p:last-child { margin-bottom: 0; }
/* one list split in two by the source (/abuse/): the seam matches the gap between items */
.content ul:not([class]):has(+ ul:not([class])) { margin-bottom: 0; }

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

/* -------------------------------------------------------------------------------------------- 3. top bar + header */
.topbar { background: var(--ink); color: rgb(255 255 255 / .8); font-size: var(--fs-13); letter-spacing: 0; padding: 8px 0; }
.topbar strong { color: var(--cash); filter: none; font-weight: 650; }

.hdr { background: rgb(255 255 255 / .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); box-shadow: none; }
.hdr-in { min-height: 64px; gap: var(--s-3); }
.logo { gap: 10px; color: var(--ink); font: 800 1.1875rem/1 var(--font-head); letter-spacing: -0.025em; }
.logo-mark { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--ink); color: var(--cash); box-shadow: none; font-size: .9375rem; font-weight: 800; }
.nav { gap: 2px; margin-left: var(--s-1); }
.nav a { padding: 8px 12px; border-radius: var(--r-sm); color: #3b4a40; font-size: var(--fs-15); font-weight: 550; transition: color .15s ease, background-color .15s ease; }
.nav a:hover { color: var(--ink); background: var(--surface); }
.nav a[aria-current] { color: var(--ink); background: none; font-weight: 650; text-decoration: underline 2px var(--accent); text-underline-offset: 10px; }
.hdr-login { padding: 8px 4px; color: var(--ink); font-size: var(--fs-15); font-weight: 600; }
.hdr-login:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.hdr .hdr-cta { min-height: var(--h-md); padding: 0 18px; font-size: var(--fs-15); }
.menu { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: #fff; color: var(--ink); font-weight: 600; font-size: var(--fs-15); cursor: pointer; }
.menu:hover { border-color: var(--ink); }
/* 861-1119 px: logo + 6 links + Log in + the button need about 1,120 px (the wrap's content box, not the viewport),
   so the links go behind Menu there too (the engine folds them at 860 px); the button stays. Below that width the
   labels would wrap ("Pay / with / crypto") and the sticky header would outgrow --hdr-h. */
@media (min-width: 861px) and (max-width: 1119px) {
  .menu { display: inline-block; margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
}
@media (max-width: 1119px) {
  /* full-bleed panel, link text on the 16 px page edge; the current page keeps a non-colour cue (bar + weight) */
  .nav { top: 64px; margin-left: 0; padding: 4px 16px 16px; box-shadow: var(--shadow-md); }
  .nav a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line); text-decoration: none; }
  .nav a:hover { background: none; color: var(--accent); text-decoration: none; }
  .nav a[aria-current] { padding-left: 12px; background: none; color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: inset 3px 0 0 var(--accent); }
}
/* WCAG 1.4.12 (user text spacing): the full bar may need more than the wrap; the button then drops to a second row
   instead of pushing the page sideways. With normal spacing everything keeps one 64 px row. */
@media (min-width: 1120px) { .hdr-in { flex-wrap: wrap; row-gap: 8px; } .hdr-in > .hdr-cta { margin-left: auto; } }
/* phones: the brand name wraps to 2 lines under user text spacing instead of being cut by the engine's ellipsis */
@media (max-width: 860px) { .logo-txt { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; } }

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

/* -------------------------------------------------------------------------------------------------- 5. page head */
.crumbs ol { margin-top: var(--s-3); align-items: center; font-size: var(--fs-14); color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--ink-2); }
.page-head { padding: var(--s-4) 0 var(--s-1); max-width: 860px; }
.page-head h1 { margin-bottom: var(--s-2); }
:root .kicker { display: block; margin: 0 0 var(--s-2); padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent); font: 650 var(--fs-15)/1.4 var(--font-body); }
.lede { max-width: 64ch; color: #3a4a40; font-size: 1.1875rem; line-height: 1.55; }
.lede p:last-child { margin-bottom: 0; }
.meta { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
/* hero proof points (any page with hero badges): inline checks, never pills */
.badges { gap: 8px 28px; margin: var(--s-3) 0 0; }
.badges li { position: relative; margin: 0; padding: 0 0 0 24px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: var(--fs-15); font-weight: 500; }
.badges li::before { content: ""; position: absolute; left: 0; top: .22em; width: 16px; height: 16px; background: var(--accent); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.badges li strong { color: var(--ink); font-weight: 650; }
.hero-note { color: var(--muted); }
.hero-note .ic { color: var(--muted); }

/* ------------------------------------------------------------------------------------------------------- 6. home */
/* DOM order is untouched (the quick answer stays the first block for GEO). The hero is rebuilt visually:
   .content becomes transparent to layout, the page head + the domain search form ONE centered hero band, and with
   subgrid the hero badges sit under the search while the page head still wraps the whole hero (site.js watches it
   to show the phone buy bar only once the hero has scrolled away). */
.t-home main.wrap { display: flex; flex-direction: column; }
.t-home main.wrap > .content { display: contents; }
.t-home .page-head.hero { order: -2; }
.t-home .content > .dsearch { order: -1; }
.t-home :is(.page-head.hero, .content > .dsearch) { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
.t-home .page-head.hero { width: 100%; max-width: none; margin: 0; padding: var(--s-10) 0 0; text-align: center; }
.t-home .page-head.hero h1 { max-width: 13.6em; margin: 0 auto; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: var(--lh-tight); text-wrap: wrap; }
.t-home .page-head .lede { max-width: 820px; margin: var(--s-3) auto 0; font-size: var(--fs-18); color: #3a4a40; text-wrap: balance; }
.t-home .page-head .lede p { text-wrap: balance; }
.t-home .page-head .lede strong { color: var(--ink); font-weight: 700; }
.t-home .page-head .badges { justify-content: center; margin: var(--s-3) 0 0; }
.t-home .content > .dsearch { position: relative; z-index: 1; width: 100%; margin: 0; padding: var(--s-5) 0 var(--s-8); text-align: center; }
@supports (grid-template-rows: subgrid) {
  .t-home main.wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .t-home .page-head.hero { grid-column: 1; grid-row: 1 / span 4; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; padding-bottom: var(--s-8); }
  .t-home .page-head.hero > h1 { grid-row: 1; }
  .t-home .page-head.hero > .lede { grid-row: 2; }
  .t-home .page-head.hero > .badges { grid-row: 4; margin-top: var(--s-4); }
  .t-home .content > .dsearch { grid-column: 1; grid-row: 3; margin-top: var(--s-5); padding: 0; background: none; box-shadow: none; clip-path: none; }
}
@media (max-width: 820px) { .t-home .page-head.hero h1 { text-wrap: balance; } }

/* below the hero: one rhythm (96 px, 64 px on phones), white and tinted sections alternate */
.t-home .content > *, .t-home main.wrap > .related { margin-top: var(--section); margin-bottom: 0; }
.t-home .content > .quick-answer { width: 100%; max-width: 760px; margin: var(--s-8) auto 0; } /* on the hero's axis: the edges of the search field and the price tiles */
.t-home .content > .fold { margin-top: var(--s-4); }
.t-home .content > * > h2:first-child, .t-home .band > * > h2:first-child { margin-top: 0; }
.t-home h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); letter-spacing: -0.03em; margin-bottom: var(--s-3); }
.t-home h2 + p { margin-top: calc(-1 * var(--s-1)); }
.t-home :is(.steps, .trust-sec, .tldp) > p { max-width: 68ch; color: var(--muted); }
.t-home .table-note { max-width: 72ch; }
.t-home .tldp-q { display: none; } /* JS filter input, no text: pointless on a 9-row table right under the search */
.t-home .faq-item { max-width: none; }

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

/* FAQ (wide screens): heading across the top, questions as a 2-up grid, so the band stays shorter than the hero */
@media (min-width: 1000px) {
  .t-home .band .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: 0; align-items: stretch; }
  .t-home .band .faq > h2 { grid-column: 1 / -1; position: static; margin: 0 0 var(--s-2); }
  .t-home .band .faq > .faq-item { grid-column: auto; }
  .t-home .band .faq > .faq-item:nth-child(2), .t-home .band .faq > .faq-item:nth-child(3) { padding-top: var(--s-2); }
  /* last row: no rule under it (the left item of the last row is the 2nd-last child when it sits in column 1) */
  .t-home .band .faq > .faq-item:nth-last-child(2):nth-child(even) { padding-bottom: 0; border-bottom: 0; }
  .t-home .faq-a { font-size: var(--fs-16); }
  .t-home .band .faq > .faq-item h3 { text-wrap: pretty; } /* full first lines in the narrower columns */
}

/* ------------------------------------------------------------------------------------------------ 7. domain search */
/* one field with the button built in, as wide as its column (the home hero caps it), 3 px focus ring on the whole
   field. Text-entry boundaries use --field (3.5:1 on white, 3.3:1 on the tint: WCAG 1.4.11); chips and cards keep
   the lighter --line-strong. */
.dsearch { margin: var(--s-4) 0; }
.ds-form { align-items: center; gap: 0; max-width: none; padding: 5px; background: #fff; border: 1px solid var(--field); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: border-color .15s ease; }
.ds-form:hover { border-color: var(--ink); }
.ds-form:focus-within { border-color: var(--ink); }
.ds-form:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.ds-form input[type="search"] { height: 46px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 var(--fs-18)/1.2 var(--font-body); }
.ds-form input[type="search"]:focus { border: 0; box-shadow: none; outline: none; }
.ds-form input::placeholder, .tldp-q::placeholder { color: #66756b; opacity: 1; } /* 4.86:1 on white */
.ds-form .btn { flex: none; width: auto; min-height: 46px; padding: 0 20px; border-radius: var(--r-sm); font: 650 var(--fs-16)/1 var(--font-body); }
.ds-pop { gap: 8px 10px; margin-top: var(--s-2); }
.ds-pop-h { color: var(--muted); font-size: var(--fs-14); font-weight: 600; }
.ds-pop a, .ds-pop li > span { align-items: center; gap: 8px; min-height: var(--h-sm); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: var(--fs-15); text-decoration: none; transition: border-color .15s ease; }
.ds-pop a:hover { border-color: var(--ink); color: var(--ink); }
.ds-pop strong { font-weight: 700; }
:root .ds-pop ul > li { margin: 0; } /* (0,2,2), after the prose-list rule of 2: the chips keep the grid's 8 px gaps */
.ds-pop strong + span { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-pop:has(li:only-child) li > span { min-height: 0; padding: 0; border: 0; background: none; } /* one extension: a price line, not a chip */
.ds-note { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }

/* home hero version: big centered field, price tiles of the popular extensions under it */
.t-home .ds-form { max-width: 760px; margin: 0 auto; padding: 6px; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.t-home .ds-form input[type="search"] { height: 56px; padding: 0 18px; font-size: var(--fs-20); }
.t-home .ds-form .btn { min-height: 56px; padding: 0 28px; border-radius: var(--r-md); font-size: var(--fs-17); }
.t-home .ds-pop { justify-content: center; max-width: 760px; margin: var(--s-3) auto 0; }
.t-home .ds-pop-h { flex-basis: 100%; text-align: center; }
.t-home .ds-pop ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-1); width: 100%; }
.t-home .ds-pop li { display: flex; }
.t-home .ds-pop a { display: flex; width: 100%; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-color: var(--line); border-radius: var(--r-md); line-height: 1.25; }
.t-home .ds-pop a:hover { border-color: var(--ink); }
.t-home .ds-pop a strong { font-size: var(--fs-18); letter-spacing: -0.01em; }
.t-home .ds-note { max-width: 62ch; margin: var(--s-2) auto 0; text-wrap: balance; }

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

/* -------------------------------------------------------------------------------------------------------- 9. tables */
/* framed, discreet light header, hairline rows, hover tint, tabular figures, prices aligned right */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.table-wrap > table { margin: 0; }
.tbl table, .facts-table { font-size: var(--fs-15); }
.tbl :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tbl thead th, .tiers thead th, .pay-table thead th { padding-block: 12px; background: var(--surface); color: var(--muted); font-size: var(--fs-13); font-weight: 600; line-height: 1.35; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.tbl tbody th { color: var(--ink); font-weight: 650; }
.tbl :where(tbody tr:nth-child(even)) { background: transparent; }
.tbl :where(tbody tr):hover, .pay-table tbody tr:hover { background: var(--surface); }
.tbl tr.hl, .tbl tr.hl:hover { background: var(--cash-soft); }
.tbl tr.hl th { color: var(--ink); }
.tbl tr.hl th:first-child { box-shadow: none; }
.tbl caption { padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-13); }
/* tabular figures only where cells are numbers (Inter's tnum also widens hyphens in running text) */
.t-pricing .cmp :is(thead th, td):is(:nth-child(3), :nth-child(4)) { text-align: right; font-variant-numeric: tabular-nums; }
/* pricing "wholesale floor vs our price": the one text column takes the width, the price columns shrink to their figures */
.t-pricing .cmp :is(th, td):not(:nth-child(2)) { width: 1%; }
.t-pricing .cmp tbody th { min-width: 0; } /* ".com": no 9 rem row-label floor here */
.t-pricing .cmp td:is(:nth-child(3), :nth-child(4)) { white-space: nowrap; }
/* extension pages, "other registrars" (Registrar | First year | Renewal | Crypto accepted): prices as on /best/ */
.t-product .cmp :is(thead th, td):is(:nth-child(2), :nth-child(3)) { min-width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; }
/* First year holds the promo notes ("$6.99 (new-customer promo code)"): 2 lines at most, no word split, and
   proportional figures (tnum would widen the hyphen of "new-customer"); Renewal keeps the tabular figures */
.t-product .cmp :is(thead th, td):nth-child(2) { min-width: 12rem; font-variant-numeric: normal; }
.t-product .cmp td:nth-child(4) { min-width: 14rem; }
.pay-table td:nth-child(3), .tiers td { font-variant-numeric: tabular-nums; }
.t-about .tbl:not(.cmp) :is(thead th, td):not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
/* terms, accepted coins: confirmation counts as on /pricing/ and /pay-with/ (right-aligned tabular figures) */
.tbl:has(> #accepted-coins-and-networks) :is(thead th, td):last-child { text-align: right; font-variant-numeric: tabular-nums; }
.table-note { max-width: 72ch; margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-14); }
.table-note p:last-child { margin-bottom: 0; }
.checked { margin-top: var(--s-2); font-size: var(--fs-14); }
.tbl, .facts { margin: var(--s-4) 0; }

/* extension price table (tldPricing) */
.tldp :is(th, td), .tldp thead th { vertical-align: middle; } /* sortable and plain header labels on one line */
.tldp :is(thead th, tbody td):is(:nth-child(2), :nth-child(3), :nth-child(4)) { text-align: right; }
.tldp :is(thead th, tbody td):nth-child(4) { padding-right: 32px; }
.tldp tbody td:nth-child(2) { color: var(--ink); font-weight: 650; }
.tldp td.tldp-r { min-width: 9rem; color: var(--muted); font-size: var(--fs-14); }
.tldp td.tldp-r.warn { color: var(--ink-2); }
.tldp tbody th a { color: var(--ink); font-weight: 700; text-decoration: none; }
.tldp tbody th a:hover { color: var(--accent); text-decoration: underline; }
.tldp th button { gap: 6px; color: inherit; font: inherit; }
.tldp th button:hover { color: var(--ink); }
.tldp th button::after { content: ""; flex: none; width: 8px; height: 13px; background: currentColor; opacity: .75; /* 3.8:1 on the header tint (WCAG 1.4.11) */ -webkit-mask: var(--i-sort) center / contain no-repeat; mask: var(--i-sort) center / contain no-repeat; }
.tldp th[aria-sort="ascending"] button::after { opacity: 1; -webkit-mask-image: var(--i-sort-up); mask-image: var(--i-sort-up); }
.tldp th[aria-sort="descending"] button::after { opacity: 1; -webkit-mask-image: var(--i-sort-down); mask-image: var(--i-sort-down); }
.tldp th button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tldp:has(tbody tr:only-child) th button::after { content: none; } /* one row: nothing to sort */
/* category chips (radio buttons) + text filter */
/* the "Show" label sits in a fixed gutter, so a wrapped second row of chips starts under the first chip */
.tldp-f { position: relative; align-items: center; gap: 8px; margin: 0 0 var(--s-2); padding-left: 52px; }
.tldp-f legend { position: absolute; left: 0; top: 0; float: none; margin: 0; padding: 0; color: var(--muted); font-size: var(--fs-14); font-weight: 600; line-height: 40px; }
.tldp-f span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink-2); font-size: var(--fs-14); font-weight: 600; transition: border-color .15s ease, background-color .15s ease; }
.tldp-f label:hover span { border-color: var(--ink); }
.tldp-f input { inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } /* the whole chip is the radio's hit area */
.tldp-f input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.tldp-f input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.tldp-q { height: 40px; max-width: 260px; margin: 0 0 var(--s-2); padding: 0 12px 0 36px; border: 1px solid var(--field); border-radius: var(--r-md); background: #fff var(--i-search) no-repeat 12px 50% / 16px; color: var(--ink); font-size: var(--fs-15); }
.tldp-q:hover { border-color: var(--ink); }
.tldp-q:focus { border-color: var(--ink); outline: 3px solid var(--accent); outline-offset: 2px; }
/* no side-by-side grid: the 8 chips keep one row on wide screens and the text filter (engine: block, 100% wide,
   capped above) sits on its own row under them, left-aligned */

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

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

/* comparison tables: our own column (always the last one on /does/ and /alternatives/ pages) gets the row tint */
.t-comparison .cmp :is(td, thead th):last-child { background: color-mix(in srgb, var(--accent) 5%, #fff); }
.t-comparison .cmp thead th:last-child { color: var(--accent); }
.cmp tbody th { min-width: 9rem; }
.t-comparison .cmp tbody th { min-width: 11rem; } /* "Payment processor" on one line */

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

/* ----------------------------------------------------------------------- 11. cards, trust, stats, ranking, link grid */
/* one card language: white, hairline border, radius md, 24 px padding, no shadow; equal heights in every grid */
.cards { gap: var(--s-2); align-items: stretch; }
.card { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin: 0 0 6px; font-size: var(--fs-17); line-height: 1.35; }
.card p { margin: 0 0 .5em; color: var(--muted); font-size: var(--fs-15); line-height: 1.55; }
.card-link:hover { border-color: var(--ink); box-shadow: none; transform: none; }
/* whole-card links: the site's 3 px ring around the card, on keyboard focus of its title link only (the engine's
   :focus-within drew a 2 px ring, after mouse clicks too) */
.card-link:focus-within { outline: none; }
.card-link:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-ic, .stat-ic, .trust-ic { width: auto; height: auto; background: none; border: 0; border-radius: 0; color: var(--accent); }
.card-ic { margin-bottom: var(--s-2); }
:is(.card-ic, .trust-ic) .ic { width: 24px; height: 24px; }
/* full rows only: 4 cards as 2 x 2 (the 62 "Popular uses" grids), 3 and 6 cards as rows of 3 (the hubs' 6-card grids
   would otherwise auto-fit into 4 + 2 across 1,088 px) */
@media (min-width: 640px) { .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards:is(:has(> :nth-child(3):last-child), :has(> :nth-child(6):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.trust-sec { margin: var(--s-4) 0; }
.trust { gap: var(--s-2); margin: var(--s-4) 0 0; align-items: stretch; }
.trust > li { flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.trust-sec.compact .trust > li { flex-direction: row; }
.trust-t { margin: 0 0 6px; color: var(--ink); font-size: var(--fs-17); font-weight: 700; line-height: 1.35; }
.trust-d { color: var(--muted); font-size: var(--fs-15); line-height: 1.55; }

.stats { gap: var(--s-2); margin: var(--s-3) 0; }
.stat { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.stat-ic .ic { width: 22px; height: 22px; }
.stat-v { color: var(--ink); font-size: var(--fs-32); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-l { color: var(--ink-2); font-size: var(--fs-15); }
.stat-n { font-size: var(--fs-13); }
.t-report .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

.linkgrid { margin: var(--s-4) 0; }
.lg { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-1); font-size: var(--fs-15); }
/* every chip of a row as tall as the row (a 2-3 line label keeps 8 px clear of its frame); 15 links run as 3 x 5 */
.lg li { display: flex; margin: 0; }
.lg a { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-height: var(--h-md); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink); font-weight: 600; line-height: 1.35; text-decoration: none; transition: border-color .15s ease; }
@media (min-width: 900px) { .lg:has(> :nth-child(15):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lg a:hover { border-color: var(--ink); color: var(--ink); }
.lg-note { color: var(--muted); font-size: var(--fs-13); }
.lg-group { margin: var(--s-3) 0 var(--s-1); color: var(--ink); font-size: var(--fs-15); font-weight: 650; }

.coinstrip { gap: 10px 20px; margin: var(--s-4) 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
:root .cs-label { color: var(--ink); font-size: var(--fs-15); font-weight: 650; }
.coinstrip .cs-note { flex-basis: 100%; margin: 0; }
.coin-row li { color: var(--ink-2); font: 600 var(--fs-14)/1 var(--font-body); }
/* coin cards (/pay-with/): logo on the left, code / name / note packed in the middle of the card (the engine grid
   would stretch its 3 rows over the card's height); the intro text keeps the hub's 760 px measure (see 16) */
.coins li { align-content: center; row-gap: 2px; border-color: var(--line); border-radius: var(--r-md); background: #fff; }
.coin-code { color: var(--ink); font-family: var(--font-body); line-height: 1.3; }
.coin-name { color: var(--ink-2); line-height: 1.35; }
.coin-note { line-height: 1.4; }

/* --------------------------------------------------------------------------------------- 12. FAQ, folds, sources */
.faq-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq > .faq-item:last-child { padding-bottom: 0; } /* the next section's own step follows the last answer, nothing added */
.faq-item h3 { margin: 0 0 var(--s-1); font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.005em; line-height: 1.35; }
.faq-a { color: var(--ink-2); }
.faq-a p:last-child { margin-bottom: 0; }

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

.sources details { margin-top: var(--s-4); padding-top: var(--s-1); border-top: 1px solid var(--line); }
/* chevron on the first line when the label wraps; 12 px + one 21 px line + 12 px keeps the 44 px target */
.sources summary { list-style: none; display: inline-flex; align-items: flex-start; gap: 10px; min-height: 0; padding-block: 12px; color: var(--ink-2); font-size: var(--fs-15); font-weight: 600; line-height: 1.4; cursor: pointer; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::marker { content: ""; }
.sources summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.sources details[open] summary::before { transform: rotate(45deg); }
.sources summary:hover { color: var(--accent); }
.sources ol { padding-left: 2.2em; }
.src-u { font-size: inherit; }

/* ------------------------------------------------------------------------------------------------ 13. call to action */
/* the single dark band of a page: black panel, centered, one green button */
.cta { flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-8) 0; padding: var(--s-8) var(--s-4); border-radius: var(--r-lg); background: var(--ink); color: #fff; text-align: center; }
.cta > div:first-child { min-width: 0; max-width: 680px; }
.cta-h { margin: 0 0 var(--s-1); color: #fff; font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.15 var(--font-head); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.cta-t { overflow-wrap: anywhere; }
.cta-t p { margin: 0; color: rgb(255 255 255 / .8); opacity: 1; text-wrap: balance; }
.cta-t a { color: #fff; }
.cta-btns { justify-content: center; gap: 12px; }
.cta .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cta .btn-primary:hover { background: #fff; border-color: #fff; color: var(--ink); }
.cta .btn-ghost { background: transparent; border-color: rgb(255 255 255 / .35); color: #fff; }
.cta .btn-ghost:hover { background: transparent; border-color: #fff; color: #fff; }
/* an earlier call to action on a page that has two (registrar pages): light panel, the page keeps one dark band */
.content > .cta:has(~ .cta) { padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.content > .cta:has(~ .cta) .cta-h { color: var(--ink); font-size: var(--fs-24); }
.content > .cta:has(~ .cta) .cta-t p { color: var(--ink-2); }
.content > .cta:has(~ .cta) .cta-t a { color: var(--accent); }
.content > .cta:has(~ .cta) .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.content > .cta:has(~ .cta) .btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.content > .cta:has(~ .cta) .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.content > .cta:has(~ .cta) :focus-visible { outline-color: var(--accent); }

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

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

/* -------------------------------------------------------------------------------------------- 16. long-form layouts */
/* reading column: 760 px (about 72 characters of Inter at 17 px) */
:is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-faq, .t-best, .t-report, .t-article, .t-usecase) .content { max-width: 760px; }
.sec > h3, .content > h3 { margin-top: 1.8em; }

/* table of contents in a sticky right rail on wide screens (DOM order unchanged: the answer stays first). Column 1 is
   capped at the 760 px reading column and the rail pushed flush right, so every column-1 block (content, related,
   about) ends on the same edge. A long rail scrolls under a bottom fade; its padding keeps the last entry and the
   focus ring clear of that fade and of the box edges. */
@media (min-width: 1200px) {
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase) main.wrap:has(> .toc) { display: grid; grid-template-columns: minmax(0, 760px) 256px; justify-content: space-between; column-gap: var(--s-8); align-items: start; }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase) main.wrap:has(> .toc) > * { grid-column: 1; min-width: 0; }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase) main.wrap:has(> .toc) > :is(.crumbs, .page-head) { grid-column: 1 / -1; }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase) main.wrap > .toc { grid-column: 2; grid-row: 3 / span 8; }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase) main.wrap:has(> .toc) > .content { max-width: 760px; }
  /* .content is a grid item here, so its last block's margin no longer collapses into the related section's: only
     the related section's 96 px separates them, as on every other page */
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase) main.wrap:has(> .toc) > .content > :last-child,
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase) main.wrap:has(> .toc) > .content > :last-child > :last-child { margin-bottom: 0; }
  /* the related cards run 2 per row in this column: an odd last card (5 links on the extension and /does/ pages) spans
     the row instead of leaving an empty slot */
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase) main.wrap:has(> .toc) > .related .related-list > li:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
}

/* data-heavy pages: text keeps the reading column, wide tables, rankings and stats use the full width */
@media (min-width: 1000px) {
  :is(.t-report, .t-best) .content { max-width: none; }
  /* the key-number cards stay in the reading column too (2 x 372 px, aligned with the facts table above) */
  :is(.t-report, .t-best) .content > :not(.tbl):not(.ranking):not(.cta), .t-report .tbl > :is(h2, p, .table-note, .checked), .t-best .ranking > :not(.rank-list) { max-width: 760px; }
  .t-report .cmp table { font-size: var(--fs-14); }
  .t-report .cmp :is(th, td) { padding: 12px 8px; }
  .t-report .cmp td:is(:nth-child(6), :nth-child(7)) { min-width: 8rem; } /* KYC, WHOIS: "Not documented" on one line; the 9 columns still fit 1088 px */
  .t-best .cmp td:nth-child(2) { min-width: 9rem; }
  /* the two .com price columns: right-aligned tabular figures, like the pricing table; a bare price keeps one line,
     a price with a note wraps */
  .t-best .cmp table { font-size: var(--fs-14); }
  .t-best .cmp :is(th, td) { padding-inline: 12px; }
  .t-best .cmp :is(th, td):nth-last-child(-n+2) { min-width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .t-best .cmp td:nth-last-child(2) { white-space: normal; }
  .t-best .cmp td:nth-child(3) { min-width: 9.5rem; } /* "TRC-20 or ERC-20" on one line */
  .t-best .cmp td:nth-child(5) { min-width: 9rem; } /* KYC / ID: "Not documented" on one line */
  .t-best .rank-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* pricing: only the 62-row price table is wide; its header stays in view while scrolling */
  .t-pricing .content > :not(.tldp):not(.band):not(.cta), .t-pricing .tldp > :is(h2, p, .table-note), .t-pricing .band > * { max-width: 760px; }
  .t-pricing .tldp .table-wrap { overflow: visible; }
  .t-pricing .tldp thead th { position: sticky; top: var(--hdr-h); z-index: 2; }
  .t-pricing .tldp thead th:first-child { border-top-left-radius: calc(var(--r-md) - 1px); }
  .t-pricing .tldp thead th:last-child { border-top-right-radius: calc(var(--r-md) - 1px); }
}

/* wide data templates without a rail (pricing, best-of, report, hubs; FAQ from 1100 px, where its 2-column layout starts):
   the quick answer sits right under the title and the table of contents follows it, as the rail templates read.
   DOM order is untouched (the answer stays the first block for GEO); .content becomes transparent to layout, as on
   the home page. Flex items keep their margins (no collapsing), so the rhythm is rebuilt: blocks carry no outer
   margin and their own first heading gives the 70 px step; the boxes without a heading keep their own step. */
@media (min-width: 1000px) {
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap { display: flex; flex-direction: column; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap > .content { display: contents; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap > .toc { order: 1; margin: var(--s-5) 0 0; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > :not(.quick-answer) { order: 2; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap > :is(.related, .about-box) { order: 3; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > * { margin-block: 0; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > :not(.quick-answer, .cta, .band, .callout, .fold, .method) > :last-child,
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > :not(.quick-answer, .cta, .band, .callout, .fold, .method) > :last-child > :last-child { margin-bottom: 0; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .quick-answer { margin-top: var(--s-3); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .cta { margin-top: var(--s-8); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .band { margin-top: var(--s-12); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .band + * { margin-top: var(--s-12); }
  :is(.t-pricing, .t-best, .t-report, .t-hub) .content > .band + * > h2:first-child { margin-top: 0; }
}
@media (min-width: 1100px) {
  .t-faq main.wrap { display: flex; flex-direction: column; }
  .t-faq main.wrap > .content { display: contents; }
  .t-faq main.wrap > .toc { order: 1; margin: var(--s-5) 0 0; }
  .t-faq .content > :not(.quick-answer) { order: 2; }
  .t-faq main.wrap > :is(.related, .about-box) { order: 3; }
  .t-faq .content > * { margin-block: 0; }
  .t-faq .content > :not(.quick-answer, .cta, .callout, .fold) > :last-child,
  .t-faq .content > :not(.quick-answer, .cta, .callout, .fold) > :last-child > :last-child { margin-bottom: 0; }
  .t-faq .content > .quick-answer { margin-top: var(--s-3); }
  .t-faq .content > .faq { margin-top: var(--s-6); }
  .t-faq .content > .cta { margin-top: var(--s-8); }
}
/* hub pages: grids use the width, text keeps the measure (the intro line of a full-width grid too); a short link grid
   (up to 12 links: the 7 coin pages) stays in the reading column, as on the coin pages, rather than 6 + 1 */
.t-hub .content > :is(.quick-answer, .sec, .facts, .faq, .prose, .callout, .steps, .pay-steps, .sources), .t-hub .content > p { max-width: 760px; }
.t-hub .content > section > :is(p, .table-note), .t-hub .content > .linkgrid:not(:has(.lg > :nth-child(13))) { max-width: 760px; }
.t-hub .band > .pay-steps { max-width: 760px; }

/* FAQ page: category heading in a sticky left column, questions on the right */
@media (min-width: 1100px) {
  .t-faq .content { max-width: none; }
  .t-faq .content > :not(.faq, .facts, .cta) { max-width: 760px; } /* the call to action spans the width like the related cards below it */
  .t-faq .faq { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: space-between; column-gap: var(--s-7); align-items: start; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .t-faq .faq > h2 { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: calc(var(--hdr-h) + var(--s-3)); margin: 0; font-size: var(--fs-24); }
  .t-faq .faq > .faq-item { grid-column: 2; max-width: 760px; }
  .t-faq .faq > .faq-item:first-of-type { padding-top: 0; }
  /* the key facts follow the same frame: hairline, sticky heading column, the table in the 760 px answer column */
  .t-faq .content > .facts { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: space-between; column-gap: var(--s-7); align-items: start; max-width: none; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .t-faq .content > .facts > h2 { grid-column: 1; position: sticky; top: calc(var(--hdr-h) + var(--s-3)); margin: 0; font-size: var(--fs-24); }
  .t-faq .content > .facts > :not(h2) { grid-column: 2; margin-top: 0; }
  /* the sources disclosure that closes the list sits in the answer column: its hairline continues the item separators */
  .t-faq .content > .sources { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: space-between; column-gap: var(--s-7); max-width: none; }
  .t-faq .content > .sources > * { grid-column: 2; min-width: 0; }
}

/* >= 1200 px, every template with a table of contents: the contents become a quiet rail on the right (sticky, a
   hairline on its left, muted links), as on the extension and abuse pages. Placed after the flex rules above. */
@media (min-width: 1200px) {
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc { position: sticky; top: calc(var(--hdr-h) + var(--s-3)); max-height: calc(100vh - var(--hdr-h) - var(--s-6)); overflow: auto; max-width: none; margin: var(--s-3) 0 0; padding: 6px 6px var(--s-4) var(--s-2); scroll-padding-block: 8px 40px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; font-size: var(--fs-14); -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc ol { columns: auto; list-style: none; padding: 0; }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc li { padding: 0; }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc a { display: block; padding: 5px 0; color: var(--muted); line-height: 1.4; text-decoration: none; }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc a:hover { color: var(--accent); }
  :is(.t-guide, .t-product, .t-comparison, .t-about, .t-legal, .t-contact, .t-usecase, .t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc a:focus-visible { outline-offset: 0; }
  .t-legal main.wrap > .toc a { padding: 3px 0; line-height: 1.35; } /* 18 numbered sections fit a 900 px screen */
  /* the sticky rail paints above a later full-bleed band (its tint is a positioned box-shadow) and stays under the
     sticky header (z-index 20); its transparent background reads on the tint */
  main.wrap > nav.toc { z-index: 1; }

  /* data templates (pricing, best-of, reports, FAQ, hubs): the flex column above becomes a 2-column grid with the same
     DOM and the same order rules. The rail sits beside the quick answer and the reading-column block after it (text, or
     a short link grid), so the first data block reaches the first screen; every other block auto-places below, across
     the full width (tables, card grids, the 62-extension link grid). */
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) { display: grid; grid-template-columns: minmax(0, 760px) 256px; justify-content: space-between; column-gap: var(--s-8); align-items: start; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > *,
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > .content > * { grid-column: 1 / -1; min-width: 0; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > .crumbs { grid-row: 1; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > .page-head { grid-row: 2; }
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap:has(> .toc) > .content > .quick-answer { grid-column: 1; grid-row: 3; }
  :is(.t-pricing, .t-best, .t-report, .t-hub) main.wrap:has(> .toc) > .content > .quick-answer + :not(.tbl, .ranking, .band, .cta, .cards-sec, .coins-sec, .linkgrid:has(.lg > :nth-child(13))) { grid-column: 1; grid-row: 4; }
  /* not sticky here: a sticky grid item is held by the whole grid, and the wide tables below span this column */
  :is(.t-pricing, .t-best, .t-report, .t-faq, .t-hub) main.wrap > .toc { grid-column: 2; grid-row: 3 / span 2; position: static; max-height: none; overflow: visible; padding-bottom: 6px; -webkit-mask-image: none; mask-image: none; }
  .t-faq main.wrap > .toc { grid-row: 3; } /* FAQ: the key facts take the page's 2-column frame below, full width */
}

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

/* band (alternate tinted section) */
.band { margin: var(--s-12) 0; padding: var(--s-10) 0; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); }
/* balanced band: only the band's padding sits under the last line (no inner margin or FAQ padding added to it) */
.band > :last-child, .band > :last-child > :last-child { margin-bottom: 0; }
.band .faq > .faq-item:last-child { padding-bottom: 0; border-bottom: 0; }
.band .table-wrap, .band .card, .band .trust > li, .band .rank, .band .stat, .band .fold { background: #fff; }

/* sticky buy bar (phones) */
.sticky-cta { border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgb(11 15 12 / .35); }
.sticky-cta .btn { min-height: 48px; }

/* ------------------------------------------------------------------------------------------------------- 17. phones */
@media (max-width: 760px) {
  :root { --section: var(--s-8); }
  html:has(body.has-sticky) { scroll-padding-bottom: 96px; } /* keyboard focus never hides under the buy bar */
  h2 { margin-top: 1.9em; }
  /* questions keep the engine's text-wrap: balance. Measured on all 120 pages at 375 px: balance leaves 2 questions
     split inside "ERC-20", pretty leaves 10 (orphans and "2-/year"); CSS cannot forbid a break after a hyphen. */
  .page-head { padding-top: var(--s-3); }
  .lede { font-size: var(--fs-17); }
  .crumbs ol { align-items: center; }
  .crumbs li { display: inline-flex; align-items: center; min-height: 44px; }

  /* home hero */
  .t-home .page-head.hero { padding-top: var(--s-6); }
  .t-home .page-head .lede { font-size: var(--fs-17); }
  .t-home .content > .dsearch { padding-bottom: var(--s-6); }
  @supports (grid-template-rows: subgrid) {
    .t-home .page-head.hero { padding-bottom: var(--s-6); }
    .t-home .content > .dsearch { margin-top: var(--s-4); padding-bottom: 0; }
    .t-home .page-head.hero > .badges { margin-top: var(--s-3); }
  }
  .t-home .badges { flex-direction: column; align-items: center; gap: 6px; }
  .t-home .ds-form input[type="search"] { height: 52px; padding: 0 12px; font-size: var(--fs-18); }
  .t-home .ds-form .btn { min-height: 52px; padding: 0 16px; }
  .t-home .ds-pop ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-home .ds-pop a { min-height: 60px; }
  .t-home .steps .step-list { grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
  /* one column: the inner-page layout (disc on the left, vertical hairline) */
  .t-home .steps .step-list > li { padding-left: 52px; }
  .t-home .steps .step-list > li::before { position: absolute; margin: 0; }
  .t-home .steps .step-list > li:not(:last-child)::after { top: 40px; bottom: calc(-1 * var(--s-3) + 8px); left: 15px; right: auto; width: 2px; height: auto; }
  .t-home .steps .step-name { margin-top: 3px; font-size: var(--fs-18); }
  .band { margin: var(--section) 0; padding: var(--s-7) 0; }
  .t-home .band { margin-bottom: 0; }

  /* text floor 15 px for what the engine floor does not cover; FAQ answers, steps, callouts at prose size */
  :root :is(.ds-pop-h, .ds-note, .ds-pop a, .ds-pop li > span, .tldp-f span, .tldp-f legend, .sources summary, .rank-badge, .rank-meta dt, .stat-n, .lg-note, .about-h, .f-logo .logo-mark) { font-size: 15px; }
  :root .tldp td.tldp-r { font-size: 15px; }
  html:root body :is(.faq-a, .step-list, .callout, .method, .pc) { font-size: var(--fs-16); }
  .t-home .ds-pop a strong { font-size: var(--fs-17); }

  /* touch targets */
  .tldp-f span { min-height: 44px; }
  .tldp-f { padding-left: 0; }
  .tldp-f legend { position: static; float: left; flex-basis: 100%; width: 100%; line-height: 1.4; } /* label on its own line */
  .tldp th button { min-height: 44px; }
  .tldp th button:focus-visible { outline-offset: -3px; border-radius: 4px; } /* drawn inside the 44 px button: the scroller cannot clip it */
  .tldp thead th { padding-block: 0; }
  .menu { min-height: 44px; }
  .trust > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  .trust-ic { padding-top: 1px; }
  .tldp tbody th { padding-block: 0; }
  .tldp tbody th a { display: flex; align-items: center; min-height: 44px; }
  /* row-header links of the other tables (".io", "Bitcoin"): a 44 x 44 px hit area inside the cell's 12 px padding,
     the row height unchanged (one 25 px line + 2 x 10 px, cancelled by the negative margins) */
  .tbl:not(.tldp) tbody th > a:only-child { display: inline-block; min-width: 44px; padding-block: 10px; margin-block: -10px; }
  .ds-pop a { min-height: var(--h-md); } /* price chips outside the home hero (the hero's are 60 px, more specific) */
  .rank-head h3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .tldp-q { max-width: none; height: 46px; font-size: 16px; }
  /* pricing, 62 rows: the table scrolls in its own bounded box (it hands the scroll back to the page at both ends),
     so the column headers stay readable at every row */
  .t-pricing .tldp .table-wrap { max-height: 78svh; overflow: auto; overscroll-behavior: auto; scroll-padding-top: 48px; }
  .t-pricing .tldp thead th { position: sticky; top: 0; z-index: 2; }
  .t-pricing .tldp thead th:first-child { left: 0; z-index: 3; }

  /* sources: inline links, so a wrapped title starts on its list number's line and the publisher follows it; the
     vertical padding keeps a 44 px hit area without changing the line layout. (0,2,2) beats the prose-list margin. */
  .sources a { display: inline; min-width: 0; padding: 13px 0; }
  /* keyboard focus: the hit-area padding goes, so the ring hugs each text line instead of striking through the lines
     above and below (inline padding does not move the line; the facts link's 10 / -10 px pair nets to 0) */
  .sources a:focus-visible, .tbl td > a:only-child:focus-visible { padding-block: 0; }
  .facts-table td > a:only-child:focus-visible { padding-block: 0; margin-block: 0; }
  :root .sources ol > li { margin: 0; padding-block: 6px; }

  /* tables: sticky first column, a soft edge shadow while more columns hide on the right */
  /* extension tables, keyboard: the sort buttons of the scrolled columns. A button that starts in the right 25 % of the
     scroller counts as hidden, so focus scrolls it fully into view (Blink leaves a partly visible one where it is), and
     the 112 px start padding (the sticky Extension column) keeps it from landing under that column. The other
     scrolling tables hold no control outside their sticky first column. */
  .tldp .table-wrap { scroll-padding-inline: 112px 25%; }
  .table-wrap { background: linear-gradient(to left, #fff 45%, rgb(255 255 255 / 0)) right / 40px 100% no-repeat local, linear-gradient(to left, rgb(11 15 12 / .13), rgb(11 15 12 / 0)) right / 14px 100% no-repeat scroll, #fff; }
  .tbl :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 var(--line); }
  .tbl thead th:first-child { background: var(--surface); }
  .tbl tr.hl th { background: var(--cash-soft); }
  .tldp thead th { white-space: nowrap; }
  /* wide tables (4+ columns) scroll with readable column floors; 2-3 column tables fit the screen instead */
  .cmp thead th { min-width: 7rem; }
  .tbl:not(.tldp) td { min-width: 7.5rem; }
  .tbl:not(.tldp) td:last-child:not(:nth-child(2)) { min-width: 10.9375rem; } /* 175 px: the whole column shows beside a 166 px sticky label column at 375 px */
  .cmp tbody th { min-width: 7.5rem; max-width: 10.5rem; }
  .tbl :is(th, td) { padding: 12px; }
  .tbl:not(.tldp) table:not(:has(thead th:nth-child(4))) :is(td, td:last-child:not(:nth-child(2)), thead th) { min-width: 0; }
  .tbl:not(.tldp) table:not(:has(thead th:nth-child(4))) tbody th { min-width: 0; max-width: none; overflow-wrap: normal; } /* row labels never break inside a word or before a comma */
  .tbl:not(.tldp) table:not(:has(thead th:nth-child(4))) :is(th, td) { padding-inline: 6px; }
  .tbl:not(.tldp) table:not(:has(thead th:nth-child(4))) :is(th, td):first-child { padding-left: 8px; }
  .t-comparison .cmp tbody tr :is(td, th) { background-clip: padding-box; }
  /* coin pages, "Which registrars accept USDT TRC-20?" (Registrar | Accepts …? | Processor): the yes/no column keeps
     "USDT TRC-20?" on one line and its values a readable measure; the table already scrolls sideways. Beats the
     3-column floor reset above (0,5,4). */
  .t-guide .tbl.cmp:not(.tldp) table:not(:has(thead th:nth-child(4))) thead th:nth-child(2) { min-width: 7.5rem; }
  /* terms, accepted coins: the confirmation counts shrink to their figures, "Ethereum (ERC-20)" keeps one line */
  .tbl:has(> #accepted-coins-and-networks) :is(thead th, td):last-child { width: 1%; }

  /* pricing, "wholesale floor vs our price": the long text column gets a real measure, the two price columns shrink
     to their figures (the 1% widths above) */
  .t-pricing .tbl.cmp :is(thead th, tbody th) { min-width: 0; }
  .t-pricing .tbl.cmp td:nth-child(n+3), .t-pricing .tbl.cmp td:last-child:not(:nth-child(2)) { min-width: 0; white-space: nowrap; }
  .t-pricing .tbl.cmp td:nth-child(2) { min-width: 14rem; }

  /* extension pages, other registrars: Registrar, First year and Renewal fit the screen; Crypto accepted scrolls */
  .t-product .tbl.cmp :is(thead th, tbody th), .t-product .tbl.cmp td:nth-child(n+2):not(:last-child) { min-width: 0; }
  .t-product .tbl.cmp :is(th, td) { padding-inline: 8px; }
  /* 176 px: the whole column fits the 183 px left of the sticky Registrar column; pretty keeps "ERC-20)" whole */
  .t-product .tbl.cmp td:last-child:not(:nth-child(2)) { min-width: 11rem; text-wrap: pretty; }

  /* registrar comparisons (row label | them | us): the label sits above its two values, so both value columns get
     half the screen. The corner header cell is empty (no text). */
  .t-comparison .cmp table:not(:has(thead th:nth-child(4))),
  .t-comparison .cmp table:not(:has(thead th:nth-child(4))) :is(thead, tbody) { display: block; }
  .t-comparison .cmp table:not(:has(thead th:nth-child(4))) tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the empty corner cell leaves the grid flow but stays in the accessibility tree (it holds no text), so the header
     row still exposes 3 column headers and each value keeps its own registrar as header (WCAG 1.3.1) */
  .t-comparison .cmp table:not(:has(thead th:nth-child(4))) thead th:first-child:empty { display: block; position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
  .t-comparison .tbl.cmp table:not(:has(thead th:nth-child(4))) :is(th, td) { min-width: 0; max-width: none; padding-inline: 12px; }
  .t-comparison .tbl.cmp table:not(:has(thead th:nth-child(4))) tbody th { grid-column: 1 / -1; position: static; padding-bottom: 0; border-bottom: 0; box-shadow: none; background: none; }
  .t-comparison .cmp table:not(:has(thead th:nth-child(4))) tbody td { padding-top: 6px; }
  .t-comparison .cmp table:not(:has(thead th:nth-child(4))) tbody td:last-child { box-shadow: inset 1px 0 0 var(--line); }

  /* contact, "Which address should I write to?" (question | address | what to include): each row stacks its 3 cells,
     so the unbreakable e-mail address no longer pushes "Include" off screen; the header row reads as one legend line */
  .t-contact .tbl table, .t-contact .tbl table :is(thead, tbody) { display: block; }
  .t-contact .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .t-contact .tbl tbody tr:last-child { border-bottom: 0; }
  .t-contact .tbl:not(.tldp) table:not(:has(thead th:nth-child(4))) tr > :is(th, td) { position: static; min-width: 0; max-width: none; padding: 0 16px; border-bottom: 0; background: none; box-shadow: none; }
  .t-contact .tbl thead tr { display: flex; flex-wrap: wrap; row-gap: 0; padding-block: 10px; background: var(--surface); }
  .t-contact .tbl:not(.tldp) table:not(:has(thead th:nth-child(4))) thead tr > th + th { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); }
  .t-contact .tbl tbody td:nth-child(2) { color: var(--ink); }
  .t-contact .tbl tbody td:nth-child(3) { color: var(--muted); }

  /* key facts: label above its value */
  .facts-table, .facts-table tbody, .facts-table tr, .facts-table th, .facts-table td { display: block; width: auto; }
  .facts-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .facts-table tr:last-child { border-bottom: 0; }
  .facts-table :is(th, td) { padding: 0; border: 0; background: none; }
  .facts-table th { margin-bottom: 2px; }
  /* a value that is a single link: the engine's 44 px target is kept (10 + 25 + 10 px) without a 44 px line box, so
     the value sits 4 px under its label like every other row */
  .facts-table td > a:only-child { display: inline-block; min-height: 0; padding-block: 10px; margin-block: -10px; }
  .facts-table { overflow: visible; } /* no cell background on phones: nothing to clip, and the last row's focus ring stays whole */
  /* the same for a link that ends a sentence in a table cell ("2-year minimum: why"): it stays in the line (no
     atomic 44 px box dropped to its own line); the inline padding keeps a 44 px hit area, as in the sources */
  .tbl td > a:only-child { display: inline; min-width: 0; min-height: 0; padding-block: 13px; }
  /* the folded key facts (home): one frame, not a card in a card; the row hairlines are the only separators and the
     summary lines up with the content */
  .fold > summary, .fold > :not(summary) { padding-inline: var(--s-2); }
  .fold .facts-table { border: 0; border-radius: 0; }
  .fold .facts-table tr { padding-inline: 0; }

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

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

  /* cards and grids stack */
  .rank-meta { grid-template-columns: 1fr 1fr; }
  /* ranking tag: always on its own line, under the name (32 px disc + 12 px gap), whatever the name's length */
  .rank-head .rank-badge { box-sizing: border-box; flex-basis: 100%; margin-top: -8px; padding-left: 44px; }
  .related-list { grid-template-columns: minmax(0, 1fr); } /* minmax: a long e-mail address cannot widen the page at 320 px */
  .related-list p { overflow-wrap: anywhere; }
  /* only the title row clears the arrow: the description takes the full card measure */
  .related-list li { padding: 16px 24px 20px; row-gap: 0; }
  .related-list a { margin-right: 28px; }
  .related-list li::after { top: 29px; }

  /* call to action */
  .cta { padding: var(--s-5) var(--s-2); }
  .cta .btn { padding-inline: 16px; }
  .cta-h { font-size: 1.1875rem; } /* 19 px: the abuse address fits one line at 375 px */
  /* the light, secondary call to action follows the same phone sizes (its desktop selector is more specific) */
  .content > .cta:has(~ .cta) { padding: var(--s-5) var(--s-2); }
  .content > .cta:has(~ .cta) .cta-h { font-size: 1.1875rem; }

  /* footer: two compact columns, the page ends on the footer colour (room left for the buy bar) */
  .ftr { padding-top: var(--s-6); }
  .ftr .wrap:first-child { grid-template-columns: 1fr; gap: var(--s-4); }
  .f-brand { grid-template-columns: minmax(0, 1fr); }
  .f-brand > * { grid-column: 1; }
  .f-brand > .f-contact { grid-column: 1; grid-row: auto; margin-top: var(--s-2); }
  /* the right column (Extensions, Compare, Company) gets a little more: "Namecheap alternative" keeps one line down to
     360 px, the left one still fits "Refunds and balance" */
  .f-cols { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--s-3) 12px; }
  .f-col li { margin: 0; }
  .f-h { margin: 0 0 2px; }
  .f-col a { line-height: 1.3; }
  .coins-mini { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px 28px; } /* 3 + 3, no orphan row */
  body.has-sticky { padding-bottom: 0; }
  body.has-sticky .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* buy bar: the button keeps its label on one line, the note takes the rest */
  .sticky-cta { gap: 10px; }
  .sticky-cta .btn { flex: 0 0 auto; padding-inline: 12px; white-space: nowrap; }
  .sticky-cta .btn .ic { display: none; } /* decorative arrow (aria-hidden SVG, no text): the note keeps one line from 375 px */
  .sticky-cta .sc-note { flex: 1 1 0; min-width: 0; max-width: none; }
}
@media (max-width: 560px) {
  .ds-form { flex-direction: row; }
  .ds-form .btn { width: auto; padding: 0 16px; }
  /* ranking cards: tighter padding, each detail on one run-in line ("Best for: …") instead of label above value */
  .rank { padding: 20px 16px; }
  .rank-meta { grid-template-columns: 1fr; gap: var(--s-1); }
  .rank-meta > div { display: block; }
  .rank-meta :is(dt, dd) { display: inline; margin: 0; }
  .rank-meta dt::after { content: ": "; }
  .stat { min-width: 0; overflow-wrap: break-word; }
  .stat-v { font-size: var(--fs-24); }
  .stat-ic { display: none; } /* decorative icon, no text */
}
@media (max-width: 640px) {
  /* single-row extension table (extension pages): label / value pairs, no sideways scroll */
  .tldp:has(tbody tr:only-child) table { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }
  .tldp:has(tbody tr:only-child) :is(thead, tbody, tr) { display: contents; }
  .tldp:has(tbody tr:only-child) :is(th, td) { display: flex; align-items: center; justify-content: flex-start; min-height: 48px; padding: 8px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: normal; position: static; box-shadow: none; }
  .tldp:has(tbody tr:only-child) thead th { grid-column: 1; background: var(--surface); }
  .tldp:has(tbody tr:only-child) tbody :is(th, td) { grid-column: 2; background: #fff; }
  .tldp:has(tbody tr:only-child) :is(th, td):nth-child(1) { grid-row: 1; }
  .tldp:has(tbody tr:only-child) :is(th, td):nth-child(2) { grid-row: 2; }
  .tldp:has(tbody tr:only-child) :is(th, td):nth-child(3) { grid-row: 3; }
  .tldp:has(tbody tr:only-child) :is(th, td):nth-child(4) { grid-row: 4; }
  .tldp:has(tbody tr:only-child) :is(th, td):nth-child(5) { grid-row: 5; }
  .tldp:has(tbody tr:only-child) :is(th, td):nth-child(6) { grid-row: 6; }
  .tldp:has(tbody tr:only-child) caption { display: block; grid-column: 1 / -1; grid-row: 7; }
  .tldp:has(tbody tr:only-child) .table-wrap { background: #fff; }
  .tldp:has(tbody tr:only-child) thead th:has(button) { padding-block: 2px 1px; } /* 44 px button + 3 px + 1 px rule = the 48 px row */
  .tldp:has(tbody tr:only-child) caption { border-top: 0; } /* the last row's rule is enough */
}
/* report key numbers: one card per row on phones ("$10.88–$38.38" on one line, labels in 1-2 lines) */
@media (max-width: 480px) {
  .t-report .stats { grid-template-columns: minmax(0, 1fr); }
  .t-report .stat { padding: 20px; }
}
/* confirmation times: "≈ 20 min" keeps one line wherever the 4 columns fit the screen (370 px and up) */
@media (min-width: 370px) and (max-width: 760px) {
  .pay-table td:last-child { white-space: nowrap; }
  .pay-table :is(th, td), .pay-table :is(thead th, td):nth-child(3) { padding-inline: 5px; }
}
@media (max-width: 520px) {
  .logo { gap: 8px; font-size: 1.05rem; }
  .logo-mark { width: 30px; height: 30px; font-size: .875rem; }
  .menu { padding: 0 12px; }
  :root .logo-mark { font-size: 15px; }
  .hdr-in { gap: 10px; }
}
/* the brand name stays whole down to 320 px (WCAG 1.4.10): tighter gaps first, then a smaller logo; Menu and Log in
   keep their 44 px height */
@media (max-width: 400px) {
  .hdr-in { gap: 8px; }
  .logo { gap: 6px; }
  :root .logo-mark { width: 28px; height: 28px; }
  .menu { padding: 0 10px; }
  .hdr-login { padding-inline: 2px; }
}
@media (max-width: 340px) {
  .hdr-in { gap: 6px; }
  .logo { font-size: .9375rem; letter-spacing: -0.03em; }
  :root .logo-mark { width: 26px; height: 26px; }
  .menu { padding: 0 8px; }
  .hdr-login { min-width: 44px; justify-content: center; padding-inline: 0; } /* the 44 px target holds at 320 px */
}

/* 320 px phones: the search button drops its decorative magnifier (aria-hidden SVG, no text), so the field shows the
   whole placeholder; a footer link that wraps to 2 lines stays clearly apart from the next one */
@media (max-width: 359px) {
  .ds-form .btn .ic { display: none; }
  .ds-form .btn, .t-home .ds-form .btn { padding-inline: 16px; }
  .f-col li + li { margin-top: 6px; }
  .f-col a { line-height: 1.25; }
}

/* forced colours (Windows High Contrast): backgrounds become Canvas, so the selected filter chip and the mask-drawn
   icons (sort arrows, proof-point checks, card arrows) get system colours instead */
@media (forced-colors: active) {
  .tldp-f input:checked + span { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .tldp th button::after, .badges li::before, .related-list li::after { forced-color-adjust: none; background: CanvasText; }
}