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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================================================
   3.8 — phones (checked at 375 px on home, pricing, location, guide, FAQ and API pages of the 5 sites):
   no sideways scroll, touch targets of at least 44 px, no text under 15 px, one-line top bar, balanced pills.
   `:root` raises the specificity above the site theme.css rules of the same shape (they load after this file).
   ========================================================================================================== */
.table-wrap { position: relative; } /* keeps absolutely positioned children (.vh) inside the scroll box */
main, .ftr { overflow-wrap: break-word; } /* long URLs in plain text wrap instead of widening the page */
/* a long translated word in a heading ("Datenschutzerklärung" on a phone) breaks at a syllable, with a hyphen */
html:not([lang|="en"]) :is(h1, h2, h3, h4) { -webkit-hyphens: auto; hyphens: auto; }
.kicker, .badges li { text-wrap: balance; }
/* a sentence stays on one line, and wraps inside only when it is longer than the line (German, Turkish kickers on phones);
   in a flex kicker (themes that lay the kicker out as a row) the .k-t box is the one text item beside the marker, and shrinks to fit */
.kicker .k-s { display: inline-block; max-width: 100%; }
.kicker .k-t { min-width: 0; }
.topbar .tb-sep { white-space: pre; }
@media (max-width: 760px) {
  /* top bar: one line, the first statement only (the rest is repeated on the page) */
  :root .topbar { padding: 10px 0; font-size: 15px; line-height: 1.35; }
  .topbar .wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .tb-sep, .topbar .tb-s ~ .tb-s { display: none; }

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

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

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

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

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

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

/* Buying path of the VPS hosting sites (engine/lib/buyflow.mjs, docs/CONTENT-GUIDE.md § 14.4): the "timeline" block
   (tl-*), the "configurator" block (cfg-*) and the site.json "trustStrip" (trust-strip). Neutral base on the shared
   variables of site.css; each site's theme.css gives them its own look. Added by engine/build.mjs only to a site that
   uses one of the three, so no other site's stylesheet changes. Phones: 15 px text floor, 44 px touch targets, no
   sideways scroll at 375 px (docs 3.8). Motion: none here; a theme's own motion stops under prefers-reduced-motion. */

/* ---------------------------------------------------------------- trust strip */
.trust-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; list-style: none; margin: 14px 0 0; padding: 0; font-size: .84rem; line-height: 1.4; color: var(--muted); }
/* the list items beat the "content li" margins of the themes (ul.x > li: one more element in the selector) */
ul.trust-strip > li, ol.tl > li, ul.tl-coins > li, ul.tl-places > li { margin: 0; }
.trust-strip li { display: inline-flex; align-items: center; gap: 7px; padding: 0; min-width: 0; }
.trust-strip a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.trust-strip a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.trust-strip .ic { flex: none; width: 15px; height: 15px; color: var(--accent); }
.hero-btns + .trust-strip { margin: -6px 0 18px; }
.cta > .trust-strip { flex: 1 1 100%; margin: 4px 0 0; color: inherit; opacity: .85; }
.cta > .trust-strip .ic { color: currentColor; }

/* ---------------------------------------------------------------- timeline */
.timeline { margin: 2.4em 0; }
.tl { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.tl-step { position: relative; padding: 0 0 26px 54px; min-width: 0; }
.tl-step::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: var(--border); }
.tl-step:last-child::before { display: none; }
.tl-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; font: 600 .78rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tl-n { position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--accent); font: 800 .82rem/1 var(--font-mono); letter-spacing: 0; }
.tl-dur { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); letter-spacing: .02em; text-transform: none; }
.tl-name { margin: 0 0 4px; font: 700 1.08rem/1.35 var(--font-head); color: var(--text); }
.tl-text { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
/* .tl-x: what a step shows under its text (coins, confirmation times, locations, login command) */
.tl-x { margin-top: 12px; min-width: 0; }
.tl-coins { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tl-coins li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border: 1px solid var(--border); border-radius: 999px; font: 600 .78rem/1.3 var(--font-mono); color: var(--text); }
.tl-coins .coin-logo { width: 18px; height: 18px; }
.tl-eta-h { margin: 0 0 6px; font: 600 .74rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tl-eta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 4px 14px; margin: 0; }
.tl-eta div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--border); font: .82rem/1.4 var(--font-mono); }
.tl-eta dt { color: var(--text); }
.tl-eta dd { margin: 0; color: var(--muted); white-space: nowrap; }
.tl-places { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tl-places li { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 6px; border: 1px solid var(--border); border-radius: 999px; font-size: .84rem; line-height: 1.35; color: var(--text); }
.tl-places .flag { width: 16px; height: 12px; margin: 0; border-radius: 2px; }
.tl-cmd { margin: 0; }
.tl-cmd code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 960px) {
  .tl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; }
  .tl-step { padding: 54px 0 0; }
  .tl-step::before { left: 44px; right: -22px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .tl-n { top: 0; }
}

