/* ==========================================================================
   STEALIX — public site layout

   Requires, in this order:
     shared/stealix-tokens.css
     shared/stealix-base.css
     site/site.css              <- this file

   Only what the marketing and account pages have that /admin does not: the
   page shell, the sticky header, the footer, hero and section rhythm. Buttons,
   inputs, cards, badges, modals and toasts come from the shared layer — a
   component defined here that also exists in /admin is a bug.

   Light-first: the light palette is the design. Dark blocks (the footer, an
   ink card) are an accent, not a theme, and there is no dark-mode override.

   Declares no literal colour: every value is a token.
   ========================================================================== */

:root {
  /* --- site layout ----------------------------------------------------- */
  --site-max:      1120px;
  --site-narrow:   900px;   /* reading width for long-form text            */
  --site-auth:     520px;   /* one column of form, nothing beside it       */
  --site-header-h: 72px;
  --site-gutter:   var(--s-6);

  /* --- long-form reading ------------------------------------------------
     Deliberately larger and looser than the 14px/20px app scale: a legal
     document is read, not scanned. */
  --fs-read: 16px;
  --lh-read: 1.7;
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
}

.container {
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-gutter);
}
.container--narrow { max-width: var(--site-narrow); }
.container--auth { max-width: var(--site-auth); }

.site-main { flex: 1; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface-1);
  border-bottom: var(--border);
}

.site-header__inner {
  min-height: var(--site-header-h);
  display: flex; align-items: center; gap: var(--s-6);
}

/* --------------------------------------------------------------------------
   The logo

   R9.2 composed it here, out of an SVG tile and live HTML text. It read as
   an icon beside a nav label, because that is what it was: the wordmark was
   set in whatever font the visitor had installed, at the same optical
   weight as the links next to it.

   The lockup is now one drawn object in one file —
   static/shared/brand/stealix-logo.svg, mark and letters both as paths. So
   there is nothing to compose and nothing to keep in step: the CSS gives it
   a height and lets the aspect ratio do the rest.

   The footer and the admin sidebar are ink grounds, where an ink wordmark
   would be invisible, so they take the mark on its own.
   -------------------------------------------------------------------------- */

.site-brand {
  --brand-logo-h: 34px;
  display: inline-flex; align-items: center;
  text-decoration: none; flex: none;
}
.site-brand__logo {
  height: var(--brand-logo-h); width: auto; flex: none;
  display: block;
}
/* the mark on its own, where the full lockup cannot go */
.site-brand__mark {
  width: var(--brand-logo-h); height: var(--brand-logo-h); flex: none;
  display: block;
}
.site-brand--footer { --brand-logo-h: 32px; }

.site-nav {
  display: flex; align-items: center; gap: var(--s-2);
  margin-left: auto;
}

.site-nav__link {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--ink-60); text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.site-nav__link:hover { background: var(--surface-2); color: var(--ink); }
.site-nav__link[aria-current="page"] { color: var(--ink); font-weight: var(--fw-medium); }

/* The admin entry point. Rendered only for an account that already holds the
   admin permission — a visitor without it never receives this markup, and
   /admin re-checks the permission regardless of what the page shows. */
.site-nav__admin { margin-left: var(--s-2); }

.site-burger { display: none; }

/* ==========================================================================
   Sections
   ========================================================================== */

.site-section { padding: var(--s-16) 0; }
.site-section--tight { padding: var(--s-12) 0; }
.site-section--muted { background: var(--surface-2); }

.site-section__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
  margin-bottom: var(--s-8);
}
.site-section__text { flex: 1; min-width: 280px; }
.site-section__sub { color: var(--ink-60); margin-top: var(--s-3); }

.site-eyebrow {
  display: inline-flex; align-items: center;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--lime); color: var(--ink);
  font-size: var(--fs-label); line-height: var(--lh-label);
  font-weight: var(--fw-medium); letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.site-hero { padding: var(--s-16) 0 var(--s-12); }
.site-hero__title { max-width: 18ch; }
.site-hero__text {
  color: var(--ink-60);
  max-width: 56ch;
  margin-top: var(--s-6);
  font-size: var(--fs-h3); line-height: var(--lh-h3);
}
.site-hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }

/* ==========================================================================
   Support hub (/help)
   A whole card is the link, so the tap target is the card and not just the
   words at the bottom of it.
   ========================================================================== */

.support-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-3);
  color: inherit; text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.support-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hard); }
.support-card:active { transform: translateY(0); box-shadow: 0 1px 0 0 var(--ink); }

.support-card__icon {
  width: var(--tap-min); height: var(--tap-min); flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink);
  border: var(--border); border-radius: var(--r-md);
}
.support-card--primary .support-card__icon { background: var(--lime); }

.support-card__text { color: var(--ink-60); flex: 1; }

.support-card__cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-1);
  font-weight: var(--fw-medium);
}
.support-card__cta .icon { flex: none; }

/* ==========================================================================
   Document list
   ========================================================================== */

.doc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

