/* armor.tel on the taste-skill system (/kit): the fonts, the dealt palette and type (start.mjs css --page software
   --palette blue-black-cornflower --type manrope --radius round, kept as printed), then page CSS: only what sits inside a
   visual and the kit lacks (the hero window, the app frame, the small app screens), the sign-in line and the
   language switcher. */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-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; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-cyrillic-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --p-bg: #0a0d14;
  --p-surface: #131824;
  --p-ink: #e9edf3;
  --p-muted: #8891a1;
  --p-accent: #5ab9fc;
  --p-accent-ink: #0a0d14;
  --p-action: #5ab9fc;
  --p-action-ink: #0a0d14;
  --p-inv-bg: #e9edf3;
  --p-inv-surface: #d7dbe1;
  --p-inv-ink: #0a0d14;
  --p-inv-muted: #54575f;
  --p-inv-accent: #0a0d14;
  --p-inv-accent-ink: #e9edf3;
  --p-inv-action: #0a0d14;
  --p-inv-action-ink: #e9edf3;
  --font-display: "Manrope", system-ui, sans-serif;
  --font-text: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.045em;
  --ly-scale: 0.97;
}

/* ---------- shell ---------- */
.logo-mark { width: 22px; height: 22px; flex: none; color: var(--accent); margin-right: var(--s-2); }
.footer .nav__logo .logo-mark { width: 0.8em; height: 0.8em; vertical-align: -0.04em; }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { width: auto; height: auto; clip-path: none; padding: var(--s-2) var(--s-3); background: var(--bg); z-index: 20; }
.nav__btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.lead-grey { font-size: var(--t-lead); line-height: 1.5; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.lang-switch { position: relative; font-size: var(--t-small); }
.lang-switch summary { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; list-style: none; color: var(--muted); }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary svg { width: 16px; height: 16px; }
.lang-switch ul { position: absolute; right: 0; bottom: calc(100% + var(--s-2)); margin: 0; padding: var(--s-2); list-style: none; min-width: 180px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); z-index: 5; }
.lang-switch li a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.lang-switch li a[aria-current] { font-weight: 600; }
.lang-switch li a:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }

/* sign-in by phone under the close's button (cabinet.js) */
.phone-login { margin-top: var(--s-5); max-width: 62ch; }
.phone-login-line { margin: 0; color: var(--muted); }
.phone-login-title { margin-right: var(--s-1); }
.link-btn { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.link-btn:hover { text-decoration-color: currentColor; }
.link-btn:disabled { color: var(--muted); cursor: default; }
.btn-text { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.phone-login-wait { margin-top: var(--s-4); display: grid; gap: var(--s-3); justify-items: start; }
.phone-login .note, .phone-login .fine { margin: var(--s-3) 0 0; color: var(--muted); }
.phone-login .qr { width: 168px; padding: var(--s-2); background: #fff; border-radius: var(--r-sm); }
.phone-login .qr svg { display: block; width: 100%; height: auto; }
.phone-login figure { margin: 0; display: grid; gap: var(--s-2); }
.phone-login figcaption { color: var(--muted); font-size: var(--t-small); }

.alert[role="alert"]:not([hidden]) { position: fixed; z-index: 30; left: 50%; top: calc(var(--nav) + var(--s-4)); transform: translateX(-50%);
  display: flex; gap: var(--s-4); align-items: center; max-width: min(640px, calc(100% - 2 * var(--s-5))); padding: var(--s-3) var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.alert p { margin: 0; }

/* ---------- hero window: the assistant's calls beside the call it is taking (the kit's demo pieces, rewritten) ---------- */
.d-win { background: #111722; color: #e9edf3; border-radius: 14px; overflow: hidden; font: 400 14px/1.4 var(--font-text); text-align: left;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 70px -30px rgb(0 0 0 / .8); }
.d-win__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / .07); font-size: 13px; color: #8891a1; }
.d-win__bar b { color: #e9edf3; font-weight: 500; }
.d-win__bar .sp { flex: 1; }
.d-win__dots { display: flex; gap: 6px; } .d-win__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a3242; }
.d-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.d-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.d-win__body { display: grid; grid-template-columns: 250px 1fr; min-height: 420px; }
.inbox { border-right: 1px solid rgb(255 255 255 / .07); padding: 10px; display: grid; align-content: start; gap: 2px; }
.inbox .q { height: 34px; margin-bottom: 6px; border-radius: 9px; background: rgb(255 255 255 / .06); display: flex; align-items: center; padding: 0 10px; color: #7d8698; font-size: 13px; }
.inbox .t { display: grid; grid-template-columns: 30px 1fr auto; gap: 1px 10px; padding: 9px 8px; border-radius: 9px; font-size: 13px; }
.inbox .t.is-on { background: rgb(255 255 255 / .07); }
.inbox .t i { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--font-text); font-style: normal; color: #0a0d14; background: #5ab9fc; }
.inbox .t i[data-tone="2"] { background: #f3d38b; } .inbox .t i[data-tone="3"] { background: #a9d6f0; }
.inbox .t i[data-tone="4"] { background: #f0b9a9; } .inbox .t i[data-tone="5"] { background: #d8d2a6; }
.inbox .t b { font-weight: 500; color: #e9edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox .t time { color: #7d8698; font-size: 13px; }
.inbox .t span { grid-column: 2 / -1; color: #8891a1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo { display: grid; min-width: 0; align-content: start; }
.d-chat { display: grid; gap: 8px; align-content: start; padding: 14px 18px; font-size: 14px; }
.d-meta { font-size: 13px; color: #7d8698; }
.d-msg { max-width: 86%; padding: 9px 14px; border-radius: 16px; line-height: 1.45; }
.d-msg--bot { background: #1c2433; color: #e9edf3; border-bottom-left-radius: 6px; }
.d-msg--me { justify-self: end; background: #e9edf3; color: #0a0d14; border-bottom-right-radius: 6px; }
.d-tool { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8891a1; }
.d-tool::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; }
.acts span { height: 30px; padding: 0 12px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; background: var(--accent); color: #0a0d14; }
.acts span + span { background: rgb(255 255 255 / .08); color: #e9edf3; }
/* ---------- the Mac app window (hero and reports): drawn after the real Armor for Mac in dark mode ---------- */
.mw { --mw-bg: #1e1e1e; --mw-side: #262626; --mw-sel: #3a3a3a; --mw-line: #333; --mw-ink: #f5f5f7; --mw-dim: #98989d;
  --mw-accent: #7b6cf0; --mw-bubble: #3a3a3c;
  display: grid; grid-template-columns: 196px 280px minmax(0, 1fr); height: 460px; width: min(1080px, 100%); margin-inline: auto;
  background: var(--mw-bg); color: var(--mw-ink); border-radius: 12px; overflow: hidden; text-align: left;
  font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-text);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 30px 70px -30px rgb(0 0 0 / .85); }
.mw svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mw-side { background: var(--mw-side); border-right: 1px solid var(--mw-line); padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mw-lights { display: flex; gap: 8px; padding: 2px 4px 16px; }
.mw-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.mw-lights i:nth-child(2) { background: #febc2e; } .mw-lights i:nth-child(3) { background: #28c840; }
.mw-nav { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; white-space: nowrap; }
.mw-nav svg { color: var(--mw-dim); }
.mw-nav.is-on { background: var(--mw-sel); } .mw-nav.is-on svg { color: var(--mw-ink); }
.mw-lab { margin: auto 8px 4px; padding-top: 10px; font-size: 11px; font-weight: 600; color: var(--mw-dim); }
.mw-line { display: flex; align-items: center; gap: 9px; padding: 5px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mw-line__ic { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(#8f82f5, #6556e0); flex: none; }
.mw-line__ic--p { background: #2c2c2e; box-shadow: inset 0 0 0 1.5px #8f82f5; }
.mw-list { border-right: 1px solid var(--mw-line); min-width: 0; overflow: hidden; padding: 0 8px; }
.mw-tb { height: 46px; display: flex; align-items: center; padding: 0 8px; font-size: 15px; }
.mw-tb b { font-weight: 600; }
.mw-tb--end { justify-content: flex-end; border-bottom: 1px solid var(--mw-line); padding: 0 14px; }
.mw-search { display: flex; align-items: center; gap: 6px; width: min(240px, 100%); height: 26px; padding: 0 9px; border-radius: 7px; background: #2c2c2e; color: var(--mw-dim); font-size: 13px; }
.mw-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; padding: 8px; border-radius: 8px; }
.mw-row.is-on { background: var(--mw-sel); }
.mw-row b { grid-column: 2; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-row time { grid-column: 3; color: var(--mw-dim); font-size: 12px; }
.mw-row__sub { grid-column: 2; color: var(--mw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-row .mw-av { grid-row: 1 / span 2; }
.mw-tag { grid-column: 3; grid-row: 2; justify-self: end; font: 700 10.5px/1 inherit; font-style: normal; padding: 3px 7px; border-radius: 99px; }
.mw-tag--urgent { background: #ff453a; color: #fff; }
.mw-tag--result { background: rgb(48 209 88 / .16); color: #30d158; }
.mw-av { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgb(152 152 157 / .22); color: var(--mw-dim); font-weight: 600; font-size: 15px; }
.mw-av.is-new::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--mw-accent); box-shadow: 0 0 0 2px var(--mw-sel); }
.mw-av--big { width: 44px; height: 44px; font-size: 18px; }
.mw-detail { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.mw-peer { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--mw-line); }
.mw-peer b { display: block; font-size: 16px; font-weight: 600; }
.mw-peer small { color: var(--mw-dim); font-size: 12px; }
.mw-chat { display: grid; gap: 6px; align-content: start; padding: 14px 18px; }
.mw-msg { max-width: 82%; justify-self: start; padding: 7px 12px; border-radius: 16px; background: var(--mw-bubble); line-height: 1.4; }
.mw-msg--me { justify-self: end; background: var(--mw-accent); color: #fff; }
.mw-tool { display: flex; align-items: center; gap: 8px; color: var(--mw-dim); font-size: 12px; padding: 2px 4px; }
.mw-tool::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.mw-acts { justify-self: end; display: flex; gap: 6px; flex-wrap: wrap; }
.mw-acts span { padding: 5px 11px; border-radius: 99px; background: #2c2c2e; color: var(--mw-ink); font-size: 12px; font-weight: 500; }
.mw-acts span:first-child { background: rgb(123 108 240 / .22); color: #b3a9ff; }
.mw-card { margin: 16px 18px; padding: 14px 16px; border-radius: 12px; background: #262626; box-shadow: inset 0 0 0 1px var(--mw-line); display: grid; gap: 10px; justify-items: start; }
.mw-card__head { display: flex; align-items: center; gap: 8px; width: 100%; color: var(--mw-accent); }
.mw-card__head b { color: var(--mw-ink); font-weight: 600; }
.mw-card__head span { margin-left: auto; color: var(--mw-dim); font-size: 12px; }
.mw-card p { margin: 0; }
.mw-card__quote { font-style: italic; color: #d1d1d6; }
.mw-player { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 10px; background: #1e1e1e; }
.mw-play { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mw-accent); color: #fff; }
.mw-play svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.mw-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 18px; }
.mw-wave i { width: 3px; height: calc(var(--h) * 1px); border-radius: 2px; background: #5a5a5e; }
.mw-wave i:nth-child(-n+7) { background: var(--mw-accent); }
.mw-dur { color: var(--mw-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.mw-disclosure { color: var(--mw-ink); font-size: 13px; }
.mw-disclosure::before { content: "›"; display: inline-block; margin-right: 8px; color: var(--mw-dim); }
.mw-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: #3a3a3c; font-size: 12px; font-weight: 500; }
.mw-btn svg { width: 12px; height: 12px; }
.mw--report { margin-top: var(--s-7); height: 500px; }
@media (max-width: 1023px) { .mw { grid-template-columns: 250px minmax(0, 1fr); } .mw-side { display: none; } }
@media (max-width: 639px) { .mw { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 380px; } .mw-list { display: none; } .mw-tb--end { display: none; } }
/* the frame's ground when WebGL is not there: a night sky with a green hem */
.hero__window { background:
  radial-gradient(120% 70% at 30% 120%, #2f5f9a 0 30%, transparent 62%),
  radial-gradient(90% 60% at 80% 110%, #24477a 0 25%, transparent 60%),
  linear-gradient(#070a12, #0f1d36 70%, #1a3358); }
@media (max-width: 639px) {
  .d-win__body { grid-template-columns: 1fr; }
  .inbox { display: none; }
  .d-win__bar .sp ~ span { display: none; }
}

/* ---------- app-frame (sections-library.md, app-frame: the recipe's page CSS) ---------- */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); overflow: hidden; }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* ---------- splits: facts as plain lines ---------- */
.split-copy > * + * { margin-top: var(--s-5); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.facts li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); }
.facts li::before { content: ""; width: 8px; height: 8px; margin-top: 0.55em; border-radius: 50%; background: var(--accent); }

/* ---------- the small app screens in the cards and the number split ---------- */
.mini-code, .mini-tr, .mini-fax, .mini-pick { padding-bottom: var(--s-5); }
.mini-code .ui-head svg, .mini-tr .ui-head svg, .mini-fax .ui-head svg { width: 16px; height: 16px; color: var(--u-accent-text); }
.mini-code__label { margin: var(--s-5) var(--s-5) 0; font-size: 13px; color: var(--u-muted); }
.mini-code__digits { display: flex; gap: var(--s-3); margin: var(--s-3) var(--s-5) 0; }
.mini-code__digits span { display: grid; place-items: center; width: 52px; height: 60px; border-radius: var(--u-r2); background: var(--u-fill-2);
  font: 600 28px/1 var(--font-mono); color: var(--u-ink); }
.mini-code__note { margin: var(--s-4) var(--s-5) 0; font-size: 14px; color: var(--u-text-2); }
.mini-tr__line { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-3); margin: var(--s-4) var(--s-5) 0; font-size: 14px; }
.mini-tr__line b { font-weight: 600; color: var(--u-muted); }
.mini-tr__line:nth-of-type(2) b { color: var(--u-accent-text); }
.mini-tr__sum { margin: var(--s-5) var(--s-5) 0; padding: var(--s-4); border-radius: var(--u-r2); background: var(--u-tint); display: grid; gap: var(--s-1); font-size: 14px; }
.mini-tr__sum b { font-weight: 600; }
.mini-fax__pages { display: flex; gap: var(--s-3); margin: var(--s-5) var(--s-5) 0; }
.mini-fax__pages i { flex: 1; aspect-ratio: 210 / 297; border-radius: 6px; background:
  repeating-linear-gradient(#0000 0 10px, color-mix(in oklab, var(--u-ink) 16%, transparent) 10px 12px) 14px 18px / calc(100% - 28px) 60% no-repeat,
  #fbfbf8; box-shadow: inset 0 0 0 1px var(--u-line); }
.mini-fax__pages i + i { opacity: .85; }
.mini-fax__btn { display: inline-flex; align-items: center; height: 32px; margin: var(--s-4) var(--s-5) 0; padding: 0 14px; border-radius: 99px;
  background: var(--u-accent); color: var(--u-accent-ink); font-size: 13px; font-weight: 500; }
.mini-pick__ok { color: var(--u-accent-text); }
.mini-pick__search { display: flex; justify-content: space-between; align-items: center; height: 40px; margin: var(--s-4) var(--s-5) 0; padding: 0 var(--s-4);
  border-radius: var(--u-r2); background: var(--u-fill-2); color: var(--u-muted); font-size: 14px; }
.mini-pick__search b { font: 600 15px/1 var(--font-mono); color: var(--u-ink); }
.mini-pick__list { list-style: none; margin: var(--s-3) var(--s-3) 0; padding: 0; display: grid; }
.mini-pick__list li { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 var(--s-3); border-radius: var(--u-r2); }
.mini-pick__list li + li { box-shadow: inset 0 1px 0 var(--u-line); }
.mini-pick__list li.is-on { background: var(--u-tint); box-shadow: none; }
.mini-pick__list .mono { font-size: 16px; font-weight: 500; }
.mini-pick__list em { font-style: normal; font-size: 13px; color: var(--u-muted); }
.mini-pick__take { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--u-fill-2); font-size: 13px; font-weight: 500; }
.mini-pick__list li.is-on .mini-pick__take { background: var(--u-accent); color: var(--u-accent-ink); }

/* ---------- the hub band on the inverse ground ---------- */
.hub-panel { margin-top: var(--s-7); border-radius: var(--r-lg); background: var(--surface); }
.hub-panel .dg { width: 100%; height: 100%; }

/* one card group height (features-2x2) */
#app .panel { --p-h: 300px; }
@media (max-width: 639px) {
  #app { --hm: 3; }
  #app .panel { --p-h: 240px; }
  #prices { --hm: 2; }
}
.hero__lead { color: color-mix(in oklab, var(--ink) 84%, var(--bg)); }
.app .ui-win__search { min-width: max-content; }
@media (max-width: 639px) { footer.closing { --hm: 2; } }

/* ---------- text pages (Site doc): one long column under the nav, sections parted by space ---------- */
main.doc { padding: calc(var(--nav) + var(--s-8)) 0 var(--s-9); }
.doc-wrap { display: grid; gap: var(--s-9); }
.doc-wrap > section { max-width: 820px; }
.doc-wrap > section.features { max-width: none; }
.doc-wrap h1 { font: var(--display-weight) var(--t-h1)/1.05 var(--font-display); letter-spacing: var(--display-tracking-xl); margin: 0; max-width: 16ch; }
.doc-wrap h2 { margin: 0 0 var(--s-5); }
.doc-wrap h3 { margin: 0 0 var(--s-2); font: 600 var(--t-card)/1.3 var(--font-text); }
.doc-wrap p, .doc-wrap li { font-size: 18px; line-height: 1.65; color: color-mix(in oklab, var(--ink) 86%, var(--bg)); }
.doc-wrap p { margin: 0 0 var(--s-4); max-width: 62ch; }
.doc-wrap .lede { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); margin-top: var(--s-5); }
.doc-wrap .fine, .doc-wrap .updated, .doc-wrap .translation-note { font-size: var(--t-small); color: var(--muted); }
.doc-wrap a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.doc-wrap a:not(.btn):hover { text-decoration-color: var(--accent); }
.doc-wrap strong { color: var(--ink); font-weight: 650; }
.doc-wrap ul:not(.steps):not(.checks), .doc-wrap ol:not(.steps) { padding-left: 1.2em; }
.doc-intro .btn { margin-top: var(--s-3); }
.doc-wrap .facts { display: grid; gap: var(--s-3); }
@media (min-width: 1024px) { .doc-wrap .facts { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-7); } .doc-wrap > section:has(.facts) { max-width: none; } }
.doc-wrap .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
.doc-wrap .steps li { counter-increment: step; position: relative; padding: var(--s-8) var(--s-6) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.doc-wrap .steps li::before { content: counter(step); position: absolute; left: var(--s-6); top: var(--s-5); font: 600 28px/1 var(--font-display); color: var(--accent); }
.doc-wrap .steps p { margin: 0; font-size: 16px; }
@media (min-width: 1024px) { .doc-wrap .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .doc-wrap > section:has(.steps) { max-width: none; } }
.doc-wrap .callout { max-width: none; padding: var(--s-7); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.doc-wrap .callout .steps li { background: var(--bg); }
.doc-wrap .steps + .facts, .doc-wrap .facts + .steps { margin-top: var(--s-5); }
.doc-wrap .code { margin: var(--s-4) 0; padding: var(--s-5); overflow-x: auto; background: #070a10; border: 1px solid var(--line); border-radius: var(--r-md); font: 14px/1.55 var(--font-mono); color: #dde3ec; }
.doc-wrap .addr { font-family: var(--font-mono); padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-sm); display: inline-block; }
.doc-wrap .matrix { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.doc-wrap .matrix th { text-align: left; font-size: var(--t-small); font-weight: 500; color: var(--muted); padding: 0 var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.doc-wrap .matrix td { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-wrap .matrix td:first-child, .doc-wrap .matrix td:nth-child(2) { font-weight: 600; }
.doc-wrap > section:has(.matrix) { max-width: none; }
@media (max-width: 639px) {
  .doc-wrap .matrix thead { display: none; }
  .doc-wrap .matrix, .doc-wrap .matrix tbody, .doc-wrap .matrix tr, .doc-wrap .matrix td { display: block; }
  .doc-wrap .matrix tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .doc-wrap .matrix td { border: 0; padding: 2px 0; }
}
/* app features: the words beside the app's own screenshot in a phone frame on the lit ground */
.feature { display: grid; gap: var(--s-6); padding-block: var(--s-7); }
.feature h3 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.feature .shot { margin: 0; display: grid; place-items: center; padding: var(--s-7) var(--s-5); border-radius: var(--r-lg); background: var(--ground-bg);
  background-image: radial-gradient(70% 90% at 12% 0%, color-mix(in oklab, var(--ground-surface) 92%, white), transparent 70%), radial-gradient(60% 80% at 100% 100%, color-mix(in oklab, var(--ground-accent) 34%, var(--ground-bg)), transparent 72%); }
.phone-frame { width: min(300px, 80%); aspect-ratio: 390 / 844; padding: 8px; border-radius: 40px; background: #0b0f0b; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.phone-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; }
@media (min-width: 1024px) { .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; } }
.doc-wrap .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.doc-wrap .checks li { display: block; position: relative; padding-left: 32px; }
.doc-wrap .checks li::before { position: absolute; left: 0; top: 0.3em; }
.doc-wrap { grid-template-columns: minmax(0, 1fr); }
.doc-wrap > section { min-width: 0; }
.doc-wrap .addr { max-width: 100%; overflow-wrap: anywhere; }

/* the sign-in handoff (cabinet.js renderHandoff): the provider's link and its QR code */
.handoff { display: grid; gap: var(--s-4); justify-items: start; }
.handoff .btn { width: 100%; max-width: 360px; }
.btn.btn-primary { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.qr { width: 132px; padding: 10px; background: #fff; border-radius: var(--r-md); line-height: 0; }
.qr svg { width: 100%; height: auto; display: block; }
.qr svg path[fill] { fill: #ffffff; }
.qr svg path[stroke] { stroke: #16202b; }
.handoff figure { margin: 0; display: flex; align-items: center; gap: var(--s-3); }
.handoff figcaption { font-size: var(--t-small); line-height: 1.45; color: var(--muted); max-width: 15em; }
@media (hover: hover) and (pointer: fine) {
  .handoff figure { order: -1; flex-direction: column; align-items: flex-start; }
  .handoff .qr { width: 232px; padding: 14px; }
  .handoff figcaption { display: none; }
}

/* text stacks: spacing by gap, so no margin rule of the kit or of a list can collapse it */
.split-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.split-copy > * { margin: 0 !important; }
.split-copy > h2 { margin-bottom: var(--s-1) !important; }
.split-copy > .facts { gap: var(--s-3); margin-block: var(--s-2) !important; }
#prices .stack-4 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
#prices .stack-4 > * { margin: 0; }
#prices .stack-4 > h2 { margin-bottom: var(--s-2); }
.card--plan > * { margin: 0; }
.card--plan .price { margin-block: var(--s-2); }
.lead-grey .link { display: inline-block; margin-top: var(--s-3); }
.footer .closing__cta .section-head p { margin-top: var(--s-3); }
/* sign-in under the hero's buttons, centred with them */
.hero__c .phone-login { margin: var(--s-4) auto 0; text-align: center; font-size: var(--t-small); }
.hero__c .phone-login-wait, .hero__c .handoff { justify-items: center; }
.hero__c .handoff figure { align-items: center; }

/* the sign-in screen: a cabinet address without a session shows the hero with the sign-in alone */
.signin-title, .signin-lead { display: none; }
html.signin #about > section:not(#login) { display: none; }
html.signin #login :is(.pill, h1, .hero__lead, .btn-row, .hero__window) { display: none; }
html.signin #login .hero__c { padding-top: var(--s-9); }
html.signin .signin-title { display: block; margin: 0; font: var(--display-weight) clamp(36px, 5vw, 52px)/1.05 var(--font-display); letter-spacing: var(--display-tracking-xl); }
html.signin #login .phone-login { margin: var(--s-6) auto 0; width: min(100%, 360px); font-size: var(--t-body); }
html.signin .signin-lead { display: block; margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--t-lead); }
html.signin #login .phone-login-title, html.signin .phone-login-dot { display: none; }
/* the buttons stacked full width; the list's words between them ("или", ",") are not shown */
html.signin #login .phone-login-line { display: grid; gap: var(--s-3); font-size: 0; }
html.signin #login .phone-login-row { display: grid; gap: var(--s-3); }
html.signin #login .phone-login-line .link-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px;
  padding: 0 var(--s-5); border-radius: 14px; font-size: var(--t-body); font-weight: 600; text-decoration: none;
  background: var(--action); color: var(--action-ink); transition: filter .15s; }
html.signin #login .phone-login-line .link-btn:hover { filter: brightness(1.08); }
html.signin #login .phone-login-line .link-btn:disabled { opacity: .55; filter: none; }
html.signin #login .link-btn::before { content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
html.signin #login .link-btn:not([data-provider])::before, html.signin #login .phone-login-persona .link-btn::before { display: none; }
html.signin #login .phone-login-line [data-provider="telegram"] { background: #2aabee; color: #fff;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 4.1 2.9 11.3c-1.3.5-1.3 1.2-.2 1.5l4.7 1.5 1.8 5.6c.2.6.4.8.9.8.4 0 .6-.2.9-.4l2.3-2.2 4.7 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.3-.5-1.9-1.4-1.5ZM8.9 14.7l9.3-5.9c.4-.3.8-.1.5.2l-7.6 6.9-.3 3.3-1.9-4.5Z'/%3E%3C/svg%3E"); }
html.signin #login .phone-login-line [data-provider="max"] { background: linear-gradient(110deg, #44ccff, #5533ee 66%, #9933dd); color: #fff;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 100 800 800'%3E%3Cpath fill-rule='evenodd' d='M508.211 878.328c-75.007 0-109.864-10.95-170.453-54.75-38.325 49.275-159.686 87.783-164.979 21.9 0-49.456-10.95-91.248-23.36-136.873-14.782-56.21-31.572-118.807-31.572-209.508 0-216.626 177.754-379.597 388.357-379.597 210.785 0 375.947 171.001 375.947 381.604.707 207.346-166.595 376.118-373.94 377.224m3.103-571.585c-102.564-5.292-182.499 65.7-200.201 177.024-14.6 92.162 11.315 204.398 33.397 210.238 10.585 2.555 37.23-18.98 53.837-35.587a189.8 189.8 0 0 0 92.71 33.032c106.273 5.112 197.08-75.794 204.215-181.95 4.154-106.382-77.67-196.486-183.958-202.574Z'/%3E%3C/svg%3E"); }
html.signin #login .phone-login-line [data-provider="vk"] { background: #0077ff; color: #fff;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8 17.5C6.7 17.5 3.2 13.3 3 6.5h3c.1 5 2.4 7.1 4.1 7.5V6.5H13v4.3c1.7-.2 3.5-2.2 4.1-4.3H20c-.5 2.6-2.4 4.6-3.8 5.4 1.4.7 3.6 2.4 4.4 5.6h-3.1c-.7-2.1-2.4-3.8-4.5-4v4h-.2Z'/%3E%3C/svg%3E"); }
html.signin #login .phone-login-line [data-provider="whatsapp"] { background: #25d366; color: #fff;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a9.4 9.4 0 0 0-8.1 14.2L2.6 21.5l4.9-1.3A9.4 9.4 0 1 0 12 2.5Zm4.6 13.2c-.2.6-1.1 1.1-1.6 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.5-4-.1-.2-1-1.4-1-2.6s.6-1.9.9-2.1c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.1.1.3 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.7 1.1 1.4 1.8 1 .9 1.8 1.2 2.1 1.3.3.1.4.1.6-.1l.8-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.1.1.6-.1 1.3Z'/%3E%3C/svg%3E"); }
/* Persona under an "or" divider, as a quiet outlined button */
html.signin #login .phone-login-persona { display: grid; gap: var(--s-3); }
html.signin #login .phone-login-persona::before { content: attr(data-or); display: flex; align-items: center; gap: var(--s-3);
  color: var(--muted); font-size: var(--t-small); margin-top: var(--s-2);
  background: linear-gradient(var(--line, rgba(127,127,127,.3)), var(--line, rgba(127,127,127,.3))) left center / calc(50% - 2em) 1px no-repeat,
              linear-gradient(var(--line, rgba(127,127,127,.3)), var(--line, rgba(127,127,127,.3))) right center / calc(50% - 2em) 1px no-repeat;
  justify-content: center; }
html.signin #login .phone-login-persona .link-btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line, rgba(127,127,127,.35)); }
html.signin #login .phone-login-persona .link-btn:hover { background: rgba(127,127,127,.08); filter: none; }