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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Lumenfer — "Light & Iron" (1 November 2026). The only light theme of the three sister sites: a precision-engineering
   datasheet on warm porcelain. Colours come from site.json → theme (sites/lumenfer/_research/theme.json); everything
   else lives here.
   Type: Instrument Sans (headings + interface; its width axis gives the condensed giant numerals) and JetBrains Mono
   (prices in tables, specs, labels, code), self-hosted in engine/assets/fonts/lumenfer/ (SIL OFL 1.1), with Arial /
   Courier New fallbacks measured against them (size-adjust + metric overrides) so the swap does not move the layout.
   Surfaces: porcelain paper, white "sheets", hairline rules in ink at low opacity, a faint technical grid behind the
   head of each page, crop marks on the figures. One accent, "lumen" orange (#ff5a1f): lit cores, the slit of the logo,
   active rules, the flagship plan; text that must be orange uses ember #b83a0a. Footer and CTA panels in ink.
   Layout: content up to 1280 px; the home hero is an asymmetric two-column spread (headline left, the CPU-package figure
   hero.visual "die" right, engine/lib/blocks.mjs, classes hd-*); every h2 of the content is numbered like a datasheet
   section (§ 01, § 02…); home text sections are set like a newspaper page from 1100 px (headline, the answer paragraph
   as a lead, the rest in two ruled columns); articles keep the title full width and put "Contents" in a sticky left
   rail from 1200 px. Plans are spec sheets (mono labels, dotted leaders); five of them join into one ruled panel on the
   home and pricing pages from 1200 px. Tables are booktabs (heavy top and bottom rules, no zebra).
   Motion (core sweep, plan cycle, hovers, scroll reveal) is off under prefers-reduced-motion. FAQ accordions, the
   active contents link and the plan cycle of the hero figure come from sites/lumenfer/theme.js; without JavaScript every
   answer stays open and the figure shows the flagship plan (hover or focus a row to light another).
   Contrast (WCAG AA) on paper #f4f2ed / sheets #fbfaf7: ink #14130f 16.6:1, body #2e2c28 12.4:1, steel #565b63 6.1:1,
   ember #b83a0a 5.1:1, ink on lumen 6.0:1. On ink #12110e: #e9e6df 15:1, #c9c5bc 11:1, #a6a29a 7.4:1, #ff7a3d 6.9:1. */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(/assets/fonts/lf-instrument-sans-latin-wdth-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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(/assets/fonts/lf-instrument-sans-latin-ext-wdth-wght.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/assets/fonts/lf-jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/assets/fonts/lf-jetbrains-mono-latin-ext-wght.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* fallbacks measured with fontTools against the woff2 files (English text, advance widths): same line length and line box */
@font-face { font-family: "Instrument Sans Fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 102%; ascent-override: 95.1%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); size-adjust: 98%; ascent-override: 99%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Courier"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1328px;
  --read: 700px;
  --ink: #14130f;
  --ink-2: #2e2c28;
  --steel: #565b63;
  --steel-2: #8a8e95;
  --steel-3: #c3c5c9;
  --paper: #f4f2ed;
  --sheet: #fbfaf7;
  --sheet-2: #ebe8e1;
  --rule: rgb(20 19 15 / .11);
  --rule-2: rgb(20 19 15 / .2);
  --rule-3: rgb(20 19 15 / .38);
  --lumen: #ff5a1f;
  --lumen-hot: #ffb38a;
  --ember: #b83a0a;
  --night: #12110e;
  --night-2: #1c1b17;
  --night-ink: #e9e6df;
  --night-ink-2: #c9c5bc;
  --night-ink-3: #a6a29a;
  --night-lumen: #ff7a3d;
  --night-rule: rgb(233 230 223 / .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr-off: 80px;
  --focus: #14130f;
  --tech-grid: linear-gradient(rgb(20 19 15 / .055) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgb(20 19 15 / .055) 1px, transparent 1px) 0 0 / 32px 32px;
  --lf-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
  --lf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
html { overflow-x: clip; scroll-padding-top: var(--hdr-off); }
body {
  position: relative; isolation: isolate; overflow-x: clip;
  background: var(--paper); color: var(--ink-2);
  font-size: 17px; line-height: 1.66; letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga", "calt";
}
/* the technical grid behind the head of every page, fading out downwards */
body::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 880px; z-index: -1; pointer-events: none;
  background: var(--tech-grid); background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
}
::selection { background: rgb(255 90 31 / .26); color: var(--ink); }
:where(a, button, summary, [tabindex]):focus-visible, .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; box-shadow: 0 0 0 6px rgb(255 90 31 / .22); }
.wrap { max-width: var(--wrap); padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; }
h1 { line-height: 1.04; font-stretch: 92%; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.2vw, 2.2rem); line-height: 1.1; font-stretch: 94%; margin: 2.4em 0 .65em; scroll-margin-top: var(--hdr-off); }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.016em; margin: 1.9em 0 .5em; scroll-margin-top: var(--hdr-off); }
p, li { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--lumen); text-decoration-thickness: 1.5px; text-underline-offset: 3.5px; transition: color .15s ease, text-decoration-color .15s ease, text-decoration-thickness .15s ease; }
a:hover { color: var(--ember); text-decoration-color: var(--ember); text-decoration-thickness: 2px; }
code { font-family: var(--font-mono); font-size: .84em; color: var(--ink); background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 3px; padding: .06em .34em; }
:is(.plan-price, .hd-price, .hd-num, .stat-v, .tbl td, .tiers td, .facts-table td, code, .pt-price) { font-variant-numeric: tabular-nums; }
hr { border: 0; height: 1px; background: var(--rule-2); }

/* ---------------------------------------------------------------- top strip + solid header with a rule */
.topbar { background: var(--night); color: var(--night-ink-2); border: 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; padding: 9px 0; }
.topbar .wrap::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 12px; background: var(--lumen); box-shadow: 0 0 0 3px rgb(255 90 31 / .18), 0 0 10px rgb(255 90 31 / .8); vertical-align: 0; }
.topbar strong { color: var(--night-ink); filter: none; font-weight: 700; }
.topbar .tb-sep { color: var(--night-ink-3); }

.hdr { top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule-2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-in { min-height: 64px; gap: 30px; }
.hdr .logo-img { height: 32px; }
.hdr .nav { align-self: stretch; gap: 26px; }
.hdr .nav a { position: relative; display: flex; align-items: center; padding: 0; border-radius: 0; background: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; letter-spacing: -0.005em; }
.hdr .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease), background-color .2s ease; }
.hdr .nav a:hover { color: var(--ink); background: none; }
.hdr .nav a:hover::after { transform: scaleX(1); }
.hdr .nav a[aria-current] { color: var(--ink); background: none; }
.hdr .nav a[aria-current]::after { transform: scaleX(1); background: var(--lumen); box-shadow: 0 0 10px rgb(255 90 31 / .6); }
.hdr-login { font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.hdr-login:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lumen); }
.hdr .hdr-cta { gap: 10px; padding: 9px 15px 9px 13px; font-size: 14px; border-radius: 4px; }
.hdr .hdr-cta::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--lumen); box-shadow: 0 0 8px rgb(255 90 31 / .9); }
.menu { border-radius: 3px; border: 1px solid var(--rule-3); background: transparent; color: var(--ink); font: 600 14px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px; }
.menu:hover, .menu[aria-expanded="true"] { border-color: var(--ink); background: var(--sheet); }
@media (max-width: 860px) {
  .hdr-in { gap: 12px; }
  .hdr .nav {
    top: 100%; left: 0; right: 0; gap: 0; padding: 8px 16px 18px; counter-reset: lf-nav;
    background: var(--paper); border-bottom: 1px solid var(--rule-2); box-shadow: 0 30px 40px -30px rgb(20 19 15 / .35);
  }
  .hdr .nav a { counter-increment: lf-nav; display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px; color: var(--ink); }
  .hdr .nav a::before { content: counter(lf-nav, decimal-leading-zero) / ""; font: 500 12px var(--font-mono); color: var(--steel); }
  .hdr .nav a::after { display: none; }
  .hdr .nav a[aria-current] { color: var(--ember); }
  .menu { margin-left: auto; }
}

/* ---------------------------------------------------------------- buttons: ink, square-cut, a lumen LED on the main one */
.btn { border-radius: 4px; font-weight: 600; letter-spacing: -0.006em; border-width: 1px; transition: transform .2s var(--ease), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset, 0 8px 20px -12px rgb(20 19 15 / .7); }
.btn-primary:hover { background: #26241f; color: #fff; border-color: #26241f; box-shadow: inset 0 -2px 0 var(--lumen), 0 12px 26px -14px rgb(20 19 15 / .8); transform: translateY(-1px); }
.btn-ghost, .btn:not(.btn-primary) { background: transparent; border-color: var(--rule-3); color: var(--ink); box-shadow: none; }
.btn-ghost:hover, .btn:not(.btn-primary):hover { background: var(--sheet); border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn .ic { width: 1em; height: 1em; }

/* ---------------------------------------------------------------- page head */
.crumbs ol { align-items: center; margin-top: 30px; font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--steel); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--steel-2); }
.crumbs a { color: var(--steel); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lumen); }
.crumbs [aria-current] { color: var(--ink-2); }
.page-head, .page-head.hero { padding: 22px 0 10px; max-width: 980px; }
.page-head h1 { font-size: clamp(2.1rem, 1.25rem + 2.6vw, 3.5rem); margin-bottom: .42em; max-width: 24ch; }
.kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 0; border-radius: 0; background: none;
  font: 600 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.kicker::before { content: ""; width: 9px; height: 9px; flex: none; align-self: flex-start; margin-top: .42em; background: var(--lumen); box-shadow: 0 0 10px rgb(255 90 31 / .65); }