.doc-link {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-min);
  padding: var(--s-4);
  border: var(--border); border-radius: var(--r-md);
  background: var(--surface-1);
  color: inherit; text-decoration: none;
  transition: background var(--t-fast);
}
.doc-link:hover { background: var(--lime); }
.doc-link .icon { flex: none; color: var(--ink-60); }
.doc-link:hover .icon { color: var(--ink); }
.doc-link__label { flex: 1; min-width: 0; font-weight: var(--fw-medium); }
.doc-link__go { margin-left: auto; }

/* ==========================================================================
   Auth screens (sign in, verification code, Telegram guest)
   One column, one card, centred in the viewport. Nothing competes with the
   field the visitor has to fill in.
   ========================================================================== */

.page-auth .site-main {
  background: var(--surface-2);
  display: flex;
  align-items: center;
}
.page-auth .site-main > .site-section { width: 100%; }
.page-auth .site-footer { margin-top: 0; }

.auth-card { padding: var(--s-8); }

.auth__title { margin-bottom: var(--s-3); }
.auth__lead { color: var(--ink-60); }
.auth__lead + .auth__lead { margin-top: var(--s-2); }
.auth__lead--muted { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-40); }

.auth__fallback { margin-top: var(--s-3); }

.auth-form {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-top: var(--s-6);
}
.auth-form .btn { width: 100%; }
.auth-form .input { height: var(--tap-min); }

/* The code is read off a screen and typed in one go: give it room. */
.auth-code {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  letter-spacing: .18em;
  text-align: center;
}

.auth-dest {
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: var(--border-soft); border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--ink-60);
}
.auth-dest strong { color: var(--ink); font-weight: var(--fw-medium); }

.auth-card .notice { margin-top: var(--s-4); margin-bottom: 0; }

.auth-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4);
}
.auth-actions form { margin: 0; }

.auth-telegram {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6);
  padding: var(--s-6) var(--s-4);
  border: var(--border-soft); border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
}
.auth-telegram__widget { min-height: 40px; display: grid; place-items: center; }
.auth-hint { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-40); margin: 0; }

.auth-legal {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: var(--border-soft);
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.auth-legal a { color: var(--ink-60); text-decoration: none; }
.auth-legal a:hover { color: var(--ink); text-decoration: underline; }

/* ==========================================================================
   Legal documents (/terms, /privacy, /rules, /refund)
   Calmer than the rest of the site on purpose: one white sheet on the grey
   canvas, no cards inside it, lime only on the active tab and on links.
   ========================================================================== */

/* The document sheet sits on the grey canvas all the way down, so the footer's
   usual breathing room would show as a white band between the two. */
.page-legal .site-footer { margin-top: 0; }

.legal-crumbs {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--ink-40);
}
.legal-crumbs a { color: var(--ink-60); text-decoration: none; }
.legal-crumbs a:hover { color: var(--ink); }
.legal-crumbs .icon { flex: none; }

.legal-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.legal-nav__item {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 var(--s-4);
  border: var(--border); border-radius: var(--r-pill);
  background: var(--surface-1); color: var(--ink-60);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.legal-nav__item:hover { background: var(--surface-2); color: var(--ink); }
.legal-nav__item[aria-current="page"] {
  background: var(--lime); color: var(--ink);
  font-weight: var(--fw-medium);
}

.legal-card { padding: var(--s-8); }

.legal { font-size: var(--fs-read); line-height: var(--lh-read); }
.legal__title { margin-bottom: var(--s-6); }
.legal__h2 { margin: var(--s-8) 0 var(--s-3); }
.legal p { margin: 0 0 var(--s-4); }
.legal ul { margin: 0 0 var(--s-4); padding-left: 1.3em; }
.legal li { margin: 0 0 var(--s-2); }
.legal li::marker { color: var(--ink-40); }
.legal strong { font-weight: var(--fw-medium); }
.legal > *:last-child { margin-bottom: 0; }

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: var(--bw-strong);
  text-underline-offset: 3px;
}
.legal a:hover { background: var(--lime); }

/* ==========================================================================
   Account dashboard (SITE R5 — GET /account only)

   /account/devices, /account/devices/new, /account/email, /account/gifts and
   /account/link-telegram still render through the old dark shell until R6 —
   this block styles only the four migrated tabs plus the ?tab=help
   compatibility state.
   ========================================================================== */

.acct-title { margin-bottom: var(--s-4); }

/* pill tab strip — same visual language as .legal-nav, kept as its own rule
   set so the account and legal pages stay independently safe to change */
