.sc-placeholder {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 2px;
  box-sizing: border-box;
  overflow: hidden;
}
@keyframes sc-shine {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
html.sc-dc-streaming .sc-placeholder,
html.sc-dc-streaming .sc-interp.sc-missing {
  position: relative;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-color: transparent;
}
html.sc-dc-streaming .sc-placeholder::before,
html.sc-dc-streaming .sc-interp.sc-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(217, 119, 87, 0) 25%,
    rgba(247, 225, 211, 0.95) 37%,
    rgba(217, 119, 87, 0) 63%
  );
  background-size: 400% 100%;
  animation: sc-shine 1.4s ease infinite;
}
html.sc-dc-streaming
  .sc-placeholder:nth-child(n + 9 of .sc-placeholder)::before,
html.sc-dc-streaming
  .sc-interp.sc-missing:nth-child(n + 9 of .sc-interp.sc-missing)::before {
  animation: none;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.sc-placeholder-error {
  padding: 4px 8px;
  font:
    11px/1.4 ui-monospace,
    monospace;
  color: color-mix(in srgb, currentColor 70%, transparent);
  word-break: break-word;
}
.sc-interp.sc-missing {
  display: inline-block;
  width: 2em;
  height: 1em;
  overflow: hidden;
  vertical-align: text-bottom;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  box-sizing: border-box;
  color: transparent;
  user-select: none;
}
.sc-interp.sc-unresolved {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 3px;
  padding: 0 3px;
}
.sc-host.sc-has-error {
  position: relative;
}
.sc-logic-error {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2147483647;
  max-width: 60ch;
  padding: 6px 10px;
  background: #b00020;
  color: #fff;
  font:
    12px/1.4 ui-monospace,
    monospace;
  border-radius: 4px;
  white-space: pre-wrap;
  pointer-events: none;
}
/* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
@media print {
  @page {
    margin: 0.5cm;
  }
  figure,
  table {
    break-inside: avoid;
  }
  #dc-root,
  #dc-root > .sc-host {
    height: auto;
  }
  *,
  *::before,
  *::after {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important;
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    transition-duration: 0s !important;
  }
}

x-dc {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}
#dc-root,
#dc-root > .sc-host {
  height: 100%;
}

/* ===========================================================================
   Design tokens = the Mini App kit (@tgpay/ui styles/tokens.css, the light
   theme) — the same names and values, unified 2026-10-30 (Роман:
   «унифицируй текущий дизайн миниаппа с промо, чтобы были одинаковыми»).
   Change a value in the kit first, then here. The promo has no dark theme.
   Marketing-only tokens (the display headings, the page wash, the device
   frame, the layout rhythm) follow in the second block.
   =========================================================================== */
:root {
  /* The site is light only (Роман 2026-10-30): the browser must not recolour
     form controls or scrollbars for a dark system theme. */
  color-scheme: light;

  /* ---- accent / brand ---- */
  --accent: #1558c8;
  --accent-hover: #0f47a8;
  --accent-soft: #e6edfd;
  --brand-primary: #1558c8;

  /* ---- surfaces / ink ---- */
  --bg: #ffffff;
  --bg-subtle: #f7f7f8;
  --bg-sunken: #e9e9ec;
  --bg-page: #f1f1f3;
  --surface: #ffffff;
  --ink: #232326;
  --ink-strong: #0c0c0d;
  --muted: #63636a; /* everything a person must READ */
  --subtle: #9c9ca3; /* decoration only — never carries data */
  --border: #e0e0e3;
  --border-strong: #cacacf;

  /* ---- the accent plane (tinted panels) + its only text colour ---- */
  --plane-from: #e6edfd;
  --plane-to: #f2f6fe;
  --plane-border: #d3e0fb;
  --plane-ink: #123f92;

  /* ---- semantic: base for icons/text on a surface, -ink on its -soft plane ---- */
  --success: #0f8a4d;
  --success-soft: #dcf3e5;
  --success-ink: #0b6238;
  --danger: #d02b20;
  --danger-soft: #fbe4e2;
  --danger-ink: #93211a;
  --info: #1558c8;
  --info-soft: #e6edfd;
  --info-ink: #123f92;
  --warn: #9a6a08;
  --warn-soft: #f7edd6;
  --warn-ink: #6b4906;

  /* ---- inverse surface (does not flip) ---- */
  --surface-inverse: #16161a;
  --surface-inverse-fg: #ffffff;
  --surface-inverse-muted: #a8a8b3;

  /* ---- filled-control pair (PrimaryButton, solid Pill) ---- */
  --accent-strong: #1558c8;
  --accent-strong-hover: #0f47a8;
  --accent-strong-fg: #ffffff;

  /* ---- typography: Inter (self-hosted, the @font-face rules below) in
     front of the system stack; the ramp named by role ---- */
  --font-sans:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-display: 30px;
  --text-display-sm: 28px;
  --text-display-xs: 24px;
  --text-amount: 20px;
  --text-headline: 17px;
  --text-title: 15px;
  --text-ui: 16px;
  --text-body-lg: 14px;
  --text-body: 13px;
  --text-body-sm: 12px;
  --text-caption: 11px;
  --text-micro: 10px;
  --tracking-caps-sm: 0.03em;
  --tracking-caps: 0.04em;
  --tracking-caps-lg: 0.06em;
  --tracking-tight: -0.025em; /* Tailwind's tracking-tight — the kit's headings */

  /* ---- shape: four radii plus the pill (card 20 → panel 14 → chip 10) ---- */
  --radius-md: 10px;
  --radius-panel: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- elevation: cards sit on shadow-sm, floating surfaces on shadow-md ---- */
  --shadow-sm: 0 1px 2px rgba(12, 12, 13, 0.06);
  --shadow-md: 0 2px 8px rgba(12, 12, 13, 0.08);
  --shadow-accent: 0 1px 3px rgba(21, 88, 200, 0.3);
  /* Focus, keyboard only: a solid 2px accent ring 2px off the control. */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* ---- motion ---- */
  --motion-dur: 240ms;
  --motion-dur-fast: 160ms;
  --motion-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Marketing-only tokens — no app counterpart. */
:root {
  /* the landing's display headings (H1/H2) */
  --text-4xl: 2.25rem; /* 36 — section H2 */
  --text-5xl: 3rem; /* 48 — page H1 */
  --text-6xl: 3.75rem; /* 60 — hero */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* the soft cobalt page wash behind the heroes */
  --accent-glow: rgba(21, 88, 200, 0.12);
  --bg-page-glow:
    linear-gradient(215deg, var(--accent-glow), transparent 40%),
    radial-gradient(var(--accent-glow), transparent 40%) no-repeat center
      center / cover,
    radial-gradient(var(--accent-glow), transparent 65%) no-repeat center
      center / cover;

  /* the phone mockup is an illustration of a device, not a UI surface:
     its bezel radii (46/36) and drop shadow stay outside the kit set */
  --shadow-device: 0 30px 70px -24px rgba(24, 24, 27, 0.45);

  /* layout rhythm (4px grid) */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */
  --gap-card: var(--space-6);
  --gap-card-lg: var(--space-8);
  --gap-section-y: var(--space-24);
  --container-max: 1536px;
  --page-gutter: var(--space-8);
  /* Motion has ONE vocabulary — the kit's (--motion-dur 240 / -fast 160,
     --motion-ease). The prototype names survive only as aliases because the
     ported markup still writes them inline. */
  --duration-fast: var(--motion-dur-fast);
  --duration-base: var(--motion-dur);
  --ease-out: var(--motion-ease);
  --ease-standard: var(--motion-ease);
}

/* Inter, self-hosted — the kit's five script files (kit.css), the variable
   font (100–900); `unicode-range` keeps the unused scripts off the wire and
   `font-display: swap` paints the system face first. The pages preload
   inter-latin.woff2 by its root path, the exact URL this rule requests
   (bust.py leaves assets/fonts/ unstamped for that reason). */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.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: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   Tgpaybot — Base layer
   Minimal reset + applies the token system to document defaults. Imported
   last from styles.css so tokens are available.
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--ink);
  background-color: var(--bg-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ink-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
}
button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* The kit's ONE focus ring (keyboard only): 2px accent, 2px off the control. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The signature soft cobalt page wash. Apply to a full-bleed wrapper that
   sits behind page content (position the content above it). */
.tg-page-glow {
  background: var(--bg-page-glow);
  background-blend-mode: overlay;
}

/* Eyebrow / overline label used above section headings. */
.tg-eyebrow {
  display: inline-block;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--accent);
}

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg-page);
  font-family: var(--font-sans);
  color: var(--ink);
}
h1,
h2,
h3 {
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
.tgp-hero > *,
.tgp-split > * {
  min-width: 0;
}
@media (max-width: 1120px) {
  .tgp-nav-links {
    display: none !important;
  }
}
/* Header fit tiers set by site.js fitNav() — the links are measured
   against the space left by the logo and the language menu + CTA
   (inline styles on the links need the !important). */
nav[data-nav-fit="tight"] .tgp-nav-links > a {
  padding: 8px 8px !important;
  font-size: var(--text-body) !important;
}
nav[data-nav-fit="hidden"] .tgp-nav-links {
  display: none !important;
}
@media (max-width: 1100px) {
  .tgp-g4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgp-g3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgp-g2 {
    grid-template-columns: 1fr !important;
  }
  .tgp-hero,
  .tgp-split {
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
  }
}
@media (max-width: 1100px) {
  .tgp-split-text {
    align-items: center !important;
    text-align: center;
  }
  .tgp-split-text ul {
    width: 100%;
    max-width: 520px;
    text-align: start;
  }
  .tgp-split-text .tgp-block {
    width: 100%;
    text-align: start;
  }
}
@media (max-width: 760px) {
  .tgp-g4,
  .tgp-g3,
  .tgp-footer {
    grid-template-columns: 1fr !important;
  }
  .tgp-hero h1 {
    font-size: var(--text-4xl) !important;
  }
  .tgp-fee-row {
    grid-template-columns: 1fr !important;
  }
  .tgp-facts {
    grid-template-columns: 1fr !important;
  }
  .tgp-facts-cell {
    border-left: none !important;
    border-top: 1px solid var(--border);
    padding-top: var(--space-8);
  }
  .tgp-fee-row > span,
  .tgp-fee-row > div > span {
    justify-self: start !important;
    text-align: start !important;
  }
  .tgp-capsule-label {
    display: none !important;
  }
}

/* ==== kit primitives (2026-10-30) ====
   The @tgpay/ui looks the promo uses — one class per primitive, values from
   ui.tsx / kit.css. The markup carries these classes instead of re-typing
   the look inline; layout (position, flex, margins) stays inline. */

/* Logo (kit.css .brand-lockup): the mark at --logo-h, the wordmark at 5/7
   of it in Inter 800, the gap 5/14. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-h) * 5 / 14);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-strong);
}
.brand-lockup:hover {
  color: var(--ink-strong);
  text-decoration: none;
}
.brand-lockup > img {
  display: block;
  flex: none;
  width: var(--logo-h);
  height: var(--logo-h);
}
.brand-wordmark {
  font-size: calc(var(--logo-h) * 5 / 7);
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* PrimaryButton / SecondaryButton: the 16px label on a pill, 52 / 50 px
   tall (min-h-12 + py-3.5 / py-3 at line-height 1.5), the flat
   --accent-strong fill — no glaze, no glow — active scale .99. `-sm` is
   the inline 32px flavour (12px bold). */
.kit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-ui);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-dur-fast) var(--motion-ease),
    transform var(--motion-dur-fast) var(--motion-ease);
}
.kit-btn:hover {
  text-decoration: none;
}
.kit-btn:active {
  transform: scale(0.99);
}
.kit-btn-primary,
.kit-btn-primary:hover {
  background: var(--accent-strong);
  color: var(--accent-strong-fg);
  font-weight: var(--weight-bold);
}
.kit-btn-secondary,
.kit-btn-secondary:hover {
  padding-block: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-strong);
  font-weight: var(--weight-semibold);
}
/* Hover is a colour step, and only where a pointer really hovers — the
   kit's Tailwind `hover:` lives in @media (hover: hover), so a tap on a
   phone never leaves a button stuck in its hover tint. */
