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

/* Sealname — "private bank" visual system (design pass of 8 October 2026, see sites/sealname/_work/DESIGN-SPEC.md).
   Loaded after engine/assets/site.css. Presentation only: no content is hidden or moved off screen; only decorative
   pseudo-elements and icons are restyled or dropped.
   One grid everywhere on wide screens: a label column (1/3) and a reading column (2/3), 56 px apart. Section titles,
   the quick-answer question, the facts labels, the footer brand and the "About" title sit in the first column; text sits
   in the second; tables, cards and the ranking span both.
   1 tokens · 2 base · 3 header · 4 buttons · 5 page head · 6 layout grid + rhythm · 7 home hero + domain search
   8 quick answer + toc · 9 tables · 10 steps, trust, ranking, panels · 11 faq, folds, sources · 12 cta, related, links
   13 footer · 14 tablet · 15 phones · 16 forced colours */

/* ------------------------------------------------------------------------------------------------ 1. tokens */
/* :root:root outranks the inline :root{} the engine writes from site.json → theme */
:root:root {
  --night: #0f1b2d;
  --ink: #14213d;
  --ink-2: #3a4560;
  --muted: #56607a;
  --paper: #fbf9f4;
  --paper-2: #f4f0e7;
  --line: #e6dfd1;
  --line-2: #d6ccb8;
  --line-3: #918777;            /* edges of form fields: 3:1 on paper and paper-2 */
  --seal: #8f2626;
  --seal-hover: #752020;
  --seal-tint: color-mix(in srgb, #8f2626 8%, #fff);
  --gold: #c9a96a;              /* footer headings: 7.7:1 on night */
  --on-night: #e9e4d8;
  --on-night-2: #b9c1d1;        /* 9.5:1 on night */

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s7: 56px; --s8: 64px; --s10: 80px; --s12: 96px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow-soft: 0 1px 2px rgb(20 33 61 / .04), 0 8px 24px -16px rgb(20 33 61 / .18);
  --shadow-deep: 0 2px 6px rgb(20 33 61 / .06), 0 24px 48px -24px rgb(20 33 61 / .35);
  --gutter: 56px;
  --hdr-h: 72px;

  /* engine variables, mapped onto the system */
  --accent: var(--seal); --accent-2: var(--ink); --accent-ink: #fff;
  --bg: var(--paper); --surface: var(--paper-2); --surface-2: #ece6d9; --text: var(--ink); --border: var(--line);
  --radius: var(--r-md); --shadow-sm: var(--shadow-soft); --shadow-md: var(--shadow-soft); --focus: var(--seal);
  --topbar-bg: var(--night); --topbar-ink: #e6e1d5;
}

/* ------------------------------------------------------------------------------------------------ 2. base */
/* focus and anchors never land under the sticky header (72 + 24 = the former 96 px anchor offset) */
html { background: var(--paper); scroll-padding-top: calc(var(--hdr-h) + 24px); }
body { background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--seal); color: #fff; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; color: var(--ink); letter-spacing: 0; }
h1 { font-size: 48px; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 20px; }
h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.005em; margin: 0 0 16px; scroll-margin-top: 0; }
h3 { font-size: 20px; line-height: 1.35; margin: 32px 0 8px; scroll-margin-top: 0; }
h4 { font-size: 18px; line-height: 1.4; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 16px; }
a { color: var(--seal); text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 75%, transparent); transition: color .15s ease, text-decoration-color .15s ease; } /* 75 %: the underline keeps 3:1 on paper even where the link colour sits close to its text */
a:hover { color: var(--seal-hover); text-decoration-thickness: 1px; text-decoration-color: currentColor; }
main strong { font-weight: 600; color: var(--ink); }
blockquote { border-left: 2px solid var(--line-2); color: var(--ink-2); }
code { background: var(--surface-2); border-radius: 4px; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 2px; }