.acct-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.acct-tabs__item {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 var(--s-4);
  border: var(--border); border-radius: var(--r-pill);
  background: var(--surface-1); color: var(--ink-60);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.acct-tabs__item:hover { background: var(--surface-2); color: var(--ink); }
.acct-tabs__item[aria-current="page"] {
  background: var(--lime); color: var(--ink);
  font-weight: var(--fw-medium);
}

/* compact identity strip — Overview only; the full record lives in Profile */
.acct-identity {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  margin: 0 0 var(--s-6);
  color: var(--ink-60); font-size: var(--fs-small); line-height: var(--lh-small);
}
.acct-identity__item { white-space: nowrap; }

/* subscription status hero */
.acct-hero {
  padding: var(--s-6);
  border: var(--border); border-radius: var(--r-lg);
  background: var(--surface-2);
  margin-bottom: var(--s-6);
}
.acct-hero--ok { background: var(--surface-1); }
.acct-hero__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.acct-hero__expires { color: var(--ink-60); font-size: var(--fs-small); }
.acct-hero__hint { color: var(--ink-60); margin: 0; }
.acct-hero__reset { color: var(--ink-40); font-size: var(--fs-small); margin: var(--s-3) 0 0; }
.acct-hero .notice { margin: var(--s-3) 0; }

.acct-kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--border-soft);
}
.acct-kpi { display: flex; flex-direction: column; gap: var(--s-1); }
.acct-kpi__label { font-size: var(--fs-small); color: var(--ink-40); }
.acct-kpi__value {
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
}
.acct-kpi .quota { min-width: 0; }

.acct-quick { margin-bottom: var(--s-6); }

.acct-locations { color: var(--ink-40); font-size: var(--fs-small); margin: 0 0 var(--s-8); }

.acct-section { margin-bottom: var(--s-8); }
.acct-section__title { margin-bottom: var(--s-2); }
.acct-section .meta { margin-bottom: var(--s-4); }
.acct-section .btn { margin-top: var(--s-1); }

.acct-more-link {
  display: inline-block; margin-top: var(--s-3);
  color: var(--ink); font-weight: var(--fw-medium);
  text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: var(--bw-strong); text-underline-offset: 3px;
}

.acct-nudge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4);
}
.acct-nudge .meta { margin: 0; }

/* payment rows — shared by Overview's "last payment" and the Billing list */
.acct-pay-list { display: flex; flex-direction: column; gap: var(--s-3); }
.acct-pay-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
}
.acct-pay-row--muted { opacity: .7; }
.acct-pay-row__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.acct-pay-row__date { font-size: var(--fs-small); color: var(--ink-60); }
.acct-pay-row__title { font-weight: var(--fw-medium); }
.acct-pay-row__no { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-40); }
.acct-pay-row__cancelled { display: block; color: var(--danger-fg); margin-bottom: 2px; }
.acct-pay-row__amount { font-weight: var(--fw-medium); margin-left: auto; }

/* devices tab — the full list (R6B)
   Plain vertical flow, no inner scroll box: ten devices should read as ten
   rows on the page, not as a scrollable panel inside a card. */
.acct-devices-summary { margin-bottom: var(--s-4); }

.acct-devices {
  list-style: none; margin: 0 0 var(--s-4); padding: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.acct-device {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--border-soft); border-radius: var(--r-md);
  min-height: var(--tap-min);
}
.acct-device__icon { display: flex; flex: none; color: var(--ink-40); }
.acct-device__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acct-device__name {
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}
.acct-device__meta {
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-40);
}
.acct-device__status {
  flex: none;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  background: var(--ok-bg); color: var(--ok-fg);
}
.acct-device--pending .acct-device__status { background: var(--warn-bg); color: var(--warn-fg); }
.acct-device--off .acct-device__status { background: var(--info-bg); color: var(--ink-40); }
/* A switched-off device is still the user's device: dimmed, never hidden. */
.acct-device--off .acct-device__name { color: var(--ink-60); }

.acct-devices-note,
.acct-devices-empty {
  margin: 0 0 var(--s-6);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-40);
}
.acct-devices-actions { margin-top: var(--s-2); }

@media (max-width: 520px) {
  /* The status pill drops under the name rather than squeezing it. */
  .acct-device { flex-wrap: wrap; }
  .acct-device__status { margin-left: calc(18px + var(--s-3)); }
}

/* profile tab */
.acct-identity-full {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-6);
  margin: 0;
}
.acct-identity-full > div { display: flex; flex-direction: column; gap: 2px; }
.acct-identity-full dt { font-size: var(--fs-small); color: var(--ink-40); }
.acct-identity-full dd { margin: 0; font-weight: var(--fw-medium); }

.acct-link-list { list-style: none; margin: 0; padding: 0; }
.acct-link-list li {
  padding: var(--s-3) 0;
  border-top: var(--border-soft);
}
.acct-link-list li:first-child { border-top: 0; }
.acct-link-list a {
  color: var(--ink); font-weight: var(--fw-medium); text-decoration: none;
}
.acct-link-list a:hover { text-decoration: underline; text-decoration-color: var(--lime); }
.acct-link-list__hint { margin-left: var(--s-2); }

.acct-logout { margin-top: var(--s-4); }

.acct-help-compat-links { margin-top: var(--s-6); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s-12) 0 var(--s-8);
  margin-top: var(--s-16);
}
.site-footer__brand {
  color: var(--surface-1);
  font-size: var(--fs-h3); line-height: 1;
  font-weight: var(--fw-medium); letter-spacing: .06em;
}
.site-footer__tag { color: var(--on-ink-dim); max-width: 60ch; margin-top: var(--s-3); }

.site-footer__links {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--bw) solid var(--on-ink-hover);
}
.site-footer__links a {
  color: var(--on-ink); text-decoration: none;
  padding: var(--s-1) 0;
}
.site-footer__links a:hover { color: var(--lime); }