.kicker::after { content: ""; flex: 0 1 72px; height: 1px; background: var(--rule-3); }
.lede { font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem); line-height: 1.58; color: #3d3b36; max-width: 60ch; }
.lede p { margin-bottom: .6em; }
.lede strong { color: var(--ink); }
.hero-btns { gap: 10px; margin: 30px 0 20px; }
.hero-note { gap: 10px; margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--steel); max-width: 58ch; }
.hero-note .ic { color: var(--ink); }
/* badges: one ruled spec strip */
.badges { gap: 0; margin: 4px 0 6px; border-block: 1px solid var(--rule-2); width: fit-content; max-width: 100%; }
.badges li {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px 9px 12px; border: 0; border-radius: 0; background: none;
  font: 500 12px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.badges li + li { box-shadow: inset 1px 0 0 var(--rule); }
.badges li::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--ink); -webkit-mask: var(--lf-check) center / contain no-repeat; mask: var(--lf-check) center / contain no-repeat; }
.badges li:first-child::before { background: var(--lumen); }
.badges strong { color: var(--ink); font-weight: 700; }
.meta { font: 500 12px/1.5 var(--font-mono); letter-spacing: .03em; color: var(--steel); margin-top: 16px; }

/* ---------------------------------------------------------------- home hero: an asymmetric spread */
.t-home .page-head.hero { position: relative; padding: 64px 0 40px; }
.t-home .page-head.hero h1 { font-size: clamp(2.45rem, 1.2rem + 3.6vw, 4.3rem); line-height: 1; letter-spacing: -0.03em; word-spacing: .04em; font-stretch: 86%; max-width: 15ch; margin-bottom: .38em; }
.t-home .hero-visual { margin-top: 44px; }
@media (min-width: 1080px) {
  .t-home .page-head.hero.has-visual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(470px, 540px); column-gap: clamp(48px, 5vw, 96px); align-items: start; padding: 76px 0 56px; }
  .t-home .hero-visual { margin-top: 8px; }
}
/* ---------------------------------------------------------------- hero visual "die": the plans as a CPU package */
.hero-die {
  position: relative; margin: 0; container-type: inline-size;
  background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 4px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 40px 80px -56px rgb(20 19 15 / .55), 0 2px 4px -2px rgb(20 19 15 / .08);
}
/* crop marks just outside the four corners */
.hero-die::before {
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / 9px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) left top / 1px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 9px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) right top / 1px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 9px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) left bottom / 1px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 9px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) right bottom / 1px 9px no-repeat;
}
.hd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule-2); }
.hd-k, .hd-legend { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.hd-k::before { content: "Fig. 1" / ""; padding: 2px 6px; background: var(--ink); color: var(--paper); letter-spacing: .06em; }
.hd-legend { color: var(--steel); letter-spacing: .04em; text-transform: none; white-space: nowrap; }
.hd-legend .hd-c { width: 10px; height: 10px; border-radius: 1.5px; background: var(--lumen); box-shadow: 0 0 6px rgb(255 90 31 / .7); }
.hd-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 22px; align-items: center; padding: 28px 22px 26px;
  background: linear-gradient(rgb(20 19 15 / .045) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgb(20 19 15 / .045) 1px, transparent 1px) 0 0 / 12px 12px, var(--sheet);
}
/* the package: substrate with land pads, chiplets left and right of the I/O die */
.hd-pkg {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(36px, 15%) minmax(0, 1fr); gap: 8px; padding: 16px;
  border-radius: 8px; background: radial-gradient(circle, rgb(20 19 15 / .14) .9px, transparent 1.3px) 0 0 / 7px 7px, #e7e3da;
  box-shadow: inset 0 0 0 1px rgb(20 19 15 / .16), 0 1px 0 #fff, 0 18px 30px -22px rgb(20 19 15 / .5);
}
/* dimension line over the package */
.hd-pkg::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 7px; border-inline: 1px solid var(--steel-2); background: linear-gradient(var(--steel-2), var(--steel-2)) center / 100% 1px no-repeat; }
.hd-side { display: grid; gap: 8px; align-content: center; }
.hd-ccd { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; padding: 5px; border-radius: 3px; background: linear-gradient(180deg, #24221d, #191814); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05), 0 1px 0 rgb(255 255 255 / .6); }
.hd-io { display: grid; place-items: center; border-radius: 3px; background: repeating-linear-gradient(0deg, transparent 0 5px, rgb(255 255 255 / .045) 5px 6px), linear-gradient(180deg, #2b2924, #1d1c18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05), 0 1px 0 rgb(255 255 255 / .6); }
.hd-io small { font: 600 9px/1 var(--font-mono); letter-spacing: .12em; color: #8f8b83; writing-mode: vertical-rl; transform: rotate(180deg); }
.hd-pkg .hd-c {
  display: block; aspect-ratio: 4 / 5; border-radius: 1.5px; background: #3a3832; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04);
  transition: background-color .3s ease, box-shadow .3s ease; transition-delay: calc(var(--k, 0) * 9ms);
}
/* which plan is lit: hover / keyboard focus of a row > data-on (theme.js) > the flagship (lp, rp, .hd-pop) */
.hero-die:not([data-on]) .hd-pkg .hd-c.lp,
.hero-die[data-on="1"] .hd-pkg .hd-c.l1, .hero-die[data-on="2"] .hd-pkg .hd-c.l2, .hero-die[data-on="3"] .hd-pkg .hd-c.l3,
.hero-die[data-on="4"] .hd-pkg .hd-c.l4, .hero-die[data-on="5"] .hd-pkg .hd-c.l5, .hero-die[data-on="6"] .hd-pkg .hd-c.l6 {
  background: radial-gradient(circle at 50% 42%, #ffe2cc 0 16%, transparent 62%), var(--lumen);
  box-shadow: inset 0 0 0 1px rgb(255 196 160 / .55), 0 0 9px 1px rgb(255 90 31 / .6);
}
.hero-die:has(.hd-pl > li:is(:hover, :focus-within)) .hd-pkg .hd-c { background: #3a3832; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04); }
.hero-die:has(.hd-pl > li:nth-child(1):is(:hover, :focus-within)) .hd-pkg .hd-c.l1,
.hero-die:has(.hd-pl > li:nth-child(2):is(:hover, :focus-within)) .hd-pkg .hd-c.l2,
.hero-die:has(.hd-pl > li:nth-child(3):is(:hover, :focus-within)) .hd-pkg .hd-c.l3,
.hero-die:has(.hd-pl > li:nth-child(4):is(:hover, :focus-within)) .hd-pkg .hd-c.l4,
.hero-die:has(.hd-pl > li:nth-child(5):is(:hover, :focus-within)) .hd-pkg .hd-c.l5,
.hero-die:has(.hd-pl > li:nth-child(6):is(:hover, :focus-within)) .hd-pkg .hd-c.l6 {
  background: radial-gradient(circle at 50% 42%, #ffe2cc 0 16%, transparent 62%), var(--lumen);
  box-shadow: inset 0 0 0 1px rgb(255 196 160 / .55), 0 0 9px 1px rgb(255 90 31 / .6);
}
/* the readout: the lit plan's core count as a giant condensed numeral */
.hd-reads { display: grid; align-self: stretch; align-content: center; }
.hd-r { grid-area: 1 / 1; display: grid; align-content: center; gap: 2px; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s var(--ease); }
.hero-die:not([data-on]) .hd-r.rp,
.hero-die[data-on="1"] .hd-r.r1, .hero-die[data-on="2"] .hd-r.r2, .hero-die[data-on="3"] .hd-r.r3,
.hero-die[data-on="4"] .hd-r.r4, .hero-die[data-on="5"] .hd-r.r5, .hero-die[data-on="6"] .hd-r.r6 { opacity: 1; transform: none; }
.hero-die:has(.hd-pl > li:is(:hover, :focus-within)) .hd-r { opacity: 0; transform: translateY(8px); }
.hero-die:has(.hd-pl > li:nth-child(1):is(:hover, :focus-within)) .hd-r.r1,
.hero-die:has(.hd-pl > li:nth-child(2):is(:hover, :focus-within)) .hd-r.r2,
.hero-die:has(.hd-pl > li:nth-child(3):is(:hover, :focus-within)) .hd-r.r3,
.hero-die:has(.hd-pl > li:nth-child(4):is(:hover, :focus-within)) .hd-r.r4,
.hero-die:has(.hd-pl > li:nth-child(5):is(:hover, :focus-within)) .hd-r.r5,
.hero-die:has(.hd-pl > li:nth-child(6):is(:hover, :focus-within)) .hd-r.r6 { opacity: 1; transform: none; }
.hd-num { font: 600 clamp(5rem, 22cqi, 7.4rem)/.82 var(--font-head); font-stretch: 75%; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 10px; }
.hd-rl { font: 500 11px/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.hd-rc { margin-top: 8px; font: 600 14.5px/1.3 var(--font-head); letter-spacing: -0.01em; color: var(--ink); }
.hd-rn { font: 500 11.5px/1.35 var(--font-mono); color: var(--steel); }
/* the plan rows: the facts, each a link to its checkout */
.hd-pl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); counter-reset: none; }
.hd-p { margin: 0; }
.hd-p + .hd-p { border-top: 1px solid var(--rule); }
.hd-p a {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; column-gap: 14px;
  padding: 10px 16px 10px 14px; color: var(--ink); text-decoration: none; background: transparent;
  transition: background-color .2s ease;
}
.hd-p a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lumen); transform: scaleY(0); transition: transform .25s var(--ease); }
.hd-n { display: grid; place-items: center; height: 28px; border: 1px solid var(--rule-3); border-radius: 3px; font: 600 13px/1 var(--font-mono); color: var(--ink); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.hd-id { display: grid; min-width: 0; }
.hd-name { font: 600 15px/1.25 var(--font-head); letter-spacing: -0.01em; white-space: nowrap; }
.hd-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font: 600 10px/1.5 var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; color: var(--paper); background: var(--ink); border-radius: 2px; }
.hd-cpu { font: 400 12px/1.35 var(--font-mono); color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-spec { font: 400 12px/1.35 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.hd-price { display: grid; justify-items: end; text-align: right; }
.hd-price b { font: 600 15.5px/1.2 var(--font-mono); letter-spacing: -0.02em; }
.hd-price small { font: 400 11px/1.3 var(--font-mono); color: var(--steel); }
/* active row: the lit plan */
.hd-pl > li > a:hover, .hd-pl > li:is(:hover, :focus-within) > a,
.hero-die:not([data-on]) .hd-pl > li.hd-pop > a,
.hero-die[data-on="1"] .hd-pl > li:nth-child(1) > a, .hero-die[data-on="2"] .hd-pl > li:nth-child(2) > a, .hero-die[data-on="3"] .hd-pl > li:nth-child(3) > a,
.hero-die[data-on="4"] .hd-pl > li:nth-child(4) > a, .hero-die[data-on="5"] .hd-pl > li:nth-child(5) > a, .hero-die[data-on="6"] .hd-pl > li:nth-child(6) > a { background: #fff; }
:is(.hd-pl > li:is(:hover, :focus-within), .hero-die:not([data-on]) .hd-pl > li.hd-pop,
  .hero-die[data-on="1"] .hd-pl > li:nth-child(1), .hero-die[data-on="2"] .hd-pl > li:nth-child(2), .hero-die[data-on="3"] .hd-pl > li:nth-child(3),
  .hero-die[data-on="4"] .hd-pl > li:nth-child(4), .hero-die[data-on="5"] .hd-pl > li:nth-child(5), .hero-die[data-on="6"] .hd-pl > li:nth-child(6)) > a::before { transform: none; }
:is(.hd-pl > li:is(:hover, :focus-within), .hero-die:not([data-on]) .hd-pl > li.hd-pop,
  .hero-die[data-on="1"] .hd-pl > li:nth-child(1), .hero-die[data-on="2"] .hd-pl > li:nth-child(2), .hero-die[data-on="3"] .hd-pl > li:nth-child(3),
  .hero-die[data-on="4"] .hd-pl > li:nth-child(4), .hero-die[data-on="5"] .hd-pl > li:nth-child(5), .hero-die[data-on="6"] .hd-pl > li:nth-child(6)) .hd-n { background: var(--lumen); border-color: var(--lumen); color: var(--ink); }
/* another row hovered: the plan lit before goes quiet */
.hero-die:has(.hd-pl > li:is(:hover, :focus-within)) .hd-pl > li:not(:hover, :focus-within) > a { background: transparent; }
.hero-die:has(.hd-pl > li:is(:hover, :focus-within)) .hd-pl > li:not(:hover, :focus-within) > a::before { transform: scaleY(0); }
.hero-die:has(.hd-pl > li:is(:hover, :focus-within)) .hd-pl > li:not(:hover, :focus-within) .hd-n { background: transparent; border-color: var(--rule-3); color: var(--ink); }
.hd-p a:focus-visible { outline-offset: -3px; box-shadow: none; }
.hd-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 11px 16px; border-top: 1px solid var(--rule-2); font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); text-align: center; }
.hd-foot::before, .hd-foot::after { content: ""; flex: 1; max-width: 40px; height: 1px; background: var(--rule-3); }
/* narrow figure (phones): the readout over the package, one line per plan */
@container (max-width: 500px) {
  .hd-top { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; }
  .hd-k { flex-wrap: wrap; row-gap: 4px; } /* a long translated legend wraps instead of running off the phone screen */
  .hd-stage { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px 14px 18px; }
  .hd-reads { order: -1; }
  .hd-r { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; align-items: end; }
  .hd-num { grid-row: 1 / span 3; font-size: 4.6rem; margin: 0; }
  .hd-rl, .hd-rc, .hd-rn { grid-column: 2; }
  .hd-rc { margin-top: 0; }
  .hd-pkg { padding: 12px; }
  .hd-pkg::before { display: none; }
  .hd-p a { grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 12px; }
  .hd-spec { display: none; }
}
@container (min-width: 501px) and (max-width: 560px) { .hd-spec { display: none; } .hd-p a { grid-template-columns: 40px minmax(0, 1fr) auto; } }

/* ---------------------------------------------------------------- content column + datasheet numbering */
.content { max-width: 860px; counter-reset: lf-sec lf-tab lf-fig; }
.t-home .content, .t-pricing .content { max-width: none; }
.content :is(p, ul, ol, blockquote):not([class]) { max-width: var(--read); }
.content li { margin: .4em 0; }
.content li::marker { color: var(--steel); }
.content :is(ul, ol):not([class]) { padding-left: 1.25em; }
.content ul:not([class]) > li::marker { content: "▪  "; color: var(--lumen); font-size: .9em; }
/* every h2 of the content gets its section number, mono, above it */
.content > :is(section, .fold, .band) h2:not(.related h2) { counter-increment: lf-sec; }
.content > :is(section, .band > section) > h2::before, .content > .fold > section > h2::before {
  content: "§ " counter(lf-sec, decimal-leading-zero) / ""; display: block; width: fit-content; margin-bottom: 16px; padding: 3px 7px 2px;
  font: 600 12px/1.4 var(--font-mono); font-stretch: 100%; letter-spacing: .06em; color: var(--ember); border: 1px solid rgb(184 58 10 / .45); border-radius: 2px;
}
.content > section > h2:first-child, .content > section > :first-child > h2:first-child { margin-top: 2.2em; }

/* quick answer: the abstract of the datasheet */
.quick-answer {
  position: relative; max-width: 800px; margin: 22px 0 18px; padding: 22px 26px 20px; border-radius: 0;
  background: var(--sheet); border: 1px solid var(--rule-2); border-top: 2px solid var(--ink); border-left: 1px solid var(--rule-2);
  box-shadow: 0 24px 50px -40px rgb(20 19 15 / .5);
}
.qa-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.qa-label::before { content: ""; width: 8px; height: 8px; background: var(--lumen); box-shadow: 0 0 8px rgb(255 90 31 / .7); }
.qa-q { font: 600 1.1rem/1.4 var(--font-head); letter-spacing: -0.016em; color: var(--ink); margin-bottom: 8px; }
.qa-text { color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; }
.quick-answer .qa-text p { max-width: none; }
.qa-text p:last-child { margin-bottom: 0; }

/* contents */
.toc { max-width: 860px; margin: 18px 0 8px; padding: 18px 22px 16px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--sheet); font-size: 14.5px; counter-reset: lf-toc; }
.toc-h { font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.toc ol { list-style: none; padding-left: 0; }
.toc li { counter-increment: lf-toc; display: flex; gap: 12px; margin: .3em 0; }
.toc li::before { content: counter(lf-toc, decimal-leading-zero) / ""; flex: none; padding-top: .3em; font: 500 11px/1.4 var(--font-mono); color: var(--steel); }
.toc a { color: var(--ink-2); line-height: 1.45; text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lumen); }
@media (max-width: 1199.98px) { .toc ol { columns: 2 280px; column-gap: 32px; } }
/* articles at 1200 px and wider: title across, contents in a sticky left rail, the text set off to the right */
@media (min-width: 1200px) {
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 64px; align-items: start;
    grid-template-areas: "crumbs crumbs" "head head" "toc content" "rest rest";
  }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > * { grid-column: 1 / -1; }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > .crumbs { grid-area: crumbs; }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > .page-head { grid-area: head; max-width: 1100px; }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > .content { grid-area: content; max-width: 860px; min-width: 0; }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > .toc {
    grid-area: toc; position: sticky; top: var(--hdr-off); max-height: calc(100vh - var(--hdr-off) - 24px); overflow: auto; overscroll-behavior: contain;
    margin: 30px 0 0; padding: 14px 0 0; border: 0; border-top: 2px solid var(--ink); background: none; font-size: 13.5px; scrollbar-width: thin;
  }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > .toc ol { columns: auto; }
  body:not(.t-home, .t-pricing) .toc li { margin: 0; border-bottom: 1px solid var(--rule); }
  body:not(.t-home, .t-pricing) .toc li::before { padding-top: 9px; }
  body:not(.t-home, .t-pricing) .toc a { position: relative; display: block; flex: 1; padding: 7px 0; color: var(--steel); }
  body:not(.t-home, .t-pricing) .toc a:hover { color: var(--ink); text-decoration: none; }
  body:not(.t-home, .t-pricing) .toc li:has(a.is-active)::before { color: var(--ember); }
  body:not(.t-home, .t-pricing) .toc a.is-active { color: var(--ink); font-weight: 600; }
}
/* pricing page: the sections as a ruled row of tabs */
@media (min-width: 760px) {
  .t-pricing .toc { max-width: none; padding: 0; border: 0; border-block: 1px solid var(--rule-2); background: none; }
  .t-pricing .toc-h { display: none; }
  .t-pricing .toc ol { display: flex; flex-wrap: wrap; columns: auto; }
  .t-pricing .toc li { margin: 0; }
  .t-pricing .toc li + li { box-shadow: inset 1px 0 0 var(--rule); }
  .t-pricing .toc li::before { padding: 13px 0 0 14px; }
  .t-pricing .toc a { display: block; padding: 11px 16px 11px 0; font-size: 13.5px; }
}

/* ---------------------------------------------------------------- stats: key figures, giant condensed numerals */
.stats { gap: 1px; margin: 24px 0 10px; border-block: 2px solid var(--ink); background: var(--rule-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.stat { position: relative; padding: 24px 24px 26px; border: 0; border-radius: 0; background: var(--paper); box-shadow: none; }
@media (min-width: 900px) {
  .stats:has(> .stat:nth-child(6):last-child), .stats:has(> .stat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats:has(> .stat:nth-child(4):last-child), .stats:has(> .stat:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats:has(> .stat:nth-child(6):last-child, > .stat:nth-child(3):last-child) > .stat:nth-child(3n+1),
  .stats:has(> .stat:nth-child(4):last-child, > .stat:nth-child(8):last-child) > .stat:nth-child(4n+1) { padding-left: 0; }
}
.stat-ic { display: none; }
.stat-v { margin: 0; font: 600 clamp(3.4rem, 2.4rem + 2.6vw, 5.2rem)/.9 var(--font-head); font-stretch: 75%; letter-spacing: -0.035em; color: var(--ink); }
.stat-l { margin: 14px 0 0; font: 500 12.5px/1.45 var(--font-mono); letter-spacing: .01em; color: var(--ink-2); }
.stat-n { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--steel); }
.stat:first-child .stat-v { color: var(--ember); }
@media (max-width: 640px) {
  .stat { padding: 18px 0 20px; }
  .stat-v { font-size: 3.1rem; }
  .stat-l { margin-top: 10px; }
}

/* ---------------------------------------------------------------- plans: spec sheets */
.pricing { margin-top: 0; }
.plans { gap: 12px; margin-top: 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.plan {
  padding: 22px 20px 20px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--sheet);
  box-shadow: 0 1px 0 #fff inset, 0 20px 40px -34px rgb(20 19 15 / .45); transition: transform .3s var(--ease), box-shadow .3s ease, border-color .2s ease;
}
.plan:hover { transform: translateY(-3px); border-color: var(--rule-3); box-shadow: 0 1px 0 #fff inset, 0 28px 50px -34px rgb(20 19 15 / .55); }
.plan-name { margin: 0 0 4px; font: 600 13px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.plan-qty { margin: 0; font-size: 14px; color: var(--steel); }
.plan-price { margin: 20px 0 0; font: 600 3.5rem/.9 var(--font-head); font-stretch: 75%; letter-spacing: -0.03em; color: var(--ink); font-feature-settings: "tnum"; }
.plan-price::after { content: "per 30 days" / ""; display: block; margin-top: 10px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
/* longer terms: a ledger with dotted leaders; without CSS it reads "6 months $1,108.45 (−10%) · 12 months …" */
.plan-terms { display: grid; margin: 16px 0 0; padding: 0; border-block: 1px solid var(--rule); font: 500 12.5px/1.35 var(--font-mono); }
.plan-term { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
.plan-term + .pt-sep + .plan-term { border-top: 1px dotted var(--rule-3); }
.pt-sep { display: none; }
.pt-len { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; color: var(--steel); white-space: nowrap; }
.pt-len::after { content: ""; flex: 1; min-width: 8px; border-bottom: 1.5px dotted var(--steel-3); transform: translateY(-3px); }
.pt-price { color: var(--ink); font-weight: 600; white-space: nowrap; }
.pt-off { color: var(--ember); font-weight: 600; white-space: nowrap; }
.tiers .tier-off { color: var(--ember); font: 600 12px var(--font-mono); white-space: nowrap; }
/* hardware rows: a mono label over each value (make-site-json.mjs writes the five features in this order for every plan) */
.plan-features { margin: 18px 0 20px; padding: 0; border: 0; }
.plan-features li { position: relative; display: block; margin: 0; padding: 9px 0 9px; border-bottom: 1px dotted var(--rule-3); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.plan-features li::before { content: ""; display: block; margin-bottom: 2px; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.plan-features li:nth-child(1)::before { content: "CPU" / ""; }
.plan-features li:nth-child(2)::before { content: "Memory · storage" / ""; }
.plan-features li:nth-child(3)::before { content: "Network" / ""; }
.plan-features li:nth-child(4)::before { content: "Access" / ""; }
.plan-features li:nth-child(5)::before { content: "Cheapest elsewhere" / ""; }
.plan-features li:nth-child(-n+3) { font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; color: var(--ink); }
.plan-features li:last-child:nth-child(5) { border-bottom: 0; color: var(--steel); font-size: 13px; }
.plan .btn { border-radius: 4px; }
.plan:not(.popular) .btn-primary { background: transparent; color: var(--ink); border-color: var(--rule-3); box-shadow: none; }
.plan:not(.popular) .btn-primary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--lumen); }
/* the flagship: the slit of light on its top edge, the one orange button */
.plan.popular { border-color: var(--ink); background: #fff; box-shadow: 0 1px 0 #fff inset, 0 30px 60px -36px rgb(20 19 15 / .55); }
.plan.popular::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, transparent, var(--lumen) 12%, var(--lumen-hot) 50%, var(--lumen) 88%, transparent); box-shadow: 0 0 14px rgb(255 90 31 / .55); }
.plan.popular .btn-primary { background: var(--lumen); border-color: var(--lumen); color: var(--ink); box-shadow: 0 10px 24px -12px rgb(255 90 31 / .8); }
.plan.popular .btn-primary:hover { background: #ff6d36; border-color: #ff6d36; color: var(--ink); box-shadow: 0 14px 30px -12px rgb(255 90 31 / .9); }
.plan-badge { top: 20px; right: 18px; left: auto; transform: none; padding: 3px 8px; border-radius: 2px; font: 600 10.5px/1.5 var(--font-mono); letter-spacing: .1em; color: var(--paper); background: var(--ink); box-shadow: none; }
.plan-incl { margin: 22px 0 0; font-size: 14px; color: var(--steel); }
.plan-incl strong { font: 600 11.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-right: 6px; }
@media (min-width: 900px) { .plan.popular { transform: none; } .plan.popular:hover { transform: translateY(-3px); } }
/* five plans on the home and pricing pages of a wide screen: one ruled panel, the plans as its columns */
@media (min-width: 1200px) {
  :is(.t-home, .t-pricing) .plans:has(> .plan:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--sheet); box-shadow: 0 30px 60px -50px rgb(20 19 15 / .5); }
  :is(.t-home, .t-pricing) .plans:has(> .plan:nth-child(5):last-child) > .plan { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  :is(.t-home, .t-pricing) .plans:has(> .plan:nth-child(5):last-child) > .plan + .plan { box-shadow: inset 1px 0 0 var(--rule-2); }
  :is(.t-home, .t-pricing) .plans:has(> .plan:nth-child(5):last-child) > .plan.popular { background: #fff; box-shadow: 0 0 0 1px var(--ink), 0 30px 60px -36px rgb(20 19 15 / .5); z-index: 1; }
  :is(.t-home, .t-pricing) .plans:has(> .plan:nth-child(5):last-child) > .plan:hover { transform: none; background: #fff; }
}

/* "Before you pay" */
.pay-terms { margin-top: 22px; padding: 18px 22px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--sheet); font-size: 14px; color: var(--ink-2); }
.content .pay-terms ul { max-width: none; }
@media (min-width: 1000px) {
  :is(.t-home, .t-pricing) .pay-terms ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 36px; margin-top: 10px; }
  :is(.t-home, .t-pricing) .pay-terms li { margin: 0; }
}
.pt-h, .cs-label, .hp-k, .f-pay-h, .pay-table thead th { font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pay-terms li > svg { color: var(--ink); }

/* ---------------------------------------------------------------- tables: booktabs, mono heads, our row lit */
.table-wrap { counter-increment: lf-tab; border: 0; border-block: 2px solid var(--ink); border-radius: 0; background: transparent; box-shadow: none; }
:is(.tbl, .tiers, .pay-table) table, .facts-table { font-size: 15px; line-height: 1.55; }
:is(.tbl, .tiers) thead th { background: transparent; font: 600 11px/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--steel); border-bottom: 1px solid var(--ink); padding-top: 12px; padding-bottom: 10px; }
:is(.tbl, .tiers, .facts-table, .pay-table) :is(th, td) { border-bottom-color: var(--rule); }
.tbl th, .tbl td { padding: 12px 16px 12px 0; }
.tbl :is(th, td):first-child { padding-left: 0; }
.tbl :where(tbody tr:nth-child(even)) { background: none; }
:is(.tbl, .tiers) tbody tr { transition: background-color .15s ease; }
:is(.tbl, .tiers) tbody tr:hover { background: rgb(20 19 15 / .025); }
.tbl tbody th { color: var(--ink); font-weight: 600; }
.tbl td { color: var(--ink-2); }
.tbl td strong, .tiers td strong { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
:is(.tbl, .tiers) tr.hl { background: linear-gradient(90deg, rgb(255 90 31 / .1), rgb(255 90 31 / .03) 70%); }
:is(.tbl, .tiers) tr.hl:hover { background: linear-gradient(90deg, rgb(255 90 31 / .13), rgb(255 90 31 / .05) 70%); }
:is(.tbl, .tiers) tr.hl > :first-child { box-shadow: inset 3px 0 0 var(--lumen); padding-left: 14px; color: var(--ink); }
:is(.tbl, .tiers) tr.hl td { color: var(--ink); }
.tbl caption, .tiers caption { color: var(--steel); font-size: 13px; padding: 12px 0; text-align: left; }
.tbl caption::before, .tiers caption::before { content: "Tab. " counter(lf-tab) " — " / ""; font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.tiers caption { caption-side: top; color: var(--ink); font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 12px 0 8px; }
.tiers th, .tiers td { padding: 12px 16px 12px 0; }
.tiers td { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-2); }
.tiers td:last-child a { font-family: var(--font-body); font-weight: 600; }
.tier-badge, .rank-badge { border-radius: 2px; font: 600 10px/1.6 var(--font-mono); letter-spacing: .08em; background: var(--ink); color: var(--paper); }
.facts { margin: 14px 0 10px; }
.facts .table-wrap { counter-increment: none; }
.facts-table { border-block: 2px solid var(--ink); }
.table-wrap .facts-table { border-block: 0; }
.facts-table th { width: 32%; font: 600 11.5px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); padding: 14px 16px 12px 0; }
.facts-table td { color: var(--ink-2); padding: 12px 0; }
.facts-table tr:last-child :is(th, td) { border-bottom: 0; }
.tbl .table-wrap { margin-top: 16px; }
.checked, .table-note { font-size: 13px; color: var(--steel); }
.checked { font-family: var(--font-mono); letter-spacing: .01em; }
.checked > svg { color: var(--ink); }
.tw-hint { color: var(--steel); font-family: var(--font-mono); }
.yes { color: var(--ink); }
.no { color: var(--no); }
/* wide screens: the column heads stay under the header while a long 3–4 column table scrolls by */
@media (min-width: 1100px) {
  .tbl .table-wrap.tw-stack, .tiers.table-wrap { overflow: clip; }
  :is(.tbl .tw-stack, .tiers) thead th { position: sticky; top: calc(var(--hdr-off) - 15px); z-index: 2; background: var(--paper); box-shadow: 0 1px 0 var(--ink); }
}
/* phones: stacked rows read as small sheets */
@media (max-width: 480px) {
  :root .table-wrap.tw-stack { border-block: 0; }
  :root .tw-stack tbody tr { border-color: var(--rule-2); border-radius: 3px; background: var(--sheet); }
  :root .tw-stack tbody tr:not(.hl) { background: var(--sheet); }
  :root .tw-stack tbody tr.hl { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--lumen); }
  :root .tw-stack tbody tr.hl > :first-child { box-shadow: none; padding-left: 0; }
  .tw-stack [data-label]::before { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--steel); }
}

/* ---------------------------------------------------------------- FAQ (theme.js: accordions; open answers without JS) */
.faq-item { border-bottom: 1px solid var(--rule-2); padding: 0; }
.faq-item:first-of-type, .faq > h2 + .faq-item { border-top: 2px solid var(--ink); }
.faq-item h3 { margin: 0; font-size: 1.08rem; line-height: 1.4; letter-spacing: -0.014em; }
.faq-item:not(.is-acc) h3 { padding: 22px 0 8px; }
.faq-item:not(.is-acc) .faq-a { padding-bottom: 14px; }
.faq-a { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 20px 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: color .15s ease; }
.faq-q:hover { color: var(--ember); }
.faq-chev { position: relative; flex: none; width: 28px; height: 28px; border-radius: 3px; border: 1px solid var(--rule-3); background: var(--sheet); transition: background-color .2s ease, border-color .2s ease; }
.faq-chev::before, .faq-chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--ink); transition: transform .3s var(--ease), background-color .2s ease; }
.faq-chev::after { transform: rotate(90deg); }
.faq-q:hover .faq-chev { border-color: var(--ink); }
.faq-item.is-open .faq-chev { background: var(--ink); border-color: var(--ink); }
.faq-item.is-open .faq-chev::before { background: var(--lumen); }
.faq-item.is-open .faq-chev::after { transform: rotate(0deg); background: var(--lumen); }
.faq-item.is-acc .faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .36s var(--ease), visibility 0s linear .36s; }
.faq-item.is-acc.is-open .faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .36s var(--ease), visibility 0s; }
.faq-a-in { min-height: 0; overflow: hidden; }
.faq-a-in > :last-child { margin-bottom: 0; padding-bottom: 22px; }
.faq-a-in > p { max-width: 68ch; }

/* ---------------------------------------------------------------- sources + folded blocks */
.sources details { margin-top: 40px; padding-top: 0; border-top: 0; }
.sources summary, .fold > summary { display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; font: 600 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding: 10px 14px; border: 1px solid var(--rule-3); border-radius: 3px; background: var(--sheet); transition: border-color .15s ease, background-color .15s ease; }
.sources summary::-webkit-details-marker, .fold > summary::-webkit-details-marker { display: none; }
.sources summary::before, .fold > summary::before { content: "+"; font: 600 15px/1 var(--font-mono); color: var(--ember); }
.sources details[open] > summary::before, .fold[open] > summary::before { content: "−"; }
.sources summary:hover, .fold > summary:hover { border-color: var(--ink); color: var(--ink); }
.sources ol { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: var(--steel); }
.sources li { margin: .45em 0; }
.sources li::marker { font: 500 12px var(--font-mono); color: var(--steel); }
.src-u { font-family: var(--font-mono); font-size: .9em; color: var(--steel); }
.fold { margin: 48px 0 0; border: 0; background: none; box-shadow: none; }
.fold[open] > summary { border-bottom: 1px solid var(--rule-3); }
.fold > :not(summary) { padding: 0; }
.fold > .sources details { margin-top: 0; }
.fold > .sources summary { display: none; }
@supports selector(::details-content) {
  .fold > .sources details::details-content { content-visibility: visible; display: contents; }
}
@supports not selector(::details-content) {
  .fold > .sources summary { display: inline-flex; margin-top: 16px; }
}

/* ---------------------------------------------------------------- steps, code, callouts, cta, ranking, definitions */
.step-list { position: relative; margin-top: 22px; }
.step-list > li { padding-left: 60px; margin-bottom: 4px; padding-bottom: 20px; }
.step-list > li::before { content: counter(s, decimal-leading-zero); width: 38px; height: 38px; border-radius: 3px; font: 600 13px/1 var(--font-mono); color: var(--ink); background: var(--sheet); border: 1px solid var(--ink); }
.step-list > li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 2px; width: 1px; background: repeating-linear-gradient(180deg, var(--rule-3) 0 3px, transparent 3px 6px); }
.step-name { font: 600 1.04rem/1.4 var(--font-head); letter-spacing: -0.014em; color: var(--ink); margin: 7px 0 4px; }
.step-ic { border-radius: 3px; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-3); }
.step-list > li.has-ic::before { background: var(--ink); color: var(--paper); border-color: var(--paper); border-radius: 2px; }
.code { border-radius: 4px; border: 1px solid var(--rule-2); background: #fff; box-shadow: 0 20px 40px -36px rgb(20 19 15 / .5); }
.code figcaption { display: flex; align-items: center; gap: 10px; font: 500 12px var(--font-mono); color: var(--steel); border-bottom: 1px solid var(--rule); background: var(--sheet-2); padding: 9px 16px; }
.code figcaption::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--lumen); }
.code pre { padding: 18px 20px; font-size: 13.5px; line-height: 1.65; }
.code code { font-family: var(--font-mono); font-size: 13.5px; line-height: inherit; color: var(--ink); background: none; border: 0; }
.copy { font: 500 11.5px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; background: var(--sheet); color: var(--ink); border: 1px solid var(--rule-3); border-radius: 3px; top: 6px; right: 8px; }
.copy:hover { border-color: var(--ink); }
.callout { position: relative; border-radius: 0; border: 1px solid var(--rule-2); border-left: 3px solid var(--ink); background: var(--sheet); padding: 16px 20px; }
.callout.warn { border-left-color: var(--lumen); background: #fff7f2; border-color: rgb(255 90 31 / .35); border-left-color: var(--lumen); }
.callout.success { background: var(--sheet); border-color: var(--rule-2); border-left-color: var(--ink); }
.callout-h { font: 600 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.cta {
  position: relative; overflow: hidden; margin: 64px 0; padding: 40px 40px 38px; border-radius: 4px; color: var(--night-ink);
  background: radial-gradient(60% 120% at 100% 0%, rgb(255 90 31 / .16), transparent 60%), linear-gradient(rgb(233 230 223 / .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgb(233 230 223 / .05) 1px, transparent 1px) 0 0 / 28px 28px, var(--night);
  box-shadow: 0 40px 80px -50px rgb(20 19 15 / .7);
}
.cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--lumen) 20%, var(--lumen-hot) 50%, var(--lumen) 80%, transparent); box-shadow: 0 0 16px rgb(255 90 31 / .8); }
.cta-h { font: 600 clamp(1.45rem, 1.15rem + .9vw, 2rem)/1.15 var(--font-head); font-stretch: 92%; letter-spacing: -0.03em; color: #fff; margin-bottom: 10px; }
.cta-t p { color: var(--night-ink-2); opacity: 1; max-width: 60ch; font-size: 15.5px; }
.cta-t a { color: #fff; }
.cta .btn-primary { background: var(--lumen); color: var(--ink); border-color: var(--lumen); box-shadow: 0 12px 30px -14px rgb(255 90 31 / .9); }
.cta .btn-primary:hover { background: #ff6d36; border-color: #ff6d36; color: var(--ink); }
.cta .btn-ghost { background: transparent; color: #fff; border-color: rgb(233 230 223 / .35); }
.cta .btn-ghost:hover { background: rgb(233 230 223 / .08); border-color: #fff; color: #fff; }
.cta :focus-visible { outline-color: #fff; }
.rank { border-radius: 4px; padding: 22px 24px 12px; border: 1px solid var(--rule-2); background: var(--sheet); box-shadow: none; }
.rank.self { border: 1px solid var(--ink); background: #fff; box-shadow: inset 0 3px 0 var(--lumen); }
.rank-n { font: 600 14px var(--font-mono); color: var(--paper); background: var(--ink); border-radius: 3px; }
.rank.self .rank-n { color: var(--ink); background: var(--lumen); }
.rank-meta dt { color: var(--steel); font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.rank-meta dd { color: var(--ink); }
.pc-h { font: 600 11.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.method { border-left: 3px solid var(--ink); border-radius: 0; background: var(--sheet); }
.defs .def { padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.def dt { color: var(--ink); font-weight: 600; letter-spacing: -0.012em; }
.lg a { color: var(--ink-2); text-decoration: none; }
.lg a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lumen); }
.lg-group { font: 600 11px var(--font-mono); letter-spacing: .12em; color: var(--steel); }
.card { border-radius: 4px; border: 1px solid var(--rule-2); background: var(--sheet); box-shadow: none; }
.card-link:hover { border-color: var(--ink); box-shadow: 0 24px 40px -32px rgb(20 19 15 / .5); }
.card-ic, .trust-ic { color: var(--ink); background: var(--sheet-2); border: 1px solid var(--rule-2); border-radius: 3px; }
.coins li { border-radius: 3px; border-color: var(--rule-2); background: var(--sheet); }
.coin-code { font-family: var(--font-mono); color: var(--ink); }
.coinstrip { border-radius: 0; border: 0; border-block: 1px solid var(--rule-2); background: none; padding: 14px 0; }
.band { background: var(--sheet-2); box-shadow: 0 0 0 100vmax var(--sheet-2); border-block: 1px solid var(--rule); padding: 24px 0 40px; margin: 64px 0; }
.band .table-wrap, .band .pay-terms { background: transparent; }

/* related pages: a ruled index */
.related { max-width: none; margin-top: 96px; counter-reset: lf-rel; }
.related h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); margin: 0 0 18px; }
.related h2::before { content: "See also" / ""; display: block; margin-bottom: 10px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.related-list { gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); border-top: 2px solid var(--ink); }
.related-list li { counter-increment: lf-rel; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 16px 0 18px; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; background: none; box-shadow: none; transition: background-color .2s ease; }
.related-list li::before { content: counter(lf-rel, decimal-leading-zero) / ""; grid-row: 1 / span 2; padding-top: 3px; font: 500 12px/1.4 var(--font-mono); color: var(--steel); }
.related-list a { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--ink); font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; text-decoration: none; }
.related-list a::after { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--steel-2); -webkit-mask: var(--lf-arrow) center / contain no-repeat; mask: var(--lf-arrow) center / contain no-repeat; transition: transform .25s var(--ease), background-color .2s ease; }
.related-list a::before { content: ""; position: absolute; inset: 0; }
.related-list li:hover a::after { transform: translateX(3px); background: var(--lumen); }
.related-list li:hover a { color: var(--ember); }
.related-list li:hover { border-color: var(--rule-2); }
.related-list p { grid-column: 2; color: var(--steel); font-size: 14px; line-height: 1.55; margin-top: 6px; }

/* ---------------------------------------------------------------- home: numbered datasheet sections */
.t-home .content > :is(.sec, .stats-sec, .pricing, .faq), .t-home main > .related { position: relative; margin-top: clamp(64px, 5vw + 32px, 112px); padding-top: clamp(28px, 2vw + 16px, 44px); border-top: 1px solid var(--rule-2); }
.t-home .content > :is(.sec, .stats-sec, .pricing, .faq) > h2:first-child, .t-home .related > h2 { margin-top: 0; font-size: clamp(1.9rem, 1.15rem + 2.3vw, 3.2rem); line-height: 1.02; letter-spacing: -0.03em; word-spacing: .03em; font-stretch: 88%; max-width: 20ch; }
.t-home .content > .pricing > h2 + p { max-width: 70ch; color: var(--steel); }
.t-home .content > .pricing > h2 + p strong { color: var(--ink); }
.t-home .sec, .t-home .faq, .t-home .tbl { max-width: none; }
.t-home .sec > p, .t-home .faq-item { max-width: none; }
.t-home .content > .quick-answer { max-width: 900px; margin: 24px 0 0; }
@media (min-width: 1000px) {
  /* the FAQ: headline across, the questions set off to the right */
  .t-home .content > .faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .t-home .content > .faq > * { grid-column: 4 / -1; }
  .t-home .content > .faq > h2:first-child { grid-column: 1 / span 10; margin-bottom: 36px; }
}
/* 1100 px and wider: text sections set like a newspaper page: the answer paragraph across as a lead, the rest of the
   text in two columns; tables, sub-sections and lists span the page */
@media (min-width: 1100px) {
  .t-home .content > .sec { columns: 2; column-gap: 56px; column-rule: 1px solid var(--rule); }
  .t-home .content > .sec > :is(h2, section, .table-wrap, .tw-hint, h3, ul, ol, .callout, .code, .cta) { column-span: all; }
  .t-home .content > .sec > h2:first-child { margin-bottom: 30px; }
  .t-home .content > .sec > h2:first-child + p { column-span: all; max-width: 54ch; margin: 0 0 32px; font-size: 1.3rem; line-height: 1.5; letter-spacing: -0.014em; color: var(--ink); }
  .t-home .content > .sec > h2:first-child + p::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 18px; background: var(--lumen); }
  .t-home .content > .sec > p { max-width: none; break-inside: avoid-column; }
  .t-home .content > .sec > :is(ul, ol, h3) { max-width: 820px; }
}
.t-home .content > .sec > section.tbl > h3 { font-size: 1.25rem; margin-top: 2.2em; }
.t-home .content > .sec > ul:not([class]) { list-style: none; padding: 0; border-top: 1px solid var(--rule-2); }
.t-home .content > .sec > ul:not([class]) > li { position: relative; margin: 0; padding: 13px 0 13px 28px; border-bottom: 1px solid var(--rule); line-height: 1.6; }
.t-home .content > .sec > ul:not([class]) > li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; background: var(--ink); }
.t-home .content > .sec > h3 ~ ul:not([class]) > li::before { background: var(--lumen); }

/* ---------------------------------------------------------------- footer: ink, the wordmark cut by the page edge */
.ftr { position: relative; margin-top: 128px; padding: 76px 0 0; background: var(--night); border-top: 0; overflow: hidden; color: var(--night-ink-3); font-size: 14px; }
.ftr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--lumen) 30%, var(--lumen-hot) 50%, var(--lumen) 70%, transparent); box-shadow: 0 0 18px rgb(255 90 31 / .7); }
.ftr::after {
  content: "Lumenfer" / ""; display: block; margin: 40px 0 0; padding: 0 16px; text-align: center; white-space: nowrap; pointer-events: none;
  font: 600 22.5vw/.72 var(--font-head); font-stretch: 75%; letter-spacing: -0.045em; color: transparent;
  background: linear-gradient(180deg, rgb(233 230 223 / .085), rgb(233 230 223 / .015) 75%); -webkit-background-clip: text; background-clip: text;
  height: .6em; overflow: hidden;
}
.ftr > .wrap { position: relative; z-index: 1; }
.ftr .wrap:first-child { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.3fr); gap: 64px; }
.f-logo .logo-img { height: 30px; }
.f-desc { font-size: 13.5px; line-height: 1.65; color: var(--night-ink-3); max-width: 46ch; margin-top: 18px; }
.f-contact-h, .f-h { font: 600 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--night-ink); }
.f-h { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--night-rule); }
.f-cols { gap: 32px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.f-col li { margin: .55em 0; }
.f-col a, .f-contact a { color: var(--night-ink-2); font-size: 14px; text-decoration: none; transition: color .15s ease; }
.f-col a:hover, .f-contact a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--night-lumen); opacity: 1; }
.ftr :focus-visible { outline-color: var(--night-ink); }
.f-pay { margin-top: 56px; padding-top: 22px; border-top: 0; }
.ftr :is(.f-pay, .f-bottom) { background: linear-gradient(var(--night-rule), var(--night-rule)) center top / calc(100% - 32px) 1px no-repeat; }
@media (min-width: 760px) { .ftr :is(.f-pay, .f-bottom) { background-size: calc(100% - 64px) 1px; } }
.f-pay-h { color: var(--night-ink); }
.f-pay-n { font-size: 13px; color: var(--night-ink-3); opacity: 1; }
.coins-mini li { font: 500 11.5px var(--font-mono); color: var(--night-ink-2); background: transparent; border-color: var(--night-rule); border-radius: 3px; }
.f-bottom { margin-top: 18px; padding-top: 18px; border-top: 0; font: 500 12px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--night-ink-3); }
.f-legal a, .langs a { color: var(--night-ink-2); }
@media (max-width: 760px) { .ftr .wrap:first-child { gap: 36px; } .ftr { padding-top: 56px; margin-top: 96px; } }