@media (hover: hover) {
  .kit-btn-primary:hover {
    background: var(--accent-strong-hover);
  }
  .kit-btn-secondary:hover {
    background: var(--bg-subtle);
  }
}
.kit-btn.kit-btn-sm {
  min-height: 32px;
  padding: 6px 14px;
  font-size: var(--text-body-sm);
  line-height: 16px;
  font-weight: var(--weight-bold);
}

/* Pill: the tinted tag — 13px semibold; md 2/10, lg 4/12 padding; the
   plane/ink pairs of the tones; `surface` the white chip on shadow. */
.kit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
/* A pill never runs past its column: a long label (de «Deine Wallet in
   Telegram – ohne Registrierung» at 320px) wraps inside it instead of being
   cut at the screen edge (2026-11-03 overlap probe); a short one stays one line. */
.kit-pill {
  max-width: 100%;
  white-space: normal;
}
.kit-pill-lg {
  padding: 4px 12px;
}
.kit-pill-accent {
  background: var(--accent-soft);
  color: var(--plane-ink);
}
.kit-pill-neutral {
  background: var(--bg-sunken);
  color: var(--muted);
}
.kit-pill-success {
  background: var(--success-soft);
  color: var(--success-ink);
}
.kit-pill-surface {
  background: var(--surface);
  color: var(--ink-strong);
  box-shadow: var(--shadow-sm);
}
/* floating over the phone mockup: the surface pill on the floating shadow */
.kit-pill-float {
  box-shadow: var(--shadow-md);
}
/* a coin pill: the logo takes the leading icon slot */
.kit-pill-coin {
  padding-inline-start: 4px;
}