.site-footer__copy { color: var(--on-ink-dim); font-size: var(--fs-small); margin-top: var(--s-6); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ≤1023 — the nav collapses behind a button */
@media (max-width: 1023px) {
  .site-burger { display: grid; margin-left: auto; }

  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: var(--s-1);
    margin-left: 0;
    padding: var(--s-3) var(--site-gutter) var(--s-6);
    background: var(--surface-1);
    border-bottom: var(--border);
  }
  body[data-site-nav="open"] .site-nav { display: flex; }

  .site-nav__admin { margin-left: 0; }
}

/* ≤767 */
@media (max-width: 767px) {
  :root { --site-gutter: var(--s-4); }

  .site-section { padding: var(--s-12) 0; }
  .site-hero { padding: var(--s-12) 0 var(--s-8); }
  .site-hero__text { font-size: var(--fs-body); line-height: var(--lh-body); }
  .site-hero__actions .btn { width: 100%; }

  .doc-list { grid-template-columns: minmax(0, 1fr); }
  .support-card:hover { transform: none; box-shadow: none; }

  .legal-card { padding: var(--s-6); }
  .legal__h2 { margin-top: var(--s-6); }

  .auth-card { padding: var(--s-6); }
  .auth-actions { flex-direction: column; align-items: stretch; }
  .auth-actions .btn { width: 100%; }

  .acct-hero { padding: var(--s-4); }
  .acct-kpis { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .acct-quick { grid-template-columns: minmax(0, 1fr); }
  .acct-quick .support-card:hover { transform: none; box-shadow: none; }
  .acct-pay-row__amount { margin-left: 0; }
  .acct-identity-full { grid-template-columns: minmax(0, 1fr); }
  .acct-nudge { flex-direction: column; align-items: stretch; }
  .acct-nudge .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Account subpages (SITE R7)

   /account/devices, /account/devices/new, /account/email, /account/gifts,
   /account/link-telegram. They share the dashboard's shell, so everything
   here is the little that a management screen needs on top of it: a
   breadcrumb, a device card with a collapsible connect panel, and the
   copy-the-link row.
   -------------------------------------------------------------------------- */

.acct-back { margin: 0 0 var(--s-3); }
.acct-back__link {
  display: inline-flex; align-items: center; gap: var(--s-1);
  color: var(--ink-60); font-size: var(--fs-small); text-decoration: none;
}
.acct-back__link:hover { color: var(--ink); }
/* the sprite has one chevron; a back link needs it pointing the other way */
.acct-back__link .icon { transform: rotate(180deg); }

.acct-lead { color: var(--ink-60); margin: 0 0 var(--s-6); max-width: 62ch; }

.acct-form { display: flex; flex-direction: column; gap: var(--s-4); max-width: 420px; }
.acct-form__actions { margin-top: var(--s-2); }

.acct-email-current { margin: 0 0 var(--s-4); }
.acct-steps { color: var(--ink-60); margin: 0 0 var(--s-4); padding-left: 1.25rem; line-height: 1.6; }
.acct-steps li { margin-bottom: var(--s-1); }
/* a one-time deeplink is long and has no spaces: it must wrap, not scroll */
.acct-deeplink { word-break: break-all; margin-top: var(--s-4); }
.acct-gift-ok .notice__title { white-space: pre-line; }

/* ---- device cards -------------------------------------------------------- */

.acct-devcards { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }

.acct-devcard {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: var(--surface-1);
}
.acct-devcard--off { background: var(--surface-2); }

.acct-devcard__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.acct-devcard__icon { display: flex; flex: none; color: var(--ink-40); margin-top: 2px; }
.acct-devcard__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
/* a device name is user input: it must wrap, never widen the page */
.acct-devcard__name {
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.acct-devcard__meta { font-size: var(--fs-small); color: var(--ink-40); }
.acct-devcard__status { flex: none; }
.acct-devcard--off .acct-devcard__name { color: var(--ink-60); }

.acct-devcard__note { color: var(--ink-40); font-size: var(--fs-small); margin: var(--s-3) 0 0; }

.acct-devcard__connect { margin-top: var(--s-3); }
.acct-devcard__summary {
  display: inline-flex; align-items: center; gap: var(--s-1);
  cursor: pointer; list-style: none;
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ink);
}
.acct-devcard__summary::-webkit-details-marker { display: none; }
.acct-devcard__summary:hover { text-decoration: underline; text-decoration-color: var(--lime); }
.acct-devcard__connect[open] .acct-devcard__summary { margin-bottom: var(--s-3); }

.acct-devcard__actions { margin-top: var(--s-4); }
.acct-devcard__danger { color: var(--danger-fg); }
.acct-devcard__danger:hover { background: var(--danger-bg); color: var(--danger-fg); }

/* ---- connect panel + copy row -------------------------------------------- */

.acct-connect { display: flex; flex-direction: column; gap: var(--s-3); }

.acct-copy { display: flex; gap: var(--s-2); align-items: center; }
.acct-copy__field {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--ink-60); background: var(--surface-2);
}
.acct-copy__btn { flex: none; }

@media (max-width: 600px) {
  .acct-devcard__head { flex-wrap: wrap; }
  .acct-devcard__status { margin-left: calc(18px + var(--s-3)); }
  .acct-copy { flex-direction: column; align-items: stretch; }
  .acct-copy__btn { width: 100%; justify-content: center; }
  .acct-form { max-width: none; }
  .acct-form__actions .btn,
  .acct-devcard__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Checkout, plan cards and order status (SITE R8)

   /buy, /order/<token>, /payment/success, /payment/fail. The plan card is
   a <label> wrapping its radio, so the whole card is the hit target and
   the control stays a real radio — keyboard and screen readers get the
   native group, and the selected state survives a browser without :has().
   -------------------------------------------------------------------------- */

.buy-title { margin-bottom: var(--s-3); }
.buy-lead { color: var(--ink-60); margin: 0 0 var(--s-8); max-width: 62ch; }

.buy-form { margin: 0; }

.buy-plans {
  border: 0; padding: 0; margin: 0 0 var(--s-6);
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.plan-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: var(--surface-1);
  cursor: pointer;
}
.plan-card:hover { border-color: var(--ink-40); }
.plan-card:focus-within { outline: 0; box-shadow: var(--focus-ring); }
/* the chosen card is also outlined, not only dotted by its radio */
.plan-card:has(.plan-card__radio:checked) {
  border-color: var(--ink);
  border-width: var(--bw-strong);
  background: var(--surface-2);
}

.plan-card__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.plan-card__radio { flex: none; width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.plan-card__period { font-weight: var(--fw-medium); }
.plan-card__badge { margin-left: auto; }

.plan-card__price { display: flex; align-items: baseline; gap: 2px; margin-top: var(--s-1); }
.plan-card__amount {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  line-height: 1.05;
  font-weight: var(--fw-medium);
  letter-spacing: -.02em;
}
.plan-card__cur { font-size: var(--fs-h3); color: var(--ink-60); }
.plan-card__permonth { font-size: var(--fs-small); color: var(--ink-40); }

.plan-card__features { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-3); }
.plan-card__feature { font-size: var(--fs-small); color: var(--ink-60); }
.plan-card__feature::before { content: "— "; color: var(--ink-40); }

/* a card the product data marks popular/best: a lime edge, no invented copy */
.plan-card--highlight { border-color: var(--lime); }
.plan-card--highlight:has(.plan-card__radio:checked) { border-color: var(--ink); }

.buy-legal {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-small); color: var(--ink-60);
  margin-bottom: var(--s-6); max-width: 70ch;
}
.buy-legal input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ink); }