/* sticky buy bar (phones) */
.sticky-cta { background: var(--paper); border-top: 1px solid var(--rule-3); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -20px 40px -30px rgb(20 19 15 / .5); }
.sc-note { color: var(--steel); font-family: var(--font-mono); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .t-home .page-head.hero { padding: 36px 0 20px; }
  .page-head, .page-head.hero { padding-top: 14px; }
  .crumbs ol { margin-top: 16px; }
  .kicker { margin-bottom: 16px; }
  .kicker::after { display: none; }
  .badges { width: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
  .badges li { padding: 10px 0; }
  .badges li + li { box-shadow: none; border-top: 1px solid var(--rule); }
  .toc li::before { padding-top: 12px; }
  .quick-answer { padding: 18px 16px; }
  .plan { padding: 20px 16px 18px; }
  .cta { padding: 30px 20px; }
  .related { margin-top: 72px; }
  .t-home .content > :is(.sec, .stats-sec, .pricing, .faq) > h2:first-child, .t-home .related > h2 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.3rem); }
  /* the 15 px text floor of the shared phone rules (docs 3.8) on the elements this theme sizes itself */
  :root :is(.badges li, .plan-features li, .plan-features li::before, .tiers td, .rank-meta dt, .pc-h, .f-contact-h, .f-h, .plan-incl strong, .cta-t p, .faq-a, .def dd,
    .hd-k, .hd-legend, .hd-rl, .hd-rn, .hd-cpu, .hd-spec, .hd-price small, .hd-foot, .stat-l, .pt-len, .pt-price, .pt-off, .tiers .tier-off, .toc li::before, .related-list li::before,
    .content > section > h2::before, .related h2::before, .callout-h, .qa-label, .copy, .sources summary, .fold > summary, .crumbs ol, .topbar) { font-size: 15px; }
  :root .plan-price::after { font-size: 15px; letter-spacing: .02em; }
  :root :is(.hd-badge, .plan-badge, .tier-badge, .rank-badge) { font-size: 15px; letter-spacing: .02em; }
  .plan-features li:nth-child(-n+3) { font-family: var(--font-body); letter-spacing: 0; }
  :root .pt-len { letter-spacing: 0; }
  :root .badges li { letter-spacing: .02em; }
  :root .hd-k, :root .hd-foot, :root .crumbs ol { letter-spacing: .03em; }
}

