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

/* Lacquerbay — "Lacquer & gold seam" (2 November 2026). Linux VPS in Hong Kong, Singapore and Tokyo.
   Polished lacquer black with depth (soft glossy sheens, never flat), one action colour — vermilion, kept for buttons,
   active states and the city points — and gold used only as hairlines and seams, the kintsugi way: a thin line where
   two things meet, never as ornament. Calm, precise, generous space, bento sections.
   Type: Instrument Serif (2022, display headings and big figures, italic accents) and Onest (2023, text, variable
   100–900), both from Google Fonts, self-hosted in engine/assets/fonts/lacquerbay/ (SIL OFL 1.1, licences beside them).
   Colours come from site.json → theme (sites/lacquerbay/_research/theme.json); everything else lives here, including
   the hero visual "bay" (engine/lib/visuals/bay.mjs, classes hb-*).
   Contrast (WCAG AA) on #0b0909: ivory #f4ede4 17.1:1, body #d9cfc3 13.3:1, muted #ab9f92 7.6:1, vermilion #f2563a
   5.8:1, link vermilion #ff7a5c 7.8:1, gold #d9b26a 10:1; ink #140806 on vermilion 5.8:1, on gold 10.3:1.
   Motion (hover lift, gold underline sweep, reveal, arc glints, point pulse) stops under prefers-reduced-motion. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lb-instrument-serif-latin.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 Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lb-instrument-serif-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/lb-instrument-serif-latin-italic.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 Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/lb-instrument-serif-latin-ext-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/lb-onest-latin-wght.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/lb-onest-latin-ext-wght.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/lb-onest-vietnamese-wght.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/lb-onest-cyrillic-wght.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Instrument Serif Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 92%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 101%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }

:root {
  --wrap: 1240px;
  --ivory: #f4ede4;
  --ivory-2: #d9cfc3;
  --muted: #ab9f92;
  --muted-2: #8a7e72;
  --black: #0b0909;
  --black-0: #070606;
  --panel: #131011;
  --panel-2: #1a1516;
  --verm: #f2563a;
  --verm-hi: #ff7a5c;
  --verm-ink: #140806;
  --verm-soft: rgb(242 86 58 / .12);
  --gold: #d9b26a;
  --gold-hi: #f1d79a;
  --gold-lo: #a8823e;
  --gold-line: rgb(217 178 106 / .3);
  --gold-faint: rgb(217 178 106 / .14);
  --line: rgb(244 237 228 / .075);
  --line-2: rgb(244 237 228 / .13);
  --line-3: rgb(244 237 228 / .22);
  --seam: linear-gradient(90deg, transparent, rgb(217 178 106 / .5) 18%, rgb(241 215 154 / .95) 50%, rgb(217 178 106 / .5) 82%, transparent);
  --lacquer: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .012) 38%, rgb(255 255 255 / 0) 60%), var(--panel);
  --sheen: linear-gradient(118deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / .015) 22%, transparent 40%);
  --sh-1: inset 0 1px 0 rgb(255 255 255 / .05), 0 1px 1px rgb(0 0 0 / .4), 0 18px 40px -26px rgb(0 0 0 / .85);
  --sh-2: inset 0 1px 0 rgb(255 255 255 / .07), 0 2px 4px rgb(0 0 0 / .4), 0 40px 80px -40px rgb(0 0 0 / .95);
  --r-lg: 24px;
  --r-md: 20px;
  --r-sm: 14px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --hdr-off: 84px;
  --serif: "Instrument Serif", "Instrument Serif Fallback", ui-serif, Georgia, serif;
  --sans: "Onest", "Onest Fallback", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base: polished black, a soft sheen, fine grain */
html { overflow-x: clip; scroll-padding-top: var(--hdr-off); background: var(--black); }
body {
  position: relative; isolation: isolate; overflow-x: clip;
  background: var(--black); color: var(--ivory-2);
  font: 400 16.5px/1.72 var(--sans); letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11";
}
/* the light on the lacquer: a broad warm reflection at the top, a trace of vermilion where the hero sits */
body::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1200px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 46% at 74% 8%, rgb(242 86 58 / .11), transparent 70%),
    radial-gradient(50% 40% at 12% -4%, rgb(217 178 106 / .07), transparent 72%),
    linear-gradient(180deg, rgb(255 255 255 / .025), transparent 40%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: rgb(217 178 106 / .3); color: var(--ivory); }
:where(a, button, summary, input, [tabindex]):focus-visible, .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
.wrap { max-width: var(--wrap); padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }

h1, h2, h3, h4 { color: var(--ivory); text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; }
h1 { line-height: 1.02; }
h2 { font-size: clamp(2.05rem, 1.35rem + 2.3vw, 3.25rem); line-height: 1.04; margin: 2.3em 0 .55em; scroll-margin-top: var(--hdr-off); }
h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; margin: 1.9em 0 .45em; scroll-margin-top: var(--hdr-off); }
:is(h1, h2) em { font-style: italic; color: var(--gold-hi); background: linear-gradient(100deg, var(--gold-hi) 10%, var(--gold) 60%, var(--gold-hi)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .04em; }
p, li { text-wrap: pretty; }
strong { color: var(--ivory); font-weight: 600; }
a { color: var(--verm-hi); text-decoration-line: underline; text-decoration-color: rgb(255 122 92 / .35); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
a:hover { color: #ff9479; text-decoration-color: currentColor; text-decoration-thickness: 1px; }
code { font-size: .86em; color: var(--ivory); background: rgb(244 237 228 / .06); border: 1px solid var(--line); border-radius: 7px; padding: .08em .4em; }
:is(.plan-price, .hb-price, .hb-t b, .tbl td, .tiers td, .facts-table td, .stat-v, .cfg-total-v, .cfg-o-price, .pt-price, .ts-billed) { font-variant-numeric: tabular-nums lining-nums; }
hr { border: 0; height: 1px; background: var(--seam); opacity: .5; }
blockquote { border-left: 1px solid var(--gold); color: var(--ivory-2); }

/* ---------------------------------------------------------------- top strip + translucent sticky header */
.topbar { background: var(--black-0); color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12.5px; letter-spacing: .01em; padding: 8px 0; }
.topbar strong { color: var(--gold); filter: none; font-weight: 600; }
.topbar .tb-sep { color: var(--muted-2); }
.hdr { top: 0; z-index: 30; background: rgb(11 9 9 / .66); border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: background-color .3s ease; }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--seam); opacity: .38; pointer-events: none; }
.hdr.lb-scrolled { background: rgb(9 7 7 / .86); }
.hdr-in { min-height: 70px; gap: 30px; }
.hdr .logo-img { height: 30px; }
.hdr .nav { gap: 4px; margin-inline: auto; }
.hdr .nav a {
  position: relative; padding: 8px 12px; border-radius: 0; background: none; font-size: 14.5px; font-weight: 450; color: var(--ivory-2); text-decoration: none;
  transition: color .2s ease;
}
.hdr .nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease); }
.hdr .nav a:hover, .hdr .nav a[aria-current] { color: var(--ivory); background: none; }
.hdr .nav a:hover::after, .hdr .nav a[aria-current]::after { transform: scaleX(1); }
.hdr-login { font-size: 14.5px; font-weight: 450; color: var(--ivory-2); }
.hdr-login:hover { color: var(--ivory); }
.hdr .hdr-cta { padding: 9px 18px; font-size: 14px; border-radius: 999px; }
.menu { border-radius: 999px; border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); color: var(--ivory); font: 500 14px var(--sans); padding: 8px 16px; }
.menu:hover, .menu[aria-expanded="true"] { border-color: var(--gold-line); }
@media (max-width: 860px) {
  .hdr-in { gap: 12px; min-height: 64px; }
  .hdr .nav { top: 100%; left: 0; right: 0; gap: 0; padding: 8px 16px 18px; margin: 0; background: rgb(11 9 9 / .97); border-bottom: 1px solid var(--line-2); box-shadow: 0 40px 60px -30px rgb(0 0 0 / .9); }
  .hdr .nav a { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .hdr .nav a::after { display: none; }
  .hdr .nav a[aria-current] { color: var(--gold); }
  .menu { margin-left: auto; }
}

/* ---------------------------------------------------------------- buttons: vermilion lacquer, ivory outline */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: -0.005em; border-width: 1px; transition: transform .3s var(--ease), box-shadow .3s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn-primary {
  background: linear-gradient(180deg, #f6684d, var(--verm) 55%, #e2482d); color: var(--verm-ink); border-color: rgb(255 140 110 / .5);
  box-shadow: inset 0 1px 0 rgb(255 220 205 / .45), 0 1px 1px rgb(0 0 0 / .5), 0 14px 30px -14px rgb(242 86 58 / .65);
}
.btn-primary:hover { background: linear-gradient(180deg, #ff7a5c, #f45d40 55%, #e84d31); color: var(--verm-ink); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 220 205 / .5), 0 1px 1px rgb(0 0 0 / .5), 0 18px 36px -14px rgb(242 86 58 / .75); }
.btn-ghost, .btn:not(.btn-primary) { background: rgb(255 255 255 / .025); border-color: var(--line-3); color: var(--ivory); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); }
.btn-ghost:hover, .btn:not(.btn-primary):hover { background: rgb(255 255 255 / .05); border-color: var(--gold-line); color: var(--ivory); }
.btn-lg { padding: 14px 26px; font-size: 15.5px; }
.btn:active { transform: translateY(0); }

/* ---------------------------------------------------------------- page head */
.crumbs ol { margin-top: 30px; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--muted-2); opacity: 1; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ivory); }
.page-head, .page-head.hero { position: relative; padding: 30px 0 10px; max-width: 980px; }
/* inner pages: the same mended seam, fainter, running out to the right of the title */
body:not(.t-home) .page-head::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 38%; right: 0; top: 46%; height: 220px; opacity: .32; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d9b26a' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23f1d79a' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23d9b26a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.1' d='M0 190 C120 180 210 150 300 156 L352 130 L410 140 C520 152 600 90 700 82 L746 60 L800 66 C880 72 940 40 1000 30'/%3E%3Cpath stroke-width='.8' d='M352 130 L370 100 M746 60 L760 34'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.page-head h1 { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.6rem); margin-bottom: .3em; max-width: 18ch; }
.kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 0; border-radius: 0; background: none; font: 500 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.kicker::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.lede { font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem); line-height: 1.62; color: var(--ivory-2); max-width: 56ch; }
.meta { font-size: 13px; color: var(--muted); }
.hero-btns { gap: 12px; margin: 30px 0 20px; }
.badges li { background: rgb(255 255 255 / .03); border-color: var(--line-2); color: var(--ivory-2); font-weight: 500; }
.trust-strip { color: var(--muted); font-size: 13px; gap: 8px 22px; }
.trust-strip .ic { color: var(--gold); }
.trust-strip a:hover span { color: var(--ivory); }