.buy-actions { margin-top: var(--s-2); }
.buy-after {
  color: var(--ink-40); font-size: var(--fs-small);
  margin: var(--s-6) 0 0; max-width: 62ch;
}

/* ---- order status -------------------------------------------------------- */

.order-meta {
  display: grid; gap: var(--s-1);
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.order-meta > div { display: flex; flex-direction: column; gap: 2px; }
.order-meta dt { font-size: var(--fs-small); color: var(--ink-40); }
/* an order reference is opaque and can be long: it wraps, it never scrolls */
.order-meta dd {
  margin: 0; font-family: var(--font-mono); font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

.order-hint { color: var(--ink-60); margin: 0 0 var(--s-6); max-width: 62ch; }

@media (max-width: 600px) {
  .buy-plans { grid-template-columns: minmax(0, 1fr); }
  .plan-card { padding: var(--s-4); }
  .buy-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Landing, connection guide, recovery and key handoff (SITE R9)
   -------------------------------------------------------------------------- */

/* ---- landing (SITE R9.2) --------------------------------------------------

   The shared type scale is sized for the admin panel: 36px headings on 14px
   body. On a 1440px marketing page that reads as a settings screen, which is
   most of why the first version was hard to scan. The scale below is the
   landing's own, declared on .page-landing so /admin and every cabinet page
   keep the tokens they were designed against, and named so nothing here is a
   loose pixel value.

   Ratios, not sizes, are the point: 56 / 32 / 18 / 15 gives a headline that
   dominates, section heads that are unmistakably subordinate to it and
   unmistakably above body, and body text with room to breathe. The old page
   ran 36 / 24 / 16.8 / 14 with a 20px line-height on the lead — 1.19, tight
   enough to read as a data table.
   -------------------------------------------------------------------------- */

.page-landing {
  --lp-fs-h1:    56px;  --lp-lh-h1:   58px;
  --lp-fs-h2:    32px;  --lp-lh-h2:   38px;
  --lp-fs-lead:  18px;  --lp-lh-lead: 28px;
  --lp-fs-body:  15px;  --lp-lh-body: 24px;
  --lp-fs-price: 38px;  --lp-lh-price: 40px;
  --lp-fs-hero-price: 60px;
  --lp-measure:  34rem;   /* comfortable reading width for the lead        */
  --lp-answer:   62ch;    /* and for an FAQ answer                          */
  /* not a step on the spacing scale: the height of the mobile sticky bar,
     which the footer has to clear so the bar never covers its last line.
     44px button + 8px padding top and bottom + the 1px rule, plus air. */
  --lp-sticky-clearance: 72px;
}

.lp-h1 {
  font-size: var(--lp-fs-h1); line-height: var(--lp-lh-h1);
  font-weight: var(--fw-medium); letter-spacing: -.02em;
  max-width: 15ch;
}
.lp-h2 {
  font-size: var(--lp-fs-h2); line-height: var(--lp-lh-h2);
  font-weight: var(--fw-medium); letter-spacing: -.01em;
  margin-bottom: var(--s-8);
}

/* whitespace separates the sections; there are no divider rules and no
   alternating background bands to keep in step */
.lp-section { padding: var(--s-16) 0; }

/* ---- hero ---------------------------------------------------------------- */

.lp-hero { padding: var(--s-16) 0 var(--s-12); }
.lp-hero__grid {
  display: grid; gap: var(--s-12);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: start;
}
.lp-hero__copy { min-width: 0; }

.lp-lead {
  color: var(--ink-60);
  font-size: var(--lp-fs-lead); line-height: var(--lp-lh-lead);
  margin: var(--s-6) 0 var(--s-8);
  max-width: var(--lp-measure);
}

/* two actions, one of them clearly the one to press */
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* The panel: price, what you get, where. One object, so the hero has an
   anchor on the right instead of a column of text floating in white space. */
.lp-panel {
  background: var(--ink); color: var(--surface-1);
  border-radius: var(--r-xl); padding: var(--s-8);
  display: flex; flex-direction: column;
}
.lp-panel__label {
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--on-ink-dim); margin-bottom: var(--s-4);
}
.lp-panel__price {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--lp-fs-hero-price); line-height: 1;
  font-weight: var(--fw-medium); letter-spacing: -.03em;
  color: var(--lime);
}
.lp-panel__from {
  font-size: var(--lp-fs-lead); letter-spacing: 0;
  color: var(--on-ink-dim); font-weight: var(--fw-regular);
}
.lp-panel__cur { font-size: var(--lp-fs-h2); margin-left: .12em; }
.lp-panel__unit { color: var(--on-ink); margin-top: var(--s-2); }

.lp-panel__perks {
  list-style: none; margin: var(--s-8) 0 0; padding: var(--s-6) 0 0;
  border-top: var(--bw) solid var(--on-ink-hover);
  display: grid; gap: var(--s-3);
}
.lp-panel__perks li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--lp-fs-body); line-height: var(--lp-lh-body);
  color: var(--on-ink);
}
.lp-panel__perks li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
}
.lp-panel__locations {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: var(--bw) solid var(--on-ink-hover);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--on-ink-dim);
}