/* prose */
.content { max-width: none; font-size: 18px; line-height: 1.65; }
:where(.content, .related, .about-box) :where(p, li) { color: var(--ink-2); }
:where(.content) :where(ul, ol):not([class]) { padding-left: 1.25em; }
:where(.content :where(ul, ol):not([class])) > li { margin: 6px 0; }
:where(.content) ul:not([class]) > li::marker { color: var(--muted); }
:where(.content) ol:not([class]) > li::marker { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.content :is(.sec, .steps, .tbl, .ranking, .linkgrid, .dsearch, .facts, .faq) > :is(p, ul:not([class]), ol:not([class]), h3, .prose, .table-note) { max-width: 720px; }

/* labels: no capitals, no letter-spacing (the :root prefix beats the engine's phone rules) */
:root :is(.kicker, .qa-label, .tbl thead th, .tiers thead th, .pay-table thead th, .f-pay-h, .lg-group, .cs-label, .pt-h,
  .hp-k, .hp-pay, .card-tag, .plan-badge, .tier-badge, .hp-badge, .shot-tag) { text-transform: none; letter-spacing: 0; }
:root :is(.qa-label, .f-h, .f-contact-h, .f-pay-h, .rank-badge, .rank-n, .about-h, .method-h, .callout-h, .yes, .no, .card-tag,
  .plan-badge, .tier-badge, .tldp tbody th a, .ds-pop-h, .stat-v, .plan-price, .def dt, .lg-group, .cs-label, .pt-h, .hp-k,
  .toc-h, .pc-h, .bc-k, .hp-from strong, .hp-p, .coin-code, .step-name, .trust-t, .qa-q, .cta-h) { font-weight: 600; }

/* ------------------------------------------------------------------------------------------------ 3. header */
.topbar { padding: 9px 0; font-size: 13px; letter-spacing: 0; background: var(--night); color: #e6e1d5; border-bottom: 0; }
.topbar strong { color: var(--gold); filter: none; font-weight: 600; }
.hdr { background: var(--paper); backdrop-filter: none; border-bottom: 1px solid var(--line); box-shadow: none; }
.hdr-in { min-height: var(--hdr-h); gap: 32px; }
.logo { gap: 12px; font: 600 22px/1 var(--font-head); letter-spacing: -0.005em; color: var(--ink); }
.logo-mark, .ftr .f-logo .logo-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--seal); color: #fff; font: 600 17px/1 var(--font-head); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
:root .nav { gap: 28px; }
:root .nav a { padding: 8px 0; border-radius: 0; background: none; font: 500 15px/1.4 var(--font-body); color: var(--ink-2); box-shadow: none; transition: color .15s ease, box-shadow .15s ease; }
:root .nav a:hover { background: none; color: var(--ink); box-shadow: inset 0 -1px 0 currentColor; }
:root .nav a[aria-current] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--seal); }
.hdr-login { font: 500 15px/1.4 var(--font-body); color: var(--ink-2); }
.hdr-login:hover { color: var(--ink); text-decoration: underline; }
.menu { align-items: center; gap: 10px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: var(--r-sm); background: transparent; font: 600 15px/1 var(--font-body); color: var(--ink); cursor: pointer; } /* the edge and weight of .btn-ghost: one outlined secondary button */
.menu::before { content: ""; width: 16px; height: 11px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.menu[aria-expanded="true"] { border-color: var(--ink); }
/* skip link: a paper tab inside the night bar, with the gold ring of the other dark band (seal on night is 2:1) */
:root .skip:focus { top: 5px; left: 16px; padding: 3px 12px; border-radius: var(--r-sm); font: 600 15px/1.4 var(--font-body); color: var(--ink); background: var(--paper); }
:root .skip:focus-visible { outline-color: var(--gold); }

/* ------------------------------------------------------------------------------------------------ 4. buttons */
.btn { min-height: 48px; padding: 0 24px; gap: 10px; border: 1px solid transparent; border-radius: var(--r-sm); font: 600 16px/1.2 var(--font-body); letter-spacing: 0; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover, .btn:active { transform: none; filter: none; }
.btn .ic { width: 18px; height: 18px; }
.btn:hover .ic { transform: none; }
.btn-primary, .btn-primary:hover, .hero-btns .btn-primary, .cta .btn-primary { background: var(--seal); border-color: var(--seal); color: #fff; box-shadow: none; filter: none; }
.btn-primary:hover, .cta .btn-primary:hover { background: var(--seal-hover); border-color: var(--seal-hover); color: #fff; }
.btn-ghost, .cta .btn-ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.btn-ghost:hover, .cta .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm, :root .hdr .hdr-cta { min-height: 48px; padding: 0 20px; font-size: 15px; }
.btn:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

/* ------------------------------------------------------------------------------------------------ 5. page head */
.crumbs ol { align-items: center; gap: 0; margin: 24px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; margin: 0; }
.crumbs li + li::before { content: "/"; margin: 0 10px; opacity: 1; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--ink-2); }
.page-head { max-width: 860px; padding: 32px 0 48px; }
:root .kicker { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; padding: 0; background: none; border: 0; border-radius: 0; font: 500 15px/1.5 var(--font-body); color: var(--ink-2); text-wrap: balance; }
.kicker::before, .t-home .hero .kicker::after { content: ""; flex: none; width: 24px; height: 1px; transform: translateY(-.34em); background: var(--seal); }
.t-home .hero .kicker { justify-content: center; }
.lede, .page-head.hero .lede { max-width: 680px; font-size: 20px; line-height: 1.6; color: var(--ink-2); }
.lede p { margin: 0 0 12px; }
.lede p:last-child { margin-bottom: 0; }
.lede a { color: var(--seal); }
.meta { margin: 20px 0 0; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------------------------------------ 6. layout + rhythm */
.content > * { margin-top: 0; margin-bottom: 0; }
.content > * + * { margin-top: var(--s8); }
main > .related { max-width: none; margin-top: var(--s12); }
.about-box { max-width: none; margin: var(--s8) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-size: 15px; color: var(--muted); }
.about-box .about-h, .about-h { margin: 0 0 4px; font: 600 15px/1.5 var(--font-body); color: var(--ink); }
.about-box p { color: var(--muted); }
/* document pages: sections separated by a hairline */
body:not(.t-home) .content > :is(.sec, .steps, .tbl, .linkgrid, .ranking, .faq, .facts, .dsearch, .trust-sec, .cards-sec, .stats-sec, .coins-sec) + :is(.sec, .steps, .tbl, .linkgrid, .ranking, .faq, .facts, .dsearch, .trust-sec, .cards-sec, .stats-sec, .coins-sec) { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }
.content > .faq + .sources { margin-top: 0; }
.content > .linkgrid + .sources { margin-top: 0; } /* extension pages: the sources row hangs under the grid's last rule, as under the FAQ */
/* home: one steady 96 px rhythm */
.t-home .content > * + * { margin-top: var(--s12); }
/* short home texts: balanced lines, no lone last word (Chrome's `pretty` keeps "add-on." and "confirmations." alone);
   document pages keep their ledes at full measure */
.t-home .content > * > h2 + p, .t-home .band .step-list > li > p:not(.step-name) { text-wrap: balance; }
/* …but the policy lede keeps its date whole ("8 October 2026"): balance split it after "8" from 761 px up; on the 720 px
   reading measure `pretty` breaks after "what we" (phones keep balance, where `pretty` would split the date again) */
@media (min-width: 761px) { .t-home .content > .trust-sec > h2 + p { max-width: 720px; text-wrap: pretty; } }
/* tinted band, full width without horizontal scroll */
.content > .band { padding: 88px 0; background: var(--paper-2); box-shadow: 0 0 0 100vmax var(--paper-2); clip-path: inset(0 -100vmax); }
.band > section > :last-child, .band .step-list { margin-bottom: 0; }
/* document pages: the section after the band starts as far below it as the home page's (96 px rhythm; phones keep 48) */
@media (min-width: 761px) { body:not(.t-home) .content > .band + * { margin-top: var(--s12); } }

/* the split grid: title in the first column, text in the second, wide blocks across both */
@media (min-width: 1024px) {
  /* --indent: where a child of a split section starts; wide children set it to 0 */
  :where(.content > :is(.sec, .steps, .tbl, .linkgrid, .ranking, .trust-sec, .cards-sec, .stats-sec, .coins-sec, .faq, .facts, .sources), body:not(.t-home) .content > .dsearch,
    .band > :is(.sec, .steps), main > .related) { display: flow-root; --col-l: calc((100% - var(--gutter)) / 3); --split: calc(var(--col-l) + var(--gutter)); }
  :is(.content > :is(.sec, .steps, .tbl, .linkgrid, .ranking, .trust-sec, .cards-sec, .stats-sec, .coins-sec, .faq, .facts), .content > .dsearch, .band > :is(.sec, .steps), main > .related) > h2 { float: left; width: var(--col-l); margin: -3px 0 24px; padding-right: 16px; }
  .t-home .content > .dsearch:first-child > h2 { float: none; width: auto; }
  :is(.content > :is(.sec, .steps, .tbl, .linkgrid, .ranking, .trust-sec, .cards-sec, .stats-sec, .coins-sec, .faq, .facts, .sources), body:not(.t-home) .content > .dsearch, .band > :is(.sec, .steps), main > .related) > :not(h2) { margin-left: var(--indent, var(--split)); }
  :is(.content > :is(.sec, .steps, .tbl, .linkgrid, .ranking, .trust-sec, .cards-sec, .stats-sec, .coins-sec, .faq, .facts), .band > .sec) > table { width: calc(100% - var(--indent, var(--split))); }
  .content > :is(.sec, .tbl, .ranking, .trust-sec, .cards-sec, .stats-sec, .coins-sec) > :is(.table-wrap, .tldp-f, .tldp-q, .tbl, .trust, .rank-list, .cards, .stats, .coins),
  .content > :is(.sec, .tbl, .ranking, .trust-sec, .cards-sec, .stats-sec, .coins-sec) > :is(.table-wrap, .trust, .rank-list, .cards, .stats, .coins) ~ *,
  .band > .sec > :is(.table-wrap, .tbl), .t-home .band > .steps > .step-list { --indent: 0px; clear: both; }
  .content > .sec > .tbl { padding-top: 8px; }
  .content > .sec > .tbl > h3:first-child { margin: 40px 0 24px; }
  /* a wide block always starts 40 px under whichever is lower, the floated title or its lede */
  .content > :is(.tbl, .trust-sec, .cards-sec) > h2, .content > :is(.tbl, .trust-sec, .cards-sec) > h2 + p { margin-bottom: 40px; }
  .content > .callout { margin-left: calc((100% - var(--gutter)) / 3 + var(--gutter)); }
  /* about box and table of contents on the same columns */
  .about-box, :root .toc { display: grid; grid-template-columns: minmax(0, calc((100% - var(--gutter)) / 3)) minmax(0, 1fr); column-gap: var(--gutter); }
  .about-box > *, .toc > * { grid-column: 2; }
  .about-box > .about-h, .toc > .toc-h { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  /* each label shares the baseline of the first line it introduces: the 24 px line and 3 px top padding of a contents
     entry, the 24 px line of the about text */
  :root .toc > .toc-h { padding-top: 3px; line-height: 1.6; }
  :root .about-box > .about-h { line-height: 1.6; }
}

/* ------------------------------------------------------------------------------------------------ 7. home hero + search */
.t-home .page-head.hero { max-width: none; margin: 0; padding: 96px 0 40px; text-align: center; background: var(--paper-2); box-shadow: 0 0 0 100vmax var(--paper-2); clip-path: inset(0 -100vmax); }
/* 680 px keeps "Private domain names," on the first line (greedy wrap; phones keep balance) */
.t-home .hero h1 { max-width: 680px; margin: 0 auto 24px; font-size: 60px; line-height: 1.05; letter-spacing: -0.015em; text-wrap: wrap; }
.t-home .hero .lede { max-width: 620px; margin: 0 auto; font-size: 19px; line-height: 1.6; }
.t-home .hero .lede p { text-wrap: balance; } /* the engine's `p { text-wrap: pretty }` left a short widow line under the centred h1 */
/* the clip opens 8 px upwards (the hero's own paper-2) so the search field's focus ring and halo are drawn whole */
.t-home .content > .dsearch:first-child { padding: 0 0 88px; text-align: center; background: var(--paper-2); box-shadow: 0 0 0 100vmax var(--paper-2); clip-path: inset(-8px -100vmax 0); }
.t-home .content > .dsearch:first-child .ds-form { margin: 0 auto; }
.t-home .content > .dsearch:first-child .ds-pop { justify-content: center; }
.t-home .content > .dsearch:first-child .ds-note { max-width: 760px; margin-left: auto; margin-right: auto; }
/* the label mirrors the last link's 8 px inner padding: the popular row's ink is centred on the hero axis */
@media (min-width: 1024px) { .t-home .content > .dsearch:first-child .ds-pop-h { padding-left: 8px; } }

.ds-form { align-items: center; gap: 8px; max-width: 760px; height: 64px; padding: 7px; background: #fff; border: 1px solid var(--line-3); border-radius: var(--r-md); box-shadow: var(--shadow-deep); transition: border-color .15s ease, box-shadow .15s ease; }
/* focus: the 1 px border + a 1 px ring = the site's 2 px seal edge, with a soft halo */
.ds-form:focus-within { border-color: var(--seal); box-shadow: var(--shadow-deep), 0 0 0 1px var(--seal), 0 0 0 4px color-mix(in srgb, var(--seal) 18%, transparent); outline: 2px solid transparent; outline-offset: 2px; } /* transparent outline: invisible here, painted as a ring in forced colours (which drop box-shadow) */
.ds-form input[type="search"], .ds-form input[type="search"]:focus { flex: 1 1 auto; height: 48px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: transparent; box-shadow: none; outline: none; font: 400 19px/1.2 var(--font-body); color: var(--ink); }
.ds-form input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.ds-form .btn { flex: none; height: 48px; min-height: 48px; padding: 0 26px; }
.ds-form .btn svg { width: 18px; height: 18px; }
.ds-pop { align-items: baseline; gap: 4px 12px; margin-top: 20px; }
.ds-pop-h { margin: 0; font: 500 15px/1.5 var(--font-body); color: var(--muted); }
.ds-pop ul { gap: 0; }
.ds-pop li { display: inline-flex; align-items: baseline; }
.ds-pop li + li::before { content: "\00B7"; padding: 0 2px; color: var(--line-3); }
.ds-pop a, .ds-pop li > span { gap: 6px; padding: 4px 8px; border: 0; border-radius: var(--r-sm); background: none; font-size: 15px; line-height: 1.5; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.ds-pop a:hover { background: rgb(20 33 61 / .05); }
.ds-pop a:hover strong { text-decoration: underline; text-underline-offset: .22em; }
.ds-pop strong { font-weight: 600; color: var(--ink); }
.ds-pop strong + span { color: var(--seal); font-variant-numeric: tabular-nums; }
.ds-note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.content .ds-note { color: var(--muted); }

/* ------------------------------------------------------------------------------------------------ 8. quick answer + toc */
.quick-answer, .t-home .quick-answer { max-width: none; }
.quick-answer { position: relative; padding: 32px 40px 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.quick-answer::before { content: ""; position: absolute; left: 39px; top: -1px; width: 40px; height: 2px; background: var(--seal); }
:root .qa-label { margin: 0 0 8px; font: 600 14px/1.5 var(--font-body); color: var(--seal); }
.qa-q { margin: 0 0 12px; font: 600 24px/1.3 var(--font-head); color: var(--ink); text-wrap: balance; }
.qa-text { font-size: 18px; line-height: 1.65; }
.qa-text p:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .quick-answer { display: grid; grid-template-columns: minmax(0, calc((100% + 26px) / 3 - 41px)) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--gutter); }
  .qa-label, .qa-q { grid-column: 1; }
  .qa-q { margin: 0; padding-right: 8px; }
  .qa-text { grid-column: 2; grid-row: 1 / span 3; }
  /* the label shares the baseline of the answer's first line (18 px text, 1.65 line), like the contents and about labels */
  :root .quick-answer > .qa-label { padding-top: 1px; line-height: calc(18px * 1.65); margin-bottom: 0; }
}
:root .toc { max-width: none; margin: 0 0 var(--s6); padding: 20px 0 22px; background: none; border: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); border-radius: 0; font-size: 15px; }
:root .toc-h { margin: 0 0 8px; font: 600 15px/1.5 var(--font-body); color: var(--ink); } /* = .about-h: the two band labels of a page */
.toc ol { margin: 0; padding-left: 1.6em; columns: 2 260px; column-gap: 48px; }
.toc li { margin: 0; padding: 3px 0; break-inside: avoid; }
.toc li::marker { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.toc a { color: var(--ink-2); line-height: 1.45; text-decoration: none; }
.toc a:hover { color: var(--seal); text-decoration: underline; }
/* contents on wide screens: the numbers hang in the gutter, the links sit on the reading line, the 2nd column on the related grid's */
@media (min-width: 1024px) { .toc ol { margin-left: -1.6em; column-gap: 40px; } }

/* ------------------------------------------------------------------------------------------------ 9. tables */
.facts-table, .tbl table { font-size: 16px; }
/* balanced lines: no one-word last line in policy and facts cells (the longhand keeps the price cells' nowrap) */
:is(.tbl, .facts-table) :is(td, th) { text-wrap-style: balance; }
.table-wrap { overflow-x: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.table-wrap > table { margin: 0; }
.tbl :is(th, td) { padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.tbl :is(th, td):first-child { padding-left: 0; }
.tbl :is(th, td):last-child { padding-right: 0; }
.tbl tr:last-child :is(th, td) { border-bottom: 1px solid var(--line); }
/* a table that closes its section: the next section's hairline closes it (no double rule) */
body:not(.t-home) .content > .sec:has(+ :is(.sec, .steps, .tbl, .linkgrid, .ranking, .faq, .facts, .dsearch, .trust-sec, .cards-sec, .stats-sec, .coins-sec)) > .tbl:last-child > .table-wrap:last-child tbody tr:last-child > * { border-bottom: 0; }
.tbl thead th { padding-top: 0; padding-bottom: 12px; background: transparent; font: 600 14px/1.4 var(--font-body); color: var(--muted); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-2); vertical-align: bottom; }
.tbl tbody th { font-weight: 600; color: var(--ink); }
.tbl td { color: var(--ink-2); }
.tbl :where(tbody tr:nth-child(even)), .tbl :where(tbody tr):hover { background: transparent; }
.tbl tbody tr:hover > * { background: color-mix(in srgb, var(--seal) 4%, var(--paper)); }
.tbl tr.hl, .tbl tr.hl > *, .tbl tbody tr.hl:hover > * { background: color-mix(in srgb, var(--seal) 3.5%, var(--paper)); }
.tbl tr.hl th, .tbl tr.hl th:first-child { color: var(--ink); box-shadow: none; }
.tbl tr.hl th:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 0 0; border-radius: 50%; background: var(--seal); vertical-align: .14em; }
.tbl caption { caption-side: bottom; padding: 12px 0 0; font-size: 14px; color: var(--muted); text-align: left; }
.table-note, .tbl .table-note { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.table-note p { margin: 0; color: var(--muted); }
.checked { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.tbl :is(.yes, .no), .facts-table :is(.yes, .no) { font-weight: 600; }
.tbl .yes, .facts-table .yes { color: var(--ink); }
.tbl .no, .facts-table .no { color: var(--muted); }

/* price list (tldPricing): prices right-aligned in tabular figures */
.tldp table { table-layout: fixed; }
.tldp thead th:first-child { width: 14%; }
.tldp :is(thead th, td):nth-child(n+2):nth-child(-n+4) { width: 12%; text-align: right; font-variant-numeric: tabular-nums; }
.tldp :is(thead th, td):nth-child(5) { width: 22%; padding-left: 40px; }
.tldp td { white-space: nowrap; }
/* one shared baseline per row: the 15 px Restrictions text no longer rides above the 16 px prices */
.tldp tbody :is(th, td) { vertical-align: baseline; }
.tldp td:nth-child(5) { white-space: normal; }
.tldp td:nth-child(2) { color: var(--ink); font-weight: 600; }
:root .tldp td.tldp-r { min-width: 0; white-space: normal; font-size: 15px; color: var(--muted); }
.tldp td.tldp-r.warn { color: var(--ink-2); }
:root .tldp tbody th a { color: var(--ink); font-weight: 600; text-decoration: none; }
:root .tldp tbody th a:hover { color: var(--seal); text-decoration: underline; }
.tldp th button { position: relative; font: inherit; color: inherit; }
.tldp th button::after { position: absolute; left: 100%; top: 50%; margin: -.55em 0 0 4px; line-height: 1.1; opacity: 0; transition: opacity .15s ease; }
.tldp th button:hover::after, .tldp th button:focus-visible::after, .tldp th[aria-sort] button::after { opacity: .7; }
.tldp th button:hover { color: var(--ink); }
.tldp:not(:has(tbody tr:nth-child(2))) th button { pointer-events: none; cursor: default; }
.tldp:not(:has(tbody tr:nth-child(2))) th button::after { content: none; }
/* the price list fits its box from 761 px up (fixed layout): no clip, so the focus rings of the flush-left extension
   links and the flush-top sort buttons are drawn whole (phones get their own 4 px room, section 15) */
@media (min-width: 761px) { .tldp .table-wrap { overflow: visible; } }
@media (min-width: 900px) {
  .tldp thead th { position: sticky; top: calc(var(--hdr-h) + 1px); z-index: 2; padding-top: 14px; background: var(--paper); }
  /* a one-row table (extension pages): the head scrolls away with its row instead of sliding over the prices */
  .tldp:not(:has(tbody tr:nth-child(2))) thead th { position: static; }
  /* a long price list: focus and anchors also clear its sticky head row */
  html:has(.tldp tbody tr:nth-child(2)) { scroll-padding-top: calc(var(--hdr-h) + 72px); }
}
/* filters */
.tldp-f { align-items: center; gap: 8px; margin: 0 0 16px; }
.tldp-f legend { float: left; margin: 0 8px 0 0; padding: 0; font: 500 14px/40px var(--font-body); color: var(--muted); }
.tldp-f span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; font: 500 14px/1.2 var(--font-body); color: var(--ink-2); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.tldp-f label:hover span { border-color: var(--ink-2); color: var(--ink); }
.tldp-f input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.tldp-f input:focus-visible + span { outline: 2px solid var(--seal); outline-offset: 2px; }
.tldp-q { height: 40px; max-width: 280px; margin: 0 0 24px; padding: 0 12px 0 38px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356607a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 12px 50% / 16px no-repeat; font: 400 15px/1.2 var(--font-body); color: var(--ink); }
.tldp-q::placeholder { color: var(--muted); opacity: 1; }
.tldp-q:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--seal); box-shadow: 0 0 0 1px var(--seal), 0 0 0 4px color-mix(in srgb, var(--seal) 18%, transparent); }

/* comparison table with many columns: the full container, fixed columns */
.tbl.cmp table:has(thead th:nth-child(7)) { table-layout: fixed; min-width: 1056px; }
.tbl.cmp table:has(thead th:nth-child(8)) :is(th, td):nth-child(1) { width: 13%; }
.tbl.cmp table:has(thead th:nth-child(8)) :is(th, td):nth-child(2) { width: 11%; }
.tbl.cmp table:has(thead th:nth-child(8)) :is(th, td):nth-child(3) { width: 13%; }
.tbl.cmp table:has(thead th:nth-child(8)) :is(th, td):nth-child(4) { width: 15%; }
.tbl.cmp table:has(thead th:nth-child(8)) :is(th, td):nth-child(5) { width: 11%; }
.tbl.cmp table:has(thead th:nth-child(8)) :is(th, td):nth-child(6) { width: 10%; }
.tbl.cmp table:has(thead th:nth-child(8)) :is(th, td):nth-child(7) { width: 11%; }
.tbl.cmp table:has(thead th:nth-child(8)) :is(th, td):nth-child(8) { width: 16%; }
/* policy tables (auto layout): the short yes/no column is not squeezed into three-line cells */
@media (min-width: 761px) { .t-about .content > .sec > .tbl :is(th, td):nth-child(2) { min-width: 200px; } }

/* facts ("at a glance") */
.facts-table { border-top: 1px solid var(--line-2); }
.facts-table :is(th, td) { padding: 15px 24px 15px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; line-height: 1.55; } /* baseline: the 15 px label sits on the 16 px value's line, as in the price list */
.facts-table th { width: 36%; font: 500 15px/1.55 var(--font-body); color: var(--muted); }
.facts-table td { padding-right: 0; color: var(--ink); }
.facts-table tr:last-child > * { border-bottom: 0; padding-bottom: 0; } /* the block ends on its last line, as prose does: the next hairline sits at the section rhythm */
/* extension pages: a 30 % label column leaves the "Rules … 2026-10-08" line whole (disclosure / abuse tables keep 36 %);
   where that line still takes two (1024–1279 px), balanced lines keep the date in one piece */
@media (min-width: 1024px) { .t-product .facts-table th { width: 30%; } }
@media (min-width: 1024px) and (max-width: 1279px) { .t-product .facts-table td { text-wrap: balance; } }
/* a scrollable prose table that takes keyboard focus gets the site's ring, clear of its flush-left text */
.table-wrap:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
/* plain tables with flush-left links in the first column (/tld-rules/, /llm-info/): 4 px of room on each side, the
   table does not move, so the links' focus rings are not clipped by the scroller (phones mask the strip, section 15) */
:root .content > .tbl:not(.tldp) > .table-wrap:has(tbody th:first-child > a) { margin-left: -4px; margin-right: -4px; padding-inline: 4px; }
/* the highlighted Sealname row: its tint bleeds 12 px past the table edges, the text does not move; the row is marked by
   the site's 2 px seal edge at the outer end of the bleed (as the quick answer and the ranking), so its name stays on the
   provider column's left edge */
@media (min-width: 1024px) {
  :root .content > .tbl:has(tr.hl) > .table-wrap { margin-left: -12px; margin-right: -12px; padding-inline: 12px; }
  :root .tbl tr.hl > :first-child { box-shadow: -10px 0 0 color-mix(in srgb, var(--seal) 3.5%, var(--paper)), -12px 0 0 var(--seal); }
  :root .tbl tr.hl > :last-child { box-shadow: 12px 0 0 color-mix(in srgb, var(--seal) 3.5%, var(--paper)); }
  :root .tbl tr.hl th:first-child::before { content: none; }
}

/* ------------------------------------------------------------------------------------------------ 10. steps, trust, ranking, panels */
.step-list { margin: 0; padding: 0; }
.step-list > li, .step-list > li.has-ic { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; margin: 0; padding: 0; }
.step-list > li + li, .step-list > li.has-ic + li { margin-top: 32px; }
.step-list > li > * { grid-column: 2; }
.step-list > li::before, .step-list > li.has-ic::before { grid-column: 2; grid-row: 1; position: static; display: block; width: auto; height: auto; margin: 0 0 2px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 500 14px/1.4 var(--font-body); font-variant-numeric: tabular-nums; content: counter(s, decimal-leading-zero); place-items: initial; z-index: auto; }
.step-list > li:not(.has-ic)::before { grid-column: 1; grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); font: 600 16px/1 var(--font-head); content: counter(s); }
.step-list > li > .step-ic, .step-ic { grid-column: 1; grid-row: 1 / span 3; align-self: start; position: static; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--seal-tint); color: var(--seal); }
.step-ic .ic { width: 20px; height: 20px; }
.step-name { margin: 0 0 6px; font: 600 20px/1.35 var(--font-head); color: var(--ink); }
.step-list > li > p:not(.step-name) { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.step-list > li > p:last-child { margin-bottom: 0; }
/* (0,2,1) like the rule above: a white disc with a hairline on the tinted band */
.band .step-list > li > .step-ic { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 900px) {
  .t-home .band .step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 8px; }
  .t-home .band .step-list > li { grid-template-columns: minmax(0, 1fr) auto; align-content: start; margin: 0; padding-top: 24px; border-top: 1px solid var(--line-2); }
  .t-home .band .step-list > li > * { grid-column: 1 / -1; }
  .t-home .band .step-list > li::before { grid-column: 2; grid-row: 1; align-self: start; margin: 0; line-height: 44px; }
  .t-home .band .step-ic { grid-column: 1; grid-row: 1; margin-bottom: 20px; }
  .t-home .band .step-name { font-size: 20px; }
  .t-home .band .step-list > li > p:not(.step-name) { font-size: 15px; }
}
/* the band has no lede: its title runs on one line above the four steps instead of leaving a hole beside it */
@media (min-width: 1024px) {
  .t-home .band > .steps > h2 { float: none; width: auto; margin-bottom: 40px; }
  .t-home .band .step-list { margin-top: 0; }
}

/* policy cards: equal heights, icon, title and text aligned across each row (subgrid) */
.trust { gap: 24px; margin: 8px 0 0; padding: 0; }
.trust > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; gap: 0; margin: 0; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.trust > li > div { display: contents; }
.trust-ic { width: 44px; height: 44px; margin: 0 0 24px; border: 0; border-radius: 50%; background: var(--seal-tint); color: var(--seal); }
.trust-ic .ic { width: 20px; height: 20px; }
:root .trust .trust-t { margin: 0 0 10px; font: 600 20px/1.3 var(--font-head); color: var(--ink); text-wrap: balance; }
:root .trust .trust-d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
/* a one-line title sits on its own text (same 10 px as a two-line one): the spare height of the row's title track goes
   between the icon and the title; last title lines and descriptions stay aligned across the row */
@media (min-width: 761px) { :root .trust .trust-t { align-self: end; } }
.trust-sec.compact .trust > li { padding: 0; border: 0; background: none; box-shadow: none; display: flex; }

/* cards (hub pages) */
.cards { gap: 24px; }
.card { padding: 28px 28px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.card-link:hover { border-color: var(--line-2); box-shadow: var(--shadow-soft); transform: none; }
.card h3 { margin: 0 0 8px; font-size: 20px; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--seal); text-decoration: underline; }
:root .card p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.card-ic { width: 44px; height: 44px; margin-bottom: 16px; border: 0; border-radius: 50%; background: var(--seal-tint); }
.card-tag { font-size: 13px; color: var(--seal); }
.stat { background: #fff; border-color: var(--line); border-radius: var(--r-md); box-shadow: none; }
.stat-v { font-family: var(--font-head); letter-spacing: -0.01em; color: var(--ink); }
.stat-ic { border: 0; border-radius: 50%; background: var(--seal-tint); }

/* ranking (compare pages) */
.method { margin: 0 0 24px; padding: 24px 28px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 16px; line-height: 1.6; }
.method-h { margin: 0 0 6px; font: 600 16px/1.4 var(--font-body); color: var(--ink); }
.method p { color: var(--ink-2); }
.method .checked { color: var(--muted); }
.rank-list { display: grid; gap: 24px; margin: 40px 0 0; }
.rank { position: relative; margin: 0; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-soft); font-size: 16px; }
.rank.self { border: 1px solid color-mix(in srgb, var(--seal) 35%, var(--line)); background: #fff; }
.rank.self::before { content: ""; position: absolute; left: 31px; top: -1px; width: 40px; height: 2px; background: var(--seal); }
.rank-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; }
.rank-head > .rank-badge { grid-column: 2; justify-self: start; }
.rank-head h3 { margin: 0; font-size: 24px; line-height: 1.25; }
.rank-head h3 a { color: var(--ink); text-decoration: none; }
.rank-head h3 > a { display: inline-block; padding-block: 9px; margin-block: -9px; } /* 44 px target, same line box */
.rank-head h3 a:hover { color: var(--seal); text-decoration: underline; }
.rank-n { width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); font: 600 16px/1 var(--font-head); }
.rank.self .rank-n { background: var(--seal); border-color: var(--seal); color: #fff; }
.rank-badge { padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: 500 13px/1.5 var(--font-body); }
.rank.self .rank-badge { color: var(--seal); border-color: color-mix(in srgb, var(--seal) 35%, transparent); }
.rank-verdict { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.rank-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 0; font-size: 15px; line-height: 1.5; }
.rank-meta > div { min-width: 0; }
.rank-meta dt { display: block; margin: 0 0 2px; font-size: 13px; color: var(--muted); }
.rank-meta dt::after { content: none; }
.rank-meta dd { display: block; margin: 0; font-weight: 400; color: var(--ink); }
.pc { gap: 16px 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.pc-h { margin: 0 0 6px; font: 600 14px/1.4 var(--font-body); color: var(--ink); }
.pc ul { list-style: none; margin: 0; padding: 0; }
.pc li { position: relative; margin: 6px 0; padding-left: 18px; color: var(--ink-2); }
.pc li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); }
.pc > div + div li::before { top: .72em; height: 2px; width: 8px; border-radius: 0; background: var(--muted); }
@media (min-width: 1024px) {
  .rank { display: grid; grid-template-columns: minmax(0, calc((100% + 10px) / 3 - 33px)) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--gutter); }
  .rank-head { grid-column: 1; grid-row: 1; align-self: start; }
  .rank-verdict { grid-column: 1; grid-row: 2 / span 2; }
  .rank-meta { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .pc { grid-column: 2; grid-row: 3; }
  .rank > :not(.rank-head, .rank-verdict, .rank-meta, .pc) { grid-column: 1 / -1; }
}

/* panels: one family */
.callout { padding: 20px 24px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 16px; line-height: 1.6; }
.callout.info, .callout.success { background: transparent; border-color: var(--line); }
.callout.warn { background: color-mix(in srgb, var(--seal) 3%, #fff); border-color: color-mix(in srgb, var(--seal) 25%, var(--line)); }
.callout-h { margin: 0 0 4px; font: 600 16px/1.4 var(--font-body); color: var(--ink); }
.callout p { color: var(--ink-2); }
.callout .callout-h, .method .method-h { color: var(--ink); } /* (0,2,0): the panel titles stay ink above their --ink-2 text */
.pay-terms, .coinstrip { background: #fff; border-color: var(--line); border-radius: var(--r-md); }
.coins li { background: #fff; border-color: var(--line); border-radius: var(--r-md); }
.coin-code { color: var(--ink); }
.band .table-wrap { background: transparent; }
.pay-table tbody th { display: table-cell; white-space: nowrap; font-weight: 600; color: var(--ink); }
.pay-table tbody th .coin-logo { display: inline-block; min-width: 22px; margin: 0 8px 0 0; vertical-align: -5px; } /* min-width: Chrome gives an inline svg no min-content width in a cell, the coin code then overflowed */
.pay-table :is(th, td) { padding: 14px 16px; } /* the site's airy rows (.tbl: 15 px) */
.pay-table :is(th, td):first-child { padding-left: 0; }
.pay-table thead th, .tiers thead th { background: transparent; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line-2); }
/* the engine's `tr:last-child th { border-bottom: 0 }` also hits the only header row: draw its rule as a shadow */
:root .pay-table thead tr:last-child th { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-2); font-weight: 600; }
:root .pay-table table { font-size: 15px; font-variant-numeric: tabular-nums; }
:root .pay-table :is(th, td):nth-child(3) { text-align: right; }
.pay-table thead th { vertical-align: bottom; } /* a wrapped "Usual time" keeps the labels on one baseline, like .tbl heads */
.pay-table thead th { padding-top: 0; padding-bottom: 12px; } /* flush head, 12 px from its rule, like .tbl heads */
/* one shared baseline per row, as in the price list: a wrapped network name ("Tron / (TRC-20)") no longer drops the coin,
   the count and the time half a line below the row's first line (the UA's tbody default is middle) */
.pay-table tbody :is(th, td) { vertical-align: baseline; }
/* monochrome coin marks, the footer's family: one ink disc and white glyphs (no brand colours beside the seal accent) */
.pay-table .coin-logo > circle:first-child { fill: var(--ink); }
.pay-table .coin-logo > path { fill: #fff; }
.pay-table .coin-logo > path[fill-opacity], .pay-table .coin-logo > path[fill="#c9d3f7"] { fill-opacity: .7; }
.pay-table .coin-logo > :is(g, ellipse) { stroke: #fff; }
/* footnote of the payment steps: on the step text line, apart from step 05 */
:is(.content, .band) > .pay-steps > .pay-help { margin-top: 24px; padding-left: 64px; font-size: 14px; line-height: 1.55; }
/* the ranking's disclosure line, apart from the last card */
.content > .ranking > .disclosure { margin: 24px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.def dt { color: var(--ink); }
.lg-group { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------------------------------------ 11. faq, folds, sources */
.faq-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq > h2 + .faq-item, .faq > .faq-item:first-of-type { border-top: 1px solid var(--line-2); }
.faq-item h3 { margin: 0 0 8px; font: 600 20px/1.35 var(--font-head); color: var(--ink); }
:root .faq .faq-a { max-width: 720px; font-size: 18px; line-height: 1.65; }
.faq-a p:last-child { margin-bottom: 0; }
/* the hairline between sections already closes the list */
body:not(.t-home) .content > .faq:has(+ :is(.sec, .steps, .tbl, .linkgrid, .ranking, .faq, .facts, .dsearch, .trust-sec)) > .faq-item:last-child { padding-bottom: 0; border-bottom: 0; }
.content > .faq > h2 + .faq-item { margin-top: 0; }
@media (min-width: 1024px) { .content > .faq > .faq-item:first-of-type { padding-top: 0; border-top: 0; } }

.fold { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 40px; font: 600 20px/1.3 var(--font-head); color: var(--ink); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { color: var(--seal); background: color-mix(in srgb, var(--paper-2) 50%, #fff); }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
/* .fold clips its overflow (rounded hover background): the focus ring goes inside the card */
.fold > summary:focus-visible { outline-offset: -4px; border-radius: calc(var(--r-md) - 3px); }
.fold > :not(summary) { margin: 0; padding: 8px 40px 28px; } /* 40 px: the inset of the quick answer and the CTA (wide panels) */
.fold > .facts > h2:first-child { margin: 16px 0 20px; font-size: 24px; }
:is(.fold > summary, .sources summary)::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s ease; }
.fold[open] > summary::after, .sources details[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }

.sources details { margin: 0; padding: 0; border-top: 0; border-bottom: 1px solid var(--line); }
.sources summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font: 600 15px/1.4 var(--font-body); color: var(--ink-2); cursor: pointer; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary:hover { color: var(--ink); }
:root .sources ol { margin: 0 0 20px; padding-left: 1.4em; font-size: 14px; line-height: 1.55; }
.sources li, .sources li a { color: var(--muted); }
.sources li a { text-decoration-color: color-mix(in srgb, currentColor 75%, transparent); }
.sources li a:hover { color: var(--ink); }
.sources li { margin: 4px 0; }
/* the 13 px floor of the type scale: the engine's .85em source URLs (11.9 px in the 14 px list) and .8rem coin and stat
   notes (12.8 px); phones set 15 px (section 15) */
@media (min-width: 761px) { :root :is(.sources .src-u, .coin-note, .stat-n) { font-size: 13px; } }

/* ------------------------------------------------------------------------------------------------ 12. cta, related, link grid */
.cta { flex-wrap: wrap; gap: 24px 32px; padding: 48px 40px; background: var(--paper-2); background-image: none; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); box-shadow: none; }
.cta > div:first-child { flex: 1 1 420px; min-width: 0; }
.content .cta .cta-h { margin: 0 0 8px; font: 600 30px/1.2 var(--font-head); color: var(--ink); }
.content .cta .cta-t p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); opacity: 1; }
.cta-btns { gap: 12px; }

.related > h2 { margin: 0 0 24px; }
.related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.related-list li { margin: 0; padding: 18px 0 22px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; transition: none; }
.related-list li:hover { border-color: var(--line); }
:root .related-list a { font: 600 18px/1.35 var(--font-head); color: var(--ink); text-decoration: none; }
:root .related-list a:hover { color: var(--seal); text-decoration: underline; }
:root .related-list p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* no column gap: every row rule runs the full width, like the top one; the gap moves inside the links */
.lg { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.lg li { margin: 0; border-bottom: 1px solid var(--line); }
:root .lg a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding-right: 24px; font: 600 16px/1.3 var(--font-body); color: var(--ink); text-decoration: none; }
.lg a::after { content: "\2192"; color: var(--seal); opacity: 0; transition: opacity .15s ease; }
:root .lg a:hover { color: var(--seal); }
.lg a:hover::after { opacity: 1; }

/* ------------------------------------------------------------------------------------------------ 13. footer */
.ftr { margin-top: var(--s12); padding: 80px 0 32px; background: var(--night); border-top: 0; color: var(--on-night-2); font-size: 15px; }
.ftr .wrap:first-child { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gutter); row-gap: 48px; }
.ftr .f-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
/* 28 px column gaps: 151 px columns hold "Who owns my domain" (149 px) on one line; phones keep their own gaps */
@media (min-width: 761px) { .ftr .f-cols { column-gap: 28px; } }
.ftr .f-logo, .ftr .f-logo a { margin: 0 0 20px; gap: 12px; font: 600 22px/1 var(--font-head); color: #fff; }
.ftr .f-desc { max-width: 38ch; margin: 0 0 28px; font-size: 15px; line-height: 1.6; color: var(--on-night-2); }
:root .ftr :is(.f-h, .f-contact-h) { margin: 0 0 16px; font: 600 14px/1.4 var(--font-body); color: var(--gold); }
.ftr .f-contact-h { margin-bottom: 4px; }
.ftr .f-col ul { margin: 0; }
.ftr .f-col li { margin: 0 0 10px; }
.ftr a, .ftr .f-col a, .ftr .f-contact a { color: var(--on-night); opacity: 1; font-size: 15px; line-height: 1.45; text-decoration: none; }
.ftr a:hover, .ftr .f-col a:hover, .ftr .f-contact a:hover { color: #fff; text-decoration: underline; text-decoration-color: currentColor; }
.ftr :focus-visible { outline-color: var(--gold); }
.ftr .f-pay, .ftr .f-bottom { position: relative; border-top: 0; }
.ftr .f-pay::before, .ftr .f-bottom::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: rgb(255 255 255 / .12); }
.ftr .f-pay { gap: 12px 28px; margin-top: 64px; padding-top: 28px; }
:root .ftr .f-pay-h { margin: 0; font: 600 14px/1.4 var(--font-body); color: var(--gold); }
.ftr .coins-mini { gap: 8px 24px; margin: 0; }
:root .ftr .coins-mini li { gap: 8px; padding: 0; background: transparent; border: 0; border-radius: 0; font: 500 14px/1 var(--font-body); color: #c9cfdb; }
/* monochrome payment marks: one discreet disc and ivory glyphs for every coin (a grey filter gave six different tones) */
.ftr .coins-mini .coin-logo { width: 20px; height: 20px; filter: none; opacity: 1; }
.ftr .coins-mini .coin-logo > circle:first-child { fill: rgb(233 228 216 / .16); }
.ftr .coins-mini .coin-logo > path { fill: var(--on-night); fill-opacity: .92; }
.ftr .coins-mini .coin-logo > path[fill-opacity] { fill-opacity: .6; }
.ftr .coins-mini .coin-logo > path[fill="#c9d3f7"] { fill-opacity: .75; }
.ftr .coins-mini .coin-logo > :is(g, ellipse) { stroke: var(--on-night); }
.ftr .f-pay-n { font-size: 14px; color: var(--on-night-2); opacity: 1; }
.ftr .f-pay + .f-bottom { margin-top: 28px; }
.ftr .f-bottom { padding-top: 24px; font-size: 14px; color: var(--on-night-2); }
.ftr .f-bottom a { font-size: 14px; color: var(--on-night-2); }

/* ------------------------------------------------------------------------------------------------ 14. tablet */
@media (max-width: 1023px) {
  .cta { padding: 40px; }
  .ftr .wrap:first-child { grid-template-columns: 1fr; }
}
/* the menu takes over below 1040 px: logo 143 + six links 431 + Log in 42 + button 155 no longer fit one 72 px row with
   the theme's gaps (they wrapped onto 2–3 lines, and at 861–871 px pushed the button past the viewport). The engine
   collapses the nav only up to 860 px, so its collapse rules are carried here from 861 to 1039 */
@media (max-width: 1039px) {
  .hdr-in { gap: 12px; }
  .nav { top: 100%; padding: 4px 16px 16px; border-bottom: 1px solid var(--line-2); box-shadow: 0 18px 30px -24px rgb(20 33 61 / .5); }
  :root .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; box-shadow: none; }
  :root .nav a:hover { box-shadow: none; }
  :root .nav a[aria-current] { color: var(--seal); box-shadow: none; }
  :root .nav { gap: 0; padding-bottom: 4px; } /* the dividers space the open menu, not the desktop gap */
  :root .nav a:last-child { border-bottom: 0; } /* the panel's own border closes the menu: one rule, not two */
  /* the toggle has the height of the button beside it (48 px; the engine gives it 44 px on phones only) */
  .menu { display: inline-flex; min-height: 48px; }
  .nav { display: none; position: absolute; left: 0; right: 0; flex-direction: column; background: var(--paper); }
  .nav.open { display: flex; }
}

/* ------------------------------------------------------------------------------------------------ 15. phones */
@media (max-width: 760px) {
  :root { --hdr-h: 64px; }
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); } /* focus never lands under the buy bar */
  .hdr-in { min-height: 64px; }
  .logo { font-size: 20px; }
  .logo-mark { width: 32px; height: 32px; font-size: 16px; }
  :root .btn { min-height: 48px; }
  h1 { font-size: 36px; line-height: 1.12; }
  h2 { font-size: 26px; line-height: 1.22; margin: 0 0 16px; }
  h3 { font-size: 19px; line-height: 1.35; margin: 24px 0 8px; }
  .content { font-size: 16px; line-height: 1.6; }
  .content > * + * { margin-top: var(--s6); }
  body:not(.t-home) .content > :is(.sec, .steps, .tbl, .linkgrid, .ranking, .faq, .facts, .dsearch, .trust-sec, .cards-sec, .stats-sec, .coins-sec) + :is(.sec, .steps, .tbl, .linkgrid, .ranking, .faq, .facts, .dsearch, .trust-sec, .cards-sec, .stats-sec, .coins-sec) { margin-top: 40px; padding-top: 40px; }
  .t-home .content > * + * { margin-top: var(--s7); }
  .content > .band { padding: 48px 0; }
  main > .related { margin-top: var(--s7); }
  .about-box { margin-top: var(--s3); } /* + the last related entry's 16 px padding: its rule sits at the 40 px section rhythm */

  /* page head */
  .crumbs ol { margin-top: 8px; }
  .crumbs li { min-height: 44px; }
  .page-head { padding: 12px 0 32px; }
  .lede, .page-head.hero .lede { font-size: 18px; line-height: 1.55; }
  :root .meta { margin-top: 12px; }

  /* home hero: compact, one search bar with the button inside */
  .t-home .page-head.hero { padding: 40px 0 28px; }
  .t-home .hero h1 { font-size: 38px; line-height: 1.1; margin-bottom: 16px; text-wrap: balance; }
  .t-home .content > .dsearch:first-child { padding-bottom: 48px; }
  /* the engine hides the buy bar while .page-head.hero is on screen: the hero box reaches under the search field
     (same background, the search stays on top) so the bar only appears once the field has scrolled away */
  .t-home .page-head.hero { padding-bottom: 128px; margin-bottom: -100px; }
  :root .ds-form { flex-direction: row; height: 60px; padding: 5px; gap: 4px; }
  :root .ds-form .btn { width: auto; height: 48px; padding: 0 18px; }
  .ds-form input[type="search"], .ds-form input[type="search"]:focus { padding: 0 10px 0 12px; font-size: 17px; }
  .ds-pop { gap: 0; margin-top: 12px; }
  .ds-pop-h { flex-basis: 100%; margin-bottom: 2px; }
  .t-home .content > .dsearch:first-child .ds-pop-h { text-align: center; }
  .ds-pop ul { gap: 0 10px; }
  .ds-pop li + li::before { content: none; }
  body:not(.t-home) .ds-pop li:first-child > :is(a, span) { padding-left: 0; }
  .t-home .content > .dsearch:first-child .ds-pop ul { justify-content: center; }
  .ds-pop a, .ds-pop li > span { min-height: 44px; align-items: center; padding: 0 6px; font-size: 16px; }
  .ds-pop li { align-items: center; }
  /* extension pages: the current extension is a plain span, not a target; the empty lower half of its 44 px box no longer
     pushes the section down (the text does not move; the link items keep their 44 px) */
  :root .ds-pop li > span { margin-bottom: -10px; }
  :root .ds-note { font-size: 15px; }

  /* quick answer */
  .quick-answer { padding: 24px 20px; }
  .quick-answer::before { left: 19px; }
  .qa-q { font-size: 20px; }
  :root .qa-text { font-size: 16px; line-height: 1.6; }

  /* table of contents: light, one column */
  :root .toc { margin-bottom: var(--s5); padding: 12px 0 8px; font-size: 15px; }
  :root .toc-h { margin: 0; padding: 4px 0; }
  .toc ol { columns: auto; padding-left: 1.7em; }
  .toc li { padding: 0; }
  .toc li::marker { font-size: 15px; } /* 15 px floor on phones, like the links beside them */
  .toc a { padding: 12px 0; }

  /* tables: clean sideways scroll, edge shadow, sticky first column */
  .table-wrap { background:
      linear-gradient(to right, var(--paper) 30%, rgb(251 249 244 / 0)) left / 40px 100% no-repeat local,
      linear-gradient(to left, var(--paper) 30%, rgb(251 249 244 / 0)) right / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(20 33 61 / .18), transparent) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(20 33 61 / .18), transparent) right / 14px 100% no-repeat scroll; }
  .tbl :is(th, td) { padding: 14px 12px; line-height: 1.45; }
  :root .tbl thead th { padding-top: 0; font-size: 15px; }
  :root .tldp thead th { white-space: nowrap; }
  .tbl:not(.tldp) table { min-width: 720px; table-layout: auto; }
  .tbl.cmp table { min-width: 680px; }
  .tbl.cmp table:has(thead th:nth-child(7)) { min-width: 980px; }
  .tbl:not(.tldp) :is(thead th, tbody th):first-child { width: 9.5rem; }
  .tbl :is(thead th, tbody th):first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: inset -1px 0 0 var(--line); }
  .tbl thead th:first-child { z-index: 2; box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line-2); }
  .tbl tbody tr:hover > * { background: var(--paper); }
  .tbl tbody tr.hl > *, .tbl tbody tr.hl:hover > * { background: color-mix(in srgb, var(--seal) 3.5%, var(--paper)); }
  :root .tbl tbody tr.hl > th:first-child { box-shadow: inset -1px 0 0 var(--line); } /* the sticky column keeps its edge in the highlighted row */
  .tldp table { table-layout: auto; min-width: 620px; }
  .tldp :is(thead th, td) { width: auto; }
  .tldp :is(thead th, td):nth-child(5) { padding-left: 24px; }
  :root .tldp td.tldp-r { min-width: 14rem; }
  .tldp tbody th, .tldp thead th:first-child { padding-right: 16px; }
  :root .table-wrap :is(td, th) > a:only-child, :root .facts-table td > a:only-child { display: inline; min-height: 0; min-width: 0; padding-block: 12px; margin-block: -12px; }
  /* price list: the extension link fills its cell (44 px wide at least), the sort buttons are 44 px tall */
  :root .tldp tbody th > a:only-child { display: block; padding-block: 14px; margin-block: -14px; }
  /* …and so does it in the plain tables (/tld-rules/, /llm-info/): one target size for the same link on every page */
  :root .tbl:not(.tldp) tbody th > a:only-child { display: block; padding-block: 14px; margin-block: -14px; }
  :root .tbl:not(.tldp) tbody th:has(> a:focus-visible) { z-index: 3; } /* the ring's top edge stays above the sticky head */
  :root body:not(.t-product) .tldp thead th > button { min-height: 44px; margin-bottom: -12px; }
  :root body:not(.t-product) .tldp td:nth-child(5) { white-space: nowrap; } /* no off-screen wrap making random tall rows */
  /* price list scroller: 4 px of room around the table (which does not move), so the focus rings of the sort buttons
     and extension links are drawn whole instead of clipped; the sticky column masks that strip while scrolling */
  :root body:not(.t-product) .tldp .table-wrap { margin: -4px; padding: 4px; }
  /* …but not on the right (the Restrictions column holds nothing focusable): the rules end on the page margin.
     Keyboard focus counts the strip under the sticky first column and the right-edge fade as out of view */
  :root body:not(.t-product) .tldp .table-wrap { margin-right: 0; padding-right: 0; scroll-padding-inline: 10rem 3rem; }
  /* the caption stays under the visible window when the rows scroll sideways */
  :root body:not(.t-product) .tldp .table-wrap > table > caption { position: sticky; left: 0; width: calc(100vw - 32px); }
  /* a long price list is its own scroll window, so its column heads stay on top of the rows (short tables untouched);
     top -4px covers the wrap's 4 px padding. The window stays well under the screen height (7 rows on a 812 px phone)
     so a swipe always finds page around it: the list is never a scroll trap */
  :root body:not(.t-product) .tldp:has(tbody tr:nth-child(13)) .table-wrap { max-height: clamp(12rem, calc(100svh - var(--hdr-h) - 13rem), 28rem); overflow: auto; scroll-padding-top: 49px; }
  :root body:not(.t-product) .tldp:has(tbody tr:nth-child(13)) thead th { position: sticky; top: -4px; z-index: 2; background: var(--paper); }
  :root body:not(.t-product) .tldp:has(tbody tr:nth-child(13)) thead th:first-child { z-index: 3; }
  /* …and its caption ("133 extensions …") closes the window from the start, with a short paper fade above it like the
     right-edge fade, so the list never seems to end at row 12 */
  :root body:not(.t-product) .tldp:has(tbody tr:nth-child(13)) .table-wrap { scroll-padding-bottom: 40px; }
  :root body:not(.t-product) .tldp:has(tbody tr:nth-child(13)) .table-wrap > table > caption { bottom: -4px; z-index: 4; background: var(--paper); box-shadow: 0 -1px 0 var(--line-2), 0 -14px 12px -4px var(--paper); }
  :root body:not(.t-product) .tldp :is(thead th, tbody th):first-child::after { content: ""; position: absolute; top: -1px; bottom: -1px; left: -4px; z-index: -1; width: 4px; background: var(--paper); }
  .tldp tbody th:has(> a:focus-visible) { z-index: 3; } /* the ring stays above the neighbouring sticky cells */
  /* the plain tables with first-column links get the same 4 px room on the left (section 9) and the same mask; their
     right edge stays on the page margin, where the snap padding below takes over */
  :root .content > .tbl:not(.tldp) > .table-wrap:has(tbody th:first-child > a) { margin-right: 0; padding-bottom: 4px; margin-bottom: -4px; } /* 4 px under the last row too: the ring of a last-row link that fills its cell is drawn whole, the table does not move */
  :root .tbl:not(.tldp) > .table-wrap:has(tbody th:first-child > a) :is(thead th, tbody th):first-child::after { content: ""; position: absolute; top: -1px; bottom: -1px; left: -4px; z-index: -1; width: 4px; background: var(--paper); }
  /* prose tables: every scrolled column (12rem) fits the window left by the sticky first column, and the window holds
     whole columns only: the sticky column takes the part of the window left over after whole 12rem columns (8rem + 23 px
     at 375, + 8 at 360, + 62 at 414), so no column is ever cut at the right edge, at any rest position (the wrap is the
     size container, section below) */
  :root .tbl:not(.tldp) table:not(:has(thead th:nth-child(7))) { min-width: 0; width: max-content; }
  :root .tbl:not(.tldp) table:not(:has(thead th:nth-child(7))) :is(thead th, tbody th):first-child { width: calc(8rem + mod(100cqw - 8rem, 12rem)); }
  :root .tbl:not(.tldp) table:not(:has(thead th:nth-child(7))) :is(thead th, td):not(:first-child) { width: 12rem; }
  /* …and a swipe always comes to rest on a column edge: each scrolled column snaps beside the sticky one. Generic case
     (any wide table the 12rem rules below do not cover): the end padding is the strip left over after whole 12rem
     columns, and the end scroll-padding takes it out of the window keyboard focus counts as visible (less 1 px: a
     snapport narrower than a column would let the table rest inside it). The 8-column comparison (nothing focusable in
     its cells) leaves its fixed % columns for the 12rem rule of the prose tables: the sticky Provider column takes the
     strip left over after whole 12rem columns, so every rest position shows whole columns only */
  :root .tbl:not(.tldp) .table-wrap { scroll-snap-type: x mandatory; scroll-padding-inline: 8rem max(0px, mod(calc(100% - 8rem), 12rem) - 1px); padding-inline-end: mod(calc(100% - 8rem), 12rem); }
  :root .tbl.cmp .table-wrap:has(> table > thead th:nth-child(7)) { container-type: inline-size; padding-inline-end: 0; scroll-padding-inline: calc(8rem + mod(100% - 8rem, 12rem)) 0; }
  :root .tbl.cmp table:has(thead th:nth-child(7)) { min-width: 0; width: max-content; table-layout: auto; }
  :root .tbl.cmp table:has(thead th:nth-child(7)) :is(thead th, tbody th):first-child { width: calc(8rem + mod(100cqw - 8rem, 12rem)); }
  :root .tbl.cmp table:has(thead th:nth-child(7)) :is(thead th, td):not(:first-child) { width: 12rem; }
  :root .content > .tbl:not(.tldp) > .table-wrap:has(tbody th:first-child > a) { scroll-padding-inline: calc(8rem + 4px) max(0px, mod(calc(100% - 8rem - 4px), 12rem) - 1px); padding-inline-end: mod(calc(100% - 8rem), 12rem); }
  :root .tbl:not(.tldp) thead th:not(:first-child) { scroll-snap-align: start; }
  /* …the 12rem tables: the left-over strip belongs to the sticky column (above), so the window always holds whole
     columns, at the first stop as at the last; no end padding, and the start scroll-padding is that wider column (4 px
     more where the first-column links get their ring room). A link tabbed to in a column off the window scrolls its
     whole column in */
  :root .tbl:not(.tldp) .table-wrap:not(:has(> table > thead th:nth-child(7))) { container-type: inline-size; padding-inline-end: 0; scroll-padding-inline: calc(8rem + mod(100% - 8rem, 12rem)) 0; }
  :root .content > .tbl:not(.tldp) > .table-wrap:not(:has(> table > thead th:nth-child(7))):has(tbody th:first-child > a) { padding-inline-end: 0; scroll-padding-inline: calc(4px + 8rem + mod(100% - 4px - 8rem, 12rem)) 0; }
  /* payment confirmations table: out of the indented step column, all four columns visible */
  .step-list > li > .pay-table { grid-column: 1 / -1; }
  .pay-table :is(th, td) { padding-inline: 8px; }
  .pay-table :is(th, td):last-child { padding-right: 0; }
  .pay-table tbody th .coin-logo { width: 20px; height: 20px; min-width: 20px; margin-right: 6px; vertical-align: -4px; }
  .pay-table td:nth-child(2) { text-wrap: balance; } /* "Tron / (TRC-20)", not "Tron (TRC- / 20)" */
  .pay-table td:nth-child(4) { white-space: nowrap; }
  :root .tbl caption { padding-top: 10px; }

  /* one-row price table (extension pages): label / value rows, nothing to scroll */
  .t-product .tldp .table-wrap { overflow: visible; background: none; }
  .t-product .tldp table { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; border-top: 1px solid var(--line-2); }
  .t-product .tldp :is(thead, tbody, tr) { display: contents; }
  .t-product .tldp :is(th, td), .t-product .tldp :is(thead th, tbody th):first-child { position: static; display: block; width: auto; padding: 12px 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; text-align: left; white-space: normal; }
  :root .t-product .tldp :is(thead th, td) { width: auto; padding-left: 0; padding-right: 0; }
  :root .t-product .tldp thead th { padding: 12px 0; text-align: left; font: 500 15px/1.4 var(--font-body); color: var(--muted); }
  :root .t-product .tldp tbody :is(th, td) { padding-left: 16px; text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; }
  .t-product .tldp thead th:nth-child(1) { order: 1; } .t-product .tldp tbody th { order: 2; }
  .t-product .tldp thead th:nth-child(2) { order: 3; } .t-product .tldp tbody td:nth-child(2) { order: 4; }
  .t-product .tldp thead th:nth-child(3) { order: 5; } .t-product .tldp tbody td:nth-child(3) { order: 6; }
  .t-product .tldp thead th:nth-child(4) { order: 7; } .t-product .tldp tbody td:nth-child(4) { order: 8; }
  .t-product .tldp thead th:nth-child(5) { order: 9; } .t-product .tldp tbody td:nth-child(5) { order: 10; }
  .t-product .tldp thead th:nth-child(6) { order: 11; } .t-product .tldp tbody td:nth-child(6) { order: 12; }
  .t-product .tldp caption { display: block; order: 99; grid-column: 1 / -1; padding: 10px 0 0; }

  /* facts: label above value */
  .facts-table, .facts-table tbody, .facts-table tr { display: block; }
  .facts-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .facts-table tr:last-child { border-bottom: 0; padding-bottom: 0; } /* the block ends on its last line: the 40 px section rhythm */
  .facts-table :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
  :root .facts-table th { margin: 0 0 4px; font: 500 15px/1.4 var(--font-body); color: var(--muted); }
  :root .facts-table td { font-size: 16px; line-height: 1.55; color: var(--ink); }

  /* filters */
  .tldp-f legend { float: none; width: 100%; padding: 0 0 4px; line-height: 1.5; font-size: 15px; }
  .tldp-f span { min-height: 44px; font-size: 15px; }
  .tldp-q { max-width: none; height: 48px; font-size: 16px; }

  /* steps */
  .step-list > li { column-gap: 16px; }
  .step-list > li + li, .step-list > li.has-ic + li { margin-top: 28px; }
  .step-name { font-size: 19px; }
  :root .step-list > li.has-ic::before { font-size: 15px; } /* step numbers: 15 px floor on phones, like the other labels */
  :root .step-list > li > p:not(.step-name) { font-size: 16px; }
  :root :is(.content, .band) > .pay-steps > .pay-help { font-size: 15px; } /* the icon steps keep their 20 px gap: the 64 px indent still matches */

  /* trust */
  .trust { gap: 16px; }
  .trust > li { grid-row: auto; grid-template-rows: none; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px; }
  .trust-ic { grid-column: 1; margin: 0; }
  :root .trust .trust-t { grid-column: 2; margin: 0; }
  :root .trust .trust-d { grid-column: 1 / -1; margin-top: 12px; }
  :root .trust .trust-t { font-size: 19px; }

  /* ranking */
  .rank { padding: 24px 20px; }
  .rank.self::before { left: 19px; }
  .rank-head h3 { font-size: 22px; }
  .rank-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .pc { grid-template-columns: minmax(0, 1fr); }
  .method { padding: 20px; }
  :root .rank-badge, :root .rank-meta dt, :root .pc-h, :root .sources .src-u, :root .content > .ranking > .disclosure { font-size: 15px; }

  /* faq */
  .faq-item { padding: 20px 0; }
  .faq-item h3 { font-size: 19px; }
  :root .faq .faq-a { font-size: 16px; line-height: 1.6; }

  /* sources: the engine's inline-block links put the number on a title's last line and the meta on a line of its own;
     inline links with 12 px block padding keep 44 px targets without moving the line boxes */
  :root .sources li > a { display: inline; padding-block: 12px; }
  :root .sources li { margin: 0; padding-block: 10px; text-wrap: balance; }

  /* folds */
  .fold > summary { min-height: 56px; padding: 0 20px; font-size: 18px; }
  .fold > :not(summary) { padding: 4px 20px 20px; }

  /* cta */
  .cta { padding: 32px 20px; gap: 24px; border-radius: var(--r-lg); }
  .cta > div:first-child { flex-basis: 100%; }
  .content .cta .cta-h { font-size: 26px; }
  .cta-btns { width: 100%; }
  .cta-btns .btn { flex: 1 1 100%; }

  /* related + link grid */
  .related-list { grid-template-columns: minmax(0, 1fr); }
  .related-list li { padding: 12px 0 16px; }
  :root .related-list a { display: inline; min-height: 0; font-size: 18px; }
  .related-list li > a { display: block; padding: 10px 0; }
  /* (0,2,2) beats the inline rule above: a full-width 44 px target, its padding cancelled by the margin (no layout shift),
     hit-tested above the description that follows it */
  :root .related-list li > a { display: block; margin-block: -10px; position: relative; z-index: 1; }
  .lg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  :root .lg a { padding-right: 16px; }

  /* footer */
  .ftr { padding: 56px 0 24px; margin-top: var(--s7); }
  .ftr .wrap:first-child { row-gap: 40px; }
  .ftr .f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .ftr .f-col li { margin: 0; }
  :root .ftr .f-col a { display: block; min-height: 0; min-width: 0; padding: 12px 0; line-height: 1.35; }
  /* the two lists of each pair share their rows (subgrid): a two-line link moves both columns down together, so the
     links stay paired across the row; empty rows collapse, the 32 px padding keeps the gap between the pairs */
  .ftr .f-cols { row-gap: 0; }
  .ftr .f-col { display: grid; grid-row: span 12; grid-template-rows: subgrid; }
  .ftr .f-col > ul { display: grid; grid-row: span 11; grid-template-rows: subgrid; align-items: start; }
  .ftr .f-col:nth-child(n+3) > .f-h { padding-top: 32px; }
  :root .ftr :is(.f-h, .f-contact-h) { margin-bottom: 4px; font-size: 15px; }
  .ftr .f-pay { margin-top: 48px; }
  :root .ftr .coins-mini li, :root .ftr .f-pay-h, .ftr .f-pay-n, .ftr .f-bottom { font-size: 15px; }

  /* sticky buy bar: opaque, slim, one-line button */
  .sticky-cta { gap: 12px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); backdrop-filter: none; border-top: 1px solid var(--line-2); box-shadow: 0 -10px 24px -22px rgb(20 33 61 / .55); }
  :root .sticky-cta .sc-note { flex: 1 1 auto; max-width: none; line-height: 1.3; color: var(--ink-2); text-wrap: balance; }
  :root body .sticky-cta .btn { flex: 0 0 auto; min-height: 48px; padding: 0 18px; white-space: nowrap; }
  .sticky-cta .btn svg { display: none; }
  body.sticky-off .sticky-cta:focus-within { transform: none; } /* a bar that holds keyboard focus slides in (its .2s transition) */
  :root body.has-sticky { padding-bottom: 0; }
  body.has-sticky .ftr { padding-bottom: calc(24px + 64px + env(safe-area-inset-bottom)); }
}
/* price lists on phones: a swipe always comes to rest on a column edge, never through a price. A whole-rem sticky column
   (min-width: a width is ignored by the auto layout), each column snapping beside it, and a last column as wide as the
   window. No end scroll-padding (it made the snapport narrower than the WHOIS column at 360 px). The head rule becomes
   a border: with a whole-pixel first column the per-cell shadows left a 1 px gap in the sticky head. Up to 480 px only:
   a 7rem column would make the home table scroll at 753–760 px, where it fits today */
@media (max-width: 480px) {
  :root body:not(.t-product) .tldp :is(thead th, tbody th):first-child { min-width: 7rem; }
  :root body:not(.t-product) .tldp .table-wrap { scroll-snap-type: x mandatory; scroll-padding-inline: calc(7rem + 4px) 0; }
  /* …except while a sort button holds keyboard focus: the right-edge fade then counts as out of view again (the former
     3rem), so a head half under the edge scrolls in instead of staying cut */
  :root body:not(.t-product) .tldp .table-wrap:has(thead button:focus-visible) { scroll-padding-inline-end: calc(3rem + 4px); }
  :root body:not(.t-product) .tldp thead th:not(:first-child) { scroll-snap-align: start; }
  :root body:not(.t-product) .tldp td.tldp-r { min-width: calc(100vw - 2rem - 7rem); }
  /* …and the window holds whole columns only: the three prices share it exactly, WHOIS privacy and Restrictions each
     fill it, so every stop (prices / WHOIS / Restrictions) shows nothing cut at the right edge (the wrap is the size
     container: 100cqw is the column box) */
  :root body:not(.t-product) .tldp .table-wrap { container-type: inline-size; }
  :root body:not(.t-product) .tldp table { min-width: 0; }
  :root body:not(.t-product) .tldp :is(thead th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)) { min-width: calc((100cqw - 7rem) / 3); padding-inline: 8px; }
  :root body:not(.t-product) .tldp :is(thead th, td):nth-child(5), :root body:not(.t-product) .tldp td.tldp-r { min-width: calc(100cqw - 7rem); }
  :root body:not(.t-product) .tldp thead th:is(:nth-child(3), :nth-child(4)) { scroll-snap-align: none; }
  :root body:not(.t-product) .tldp thead th { box-shadow: none; border-bottom: 1px solid var(--line-2); }
  :root body:not(.t-product) .tldp thead th:first-child { box-shadow: inset -1px 0 0 var(--line); }
}
@media (max-width: 420px) {
  .ds-form .btn svg { display: none; }
}
/* below 371 px three link columns are narrower than one long word ("OrangeWebsite", ".photography"): two columns, so the
   page never scrolls sideways (WCAG 1.4.10 at 320 px) */
@media (max-width: 370px) {
  .lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below 340 px the header row is 13 px short: tighter gaps keep the full name and a round seal */
@media (max-width: 339px) {
  .hdr-in { gap: 8px; }
  .menu { gap: 8px; padding: 0 10px; }
  .logo-mark { flex: none; }
}

/* ------------------------------------------------------------------------------------------------ 16. forced colours */
/* states drawn with a background or a shadow, which forced colours drop: the selected price filter and the current page */
@media (forced-colors: active) {
  .tldp-f input:checked + span { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  :root .nav a[aria-current] { text-decoration: underline 2px; text-underline-offset: .35em; }
}