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

/* GPUwithCrypto — "Die" (3 November 2026). Cloud GPUs by the minute, paid in crypto. A dark 2026 product page drawn
   from the thing being rented: the silicon. Violet-black night (#08070d), smoked-glass panels with a 1 px gradient edge,
   the floorplan of a GPU die as texture (a grid of SM tiles behind the head of every page, fine circuit traces with vias
   around the hero), and one action gradient that runs like the sheen on a wafer: electric violet → a pale nacre → acid
   lime, with dark ink on it. Lime is the "power" colour: our prices in tables, live points, the GPU in focus. Corners are
   die-cut (corner-shape: bevel where the browser has it, rounded elsewhere).
   Colours come from site.json → theme (the theme dict of sites/gpuwithcrypto/_research/make-site-json.py); everything
   else lives here, including every style of the hero visual "gpudie" (engine/lib/visuals/gpudie.mjs, classes gd-*).
   Type: Archivo (variable width + weight: headings expanded to 112–124 %, text at 100 %) and Martian Mono (prices, specs,
   micro-labels, tabular figures), self-hosted in engine/assets/fonts/gpuwithcrypto/ (SIL OFL 1.1, licences beside the
   files), with Arial / Courier New fallbacks.
   Home: headline left, the GPU package right (die tiles = the seven GPUs, memory stacks that fill with the VRAM of the GPU
   in focus); the steps and the "what you get" blocks as bento grids of mixed sizes. Motion (tile entrance, memory fill,
   the light sweeping the die, hover lift, section reveal) stops under prefers-reduced-motion.
   Contrast (WCAG AA) on #08070d: text #f1edff 17.5:1, body #cdc7de 12.3:1, muted #a7a0bd 8.0:1 (7.1:1 on the glass
   panels), violet link #b49dff 8.8:1, lime #c6f432 15.7:1; ink #0b0716 on the action gradient 6.4:1 (violet end #9d7cff)
   to 15.5:1 (lime end), on the pale middle 17:1. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/gw-archivo-latin-wdth.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: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/gw-archivo-latin-ext-wdth.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: "Martian Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/assets/fonts/gw-martian-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: "Martian Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/assets/fonts/gw-martian-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: "Martian Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/assets/fonts/gw-martian-cyrillic-wght.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 101%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Martian Mono Fallback"; src: local("Courier New"), local("Courier"); size-adjust: 112%; ascent-override: 84%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --wrap: 1232px;
  --night: #08070d;
  --night-2: #0c0a14;
  --ink: #f1edff;
  --ink-2: #cdc7de;
  --mute: #a7a0bd;
  --mute-2: #7d7696;
  --violet: #8b5cf6;
  --violet-2: #9d7cff;
  --violet-hi: #b49dff;
  --lime: #c6f432;
  --on: #0b0716;
  --line: rgb(180 160 255 / .10);
  --line-2: rgb(180 160 255 / .16);
  --line-3: rgb(180 160 255 / .28);
  --grad: linear-gradient(100deg, #9d7cff 0%, #b8a3ff 30%, #e6f7b8 66%, #c6f432 100%);
  --grad-text: linear-gradient(100deg, #b49dff 0%, #d6c9ff 34%, #e3f6b0 68%, #c6f432 100%);
  --edge: linear-gradient(155deg, rgb(167 139 250 / .55), rgb(255 255 255 / .07) 36%, rgb(255 255 255 / .04) 64%, rgb(198 244 50 / .30));
  --edge-hot: linear-gradient(150deg, #b49dff, rgb(139 92 246 / .35) 42%, rgb(198 244 50 / .85));
  --glass: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015));
  --pane: linear-gradient(180deg, rgb(20 16 31 / .92), rgb(11 9 18 / .92));
  --glow-in: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 0 36px -14px rgb(139 92 246 / .32);
  --sh: 0 1px 1px rgb(0 0 0 / .35), 0 26px 60px -34px rgb(0 0 0 / .9);
  --sh-hot: 0 1px 1px rgb(0 0 0 / .3), 0 30px 80px -32px rgb(139 92 246 / .62);
  --blur: blur(18px) saturate(1.4);
  /* the floorplan of a die: SM tiles with their gutters (a 44 px cell, outlined, a dot at its core) */
  --die-tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='3.5' y='3.5' width='37' height='37' rx='4' fill='none' stroke='%23b49dff' stroke-opacity='.075'/%3E%3Crect x='20' y='20' width='4' height='4' rx='1' fill='%23b49dff' fill-opacity='.06'/%3E%3C/svg%3E");
  /* lit SM tiles: gradient squares cut by dark gutters */
  --die-lit: linear-gradient(var(--night) 0 2px, transparent 2px) 0 0 / 14px 14px, linear-gradient(90deg, var(--night) 0 2px, transparent 2px) 0 0 / 14px 14px, linear-gradient(135deg, rgb(167 139 250 / .8), rgb(198 244 50 / .6));
  --r-s: 10px;
  --r: 16px;
  --r-l: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr-off: 84px;
  --font-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --focus: var(--lime);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base: night, die floorplan, aurora, grain */