/* ---------------------------------------------------------------- configurator */
.configurator { margin: 2.4em 0; }
.cfg { display: grid; gap: 22px; margin-top: 20px; }
@media (min-width: 980px) {
  .cfg { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: start; gap: 28px; }
  .cfg-sum { position: sticky; top: 96px; }
}
.cfg-fields { display: grid; gap: 22px; min-width: 0; }
.cfg-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.cfg-legend { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; font: 700 .82rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.cfg-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 7px; background: var(--surface-2); color: var(--accent); font-size: .78rem; letter-spacing: 0; }
.cfg-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.cfg-terms .cfg-opts, .cfg-locs .cfg-opts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.cfg-opt { position: relative; display: flex; min-width: 0; margin: 0; cursor: pointer; }
.cfg-opt input { -webkit-appearance: none; appearance: none; position: absolute; z-index: 1; top: 13px; right: 12px; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--border); border-radius: 50%; background: var(--bg); cursor: pointer; }
.cfg-opt input:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 4px, var(--bg) 4.5px); }
.cfg-opt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg-o { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.cfg-opt:has(input:checked) .cfg-o { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cfg-opt:hover .cfg-o { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.cfg-opt.is-full { cursor: not-allowed; }
.cfg-opt.is-full .cfg-o { opacity: .6; background: var(--surface); }
.cfg-opt.is-full input { cursor: not-allowed; }
.cfg-o-name { padding-right: 26px; font-weight: 700; color: var(--text); line-height: 1.3; }
.cfg-o-spec { font-size: .84rem; line-height: 1.4; color: var(--muted); }
.cfg-o-price { margin-top: auto; padding-top: 6px; font: 700 1.02rem/1.25 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.cfg-o-price small { display: block; font: 400 .74rem/1.3 var(--font-mono); color: var(--muted); }
.cfg-o-off { margin-top: 4px; font: 600 .78rem/1.3 var(--font-mono); color: var(--muted); }
.cfg-o-off.is-off { color: var(--yes); }
.cfg-o-full { margin-top: 4px; font: 600 .74rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cfg-locs .flag { margin: 0 0 4px; }
.cfg-sum { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--surface); }
.cfg-sum-k { margin: 0 0 8px; font: 700 .76rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cfg-live > p { margin: 0; }
.cfg-pick { font-weight: 700; color: var(--text); line-height: 1.4; }
.cfg-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--border); }
.cfg-total-l { font-size: .9rem; color: var(--muted); }
.cfg-total-v { font: 800 1.9rem/1.1 var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cfg-month { margin-top: 4px !important; text-align: right; font: .86rem/1.4 var(--font-mono); color: var(--muted); }
.cfg-save { margin-top: 10px !important; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.cfg-save.is-on { color: var(--yes); font-weight: 600; }
.cfg-go { width: 100%; margin-top: 16px; justify-content: center; }
.cfg-go[disabled] { opacity: .55; cursor: not-allowed; }
.cfg-sum .trust-strip { margin-top: 14px; gap: 6px 14px; }
.cfg-note, .cfg-none { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }

/* phones: the plans as rows (radio, name and specs, price on the right) */
@media (max-width: 560px) {
  .cfg-plans .cfg-opts { grid-template-columns: minmax(0, 1fr); }
  .cfg-plans .cfg-o { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "spec price"; align-items: center; column-gap: 12px; padding: 12px 14px 12px 46px; }
  .cfg-plans .cfg-opt input { left: 15px; right: auto; top: 50%; margin-top: -9px; }
  .cfg-plans .cfg-o-name { grid-area: name; padding-right: 0; }
  .cfg-plans .cfg-o-spec { grid-area: spec; }
  .cfg-plans .cfg-o-price { grid-area: price; margin: 0; text-align: right; }
}
@media (max-width: 760px) {
  :root :is(.trust-strip, .tl-k, .tl-text, .tl-coins li, .tl-places li, .tl-eta-h, .tl-eta div, .cfg-legend, .cfg-o-spec, .cfg-o-price small, .cfg-o-off, .cfg-o-full, .cfg-sum-k, .cfg-total-l, .cfg-month, .cfg-save, .cfg-note, .cfg-none) { font-size: 15px; }
  .trust-strip { gap: 0 16px; }
  .trust-strip a { min-height: 44px; }
  .cfg-o { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .cfg-o, .cfg-opt input, .trust-strip a { transition: none !important; }
}

/* "pricing" block with "termSwitch": true (engine/lib/blocks.mjs): the rental lengths as a row above the cards; the
   chosen one shows on every card what a month costs and the total billed (buyflow.js). Each site restyles it. */
.term-switch { margin: 6px 0 18px; padding: 0; border: 0; min-width: 0; }
.ts-legend { margin: 0 0 8px; padding: 0; font: 600 .78rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ts-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; width: fit-content; max-width: 100%; }
.ts-opt { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .92rem; }
.ts-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ts-opt:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.ts-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ts-off { font: 600 .74rem/1 var(--font-mono); padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ts-off.is-flex { background: none; padding: 0; opacity: .75; font-weight: 500; }
.ts-opt:has(input:checked) .ts-off { background: color-mix(in srgb, var(--accent-ink) 16%, transparent); }
.ts-per { font-size: .5em; font-weight: 500; letter-spacing: 0; opacity: .7; }
.ts-billed { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }
.pricing.ts-on .plan-terms { display: none; }
@media (max-width: 560px) {
  .ts-opts { border-radius: 16px; width: 100%; }
  .ts-opt { flex: 1 1 calc(50% - 6px); justify-content: center; border-radius: 12px; }
  .ts-off.is-flex { display: none; }
}

/* Aurelstar — "Aureole" (4 November 2026). Telegram Stars and Premium paid in crypto. A dark 2026 product page lit from one
   source: an eclipse. Deep midnight ink (#090a18, neither violet nor blue-cyan), warm molten gold as the only light (pale gold
   → amber, dark ink on it), the fine lines of a star chart, a corona ring and a soft halo behind the head of every page,
   smoked-glass panels with thin gold edges. One cool tone only, a moon grey for the orbits of Premium.
   Colours come from site.json → theme (sites/aurelstar/_research/theme.json); everything else lives here, including every
   style of the hero visual "starchart" (engine/lib/visuals/starchart.mjs, classes sy-*).
   Type: Outfit (headings, light weights, and every price, tabular figures) and Onest (text and micro-labels), self-hosted in
   engine/assets/fonts/aurelstar/ (SIL OFL 1.1, licences beside the files), with metric-adjusted fallbacks. No monospace:
   the sister sites price in mono, this one does not. Onest carries Latin, Latin Extended, Cyrillic and Vietnamese; Outfit
   carries Latin and Latin Extended only, so headings switch to Onest for uk and vi. Japanese, Korean, Thai and Hindi fall
   back to system fonts.
   Home: headline left, the price list as a star chart right; packs and plans as a bento (the last card wide). Pricing cards
   grow a star by pack, the Premium ones an orbit lit by months. Steps are stars joined on a line. The closing call-to-action
   is an eclipse rising from the bottom of its panel. Motion (constellation drawing, stars rising, breathing glow, twinkle,
   hover lift, section reveal) stops under prefers-reduced-motion.
   Contrast (WCAG AA). Computed from these tokens: on the night #090a18, text #f7f2e6 17.6:1, body #dcd7cb 13.7:1, muted
   #b0acb5 8.8:1, link #ffd98a 14.6:1, gold #f6bd4a 11.5:1; on the glass panels (#212132 at their lightest), text 14.2:1, body
   11.0:1, card text #c8c3b9 9.0:1, muted 7.1:1, link 11.7:1; on the honest notice (#3c2c1e at its warmest), text 12.0:1, its
   title #ffe9b4 11.2:1; ink #160f04 on the action gradient 16.8:1 (pale end), 13.7:1, 10.6:1, 8.4:1 (amber end). Measured in
   the browser (scratchpad cdp.mjs, every gradient stop behind a text taken as its background, so harsher than what is
   seen): no failure on home, pricing, how-it-works, price list, FAQ and checkout; the lowest value is 5.1:1, the note of the
   lit stat tile. Small text inside lit panels uses #c8c3b9, not the muted grey, for that reason. */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/as-outfit-latin-wght.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: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/as-outfit-latin-ext-wght.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; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/as-onest-latin-wght.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: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/as-onest-latin-ext-wght.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/as-onest-vietnamese-wght.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/as-onest-cyrillic-wght.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Outfit Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 95%; ascent-override: 105%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 102%; ascent-override: 95%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --wrap: 1240px;
  --night: #090a18;
  --night-2: #0e0f20;
  --ink: #f7f2e6;
  --ink-2: #dcd7cb;
  --ink-3: #c8c3b9;
  --mute: #b0acb5;
  --mute-2: #8a8693;
  --gold: #f6bd4a;
  --gold-hi: #ffd98a;
  --pale: #ffe9b4;
  --amber: #ee9a1c;
  --moon: #c9cfe4;
  --on: #160f04;
  --line: rgb(255 226 170 / .10);
  --line-2: rgb(255 226 170 / .17);
  --line-3: rgb(255 226 170 / .30);
  --grad: linear-gradient(105deg, #fff0cc 0%, #ffd677 38%, #f8b53e 72%, #ee9a1c 100%);
  --grad-text: linear-gradient(100deg, #fff1cf 0%, #ffdb86 48%, #f9bb4a 100%);
  --edge: linear-gradient(150deg, rgb(255 222 158 / .46), rgb(255 255 255 / .06) 34%, rgb(255 255 255 / .03) 66%, rgb(238 154 28 / .28));
  --edge-hot: linear-gradient(150deg, #ffe3a6, rgb(246 189 74 / .3) 44%, rgb(238 154 28 / .72));
  --glass: linear-gradient(180deg, rgb(255 244 220 / .055), rgb(255 244 220 / .014));
  --pane: linear-gradient(180deg, rgb(21 22 42 / .9), rgb(12 13 28 / .9));
  --glow-in: inset 0 1px 0 rgb(255 240 205 / .09), inset 0 0 40px -18px rgb(246 189 74 / .26);
  --sh: 0 1px 1px rgb(0 0 0 / .35), 0 28px 60px -36px rgb(0 0 0 / .9);
  --sh-hot: 0 1px 1px rgb(0 0 0 / .3), 0 34px 84px -36px rgb(246 175 60 / .46);
  --blur: blur(20px) saturate(1.35);
  --r-s: 12px;
  --r: 18px;
  --r-l: 26px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr-off: 96px;
  --focus: var(--pale);
  /* the corona behind every page head: its centre and radius (the chart's first ring has the same radius) */
  --hx: 76vw;
  --hy: 262px;
  --hr: 340px;
  /* an eight-point star, as a mask */
  --star-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,0 13.2,9 17.4,6.6 15,10.8 24,12 15,13.2 17.4,17.4 13.2,15 12,24 10.8,15 6.6,17.4 9,13.2 0,12 9,10.8 6.6,6.6 10.8,9'/%3E%3C/svg%3E");
  /* rings, hour lines and a graduated circle of a star chart */
  --chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-700 -700 1400 1400' fill='none' stroke='%23ffdf9e'%3E%3Cg stroke-opacity='.11'%3E%3Ccircle r='440'/%3E%3Ccircle r='560'/%3E%3Ccircle r='690'/%3E%3Cpath d='M0-340V-690M0 340V690M-340 0H-690M340 0H690M294-170L598-345M170-294L345-598M-294-170L-598-345M-170-294L-345-598M294 170L598 345M170 294L345 598M-294 170L-598 345M-170 294L-345 598'/%3E%3C/g%3E%3Ccircle r='440' stroke-opacity='.3' stroke-width='6' stroke-dasharray='1 10.52'/%3E%3C/svg%3E");
  /* star dust and a light grain against banding in the gold (one tile, behind the head of the page) */
  --dust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3Cg fill='%23fff3da'%3E%3Ccircle cx='37' cy='61' r='.9' opacity='.55'/%3E%3Ccircle cx='121' cy='18' r='.6' opacity='.4'/%3E%3Ccircle cx='203' cy='94' r='1.1' opacity='.5'/%3E%3Ccircle cx='288' cy='41' r='.7' opacity='.35'/%3E%3Ccircle cx='366' cy='126' r='.9' opacity='.45'/%3E%3Ccircle cx='470' cy='72' r='.6' opacity='.5'/%3E%3Ccircle cx='82' cy='174' r='.7' opacity='.35'/%3E%3Ccircle cx='158' cy='236' r='1' opacity='.45'/%3E%3Ccircle cx='254' cy='191' r='.6' opacity='.3'/%3E%3Ccircle cx='431' cy='210' r='1.1' opacity='.5'/%3E%3Ccircle cx='24' cy='298' r='.8' opacity='.4'/%3E%3Ccircle cx='332' cy='281' r='.7' opacity='.4'/%3E%3Ccircle cx='108' cy='352' r='.6' opacity='.45'/%3E%3Ccircle cx='221' cy='331' r='.9' opacity='.35'/%3E%3Ccircle cx='494' cy='340' r='.7' opacity='.45'/%3E%3Ccircle cx='60' cy='446' r='1' opacity='.4'/%3E%3Ccircle cx='178' cy='478' r='.6' opacity='.5'/%3E%3Ccircle cx='296' cy='418' r='1' opacity='.45'/%3E%3Ccircle cx='404' cy='462' r='.7' opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
/* headings: Outfit has no Cyrillic and no full Vietnamese, Onest has both */
:root:lang(uk), :root:lang(vi) { --font-head: "Onest", "Onest Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* ---------------------------------------------------------------- base: night, corona, chart, dust */
html { overflow-x: clip; scroll-padding-top: var(--hdr-off); background: var(--night); scrollbar-color: #3b3748 var(--night); }
body {
  position: relative; isolation: isolate; overflow-x: clip;
  background: var(--night); color: var(--ink-2);
  font-size: 16.5px; line-height: 1.68; letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* the aureole behind the head of every page: an eclipse (a dark disc, a thin corona, the soft light outside it), the chart
   around it, a trace of midnight blue on the other side; everything fades out downwards */
body::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1160px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle var(--hr) at var(--hx) var(--hy), transparent 98%, rgb(255 232 182 / .5) 99.1%, rgb(246 175 60 / .16) 99.7%, transparent 100%),
    radial-gradient(circle calc(var(--hr) * 2.4) at var(--hx) var(--hy), rgb(5 5 13 / .72) 0 41.4%, rgb(246 175 60 / .2) 41.8%, rgb(246 175 60 / .075) 56%, rgb(246 175 60 / .02) 72%, transparent 84%),
    radial-gradient(44% 460px at 6% 0, rgb(70 76 176 / .15), transparent 72%),
    var(--chart) calc(var(--hx) - 700px) calc(var(--hy) - 700px) / 1400px 1400px no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent); mask-image: linear-gradient(180deg, #000 56%, transparent);
}
body::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 1160px; z-index: -2; pointer-events: none; background: var(--dust) 0 0 / 520px 520px;
  -webkit-mask-image: linear-gradient(180deg, #000 44%, transparent), linear-gradient(90deg, #000 0 7%, rgb(0 0 0 / .1) 10% 64%, #000 72%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 44%, transparent), linear-gradient(90deg, #000 0 7%, rgb(0 0 0 / .1) 10% 64%, #000 72%); mask-composite: intersect;
}
::selection { background: rgb(246 189 74 / .34); color: #fff; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible, .btn:focus-visible { outline: 2px solid var(--pale); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--wrap); padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }

h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-head); text-wrap: balance; }
h1 { font-weight: 300; line-height: 1.04; letter-spacing: -.032em; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.6rem); font-weight: 300; line-height: 1.1; letter-spacing: -.028em; margin: 2.2em 0 .55em; scroll-margin-top: var(--hdr-off); }
h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.3; letter-spacing: -.012em; margin: 1.8em 0 .45em; scroll-margin-top: var(--hdr-off); }
/* scripts drawn by system fonts: no negative tracking, and a regular weight, so the Latin words in Outfit match the system glyphs beside them */
:is(:lang(ja), :lang(ko), :lang(th), :lang(hi)) :is(h1, h2, h3, .cta-h, .plan-name, .plan-price, .stat-v, .qa-q, .trust-t, .step-name) { letter-spacing: 0; font-weight: 400; }
:is(:lang(ja), :lang(ko), :lang(th), :lang(hi)) :is(.kicker, .qa-label, .sy-k, .sy-pk, .pt-h, .f-h, .f-contact-h, .f-pay-h, .toc-h, .sources summary) { letter-spacing: .02em; }
p, li { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--gold-hi); text-decoration-line: underline; text-decoration-color: rgb(255 217 138 / .36); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
a:hover { color: var(--pale); text-decoration-color: currentColor; }
li::marker { color: var(--gold); }
code { font-family: var(--font-mono); font-size: .86em; color: var(--pale); background: rgb(246 189 74 / .09); border: 1px solid rgb(246 189 74 / .2); border-radius: 6px; padding: .08em .38em; }
:is(.plan-price, .plan-unit, .tbl td, .tiers td, .facts-table td, .stat-v, .sy-pr, .sy-u, .hp-from strong, .hp-p, .badges li) { font-variant-numeric: tabular-nums; }
hr { border: 0; height: 1px; background: var(--line-2); }
h1 em, .cta-h em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
blockquote { border-left: 2px solid var(--gold); color: var(--ink-2); }

/* ---------------------------------------------------------------- top strip + floating glass header */
.topbar { position: relative; background: rgb(6 6 15 / .9); color: #d9d4c8; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; padding: 8px 0; }
.topbar strong { color: var(--gold-hi); font-weight: 600; filter: none; }
.topbar .tb-sep { color: var(--mute-2); }
.hdr { top: 10px; z-index: 30; margin-top: 10px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-in { position: relative; width: calc(100% - 20px); max-width: calc(var(--wrap) - 64px); min-height: 62px; gap: 22px; padding: 0 12px 0 16px; border: 1px solid transparent; border-radius: 20px; background: linear-gradient(180deg, rgb(20 21 40 / .72), rgb(12 13 28 / .72)) padding-box, var(--edge) border-box; box-shadow: var(--glow-in), 0 18px 44px -28px rgb(0 0 0 / .9); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
@media (min-width: 760px) { .hdr-in { width: calc(100% - 64px); padding: 0 14px 0 20px; } }
.hdr .logo-img { height: 32px; }
.hdr .nav { gap: 2px; margin-inline: auto; }
.hdr .nav a { padding: 7px 14px; border-radius: 999px; background: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color .15s ease, background-color .15s ease; }
.hdr .nav a:hover { color: var(--ink); background: rgb(255 244 220 / .07); }
.hdr .nav a[aria-current] { color: var(--pale); background: rgb(246 189 74 / .12); box-shadow: inset 0 0 0 1px rgb(246 189 74 / .3); }
.hdr-login { font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.hdr-login:hover { color: var(--ink); }
.hdr .hdr-cta { padding: 9px 18px; font-size: 14.5px; }
.lang-menu > summary { border-radius: 999px; color: var(--ink-2); }
.lang-menu > summary:hover, .lang-menu[open] > summary { color: var(--ink); background: rgb(255 244 220 / .07); }
.lm-list { background: rgb(15 16 33 / .97); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 60px -28px rgb(0 0 0 / .95); }
.lm-list a { color: var(--ink-2); }
.lm-list a:hover, .lm-list a:focus-visible { background: rgb(255 244 220 / .07); color: var(--ink); }
.lm-list a[aria-current] { color: var(--gold-hi); }
.menu { border-radius: 999px; border: 1px solid var(--line-3); background: rgb(255 244 220 / .05); color: var(--ink); font-weight: 500; font-size: 14px; padding: 7px 15px; }
.menu:hover, .menu[aria-expanded="true"] { background: rgb(255 244 220 / .1); }
/* the dropdown of the menu button: a glass sheet under the bar */
@media (min-width: 861px) and (max-width: 1000px) {
  .menu { display: inline-block; margin-left: auto; }
  .hdr .nav { display: none; }
  .hdr .nav.open { display: flex; }
}
@media (max-width: 1000px) {
  .hdr-in { gap: 12px; }
  .hdr .nav { position: absolute; top: calc(100% + 8px); left: -1px; right: -1px; flex-direction: column; gap: 2px; margin: 0; padding: 10px; border: 1px solid var(--line-2); border-radius: 20px; background: rgb(14 15 32 / .98); box-shadow: 0 40px 60px -30px rgb(0 0 0 / .95); }
  .hdr .nav a { padding: 13px 14px; font-size: 16px; border-bottom: 0; border-radius: 12px; }
  .hdr .nav a:hover, .hdr .nav a[aria-current] { color: var(--ink); background: rgb(255 244 220 / .07); }
  .menu { margin-left: auto; }
}

/* ---------------------------------------------------------------- buttons: a pill of molten gold, a glass one */
.btn { border-radius: 999px; font-family: var(--font-body); font-weight: 600; letter-spacing: -.005em; border-width: 1px; transition: transform .25s var(--ease), box-shadow .3s ease, background-color .2s ease, background-position .5s var(--ease), border-color .2s ease, color .2s ease; }
.btn-primary { position: relative; background: var(--grad); background-size: 160% 100%; background-position: 0 0; color: var(--on); border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -1px 0 rgb(150 86 10 / .35), 0 14px 34px -14px rgb(246 175 60 / .75); }
.btn-primary:hover { background: var(--grad); background-size: 160% 100%; background-position: 100% 0; color: var(--on); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -1px 0 rgb(150 86 10 / .35), 0 18px 46px -14px rgb(246 175 60 / .95); }
.btn-ghost, .btn:not(.btn-primary) { background: rgb(255 244 220 / .045); border-color: var(--line-3); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-ghost:hover, .btn:not(.btn-primary):hover { background: rgb(246 189 74 / .12); border-color: rgb(255 217 138 / .6); color: #fff; transform: translateY(-1px); }
.btn-lg { padding: 14px 26px; font-size: 15.5px; }
.btn-sm { padding: 8px 16px; }

/* ---------------------------------------------------------------- page head */
.crumbs ol { align-items: center; margin-top: 26px; font-size: 13px; line-height: 1.4; color: var(--mute); }
.crumbs li + li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: .02em; background: var(--gold); opacity: .8; -webkit-mask: var(--star-m) center / contain no-repeat; mask: var(--star-m) center / contain no-repeat; }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }
.page-head, .page-head.hero { padding: 30px 0 14px; max-width: 900px; }
.page-head h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); margin-bottom: .36em; max-width: 21ch; }
/* the kicker: no chip, a star and a fine rule */
.kicker { display: inline-flex; align-items: center; gap: 11px; margin: 0 0 20px; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; color: var(--pale); }
.kicker::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--grad); -webkit-mask: var(--star-m) center / contain no-repeat; mask: var(--star-m) center / contain no-repeat; }
.kicker::after { content: ""; width: 44px; height: 1px; flex: none; background: linear-gradient(90deg, var(--gold), transparent); }
@media (max-width: 1239px) { .t-home .kicker::after { display: none; } }
.lede { font-size: clamp(1.05rem, .99rem + .3vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.lede strong { color: var(--ink); }
.meta { font-size: 13px; line-height: 1.5; color: var(--mute); margin-top: 12px; }
.badges { gap: 8px; }
.badges li { border: 1px solid var(--line-2); border-radius: 999px; background: rgb(255 244 220 / .04); color: var(--ink-2); font-size: 13.5px; font-weight: 400; line-height: 1.3; padding: 7px 14px; }
.badges strong { color: var(--pale); font-weight: 500; }
.hero-btns { margin: 26px 0 16px; }
/* the honest line of the hero: said plainly, on its own edge, never in small print */
.hero-note { align-items: flex-start; gap: 10px; margin: 8px 0 14px; padding: 10px 14px 10px 12px; max-width: 60ch; border-left: 2px solid var(--gold); border-radius: 0 10px 10px 0; background: linear-gradient(90deg, rgb(246 189 74 / .1), rgb(246 189 74 / .015)); color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.hero-note .ic { display: none; }

/* ---------------------------------------------------------------- home hero: headline left, the star chart right */
.t-home .page-head.hero { position: relative; isolation: isolate; max-width: none; padding: 46px 0 30px; }
.t-home .page-head.hero h1 { font-size: clamp(2.35rem, 1.2rem + 4.4vw, 3.75rem); line-height: 1.03; letter-spacing: -.034em; margin-bottom: .4em; max-width: 15ch; }
.t-home .hero-main .lede { max-width: 50ch; }
.t-home .hero-visual { margin-top: 36px; }
/* under 1100 px: the headline over the chart (two columns would squeeze both), the chart at a size that keeps its labels */
@media (min-width: 960px) and (max-width: 1099px) { .t-home .page-head.hero.has-visual { display: block; } .t-home .has-visual .hero-visual { margin-top: 40px; } }
@media (max-width: 1099px) { .hero-sky { max-width: 720px; margin-inline: auto; } }
@media (min-width: 1100px) {
  .t-home .page-head.hero.has-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 628px); gap: 52px; align-items: center; padding: 52px 0 36px; }
  .t-home .page-head.hero.has-visual h1 { font-size: clamp(2.8rem, 1.1rem + 2.7vw, 3.6rem); }
}

/* hero.visual "starchart": the packs as a constellation, Premium as orbits (engine/lib/visuals/starchart.mjs) */
.hero-sky { position: relative; margin: 0; padding: 18px 18px 14px; border: 1px solid transparent; border-radius: var(--r-l); background: radial-gradient(64% 40% at 86% 10%, rgb(246 175 60 / .17), transparent 72%) padding-box, linear-gradient(180deg, rgb(19 20 40 / .84), rgb(10 11 24 / .92)) padding-box, var(--edge) border-box; box-shadow: var(--glow-in), var(--sh-hot); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.sy-k, .sy-pk { margin: 0 2px; font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.sy-stage { position: relative; margin-top: 6px; container: sy / inline-size; }
.sy-svg { display: none; width: 100%; height: auto; }
.sy-ring { fill: none; stroke: rgb(255 226 170 / .09); }
.sy-ring.is-major { stroke: rgb(255 226 170 / .16); }
.sy-hour { stroke: rgb(255 226 170 / .055); }
.sy-grad { fill: none; stroke: rgb(255 226 170 / .3); stroke-width: 8; stroke-dasharray: .5 4.5; }
.sy-d { fill: #fff3da; opacity: .5; }
.sy-line { fill: none; stroke: rgb(255 214 130 / .62); stroke-width: 1.8; stroke-linejoin: round; }
.sy-glow-a { stop-color: #ffcd76; stop-opacity: .55; }
.sy-glow-b { stop-color: #f6ad3c; stop-opacity: .15; }
.sy-glow-c { stop-color: #f6ad3c; stop-opacity: 0; }
.sy-f0 { fill: #b0690e; }
.sy-f1 { fill: #e08f15; }
.sy-f2 { fill: #f9bf4e; }
.sy-f3 { fill: #ffeec6; }
.sy-mark { fill: none; stroke: #ffe3a6; stroke-width: 1; opacity: 0; transition: opacity .2s ease; }
/* narrow: the list is the chart, the stars in a column joined by a line */
.sy-packs { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sy-packs::before { content: ""; position: absolute; left: 22px; top: 24px; bottom: 28px; width: 1px; background: linear-gradient(180deg, rgb(255 214 130 / .25), rgb(255 214 130 / .6)); }
.sy-p { position: relative; margin: 0; }
.sy-p a { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 58px; padding: 7px 8px 7px 0; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .2s ease, box-shadow .2s ease; }
.sy-p a::before { content: ""; grid-column: 1; grid-row: 1 / 3; justify-self: center; width: calc(11px + var(--g, .3) * 33px); aspect-ratio: 1; background: var(--grad); -webkit-mask: var(--star-m) center / contain no-repeat; mask: var(--star-m) center / contain no-repeat; }
.sy-q { grid-column: 2; grid-row: 1; font-family: var(--font-head); font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.sy-u { grid-column: 2; grid-row: 2; font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.sy-pr { grid-column: 3; grid-row: 1 / 3; font-family: var(--font-head); font-size: 19px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--gold-hi); }
.sy-p a:hover, .sy-p a:focus-visible { background: rgb(255 226 170 / .07); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--ink); }
/* wide enough: each link sits beside its star in the sky */
@container sy (min-width: 500px) {
  .sy-svg { display: block; }
  .sy-packs { position: absolute; inset: 0; display: block; }
  .sy-packs::before { display: none; }
  .sy-p { position: absolute; top: calc(var(--y) * 1%); }
  .sy-p.is-r { left: calc(var(--a) * 1%); translate: 0 -30%; }
  .sy-p.is-l { right: calc(var(--a) * 1%); translate: 0 -80%; }
  .sy-p a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 9px; min-height: 0; padding: 3px 9px; }
  .sy-p.is-l a { justify-content: flex-end; text-align: right; }
  /* the star under the link is part of the link */
  .sy-p a::before { position: absolute; top: 50%; translate: 0 -50%; width: calc(var(--d) * 1cqw); border-radius: 50%; background: none; -webkit-mask: none; mask: none; }
  .sy-p.is-r a::before { left: calc((var(--o) + var(--d) / 2) * -1cqw); }
  .sy-p.is-l a::before { right: calc((var(--o) + var(--d) / 2) * -1cqw); }
  .sy-q { font-size: 15px; }
  .sy-pr { font-size: 17.5px; }
  .sy-u { flex-basis: 100%; font-size: 12.5px; }
}
.hero-sky:has(.sy-p:nth-child(1) a:is(:hover, :focus-visible)) g.sy-s:nth-of-type(1) .sy-mark,
.hero-sky:has(.sy-p:nth-child(2) a:is(:hover, :focus-visible)) g.sy-s:nth-of-type(2) .sy-mark,
.hero-sky:has(.sy-p:nth-child(3) a:is(:hover, :focus-visible)) g.sy-s:nth-of-type(3) .sy-mark,
.hero-sky:has(.sy-p:nth-child(4) a:is(:hover, :focus-visible)) g.sy-s:nth-of-type(4) .sy-mark,
.hero-sky:has(.sy-p:nth-child(5) a:is(:hover, :focus-visible)) g.sy-s:nth-of-type(5) .sy-mark,
.hero-sky:has(.sy-p:nth-child(6) a:is(:hover, :focus-visible)) g.sy-s:nth-of-type(6) .sy-mark,
.hero-sky:has(.sy-p:nth-child(7) a:is(:hover, :focus-visible)) g.sy-s:nth-of-type(7) .sy-mark,
.hero-sky:has(.sy-p:nth-child(8) a:is(:hover, :focus-visible)) g.sy-s:nth-of-type(8) .sy-mark { opacity: .9; }
/* Premium: a row of orbits */
.sy-prem { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sy-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; margin: 9px 0 0; padding: 0; list-style: none; }
.sy-t { margin: 0; min-width: 0; }
.sy-t a { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; align-items: center; height: 100%; padding: 9px 12px 9px 10px; border-radius: 14px; background: rgb(255 244 220 / .035); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: background-color .2s ease, box-shadow .25s ease, transform .25s var(--ease); }
.sy-t a:hover, .sy-t a:focus-visible { background: rgb(246 189 74 / .09); box-shadow: inset 0 0 0 1px rgb(255 217 138 / .55); color: var(--ink); transform: translateY(-1px); }
.sy-orb { grid-column: 1; grid-row: 1 / 4; width: 46px; height: 46px; }
.sy-orb-t { fill: none; stroke: rgb(201 207 228 / .2); stroke-width: 1.2; }
.sy-orb-k { fill: none; stroke: rgb(201 207 228 / .75); stroke-width: 3.4; }
.sy-orb-a { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; }
.sy-orb-c { fill: var(--pale); }
.sy-orb-m { fill: #fff6dd; }
.sy-t .sy-q { grid-column: 2; grid-row: 1; font-size: 14px; }
.sy-t .sy-pr { grid-column: 2; grid-row: 2; font-size: 19px; line-height: 1.2; }
.sy-t .sy-u { grid-column: 2; grid-row: 3; font-size: 12.5px; }
.sy-foot { margin: 11px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 760px) {
  .hero-sky { padding: 16px 12px 12px; border-radius: 22px; }
  .sy-k, .sy-pk { font-size: 13px; letter-spacing: .08em; }
  .sy-u, .sy-t .sy-u, .sy-foot { font-size: 15px; }
  .sy-q, .sy-t .sy-q { font-size: 16px; }
}
/* the constellation draws itself, the stars rise one after another, the largest one breathes, some dust twinkles */
@media (prefers-reduced-motion: no-preference) {
  .sy-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sy-draw 1.7s var(--ease) .15s forwards; }
  .sy-s { transform-box: fill-box; transform-origin: center; animation: sy-rise .7s var(--ease) both; animation-delay: calc(.2s + var(--i) * .17s); }
  .sy-p { animation: sy-in .55s ease both; animation-delay: calc(.3s + var(--i) * .17s); }
  .sy-t { animation: sy-in .55s ease both; animation-delay: calc(1.25s + var(--i) * .1s); }
  g.sy-s:last-of-type .sy-glow { transform-box: fill-box; transform-origin: center; animation: sy-breathe 7s ease-in-out 2s infinite; }
  .sy-d.is-tw { animation: sy-tw 5.5s ease-in-out infinite; animation-delay: calc(var(--t) * -1.1s); }
}
@keyframes sy-draw { to { stroke-dashoffset: 0; } }
@keyframes sy-rise { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes sy-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sy-breathe { 50% { opacity: .62; transform: scale(1.12); } }
@keyframes sy-tw { 50% { opacity: .08; } }
@media (prefers-reduced-motion: reduce) {
  .sy-t a { transition: none; }
  .sy-t a:hover, .sy-t a:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------- glass surfaces, the answer box, the honest notice */
.quick-answer { position: relative; margin: 12px 0 20px; padding: 24px 28px 22px; max-width: 860px; border: 1px solid transparent; border-radius: var(--r); background: radial-gradient(60% 90% at 100% 0, rgb(246 175 60 / .1), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; box-shadow: var(--glow-in), var(--sh); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.qa-label { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 11.5px; font-weight: 500; line-height: 1.3; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-hi); }
.qa-label::before { content: ""; width: 12px; height: 12px; background: var(--grad); -webkit-mask: var(--star-m) center / contain no-repeat; mask: var(--star-m) center / contain no-repeat; }
.qa-q { margin: 0 0 8px; font-family: var(--font-head); font-size: 1.32rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.qa-text p { margin: 0; color: var(--ink-2); }
.card, .stat, .plan, .step-list > li, .related-list li, .rank, .callout, .pay-terms, .coinstrip, .trust-sec:not(.compact) .trust > li, .fold, .coins li {
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box;
  box-shadow: var(--glow-in), var(--sh);
}
.callout { position: relative; padding: 18px 22px; color: var(--ink-2); }
.callout-h { color: var(--ink); font-weight: 600; }
.callout p:last-child { margin-bottom: 0; }
.callout.success { background: linear-gradient(90deg, rgb(255 244 220 / .06), transparent 60%) padding-box, var(--pane) padding-box, var(--edge) border-box; }
/* the honest notice ("not an authorized Telegram reseller", what can go wrong): the warm panel of the page, the text at full
   strength, a solid amber edge and a marker that reads as a warning without any shout */
.callout.warn { padding: 20px 24px 20px 62px; border-radius: var(--r); background: linear-gradient(95deg, rgb(238 154 28 / .17), rgb(246 189 74 / .05) 56%, rgb(246 189 74 / .03)) padding-box, linear-gradient(180deg, #17151f, #111120) padding-box, linear-gradient(150deg, var(--gold), rgb(246 189 74 / .3) 40%, rgb(238 154 28 / .55)) border-box; box-shadow: var(--sh); color: var(--ink); }
.callout.warn::before { content: "!"; position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: var(--on); font: 700 16px/1 var(--font-head); box-shadow: 0 0 0 4px rgb(246 189 74 / .14); }
.callout.warn .callout-h { margin-bottom: 4px; color: var(--pale); font-size: 1.04rem; }
.callout.warn p { color: var(--ink); }
.callout.warn a { color: var(--pale); text-decoration-color: rgb(255 233 180 / .6); }
.card { padding: 24px 24px 12px; }
.card h3 { margin: 14px 0 8px; font-size: 1.2rem; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--pale); }
.card p { color: var(--ink-3); font-size: 15px; }
.card-link { transition: transform .35s var(--ease), box-shadow .35s ease; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--glow-in), var(--sh-hot); border-color: transparent; }
.card-tag { color: var(--gold-hi); letter-spacing: .1em; font-weight: 500; }
.card-ic, .stat-ic, .trust-ic, .step-ic { color: var(--gold-hi); background: radial-gradient(90% 90% at 30% 20%, rgb(246 189 74 / .22), rgb(246 189 74 / .05)); border: 1px solid rgb(255 217 138 / .3); border-radius: 50%; box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.band { background: transparent; box-shadow: none; clip-path: none; border-block: 0; }
.band::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(180deg, transparent, rgb(246 175 60 / .05) 34%, rgb(70 76 176 / .05) 70%, transparent); border-block: 1px solid var(--line); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.band .card, .band .trust > li, .band .plan, .band .stat, .band .coinstrip, .band .rank, .band .table-wrap, .band .pay-terms { background: var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; }
.trust-sec.compact .trust { gap: 12px 30px; }
.trust-sec.compact .trust-t { color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.trust-sec.compact .trust-ic { width: 30px; height: 30px; }

/* home: the answer and the honest notice side by side, then every section at the full width of the page */
:is(.t-home, .t-pricing) :is(.sec, .tbl, .faq, .cards-sec, .ranking) { max-width: none; }
:is(.t-home, .t-pricing) :is(.quick-answer, .toc) { max-width: none; }
@media (min-width: 1000px) {
  :is(.t-home, .t-pricing) .content { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 14px; }
  :is(.t-home, .t-pricing) .content > * { grid-column: 1 / -1; min-width: 0; }
  :is(.t-home, .t-pricing) .content > .quick-answer:has(+ .callout) { grid-column: 1 / span 7; }
  :is(.t-home, .t-pricing) .content > .quick-answer + .callout { grid-column: 8 / -1; margin: 12px 0 20px; align-self: stretch; }
  .t-pricing .toc ol { columns: 3 240px; }
}

/* article text: a comfortable measure inside the 860 px column */
.content :is(.sec, .prose) > :is(p, ul, ol) { max-width: 74ch; }
.checked { margin-bottom: 1.1em; }
.pricing > p, .cards-sec > p, .steps > p { max-width: 72ch; }

/* ---------------------------------------------------------------- bento: "what you get" (trust), cards, stats */
.trust { gap: 14px; }
.trust-sec:not(.compact) .trust > li { position: relative; overflow: hidden; flex-direction: column; gap: 14px; padding: 24px 24px 22px; transition: transform .35s var(--ease), box-shadow .35s ease; }
.trust-sec:not(.compact) .trust > li:hover { transform: translateY(-3px); box-shadow: var(--glow-in), var(--sh-hot); }
.trust-t { margin: 0 0 6px; color: var(--ink); font-family: var(--font-head); font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.trust-d { color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.trust-ic { width: 44px; height: 44px; }
@media (min-width: 900px) {
  /* four: one large block (two columns, two rows), one wide, two small */
  .trust-sec:not(.compact) .trust.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
  .trust.n-4 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .trust.n-4 > :nth-child(2) { grid-column: span 2; }
  /* three: a tall block and two wide ones */
  .trust-sec:not(.compact) .trust.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust.n-3 > :nth-child(1) { grid-row: span 2; }
  .trust.n-3 > :nth-child(2), .trust.n-3 > :nth-child(3) { grid-column: span 2; }
  /* five: the large block and four small; six: a wide block at each end */
  .trust-sec:not(.compact) :is(.trust.n-5, .trust.n-6) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust.n-5 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .trust.n-6 > :nth-child(1), .trust.n-6 > :nth-child(6) { grid-column: span 2; }
}
/* the large block: an eclipse in its corner, a larger title in light Outfit */
.trust-sec:not(.compact) :is(.trust.n-3, .trust.n-4, .trust.n-5) > li:first-child { justify-content: flex-end; padding: 28px 28px 26px; background: radial-gradient(70% 60% at 88% 8%, rgb(246 175 60 / .2), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge-hot) border-box; }
.trust-sec:not(.compact) :is(.trust.n-3, .trust.n-4, .trust.n-5) > li:first-child::after { content: ""; position: absolute; top: -70px; right: -70px; width: 240px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: #0a0b1a; box-shadow: 0 0 0 1px rgb(255 232 180 / .7), 0 0 26px 2px rgb(255 205 110 / .4), 0 0 90px 24px rgb(246 175 60 / .2); }
@media (min-width: 900px) {
  .trust-sec:not(.compact) :is(.trust.n-3, .trust.n-4, .trust.n-5) > li:first-child .trust-t { font-size: clamp(1.5rem, 1.05rem + 1vw, 2rem); font-weight: 300; letter-spacing: -.028em; line-height: 1.1; margin-bottom: 10px; }
  .trust-sec:not(.compact) :is(.trust.n-3, .trust.n-4, .trust.n-5) > li:first-child .trust-d { font-size: 16px; max-width: 46ch; }
  .trust-sec:not(.compact) .trust.n-4 > li:nth-child(2) { flex-direction: row; align-items: flex-start; background: radial-gradient(80% 120% at 100% 100%, rgb(70 76 176 / .12), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; }
}
.cards { gap: 14px; }
@media (min-width: 900px) {
  .cards:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards:has(> :nth-child(6):last-child) > :is(:nth-child(1), :nth-child(4), :nth-child(5)) { grid-column: span 2; }
  .cards:has(> :nth-child(6):last-child) > :is(:nth-child(1), :nth-child(4), :nth-child(5)) h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -.022em; }
  .cards:has(> :nth-child(3):last-child) { grid-template-columns: 1.4fr 1fr 1fr; }
  .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards:has(> :nth-child(4):last-child) > * { grid-column: span 2; }
  .cards:has(> :nth-child(4):last-child) > :nth-child(1) { grid-column: span 4; }
  .cards:has(> :nth-child(4):last-child) > :nth-child(4) { grid-column: span 4; }
}
.cards > .card:first-child { background: radial-gradient(70% 80% at 100% 0, rgb(246 175 60 / .15), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge-hot) border-box; }
.stats { gap: 14px; }
.stat { position: relative; padding: 22px 22px 18px; }
@media (min-width: 900px) {
  .stats:has(> :nth-child(3):last-child) { grid-template-columns: 1.5fr 1fr 1fr; }
  .stats:has(> :nth-child(4):last-child) { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .stats > .stat:first-child { background: radial-gradient(80% 90% at 100% 0, rgb(246 175 60 / .14), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge-hot) border-box; }
}
.stat-v { font: 300 clamp(2.1rem, 1.6rem + 1.4vw, 3rem)/1.02 var(--font-head); letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-l { color: var(--ink); font-weight: 500; font-size: 15px; margin-top: 10px; }
.stat-n { font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* ---------------------------------------------------------------- steps: stars joined on a line */
.step-list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; }
.step-list > li { position: relative; min-width: 0; margin: 0; padding: 20px 22px 18px 74px; }
/* a table inside a step (paymentSteps) scrolls in its own frame instead of widening the step */
.step-list .table-wrap, .step-list .pay-table { max-width: 100%; overflow-x: auto; }
.step-list > li.has-ic { padding-left: 74px; }
.step-list::before { content: ""; position: absolute; left: 37px; top: 34px; bottom: 44px; width: 1px; background: linear-gradient(180deg, var(--gold), rgb(246 189 74 / .25)); }
/* the number sits in a small gold-rimmed body; the line runs behind the cards and shows between them */
.step-list > li::before { content: counter(s); left: 18px; top: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(255 217 138 / .55); background: radial-gradient(90% 90% at 30% 20%, rgb(246 189 74 / .3), rgb(14 15 32 / 1)); color: var(--pale); font: 500 16px/1 var(--font-head); box-shadow: 0 0 16px -2px rgb(246 175 60 / .5); }
.step-list > li.has-ic::before { left: 18px; top: 18px; width: 38px; height: 38px; z-index: 0; font-size: 16px; background: radial-gradient(90% 90% at 30% 20%, rgb(246 189 74 / .3), rgb(14 15 32 / 1)); color: var(--pale); border: 1px solid rgb(255 217 138 / .55); }
.step-list > li > .step-ic { display: none; }
.step-name { margin: 2px 0 6px; color: var(--ink); font-family: var(--font-head); font-size: 1.14rem; font-weight: 500; letter-spacing: -.012em; line-height: 1.3; }
.step-list > li > p:not(.step-name) { color: var(--ink-3); font-size: 15.5px; line-height: 1.6; }
.step-list > li > :last-child { margin-bottom: 0; }
.step-list > li > .tw-stack { margin-left: 0 !important; }
/* wide pages, four steps or fewer: the same stars in a row */
@media (min-width: 900px) {
  :is(.t-home, .t-pricing) .step-list:not(:has(> li:nth-child(5))) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-top: 50px; }
  :is(.t-home, .t-pricing) .step-list:not(:has(> li:nth-child(5)))::before { left: 41px; right: calc(33.3% - 30px); top: 20px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--gold), rgb(246 189 74 / .4)); }
  :is(.t-home, .t-pricing) .step-list:has(> li:nth-child(4):last-child)::before { right: calc(25% - 30px); }
  :is(.t-home, .t-pricing) .step-list:has(> li:nth-child(2):last-child)::before { right: calc(50% - 30px); }
  :is(.t-home, .t-pricing) .step-list:not(:has(> li:nth-child(5))) > li { padding: 22px; }
  :is(.t-home, .t-pricing) .step-list:not(:has(> li:nth-child(5))) > li::before { left: 22px; top: -50px; }
}

/* ---------------------------------------------------------------- pricing: a bento of packs, stars and orbits growing */
.pricing > h2 { max-width: 24ch; }
.plans { gap: 14px; }
.plan { position: relative; overflow: hidden; padding: 24px 22px 20px; transition: transform .35s var(--ease), box-shadow .35s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--glow-in), var(--sh-hot); }
/* four columns, the last card wide: 4 + 3 for the seven packs, 3 for Premium */
@media (min-width: 900px) {
  .pricing .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pricing .plans:has(> .plan:nth-child(7):last-child) > .plan:last-child, .pricing .plans:has(> .plan:nth-child(3):last-child) > .plan:last-child { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 26px; align-items: start; background: radial-gradient(60% 90% at 96% 8%, rgb(246 175 60 / .2), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge-hot) border-box; }
  .pricing .plans:has(> .plan:nth-child(7):last-child) > .plan:last-child .plan-name, .pricing .plans:has(> .plan:nth-child(3):last-child) > .plan:last-child .plan-name { grid-column: 1; }
  .pricing .plans:has(> .plan:nth-child(7):last-child) > .plan:last-child .plan-price, .pricing .plans:has(> .plan:nth-child(3):last-child) > .plan:last-child .plan-price { grid-column: 1; font-size: clamp(2.5rem, 2rem + 1vw, 3.1rem); }
  .pricing .plans:has(> .plan:nth-child(7):last-child) > .plan:last-child .plan-features, .pricing .plans:has(> .plan:nth-child(3):last-child) > .plan:last-child .plan-features { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; padding: 0 56px 0 22px; border-top: 0; border-left: 1px solid var(--line-2); }
  .pricing .plans:has(> .plan:nth-child(7):last-child) > .plan:last-child .btn, .pricing .plans:has(> .plan:nth-child(3):last-child) > .plan:last-child .btn { grid-column: 1; align-self: end; margin-top: 16px; }
}
/* phones: the plans as a row of cards that snaps, the next one peeking in */
@media (max-width: 699px) {
  .pricing .plans { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 12px 16px 16px; scrollbar-width: none; }
  .pricing .plans::-webkit-scrollbar { display: none; }
  .pricing .plan { flex: 0 0 80%; scroll-snap-align: start; }
}
.plan-name { margin: 0; padding-right: 44px; font-family: var(--font-head); font-size: 1.22rem; font-weight: 400; letter-spacing: -.018em; color: var(--ink); }
.plan-qty { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.plan-price { margin: 16px 0 0; font: 300 clamp(2rem, 1.7rem + .8vw, 2.5rem)/1 var(--font-head); letter-spacing: -.03em; color: var(--ink); }
.plan-unit { margin: 6px 0 12px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--gold-hi); }
.plan-features { margin: 14px 0 18px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); display: grid; gap: 7px; align-content: start; }
.plan-features li { position: relative; margin: 0; padding-left: 19px; line-height: 1.45; }
.plan-features li::before { content: ""; position: absolute; left: 0; top: .28em; width: 11px; height: 11px; background: var(--gold); -webkit-mask: var(--star-m) center / contain no-repeat; mask: var(--star-m) center / contain no-repeat; }
.plan .btn { margin-top: auto; }
/* every card but the wide one: a quiet button that lights up, so the page holds one gold call at a time */
.plan:not(:last-child) .btn-primary { background: rgb(255 244 220 / .055); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }
.plan:not(:last-child) .btn-primary:hover { background: var(--grad); background-size: 160% 100%; background-position: 100% 0; color: var(--on); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 14px 36px -14px rgb(246 175 60 / .7); }
.plan.popular { background: radial-gradient(90% 60% at 50% 0, rgb(246 175 60 / .18), transparent 70%) padding-box, linear-gradient(180deg, #1a1a30, #0e0f20) padding-box, var(--edge-hot) border-box; }
.plan-badge { top: 12px; left: auto; right: 14px; border-radius: 999px; background: var(--grad); color: var(--on); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: none; padding: 4px 10px; }
/* a star grows with the pack (area in step with the chart of the home), an orbit lights up with the months */
.pricing .plan::after { content: ""; position: absolute; top: 18px; right: 18px; width: var(--k, 30px); aspect-ratio: 1; pointer-events: none; }
.pricing[data-product="telegram-stars"] .plan::after { background: var(--grad); opacity: .9; -webkit-mask: var(--star-m) center / contain no-repeat; mask: var(--star-m) center / contain no-repeat; }
.pricing[data-product="telegram-stars"] .plan:nth-child(1) { --k: 14px; }
.pricing[data-product="telegram-stars"] .plan:nth-child(2) { --k: 19px; }
.pricing[data-product="telegram-stars"] .plan:nth-child(3) { --k: 24px; }
.pricing[data-product="telegram-stars"] .plan:nth-child(4) { --k: 30px; }
.pricing[data-product="telegram-stars"] .plan:nth-child(5) { --k: 40px; }
.pricing[data-product="telegram-stars"] .plan:nth-child(6) { --k: 52px; }
.pricing[data-product="telegram-stars"] .plan:nth-child(7) { --k: 70px; }
.pricing[data-product="telegram-premium"] .plan::after { --k: 38px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--m, 3) * 30deg), rgb(201 207 228 / .24) 0); -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%); mask: radial-gradient(closest-side, transparent 86%, #000 88%); }
.pricing[data-product="telegram-premium"] .plan:nth-child(2) { --m: 6; }
.pricing[data-product="telegram-premium"] .plan:nth-child(3) { --m: 12; }
.plan-incl { font-size: 14px; color: var(--mute); }
.plan-incl strong { color: var(--ink-2); }
.pricing-note { font-size: 13.5px; line-height: 1.55; color: var(--mute); max-width: 84ch; }
.pay-terms { padding: 20px 24px; }
.pt-h { font-size: 11.5px; font-weight: 500; line-height: 1.3; letter-spacing: .15em; text-transform: uppercase; color: var(--mute); }
.pay-terms li > svg { color: var(--gold); }
.pay-help { color: var(--mute); }
.pay-table table { background: none; }
.pay-table thead th { background: rgb(255 244 220 / .035); color: var(--mute); }
.pay-table :is(th, td) { border-bottom-color: var(--line); }

/* ---------------------------------------------------------------- tables: smoked glass, our row lit, our prices in gold */
.table-wrap { border: 1px solid transparent; border-radius: var(--r); background: linear-gradient(180deg, rgb(255 244 220 / .045), rgb(255 244 220 / .012)) padding-box, var(--pane) padding-box, var(--edge) border-box; box-shadow: var(--glow-in), var(--sh); }
:is(.tbl, .tiers) table { border-collapse: separate; border-spacing: 0; background: none; }
:is(.tbl, .tiers) thead th { background: rgb(255 244 220 / .035); color: var(--mute); font-size: 11.5px; font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--line-2); padding: 13px 16px; }
:is(.tbl, .tiers) td, :is(.tbl, .tiers) tbody th { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
:is(.tbl, .tiers) tbody th { color: var(--ink); font-weight: 500; }
:is(.tbl, .tiers) tbody th a { color: var(--ink); text-decoration-color: rgb(255 217 138 / .45); }
:is(.tbl, .tiers) tbody th a:hover { color: var(--gold-hi); }
:is(.tbl, .tiers) td strong { color: var(--gold-hi); font-weight: 600; }
/* wide seller tables (6 to 8 columns) carry sentences in their cells: a size down, no column cut */
:is(.tbl, .tiers) table:has(thead th:nth-child(6)) :is(td, tbody th) { font-size: 14px; padding: 12px 14px; }
:is(.tbl, .tiers) table:has(thead th:nth-child(6)) thead th { padding: 12px 14px; white-space: nowrap; letter-spacing: .07em; }
.tbl :where(tbody tr:nth-child(even)) { background: rgb(255 244 220 / .017); }
:is(.tbl, .tiers) tbody tr:last-child :is(td, th) { border-bottom: 0; }
:is(.tbl, .tiers) tbody tr { transition: background-color .15s ease; }
:is(.tbl, .tiers) tbody tr:hover { background: rgb(246 189 74 / .06); }
:is(.tbl, .tiers) tr.hl { background: linear-gradient(90deg, rgb(246 189 74 / .15), rgb(246 189 74 / .03)); }
:is(.tbl, .tiers) tr.hl th { color: #fff; }
.tbl tr.hl th:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.tier-badge, .rank-badge { border-radius: 999px; background: var(--grad); color: var(--on); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; text-transform: none; padding: 2px 9px; }
.tbl caption, .tiers caption { color: var(--mute); font-size: 13px; }
.tiers caption { padding: 14px 16px 8px; color: var(--ink-2); font-weight: 600; }
.checked, .table-note { font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.checked > svg { color: var(--gold); }
.tw-hint { color: var(--mute); }
.yes { color: var(--gold-hi); }
.no { color: var(--mute); font-weight: 600; }
/* Tables of 5 columns or more use the full width of the page on wide screens instead of the 860 px text column, so no column
   is cut off. They are found by their column count: phoneTables (engine/lib/layout.mjs) skips kind "gametopup", so this site
   gets no tw-scroll / tw-stack class and no data-label. */
@media (min-width: 1000px) {
  .content .table-wrap:has(thead th:nth-child(5)) { width: min(1176px, calc(100vw - 64px)); max-width: none; }
}
/* small screens: every table scrolls sideways inside its own frame, columns kept readable by a minimum width, a gold shade on
   the right edge that goes once the last column is reached (scroll-driven where supported) */
@media (max-width: 999px) {
  .table-wrap { overscroll-behavior-x: contain; }
  .table-wrap table:has(thead th:nth-child(5)) { min-width: 780px; }
  .table-wrap table:has(thead th:nth-child(7)) { min-width: 1040px; }
}
@media (max-width: 760px) {
  .table-wrap:has(thead th:nth-child(4)) { display: grid; }
  .table-wrap:has(thead th:nth-child(4)) > table { grid-area: 1 / 1; }
  .table-wrap table:has(thead th:nth-child(4)) { min-width: 560px; }
  .table-wrap:has(thead th:nth-child(4))::after { content: ""; grid-area: 1 / 1; justify-self: end; position: sticky; right: 0; width: 18px; pointer-events: none; box-shadow: inset -14px 0 12px -10px rgb(246 189 74 / .5); }
  :is(.tbl, .tiers) :is(td, tbody th) { padding: 11px 12px; }
  :is(.tbl, .tiers) table thead th { white-space: nowrap; }
}
/* On a phone the engine stacks tables of up to 4 columns into cards: the scrolling table rules above must not follow them.
   The strip stays whole on a phone: it carries the price sentence, which must not end in an ellipsis. */
@media (max-width: 480px) {
  :root .table-wrap.tw-stack { display: block; }
  :root .table-wrap.tw-stack::after { display: none; }
  :root .table-wrap.tw-stack table { min-width: 0; }
  :root .topbar .wrap, :root .topbar .tb-s { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 760px) {
    .table-wrap:has(thead th:nth-child(4))::after { animation: tw-edge linear both; animation-timeline: scroll(nearest inline); }
  }
}
.facts-table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--glass), var(--pane); box-shadow: var(--glow-in); overflow: hidden; }
.facts-table th { width: 32%; color: var(--mute); font-size: 13.5px; font-weight: 500; line-height: 1.5; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.facts-table td { color: var(--ink-2); font-size: 15px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.facts-table tr:last-child :is(th, td) { border-bottom: 0; }
@media (max-width: 520px) {
  .facts-table, .facts-table tbody, .facts-table tr, .facts-table th, .facts-table td { display: block; width: auto; }
  .facts-table th { padding: 14px 16px 2px; border-bottom: 0; }
  .facts-table td { padding: 2px 16px 14px; }
}

/* ---------------------------------------------------------------- rank, defs, link grid, coins */
.rank { padding: 22px 24px 10px; }
.rank.self { background: radial-gradient(80% 60% at 100% 0, rgb(246 175 60 / .15), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge-hot) border-box; }
.rank-n { border-radius: 50%; background: var(--grad); color: var(--on); font-family: var(--font-head); font-weight: 600; }
.rank-head h3 { font-weight: 500; }
.rank-meta dt { color: var(--mute); }
.rank-meta dd { color: var(--ink); font-weight: 500; }
.pc-h { color: var(--ink); }
.disclosure, .method { color: var(--mute); }
.method { background: rgb(255 244 220 / .03); border-left-color: var(--gold); }
.def { border-bottom-color: var(--line-2); }
.def dt { color: var(--ink); font-weight: 600; }
.lg a { color: var(--ink-2); }
.lg a:hover { color: var(--gold-hi); }
.lg-group, .lg-note { color: var(--mute); }
.lg-group { font-weight: 500; font-size: 11.5px; letter-spacing: .14em; }
.coins li { padding: 14px 16px; }
.coin-code { font-family: var(--font-head); font-weight: 500; color: var(--gold-hi); }
.coin-name { color: var(--ink); }
.coin-note { color: var(--mute); }
.coin-row li { font-family: var(--font-body); font-weight: 500; }
.cs-label { color: var(--mute); font-weight: 500; letter-spacing: .14em; }
.cs-note { color: var(--mute); }
.coins-mini li { border-color: var(--line-2); background: rgb(255 244 220 / .04); color: var(--ink-2); font-family: var(--font-body); font-weight: 500; }

/* ---------------------------------------------------------------- FAQ, code, fold, sources, related, toc */
.faq-item { position: relative; border-bottom: 1px solid var(--line-2); padding: 4px 0 16px; max-width: 860px; }
.faq-item h3 { font-size: 1.14rem; font-weight: 500; letter-spacing: -.012em; margin: 1.15em 0 .4em; padding-left: 24px; }
.faq-item h3::before { content: ""; position: absolute; left: 0; margin-top: .3em; width: 13px; height: 13px; background: var(--grad); -webkit-mask: var(--star-m) center / contain no-repeat; mask: var(--star-m) center / contain no-repeat; }
.faq-a, .faq-a-in { color: var(--ink-2); padding-left: 24px; }
.faq-q { color: var(--ink); }
/* wide pages: the questions as glass tiles beside their heading */
@media (min-width: 1000px) {
  :is(.t-home, .t-pricing) .faq:has(> .faq-item:nth-of-type(4)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; max-width: none; }
  :is(.t-home, .t-pricing) .faq:has(> .faq-item:nth-of-type(4)) > h2 { grid-column: 1 / -1; margin-bottom: .2em; }
  :is(.t-home, .t-pricing) .faq:has(> .faq-item:nth-of-type(4)) > .faq-item { max-width: none; padding: 6px 24px 18px; border: 1px solid transparent; border-radius: var(--r); background: var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; box-shadow: var(--glow-in), var(--sh); }
  :is(.t-home, .t-pricing) .faq:has(> .faq-item:nth-of-type(4)) > .faq-item h3::before { left: 24px; }
  :is(.t-home, .t-pricing) .faq:has(> .faq-item:nth-of-type(4)) > .faq-item:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
.code { border: 1px solid transparent; border-radius: var(--r-s); background: linear-gradient(180deg, #111225, #0a0b19) padding-box, var(--edge) border-box; box-shadow: var(--sh); }
.code figcaption { font-size: 12.5px; color: var(--mute); border-bottom: 1px solid var(--line); background: rgb(255 244 220 / .02); }
.code code { font-size: 13px; color: #efe9dc; }
.copy { border-radius: 6px; background: rgb(246 189 74 / .16); color: var(--ink); }
.fold > summary { color: var(--ink); font-weight: 500; }
.fold > summary:hover { color: var(--gold-hi); }
.fold > summary::marker { color: var(--gold); }
.fold[open] > summary { border-bottom-color: var(--line-2); }
.sources details { border-top: 1px solid var(--line-2); }
.sources summary { font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; color: var(--mute); cursor: pointer; padding: 14px 0; }
.sources summary:hover { color: var(--ink); }
.sources ol { color: var(--mute); }
.src-u { font-size: 12.5px; color: var(--mute); }
.ext-ref { text-decoration-color: rgb(220 215 203 / .4); }
.related { max-width: none; }
.related h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem); }
.related-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
@media (min-width: 900px) {
  .related-list:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .related-list:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .related-list:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) { grid-column: span 3; }
  .related-list:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.related-list li { position: relative; padding: 18px 44px 18px 20px; transition: transform .3s var(--ease), box-shadow .3s ease; }
.related-list li::after { content: ""; position: absolute; right: 18px; top: 22px; width: 14px; height: 14px; background: var(--grad); -webkit-mask: var(--star-m) center / contain no-repeat; mask: var(--star-m) center / contain no-repeat; transition: transform .4s var(--ease); }
.related-list li:hover { transform: translateY(-3px); box-shadow: var(--glow-in), var(--sh-hot); }
.related-list li:hover::after { transform: rotate(45deg) scale(1.25); }
.related-list a { color: var(--ink); font-family: var(--font-head); font-weight: 500; letter-spacing: -.008em; text-decoration: none; }
.related-list a:hover { color: var(--pale); }
.related-list p { color: var(--mute); }
.toc { border: 1px solid transparent; border-radius: var(--r); background: var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; box-shadow: var(--glow-in); padding: 18px 22px 14px; }
.toc-h { font-size: 11.5px; font-weight: 500; line-height: 1.3; letter-spacing: .15em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.toc ol { padding-left: 1.4em; }
.toc li::marker { color: var(--gold); font-size: .85em; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--pale); }
.about-box { background: rgb(255 244 220 / .03); border: 1px solid var(--line-2); color: var(--mute); }
.about-h { color: var(--ink); }

/* ---------------------------------------------------------------- closing call-to-action: an eclipse rising from the panel's edge */
.cta { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 22px; padding: 64px 40px 92px; text-align: center; border: 1px solid transparent; border-radius: var(--r-l); background: radial-gradient(60% 70% at 50% 112%, rgb(246 175 60 / .3), transparent 72%) padding-box, linear-gradient(180deg, #121328, #0b0c1c) padding-box, var(--edge-hot) border-box; color: var(--ink-2); box-shadow: var(--glow-in), var(--sh-hot); }
.cta::after { content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1; width: min(820px, 150%); aspect-ratio: 1; border-radius: 50%; translate: -50% 88%; pointer-events: none; background: #07070f; box-shadow: 0 0 0 1px rgb(255 236 190 / .9), 0 -1px 18px 1px rgb(255 214 130 / .75), 0 -6px 90px 22px rgb(246 175 60 / .34); }
.cta .cta-h { font-family: var(--font-head); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); font-weight: 300; line-height: 1.06; letter-spacing: -.032em; color: var(--ink); margin: 0 auto 12px; max-width: 20ch; }
.cta .cta-t { position: relative; }
.cta .cta-t p { margin: 0 auto; color: var(--ink-2); max-width: 56ch; }
.cta .cta-t .cta-h { margin-bottom: 12px; }
.cta-btns { justify-content: center; }
.cta .btn-primary { background: var(--grad); background-size: 160% 100%; color: var(--on); }
.cta .btn-primary:hover { background: var(--grad); background-size: 160% 100%; background-position: 100% 0; color: var(--on); }
.cta .btn-ghost, .cta .btn:not(.btn-primary) { background: rgb(9 10 24 / .55); border-color: rgb(247 242 230 / .32); color: var(--ink); }
.cta > .trust-strip { opacity: 1; color: var(--ink-2); }

/* ---------------------------------------------------------------- footer: night, a fine line of gold at the top */
.ftr { position: relative; margin-top: 104px; background: linear-gradient(180deg, #0b0c1c, #06060f); color: var(--mute); border-top: 1px solid var(--line); }
.ftr::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 226 170 / .7) 50%, transparent); }
.ftr a { color: var(--ink-2); text-decoration: none; }
.ftr a:hover { color: var(--pale); }
.ftr .f-h, .f-contact-h { color: var(--mute); font-size: 11.5px; font-weight: 500; line-height: 1.3; letter-spacing: .15em; text-transform: uppercase; }
.ftr :is(.f-desc, .f-bottom, .f-legal, .f-pay-h, .sc-note) { color: var(--mute); }
/* "not affiliated with Telegram" stays readable here too */
.ftr .f-pay-n { color: var(--ink-2); opacity: 1; }
.f-pay { border-top-color: var(--line); }
@media (min-width: 760px) { :is(.f-pay, .f-bottom) { border-top: 0; background: linear-gradient(var(--line), var(--line)) 50% 0 / calc(100% - 64px) 1px no-repeat; } }
.f-pay-h { font-weight: 500; letter-spacing: .15em; }
.f-bottom { border-top-color: var(--line); font-size: 13px; }
@media (min-width: 1100px) {
  .ftr .wrap:first-child { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.7fr); gap: 48px; }
  .f-cols { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 24px; }
}
.sticky-cta { background: rgb(9 10 24 / .84); border-top: 1px solid var(--line-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.sticky-cta .sc-note { color: var(--mute); }

/* ---------------------------------------------------------------- gentle reveal of sections (theme.js adds .as-reveal) */
@media (prefers-reduced-motion: no-preference) {
  .as-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .as-reveal.is-in { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  :root { --hx: 96vw; --hy: 96px; --hr: 150px; --hdr-off: 88px; }
  .t-home .page-head.hero { padding: 34px 0 18px; }
  .t-home .page-head.hero h1 { font-size: clamp(2.15rem, 1rem + 6vw, 2.9rem); }
  .kicker { letter-spacing: .08em; gap: 9px; }
  .kicker::after { display: none; }
  .hero-note { font-size: 15px; }
  .cta { padding: 44px 20px 74px; }
  .card { padding: 22px 20px 10px; }
  .quick-answer { padding: 20px 20px 18px; }
  .callout.warn { padding: 18px 18px 18px 56px; }
  .callout.warn::before { left: 16px; top: 18px; }
  .trust-sec:not(.compact) .trust > li, .trust-sec:not(.compact) :is(.trust.n-3, .trust.n-4, .trust.n-5) > li:first-child { padding: 20px; }
  .step-list > li, .step-list > li.has-ic { padding: 18px 16px 16px 66px; }
  .step-list > li::before, .step-list > li.has-ic::before { left: 14px; top: 16px; width: 36px; height: 36px; }
  .step-list::before { left: 32px; }
  .faq-a, .faq-a-in, .faq-item h3 { padding-left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .plan, .card-link, .related-list li, .related-list li::after, .trust > li { transition: none; }
  .btn:hover, .plan:hover, .card-link:hover, .related-list li:hover, .trust-sec:not(.compact) .trust > li:hover { transform: none; }
  .related-list li:hover::after { transform: none; }
}

/* Non-Latin scripts of the group (engine/build.mjs adds this file to site.css only for a site with a /hi/ version; the
   other sites keep their site.css byte for byte). Fonts: system only, nothing is downloaded unless the site ships its own
   subset (engine/assets/fonts/<slug>/<name>-devanagari*.woff2 next to its <name>-latin*.woff2, declared with a
   unicode-range in its theme.css: then /hi/ pages preload it too). Without one, the browser takes the Devanagari glyphs
   from the system font: Windows Nirmala UI, Apple Kohinoor Devanagari, Android / Linux Noto Sans Devanagari, while Latin
   text and digits keep the brand font.
   Cyrillic (uk) needs no rule: system fonts all have it, and a brand font without Cyrillic falls back the same way. */

/* Devanagari letters hang from a continuous headline (shirorekha): any tracking cuts it, so no letter-spacing (the
   brand name of the logo, in Latin letters, keeps its own); vowel signs sit above and below the line: more room between
   the lines of a heading; there is no italic in Devanagari: emphasis stays upright. */
:root:lang(hi) body :not(.logo, .logo *, .f-logo) { letter-spacing: normal !important; }
:root:lang(hi) :is(h1, h2, h3, h4, .cta-h, .fold > summary) { line-height: 1.4; }
:root:lang(hi) :is(em, i) { font-style: normal; }