/* ---- plans --------------------------------------------------------------- */

.lp-plans {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--s-6);
}
.lp-plan {
  display: flex; flex-direction: column;
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); background: var(--surface-1);
}
/* The highlight is an inner ring rather than a thicker border: a 2px border
   would push this card's contents 1px below its neighbours', and the whole
   point of the row is that the four prices sit on one line. */
.lp-plan--highlight { box-shadow: inset 0 0 0 var(--bw) var(--ink); }

/* The badge slot is rendered on every card, empty or not. Without it the
   two cards that carry a badge push their price 34px further down than the
   two that do not, and the row of prices — the one thing a visitor is here
   to compare — stops being a row. */
.lp-plan__flag {
  display: flex; gap: var(--s-2); align-items: center;
  height: 26px; margin-bottom: var(--s-4);
}
.lp-plan__period {
  font-size: var(--lp-fs-body); line-height: var(--lp-lh-body);
  font-weight: var(--fw-regular); color: var(--ink-60);
}
.lp-plan__price {
  display: flex; align-items: baseline;
  font-size: var(--lp-fs-price); line-height: var(--lp-lh-price);
  font-weight: var(--fw-medium); letter-spacing: -.02em;
  margin-top: var(--s-1);
}
/* the gap before the currency is spacing, not a character: an entity
   here would put "390 <nbsp> ₽" into the text a visitor copies */
.lp-plan__cur {
  font-size: var(--lp-fs-lead); font-weight: var(--fw-regular);
  margin-left: .12em;
}
/* always occupies its line, so the cards below it stay level even when a
   plan has no exact per-month equivalent to show */
.lp-plan__note {
  min-height: var(--lh-small);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--ink-40); margin-top: var(--s-1);
}

.lp-plan__features {
  list-style: none; margin: var(--s-6) 0 var(--s-6); padding: 0;
  display: grid; gap: var(--s-2);
}
.lp-plan__features li {
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--ink-60);
  padding-left: var(--s-4); position: relative;
}
.lp-plan__features li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: var(--bw); background: var(--ink-40);
}

.lp-plan__cta { margin-top: auto; justify-content: center; }

.lp-plans__note {
  color: var(--ink-40); font-size: var(--fs-small); line-height: var(--lh-small);
  display: flex; gap: var(--s-4); flex-wrap: wrap;
}

/* ---- steps --------------------------------------------------------------- */

.lp-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* no card, no border: three columns of text under a numeral. Boxing every
   short paragraph is what made the page read as a dashboard. */