/* ---------------------------------------------------------------- buying path (engine/lib/buyflow.mjs, 1 November 2026)
   Trust strip: a mono footnote line under the hero buttons, the ink CTA panels and the configurator's button. Timeline:
   the process as a ruled datasheet panel (heavy ink top rule, one column per step, a lumen arrow on each rule, the
   delivered machine lit by the lumen slit); on phones a numbered sequence with a dotted lead. Configurator: spec-sheet
   option cells (the chosen one in white with the lumen slit), the order as an ink readout panel with condensed numerals.
   Without JavaScript the form still submits to the checkout and the readout shows the preselected choice. */
.trust-strip { gap: 6px 22px; font: 500 12.5px/1.45 var(--font-mono); letter-spacing: -0.01em; color: var(--steel); }
.trust-strip .ic { width: 14px; height: 14px; color: var(--ink); }
.trust-strip li:first-child .ic { color: var(--ember); }
.trust-strip a { color: var(--steel); }
.trust-strip a:hover { color: var(--ink); }
.trust-strip a:hover span { text-decoration-color: var(--lumen); }
.hero-btns + .trust-strip { margin: -6px 0 22px; }
.cta > .trust-strip { margin: 10px 0 0; padding-top: 18px; border-top: 1px dotted rgb(233 230 223 / .22); color: var(--night-ink-3); opacity: 1; }
.cta > .trust-strip .ic, .cta > .trust-strip li:first-child .ic { color: var(--night-lumen); }
.cta > .trust-strip a { color: var(--night-ink-2); }
.cta > .trust-strip a:hover { color: #fff; }

.tl { gap: 0; margin-top: 28px; border: 1px solid var(--rule-2); border-top: 2px solid var(--ink); border-radius: 0 0 4px 4px; background: var(--sheet); box-shadow: 0 30px 60px -50px rgb(20 19 15 / .5); }
.tl-step { display: flex; flex-direction: column; padding: 22px 20px 24px 76px; }
.tl-step + .tl-step { box-shadow: inset 0 1px 0 var(--rule-2); }
.tl-step::before { left: 38px; top: 64px; bottom: -22px; width: 1px; background: repeating-linear-gradient(180deg, var(--rule-3) 0 3px, transparent 3px 6px); }
.tl-k { margin: 0 0 12px; font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .1em; color: var(--steel); }
.tl-n { left: 20px; top: 20px; width: 38px; height: 38px; border-radius: 3px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); font: 600 13px/1 var(--font-mono); }
.tl-dur { display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px 2px 7px; border-radius: 2px; border: 1px solid rgb(184 58 10 / .45); background: none; font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ember); }
.tl-dur::before { content: ""; width: 7px; height: 7px; background: var(--lumen); box-shadow: 0 0 8px rgb(255 90 31 / .7); }
.tl-name { margin: 0 0 6px; font: 600 1.14rem/1.25 var(--font-head); font-stretch: 92%; letter-spacing: -0.02em; color: var(--ink); }
.tl-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.tl-x { margin-top: auto; padding-top: 16px; }
.tl-credit .tl-x { margin-top: 0; }
.tl-coins, .tl-places { gap: 0; }
.tl-coins li, .tl-places li { gap: 7px; margin: 0 -1px -1px 0; padding: 5px 10px 5px 7px; border: 1px solid var(--rule-2); border-radius: 0; background: #fff; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--ink); }
.tl-coins .coin-logo { width: 16px; height: 16px; }
.tl-places .flag { box-shadow: 0 0 0 1px var(--rule-2); border-radius: 1px; }
.tl-eta-h { margin: 0 0 6px; font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .1em; color: var(--ink); }
.tl-eta { grid-template-columns: minmax(0, 1fr); gap: 0; border-block: 1px solid var(--rule); }
.tl-eta div { align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--rule-3); font: 500 12px/1.35 var(--font-mono); }
.tl-eta div:last-child { border-bottom: 0; }
.tl-eta dt { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; color: var(--steel); }
.tl-eta dt::after { content: ""; flex: 1; min-width: 8px; border-bottom: 1.5px dotted var(--steel-3); transform: translateY(-3px); }
.tl-eta dd { color: var(--ink); font-weight: 600; }
.tl-cmd code { display: block; padding: 10px 12px; border: 0; border-radius: 3px; background: var(--night); color: var(--night-ink); font-size: 12.5px; box-shadow: inset 0 2px 0 var(--lumen); }
.tl-cmd code::before { content: "$ " / ""; color: var(--night-lumen); }
/* the delivered machine: white, the lumen slit on its top edge, the one lit number */
.tl-access { background: #fff; }
.tl-access::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: linear-gradient(90deg, transparent, var(--lumen) 12%, var(--lumen-hot) 50%, var(--lumen) 88%, transparent); box-shadow: 0 0 14px rgb(255 90 31 / .55); }
.tl-access .tl-n { background: var(--lumen); border-color: var(--lumen); color: var(--ink); box-shadow: 0 0 14px rgb(255 90 31 / .45); }
@media (min-width: 960px) {
  .tl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .tl-step { padding: 26px 22px 26px; }
  .tl-step + .tl-step { box-shadow: inset 1px 0 0 var(--rule-2); }
  .tl-step::before { content: none; }
  .tl-n { position: static; margin-right: 4px; }
  .tl-k { margin-bottom: 18px; }
  /* a lumen arrow sits on the rule between two steps */
  .tl-step:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -11px; top: 33px; width: 22px; height: 22px; background: var(--ember); -webkit-mask: var(--lf-arrow) center / 12px no-repeat; mask: var(--lf-arrow) center / 12px no-repeat; }
  .tl-step:not(:last-child)::before { content: ""; position: absolute; z-index: 1; left: auto; right: -12px; top: 32px; bottom: auto; width: 24px; height: 24px; border: 1px solid var(--rule-2); border-radius: 50%; background: var(--sheet); }
  .tl-access .tl-k { margin-bottom: 18px; }
}