/* Chip (an action chip — the agent's example requests): the hairline on
   the surface under muted ink, 12px bold. */
.kit-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* SegmentPicker (segmented): the sunken trough, the chosen option raised
   on the surface, 36px segments in 14px — bold on, semibold muted off. */
.kit-segs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
}
.kit-seg {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body-lg);
  line-height: 20px;
  font-weight: var(--weight-semibold);
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--motion-dur-fast) var(--motion-ease),
    color var(--motion-dur-fast) var(--motion-ease);
}
.kit-seg:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .kit-seg:hover {
    color: var(--ink-strong);
  }
}
.kit-seg[aria-current="page"] {
  background: var(--surface);
  color: var(--ink-strong);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}

/* Tabular figures for amounts and counts (kit.css .tnum). */
.tnum {
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

/* Text faces (ui.tsx Text): title 15/22 semibold, sub 13/18 muted. */
.kit-text-title {
  font-size: var(--text-title);
  line-height: 22px;
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
}
.kit-text-sub {
  font-size: var(--text-body);
  line-height: 18px;
  color: var(--muted);
}

/* The claim screen's caps label over a list («Подпишитесь, чтобы получить»):
   12/16 bold, uppercase, muted. */
.kit-caps {
  font-size: var(--text-body-sm);
  line-height: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

/* The chat preview of a check (Checks.tsx): the sunken chat plane, the
   incoming bubble (panel radius, the clipped tail corner) and Telegram's
   inline button under it — only its label is ours. */
.kit-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 10px;
  border-radius: var(--radius-panel);
  background: var(--bg-subtle);
}
.kit-bubble {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 4px var(--radius-panel) var(--radius-panel) var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.kit-bubble-title {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  color: var(--ink-strong);
}
.kit-bubble-amount {
  margin-top: 6px;
  font-size: var(--text-body-lg);
  line-height: 20px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.kit-bubble-text {
  margin-top: 2px;
  font-size: var(--text-body);
  line-height: 20px;
  color: var(--ink);
}
.kit-bubble-time {
  margin-top: 4px;
  text-align: end;
  font-size: var(--text-caption);
  color: var(--muted);
}
.kit-inline-btn {
  max-width: 88%;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
  font-size: var(--text-body-lg);
  line-height: 20px;
  font-weight: var(--weight-bold);
  color: var(--accent);
}

/* Disc (ui.tsx): the round mass, a glyph on a tint — 32px, success tone. */
.kit-disc {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
}
.kit-disc-success {
  background: var(--success-soft);
  color: var(--success-ink);
}

/* The claim screen's required-channel row: a card, the disc, the handle
   (one line, cut with an ellipsis like the app) and the status at the end. */
.kit-req-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.kit-req-handle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-body-lg);
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}
.kit-req-joined {
  flex: none;
  font-size: var(--text-body-sm);
  line-height: 16px;
  font-weight: 500;
  color: var(--success-ink);
}

/* Banner (ui.tsx): the tinted inline plane — 16px radius, 10/14 padding,
   13/20 in the tone's ink; SuccessBanner = the success pair. */
.kit-banner {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--text-body);
  line-height: 20px;
}
.kit-banner-success {
  background: var(--success-soft);
  color: var(--success-ink);
}
.kit-banner-note {
  margin-top: 4px;
  font-size: var(--text-body-sm);
  line-height: 16px;
}

/* Text face headline (ui.tsx Text — the Subscribe screen's channel name):
   17/22 extrabold. */
.kit-text-headline {
  font-size: var(--text-headline);
  line-height: 22px;
  font-weight: var(--weight-extrabold);
  color: var(--ink-strong);
}

/* IconChip 36 (icons.tsx): the accent tint, radius = size × 0.28. */
.kit-iconchip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--plane-ink);
}

/* The Agent thread (Bubble.tsx): the person's bubble — bg-subtle, 13/20
   muted, the bubble radius, at the end of the row. */
.kit-bubble-user {
  align-self: flex-end;
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 4px var(--radius-panel) var(--radius-panel) var(--radius-panel);
  background: var(--bg-subtle);
  font-size: var(--text-body);
  line-height: 20px;
  color: var(--muted);
}

/* An agent draft (DraftCard.tsx): one card — the product header over a
   hairline, DetailCard bare rows (grey label at the start, the value at
   the end, hairlines between rows), the captions, the primary action. */