.lp-step {
  display: grid; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: var(--bw-strong) solid var(--ink);
}
.lp-step__num {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); border: var(--bw) solid var(--ink);
  font-weight: var(--fw-medium);
}
.lp-step__title {
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
}
.lp-step__text {
  font-size: var(--lp-fs-body); line-height: var(--lp-lh-body);
  color: var(--ink-60);
}

/* ---- FAQ ----------------------------------------------------------------- */

/* Same container as every other section. The old page put this one in
   container--narrow, so the content's left edge jumped 110px inward halfway
   down the page — the single loudest source of the "crooked" reading. */
.lp-faq__grid {
  display: grid; gap: var(--s-12);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
}
.lp-faq__aside .lp-h2 { margin-bottom: var(--s-4); }

.lp-faq { display: flex; flex-direction: column; }
.lp-faq__item { border-top: var(--bw) solid var(--line); }
.lp-faq__item:last-child { border-bottom: var(--bw) solid var(--line); }
.lp-faq__q {
  cursor: pointer; list-style: none; padding: var(--s-6) 0;
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: var(--s-4);
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q::after { content: "+"; margin-left: auto; color: var(--ink-40); font-size: 1.5rem; line-height: 1; }
.lp-faq__item[open] .lp-faq__q::after { content: "–"; }
.lp-faq__a {
  margin: 0 0 var(--s-6); color: var(--ink-60);
  font-size: var(--lp-fs-body); line-height: var(--lp-lh-body);
  max-width: var(--lp-answer);
}
.lp-faq__more { color: var(--ink-40); font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---- closing band --------------------------------------------------------- */

.lp-close { padding-bottom: var(--s-16); }
.lp-close__card {
  background: var(--lime); border: var(--bw-strong) solid var(--ink);
  border-radius: var(--r-xl); padding: var(--s-12);
  display: grid; gap: var(--s-12);
  grid-template-columns: minmax(0, 1fr) minmax(16rem, auto); align-items: center;
}
.lp-close__line {
  font-size: var(--lp-fs-h2); line-height: var(--lp-lh-h2);
  font-weight: var(--fw-medium); letter-spacing: -.01em;
  max-width: 36ch;
}
.lp-close__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4); }
.lp-close__actions .btn { justify-content: center; }
.lp-close__alt {
  font-size: var(--lp-fs-body); line-height: var(--lp-lh-body);
  color: var(--ink); text-align: center;
}

/* Mobile-only sticky CTA, as the old landing had. Hidden on desktop, where
   the hero button is already on screen. */
.lp-sticky { display: none; }

/* ---- narrower than a laptop ------------------------------------------------ */

@media (max-width: 1024px) {
  .page-landing { --lp-fs-h1: 44px; --lp-lh-h1: 48px; --lp-fs-hero-price: 52px; }
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .lp-close__card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .site-brand { --brand-logo-h: 30px; }
}

@media (max-width: 720px) {
  .page-landing {
    --lp-fs-h1: 34px;  --lp-lh-h1: 38px;
    --lp-fs-h2: 25px;  --lp-lh-h2: 30px;
    --lp-fs-lead: 17px; --lp-lh-lead: 26px;
    --lp-fs-hero-price: 46px;
    --lp-fs-price: 32px; --lp-lh-price: 34px;
  }
  /* the headline may use the full column on a phone */
  .lp-h1 { max-width: none; }
  .lp-hero { padding: var(--s-8) 0 var(--s-6); }
  .lp-section { padding: var(--s-12) 0; }
  .lp-h2 { margin-bottom: var(--s-6); }

  .lp-hero__actions { flex-direction: column; align-items: stretch; }
  .lp-hero__actions .btn { justify-content: center; }

  .lp-panel { padding: var(--s-6); border-radius: var(--r-lg); }

  .lp-plans, .lp-steps { grid-template-columns: minmax(0, 1fr); }

  /* A. pricing: four cards at 351px of pitch meant one card per screen and
     no sense of a range. The type holds its size; what goes is the padding
     and the air between the feature lines. */
  .lp-plans { gap: var(--s-3); }
  .lp-plan { padding: var(--s-4); }
  .lp-plan__flag { height: auto; margin: 0; line-height: 0; }
  .lp-plan__flag .badge { line-height: normal; margin-bottom: var(--s-3); }
  .lp-plan__features { margin: var(--s-3) 0; gap: var(--s-1); }
  .lp-plan__price { margin-top: 0; }

  /* B. the three steps were stretched down the screen with more gap than
     content. Closer together, still clearly three things. */
  .lp-steps { gap: var(--s-6); }
  .lp-step {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: var(--s-2) var(--s-3);
    padding-top: var(--s-3);
  }
  .lp-step__text { grid-column: 1 / -1; }

  .lp-close { padding-bottom: var(--s-12); }
  .lp-close__card { padding: var(--s-8) var(--s-6); gap: var(--s-6); }

  /* C. a slimmer bar. It was 69px of chrome across the bottom of every
     screen, which read as a second browser toolbar; the button keeps its
     full 44px target and the bar loses the padding around it. */
  .lp-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--s-2) var(--s-3); background: var(--surface-1);
    border-top: var(--bw) solid var(--line);
  }
  .lp-sticky__btn { width: 100%; justify-content: center; }
  /* thumb-sized on a phone: the shared button is 40px, which is fine beside
     a mouse and tight beside a thumb */
  .lp-plan__cta, .lp-sticky__btn, .lp-close__actions .btn { min-height: var(--tap-min); }
  /* room for the bar, so it never covers the footer's last line */
  .page-landing .site-footer { padding-bottom: var(--lp-sticky-clearance); }
}