html { overflow-x: clip; scroll-padding-top: var(--hdr-off); background: var(--night); scrollbar-color: #3a3152 var(--night); }
body {
  position: relative; isolation: isolate; overflow-x: clip;
  background: var(--night); color: var(--ink-2);
  font-size: 16.5px; line-height: 1.66; letter-spacing: -0.004em; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* the head of every page: violet light with a lime hot spot over the floorplan of a die, fading out downwards */
body::before {
  content: ""; position: absolute; inset: -120px 0 auto; height: 1180px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36% 40% at 70% 20%, rgb(139 92 246 / .30), transparent 70%),
    radial-gradient(18% 22% at 88% 8%, rgb(198 244 50 / .11), transparent 72%),
    radial-gradient(34% 34% at 46% 0%, rgb(109 40 217 / .22), transparent 70%),
    radial-gradient(40% 40% at 4% 6%, rgb(124 58 237 / .12), transparent 72%),
    var(--die-tiles) 50% 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(78% 64% at 60% 22%, #000 28%, transparent 78%);
  mask-image: radial-gradient(78% 64% at 60% 22%, #000 28%, transparent 78%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: rgb(157 124 255 / .4); color: #fff; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible, .btn:focus-visible { outline: 2px solid var(--lime); 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); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-stretch: 120%; line-height: 1; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.65rem); font-stretch: 116%; line-height: 1.06; margin: 2.3em 0 .55em; letter-spacing: -0.035em; scroll-margin-top: var(--hdr-off); }
h3 { font-size: 1.14rem; font-stretch: 106%; line-height: 1.3; letter-spacing: -0.015em; margin: 1.8em 0 .45em; scroll-margin-top: var(--hdr-off); }
p, li { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--violet-hi); text-decoration-line: underline; text-decoration-color: rgb(180 157 255 / .38); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
a:hover { color: #d4c8ff; text-decoration-color: currentColor; }
code { font-family: var(--font-mono); font-size: .8em; color: #e2dbff; background: rgb(157 124 255 / .1); border: 1px solid rgb(157 124 255 / .2); border-radius: 6px; padding: .1em .4em; }
:is(.plan-price, .plan-unit, .tbl td, .tiers td, .facts-table td, .stat-v, .gd-price, .gd-ro-v, .hp-from strong, .hp-p) { 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(--violet-2); color: var(--ink-2); }

/* die-cut corners: a bevel where the browser draws one (Chrome 139+), the rounded corner elsewhere */
@supports (corner-shape: bevel) {
  :is(.btn, .kicker, .badges li, .hero-gdie, .gd-pkg, .gd-die, .gd-c, .gd-ro, .gd-st, .quick-answer, .card, .stat, .plan, .plan-badge, .step-list > li, .trust > li, .related-list li, .table-wrap, .facts-table, .cta, .pay-terms, .rank, .callout, .toc, .fold, .code, .coinstrip, .menu, .hdr .nav a, .tier-badge, .rank-badge, .sticky-cta .btn) { corner-shape: bevel; }
}

/* ---------------------------------------------------------------- top strip + glass header */
.topbar { position: relative; background: rgb(5 4 9 / .92); color: #c9c2dc; border-bottom: 1px solid var(--line); font: 500 12px/1.4 var(--font-mono); letter-spacing: .01em; padding: 9px 0; }
.topbar strong { color: var(--lime); font-weight: 600; filter: none; }
.topbar .tb-sep { color: var(--mute-2); }
.hdr { top: 0; z-index: 30; background: rgb(8 7 13 / .64); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgb(0 0 0 / .4), 0 18px 40px -30px rgb(0 0 0 / .9); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(157 124 255 / .55) 30%, rgb(198 244 50 / .45) 70%, transparent); opacity: .6; pointer-events: none; }
.hdr-in { min-height: 68px; gap: 24px; }
.hdr .logo-img { height: 30px; }
.hdr .nav { gap: 2px; margin-inline: auto; }
.hdr .nav a { padding: 7px 13px; border-radius: 10px; 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 255 255 / .06); }
.hdr .nav a[aria-current] { color: var(--ink); background: rgb(157 124 255 / .16); box-shadow: inset 0 0 0 1px rgb(157 124 255 / .32); }
/* five links stay on one line from 1041 px; below, the menu button takes over (as under 860 px) */
@media (min-width: 861px) and (max-width: 1040px) {
  .menu { display: inline-block; margin-left: auto; }
  .hdr .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 10px 12px 16px; margin: 0; background: rgb(11 9 18 / .97); border-bottom: 1px solid var(--line-2); box-shadow: 0 40px 60px -30px rgb(0 0 0 / .9); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
  .hdr .nav.open { display: flex; }
  .hdr .nav a { padding: 13px 14px; font-size: 16px; }
}
.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; }
.menu { border-radius: 10px; border: 1px solid var(--line-3); background: rgb(255 255 255 / .04); color: var(--ink); font-weight: 500; font-size: 14px; padding: 7px 15px; }
.menu:hover, .menu[aria-expanded="true"] { background: rgb(255 255 255 / .09); }
@media (max-width: 860px) {
  .hdr-in { gap: 12px; }
  .hdr .nav { top: 100%; left: 0; right: 0; gap: 2px; padding: 10px 12px 16px; margin: 0; background: rgb(11 9 18 / .97); border-bottom: 1px solid var(--line-2); box-shadow: 0 40px 60px -30px rgb(0 0 0 / .9); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
  .hdr .nav a { padding: 13px 14px; font-size: 16px; border-bottom: 0; }
  .hdr .nav a:hover, .hdr .nav a[aria-current] { color: var(--ink); }
  .menu { margin-left: auto; }
}

/* ---------------------------------------------------------------- buttons: die-cut, the wafer gradient, a lime glow */
.btn { border-radius: 12px; font-weight: 600; font-stretch: 106%; letter-spacing: -0.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: 150% 100%; background-position: 0 0; color: var(--on); border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 0 0 1px rgb(157 124 255 / .45), 0 12px 32px -12px rgb(139 92 246 / .85); }
.btn-primary:hover { background: var(--grad); background-size: 150% 100%; background-position: 100% 0; color: var(--on); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 0 1px rgb(198 244 50 / .55), 0 16px 44px -12px rgb(198 244 50 / .5); }
.btn-ghost, .btn:not(.btn-primary) { background: rgb(255 255 255 / .04); 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(157 124 255 / .12); border-color: rgb(180 157 255 / .55); color: #fff; transform: translateY(-1px); }
.btn-lg { padding: 14px 24px; font-size: 15.5px; }
.btn-sm { padding: 8px 15px; }

/* ---------------------------------------------------------------- page head */
.crumbs ol { align-items: center; margin-top: 30px; font: 500 12px/1.4 var(--font-mono); color: var(--mute); letter-spacing: .01em; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--mute-2); opacity: 1; }
.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: 28px 0 10px; max-width: 940px; }
.page-head h1 { font-size: clamp(1.85rem, 1.1rem + 3vw, 3.5rem); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: .36em; max-width: 22ch; }
/* the kicker: a chip pictogram (a die with its core lit) and a mono label */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 9px; border: 1px solid transparent; border-radius: 10px; background: var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; font: 500 11.5px/1.35 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); box-shadow: var(--glow-in); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.kicker::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 3px; background: linear-gradient(var(--lime), var(--lime)) 50% 50% / 4px 4px no-repeat; box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 10px rgb(198 244 50 / .55); }
.lede { font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.lede strong { color: var(--ink); }
.meta { font: 500 12px/1.5 var(--font-mono); color: var(--mute); margin-top: 14px; }
.badges { gap: 8px; }
.badges li { position: relative; border: 1px solid var(--line-2); border-radius: 8px; background: rgb(255 255 255 / .035); color: var(--ink-2); font: 500 12px/1.3 var(--font-mono); padding: 7px 12px 7px 24px; }
.badges li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 1.5px; background: var(--lime); box-shadow: 0 0 8px rgb(198 244 50 / .7); }
.badges strong { color: var(--ink); font-weight: 600; }
.hero-note { color: var(--mute); font-size: 14.5px; }
.hero-note .ic { color: var(--lime); }
.hero-btns { margin: 28px 0 18px; }

/* ---------------------------------------------------------------- home hero: headline left, the GPU package right */
.t-home .page-head.hero { position: relative; isolation: isolate; max-width: none; padding: 58px 0 36px; }
/* circuit traces and vias running out of the package (behind it, never behind the text) */
.t-home .hero-visual { position: relative; }
.t-home .hero-visual::before { content: ""; position: absolute; z-index: -1; inset: -70px -110px; pointer-events: none; opacity: .95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 460' fill='none'%3E%3Cg stroke='%23a78bfa' stroke-opacity='.24' stroke-width='1'%3E%3Cpath d='M0 64H190l28 28H372'/%3E%3Cpath d='M0 132H118l38 38H306l18-18H470'/%3E%3Cpath d='M0 214H74l24 24H210'/%3E%3Cpath d='M720 84H578l-30 30H452'/%3E%3Cpath d='M720 196H612l-40 40H486'/%3E%3Cpath d='M720 288H640l-22-22H540'/%3E%3Cpath d='M720 372H560l-30-30H420'/%3E%3Cpath d='M0 330H148l30 30H300'/%3E%3Cpath d='M232 460V392l20-20V284'/%3E%3Cpath d='M520 0V44l-22 22V150'/%3E%3Cpath d='M388 460V420l-16-16V352'/%3E%3Cpath d='M300 0V30l18 18v62'/%3E%3C/g%3E%3Cg fill='%2308070d' stroke='%23b49dff' stroke-opacity='.5' stroke-width='1.2'%3E%3Ccircle cx='372' cy='92' r='3.5'/%3E%3Ccircle cx='470' cy='152' r='3.5'/%3E%3Ccircle cx='210' cy='238' r='3.5'/%3E%3Ccircle cx='452' cy='114' r='3.5'/%3E%3Ccircle cx='486' cy='236' r='3.5'/%3E%3Ccircle cx='540' cy='266' r='3.5'/%3E%3Ccircle cx='420' cy='342' r='3.5'/%3E%3Ccircle cx='300' cy='360' r='3.5'/%3E%3Ccircle cx='252' cy='284' r='3.5'/%3E%3Ccircle cx='498' cy='150' r='3.5'/%3E%3Ccircle cx='372' cy='352' r='3.5'/%3E%3Ccircle cx='318' cy='110' r='3.5'/%3E%3C/g%3E%3Cg fill='%23c6f432'%3E%3Ccircle cx='372' cy='92' r='1.6'/%3E%3Ccircle cx='486' cy='236' r='1.6'/%3E%3Ccircle cx='300' cy='360' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 50% 50% / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.t-home .page-head.hero h1 { font-size: clamp(2.15rem, 1.05rem + 4vw, 3.4rem); font-weight: 600; font-stretch: 122%; line-height: .98; letter-spacing: -0.045em; margin-bottom: .4em; }
.t-home .hero-main .lede { max-width: 54ch; }
.t-home .hero-visual { margin-top: 40px; }
/* 960–1099 px: the headline over the package (two columns would squeeze both) */
@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: 44px; }
}
@media (min-width: 1100px) {
  .t-home .page-head.hero.has-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 568px); gap: 52px; align-items: center; padding: 64px 0 44px; }
  .t-home .page-head.hero.has-visual h1 { font-size: clamp(2.6rem, 1rem + 2.6vw, 3.3rem); }
}