.kit-draft {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kit-draft-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.kit-draft-title {
  display: block;
  font-size: var(--text-body-lg);
  line-height: 22px;
  font-weight: var(--weight-bold);
  color: var(--ink-strong);
}
.kit-draft-sub {
  display: block;
  font-size: var(--text-body);
  line-height: 18px;
  color: var(--muted);
}
.kit-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 13px 16px;
}
.kit-detail-row + .kit-detail-row {
  border-top: 1px solid var(--border);
}
.kit-detail-label {
  flex: none;
  padding-top: 1px;
  font-size: var(--text-body);
  line-height: 20px;
  color: var(--muted);
}
.kit-detail-value {
  min-width: 0;
  text-align: end;
  font-size: var(--text-body-lg);
  line-height: 20px;
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
}
/* the big row = Figure xs: 20px extrabold, tight */
.kit-detail-big {
  min-width: 0;
  text-align: end;
  font-size: var(--text-amount);
  line-height: 1.1;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-strong);
}
.kit-detail-caption {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: var(--text-body-sm);
  line-height: 16px;
  color: var(--muted);
}
.kit-draft-action {
  padding: 8px 16px 16px;
}
.kit-draft-action .kit-btn {
  width: 100%;
}

/* Choice (ui.tsx): the selectable bordered plane — radius 16, 12/14, the
   plan title 15/600, its billing line 13 muted, the price 15/800 tabular. */
.kit-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.kit-choice-title {
  font-size: var(--text-title);
  line-height: 20px;
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
}
.kit-choice-sub {
  font-size: var(--text-body);
  line-height: 18px;
  color: var(--muted);
}
.kit-choice-price {
  flex: none;
  font-size: var(--text-title);
  font-weight: var(--weight-extrabold);
  color: var(--ink-strong);
  white-space: nowrap;
}

/* Summary (detail.tsx): the sunken key/value recap under a form. */
.kit-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
}
.kit-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--text-body);
  color: var(--muted);
}
.kit-summary-value {
  text-align: end;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  color: var(--ink-strong);
}

/* Disc solid (ui.tsx Disc variant="solid"): the digit on the accent fill. */
.kit-disc-solid {
  background: var(--accent-strong);
  color: var(--accent-strong-fg);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}

/* «Как подключить канал» (creators) and the home «Как это работает»
   (2026-10-31, variant D of the canvas): every step leads with the screen
   it happens on, drawn on the kit — creators: the PIN gate (PinFirst.tsx),
   the detected channel (subs/Connect.tsx), the plan form
   (subs/PlanForm.tsx), the channel card on Подписки → Заработок
   (subs/Hub.tsx); home: the bot card, the PIN gate, the Receive address
   with its network chips, the Send form — then its number on a rail that
   runs to the next step, the title and the words. */
.promo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-10) var(--space-6);
}
.promo-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
/* Panel / rail / title / text share rows across the cards (subgrid), so
   every panel in a row is the same height and the action button sits
   on the panel's floor — the four buttons line up (Роман 2026-11-03). */
@supports (grid-template-rows: subgrid) {
  .promo-step {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-content: start;
  }
}
.promo-step-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-3);
  min-height: 300px;
  box-sizing: border-box;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.promo-step-panel > .kit-btn {
  width: 100%;
  margin-top: auto;
}
.promo-step-panel > .kit-btn-sm {
  width: auto;
  align-self: flex-start;
}
.promo-step-rail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.promo-step-rail::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-strong);
  margin-inline-end: calc(-1 * var(--space-6));
}
.promo-step:last-child .promo-step-rail::after {
  content: none;
}
.promo-step-title {
  font-size: var(--text-amount);
  font-weight: var(--weight-bold);
  color: var(--ink-strong);
}
.promo-step-text {
  font-size: var(--text-ui);
  line-height: var(--leading-relaxed);
  color: var(--muted);
}
.promo-step-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.promo-step-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.promo-step-ava {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
}
.promo-step-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.promo-step-chips .kit-chip {
  flex: 1 1 auto;
}
.promo-step-hr {
  height: 1px;
  background: var(--border);
}
.promo-step-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* the Field label (13/18 semibold ink) */
.promo-step-label {
  font-size: var(--text-body);
  line-height: 18px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.promo-step-field .kit-seg {
  flex: 1 1 0;
}
/* the amount field: the bordered control box, the code in its frame */
.promo-step-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: var(--text-ui);
  line-height: 1.5;
  color: var(--ink);
}
.promo-step-suffix {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}
/* The home panels: the bot card's mark on the accent tint, the «без …»
   check lines, the Receive network chips (the chosen one on the accent
   pair — the kit Chip's selected face), the address row with its coin,
   the Send recipient (the kit Avatar without a seed = the accent fill)
   and the amount face. */
.promo-step-ava-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
}
.promo-step-ava-brand > img {
  display: block;
  width: 26px;
  height: 26px;
}
.promo-step-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.promo-step-checks > li {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-body);
  line-height: 20px;
  color: var(--ink);
}
.promo-step-checks svg {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.promo-step-netchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.kit-chip-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--plane-ink);
}
.promo-step-code {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  white-space: nowrap;
}
.promo-step-coin {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}
.promo-step-addr {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-step-input > svg {
  flex: none;
  color: var(--accent);
}
.promo-step-input-start {
  justify-content: flex-start;
  gap: 10px;
  padding-block: 10px;
}
.promo-step-initial {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  color: var(--accent-strong-fg);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}
.promo-step-amount {
  font-size: var(--text-amount);
  font-weight: var(--weight-bold);
  color: var(--ink-strong);
}
@media (max-width: 1100px) {
  .promo-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .promo-step:nth-child(2n) .promo-step-rail::after {
    content: none;
  }
}
@media (max-width: 760px) {
  .promo-steps {
    grid-template-columns: 1fr;
  }
  .promo-step-rail::after {
    content: none;
  }
  .promo-step-panel {
    min-height: 0;
  }
}

/* The home agent mock: the thread on the app's page colour, then the
   example requests as plain lines (the app has no example chips). */
.promo-agent-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 18px;
  border-radius: var(--radius-xl);
  background: var(--bg-page);
  box-shadow: inset 0 0 0 1px var(--border);
}
.promo-agent-examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.promo-agent-examples ul {
  margin: 0;
  padding-inline-start: 18px;
  font-size: var(--text-body);
  line-height: 20px;
  color: var(--muted);
}

/* ==== additions for the static site (placeholders, language menu) ==== */
.shot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--bg-sunken);
}
.lang-menu {
  position: relative;
}
/* The language button = the kit's TextButton (strong): 36px, 13px bold,
   muted ink that darkens on hover, the 10px radius; the hit area reaches
   44px through a transparent band (the look stays 36). */
.lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--motion-dur-fast) var(--motion-ease);
}
.lang-btn::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}
/* the chevron points the way the menu goes (the inline style turns it down) */
.lang-btn > svg {
  transition: transform var(--motion-dur-fast) var(--motion-ease);
}
.lang-btn[aria-expanded="true"] > svg {
  transform: rotate(-90deg) !important;
}
@media (hover: hover) {
  .lang-btn:hover {
    color: var(--ink);
  }
}

/* The menu (site.js initMenu): a floating surface panel under the button —
   radius 14 on the floating shadow, 44px items, the current language marked
   with the kit checkmark. It fades in and out on the kit motion tokens
   (`data-open`; site.js sets `hidden` once the exit has played). */
.lang-pop {
  position: absolute;
  inset-inline-end: 0;
  top: 46px;
  z-index: 100;
  min-width: 184px;
  padding: 6px;
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--motion-dur-fast) var(--motion-ease),
    transform var(--motion-dur-fast) var(--motion-ease);
}
.lang-pop[data-open] {
  opacity: 1;
  transform: none;
}
.lang-pop[hidden] {
  display: none;
}
.lang-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-list > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--text-title);
  line-height: 22px;
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-dur-fast) var(--motion-ease);
}
.lang-list > button[aria-checked="true"] {
  font-weight: var(--weight-bold);
}
.lang-list > button:active {
  background: var(--bg-sunken);
}
/* the ring sits inside the item: the panel is a tight stack */
.lang-list > button:focus-visible {
  outline-offset: -2px;
}
@media (hover: hover) {
  .lang-list > button:hover {
    background: var(--bg-subtle);
  }
}
.lang-check {
  flex: none;
  color: var(--accent);
  visibility: hidden;
}
.lang-list > button[aria-checked="true"] .lang-check {
  visibility: visible;
}
/* the sheet's own header — hidden while the menu is a dropdown */
.lang-head {
  display: none;
}

/* Under 760px the same menu is the kit's bottom Sheet (ui.tsx Sheet, the
   titled flavour): the surface on a 20px top radius, the pinned header
   (17px bold title + the 44px ✕ over a hairline), the 40% scrim, the
   panel sliding up on --motion-dur; site.js moves it under <body> while
   open (the header's backdrop-filter would otherwise be the containing
   block of a fixed panel) and keeps the focus inside. */
.lang-pop.is-sheet {
  position: fixed;
  inset: auto 0 0;
  top: auto;
  z-index: 101;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 90vh;
  max-height: 90dvh;
  padding: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: none;
  opacity: 1;
  transform: translateY(100%);
  transition: transform var(--motion-dur) var(--motion-ease);
}
.lang-pop.is-sheet[data-open] {
  transform: none;
}
.lang-pop.is-sheet .lang-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.lang-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-headline);
  line-height: 24px;
  font-weight: var(--weight-bold);
  letter-spacing: normal;
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--motion-dur-fast) var(--motion-ease);
}
.lang-close:active {
  background: var(--bg-sunken);
}
@media (hover: hover) {
  .lang-close:hover {
    background: var(--bg-subtle);
  }
}
.lang-pop.is-sheet .lang-list {
  min-height: 0;
  overflow-y: auto;
  padding: 12px 4px calc(24px + env(safe-area-inset-bottom, 0px));
}
.lang-pop.is-sheet .lang-list > button {
  min-height: 52px;
}
.lang-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity var(--motion-dur-fast) var(--motion-ease);
}
.lang-scrim[data-open] {
  opacity: 1;
}
@media (max-width: 560px) {
  .tgp-nav-cta-label {
    display: none !important;
  }
  /* the header CTA turns into the round plane glyph */
  .tgp-nav-cta {
    min-width: 48px;
    padding-inline: 14px;
  }
}
@media (max-width: 420px) {
  .tgp-logo-full {
    display: none !important;
  }
}

/* Role capsule = the app's floating tab bar (kit.css .tabbar): the surface
   at 96% under an 18px blur, the accent-tinted hairline, the soft accent
   drop shadow, the 26px radius; inside, the kit SegmentPicker trough and
   the ✕ as the kit Sheet's close (a 44px round ghost button, 20px glyph).
   Dismissable — the ✕ survives in sessionStorage via site.js. The markup's
   inline look (white pill on shadow-md, the corner ✕) is overridden here. */
.role-capsule {
  overflow: visible !important;
  border: 1px solid var(--plane-border);
  border-radius: 26px !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    0 12px 34px rgba(21, 88, 200, 0.13),
    0 3px 10px rgba(12, 12, 13, 0.07) !important;
}
.capsule-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--motion-dur-fast) var(--motion-ease);
}
.capsule-close > svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}
.capsule-close:active {
  background: var(--bg-sunken);
}
@media (hover: hover) {
  .capsule-close:hover {
    background: var(--bg-subtle);
  }
}
/* the 36px segments reach 44px into the trough's padding (hit area only) */
.role-capsule .kit-seg {
  position: relative;
}
.role-capsule .kit-seg::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

/* Phones and tablets: ONE row docked like the app's tab bar — 8px off the
   sides, 12px above the home indicator, 58px tall, shrink-wrapped and
   centred while it fits; the segment trough scrolls sideways when it does
   not (site.js centres the current page's segment). */
