/* Uno content site: landings, wiki (how-it-works), learn, guides, compare.
   Tokens, nav, buttons, code windows are the incumbent uno.place ones (assets/landing.css),
   so these pages read as the same site. New here: article grid, figures, charts,
   spec tables, the computer panel, the service map, Next and CTA blocks. */
:root {
  --violet: #5b5be8;
  --violet-deep: #4343c9;
  --violet-ink: #3a3ab8;
  --tint: #f0f0fc;
  --vline: #dcdcf8;
  --ink: #18181b;
  --ink-2: #55555e;
  --ink-3: #6b6b74;
  --paper: #ffffff;
  --bg: #fafafb;
  --line: #e7e7ec;
  --line-2: #d8d8e0;
  --night: #121218;
  --night-2: #1d1d26;
  --night-line: #2c2c38;
  --ok: #1f9d55;
  --warn: #b26b00;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: 32px;
  --measure: 68ch;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { color-scheme: light; scroll-behavior: smooth; scrollbar-color: #c9c9da var(--bg); scroll-padding-top: 84px; }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { background: #cfcfe0; border-radius: 12px; border: 3px solid var(--bg); }
html::-webkit-scrollbar-thumb:hover { background: var(--violet); }
body {
  background: var(--paper); color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; caret-color: var(--violet);
  font-feature-settings: "cv11", "ss01";
}
::selection { background: var(--violet); color: #fff; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
code, .mono { font-family: var(--mono); font-size: .88em; }
:not(pre) > code { background: var(--tint); color: var(--violet-ink); padding: .1em .38em; border-radius: 5px; border: 1px solid var(--vline); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.skip:focus { top: 12px; }
.wrap { max-width: 1184px; margin: 0 auto; padding: 0 var(--gutter); }

/* Draft bar: only in password previews, lists facts that still need a check */
.draft { background: #fff8e6; border-bottom: 1px solid #f0dca8; color: #6b4a00; font-size: 13px; line-height: 1.5; }
.draft .wrap { padding-top: 8px; padding-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.draft b { font-weight: 650; }
.draft code { background: #fff; border-color: #f0dca8; color: #6b4a00; }

/* ── Nav (incumbent) ───────────────── */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; box-shadow: 0 1px 2px rgba(24,24,27,.2), inset 0 1px rgba(255,255,255,.35); }
.brand-text { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 26px; list-style: none; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .15s; white-space: nowrap; }
.nav-link:hover, .nav-link[aria-current] { color: var(--ink); }
.nav-link[aria-current] { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.nav-cta { font-size: 13.5px; font-weight: 600; color: #fff; background: var(--ink); padding: 8px 15px; border-radius: 8px; transition: background .15s; white-space: nowrap; }
.nav-cta:hover { background: var(--violet-deep); }
@media (max-width: 820px) { .nav-links { display: none; } }

/* ── Buttons (incumbent) ───────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 15.5px; font-weight: 600; padding: 13px 22px; border-radius: 10px; transition: background .15s, transform .15s, box-shadow .15s, border-color .15s; white-space: nowrap; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--violet); color: #fff; border: 1px solid var(--violet-deep); box-shadow: 0 1px 2px rgba(24,24,27,.12), 0 8px 22px -10px rgba(91,91,232,.6); }
.btn-primary:hover { background: var(--violet-deep); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(24,24,27,.12), 0 12px 28px -10px rgba(91,91,232,.65); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { color: var(--ink); border: 1px solid var(--line-2); background: #fff; }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn .i { width: 16px; height: 16px; stroke-width: 2; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.cta-note { font-size: 13.5px; color: var(--ink-3); }

/* ── Type ──────────────────────────── */
h1, h2, h3 { text-wrap: balance; color: var(--ink); }
.h1 { font-size: clamp(36px, 5.2vw, 62px); font-weight: 720; letter-spacing: -.035em; line-height: 1.04; }
.h1-art { font-size: clamp(32px, 4.2vw, 48px); font-weight: 720; letter-spacing: -.03em; line-height: 1.08; }
.h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.answer { margin-top: 18px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.answer b { color: var(--ink); font-weight: 600; }

/* ── Breadcrumbs ───────────────────── */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--ink-3); list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--violet-ink); }

/* ── Article layout: content + sticky contents ── */
.art-head { padding-top: 48px; padding-bottom: 8px; }
.art-head .crumbs { margin-bottom: 22px; }
.art { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 64px; padding-top: 32px; padding-bottom: 96px; align-items: start; }
.toc { position: sticky; top: 96px; font-size: 13.5px; }
.toc p { font-weight: 650; color: var(--ink); margin-bottom: 10px; }
.toc ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--ink-3); transition: color .15s, border-color .15s; line-height: 1.4; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--violet-ink); border-left-color: var(--violet); }
@media (max-width: 1000px) { .art { grid-template-columns: minmax(0, 1fr); gap: 0; } .toc { display: none; } }

.prose { min-width: 0; }
.prose > :where(p, ul, ol, h2, h3, .faq, .note, .code, .howto, .limits) { max-width: var(--measure); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.022em; line-height: 1.18; margin-top: 64px; }
.prose h3 { font-size: 19px; font-weight: 650; letter-spacing: -.012em; margin-top: 36px; }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose p, .prose li { color: #2e2e35; font-size: 17px; line-height: 1.68; }
.prose ul, .prose ol { padding-left: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.prose > *, .howto > li { min-width: 0; }
.prose li::marker { color: var(--ink-3); }
.prose a:not(.btn), a.u { color: var(--violet-ink); text-decoration: underline; text-decoration-color: var(--vline); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color .15s; }
.prose a:not(.btn):hover, a.u:hover { text-decoration-color: var(--violet); }
.prose a.term { text-decoration-style: dotted; }
.prose strong { font-weight: 650; color: var(--ink); }
.prose .wide { max-width: 880px; }

/* Fact plate: time · cost · what you need */
.plate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; background: var(--bg); margin-top: 28px; max-width: 760px; }
.plate div { padding: 16px 20px; }
.plate div + div { border-left: 1px solid var(--line); }
.plate dt { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.plate dd { margin-top: 2px; font-size: 16px; font-weight: 650; color: var(--ink); line-height: 1.35; }
@media (max-width: 640px) { .plate { grid-template-columns: 1fr; } .plate div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Figures and diagrams */
.fig { margin: 36px 0 8px; }
.fig .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fig svg { display: block; width: 100%; min-width: 640px; height: auto; overflow: visible; }
.fig figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; max-width: 70ch; }
.dg-box { fill: #fff; stroke: var(--line-2); stroke-width: 1; }
.dg-soft { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.dg-tint { fill: var(--tint); stroke: var(--vline); stroke-width: 1; }
.dg-vio { fill: var(--violet); }
.dg-ink { fill: var(--ink); }
.dg-t { font: 600 15px Inter, system-ui, sans-serif; fill: var(--ink); }
.dg-s { font: 500 13.5px Inter, system-ui, sans-serif; fill: var(--ink-3); }
.dg-w { font: 600 15px Inter, system-ui, sans-serif; fill: #fff; }
.dg-ws { font: 500 13.5px Inter, system-ui, sans-serif; fill: #c9c9f6; }
.dg-m { font: 500 13px var(--mono); fill: var(--ink-2); }
.dg-line { fill: none; stroke: #9a9aae; stroke-width: 1.25; }
.dg-arrow { fill: none; stroke: var(--violet); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Spec table / compare table */
.tbl-wrap { overflow-x: auto; margin-top: 24px; border: 1px solid var(--line); border-radius: 14px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
.tbl thead th { font-size: 13px; font-weight: 600; color: var(--ink-3); background: var(--bg); white-space: nowrap; }
.tbl tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tbl td { white-space: normal; }
.tbl.specs td { white-space: nowrap; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl td { color: var(--ink-2); }
.tbl .us { background: #f7f7fe; }
.tbl .us th, .tbl td.us, .tbl th.us { color: var(--violet-ink); }
.tbl .yes { color: var(--ok); font-weight: 600; }
.tbl .no { color: var(--ink-3); }
.tbl caption { caption-side: bottom; text-align: left; padding: 10px 16px 12px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); }

/* Verdict (compare pages): answer first */
.verdict { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ink); border-radius: 14px; overflow: hidden; max-width: 880px; }
.verdict div { padding: 18px 22px; }
.verdict div + div { border-left: 1px solid var(--line); }
.verdict dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.verdict dd { margin-top: 4px; font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.verdict.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.verdict.four div:nth-child(n) + div { border-left: 1px solid var(--line); }
@media (max-width: 860px) { .verdict, .verdict.four { grid-template-columns: 1fr 1fr; } .verdict.four div:nth-child(3) { border-left: 0; } .verdict.four div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .verdict, .verdict.four { grid-template-columns: 1fr; } .verdict div + div { border-left: 0 !important; border-top: 1px solid var(--line); } }

/* Honest limits list */
.limits { list-style: none !important; padding: 0 !important; display: grid; gap: 10px; }
.limits li { position: relative; padding-left: 28px; }
.limits li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 12px; height: 1.75px; background: var(--ink-3); border-radius: 2px; }

/* Shortcut in Uno (inside articles) */
.shortcut { margin-top: 40px; border-radius: 16px; background: var(--night); color: #e4e4ee; padding: 28px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; max-width: 880px; box-shadow: 0 2px 4px rgba(24,24,27,.08), 0 30px 60px -34px rgba(58,58,184,.55); }
.shortcut h2, .shortcut h3 { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -.018em; margin: 0 !important; }
.shortcut p { color: #b9b9cc !important; font-size: 15.5px !important; margin-top: 6px !important; line-height: 1.55 !important; max-width: 56ch; }
.shortcut .price { font-size: 13px; color: #a1a1b5; margin-top: 8px; text-align: right; }
.shortcut .price b { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.shortcut .btn-primary { box-shadow: 0 8px 22px -10px rgba(91,91,232,.9); }
.shortcut .go { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
@media (max-width: 720px) { .shortcut { grid-template-columns: 1fr; padding: 24px; } .shortcut .go { align-items: flex-start; } .shortcut .price { text-align: left; } }

/* Steps with commands (guides) */
.howto { counter-reset: st; list-style: none !important; padding: 0 !important; display: grid; gap: 28px !important; margin-top: 28px !important; }
.howto > li { counter-increment: st; position: relative; padding-left: 52px; }
.howto > li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 650; font-size: 14.5px; display: grid; place-items: center; }
.howto h3 { margin-top: 2px !important; font-size: 18.5px; }
.howto p { margin-top: 6px; }

.code { position: relative; margin-top: 12px; background: var(--night); border-radius: 12px; overflow: hidden; }
.code pre { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: #e4e4ee; padding: 14px 64px 16px 18px; overflow-x: auto; white-space: pre; }
.code pre .c { color: #8c8ca3; }
.code pre .p { color: #8f8fff; user-select: none; }
.code pre ::selection { background: var(--violet); color: #fff; }
.code .copy { position: absolute; top: 8px; right: 8px; font: 600 12px Inter, system-ui, sans-serif; color: #c9c9da; background: var(--night-2); border: 1px solid var(--night-line); border-radius: 7px; padding: 5px 9px; cursor: pointer; transition: color .15s, border-color .15s; }
.code .copy:hover { color: #fff; border-color: #4a4a5c; }
.code .copy.done { color: #6fd39a; }

/* Callout for errors / notes */
.note { border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 14px 18px; font-size: 15.5px; color: var(--ink-2); }
.note b { color: var(--ink); }

/* FAQ */
.faq { margin-top: 20px; border-top: 1px solid var(--line); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-size: 17px; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px; border-right: 1.75px solid var(--ink-3); border-bottom: 1.75px solid var(--ink-3); transform: rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq details > div { padding: 0 0 20px; color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 66ch; }

/* Next: three hand-picked pages */
.next { border-top: 1px solid var(--line); padding: 56px 0 72px; background: var(--bg); }
.next h2 { font-size: 15px; font-weight: 650; color: var(--ink-3); letter-spacing: 0; }
.next ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 16px; border-top: 1px solid var(--ink); }
.next li + li { border-left: 1px solid var(--line); }
.next a { display: block; padding: 18px 22px 22px 0; height: 100%; transition: background .2s; }
.next li + li a { padding-left: 22px; }
.next .t { display: block; font-size: 18px; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; color: var(--ink); }
.next .d { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink-3); line-height: 1.5; }
.next a:hover .t { color: var(--violet-ink); }
@media (max-width: 760px) { .next ol { grid-template-columns: 1fr; } .next li + li { border-left: 0; border-top: 1px solid var(--line); } .next li + li a { padding-left: 0; } }

/* Closing CTA band */
.close { background: var(--violet); color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.close h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); font-weight: 720; letter-spacing: -.03em; line-height: 1.08; max-width: 18ch; }
.close p { margin-top: 14px; font-size: 18px; color: #dcdcfb; max-width: 52ch; }
.close .btn-white { background: #fff; color: var(--violet-ink); border: 1px solid #fff; box-shadow: 0 10px 30px -12px rgba(18,18,40,.5); }
.close .btn-white:hover { transform: translateY(-1px); background: #f5f5ff; }
.close .cta-note { color: #cfcffa; }
.close-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
@media (max-width: 760px) { .close-in { grid-template-columns: 1fr; } }

/* Footer (incumbent, short) */
.foot { padding: 36px 0 44px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.foot-in { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.foot a:hover { color: var(--ink); }
.foot .sp { margin-right: auto; }

/* ── T1 landing ────────────────────── */
.lp-hero { padding: 64px 0 40px; background: linear-gradient(180deg, #fff 0%, #fff 50%, #f6f6fb 100%); border-bottom: 1px solid var(--line); }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; align-items: center; }
.lp-sub { margin-top: 18px; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.lp-sub b { color: var(--ink); font-weight: 600; }
@media (max-width: 1040px) { .lp-grid { grid-template-columns: 1fr; gap: 40px; } }

/* The computer panel: the page's demonstration */
.panel { background: var(--night); border-radius: 16px; color: #e4e4ee; box-shadow: 0 2px 4px rgba(24,24,27,.1), 0 40px 80px -40px rgba(58,58,184,.6); overflow: hidden; }
.panel-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--night-line); }
.panel-name { font: 600 13px var(--mono); color: #fff; }
.panel-meta { font-size: 12px; color: #8c8ca3; margin-left: auto; white-space: nowrap; }
.panel-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--night-line); }
.panel-row { padding: 14px 18px; }
.panel-row + .panel-row { border-left: 1px solid var(--night-line); }
.panel-row dt { font-size: 12px; color: #8c8ca3; }
.panel-row dd { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5a5a6e; flex: none; box-shadow: 0 0 0 3px rgba(90,90,110,.18); transition: background .3s, box-shadow .3s; }
.dot.on { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
.dot.sleep { background: #8f8fff; box-shadow: 0 0 0 3px rgba(143,143,255,.18); }
.panel-log { font: 12.5px/1.75 var(--mono); padding: 14px 18px 16px; min-height: 176px; color: #c9c9da; }
.panel-log .t { color: #8e8ea6; margin-right: 10px; }
.panel-log .ok { color: #6fd39a; }
.panel-log .p { color: #a9a9ff; }
.panel-log div { color: #7c7c92; transition: color .35s var(--ease); white-space: pre-wrap; }
.panel-log div .t, .panel-log div .ok, .panel-log div .p { transition: color .35s var(--ease); }
.panel-log div:not(.seen) .ok, .panel-log div:not(.seen) .p { color: #7c7c92; }
.panel-log div.seen { color: #c9c9da; }
.panel-log div.now { color: #fff; }

/* Night timeline under the panel (scrubbable) */
.night { padding: 16px 18px 18px; border-top: 1px solid var(--night-line); background: var(--night-2); }
.night-head { display: flex; justify-content: space-between; font-size: 12px; color: #8c8ca3; }
.night-head b { color: #fff; font-weight: 600; }
.night input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; margin-top: 12px; background: transparent; height: 22px; cursor: pointer; }
.night input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #4ade80 0 var(--work, 60%), #8f8fff var(--work, 60%) 100%); }
.night input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #4ade80 0 var(--work, 60%), #8f8fff var(--work, 60%) 100%); }
.night input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; margin-top: -7px; box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.4); }
.night input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.night-keys { display: flex; justify-content: space-between; margin-top: 6px; font: 11.5px var(--mono); color: #8e8ea6; }
.example { font-size: 12px; color: var(--ink-3); margin-top: 10px; }

/* Three steps */
.three { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--ink); counter-reset: s3; }
.three li { counter-increment: s3; padding: 22px 28px 8px 0; }
.three li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.three li::before { content: counter(s3); display: block; font-size: 44px; font-weight: 720; letter-spacing: -.04em; line-height: 1; color: var(--violet); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.three h3 { font-size: 19px; font-weight: 650; letter-spacing: -.012em; }
.three p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 820px) { .three { grid-template-columns: 1fr; } .three li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

.sec { padding: 96px 0; }
.sec.alt { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-lead { margin-top: 14px; font-size: 18px; color: var(--ink-2); max-width: 58ch; }

/* Proof rows: fact on the left, how-it-works link on the right */
.proofs { margin-top: 36px; border-top: 1px solid var(--line); }
.proof { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 8px 36px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.proof .f { font-size: 30px; font-weight: 720; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof .f small { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); margin-left: 4px; }
.proof p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 56ch; }
.proof p b { color: var(--ink); font-weight: 600; }
.proof a { font-size: 14px; font-weight: 600; color: var(--violet-ink); white-space: nowrap; }
.proof a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) { .proof { grid-template-columns: 1fr; } }

/* Bar chart (single series + highlighted Uno) */
.chart { margin-top: 40px; max-width: 880px; }
.chart h3 { font-size: 17px; font-weight: 650; }
.chart .sub { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.bars { margin-top: 18px; display: grid; gap: 10px; position: relative; }
.bar { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: center; font-size: 14.5px; }
.bar .lab { color: var(--ink-2); line-height: 1.3; }
.bar .lab b { color: var(--ink); font-weight: 600; }
.bar .track { position: relative; height: 24px; }
.bar .fill { position: absolute; top: 2px; height: 20px; border-radius: 4px; background: #8a8a98; min-width: 4px; }
.bar.us .fill { background: var(--violet); }
.bar .val { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar:hover .fill, .bar:focus-within .fill { filter: brightness(.92); }
.bars .grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.axis { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.axis div { position: relative; height: 16px; }
.axis div span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.axis div span:last-child { transform: translateX(-100%); }
.axis div span:first-child { transform: none; }
.bar .val.in { padding-left: 0; padding-right: 0; transform: translate(-8px, -50%); }
.bars .grid-lines { position: absolute; inset: 0 0 0 226px; pointer-events: none; }
.bars .grid-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
@media (max-width: 640px) { .bars .grid-lines { left: 120px; } }
.chart details { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.chart details summary { cursor: pointer; color: var(--ink-2); font-weight: 500; }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; max-width: 260px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); opacity: 0; transition: opacity .12s; }
.tip.show { opacity: 1; }
@media (max-width: 640px) { .bar, .axis { grid-template-columns: 110px minmax(0, 1fr); gap: 10px; } }

/* Price card */
.pricecard { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; max-width: 980px; box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 24px 48px -32px rgba(58,58,184,.35); }
.pricecard > div { padding: 28px 30px; }
.pricecard > div + div { border-left: 1px solid var(--line); background: var(--bg); }
.pricecard h3 { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.pricecard .amt { margin-top: 8px; font-size: 48px; font-weight: 750; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pricecard .amt small { font-size: 16px; font-weight: 600; color: var(--ink-3); letter-spacing: -.01em; margin-left: 4px; }
.pricecard ul { list-style: none; margin-top: 20px; display: grid; gap: 9px; }
.pricecard li { position: relative; padding-left: 24px; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.pricecard li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(-45deg); }
.pricecard li b { color: var(--ink); font-weight: 600; }
.ai-offer h3 { color: var(--ink); font-size: 22px; font-weight: 720; letter-spacing: -.02em; }
.ai-offer .today { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.ai-offer .add { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 760px) { .pricecard { grid-template-columns: 1fr; } .pricecard > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Fears: three plain answers */
.fears { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.fears h3 { font-size: 17px; font-weight: 650; }
.fears p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 820px) { .fears { grid-template-columns: 1fr; gap: 24px; } }

/* ── T6 hub: service map ───────────── */
.hub-hero { padding: 40px 0 24px; }
.map { margin-top: 36px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); padding: 28px; display: grid; gap: 14px; }
.layer { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.layer-name { font-size: 13px; font-weight: 600; color: var(--ink-3); padding-top: 14px; }
.layer-name span { display: block; font-weight: 500; font-size: 12px; margin-top: 2px; color: var(--ink-3); }
.nodes { display: flex; flex-wrap: wrap; gap: 10px; }
.node { flex: 1 1 150px; display: block; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .2s var(--ease), transform .2s var(--ease); position: relative; }
.node b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: -.008em; }
.node span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.node:hover, .node:focus-visible { border-color: var(--violet); box-shadow: 0 10px 24px -14px rgba(58,58,184,.5); transform: translateY(-1px); }
.node:hover b { color: var(--violet-ink); }
.node.core { background: var(--violet); border-color: var(--violet-deep); }
.node.core b { color: #fff; } .node.core span { color: #dcdcfb; }
.node.core:hover b { color: #fff; }
.node.dark { background: var(--night); border-color: var(--night); }
.node.dark b { color: #fff; } .node.dark span { color: #a1a1b5; }
.node.dark:hover b { color: #fff; }
.node.soon { border-style: dashed; background: transparent; }
.node.soon::after { content: "soon"; position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.layer-join { height: 14px; margin-left: 170px; background: linear-gradient(var(--line-2), var(--line-2)) center/1px 100% no-repeat; }
.map-wire .node:not(.core):not(.dark) { opacity: 1; }
.map.dim .node { opacity: .38; transition: opacity .2s; }
.map.dim .node.lit { opacity: 1; }
@media (max-width: 760px) { .layer { grid-template-columns: 1fr; gap: 8px; } .layer-name { padding-top: 0; } .layer-join { margin-left: 24px; } .map { padding: 18px; } }

.roles { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.roles > * { display: block; padding: 20px 24px 24px 0; }
.roles > * + * { padding-left: 24px; border-left: 1px solid var(--line); }
.roles .t { display: block; font-size: 19px; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; }
.roles a:hover .t { color: var(--violet-ink); }
.roles .path { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 820px) { .roles { grid-template-columns: 1fr; } .roles > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

.groups { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.groups h2 { font-size: 15px; font-weight: 650; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.groups ul { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.groups a { font-size: 15px; color: var(--ink); line-height: 1.4; }
.groups [data-pending] { font-size: 15px; color: var(--ink-3); border-bottom: 0 !important; }
.groups a:hover { color: var(--violet-ink); }
.groups .s { color: var(--ink-3); font-size: 12px; margin-left: 4px; }
@media (max-width: 900px) { .groups { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 640px) { :root { --gutter: 20px; } .sec { padding: 72px 0; } .lp-hero { padding-top: 40px; } .panel-rows { grid-template-columns: 1fr; } .panel-row + .panel-row { border-left: 0; border-top: 1px solid var(--night-line); } }
[data-pending] { cursor: help; }
.prose [data-pending]:not([class]), .proof [data-pending], .groups [data-pending], .crumbs [data-pending] { border-bottom: 1px dotted var(--line-2); }
.node[data-pending], .roles [data-pending] { display: block; }

/* Price card footer: the purchase button inside the card */
.pricecard-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 20px 30px !important; border-top: 1px solid var(--line); background: #fff !important; border-left: 0 !important; }

/* Route diagram: computer → exit network → destinations (reusable on agent pages) */
.route { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.5fr) 56px minmax(0, 1fr); align-items: center; max-width: 1040px; }
.route-node { border: 1px solid var(--line-2); border-radius: 16px; background: #fff; padding: 20px 22px; }
.route-node b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); margin-top: 4px; }
.route-node > span:not(.route-k) { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-3); line-height: 1.45; }
.route-k { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.route-node.hot { background: var(--night); border-color: var(--night); box-shadow: 0 2px 4px rgba(24,24,27,.1), 0 32px 64px -36px rgba(58,58,184,.6); }
.route-node.hot b { color: #fff; }
.route-node.hot .route-k { color: #a9a9ff; }
.route-node.hot > span:not(.route-k) { color: #b9b9cc; }
.route-countries { margin-top: 16px; display: grid; gap: 8px; border-top: 1px solid var(--night-line); padding-top: 14px; }
.route-countries div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.route-countries i { font-style: normal; font-size: 12.5px; font-weight: 600; color: #8e8ea6; }
.route-countries em { font-style: normal; font-size: 14.5px; color: #fff; line-height: 1.45; }
.route-arrow { height: 2px; background: var(--violet); position: relative; margin: 0 8px; }
.route-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--violet); border-right: 2px solid var(--violet); transform: rotate(45deg); }
@media (max-width: 900px) {
  .route { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .route-arrow { width: 2px; height: 32px; margin: 0 auto; }
  .route-arrow::after { right: -4px; top: auto; bottom: -1px; transform: rotate(135deg); }
}

/* Without / with: two plain columns, the right one is ours */
.versus { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); max-width: 1040px; }
.versus div { padding: 18px 28px 6px 0; }
.versus div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.versus dt { font-size: 15px; font-weight: 650; color: var(--ink-3); }
.versus .hot dt { color: var(--violet-ink); }
.versus dd { margin-top: 6px; font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.versus .hot dd { color: var(--ink); }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } .versus div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* ── T6 hub: atlas (computer in the middle, drivers left, services right) ── */
.hub-head { max-width: 760px; margin-top: 22px; }
.hub-how { margin-top: 14px; font-size: 15px; color: var(--violet-ink); font-weight: 500; }
.atlas { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 56px; align-items: center; }
.atlas-col { display: grid; gap: 8px; position: relative; }
.atlas-h { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-bottom: 2px; }
.atlas .node { position: relative; display: block; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 14px; transition: border-color .15s, box-shadow .2s var(--ease), background .15s; }
.atlas .node b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.atlas .node > span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; line-height: 1.4; }
.atlas-col .node::after { content: ""; position: absolute; top: 50%; width: 56px; height: 1px; background: var(--line-2); transition: background .15s; }
.atlas-col.in .node::after { left: 100%; }
.atlas-col.out .node::after { right: 100%; }
.atlas .node:hover, .atlas .node:focus-visible, .atlas .node.is-on { border-color: var(--violet); box-shadow: 0 10px 24px -14px rgba(58,58,184,.5); }
.atlas .node:hover::after, .atlas .node:focus-visible::after, .atlas .node.is-on::after { background: var(--violet); }
.atlas-core { background: var(--violet); border-radius: 22px; padding: 26px; color: #fff; box-shadow: 0 2px 4px rgba(24,24,27,.12), 0 40px 80px -40px rgba(58,58,184,.75); position: relative; z-index: 1; }
.atlas .core-main { background: transparent; border: 0; padding: 0; box-shadow: none !important; }
.core-k { font-size: 13px; font-weight: 600; color: #cfcffa; }
.atlas .core-main b { font-size: clamp(28px, 3vw, 36px); font-weight: 720; letter-spacing: -.03em; color: #fff; }
.atlas .core-main > span:not(.core-k) { color: #dcdcfb; font-size: 15px; margin-top: 6px; }
.core-parts { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.atlas .chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); padding: 10px 12px; }
.atlas .chip b { color: #fff; font-size: 14.5px; }
.atlas .chip:hover, .atlas .chip:focus-visible, .atlas .chip.is-on { background: #fff; border-color: #fff; box-shadow: none; }
.atlas .chip:hover b, .atlas .chip:focus-visible b, .atlas .chip.is-on b { color: var(--violet-ink); }
.atlas-detail { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; border-top: 1px solid var(--ink); padding: 20px 0 4px; min-height: 104px; }
.atlas-detail h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.atlas-detail p { margin-top: 4px; font-size: 16px; color: var(--ink-2); max-width: 72ch; line-height: 1.55; }
.atlas-detail [aria-disabled] { opacity: .5; pointer-events: none; }
@media (max-width: 960px) {
  .atlas { grid-template-columns: 1fr; gap: 16px; }
  .atlas-core { order: -1; }
  .atlas-col .node::after { display: none; }
  .atlas-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-h { grid-column: 1 / -1; margin-top: 8px; }
  .atlas-detail { display: none; }
}
@media (max-width: 480px) { .atlas-col { grid-template-columns: 1fr; } }
/* atlas bus: nodes → vertical rail → stub into the computer */
.atlas-col .node::after { width: 28px; }
.atlas-col::before { content: ""; position: absolute; width: 1px; background: var(--line-2); top: calc(26px + 30px); bottom: 30px; }
.atlas-col.in::before { right: -28px; }
.atlas-col.out::before { left: -28px; }
.atlas-core::before, .atlas-core::after { content: ""; position: absolute; top: 50%; width: 28px; height: 1px; background: var(--line-2); }
.atlas-core::before { right: 100%; }
.atlas-core::after { left: 100%; }
@media (max-width: 960px) { .atlas-col::before, .atlas-core::before, .atlas-core::after { display: none; } }
.prose .fine { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
.prose .chart { max-width: 880px; }

/* ── Reusable blocks (site/blocks/*.html) ─────────────────── */
.blk-h, .prose .blk-h { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; color: var(--ink); margin-top: 0; }
.prose .blk-h { font-size: clamp(24px, 2.4vw, 30px); }
.blk-lead, .prose .blk-lead { margin-top: 12px; font-size: 18px; color: var(--ink-2); max-width: 60ch; line-height: 1.55; }
.prose .blk-lead { font-size: 17px; }
.blk-fine, .prose .blk-fine { margin-top: 12px; font-size: 13.5px !important; line-height: 1.55 !important; font-size: 13.5px; color: var(--ink-3); max-width: 70ch; }
.prose > section[class^="blk-"] { margin-top: 72px; max-width: 880px; }
.prose > section[class^="blk-"] + * { margin-top: 48px; }

/* plans */
.plans { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 24px 48px -36px rgba(58,58,184,.35); }
.plan { padding: 22px 20px 20px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan h3 { font-size: 15px; font-weight: 650; color: var(--ink); margin: 0 !important; }
.plan-for { margin-top: 4px !important; font-size: 13.5px !important; color: var(--ink-3) !important; line-height: 1.4 !important; min-height: 2.8em; }
.plan-price { margin-top: 14px !important; display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font-size: 38px; font-weight: 750; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.plan-price span { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.plan ul { list-style: none !important; padding: 0 !important; margin-top: 16px !important; display: grid; gap: 6px !important; flex: 1; }
.plan li { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.4 !important; padding-left: 18px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 9px; height: 5px; border-left: 1.75px solid var(--violet); border-bottom: 1.75px solid var(--violet); transform: rotate(-45deg); }
.plan li b { color: var(--ink); font-weight: 600; }
.plan-btn { margin-top: 18px; width: 100%; font-size: 14.5px; padding: 11px 14px; color: var(--ink); border: 1px solid var(--line-2); background: #fff; }
.plan-btn:hover { border-color: var(--ink-3); }
.blk-plans[data-hl="small"] [data-plan="small"], .blk-plans[data-hl="plus"] [data-plan="plus"], .blk-plans[data-hl="pro"] [data-plan="pro"], .blk-plans[data-hl="max"] [data-plan="max"] { background: var(--tint); }
.blk-plans[data-hl="small"] [data-plan="small"] .plan-btn, .blk-plans[data-hl="plus"] [data-plan="plus"] .plan-btn, .blk-plans[data-hl="pro"] [data-plan="pro"] .plan-btn, .blk-plans[data-hl="max"] [data-plan="max"] .plan-btn { background: var(--violet); color: #fff; border-color: var(--violet-deep); box-shadow: 0 8px 22px -10px rgba(91,91,232,.6); }
.plans-ai { margin-top: 14px !important; font-size: 14.5px !important; color: var(--ink-2) !important; max-width: 80ch; }
.plans-ai b { color: var(--violet-ink); }
.plans-ai span { color: var(--ink-3); font-size: 13px; }
@media (max-width: 900px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan:nth-child(3) { border-left: 0; } .plan:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .plans { grid-template-columns: 1fr; } .plan + .plan { border-left: 0; border-top: 1px solid var(--line); } .plan-for { min-height: 0; } }

/* why-uno: rows with small drawn illustrations */
.why { margin-top: 28px; border-top: 1px solid var(--ink); }
.why-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.why-art { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.why-art svg { display: block; width: 100%; height: auto; }
.why-row h3 { font-size: 19px !important; font-weight: 650; letter-spacing: -.012em; margin: 0 !important; }
.why-row p { margin-top: 6px !important; font-size: 16px !important; color: var(--ink-2) !important; line-height: 1.55 !important; max-width: 60ch; }
.wa-t { font: 600 11px Inter, system-ui, sans-serif; fill: var(--ink-2); }
.wa-s { font: 500 10.5px Inter, system-ui, sans-serif; fill: var(--ink-3); }
.wa-w { font: 600 10.5px Inter, system-ui, sans-serif; fill: #fff; }
.wa-c { font: 500 11.5px Inter, system-ui, sans-serif; fill: var(--violet-ink); }
.wa-m { font: 500 10.5px var(--mono); fill: #c9c9da; }
.wa-m.ok { fill: #6fd39a; }
.wa-m.d { fill: var(--ink-2); }
@media (max-width: 640px) { .why-row { grid-template-columns: 1fr; gap: 14px; } .why-art { max-width: 320px; } }

/* vs-hosting */
.tbl.vs thead th span { font-weight: 500; color: var(--ink-3); font-size: 12px; }
.tbl.vs thead th.us { color: var(--violet-ink); }
.tbl.vs td.us { background: #f7f7fe; color: var(--ink); }

/* exit-ip inside an article column: stack the route */
.prose .blk-exit .route { grid-template-columns: minmax(0, 1fr); }
.prose .blk-exit .route-arrow { width: 2px; height: 28px; margin: 0 auto; }
.prose .blk-exit .route-arrow::after { right: -4px; top: auto; bottom: -1px; transform: rotate(135deg); }

/* terminal screenshot in articles */
.term-shot { margin-top: 24px !important; max-width: 720px; background: var(--night); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px rgba(24,24,27,.08), 0 30px 60px -34px rgba(58,58,184,.5); }
.term-shot .code-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--night-line); }
.term-shot .code-dots { display: flex; gap: 6px; } .term-shot .code-dots span { width: 10px; height: 10px; border-radius: 50%; background: #3a3a42; }
.term-shot .code-title { font: 12px var(--mono); color: #a1a1ad; }
.term-shot pre { font: 13px/1.75 var(--mono); color: #e4e4ee; padding: 14px 18px 18px; overflow-x: auto; white-space: pre; }
.term-shot .p { color: #8f8fff; } .term-shot .c { color: #8c8ca3; } .term-shot .ok { color: #6fd39a; }

/* fit: take it / skip it */
.fit { margin-top: 20px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 880px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.fit-col { padding: 22px 24px; }
.fit-col + .fit-col { border-left: 1px solid var(--line); background: var(--bg); }
.fit-col h3 { margin: 0 !important; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.fit-col h3::before { content: ""; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.fit-col.no h3::before { background: #b9b9c6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/12px no-repeat; }
.fit-col ul { list-style: none !important; padding: 0 !important; margin-top: 14px !important; display: grid; gap: 12px !important; }
.fit-col li { font-size: 15.5px !important; color: var(--ink-2) !important; line-height: 1.5 !important; }
.fit-col li b { color: var(--ink); font-weight: 600; display: block; }
@media (max-width: 640px) { .fit { grid-template-columns: 1fr; } .fit-col + .fit-col { border-left: 0; border-top: 1px solid var(--line); } }

/* ── agent-scene: laptop closes, agent works in the cloud (12 s loop) ── */
.scene { margin: 0; }
.scene svg { display: block; width: 100%; height: auto; }
.scene figcaption { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.sc-cap { font: 600 13px Inter, system-ui, sans-serif; fill: var(--violet-ink); }
.sc-dark-cap { font: 600 11.5px Inter, system-ui, sans-serif; fill: #e4e4ee; }
.sc-step-t { font: 500 12.5px Inter, system-ui, sans-serif; fill: #e4e4ee; }
.sc-chat { font: 500 11.5px Inter, system-ui, sans-serif; fill: var(--violet-ink); }
.sc-btn { font: 600 11px Inter, system-ui, sans-serif; fill: #fff; }
.sc-pill-t { font: 600 13.5px Inter, system-ui, sans-serif; fill: var(--ink); }
.sc-tick { fill: none; stroke: #4a4a5c; stroke-width: 1.5; }
.sc-chk { fill: none; stroke: #121218; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sc-lid { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-lid 12s var(--ease) infinite, sc-lid-hide 12s linear infinite; }
.sc-screen { animation: sc-screen 12s linear infinite; }
.sc-shut { opacity: 0; animation: sc-shut 12s linear infinite; }
.sc-link { animation: sc-flow 1s linear infinite, sc-link 12s linear infinite; }
.sc-step { opacity: .3; animation: sc-step 12s linear infinite; }
.sc-step .sc-tick { animation: sc-tick 12s linear infinite; }
.sc-step .sc-chk { animation: sc-chk 12s linear infinite; }
.sc-step.s2, .sc-step.s2 .sc-tick, .sc-step.s2 .sc-chk { animation-delay: 1.4s; }
.sc-step.s3, .sc-step.s3 .sc-tick, .sc-step.s3 .sc-chk { animation-delay: 2.8s; }
.sc-step.s4, .sc-step.s4 .sc-tick, .sc-step.s4 .sc-chk { animation-delay: 4.2s; }
.sc-working { animation: sc-working 12s linear infinite; }
.sc-asleep { opacity: 0; animation: sc-asleep 12s linear infinite; }
.sc-moon { opacity: 0; animation: sc-asleep 12s linear infinite; }
.sc-led { animation: sc-led 12s linear infinite; }
.sc-pill-dot { fill: #4ade80; animation: sc-led 12s linear infinite; }
.sc-pill-t { opacity: 0; }
.sc-pill-t.p1 { animation: sc-p1 12s linear infinite; }
.sc-pill-t.p2 { animation: sc-p2 12s linear infinite; }
.sc-pill-t.p3 { animation: sc-p3 12s linear infinite; }
@keyframes sc-lid { 0%, 14% { transform: scaleY(1); } 22%, 90% { transform: scaleY(.05); } 97%, 100% { transform: scaleY(1); } }
@keyframes sc-lid-hide { 0%, 20% { opacity: 1; } 21.5%, 90.5% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes sc-screen { 0%, 14% { opacity: 1; } 18%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes sc-shut { 0%, 20% { opacity: 0; } 21.5%, 90.5% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes sc-flow { to { stroke-dashoffset: -22; } }
@keyframes sc-link { 0%, 16% { opacity: 1; } 22%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes sc-step { 0%, 26% { opacity: .3; } 29%, 94% { opacity: 1; } 98%, 100% { opacity: .3; } }
@keyframes sc-tick { 0%, 26% { fill: none; stroke: #4a4a5c; } 29%, 94% { fill: #4ade80; stroke: #4ade80; } 98%, 100% { fill: none; stroke: #4a4a5c; } }
@keyframes sc-chk { 0%, 26% { opacity: 0; } 29%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes sc-working { 0%, 72% { opacity: 1; } 75%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes sc-asleep { 0%, 72% { opacity: 0; } 75%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes sc-led { 0%, 72% { fill: #4ade80; } 75%, 94% { fill: #8f8fff; } 97%, 100% { fill: #4ade80; } }
@keyframes sc-p1 { 0%, 15% { opacity: 1; } 18%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-p2 { 0%, 17% { opacity: 0; } 20%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes sc-p3 { 0%, 72% { opacity: 0; } 75%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sc-lid { transform: scaleY(.05); opacity: 0; } .sc-shut { opacity: 1; } .sc-link { opacity: 0; } .sc-step { opacity: 1; } .sc-tick { fill: #4ade80; stroke: #4ade80; } .sc-chk { opacity: 1; }
  .sc-working { opacity: 0; } .sc-asleep, .sc-moon { opacity: 1; } .sc-led, .sc-pill-dot { fill: #8f8fff; } .sc-pill-t.p3 { opacity: 1; }
}
.tbl.all .grp th { background: var(--bg); font-size: 13px; color: var(--ink); padding-top: 16px; }
.st { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.st-done { background: #e7f6ee; color: #17703d; } .st-writing { background: var(--tint); color: var(--violet-ink); } .st-todo { background: var(--bg); color: var(--ink-3); border: 1px solid var(--line); }

/* ai-offer */
.ai-card { margin-top: 0; background: var(--night); color: #e4e4ee; border-radius: 22px; padding: 34px 34px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px 40px; align-items: end; box-shadow: 0 2px 4px rgba(24,24,27,.1), 0 40px 80px -44px rgba(58,58,184,.7); }
.prose .ai-card { grid-template-columns: 1fr; }
.ai-card .blk-h { color: #fff !important; }
.ai-sub { margin-top: 12px !important; font-size: 17px !important; color: #c9c9da !important; line-height: 1.55 !important; max-width: 46ch; }
.ai-today { margin-top: 10px !important; font-size: 13px !important; color: #8e8ea6 !important; }
.ai-ladder { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px !important; align-items: end; height: 230px; }
.ai-ladder li { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.ai-ladder .bar { display: block; height: var(--h); min-height: 18px; background: #2c2c48; border-radius: 10px 10px 4px 4px; margin-bottom: 10px; }
.ai-ladder .top .bar { background: var(--violet); box-shadow: 0 12px 30px -10px rgba(91,91,232,.8); }
.ai-ladder b { font-size: 16px; color: #fff; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.ai-ladder .p { font-size: 13px; color: #a9a9ff; font-weight: 600; margin-top: 2px; }
.ai-ladder .d { font-size: 12px; color: #8e8ea6; line-height: 1.35; margin-top: 2px; }
.ai-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 22px; border-top: 1px solid var(--night-line); }
.ai-foot span { font-size: 13.5px; color: #a1a1b5; }
@media (max-width: 860px) { .ai-card { grid-template-columns: 1fr; padding: 26px 22px; } .ai-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; } .ai-ladder li { height: 150px; } }
/* Inside .prose the article rule `.prose ol { grid-template-columns: minmax(0,1fr) }` (0,1,1) beat .ai-ladder (0,1,0):
   the ladder stacked into one 230px-high column and its bars covered "Get a computer with Uno AI" (walk 25.10). */
.ai-card .ai-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .ai-card .ai-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* steps with pictures */
.steps3 { list-style: none !important; padding: 0 !important; margin-top: 28px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; border-top: 1px solid var(--ink); counter-reset: s3b; }
.steps3 li { counter-increment: s3b; padding: 22px 26px 6px 0; }
.steps3 li + li { padding-left: 26px; border-left: 1px solid var(--line); }
.steps3 svg { display: block; width: 100%; max-width: 200px; height: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; }
.steps3 h3 { margin: 0 !important; font-size: 18px !important; display: flex; gap: 10px; align-items: baseline; }
.steps3 h3::before { content: counter(s3b); color: var(--violet); font-weight: 750; }
.steps3 p { margin-top: 6px !important; font-size: 15.5px !important; color: var(--ink-2) !important; line-height: 1.55 !important; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; } .steps3 li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* use-cases */
.uses { list-style: none !important; padding: 0 !important; margin-top: 24px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; border-top: 1px solid var(--line); }
.uses li { border-bottom: 1px solid var(--line); }
.uses li:nth-child(3n+2), .uses li:nth-child(3n+3) { border-left: 1px solid var(--line); }
.uses a, .uses [data-pending] { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; padding: 18px 18px 18px 0; text-decoration: none !important; color: inherit; }
.uses li:nth-child(3n+2) > *, .uses li:nth-child(3n+3) > * { padding-left: 18px; }
.uses svg { grid-row: span 2; width: 40px; height: 40px; }
.uses b { font-size: 16px; font-weight: 650; color: var(--ink); }
.uses a > span, .uses [data-pending] > span { font-size: 14px; color: var(--ink-3); line-height: 1.4; }
.uses a:hover b { color: var(--violet-ink); }
@media (max-width: 760px) { .uses { grid-template-columns: 1fr; } .uses li:nth-child(n) { border-left: 0; } .uses li:nth-child(n) > * { padding-left: 0; } }

/* ── Block: regions (NL standard / USA Fast mode) ─────────────────── */
.blk-regions { margin: 56px 0; }
.regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.rg { border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 18px; background: #fff; min-width: 0; }
.rg.us { background: var(--tint); border-color: var(--vline); }
.rg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prose .rg-name, .rg-name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.rg-tag { font: 600 12.5px/1 Inter, system-ui, sans-serif; color: #fff; background: var(--violet); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.rg-tag.std { background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); }
.prose .rg-for, .rg-for { color: var(--ink-3); margin: 6px 0 14px; font-size: 15px; }
.prose .rg-spec, .rg-spec { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: 15px; }
.rg-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.rg.us .rg-prices { border-color: var(--vline); }
.rg-prices span { display: block; color: var(--ink-3); font-size: 13px; }
.rg-prices b { font-size: 19px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prose .rg-note, .rg-note { margin-top: 14px; color: var(--ink-3); font-size: 14.5px; max-width: 72ch; }
@media (max-width: 640px) { .regions { grid-template-columns: 1fr; } }

/* ── Blocks: speed-dev (dark, numbers) / speed-plain (tint, one sentence) ── */
.blk-speed { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center; border-radius: 20px; padding: 28px 32px; margin: 48px 0; }
.blk-speed.dev { background: var(--night); color: #fff; }
.blk-speed.plain { background: var(--tint); border: 1px solid var(--vline); }
.blk-speed p { margin: 0; }
.sp-big { font-size: clamp(44px, 5vw, 60px); font-weight: 750; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-head { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.sp-say { margin-top: 12px !important; font-size: 15px; line-height: 1.55; }
.dev .sp-say { color: #c4c4d6; }
.plain .sp-say { color: var(--ink-2); }
.sp-link { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 15px; }
.dev .sp-link { color: #b9b9ff; }
.sp-bars { display: grid; gap: 12px; min-width: 0; }
.sp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; align-items: center; gap: 12px; font-size: 14px; }
.sp-row i { display: block; height: 14px; border-radius: 4px; background: #8a8a98; }
.sp-row.us i { background: var(--violet); }
.dev .sp-row.us i { background: #8f8fff; }
.sp-row b { font-variant-numeric: tabular-nums; text-align: right; }
.dev .sp-row span { color: #c4c4d6; }
.sp-fine { font-size: 13px; color: #9a9aae; }
@media (max-width: 760px) { .blk-speed { grid-template-columns: 1fr; padding: 24px 20px; } .sp-row { grid-template-columns: 112px minmax(0, 1fr) 48px; } }
.prose .blk-speed .sp-head, .blk-speed .sp-head { font-size: 22px; line-height: 1.2; margin: 0; }
.prose .blk-speed .sp-say, .blk-speed .sp-say { font-size: 15px; line-height: 1.55; }
.prose .blk-speed .sp-row, .prose .blk-speed .sp-fine { font-size: 14px; }
.blk-speed .sp-link, .prose .blk-speed .sp-link { text-decoration: none; }
.plain .sp-link { color: var(--violet-ink); }
.blk-speed .sp-link:hover { text-decoration: underline; }
.bar .val.in-bar { padding: 0; transform: translate(-8px, -50%); color: #fff; }
/* в статьях .prose p перекрашивал текст тёмного блока скорости — вернуть светлый */
.prose .blk-speed.dev p, .blk-speed.dev .sp-row b { color: #fff; }
.prose .blk-speed.dev .sp-say { color: #c4c4d6; }
.prose .blk-speed .sp-fine, .prose .blk-speed.dev p.sp-fine { color: #9a9aae; }
.prose .blk-speed.plain .sp-fine { color: var(--ink-3); }
.prose .blk-speed p.sp-big { font-size: clamp(44px, 5vw, 60px); line-height: 1; font-weight: 750; }
.prose .blk-speed.dev .sp-link { color: #b9b9ff; }
/* 390 px: длинная строка кода внутри абзаца не должна раздвигать страницу (Выкатки 16.10) */
:not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 640px) {
  :not(pre) > code { white-space: normal; }
  /* место справа под подпись значения у самой длинной полосы */
  .bar .track, .axis div { margin-right: 64px; }
  .bars .grid-lines { right: 64px; }
  .bar .val { font-size: 12.5px; padding-left: 6px; }
}

/* ── Region landing: United States · High-end (R1–R3, T05 17.10) ── */
.hi-narrow .limits { margin-top: 28px; font-size: 17px; color: var(--ink-2); max-width: 760px; }
.hi-hero .lp-sub b { color: var(--ink); }
.hi-a .h1 { font-size: clamp(36px, 4.6vw, 56px); }
.hi-facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; margin-top: 40px; border-top: 1px solid var(--ink); max-width: 560px; }
.hi-facts div { padding: 14px 28px 0 0; }
.hi-facts div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.hi-facts dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.hi-facts dd { margin-top: 2px; font-size: 22px; font-weight: 720; letter-spacing: -.02em; line-height: 1.2; }
.hi-facts div:last-child dd { font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.35; padding-top: 4px; }
@media (max-width: 560px) { .hi-facts { grid-template-columns: 1fr 1fr; } .hi-facts div:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 12px; } }

/* Map: the Americas as dots, routes into New York */
.hi-map { margin: 0; }
.usmap { display: block; width: 100%; height: auto; max-height: 560px; }
.usmap-land circle { fill: #d9d9e4; }
.usmap-routes path { fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.usmap-city { fill: #fff; stroke: var(--violet); stroke-width: 2; }
.usmap-node { fill: var(--violet); stroke: #fff; stroke-width: 2.5; }
.usmap-pulse { fill: var(--violet); opacity: .16; transform-box: fill-box; transform-origin: center; }
.usmap-lbl { font: 650 17px Inter, sans-serif; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.hi-map figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); max-width: 52ch; }
@media (prefers-reduced-motion: no-preference) {
  .usmap-routes path { stroke-dasharray: 720; stroke-dashoffset: 0; animation: hi-route 1.5s var(--ease) both; }
  .usmap-routes path:nth-of-type(2) { animation-delay: .08s; } .usmap-routes path:nth-of-type(3) { animation-delay: .16s; }
  .usmap-routes path:nth-of-type(4) { animation-delay: .24s; } .usmap-routes path:nth-of-type(5) { animation-delay: .32s; }
  .usmap-routes path:nth-of-type(6) { animation-delay: .4s; } .usmap-routes path:nth-of-type(7) { animation-delay: .48s; }
  .usmap-routes path:nth-of-type(8) { animation-delay: .56s; } .usmap-routes path:nth-of-type(9) { animation-delay: .64s; }
  .usmap-routes path:nth-of-type(10) { animation-delay: .72s; }
  .usmap-pulse { animation: hi-pulse 1.6s 1.3s var(--ease) both; }
}
@keyframes hi-route { from { stroke-dashoffset: 720; } to { stroke-dashoffset: 0; } }
@keyframes hi-pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(3.2); opacity: .1; } }

.sec .fine { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; max-width: 88ch; }

/* The official result: a "soon" slot, dashed like every soon node */
.hi-official { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 36px; max-width: 880px; padding: 20px 24px; border: 1px dashed var(--line-2); border-radius: 14px; background: #fff; }
.hi-official h3 { font-size: 16.5px; font-weight: 650; }
.hi-official p { margin-top: 4px; font-size: 15px; color: var(--ink-2); line-height: 1.55; max-width: 70ch; }
.hi-official-mark { width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--violet); display: grid; place-items: center; margin-top: 2px; }
.hi-official-mark span { width: 10px; height: 10px; border-radius: 50%; background: var(--violet); opacity: .35; }

/* Prices by region */
.hi-prices { margin-top: 32px; max-width: 980px; }
.hi-prices th span, .hi-prices td span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; white-space: normal; }
.hi-prices tbody th { font-weight: 650; }
.hi-prices tbody td { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.hi-prices tbody td.us { color: var(--violet-ink); }
.hi-terms { list-style: none; margin-top: 18px; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); max-width: 72ch; }
.hi-terms li { position: relative; padding-left: 22px; }
.hi-terms li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 10px; height: 1.5px; background: var(--ink-3); }
.hi-three { margin-top: 40px; }

/* ── T6 hub lists: /learn/, /guides/, /compare/ (24.10) ── */
.hub-sec { margin-top: 56px; }
.hub-sec > h2 { font-size: 22px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; }
.hub-list { list-style: none; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--ink); }
.hub-list li { border-bottom: 1px solid var(--line); }
.hub-list a { display: block; height: 100%; padding: 16px 0 18px; }
.hub-list .t { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.hub-list .d { display: block; margin-top: 5px; font-size: 14.5px; color: var(--ink-3); line-height: 1.5; }
.hub-list a:hover .t { color: var(--violet-ink); }
.hub-more { margin-top: 48px; font-size: 16px; color: var(--ink-2); max-width: 68ch; }
.hub-more a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .hub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hub-list { grid-template-columns: 1fr; } .hub-sec { margin-top: 44px; } }

/* Footer: sections, every landing, help, legal (24.10) */
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.foot-h { font-size: 13px; font-weight: 650; color: var(--ink); }
.foot ul { list-style: none; margin-top: 10px; display: grid; gap: 7px; }
.foot ul a { color: var(--ink-3); }
.foot-legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-legal .sp { flex-basis: 100%; } }

/* Связка 25.10: статья → лендинг своего кластера; лендинг → «Read before you start» */
.to-landing { padding: 8px 0 48px; background: var(--bg); }
.tl-card { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-items: end; max-width: 880px; padding: 24px 28px; border-radius: 16px; background: var(--night); color: #e4e4ee; box-shadow: 0 2px 4px rgba(24,24,27,.08), 0 30px 60px -34px rgba(58,58,184,.55); transition: transform .2s; }
.tl-card:hover { transform: translateY(-2px); }
.tl-card .k { grid-column: 1 / -1; font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #a5a5ff; }
.tl-card .t { grid-column: 1; font-size: 21px; font-weight: 700; letter-spacing: -.018em; line-height: 1.3; color: #fff; }
.tl-card .d { grid-column: 1; font-size: 15px; color: #b9b9cc; line-height: 1.55; max-width: 60ch; }
.tl-card .go { grid-column: 2; grid-row: 2 / span 2; align-self: center; white-space: nowrap; font-size: 15px; font-weight: 600; color: #fff; padding: 11px 18px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.tl-card:hover .go { background: rgba(255,255,255,.14); }
.next.reads ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.next.reads li { border-bottom: 1px solid var(--line); }
.next.reads li:nth-child(3n+1) { border-left: 0; }
.next.reads li:nth-child(3n+1) a { padding-left: 0; }
@media (max-width: 760px) {
  .tl-card { grid-template-columns: 1fr; padding: 22px; }
  .tl-card .go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
  .next.reads ol { grid-template-columns: 1fr; }
  .next.reads li { border-bottom: 0; }
}
.tl-more { max-width: 880px; margin-top: 14px; font-size: 14.5px; color: var(--ink-3); line-height: 1.6; }
.tl-more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tl-more a:hover { color: var(--violet-ink); }
.next.hub-lands ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.next.hub-lands li { border-bottom: 1px solid var(--line); }
.next.hub-lands li:nth-child(4n+1) { border-left: 0; }
.next.hub-lands li:nth-child(4n+1) a { padding-left: 0; }
.next.hub-lands li:nth-child(n+2):not(:nth-child(4n+1)) a { padding-left: 22px; }
@media (max-width: 760px) { .next.hub-lands ol { grid-template-columns: 1fr 1fr; } .next.hub-lands li:nth-child(odd) { border-left: 0; } .next.hub-lands li:nth-child(even) { border-left: 1px solid var(--line); border-top: 0; } .next.hub-lands li a { padding-left: 0 !important; } .next.hub-lands li:nth-child(even) a { padding-left: 14px !important; } .next.hub-lands .t { font-size: 15.5px; } }

/* 25.10: в статье (.prose ol: одна колонка) лесенка Uno AI ломалась в столбик, кнопка наезжала на «Unlimited» */
.prose .ai-card .ai-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 230px; }
.prose .ai-card .ai-ladder li { height: 100%; margin: 0; }
@media (max-width: 860px) { .prose .ai-card .ai-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; } .prose .ai-card .ai-ladder li { height: 150px; } }