/* hero.visual "gpudie": the GPUs of the price list as the compute blocks of one die (engine/lib/visuals/gpudie.mjs) */
.hero-gdie { --fill: var(--mf, .5); position: relative; margin: 0; padding: 16px 16px 14px; border: 1px solid transparent; border-radius: var(--r-l); background: radial-gradient(70% 45% at 50% 0%, rgb(139 92 246 / .2), transparent 70%) padding-box, linear-gradient(180deg, rgb(21 17 33 / .95), rgb(9 8 15 / .95)) padding-box, var(--edge) border-box; box-shadow: var(--glow-in), var(--sh-hot); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.gd-k { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; font: 500 11px/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
/* three status pins, lit */
.gd-k::after { content: ""; flex: none; width: 30px; height: 6px; background: radial-gradient(circle, var(--lime) 0 2.2px, transparent 2.8px) 0 50% / 12px 6px repeat-x; filter: drop-shadow(0 0 4px rgb(198 244 50 / .7)); }
/* the package: substrate with its solder bumps, a memory column on each side of the die */
.gd-pkg { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; gap: 10px; padding: 12px; border-radius: 14px; background: radial-gradient(circle, rgb(180 160 255 / .13) 0 1px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(180deg, #0f0c19, #0b0912); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgb(255 255 255 / .05); }
.gd-mem { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 10px; }
.gd-st { position: relative; display: block; border-radius: 5px; overflow: hidden; background: linear-gradient(180deg, #1c162b, #120f1d); box-shadow: inset 0 0 0 1px rgb(180 160 255 / .24); }
.gd-st b { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill) * 100%); background: linear-gradient(0deg, rgb(198 244 50 / .7), rgb(157 124 255 / .45)); box-shadow: 0 0 14px rgb(198 244 50 / .45); transition: height .6s var(--ease); }
/* the stacked memory dies, drawn over the fill */
.gd-st::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgb(8 7 13 / .7) 0 1px, transparent 1px 7px); }
.gd-die { position: relative; overflow: hidden; padding: 8px; border-radius: 12px; background: linear-gradient(rgb(180 160 255 / .07) 1px, transparent 1px) 0 0 / 11px 11px, linear-gradient(90deg, rgb(180 160 255 / .07) 1px, transparent 1px) 0 0 / 11px 11px, linear-gradient(160deg, #161226, #0e0b18); box-shadow: inset 0 0 0 1px rgb(180 160 255 / .26), 0 0 46px -14px rgb(139 92 246 / .65); }
/* a light that sweeps the die now and then (prefers-reduced-motion: no sweep) */
.gd-die::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgb(198 244 50 / .09) 48%, rgb(180 157 255 / .1) 52%, transparent 62%) 120% 0 / 260% 100% no-repeat; }
.gd-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gd-t { min-width: 0; margin: 0; }
.gd-c { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; height: 100%; padding: 12px 13px 16px; border-radius: 10px; background: linear-gradient(180deg, rgb(33 27 51 / .94), rgb(20 16 32 / .96)); box-shadow: inset 0 0 0 1px rgb(180 160 255 / .17), inset 0 1px 0 rgb(255 255 255 / .06); color: var(--ink); text-decoration: none; transition: background-color .2s ease, box-shadow .25s ease, transform .25s var(--ease); }
a.gd-c:hover, a.gd-c:focus-visible { background: linear-gradient(180deg, rgb(45 36 70 / .96), rgb(26 21 42 / .97)); box-shadow: inset 0 0 0 1px rgb(198 244 50 / .6), 0 0 26px -8px rgb(198 244 50 / .45); color: var(--ink); transform: translateY(-2px); }
a.gd-c:focus-visible { outline-offset: 2px; }
.gd-t.is-focus .gd-c { box-shadow: inset 0 0 0 1px rgb(180 157 255 / .6), 0 0 22px -8px rgb(157 124 255 / .7); }
.gd-name { min-width: 0; font-size: 16px; font-weight: 600; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.2; }
.gd-vram { flex-basis: 100%; margin-top: 3px; font: 500 11px/1.3 var(--font-mono); color: var(--mute); letter-spacing: -0.01em; }
.gd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 3px; flex-basis: 100%; margin-top: 8px; }
.gd-price b { font: 600 1.42rem/1 var(--font-mono); letter-spacing: -0.06em; color: var(--ink); }
.gd-price small { font: 500 11px/1 var(--font-mono); color: var(--mute); }
.gd-under { flex-basis: 100%; margin-top: 6px; font: 500 11px/1.4 var(--font-mono); letter-spacing: -0.01em; color: var(--lime); }
/* our price as a share of the median: the track is the median, the lit part our price */
.gd-bar { position: absolute; left: 13px; right: 13px; bottom: 7px; height: 2px; border-radius: 2px; background: rgb(180 160 255 / .18); }
.gd-bar i { display: block; width: calc(var(--s, 0) * 100%); height: 100%; border-radius: inherit; background: var(--grad); box-shadow: 0 0 8px rgb(198 244 50 / .45); }
/* the readout: the VRAM of the GPU in focus; it takes the whole row when it is alone on it */
.gd-ro { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: 12px 13px; border-radius: 10px; background: radial-gradient(90% 90% at 100% 100%, rgb(198 244 50 / .1), transparent 70%), rgb(8 7 13 / .55); box-shadow: inset 0 0 0 1px rgb(198 244 50 / .22); }
.gd-list > .gd-ro:nth-child(odd) { grid-column: 1 / -1; }
.gd-ro-k { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.gd-ro-v { display: none; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-top: 6px; }
.gd-ro-v b { font: 600 2rem/1 var(--font-mono); letter-spacing: -0.07em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gd-ro-v b small { margin-left: 4px; font-size: 12px; letter-spacing: 0; color: var(--mute); -webkit-text-fill-color: var(--mute); }
.gd-ro-v em { font: 500 11px/1.3 var(--font-mono); font-style: normal; color: var(--ink-2); }
.gd-led { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 10px rgb(198 244 50 / .9); }
/* the GPU in focus: the config's at rest, else the tile under the pointer or the keyboard */
.hero-gdie:not(:has(.gd-t:is(:hover, :focus-within))) .gd-ro-v.is-focus { display: flex; }
.hero-gdie:has(.gd-t:nth-child(1):is(:hover, :focus-within)) { --fill: var(--m1); }
.hero-gdie:has(.gd-t:nth-child(2):is(:hover, :focus-within)) { --fill: var(--m2); }
.hero-gdie:has(.gd-t:nth-child(3):is(:hover, :focus-within)) { --fill: var(--m3); }
.hero-gdie:has(.gd-t:nth-child(4):is(:hover, :focus-within)) { --fill: var(--m4); }
.hero-gdie:has(.gd-t:nth-child(5):is(:hover, :focus-within)) { --fill: var(--m5); }
.hero-gdie:has(.gd-t:nth-child(6):is(:hover, :focus-within)) { --fill: var(--m6); }
.hero-gdie:has(.gd-t:nth-child(7):is(:hover, :focus-within)) { --fill: var(--m7); }
.hero-gdie:has(.gd-t:nth-child(8):is(:hover, :focus-within)) { --fill: var(--m8); }
.hero-gdie:has(.gd-t:nth-child(1):is(:hover, :focus-within)) .gd-ro-v:nth-of-type(1),
.hero-gdie:has(.gd-t:nth-child(2):is(:hover, :focus-within)) .gd-ro-v:nth-of-type(2),
.hero-gdie:has(.gd-t:nth-child(3):is(:hover, :focus-within)) .gd-ro-v:nth-of-type(3),
.hero-gdie:has(.gd-t:nth-child(4):is(:hover, :focus-within)) .gd-ro-v:nth-of-type(4),
.hero-gdie:has(.gd-t:nth-child(5):is(:hover, :focus-within)) .gd-ro-v:nth-of-type(5),
.hero-gdie:has(.gd-t:nth-child(6):is(:hover, :focus-within)) .gd-ro-v:nth-of-type(6),
.hero-gdie:has(.gd-t:nth-child(7):is(:hover, :focus-within)) .gd-ro-v:nth-of-type(7),
.hero-gdie:has(.gd-t:nth-child(8):is(:hover, :focus-within)) .gd-ro-v:nth-of-type(8) { display: flex; }
.gd-foot { margin: 12px 2px 0; font: 500 11px/1.55 var(--font-mono); color: var(--mute); letter-spacing: -0.005em; }
/* tablets: the package across the page, four blocks a row (two under 760 px, where four would squeeze the prices) */
@media (min-width: 760px) and (max-width: 1099px) {
  .hero-gdie { --cols: 4; padding: 18px 18px 14px; }
  .gd-pkg { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 12px; padding: 14px; }
}
@media (min-width: 1100px) {
  .gd-name { font-size: 17px; }
  .gd-price b { font-size: 1.55rem; }
}
/* phones: thinner memory columns, the readout in one line */
@media (max-width: 639px) {
  .hero-gdie { padding: 14px 12px 12px; border-radius: 18px; }
  .gd-pkg { grid-template-columns: 9px minmax(0, 1fr) 9px; gap: 6px; padding: 8px; border-radius: 12px; }
  .gd-mem { gap: 6px; }
  .gd-st { border-radius: 3px; }
  .gd-die { padding: 6px; border-radius: 10px; }
  .gd-list { gap: 6px; }
  .gd-c { padding: 10px 10px 14px; }
  .gd-bar { left: 10px; right: 10px; bottom: 6px; }
  .gd-name { font-size: 15px; font-stretch: 106%; }
  .gd-vram { font-size: 12px; margin-top: 2px; }
  .gd-price b { font-size: 1.25rem; }
  .gd-price small, .gd-under { font-size: 12px; }
  .gd-ro { padding: 10px; }
  .gd-ro-k { font-size: 11px; }
  .gd-ro-v em, .gd-foot, .gd-k { font-size: 12px; }
  .gd-ro-v b { font-size: 1.6rem; }
  .gd-k::after { display: none; }
}
/* entrance: the blocks power up one after another, the memory fills, then a light sweeps the die */
@media (prefers-reduced-motion: no-preference) {
  .gd-t, .gd-ro { animation: gd-on .55s var(--ease) both; animation-delay: calc(.12s + var(--i, 7) * .07s); }
  .gd-st b { animation: gd-fill 1.1s var(--ease) both .35s; }
  .gd-die::after { animation: gd-sweep 8s ease-in-out 1.6s infinite; }
  .gd-led { animation: gd-blink 2.4s steps(2, jump-none) infinite; }
}
@keyframes gd-on { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gd-fill { from { height: 0; } }
@keyframes gd-sweep { from { background-position: 120% 0; } 55%, to { background-position: -20% 0; } }
@keyframes gd-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .gd-st b, .gd-c { transition: none; }
  a.gd-c:hover, a.gd-c:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------- glass surfaces */
.quick-answer { position: relative; margin: 10px 0 18px; padding: 24px 28px 22px 30px; max-width: 880px; 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); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.quick-answer::before { content: ""; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #9d7cff, #c6f432); box-shadow: 0 0 16px rgb(198 244 50 / .45); border: 0; }
.qa-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.qa-q { margin: 0 0 8px; font-size: 1.3rem; font-weight: 600; font-stretch: 110%; letter-spacing: -0.025em; 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);
}
.card { padding: 24px 24px 12px; }
.card h3 { margin: 14px 0 8px; font-size: 1.14rem; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: #fff; }
.card p { color: #b9b2cc; 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-ic, .stat-ic, .trust-ic, .step-ic { color: var(--violet-hi); background: linear-gradient(160deg, rgb(157 124 255 / .22), rgb(198 244 50 / .05)); border: 1px solid rgb(180 157 255 / .3); border-radius: 10px; 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(109 40 217 / .07) 30%, rgb(198 244 50 / .02) 70%, transparent), var(--die-tiles) 50% 0 / 44px 44px; 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; border-radius: 8px; }

/* ---------------------------------------------------------------- bento: "what you get" (trust), steps, cards */
.trust { gap: 14px; }
.trust-sec:not(.compact) .trust > li { position: relative; overflow: hidden; flex-direction: column; gap: 16px; 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-size: 1.12rem; font-weight: 600; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.25; }
.trust-d { color: #b9b2cc; font-size: 15px; line-height: 1.6; }
.trust-ic { width: 42px; height: 42px; }
@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: a lit corner of the die behind it, a larger title */
.trust-sec:not(.compact) :is(.trust.n-4, .trust.n-5, .trust.n-3) > li:first-child { justify-content: flex-end; padding: 28px 28px 26px; background: radial-gradient(80% 60% at 85% 0%, rgb(139 92 246 / .24), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge-hot) border-box; }
.trust-sec:not(.compact) :is(.trust.n-4, .trust.n-5, .trust.n-3) > li:first-child::after { content: ""; position: absolute; top: 22px; right: 22px; width: min(58%, 300px); aspect-ratio: 1.3; pointer-events: none; background: var(--die-lit); opacity: .55; -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 20%, transparent 72%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 20%, transparent 72%); }
@media (min-width: 900px) {
  .trust-sec:not(.compact) :is(.trust.n-4, .trust.n-5, .trust.n-3) > li:first-child .trust-t { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); font-stretch: 118%; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 10px; }
  .trust-sec:not(.compact) :is(.trust.n-4, .trust.n-5, .trust.n-3) > 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(198 244 50 / .08), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; }
}

/* steps: four or fewer as a staggered bento (5 + 7 columns, then 7 + 5); longer lists as a numbered pipeline */
.step-list > li { padding: 22px 22px 18px; margin: 0; }
.step-list > li::before { content: counter(s, decimal-leading-zero); left: auto; right: 18px; top: 16px; width: auto; height: auto; display: block; border-radius: 0; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font: 600 1.6rem/1 var(--font-mono); letter-spacing: -0.06em; border: 0; opacity: .9; }
.step-list > li.has-ic { padding-left: 22px; }
.step-list > li.has-ic::before { left: auto; top: 16px; width: auto; height: auto; font-size: 1.6rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; border: 0; }
.step-list > li > .step-ic { position: relative; left: auto; top: auto; display: grid; width: 40px; height: 40px; margin: 0 0 14px; }
.step-name { margin: 0 0 6px; padding-right: 54px; color: var(--ink); font-size: 1.1rem; font-weight: 600; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.3; }
.step-list > li > p:not(.step-name) { color: #b9b2cc; font-size: 15px; line-height: 1.6; }
.step-list > li > :last-child { margin-bottom: 0; }
.step-list { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .step-list:not(:has(> li:nth-child(5))) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .step-list:not(:has(> li:nth-child(5))) > li { grid-column: span 6; }
  .step-list:not(:has(> li:nth-child(5))) > li:nth-child(4n + 1), .step-list:not(:has(> li:nth-child(5))) > li:nth-child(4n) { grid-column: span 5; }
  .step-list:not(:has(> li:nth-child(5))) > li:nth-child(4n + 2), .step-list:not(:has(> li:nth-child(5))) > li:nth-child(4n + 3) { grid-column: span 7; }
  .step-list:has(> li:nth-child(3):last-child) > li { grid-column: span 4; }
  .step-list:not(:has(> li:nth-child(5))) > li:nth-child(4n + 2) { background: radial-gradient(70% 90% at 100% 0%, rgb(139 92 246 / .16), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; }
  .step-list:not(:has(> li:nth-child(5))) > li:nth-child(4n + 3) { background: radial-gradient(70% 90% at 0% 100%, rgb(198 244 50 / .07), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge) border-box; }
}
/* five steps or more: one card per step, a lit trace joining them */
.step-list:has(> li:nth-child(5)) { position: relative; gap: 12px; }
.step-list:has(> li:nth-child(5))::before { content: ""; position: absolute; left: 41px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, rgb(157 124 255 / .6), rgb(198 244 50 / .35)); }
.step-list:has(> li:nth-child(5)) > li.has-ic { padding-left: 76px; }
.step-list:has(> li:nth-child(5)) > li > .step-ic { position: absolute; left: 22px; top: 20px; margin: 0; }
.step-list > li > .tw-stack { margin-left: 0 !important; }

/* cards: six as a bento of wide and narrow blocks */
.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.4rem; font-stretch: 116%; letter-spacing: -0.03em; }
}
.cards > .card:first-child { background: radial-gradient(70% 80% at 100% 0%, rgb(139 92 246 / .2), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge-hot) border-box; }

/* ---------------------------------------------------------------- pricing: glass cards, the popular one lit */
.pricing > h2 { max-width: 22ch; }
.pricing > p, .cards-sec > p, .sec > p { max-width: 72ch; }
/* 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: 16px 16px 18px; scrollbar-width: none; }
  .pricing .plans::-webkit-scrollbar { display: none; }
  .pricing .plan { flex: 0 0 82%; scroll-snap-align: start; }
}
.plans { gap: 16px; }
@media (min-width: 900px) { .pricing .plans:has(> .plan:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { padding: 26px 22px 22px; transition: transform .35s var(--ease), box-shadow .35s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--glow-in), var(--sh-hot); }
.plan-name { margin: 0; font-size: 1.3rem; font-weight: 600; font-stretch: 116%; letter-spacing: -0.03em; color: var(--ink); }
.plan-qty { margin-top: 2px; font: 500 12.5px/1.45 var(--font-mono); color: var(--mute); }
.plan-price { margin-top: 18px; font: 600 clamp(1.8rem, 1.5rem + .8vw, 2.25rem)/1 var(--font-mono); letter-spacing: -0.065em; color: var(--ink); }
.plan-unit { margin: 6px 0 14px; font: 500 12.5px/1.4 var(--font-mono); color: var(--lime); }
.plan-features { margin: 6px 0 20px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); display: grid; gap: 8px; align-content: start; }
.plan-features li { position: relative; margin: 0; padding-left: 20px; line-height: 1.45; }
.plan-features li::before { content: ""; position: absolute; left: 1px; top: .42em; width: 8px; height: 8px; border-radius: 2px; background: var(--grad); }
.plan .btn { margin-top: auto; }
.plan:not(.popular) .btn-primary { background: rgb(255 255 255 / .05); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }
.plan:not(.popular) .btn-primary:hover { background: var(--grad); background-size: 150% 100%; background-position: 100% 0; color: var(--on); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 14px 36px -14px rgb(198 244 50 / .5); }
.plan.popular { background: radial-gradient(90% 60% at 50% 0%, rgb(139 92 246 / .24), transparent 70%) padding-box, linear-gradient(180deg, #1b1530, #0d0b16) padding-box, var(--edge-hot) border-box; box-shadow: var(--glow-in), 0 0 0 1px rgb(198 244 50 / .08), var(--sh-hot); }
.plan.popular .plan-price { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-badge { top: -11px; left: 20px; border-radius: 6px; background: var(--grad); color: var(--on); font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; box-shadow: 0 8px 22px -8px rgb(198 244 50 / .7); }
.plan-incl { font-size: 14px; color: var(--mute); }
.plan-incl strong { color: var(--ink-2); }
.pricing-note { font: 500 12px/1.5 var(--font-mono); color: var(--mute); }
.pay-terms { padding: 20px 24px; }
.pt-h { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.pay-terms li > svg { color: var(--lime); }
.pay-help { color: var(--mute); }

/* ---------------------------------------------------------------- tables: our prices in lime */
.table-wrap { border: 1px solid transparent; border-radius: var(--r); background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .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 255 255 / .03); color: var(--mute); font: 500 10.5px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--line-2); padding: 13px 16px; white-space: nowrap; }
:is(.tbl, .tiers) td, :is(.tbl, .tiers) tbody th { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; }
:is(.tbl, .tiers) td { font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.015em; }
:is(.tbl, .tiers) tbody th { color: var(--ink); font-weight: 600; }
:is(.tbl, .tiers) tbody th a { color: var(--ink); text-decoration-color: rgb(180 157 255 / .45); }
:is(.tbl, .tiers) tbody th a:hover { color: var(--violet-hi); }
:is(.tbl, .tiers) td strong { color: var(--lime); font-weight: 600; }
/* wide tables (7 columns or more) carry sentences in their cells: Archivo reads better there than a wide mono */
:is(.tbl, .tiers) table:has(thead th:nth-child(7)) td { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; }
:is(.tbl, .tiers) table:has(thead th:nth-child(7)) td strong { font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.02em; }
.tbl :where(tbody tr:nth-child(even)) { background: rgb(255 255 255 / .018); }
: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(157 124 255 / .07); }
:is(.tbl, .tiers) tr.hl { background: linear-gradient(90deg, rgb(157 124 255 / .16), rgb(198 244 50 / .04)); }
:is(.tbl, .tiers) tr.hl th { color: #fff; }
.tbl tr.hl th:first-child { box-shadow: inset 3px 0 0 var(--lime); }
.tier-badge, .rank-badge { border-radius: 5px; background: var(--grad); color: var(--on); font: 600 10px/1.4 var(--font-mono); letter-spacing: .04em; padding: 2px 8px; }
.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: 500 12px/1.5 var(--font-mono); color: var(--mute); }
.checked > svg { color: var(--lime); }
.tw-hint { color: var(--mute); }
.yes { color: var(--lime); }
.no { color: var(--mute); }
/* price and comparison tables have 6 to 8 columns (provider, configuration, on-demand, spot, billing, crypto, ID/KYC): on
   wide screens they use the full width of the page instead of the 860 px text column, so no column is cut off. Under
   1000 px the shared horizontal scroll (tw-scroll) or stacked layout (tw-stack) stays as it is. */
@media (min-width: 1000px) {
  .content .table-wrap.tw-scroll { width: min(1168px, calc(100vw - 64px)); max-width: none; }
}
/* phones: the stacked rows as glass cards */
@media (max-width: 480px) {
  :root .tw-stack tbody tr { border: 1px solid var(--line-2); border-radius: 12px; background: var(--glass), var(--pane); }
  :root .tw-stack tbody tr:not(.hl) { background: var(--glass), var(--pane); }
  :root .tw-stack tbody tr.hl { border-color: rgb(198 244 50 / .4); background: linear-gradient(90deg, rgb(157 124 255 / .16), rgb(198 244 50 / .05)), var(--pane); }
  .tw-scroll::after { box-shadow: inset -14px 0 12px -10px rgb(157 124 255 / .5); }
}
.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: 34%; color: var(--mute); font: 500 11.5px/1.55 var(--font-mono); letter-spacing: .02em; 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; }
}