@media (max-width: 979px) {
  .role-capsule {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: max-content !important;
    height: 58px !important;
    margin-inline: auto;
    padding: 0 6px !important;
    gap: 4px !important;
    transform: none !important;
  }
  .role-capsule .tgp-capsule-label {
    padding-inline-start: 10px;
  }
  .role-capsule .kit-segs {
    flex: 1 1 auto !important;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .role-capsule .kit-segs::-webkit-scrollbar {
    display: none;
  }
}

/* ---- flicker-free navigation (2026-08-10) ---- */

/* Cross-document view transitions: role/page switches cross-fade
   instead of flashing white and jumping (same-origin, progressive —
   browsers without support just navigate normally). */
@view-transition {
  navigation: auto;
}

/* Non-RU locales: the <head> boot script sets this attribute and
   site.js removes it once the dictionary is applied, so the first
   paint is already translated (1.5 s failsafe in the boot script). */
html[data-l10n-pending] body {
  visibility: hidden;
}

/* hover classes — the prototype's style-hover attributes, mapped by
   tools/port_main.py (HOVER table) */
.hv-nav,
.tgp-faq-btn {
  transition:
    color var(--motion-dur-fast) var(--motion-ease),
    background-color var(--motion-dur-fast) var(--motion-ease);
}
.hv-nav:hover {
  text-decoration: none;
}
.hv-nav:active,
.tgp-faq-btn:active {
  background: var(--bg-sunken);
}
@media (hover: hover) {
  .hv-nav:hover {
    color: var(--ink-strong) !important;
    background: var(--bg-subtle);
  }
  .tgp-faq-btn:hover {
    background: var(--bg-subtle);
  }
}
/* The ported FAQ markup still writes `240ms ease` inline; the duration is
   the kit's --motion-dur already, the curve becomes the kit's. */
[style*="240ms ease"] {
  transition-timing-function: var(--motion-ease) !important;
}

/* Persian is the first RTL promo locale. Prototype inline typography has
   physical tracking/line heights; override only the translated copy. */
html[dir="rtl"] {
  --font-sans: Inter, Tahoma, "Segoe UI", Arial, sans-serif;
}
html[dir="rtl"] [data-i18n] {
  letter-spacing: normal !important;
  line-height: 1.65 !important;
}
html[dir="rtl"] h1[data-i18n],
html[dir="rtl"] h2[data-i18n] {
  line-height: 1.4 !important;
}
html[dir="rtl"] nav {
  padding-inline: 20px 5px !important;
}
html[dir="rtl"] .tgp-faq-btn {
  text-align: start !important;
}
bdi {
  unicode-bidi: isolate;
}

/* Narrow screens: ONE rule set for every locale and both directions (the
   2026-10-16 locale UI audit replaced the per-locale ar/hi/pt/zh/id
   exceptions). Pinned locale pages carry no data-i18n attributes, so the
   hooks are classes on the source markup. */
@media (max-width: 600px) {
  /* Main-page fee rows: the badge drops under its explanation, aligned with
     the text column (32 px icon + 14 px gap); a badge wider than that column
     wraps inside itself instead of leaving the row. */
  .promo-fee-row {
    flex-wrap: wrap;
    row-gap: 10px !important;
  }
  .promo-fee-row > span:nth-child(2) {
    flex-basis: calc(100% - 46px) !important;
  }
  .promo-fee-row > span:last-child {
    max-width: calc(100% - 46px);
    margin-inline-start: 46px;
    border-radius: var(--radius-lg) !important;
    white-space: normal !important;
    text-wrap: balance;
  }
  /* Creators channel demo: the price takes its own line under the plan, so
     the description gets the whole row. In the channel caption a CJK line
     may break before the centred dot (ja «…daily・登録者»), never inside the
     handle. */
  .promo-plan-row {
    flex-wrap: wrap;
    row-gap: 6px !important;
  }
  .promo-plan-row > span:first-child {
    flex: 1 1 100%;
  }
  .promo-channel-head > span {
    line-break: loose;
  }
  /* Decorative status pills hang 34-38 px past the 296 px phone mockup;
     here the phone is centred (its edge at 50vw - 148px) and the outer
     container clips overflow, so cap the overhang to keep each pill at
     least 8 px inside the viewport. Physical sides = the inline styles. */
  .hero-status-start {
    left: max(-38px, calc(156px - 50vw)) !important;
  }
  .hero-status-end {
    right: max(-38px, calc(156px - 50vw)) !important;
  }
  .security-status {
    right: max(-34px, calc(156px - 50vw)) !important;
  }
  /* Long translated labels also need a width bound: the French transfer
     status exceeds the viewport at 320 px even with the safe left inset. */
  .hero-status-start,
  .hero-status-end,
  .security-status {
    max-width: calc(100vw - 24px);
    white-space: normal !important;
  }
}

/* Keep the new locale copy in its written case, including inline overlines. */
html:is(
    [lang="de"],
    [lang="es"],
    [lang="fr"],
    [lang="it"],
    [lang="ja"],
    [lang="ko"],
    [lang="vi"]
  )
  :is(
    .tg-eyebrow,
    .tgp-eyebrow,
    .tgp-feat-eyebrow,
    .tgp-feat-stepno,
    .tgp-feat-snippet-label,
    [style*="text-transform"]
  ) {
  text-transform: none !important;
}

/* ==== about / legal pages (web/about/, tools/legal_pages.py) ====
   One article column in the role pages' vocabulary (tokens + sizes of
   the rev3 main page); the pages carry the same nav + footer chrome. */
.tgp-article {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 44px);
  padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 112px);
  color: var(--ink);
}
.tgp-article .tgp-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: var(--text-body-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--accent);
}
.tgp-article h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  color: var(--ink-strong);
  text-wrap: pretty;
}
.tgp-article h2 {
  margin: 40px 0 12px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--ink-strong);
}
.tgp-article h3 {
  margin: 28px 0 8px;
  font-size: var(--text-headline);
  font-weight: 700;
  color: var(--ink-strong);
}
.tgp-article p,
.tgp-article li {
  margin: 0 0 14px;
  font-size: var(--text-headline);
  line-height: 1.62;
  text-wrap: pretty;
}
.tgp-article .tgp-lead {
  font-size: var(--text-amount);
}
.tgp-article ul {
  margin: 0 0 14px;
  padding-inline-start: 1.3em;
}
.tgp-article li {
  margin-bottom: 8px;
}
.tgp-article a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tgp-article .tgp-edition {
  font-size: var(--text-body-lg);
  color: var(--muted);
}
html[dir="rtl"] .tgp-article h1,
html[dir="rtl"] .tgp-article h2 {
  letter-spacing: normal;
}

/* ==== feature landings (web/<slug>/, tools/feature_pages.py) ====
   /stars/, /api/ … — one intent per page, built from content/features/
   on the about page's chrome. Same tokens as the role pages; logical
   properties so fa/ar render mirrored without overrides. */