.cfg { gap: 18px; margin-top: 26px; }
@media (min-width: 980px) { .cfg { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 28px; } .cfg-sum { top: calc(var(--hdr-off) + 14px); } }
.cfg-fields { gap: 28px; }
.cfg-legend { gap: 12px; margin-bottom: 12px; font: 600 12px/1.4 var(--font-mono); letter-spacing: .1em; color: var(--ink); }
.cfg-legend::after { content: ""; flex: 0 1 72px; height: 1px; background: var(--rule-3); }
.cfg-n { min-width: 28px; height: 28px; border-radius: 2px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); font: 600 12px/1 var(--font-mono); }
.cfg-opts { gap: 8px; }
@media (min-width: 1240px) { .cfg-plans .cfg-opts:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cfg-o { position: relative; gap: 3px; padding: 14px 14px 14px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--sheet); box-shadow: 0 1px 0 #fff inset; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cfg-opt:hover .cfg-o { border-color: var(--rule-3); background: #fff; }
.cfg-opt:has(input:checked) .cfg-o { border-color: var(--ink); background: #fff; box-shadow: 0 1px 0 #fff inset, 0 24px 40px -32px rgb(20 19 15 / .55); }
.cfg-opt:has(input:checked) .cfg-o::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, transparent, var(--lumen) 12%, var(--lumen-hot) 50%, var(--lumen) 88%, transparent); box-shadow: 0 0 12px rgb(255 90 31 / .5); }
.cfg-opt input { top: 15px; right: 13px; width: 16px; height: 16px; border: 1.5px solid var(--rule-3); background: #fff; }
.cfg-opt input:checked { border-color: var(--ink); background: radial-gradient(circle, var(--lumen) 0 3.5px, #fff 4px); }
.cfg-opt input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cfg-opt.is-full .cfg-o { opacity: 1; background: var(--sheet-2); color: var(--steel); }
.cfg-o-name { font: 600 13px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.cfg-o-spec { font-size: 14px; line-height: 1.4; color: var(--steel); }
.cfg-o-price { padding-top: 14px; font: 600 2rem/.95 var(--font-head); font-stretch: 75%; letter-spacing: -0.02em; color: var(--ink); font-feature-settings: "tnum"; }
.cfg-o-price small { margin-top: 7px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.cfg-o-off { margin-top: 8px; font: 600 12px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--steel); }
.cfg-o-off.is-off { color: var(--ember); }
.cfg-o-full { color: var(--steel); }
.cfg-locs .flag { margin-bottom: 8px; border-radius: 1px; box-shadow: 0 0 0 1px var(--rule-2); }
/* the order: an ink readout panel (the CTA panels' grid and lumen slit) */
.cfg-sum {
  position: relative; overflow: hidden; padding: 26px 24px 22px; border: 0; border-radius: 4px; color: var(--night-ink);
  background: radial-gradient(70% 60% at 100% 0%, rgb(255 90 31 / .16), transparent 60%), linear-gradient(rgb(233 230 223 / .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgb(233 230 223 / .05) 1px, transparent 1px) 0 0 / 28px 28px, var(--night);
  box-shadow: 0 40px 80px -50px rgb(20 19 15 / .7);
}
.cfg-sum::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--lumen) 20%, var(--lumen-hot) 50%, var(--lumen) 80%, transparent); box-shadow: 0 0 16px rgb(255 90 31 / .8); }
.cfg-sum-k { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .1em; color: var(--night-ink-2); }
.cfg-sum-k::before { content: ""; width: 7px; height: 7px; background: var(--lumen); box-shadow: 0 0 8px rgb(255 90 31 / .9); }
.cfg-pick { font: 600 13px/1.5 var(--font-mono); letter-spacing: .02em; color: #fff; }
.cfg-total { margin-top: 18px !important; padding-top: 16px; border-top: 1px dotted rgb(233 230 223 / .25); align-items: flex-end; }
.cfg-total-l { padding-bottom: 6px; font: 500 12px/1.4 var(--font-mono); color: var(--night-ink-3); }
.cfg-total-v { font: 600 3.4rem/.9 var(--font-head); font-stretch: 75%; letter-spacing: -0.02em; color: #fff; }
.cfg-month { margin-top: 8px !important; font: 500 12.5px/1.4 var(--font-mono); color: var(--night-ink-2); }
.cfg-save { margin-top: 14px !important; padding: 8px 0 0; border-top: 1px dotted rgb(233 230 223 / .18); font: 500 12.5px/1.45 var(--font-mono); color: var(--night-ink-3); }
.cfg-save.is-on { font-weight: 600; color: var(--night-lumen); }
.cfg-go { margin-top: 18px; border-radius: 4px; }
.cfg-sum .btn-primary { background: var(--lumen); color: var(--ink); border-color: var(--lumen); box-shadow: 0 12px 30px -14px rgb(255 90 31 / .9); }
.cfg-sum .btn-primary:hover { background: #ff6d36; border-color: #ff6d36; color: var(--ink); }
.cfg-sum :focus-visible { outline-color: #fff; }
.cfg-sum .trust-strip { display: grid; gap: 7px; margin-top: 18px; padding-top: 16px; border-top: 1px dotted rgb(233 230 223 / .18); font-size: 12px; color: var(--night-ink-3); }
.cfg-sum .trust-strip .ic, .cfg-sum .trust-strip li:first-child .ic { color: var(--night-lumen); }
.cfg-sum .trust-strip a { color: var(--night-ink-2); }
.cfg-sum .trust-strip a:hover { color: #fff; }
.cfg-note, .cfg-none { font-size: 12.5px; color: var(--night-ink-3); }
@media (max-width: 760px) {
  .tl-step { padding: 20px 16px 22px 68px; }
  .tl-n { left: 16px; }
  .tl-step::before { left: 34px; }
  .cfg-sum { padding: 22px 18px 20px; }
  .cfg-total-v { font-size: 3rem; }
  .cfg-plans .cfg-o-price { font-size: 1.8rem; }
  .cfg-o-name { font-size: 15px; letter-spacing: .04em; }
  :root :is(.trust-strip, .tl-k, .tl-dur, .tl-eta-h, .tl-eta div, .tl-coins li, .tl-places li, .tl-cmd code, .cfg-legend, .cfg-o-spec, .cfg-o-price small, .cfg-o-off, .cfg-sum-k, .cfg-pick, .cfg-total-l, .cfg-month, .cfg-save, .cfg-note, .cfg-sum .trust-strip) { font-size: 15px; }
  :root :is(.tl-k, .cfg-legend, .cfg-sum-k, .tl-eta-h, .cfg-o-price small) { letter-spacing: .03em; }
  :root :is(.trust-strip, .tl-eta div) { letter-spacing: -0.02em; }
}

/* ---------------------------------------------------------------- scroll reveal (progressive enhancement) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .content > :is(section, .fold) > :is(.plans, .stats, .table-wrap, .faq-item), .related-list li {
      animation: lf-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes lf-reveal { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  :is(.card-link, .plan, .btn, .related-list li, .hd-p a):hover { transform: none; }
}