/* ---------------------------------------------------------------- stats, rank, defs, link grid, coins */
.stats { gap: 14px; }
.stat { padding: 22px 22px 18px; }
.stat-v { font: 600 clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem)/1 var(--font-mono); letter-spacing: -0.065em; 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: 500 11.5px/1.45 var(--font-mono); color: var(--mute); }
.rank { padding: 22px 24px 10px; }
.rank.self { background: radial-gradient(80% 60% at 100% 0%, rgb(139 92 246 / .2), transparent 70%) padding-box, var(--glass) padding-box, var(--pane) padding-box, var(--edge-hot) border-box; }
.rank-n { border-radius: 8px; background: var(--grad); color: var(--on); font-family: var(--font-mono); font-weight: 600; }
.rank-head h3 { font-stretch: 112%; }
.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 255 255 / .03); border-left-color: var(--violet-2); }
.def { border-bottom-color: var(--line-2); }
.def dt { color: var(--ink); font-weight: 600; font-stretch: 108%; }
.lg a { color: var(--ink-2); }
.lg a:hover { color: var(--violet-hi); }
.lg-group, .lg-note { color: var(--mute); }
.lg-group { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; }
.coins li { padding: 14px 16px; }
.coin-code { color: var(--lime); }
.coin-name { color: var(--ink); }
.coin-note { color: var(--mute); }
.coins-mini li { border-color: var(--line-2); background: rgb(255 255 255 / .04); color: var(--ink-2); }