.tgp-feat {
  color: var(--ink);
}
.tgp-feat-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 44px);
}
.tgp-feat-hero-bg {
  position: relative;
  overflow: hidden;
  background: var(--bg-page-glow);
}
.tgp-feat-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}
.tgp-feat-hero > * {
  min-width: 0;
}
.tgp-feat-hero-solo {
  grid-template-columns: 1fr;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.tgp-feat-hero-solo .tgp-feat-hero-text {
  align-items: center;
}
.tgp-feat-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.tgp-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--plane-ink);
  white-space: nowrap;
}
.tgp-feat-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  flex-shrink: 0;
}
.tgp-feat h1 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.06;
  color: var(--ink-strong);
  text-wrap: balance;
}
.tgp-feat-lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-headline);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.tgp-feat-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tgp-feat-hero-solo .tgp-feat-ctas {
  justify-content: center;
}
/* The CTAs = the kit's PrimaryButton / SecondaryButton (see .kit-btn). */
.tgp-feat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-ui);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--motion-dur-fast) var(--motion-ease),
    transform var(--motion-dur-fast) var(--motion-ease);
}
.tgp-feat-btn:hover {
  text-decoration: none;
}
.tgp-feat-btn:active {
  transform: scale(0.99);
}
.tgp-feat-btn-primary,
.tgp-feat-btn-primary:hover {
  background: var(--accent-strong);
  color: var(--accent-strong-fg);
}
.tgp-feat-btn-secondary,
.tgp-feat-btn-secondary:hover {
  padding-block: 12px;
  background: var(--surface);
  color: var(--ink-strong);
  border: 1px solid var(--border-strong);
  font-weight: var(--weight-semibold);
}
/* on the inverse panel: the white surface fill of a SecondaryButton */
.tgp-feat-btn-light,
.tgp-feat-btn-light:hover {
  background: var(--surface);
  color: var(--ink-strong);
  font-weight: var(--weight-semibold);
}
@media (hover: hover) {
  .tgp-feat-btn-primary:hover {
    background: var(--accent-strong-hover);
  }
  .tgp-feat-btn-secondary:hover,
  .tgp-feat-btn-light:hover {
    background: var(--bg-subtle);
  }
}
.tgp-feat-note {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--muted);
}
.tgp-feat-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 16px;
}
.tgp-feat-glow {
  position: absolute;
  inset: -4% -12%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent);
  filter: blur(10px);
}
.tgp-feat-phone {
  position: relative;
  width: 296px;
  max-width: 100%;
}
.tgp-feat-phone-frame {
  position: relative;
  padding: 10px;
  border-radius: 46px;
  background: var(--surface-inverse);
  box-shadow: var(--shadow-device);
}
.tgp-feat-phone-screen {
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 36px;
  overflow: hidden;
  background: var(--bg-sunken);
}
.tgp-feat-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.tgp-feat-badge {
  position: absolute;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  white-space: nowrap;
}
.tgp-feat-badge-a {
  inset-inline-start: -44px;
  top: 13%;
}
.tgp-feat-badge-b {
  inset-inline-end: -44px;
  bottom: 15%;
}
.tgp-feat-sec {
  padding-block: clamp(48px, 6vw, 88px);
}
/* the alternate band stays on the canvas: white belongs to the cards */
.tgp-feat-sec-alt {
  background: none;
}
.tgp-feat-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.tgp-feat-eyebrow {
  font-size: var(--text-body-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--accent);
}
.tgp-feat-head h2,
.tgp-feat-final h2 {
  margin: 0;
  font-size: clamp(26px, 3.1vw, 40px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.14;
  color: var(--ink-strong);
  text-wrap: pretty;
}
.tgp-feat-head p {
  margin: 0;
  font-size: var(--text-headline);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.tgp-feat-steps,
.tgp-feat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tgp-feat-cards {
  grid-template-columns: repeat(3, 1fr);
}
.tgp-feat-step,
.tgp-feat-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.tgp-feat-stepno {
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--accent);
}
.tgp-feat-step h3,
.tgp-feat-card h3 {
  margin: 0;
  font-size: var(--text-amount);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-strong);
}
.tgp-feat-step p,
.tgp-feat-card p {
  margin: 0;
  font-size: var(--text-title);
  line-height: 1.58;
  color: var(--muted);
  text-wrap: pretty;
}
.tgp-feat-facts {
  max-width: 820px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tgp-feat-fact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.tgp-feat-fact:last-child {
  border-bottom: none;
}
.tgp-feat-fact-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tgp-feat-fact-label {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--ink-strong);
}
.tgp-feat-fact-note {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.tgp-feat-fact-value {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--plane-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.tgp-faq {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tgp-faq-item {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tgp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  text-align: start;
  font: inherit;
  font-size: var(--text-headline);
  font-weight: 600;
  color: var(--ink-strong);
  cursor: pointer;
  transition: background-color var(--motion-dur-fast) var(--motion-ease);
}
/* the kit Disclosure header: subtle on hover, sunken while pressed */
.tgp-faq-q:active {
  background: var(--bg-sunken);
}
@media (hover: hover) {
  .tgp-faq-q:hover {
    background: var(--bg-subtle);
  }
}
.tgp-faq-q svg {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform var(--motion-dur-fast) var(--motion-ease);
}
.tgp-faq-q[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.tgp-faq-panel {
  display: grid;
  transition: grid-template-rows var(--motion-dur) var(--motion-ease);
}
.tgp-faq-clip {
  overflow: hidden;
}
.tgp-faq-a {
  margin: 0;
  padding: 0 22px 18px;
  font-size: var(--text-title);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.tgp-faq-tail {
  max-width: 760px;
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  font-size: var(--text-title);
  font-weight: 600;
}
.tgp-feat-links {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.tgp-feat-links li {
  margin: 0;
}
.tgp-feat-links a {
  display: block;
  padding: 16px 20px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--ink-strong);
  transition: background-color var(--motion-dur-fast) var(--motion-ease);
}
/* a tappable card is a Row: a colour step, never a lift */
.tgp-feat-links a:hover {
  text-decoration: none;
}
.tgp-feat-links a:active {
  background: var(--bg-sunken);
}
@media (hover: hover) {
  .tgp-feat-links a:hover {
    background: var(--bg-subtle);
  }
}
.tgp-feat-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--surface-inverse);
  text-align: center;
}
.tgp-feat-final h2 {
  color: #fff;
}
.tgp-feat-final p {
  margin: 0;
  max-width: 56ch;
  font-size: var(--text-headline);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}
.tgp-feat-agent {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.tgp-feat-agent > * {
  min-width: 0;
}
.tgp-feat-agent-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tgp-feat-agent-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--accent-soft);
}
.tgp-feat-agent-step h3 {
  margin: 0;
  font-size: var(--text-amount);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-strong);
}
.tgp-feat-agent-step p {
  margin: 0;
  font-size: var(--text-title);
  line-height: 1.58;
  color: var(--muted);
  text-wrap: pretty;
}
.tgp-feat-agent-safety {
  margin: 22px 0 10px;
  padding: 14px 18px;
  border-radius: var(--radius-panel);
  background: var(--accent-soft);
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--plane-ink);
  text-wrap: pretty;
}
.tgp-feat-agent-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.tgp-feat-snippet {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tgp-feat-snippet-label {
  font-size: var(--text-body-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--muted);
}
.tgp-feat-snippet-text {
  margin: 0;
  font-size: var(--text-title);
  line-height: 1.55;
  color: var(--ink);
}
.tgp-feat-code {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-panel);
  background: var(--bg-sunken);
  font: var(--text-body) / 1.55 var(--font-mono);
  color: var(--ink-strong);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: left;
}
/* Copy = the kit's SecondaryButton size="sm" (32px outlined pill, 12px
   bold) carrying the CopyButton behaviour from site.js: the kit `copy`
   glyph, the success plane + `checkmark` once copied, a sr-only status
   line; a 44px hit area through a transparent band. */