/* ---------------------------------------------------------------- home hero: words left, the bay right */
.t-home .page-head.hero { position: relative; max-width: none; padding: 76px 0 56px; }
.t-home .page-head.hero h1 { font-size: clamp(3rem, 1.25rem + 5.2vw, 6rem); line-height: .98; letter-spacing: -0.02em; max-width: 14ch; margin-bottom: .32em; }
.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(500px, 560px); column-gap: clamp(40px, 5vw, 88px); align-items: center; padding: 92px 0 72px; }
  .t-home .page-head.hero.has-visual h1 { font-size: clamp(3.6rem, 1.2rem + 4.2vw, 5.6rem); }
  .t-home .hero-visual { margin-top: 0; }
}
/* the one kintsugi seam of the page: a fine gold crack running behind the hero, mended */
.t-home .page-head.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: -150px; height: 320px; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 360' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d9b26a' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23d9b26a' stop-opacity='.55'/%3E%3Cstop offset='.55' stop-color='%23f1d79a' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23d9b26a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.1' d='M0 300 C140 286 230 300 330 268 S520 214 610 236 L668 214 L742 228 C860 252 930 176 1040 168 L1092 142 L1168 150 C1290 160 1420 96 1600 70'/%3E%3Cpath stroke-width='.8' d='M668 214 L690 176 L718 164 M1092 142 L1110 112'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------- hero visual "bay" (engine/lib/visuals/bay.mjs) */
.hero-bay {
  position: relative; margin: 0; padding: 28px 28px 22px; border-radius: var(--r-lg);
  background: var(--sheen), var(--lacquer); border: 1px solid var(--line); box-shadow: var(--sh-2);
}
.hero-bay::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; background: var(--seam); }
.hero-bay::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 50% at 85% 0%, rgb(242 86 58 / .09), transparent 70%); }
.hb-head { position: relative; z-index: 1; }
.hb-k { margin: 0 0 16px; font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hb-plan { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.hb-pname { font: italic 400 1.7rem/1.1 var(--serif); color: var(--ivory); }
.hb-pspec { font-size: 13px; color: var(--muted); }
.hb-price { margin: 8px 0 0; display: flex; align-items: baseline; gap: 6px; }
.hb-price b { font: 400 clamp(3.6rem, 2.6rem + 2.6vw, 4.8rem)/.92 var(--serif); color: var(--ivory); letter-spacing: -0.02em; }
.hb-per { font-size: 15px; color: var(--ivory-2); }
.hb-terms { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.hb-term::after { content: "\00b7"; margin: 0 10px; color: var(--muted-2); }
.hb-map { position: relative; z-index: 1; aspect-ratio: 2 / 1; margin: 20px -8px 12px; }
.hb-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hb-lat { stroke: rgb(244 237 228 / .1); stroke-width: 1; stroke-dasharray: 1 6; vector-effect: non-scaling-stroke; }
.hb-sea { fill: url(#hb-sea); stroke: none; }
.hb-arc { fill: none; stroke: url(#hb-gold); stroke-width: 1.3; stroke-linecap: round; opacity: .9; vector-effect: non-scaling-stroke; }
.hb-glint { fill: none; stroke: #fff4d6; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; opacity: 0; vector-effect: non-scaling-stroke; animation: hb-glint 9s linear infinite; animation-delay: calc(var(--d) * 3s); }
@keyframes hb-glint { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: .9; } 60% { opacity: .9; } 72%, 100% { stroke-dashoffset: -5; opacity: 0; } }
.hb-dot { position: absolute; left: var(--x); top: var(--y); width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 1px solid var(--gold); border-radius: 50%; background: var(--black); box-shadow: 0 0 0 4px rgb(11 9 9 / .55), 0 0 22px rgb(242 86 58 / .3); transition: transform .4s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.hb-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a6e, var(--verm) 60%, #c93a21); }
.hb-dot::before { content: ""; position: absolute; inset: -14px; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; animation: hb-pulse 4.8s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 1.6s); }
@keyframes hb-pulse { 0% { transform: scale(.45); opacity: .55; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
.hb-pin { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; font: 450 13px/1 var(--sans); color: var(--ivory-2); }
.hb-pin-c { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: var(--gold); }
.hb-pin-e { transform: translate(16px, -50%); }
.hb-pin-w { transform: translate(calc(-100% - 16px), -50%); }
.hb-pin-n { transform: translate(-50%, calc(-100% - 16px)); }
.hb-pin-s { transform: translate(-50%, 16px); }
.hb-pin-n.is-start { transform: translate(-14px, calc(-100% - 16px)); }
.hb-pin-s.is-start { transform: translate(-14px, 16px); }
.hb-pin-n.is-end { transform: translate(calc(-100% + 14px), calc(-100% - 16px)); }
.hb-pin-s.is-end { transform: translate(calc(-100% + 14px), 16px); }
.hb-pin-ne { transform: translate(10px, calc(-100% - 10px)); }
.hb-pin-nw { transform: translate(calc(-100% - 10px), calc(-100% - 10px)); }
.hb-pin-se { transform: translate(10px, 10px); }
.hb-pin-sw { transform: translate(calc(-100% - 10px), 10px); }
.hb-latl { position: absolute; top: var(--y); left: 8px; transform: translateY(calc(-100% - 4px)); font: 500 10px/1 var(--sans); letter-spacing: .12em; color: var(--muted); }
.hb-latl.is-end { left: auto; right: 8px; }
.hb-tiles { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
ol.hb-tiles > li { margin: 0; }
.hb-t a {
  position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 15px 15px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .012)); color: var(--ivory-2); text-decoration: none;
  transition: transform .35s var(--ease), border-color .25s ease, background-color .25s ease;
}
.hb-t a:hover { transform: translateY(-3px); border-color: var(--gold-line); color: var(--ivory-2); }
.hb-tc { position: relative; display: flex; flex-direction: column; gap: 3px; }
.hb-code { font: 600 10.5px/1.3 var(--sans); letter-spacing: .2em; color: var(--gold); }
.hb-city { font: 400 1.36rem/1.05 var(--serif); color: var(--ivory); }
.hb-under { position: absolute; top: -2px; right: -2px; padding: 2px 7px; border: 1px solid var(--gold-line); border-radius: 999px; font: 600 10.5px/1.5 var(--sans); color: var(--gold); white-space: nowrap; }
.hb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; row-gap: 5px; }
.hb-l { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.hb-row b { font: 600 14px/1.2 var(--sans); color: var(--ivory); }
.hb-seen b { font-weight: 500; color: var(--ivory-2); }
.hb-bar { grid-column: 1 / -1; display: block; width: var(--w); height: 3px; border-radius: 3px; transform-origin: left center; animation: hb-grow 1.4s var(--ease) .35s both; }
.hb-ours .hb-bar { background: linear-gradient(90deg, #e2482d, var(--verm-hi)); box-shadow: 0 0 12px rgb(242 86 58 / .45); }
.hb-seen .hb-bar { background: linear-gradient(90deg, rgb(217 178 106 / .25), rgb(217 178 106 / .6)); }
@keyframes hb-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hb-prov { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.hb-go { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font: 600 12.5px/1.35 var(--sans); color: var(--verm-hi); }
.hb-arrow { display: inline-block; margin-left: 6px; transition: transform .3s var(--ease); }
.hb-t a:hover .hb-arrow { transform: translateX(3px); }
/* a tile under the pointer or the keyboard lights its point on the chart */
.hero-bay:has(.hb-t-hk-hkg a:is(:hover, :focus-visible)) .hb-dot-hk-hkg,
.hero-bay:has(.hb-t-sg-sin a:is(:hover, :focus-visible)) .hb-dot-sg-sin,
.hero-bay:has(.hb-t-jp-tyo a:is(:hover, :focus-visible)) .hb-dot-jp-tyo { transform: scale(1.3); border-color: var(--gold-hi); box-shadow: 0 0 0 4px rgb(11 9 9 / .55), 0 0 30px rgb(242 86 58 / .6); }
.hb-foot { position: relative; z-index: 1; margin: 14px 2px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1240px) and (min-width: 1080px) { .hb-l { font-size: 11px; } .hb-city { font-size: 1.22rem; } }
@media (max-width: 560px) {
  .hero-bay { padding: 22px 16px 16px; border-radius: 20px; }
  .hb-map { aspect-ratio: 1.3 / 1; margin: 16px -2px 30px; }
  .hb-tiles { grid-template-columns: minmax(0, 1fr); }
  .hb-t a { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "tc ours" "tc seen" "go go"; gap: 10px 16px; }
  .hb-tc { grid-area: tc; }
  .hb-under { position: static; align-self: flex-start; margin-top: 6px; }
  .hb-ours { grid-area: ours; }
  .hb-seen { grid-area: seen; }
  .hb-go { grid-area: go; }
  .hb-pin { font-size: 13.5px; }
  .hb-latl { display: none; }
  .kicker { letter-spacing: .14em; }
  .kicker::before { display: none; }
  body:not(.t-home) .page-head::before { display: none; }
  :root :is(.hb-l, .hb-prov, .hb-foot, .hb-terms, .hb-pspec) { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- lacquer panels everywhere */
.quick-answer {
  position: relative; margin: 10px 0 18px; padding: 26px 30px 24px; max-width: 900px; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--sheen), var(--lacquer); box-shadow: var(--sh-1);
}
.quick-answer::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: linear-gradient(180deg, transparent, var(--gold), transparent); }
.qa-label { margin: 0 0 8px; font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.qa-q { margin: 0 0 10px; font: 400 1.65rem/1.18 var(--serif); color: var(--ivory); letter-spacing: -0.005em; }
.qa-text p { margin: 0; color: var(--ivory-2); }
:is(.card, .stat, .plan, .cfg-sum, .trust > li, .related-list li, .about-box, .toc, .callout, .rank, .coins li, .coinstrip, .pay-terms) {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sheen), var(--lacquer); box-shadow: var(--sh-1);
}
.card-ic, .stat-ic, .trust-ic, .step-ic { color: var(--gold); background: rgb(217 178 106 / .06); border: 1px solid var(--gold-faint); border-radius: 12px; }
.card .card-tag { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.card h3 { font: 400 1.6rem/1.12 var(--serif); letter-spacing: -0.005em; color: var(--ivory); margin: 4px 0 10px; }
.card h3 a { position: relative; color: var(--ivory); text-decoration: none; }
.card h3 a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease); }
.card p { color: var(--ivory-2); font-size: 15px; line-height: 1.62; }
.card { padding: 24px 24px 10px; transition: transform .4s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.card-link:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: var(--sh-2); }
.card-link:hover h3 a::before { transform: scaleX(1); }
.card-link:hover h3 a { color: var(--ivory); }
.card-link:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.band { background: var(--black-0); box-shadow: 0 0 0 100vmax var(--black-0); border-block: 0; }
.band::before, .band::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; height: 1px; background: var(--seam); opacity: .35; }
.band::before { top: 0; }
.band::after { bottom: 0; }

/* stats as a bento: the price large on the left, the rest around it */
.stats { gap: 14px; margin: 18px 0 26px; }
.stat { position: relative; padding: 22px 22px 20px; overflow: hidden; }
.stat-v { font: 400 2.9rem/1 var(--serif); color: var(--ivory); letter-spacing: -0.015em; }
.stat-l { margin-top: 10px; font-weight: 550; font-size: 14.5px; color: var(--ivory); }
.stat-n { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) {
  .stats:has(> .stat:nth-child(4):last-child) { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; }
  .stats:has(> .stat:nth-child(4):last-child) > .stat:first-child { grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; }
  .stats:has(> .stat:nth-child(4):last-child) > .stat:first-child .stat-v { font-size: clamp(5rem, 3rem + 3.4vw, 7rem); color: var(--gold-hi); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 70%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .stats:has(> .stat:nth-child(4):last-child) > .stat:last-child { grid-column: 2 / span 2; }
  .stats:has(> .stat:nth-child(4):last-child) > .stat:first-child::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid var(--gold-faint); box-shadow: 0 0 0 28px rgb(217 178 106 / .025), 0 0 0 56px rgb(217 178 106 / .02); pointer-events: none; }
}

/* feature cards as a bento: two wide, then three; the city cards as three equal tiles */
.cards { gap: 14px; }
@media (min-width: 900px) {
  .cards:has(> .card:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards:has(> .card:nth-child(5):last-child) > .card:nth-child(-n+2) { grid-column: span 3; padding: 30px 30px 14px; }
  .cards:has(> .card:nth-child(5):last-child) > .card:nth-child(n+3) { grid-column: span 2; }
  .cards:has(> .card:nth-child(5):last-child) > .card:first-child { background: radial-gradient(80% 90% at 100% 0%, rgb(242 86 58 / .1), transparent 60%), var(--sheen), var(--lacquer); }
  .cards:has(> .card:nth-child(5):last-child) > .card:nth-child(-n+2) h3 { font-size: 2rem; }
  .cards:has(> .card:nth-child(5):last-child) > .card:nth-child(-n+2) { overflow: hidden; }
  .cards:has(> .card:nth-child(5):last-child) > .card:nth-child(-n+2)::after { content: ""; position: absolute; right: -70px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgb(217 178 106 / .16); box-shadow: 0 0 0 26px rgb(217 178 106 / .02), 0 0 0 27px rgb(217 178 106 / .09), 0 0 0 56px rgb(217 178 106 / .015), 0 0 0 57px rgb(217 178 106 / .06); pointer-events: none; }
  .cards:has(> .card:nth-child(5):last-child) > .card:nth-child(2)::after { right: auto; left: 62%; bottom: auto; top: -150px; }
  .cards:has(> .card-link:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cards:has(> .card-link) .card .card-tag { font: italic 400 2.6rem/1 var(--serif); letter-spacing: .01em; text-transform: none; margin: 0 0 16px; color: var(--gold); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------------------------------------------------------------- pricing: the term switch, then four lacquer cards */
.pricing { position: relative; }
.pricing > h2 { max-width: 20ch; }
.pricing > p { max-width: 64ch; color: var(--ivory-2); }
.term-switch { margin: 26px 0 30px; }
.ts-legend { margin-bottom: 10px; font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; color: var(--gold); }
.ts-opts { position: relative; gap: 4px; padding: 5px; border: 1px solid var(--gold-line); border-radius: 999px; background: rgb(7 6 6 / .7); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 20px 40px -30px rgb(0 0 0 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ts-opt { padding: 10px 18px; color: var(--ivory-2); font: 550 14px/1.2 var(--sans); transition: background-color .3s var(--ease), color .2s ease, box-shadow .3s ease; }
.ts-opt:hover { color: var(--ivory); background: rgb(255 255 255 / .04); }
.ts-opt:has(input:checked) { background: linear-gradient(180deg, #f6684d, var(--verm)); color: var(--verm-ink); box-shadow: inset 0 1px 0 rgb(255 220 205 / .45), 0 10px 22px -12px rgb(242 86 58 / .8); }
.ts-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.ts-off { padding: 3px 7px; border-radius: 999px; background: rgb(217 178 106 / .12); color: var(--gold); font: 600 11px/1 var(--sans); }
.ts-off.is-flex { color: var(--muted); font-weight: 450; opacity: 1; }
.ts-opt:has(input:checked) .ts-off { background: rgb(20 8 6 / .14); color: var(--verm-ink); }
.ts-opt:has(input:checked) .ts-off.is-flex { color: var(--verm-ink); font-weight: 500; background: none; }
.ts-per { font: 400 .34em/1 var(--sans); color: var(--muted); opacity: 1; letter-spacing: 0; }
.ts-billed { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.plans { gap: 14px; }
@media (min-width: 1000px) { .plans:has(> .plan:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { padding: 28px 24px 24px; border-radius: var(--r-md); transition: transform .45s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.plan:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--sh-2); }
.plan-name { margin: 0 0 4px; font: italic 400 2rem/1.05 var(--serif); color: var(--ivory); letter-spacing: -0.005em; }
.plan-qty { font-size: 13.5px; color: var(--muted); }
.plan-price { margin: 22px 0 0; font: 400 3.4rem/1 var(--serif); color: var(--ivory); letter-spacing: -0.02em; }
.plan-unit { color: var(--muted); font-weight: 450; }
.plan-terms { display: grid; gap: 3px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.plan-term { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--line-2); padding: 2px 0; }
.pt-sep { display: none; }
.pt-price { color: var(--ivory-2); }
.pt-off { color: var(--gold); }
.plan-features { margin: 22px 0 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ivory-2); }
.plan-features li { position: relative; padding-left: 18px; margin: .5em 0; }
.plan-features li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); opacity: .8; }
.plan-features li:last-child { margin-top: 1em; padding-top: .8em; border-top: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
.plan-features li:last-child::before { background: none; border: 1px solid var(--muted-2); top: 1.45em; }
.plan .btn-primary { background: rgb(255 255 255 / .03); color: var(--ivory); border-color: var(--line-3); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); }
.plan .btn-primary:hover { background: rgb(255 255 255 / .06); color: var(--ivory); border-color: var(--gold-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.plan.popular { border-color: transparent; background: var(--sheen), var(--lacquer) padding-box, linear-gradient(160deg, var(--gold-hi), rgb(217 178 106 / .25) 35%, rgb(217 178 106 / .1) 60%, var(--gold)) border-box; box-shadow: var(--sh-2), 0 40px 90px -50px rgb(217 178 106 / .35); }
.plan.popular .btn-primary { background: linear-gradient(180deg, #f6684d, var(--verm) 55%, #e2482d); color: var(--verm-ink); border-color: rgb(255 140 110 / .5); box-shadow: inset 0 1px 0 rgb(255 220 205 / .45), 0 14px 30px -14px rgb(242 86 58 / .65); }
.plan-badge { top: -11px; left: 22px; padding: 4px 11px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1206; font: 650 10.5px/1.3 var(--sans); letter-spacing: .14em; box-shadow: 0 6px 16px -8px rgb(217 178 106 / .7); }
@media (min-width: 900px) { .plan.popular { transform: none; } .plan.popular:hover { transform: translateY(-4px); } }
.plan-incl { margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.plan-incl strong { color: var(--ivory-2); font-weight: 550; }
.pricing-note { color: var(--muted); font-size: 13.5px; }
.pay-terms { margin-top: 20px; padding: 18px 22px; font-size: 14px; }
.pay-terms li > svg { color: var(--gold); }
.pt-h { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; color: var(--gold); }

/* ---------------------------------------------------------------- tables */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--lacquer); box-shadow: var(--sh-1); }
.tbl table, .tiers table, .facts-table { font-size: 14.5px; }
:is(.tbl, .tiers) thead th { background: rgb(255 255 255 / .02); color: var(--muted); font: 500 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 14px 16px; border-bottom: 1px solid var(--gold-line); }
.tbl td, .tbl tbody th, .tiers td, .tiers tbody th { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ivory-2); }
.tbl tbody th, .tiers tbody th { color: var(--ivory); font-weight: 550; }
.tbl :where(tbody tr:nth-child(even)) { background: rgb(255 255 255 / .012); }
.tbl :where(tbody tr):hover, .tiers tbody tr:hover { background: rgb(217 178 106 / .035); }
.tbl tr.hl, .tiers tr.hl { background: rgb(242 86 58 / .06); }
.tbl tr.hl th { color: var(--ivory); }
.tbl tr.hl th:first-child { box-shadow: inset 2px 0 0 var(--verm); }
.tbl caption, .tiers caption { color: var(--muted); }
.tiers caption { color: var(--ivory); font-weight: 550; }
.tier-badge, .rank-badge, .hp-badge { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1206; }
.tier-off { color: var(--gold); }
.table-note, .checked { color: var(--muted); font-size: 13px; }
.facts-table th { color: var(--muted); font-weight: 500; }
.facts-table td { color: var(--ivory-2); }
.facts-table th, .facts-table td { border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- timeline, configurator, steps */
.timeline > h2, .configurator > h2 { max-width: 22ch; }
.tl { margin-top: 30px; }
.tl-step { min-width: 0; }
.tl-step::before { background: linear-gradient(90deg, var(--gold-line), rgb(217 178 106 / .08)); }
@media (max-width: 959px) { .tl-step::before { background: linear-gradient(180deg, var(--gold-line), rgb(217 178 106 / .08)); } }
.tl-n { background: var(--black); color: var(--gold); border: 1px solid var(--gold-line); font: 500 13px/1 var(--sans); box-shadow: 0 0 0 6px var(--black); }
.tl-k { font: 500 11px/1.4 var(--sans); letter-spacing: .18em; color: var(--muted); }
.tl-dur { background: rgb(217 178 106 / .1); color: var(--gold); }
.tl-name { font: 400 1.45rem/1.15 var(--serif); color: var(--ivory); }
.tl-text { color: var(--ivory-2); font-size: 14.5px; }
:is(.tl-coins, .tl-places) li { border-color: var(--line-2); color: var(--ivory-2); font-family: var(--sans); }
.tl-eta div { border-bottom-color: var(--line-2); font-family: var(--sans); }
.tl-eta dt { color: var(--ivory-2); }
.tl-eta-h { font-family: var(--sans); letter-spacing: .14em; }
.tl-cmd code { color: var(--gold-hi); }
.configurator { padding: 0; border: 0; background: none; box-shadow: none; }
.cfg-legend { font: 500 11.5px/1.4 var(--sans); letter-spacing: .18em; color: var(--ivory-2); }
.cfg-n { background: rgb(217 178 106 / .1); color: var(--gold); border: 1px solid var(--gold-faint); }
.cfg-o { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgb(255 255 255 / .02); transition: border-color .2s ease, background-color .2s ease; }
.cfg-opt:hover .cfg-o { border-color: var(--gold-line); }
.cfg-opt:has(input:checked) .cfg-o { border-color: var(--verm); box-shadow: 0 0 0 1px var(--verm), 0 16px 30px -22px rgb(242 86 58 / .6); background: rgb(242 86 58 / .05); }
.cfg-opt input { border-color: var(--line-3); background: var(--black); }
.cfg-opt input:checked { border-color: var(--verm); background: radial-gradient(circle, var(--verm) 0 4px, var(--black) 4.5px); }
.cfg-o-name { color: var(--ivory); }
.cfg-o-spec { color: var(--muted); }
.cfg-o-price { font-family: var(--sans); color: var(--ivory); }
.cfg-o-price small, .cfg-o-off, .cfg-o-full, .cfg-month { font-family: var(--sans); color: var(--muted); }
.cfg-o-off.is-off, .cfg-save.is-on { color: var(--gold); }
.cfg-sum { padding: 24px; }
.cfg-sum-k { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; color: var(--gold); }
.cfg-pick { color: var(--ivory); }
.cfg-total { border-top-color: var(--line-2); }
.cfg-total-v { font: 400 2.6rem/1 var(--serif); color: var(--ivory); }
.step-list > li { padding: 20px 22px 14px 74px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sheen), var(--lacquer); box-shadow: var(--sh-1); }
.step-list > li::before { left: 22px; top: 20px; background: var(--black); color: var(--gold); border: 1px solid var(--gold-line); font-weight: 500; }
.step-list > li.has-ic { padding-left: 82px; }
.step-ic { left: 22px; top: 20px; }
.step-list > li.has-ic::before { left: 50px; top: 13px; background: var(--verm); color: var(--verm-ink); border-color: var(--black); }
.step-name { color: var(--ivory); font-weight: 600; }
.pay-table thead th { background: rgb(255 255 255 / .02); color: var(--muted); }
.pay-table th, .pay-table td { border-bottom-color: var(--line); }

/* ---------------------------------------------------------------- FAQ, sources, related, callouts */
.faq { max-width: 920px; }
.faq-item { position: relative; border-bottom: 1px solid var(--line); padding: 6px 0 18px; max-width: 900px; }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item h3 { font: 500 1.08rem/1.4 var(--sans); color: var(--ivory); margin: 1.2em 0 .45em; padding-left: 26px; }
.faq-item h3::before { content: ""; position: absolute; left: 2px; margin-top: .62em; width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--gold); }
.faq-a { padding-left: 26px; color: var(--ivory-2); }
.faq-a p { font-size: 15.5px; }
.sources, .sources ol { color: var(--muted); font-size: 13.5px; }
.sources summary { color: var(--ivory-2); cursor: pointer; }
.related h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); }
.related-list li { padding: 18px 20px; transition: border-color .3s ease, transform .4s var(--ease); }
.related-list li:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.related-list a { color: var(--ivory); }
.related-list p { color: var(--muted); }
.callout { border-color: var(--gold-faint); }
.callout-h { color: var(--ivory); }
.callout.warn { background: linear-gradient(180deg, rgb(242 86 58 / .07), rgb(242 86 58 / .02)), var(--panel); border-color: rgb(242 86 58 / .3); }
.about-box { color: var(--muted); }
.about-h { color: var(--ivory); }
.toc { padding: 18px 22px 14px; font-size: 14.5px; }
.toc-h { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.toc a { color: var(--ivory-2); text-decoration: none; }
.toc a:hover { color: var(--ivory); }
.content { max-width: 900px; }
.content > p, .sec > p { color: var(--ivory-2); }
.content ul li::marker { color: var(--gold); }
.content ol li::marker { color: var(--gold); font-weight: 600; }

/* ---------------------------------------------------------------- closing call-to-action: deep lacquer, one seam */
.cta {
  position: relative; overflow: hidden; margin: 72px 0 36px; padding: 58px 52px; border-radius: 28px; color: var(--ivory-2);
  background: radial-gradient(60% 120% at 100% 0%, rgb(242 86 58 / .22), transparent 60%), radial-gradient(50% 90% at 0% 120%, rgb(217 178 106 / .1), transparent 70%), var(--sheen), var(--lacquer);
  border: 1px solid var(--line); box-shadow: var(--sh-2);
}
.cta::before { content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px; background: var(--seam); }
.cta .cta-h { font: 400 clamp(2.2rem, 1.4rem + 2.6vw, 3.5rem)/1.02 var(--serif); color: var(--ivory); margin: 0 0 12px; max-width: 18ch; }
.cta .cta-t { max-width: 60ch; }
.cta .cta-t p { color: var(--ivory-2); }
.cta .btn-primary { background: linear-gradient(180deg, #f6684d, var(--verm) 55%, #e2482d); color: var(--verm-ink); }
.cta .btn-primary:hover { background: linear-gradient(180deg, #ff7a5c, #f45d40 55%, #e84d31); }
.cta .btn-ghost, .cta .btn:not(.btn-primary) { background: transparent; border-color: var(--line-3); color: var(--ivory); }
.cta > .trust-strip { color: var(--ivory-2); opacity: 1; }

/* ---------------------------------------------------------------- footer */
.ftr { position: relative; margin-top: 96px; background: var(--black-0); color: var(--muted); border-top: 0; }
.ftr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--seam); opacity: .45; }
.ftr a { color: var(--ivory-2); text-decoration: none; }
.ftr a:hover { color: var(--ivory); }
.ftr .f-h { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ftr :is(.f-desc, .f-bottom, .f-legal, .f-pay-h, .sc-note, .f-pay-n) { color: var(--muted); }
.ftr .f-col a { color: var(--ivory-2); font-size: 14px; }
.ftr .f-col a:hover { color: var(--ivory); }
.coins-mini li { background: rgb(255 255 255 / .03); border-color: var(--line-2); color: var(--ivory-2); }
.f-pay, .f-bottom { border-top-color: var(--line); }
.sticky-cta { background: rgb(9 7 7 / .9); border-top: 1px solid var(--line-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sc-note { color: var(--muted); }

/* ---------------------------------------------------------------- articles: contents as a rail on wide screens */
@media (min-width: 1200px) {
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) {
    display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 72px; align-items: start;
    grid-template-areas: "crumbs crumbs" "head head" "content toc" "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; }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > .content { grid-area: content; min-width: 0; }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > .toc { grid-area: toc; position: sticky; top: calc(var(--hdr-off) + 10px); max-height: calc(100vh - var(--hdr-off) - 36px); overflow: auto; margin: 22px 0 0; background: none; box-shadow: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 4px 0 4px 20px; scrollbar-width: thin; }
  body:not(.t-home, .t-pricing) main.wrap:has(> .toc) > .toc ol { columns: auto; padding-left: 0; list-style: none; }
  body:not(.t-home, .t-pricing) .toc li { margin: 0; }
  body:not(.t-home, .t-pricing) .toc a { position: relative; display: block; padding: 6px 0; color: var(--muted); line-height: 1.4; font-size: 13.5px; transition: color .2s ease; }
  body:not(.t-home, .t-pricing) .toc a::before { content: ""; position: absolute; left: -21px; top: 6px; bottom: 6px; width: 1px; background: transparent; transition: background-color .2s ease; }
  body:not(.t-home, .t-pricing) .toc a:hover { color: var(--ivory); }
  body:not(.t-home, .t-pricing) .toc a.is-active { color: var(--ivory); }
  body:not(.t-home, .t-pricing) .toc a.is-active::before { background: var(--gold); }
}
@media (max-width: 1199.98px) { .toc ol { columns: 2 280px; column-gap: 32px; } }

/* ---------------------------------------------------------------- gentle reveal (theme.js adds lb-js; nothing hides without it) */
.lb-js .lb-rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.lb-js .lb-rv.lb-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .t-home .page-head.hero { padding: 46px 0 30px; }
  .t-home .page-head.hero h1 { font-size: clamp(2.7rem, 1.6rem + 6vw, 3.6rem); }
  .page-head h1 { font-size: clamp(2.3rem, 1.5rem + 4.6vw, 3.1rem); }
  h2 { font-size: clamp(1.9rem, 1.4rem + 3vw, 2.4rem); }
  .quick-answer { padding: 22px 20px 20px; }
  .qa-q { font-size: 1.42rem; }
  .cta { padding: 38px 22px; border-radius: 22px; margin-top: 56px; }
  .plan-price { font-size: 3rem; }
  .card h3 { font-size: 1.45rem; }
  .stat-v { font-size: 2.6rem; }
  .ts-opt { padding: 10px 12px; }
  :root :is(.plan-qty, .plan-terms, .pricing-note, .plan-incl, .stat-n, .tl-text, .ts-billed, .crumbs ol) { font-size: 14.5px; }
}
@media (max-width: 560px) {
  .t-home .page-head.hero::before { bottom: -110px; height: 220px; opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-glint, .hb-dot::before { animation: none !important; opacity: 0 !important; }
  .hdr .nav a::after, .card h3 a::before { transition: none !important; }
  .hb-bar { animation: none !important; }
  .lb-js .lb-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hb-t a, .card, .plan, .related-list li, .hdr .nav a, .card h3 a, .hb-arrow { transition: none !important; }
  .hb-t a:hover, .card-link:hover, .plan:hover, .related-list li:hover, .plan.popular:hover { transform: none !important; }
}

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

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