/* ---------------------------------------------------------------- FAQ, code, callouts, fold, sources, related, toc */
.faq-item { position: relative; border-bottom: 1px solid var(--line-2); padding: 4px 0 16px; max-width: 880px; }
.faq-item h3 { font-size: 1.08rem; font-weight: 600; font-stretch: 106%; letter-spacing: -0.015em; margin: 1.2em 0 .4em; }
.faq-item h3::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; vertical-align: .14em; border-radius: 2px; background: var(--grad); box-shadow: 0 0 8px rgb(198 244 50 / .35); }
@media (min-width: 1000px) {
  .faq:has(> .faq-item:nth-of-type(4)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); column-gap: 64px; align-items: start; max-width: none; }
  .faq:has(> .faq-item:nth-of-type(4)) > h2 { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: calc(var(--hdr-off) + 16px); margin-top: 1.2em; max-width: 12ch; }
  .faq:has(> .faq-item:nth-of-type(4)) > :not(h2) { grid-column: 2; max-width: none; }
  .faq:has(> .faq-item:nth-of-type(4)) > .faq-item:first-of-type { border-top: 1px solid var(--line-2); margin-top: 2.2em; }
}
.faq-q { color: var(--ink); }
.faq-a, .faq-a-in { color: var(--ink-2); }
.code { border: 1px solid transparent; border-radius: var(--r-s); background: linear-gradient(180deg, #110e1c, #0a0812) padding-box, var(--edge) border-box; box-shadow: var(--sh); }
.code figcaption { font: 500 12px/1.4 var(--font-mono); color: var(--mute); border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .02); }
.code code { font-family: var(--font-mono); font-size: 13px; color: #e6e0ff; }
.copy { border-radius: 6px; background: rgb(157 124 255 / .18); color: var(--ink); font-family: var(--font-mono); }
.callout { padding: 18px 22px; }
.callout-h { color: var(--ink); font-weight: 600; }
.fold > summary { color: var(--ink); font-stretch: 110%; font-weight: 600; }
.fold > summary:hover { color: var(--violet-hi); }
.fold[open] > summary { border-bottom-color: var(--line-2); }
.sources details { border-top: 1px solid var(--line-2); }
.sources summary { font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .12em; 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-family: var(--font-mono); font-size: 11.5px; color: var(--mute); }
.ext-ref { text-decoration-color: rgb(205 199 222 / .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; }
.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: 18px; font-family: var(--font-mono); color: var(--lime); transition: transform .3s var(--ease); }
.related-list li:hover { transform: translateY(-3px); box-shadow: var(--glow-in), var(--sh-hot); }
.related-list li:hover::after { transform: translateX(3px); }
.related-list a { color: var(--ink); font-weight: 600; font-stretch: 106%; }
.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: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.toc ol { padding-left: 1.4em; }
.toc li::marker { color: var(--mute-2); font-family: var(--font-mono); font-size: .85em; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--ink); }
.about-box { background: rgb(255 255 255 / .03); border: 1px solid var(--line-2); color: var(--mute); }
.about-h { color: var(--ink); }

/* ---------------------------------------------------------------- closing call-to-action: the edge of a die */
.cta { position: relative; overflow: hidden; isolation: isolate; padding: 52px 48px; border: 1px solid transparent; border-radius: var(--r-l); background: radial-gradient(50% 120% at 96% 0%, rgb(139 92 246 / .42), transparent 66%) padding-box, radial-gradient(36% 90% at 4% 110%, rgb(198 244 50 / .13), transparent 70%) padding-box, linear-gradient(180deg, #151026, #0a0812) padding-box, var(--edge-hot) border-box; color: var(--ink-2); box-shadow: var(--glow-in), var(--sh-hot); }
.cta::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 42%; z-index: -1; pointer-events: none; background: var(--die-lit); opacity: .32; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%), radial-gradient(90% 90% at 100% 50%, #000 30%, transparent 80%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 70%), radial-gradient(90% 90% at 100% 50%, #000 30%, transparent 80%); mask-composite: intersect; }
.cta .cta-h { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); font-weight: 600; font-stretch: 120%; line-height: 1.02; letter-spacing: -0.045em; color: #fff; margin: 0 0 12px; max-width: 18ch; }
.cta .cta-t { position: relative; }
.cta .cta-t p { margin: 0; color: #e2dcf2; max-width: 56ch; }
.cta .btn-primary { background: var(--grad); background-size: 150% 100%; color: var(--on); }
.cta .btn-primary:hover { background: var(--grad); background-size: 150% 100%; background-position: 100% 0; color: var(--on); }
.cta .btn-ghost, .cta .btn:not(.btn-primary) { background: rgb(8 7 13 / .5); border-color: rgb(241 237 255 / .32); color: #fff; }
.cta > .trust-strip { opacity: 1; color: #e2dcf2; }

/* ---------------------------------------------------------------- footer: night, a lit trace at the top */
.ftr { position: relative; margin-top: 96px; background: linear-gradient(180deg, #0a0812, #050409); 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(157 124 255 / .7) 30%, rgb(198 244 50 / .6) 70%, transparent); }
.ftr a { color: var(--ink-2); text-decoration: none; }
.ftr a:hover { color: #fff; }
.ftr .f-h, .f-contact-h { color: var(--mute); font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.ftr :is(.f-desc, .f-bottom, .f-legal, .f-pay-h, .f-pay-n, .sc-note) { color: var(--mute); }
.f-pay { border-top-color: var(--line); }
.f-pay-h { font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; }
.f-bottom { border-top-color: var(--line); font-family: var(--font-mono); font-size: 11.5px; }
@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(8 7 13 / .82); 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 .gw-reveal) */
@media (prefers-reduced-motion: no-preference) {
  .gw-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .gw-reveal.is-in { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .t-home .page-head.hero { padding: 40px 0 20px; }
  .t-home .page-head.hero h1 { font-size: clamp(2rem, 1rem + 5.6vw, 2.8rem); font-stretch: 112%; }
  .t-home .hero-visual::before { inset: -40px -16px; opacity: .6; }
  .page-head h1 { font-stretch: 112%; }
  h2 { font-stretch: 110%; }
  .cta { padding: 36px 22px; }
  .cta::after { width: 70%; opacity: .2; }
  .card { padding: 22px 20px 10px; }
  .quick-answer { padding: 20px 20px 18px 22px; }
  .trust-sec:not(.compact) .trust > li, .trust-sec:not(.compact) :is(.trust.n-4, .trust.n-5, .trust.n-3) > li:first-child { padding: 20px; }
  .step-list > li { padding: 20px 18px 16px; }
  .step-list:has(> li:nth-child(5)) > li.has-ic { padding-left: 70px; }
  .step-list:has(> li:nth-child(5)) > li > .step-ic { left: 18px; }
  .step-list:has(> li:nth-child(5))::before { left: 37px; }
  :root .kicker { border-radius: 10px; }
}
@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; }
}

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