.tgp-copy {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: inherit;
  font-size: var(--text-body-sm);
  line-height: 16px;
  font-weight: var(--weight-bold);
  color: var(--ink-strong);
  cursor: pointer;
  transition:
    background-color var(--motion-dur-fast) var(--motion-ease),
    border-color var(--motion-dur-fast) var(--motion-ease),
    color var(--motion-dur-fast) var(--motion-ease),
    transform var(--motion-dur-fast) var(--motion-ease);
}
.tgp-copy::before {
  content: "";
  position: absolute;
  inset: -7px 0;
}
.tgp-copy:active {
  transform: scale(0.99);
}
.tgp-copy > svg {
  flex: none;
}
@media (hover: hover) {
  .tgp-copy:hover {
    background: var(--bg-subtle);
  }
}
.tgp-copy.is-copied,
.tgp-copy.is-copied:hover {
  border-color: var(--success-soft);
  background: var(--success-soft);
  color: var(--success-ink);
}
.tgp-more {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--accent);
}
@media (max-width: 1100px) {
  .tgp-feat-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .tgp-feat-hero-text {
    align-items: center;
    text-align: center;
  }
  .tgp-feat-ctas {
    justify-content: center;
  }
  .tgp-feat-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .tgp-feat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .tgp-feat-agent {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .tgp-feat h1 {
    font-size: clamp(28px, 8vw, 36px);
  }
  .tgp-feat-steps,
  .tgp-feat-cards,
  .tgp-feat-links {
    grid-template-columns: 1fr;
  }
  .tgp-feat-fact {
    grid-template-columns: 1fr;
  }
  .tgp-feat-fact-value {
    justify-self: start;
  }
  .tgp-feat-badge-a {
    inset-inline-start: -8px;
  }
  .tgp-feat-badge-b {
    inset-inline-end: -8px;
  }
  .tgp-feat-btn {
    width: 100%;
  }
}
html[dir="rtl"] .tgp-feat h1,
html[dir="rtl"] .tgp-feat-head h2,
html[dir="rtl"] .tgp-feat-final h2 {
  letter-spacing: normal;
}

/* ==== kit chrome pass (2026-10-30) ==== */

/* A standalone «read more» link: a 44px hit area, the look unchanged. */
.tgp-more {
  position: relative;
}
.tgp-more::before {
  content: "";
  position: absolute;
  inset: -11px 0;
}

/* Header logo link: the 36px mark, a 44px hit area. */
a.brand-lockup {
  position: relative;
}
a.brand-lockup::before {
  content: "";
  position: absolute;
  inset: -4px;
}

/* Footer column headings = the kit SectionLabel face (15px semibold
   ink-strong, sentence case): the kit never sets content in tracked micro
   caps. The ported markup types them inline (caption / body-lg, uppercase,
   tracked), hence the attribute hook and the !important; `.tgp-foot-head`
   is the class the markup should carry instead. */
footer .tgp-foot-head,
footer span[style*="text-transform"] {
  font-size: var(--text-title) !important;
  line-height: 20px;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink-strong) !important;
}
/* On phones every footer link is a 44px row (the column gap folds into it). */
@media (max-width: 760px) {
  footer div:has(> a) {
    gap: 0 !important;
  }
  footer div > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Screen-reader-only text (the copy button's status line). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* EmptyState (ui.tsx) — the 404 page: the card (20px on shadow-sm), a
   48px neutral IconChip with a 24px kit glyph, the 15px bold title, one
   13px muted line, a stack of the kit's 52px buttons 8px apart. */
.kit-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 32px 16px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.kit-icon-chip {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  color: var(--muted);
}
.kit-empty-title {
  margin: 0;
  font-size: var(--text-title);
  line-height: 22px;
  font-weight: var(--weight-bold);
  letter-spacing: normal;
  color: var(--ink-strong);
}
.kit-empty-text {
  max-width: 256px;
  margin: 0;
  font-size: var(--text-body);
  line-height: 20px;
  color: var(--muted);
}
.kit-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 224px;
}
.kit-empty-actions > .kit-btn {
  width: 100%;
  white-space: normal;
}

/* Reduced motion — ONE switch for the whole site (the kit's kit.css block
   ~840): every transition and animation stops, inline ones included, the
   cross-document view transition is off and anchor jumps are instant. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Headings on a phone: a word longer than the column (de «Kryptowährungen»,
   es «Comprobaciones» at 320px) is hyphenated by the page language and
   broken as a last resort instead of running into the page edge
   (2026-11-03 overlap probe). Wide screens keep their line breaks. */
@media (max-width: 420px) {
  h1,
  h2,
  h3 {
    hyphens: auto;
    /* only the long words: «Einnahmen», «Wallet» stay whole */
    hyphenate-limit-chars: 12 5 5;
    overflow-wrap: break-word;
  }
}