/* ---- connect guide -------------------------------------------------------- */

.cn-apps { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-3); }
.cn-app {
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-4); background: var(--surface-1);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
}
.cn-app--current { border-color: var(--ink); border-width: var(--bw-strong); background: var(--surface-2); }
.cn-app__name { font-weight: var(--fw-medium); }
.cn-app__actions { margin: 0; }

.cn-steps { margin-bottom: var(--s-6); }
.cn-steps__list { margin: 0; padding-left: 1.25rem; color: var(--ink-60); line-height: 1.7; }
.cn-steps__list li { margin-bottom: var(--s-1); }
.cn-foot { margin-top: var(--s-6); }

/* ---- keys list ------------------------------------------------------------ */

.keys-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.keys-list__item {
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-4); background: var(--surface-2);
  display: flex; gap: var(--s-3); align-items: flex-start; flex-wrap: wrap;
}
/* a vless line has no spaces and is long: it wraps, the page never scrolls */
.keys-list__value {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--font-mono); font-size: var(--fs-small);
  overflow-wrap: anywhere; word-break: break-all; color: var(--ink-60);
}
.keys-list__copy { flex: none; }

@media (max-width: 600px) {
  .cn-app { align-items: stretch; }
  .cn-app__actions .btn { flex: 1 1 auto; justify-content: center; }
  .keys-list__copy { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Subscription handoff pages (SITE R9.1)

   /page/<tg>/<token> and the Happ / V2Box setup pages. The QR is an inline
   <svg> generated on this server, so it is styled like any other element —
   no image request, nothing to fetch.
   -------------------------------------------------------------------------- */

.pg-meta { margin-bottom: var(--s-6); }

.pg-qr { margin: var(--s-8) 0; }
.pg-qr__frame {
  display: inline-flex; padding: var(--s-4);
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  background: #fff; margin-top: var(--s-3);
}
.pg-qr__frame svg { display: block; height: auto; max-width: 100%; }

.pg-steps { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.pg-step {
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); background: var(--surface-1);
  counter-increment: pg-step;
}
.pg-steps { counter-reset: pg-step; }
.pg-step__title { margin: 0 0 var(--s-2); display: flex; align-items: center; gap: var(--s-3); }
.pg-step__title::before {
  content: counter(pg-step);
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); border: var(--bw) solid var(--ink);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.pg-step__lines { margin: 0 0 var(--s-3); padding-left: 1.25rem; color: var(--ink-60); }
.pg-step__lines li { margin-bottom: 2px; }
.pg-step__actions { margin-top: var(--s-3); }
.pg-step .acct-copy { margin-top: var(--s-3); }

.pg-manual { margin-top: var(--s-6); border-top: var(--bw) solid var(--line); padding-top: var(--s-4); }
.pg-manual__summary {
  cursor: pointer; list-style: none;
  font-weight: var(--fw-medium); font-size: var(--fs-small);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.pg-manual__summary::-webkit-details-marker { display: none; }
.pg-manual__summary::after { content: "+"; color: var(--ink-40); }
.pg-manual[open] .pg-manual__summary::after { content: "–"; }
.pg-manual__body { margin-top: var(--s-3); }
/* config lines have no spaces and are long: they wrap inside their box */
.pg-manual__value {
  margin: 0 0 var(--s-3); padding: var(--s-4);
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--ink-60);
  font-family: var(--font-mono); font-size: var(--fs-small);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all;
  max-height: 260px; overflow-y: auto;
}

@media (max-width: 600px) {
  .pg-step__actions .btn { flex: 1 1 auto; justify-content: center; }
  .pg-qr__frame { width: 100%; justify-content: center; }
}


/* --------------------------------------------------------------------------
   Two doors on one login screen (SITE R9.5)

   `.auth-or` separates Telegram from email; `.auth-choice` is the pair of
   buttons on the screen a first-ever Telegram identity sees. Both are plain
   forms — nothing here decides anything, the server already did.
   -------------------------------------------------------------------------- */

/* the checkout gate naming the plan that is waiting on the other side */
.auth__notice {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--ink); border-radius: var(--r-md);
  background: var(--lime);
  font-size: var(--fs-small); line-height: var(--lh-small);
  font-weight: var(--fw-medium);
}

.auth-or {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-6) 0;
  color: var(--ink-40); font-size: var(--fs-small);
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1 1 auto; height: var(--bw); background: var(--line);
}

.auth-choice { display: grid; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
.auth-choice__form { margin: 0; }
.auth-choice__form .btn { width: 100%; justify-content: center; }