/* OneCatalog landing — direction «D» (docs/design/landing-2026-10): B's restrained, framed,
   numbered layout with A's reading comfort (large body text, short lines, plain contrast) and its
   Telegram-style bot chat. It wears the SELLER PANEL's skin (seller/apps/seller/src/seller.css on
   top of catalog-ui tokens.css): the same Onest, slate ramp, cobalt accent #1d4ed8, 8px controls,
   12px cards, flat white cards with a hairline, 44px buttons, tinted inputs' focus ring, uppercase
   pill badges and the sliding RU | UZ pill — so a seller who signs up sees the same product.
   Font: Onest, self-hosted (fonts/, SIL OFL 1.1 — fonts/OFL.txt); nothing is loaded from anyone
   else. Mobile first: the base rules are the phone layout, wider screens add columns. */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-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: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* Lifted from the seller panel (seller.css :root), value for value. */
  --bg: #f8f9ff;
  --surface: #fff;
  --surface-tint: #eff4ff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --control-border: #d5dce8;
  --text: #0b1c30;
  --text-muted: #4b5568;
  --text-faint: #6b7587;
  --accent-3: #eef3ff;
  --accent-4: #dce6ff;
  --accent-8: #6f8fec;
  --accent-9: #1d4ed8;
  --accent-10: #1a43bd;
  --accent-11: #0037b0;
  --info-border: #bfdbfe;
  --critical-solid: #b91c1c;
  --critical-soft: #fef2f2;
  --critical-text: #b91c1c;
  --critical-border: #fecaca;
  --success-solid: #15803d;
  --success-soft: #f0fdf4;
  --success-text: #15803d;
  --success-border: #bbf7d0;
  --focus: #1d4ed8;
  --focus-ring: #bfdbfe;
  --radius-control: 8px;
  --radius-card: 12px;
  --elevation-1: 0 2px 4px -1px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  --elevation-2: 0 12px 32px rgba(15, 23, 42, 0.14);
  --control-h: 44px;
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --font: 'Onest Variable', 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* The page's own names, bound to the panel's tokens. */
  --ink: var(--text);
  --ink-2: var(--text-muted);
  --ink-3: var(--text-faint);
  --line: var(--border);
  --line-2: var(--border-strong);
  --accent: var(--accent-9);
  --accent-ink: var(--accent-10);
  --accent-text: var(--accent-11);
  --wash: var(--accent-3);
  --bezel: #0b1c30;
  --r: var(--radius-card);
  --shadow: var(--elevation-2);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  /* The scrollbar's room stays when a pop-up locks scrolling, so the page never shifts sideways. */
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.65 var(--font);
  font-feature-settings: 'tnum' 1;
  overflow-wrap: break-word;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}
main:focus {
  outline: none;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 8px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--radius-control);
  box-shadow: var(--elevation-2);
}
.num {
  font-variant-numeric: tabular-nums;
}
.note {
  font-size: 16px;
  color: var(--ink-2);
  margin-top: 16px;
  max-width: 32em;
}
.cap {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 12px;
}

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  text-decoration: none;
}
.wordmark {
  display: block;
  width: auto;
  height: 26px;
}
/* RU | UZ: the seller panel's language pill (catalog-ui lang.css, `Language()`) — a tinted track,
   one white pill under the current language that slides between the slots, the labels in muted
   ink and the current one in the accent. Plain links, so it works without JavaScript and keeps the
   page the reader is on; `data-cur` places the pill, and landing.js slides it before navigating. */
.langs {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  flex: none;
  isolation: isolate;
  height: 44px;
  margin: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-tint);
}
.langs::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 6px);
  border-radius: calc(var(--radius-control) - 2px);
  background: var(--surface);
  box-shadow: var(--elevation-1);
  transition: transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.langs[data-cur='uz']::before {
  transform: translateX(calc(100% + 6px));
}
.langs[data-cur='ru']::before {
  transform: none;
}
.langs a {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: calc(100% + 2px);
  margin: -1px 0;
  padding: 0 12px;
  border-radius: calc(var(--radius-control) - 2px);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color 200ms var(--ease-standard);
}
.langs a[aria-current] {
  color: var(--accent-11);
}
.langs a:not([aria-current]):hover {
  color: var(--text);
}
.langs a:active {
  transform: scale(0.94);
}
.langs a:focus-visible {
  outline-offset: -2px;
}
.top-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-control);
}
.nav-link:hover {
  color: var(--text);
  background: var(--surface-tint);
}
.login {
  color: var(--ink);
  font-weight: 600;
}
.top-nav .wide-only {
  display: none;
}

/* Buttons: the seller panel's (`.ui-button` primary / secondary, large): 8px corners, weight 600,
   the cobalt fill or a white face with a hairline that tints on hover. 48px on the page body so a
   thumb hits them on a 360px phone; the header's is the panel's 44px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: 600 16px/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 100ms var(--ease-standard), border-color 100ms var(--ease-standard),
    color 100ms var(--ease-standard);
}
.btn-main {
  background: var(--accent-9);
  color: #fff;
}
.btn-main:hover {
  background: var(--accent-10);
  color: #fff;
}
.btn-line {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-line:hover {
  background: var(--surface-tint);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  margin-left: 8px;
  background: var(--accent-9);
  color: #fff;
}
.btn-sm:hover {
  background: var(--accent-10);
  color: #fff;
}
.doc .btn {
  background: var(--accent-9);
  color: #fff;
}
.tg {
  width: 20px;
  height: 20px;
  flex: none;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.actions .btn {
  flex: 1 1 100%;
}

/* Hero */
.hero {
  padding: 36px 0 56px;
}
.hero-grid {
  display: grid;
  gap: 44px;
}
/* The panel's status pill: 12px, bold, uppercase, full pill, a hairline in the tone. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--info-border);
  border-radius: 9999px;
  background: var(--accent-3);
  color: var(--accent-11);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-9);
}
.hero h1 {
  font-size: clamp(34px, 8.6vw, 58px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 20px;
  max-width: 32em;
}
.hero-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  align-items: start;
}
.hero-fig {
  margin: 0;
}
.hero-fig:nth-child(2) {
  margin-top: 48px;
}
.hero-fig figcaption {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
}
.hero-fig:nth-child(2) figcaption::before,
.hero-fig:nth-child(1) figcaption::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 0.1em;
  background: var(--line-2);
}
.hero-fig:nth-child(2) figcaption::before {
  background: var(--accent);
}

/* Device frames: a browser window for desktop shots, a dark bezel for phone shots. */
.frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}
.bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-2);
}
.bar span {
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--surface-tint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone {
  background: var(--bezel);
  border-radius: 28px;
  padding: 6px;
  box-shadow: var(--shadow);
}
.phone img {
  border-radius: 22px;
}

/* Who it is for */
.for {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
}
.for-grid {
  display: grid;
  gap: 18px;
}
.for h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-11);
}
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ticks li {
  position: relative;
  padding-left: 34px;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: inset 0 0 0 1px var(--info-border);
}
.ticks li::after {
  content: '';
  position: absolute;
  left: 7px;
  top: calc(0.3em + 5px);
  width: 6px;
  height: 10px;
  border: solid var(--accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Numbered chapters */
.chapter {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.ch-grid {
  display: grid;
  gap: 36px;
}
.ch-no {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ch-no span {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--info-border);
  border-radius: var(--radius-control);
  background: var(--accent-3);
  color: var(--accent-11);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.chapter h2 {
  font-size: clamp(28px, 6.4vw, 44px);
  max-width: 18ch;
}
.ch-body {
  margin-top: 16px;
  max-width: 32em;
  color: var(--ink-2);
}
.shop-url {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--elevation-1);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.shop-url span {
  color: var(--accent-ink);
}
.facts {
  margin: 26px 0 0;
  max-width: 32em;
  padding: 4px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.facts div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.facts div:last-child {
  border-bottom: 0;
}
.facts dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 3px;
}
.facts dd {
  margin: 0;
}
.soon {
  margin-top: 24px;
  max-width: 32em;
  font-size: 16px;
  color: var(--ink-2);
}
.tag {
  display: inline-block;
  margin-right: 6px;
  padding: 3px 9px;
  border: 1px solid var(--info-border);
  border-radius: 9999px;
  background: var(--accent-3);
  color: var(--accent-11);
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}
.pair {
  display: grid;
}
.pair .phone {
  width: 48%;
  max-width: 260px;
  justify-self: end;
  margin: -64px 12px 0 0;
  position: relative;
}
/* Pillar 2: the variants close-up is wide and short, so the phone sits under it rather than
   over it — nothing in the table is covered. */
.pair.stack .phone {
  margin-top: 20px;
}
.phone.solo {
  width: 72%;
  max-width: 340px;
  margin: 0 auto;
}

/* A screenshot is a link to its full-size file; a quiet magnifier appears on hover and focus. */
.zoom {
  position: relative;
  display: block;
  cursor: zoom-in;
  border-radius: inherit;
}
.zoom img {
  border-radius: inherit;
}
.zoom::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E")
    center / 20px no-repeat;
  box-shadow: var(--elevation-1), 0 0 0 1px var(--border);
  opacity: 0;
  transition: opacity 150ms var(--ease-standard);
  pointer-events: none;
}
.zoom:hover::after,
.zoom:focus-visible::after {
  opacity: 1;
}
.phone .zoom {
  border-radius: 22px;
}
.zoom:focus-visible {
  outline-offset: 3px;
}

/* The full-size viewer: the screenshot on a dark backdrop, a round close button in the corner. */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 64px 16px 16px;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox[open] {
  display: grid;
  place-items: center;
  animation: dlg-fade 200ms cubic-bezier(0, 0, 0.38, 0.9);
}
.lightbox::backdrop {
  background: rgba(11, 28, 48, 0.86);
}
.lb-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 80px);
  object-fit: contain;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  cursor: zoom-out;
}
/* On a phone a wide screenshot is shown tall enough to read and pans sideways. */
@media (max-width: 640px) {
  .lightbox.wide[open] {
    place-items: center start;
    overflow-x: auto;
    overscroll-behavior: contain;
  }
  .lightbox.wide .lb-img {
    max-width: none;
    height: min(64dvh, 440px);
    max-height: none;
  }
}
.lb-close {
  position: fixed;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  cursor: pointer;
}
.lb-close:hover {
  background: #fff;
}
.lb-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.lb-close svg {
  width: 22px;
  height: 22px;
}

/* The small print under a pillar's lines. */
.detail {
  margin-top: 14px;
  max-width: 32em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* Everything that is not a pillar: short cards, one row of equal height. */
.extras {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.extras h2 {
  font-size: clamp(26px, 5.4vw, 36px);
}
.cards {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cards li {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.cards h3 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.cards p {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* every card as tall as the tallest, not only within a row */
  }
}
@media (min-width: 1040px) {
  .extras {
    padding: 88px 0;
  }
  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* How it starts */
.how {
  padding: 64px 0;
}
.how h2,
.pricing h2 {
  font-size: clamp(28px, 6.4vw, 44px);
}
.steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 12px;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 8px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  background: var(--accent-3);
  color: var(--accent-11);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.steps h3 {
  font-size: 20px;
}
.steps p {
  margin-top: 6px;
  color: var(--ink-2);
}

/* Plans: swipeable cards on phones, one comparison table on wide screens. */
.pricing {
  padding: 64px 0;
  background: var(--surface-tint);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sub {
  margin-top: 14px;
  max-width: 36em;
  color: var(--ink-2);
}
.swipe {
  margin-top: 24px;
  font-size: 15px;
  color: var(--ink-3);
}
.plan-cards {
  position: relative; /* contains the visually hidden labels, or they widen the page */
  margin: 12px -20px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.plan-cards ul {
  list-style: none;
  margin: 0;
  padding: 4px 20px 16px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 340px);
  gap: 14px;
}
.plan {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.plan h3 {
  font-size: 22px;
}
/* The recommended plan (Бизнес, by code): an accent outline, a quiet tint, a small label. */
.plan.rec {
  border-color: var(--accent-9);
  box-shadow: inset 0 0 0 1px var(--accent-9);
  background: linear-gradient(var(--accent-3), var(--surface) 140px);
}
.rec-tag {
  display: inline-block;
  width: fit-content;
  margin: 0 0 10px;
  padding: 3px 10px;
  border: 1px solid var(--info-border);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--accent-11);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  white-space: normal;
}
.price {
  margin: 8px 0 14px;
  line-height: 1.2;
}
.price strong {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--ink-3);
}
.plan dl {
  margin: 0;
}
.plan dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 16px;
}
.plan dt {
  color: var(--ink-2);
}
.plan dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.yes {
  color: var(--success-text);
}
.no {
  color: var(--ink-3);
  font-weight: 400;
}
.plan-table {
  display: none;
  position: relative;
}
.price-notes {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  max-width: 44em;
  font-size: 16px;
  color: var(--ink-2);
}

/* Closing: request + company details */
.close {
  padding: 64px 0;
}
.close-grid {
  display: grid;
  gap: 44px;
}
.close h2 {
  font-size: clamp(30px, 7vw, 52px);
  max-width: 14ch;
}

/* «Оставить заявку»: a plain form (no JavaScript), 52px fields, errors under each field. */
.lead-form {
  display: grid;
  gap: 20px;
  margin-top: 28px;
  max-width: 620px;
}
.f {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.f label,
.f legend {
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.opt {
  font-weight: 400;
  color: var(--ink-3);
}
.f input[type='text'],
.f input[type='tel'],
.f textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: 400 16px/1.4 var(--font);
  transition: border-color 100ms var(--ease-standard);
}
.f input[type='text']:hover,
.f input[type='tel']:hover,
.f textarea:hover {
  border-color: var(--border-strong);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.f input:focus,
.f textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--focus);
  box-shadow: none;
}
.tel {
  display: flex;
  align-items: stretch;
}
.tel span {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-right: 0;
  border-radius: var(--radius-control) 0 0 var(--radius-control);
  background: var(--surface-tint);
  color: var(--text-muted);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.tel input[type='tel'] {
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-variant-numeric: tabular-nums;
}
.hint,
.err {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
.hint {
  color: var(--ink-3);
}
.err {
  color: var(--critical-text);
  font-weight: 500;
}
.bad input[type='text'],
.bad input[type='tel'],
.bad textarea,
.bad .tel span {
  border-color: var(--critical-solid);
}
.form-alert {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--critical-border);
  border-radius: var(--radius-control);
  background: var(--critical-soft);
  color: var(--critical-text);
  font-size: 15px;
}
/* The plan as radio cards: the plan name and its price, «not sure yet» last and default. */
.chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.chip {
  position: relative;
  /* Flex so every card in a row stretches to the tallest one (a price can wrap). */
  display: flex;
  font-weight: 400;
  cursor: pointer;
}
.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  line-height: 1.3;
}
.chip b {
  font-size: 16px;
  font-weight: 600;
}
.chip small {
  font-size: 14px;
  color: var(--ink-3);
}
.chip:hover span {
  border-color: var(--border-strong);
}
.chip input:checked + span {
  border-color: var(--accent-9);
  background: var(--accent-3);
  box-shadow: inset 0 0 0 1px var(--accent-9);
}
.chip input:checked + span b {
  color: var(--accent-text);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--focus);
}
.lead-form .btn {
  width: 100%;
}
/* «More details» (plan, link, comment): closed by default, a quiet row with a chevron. */
.more {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--control-h);
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-control);
}
.more summary::-webkit-details-marker {
  display: none;
}
.more summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms var(--ease-standard);
}
.more[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.more summary:hover {
  color: var(--text);
  background: var(--surface-tint);
}
.more[open] summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.more-body {
  display: grid;
  gap: 18px;
  padding: 16px 14px;
}
.consent {
  margin: -6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}
/* Honeypot: off-screen for people, still in the form for bots. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.aside-lead {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--ink-2);
}
.lead-aside .details-h {
  margin-top: 36px;
}
.sent {
  padding-top: 72px;
  padding-bottom: 96px;
}
.details-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.made-by {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--ink-2);
}
.company {
  margin: 0;
  padding: 4px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.company div {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
}
.company div:last-child {
  border-bottom: 0;
}
.company dt {
  font-size: 14px;
  color: var(--ink-3);
}
.company dd {
  margin: 0;
}
.company a {
  display: inline-block;
  min-height: 28px;
}

/* The form on its own page (/ariza): the panel's section card. */
.lead-card {
  margin-top: 28px;
  max-width: 660px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.lead-card .lead-form {
  margin-top: 0;
}
.lead-card .form-alert {
  margin: 0 0 20px;
}
.close h1 {
  font-size: clamp(30px, 7vw, 48px);
  max-width: 14ch;
}

/* A plan card's «choose this plan»: the panel's secondary button, the whole card's width. */
.plan .plan-cta {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
}
.plan dl {
  margin-bottom: 16px;
}
.cta-row td {
  white-space: normal;
}
.cta-row .plan-cta {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  font-size: 14px;
}

/* «Ariza qoldirish» as a pop-up: a native <dialog> dressed as the seller panel's Dialog — the
   same dimmed overlay, 12px card with a hairline and the large elevation, a 24px header with the
   close button in its corner, a scrolling body. On a phone it is a full-width bottom sheet. */
html.dlg-lock,
html:has(.lead-dialog[open]),
html:has(.lightbox[open]) {
  overflow: hidden;
}
.lead-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elevation-2);
  overflow: hidden;
  flex-direction: column;
}
.lead-dialog[open] {
  display: flex;
  animation: dlg-in 250ms cubic-bezier(0, 0, 0.38, 0.9);
}
.lead-dialog::backdrop {
  background: rgba(17, 21, 29, 0.4);
  animation: dlg-fade 250ms cubic-bezier(0, 0, 0.38, 0.9);
}
@keyframes dlg-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes dlg-fade {
  from {
    opacity: 0;
  }
}
.dlg-head {
  position: relative;
  flex: none;
  padding: 24px 64px 16px 24px;
  border-bottom: 1px solid var(--border);
}
.dlg-head h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dlg-head p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}
.dlg-close {
  position: absolute;
  top: 14px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.dlg-close:hover {
  background: var(--surface-tint);
  color: var(--text);
}
.dlg-close svg {
  width: 20px;
  height: 20px;
}
.dlg-body {
  flex: 1;
  min-height: 0;
  padding: 20px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dlg-body .lead-form {
  margin-top: 0;
  max-width: none;
  gap: 16px;
}
.dlg-body .form-alert {
  margin: 0 0 20px;
}
.dlg-body .lead-form .btn {
  width: 100%;
}
.dlg-done {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 8px 0;
  outline: none;
}
.dlg-done[hidden],
.lead-form[hidden] {
  display: none;
}
.done-tick {
  width: 48px;
  height: 48px;
  color: var(--success-solid);
}
.dlg-done h3 {
  font-size: 22px;
}
.dlg-done p {
  color: var(--text-muted);
}
.dlg-done .actions {
  margin-top: 12px;
  width: 100%;
}
.lead-form [aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}
@media (max-width: 640px) {
  .lead-dialog {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .lead-dialog[open] {
    animation-name: sheet-in;
  }
  @keyframes sheet-in {
    from {
      transform: translateY(24px);
      opacity: 0;
    }
  }
  .dlg-head {
    padding: 20px 60px 14px 20px;
  }
  .dlg-head p {
    font-size: 14px;
  }
  .dlg-body {
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Documents */
.doc {
  padding-top: 40px;
  padding-bottom: 40px;
  max-width: 780px;
  line-height: 1.7;
}
.doc h1 {
  font-size: clamp(28px, 6vw, 40px);
  margin-bottom: 16px;
}
.doc p {
  margin: 0 0 14px;
}
.legal h2 {
  margin-top: 32px;
  margin-bottom: 10px;
  font-size: 22px;
}
.legal h3 {
  margin: 20px 0 8px;
  font-size: 18px;
}
.legal ul,
.legal ol {
  padding-left: 22px;
}
.legal li {
  margin-bottom: 6px;
}
.legal blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  border-radius: var(--radius-control);
}
.legal blockquote p {
  margin: 0;
}

/* Footer */
.foot {
  padding: 28px 0 40px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--ink-3);
}
.foot-row {
  display: grid;
  gap: 12px;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
}
.foot-brand .wordmark {
  height: 22px;
}
.foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
}

@media (min-width: 560px) {
  .actions .btn {
    flex: 0 0 auto;
  }
  .facts div {
    grid-template-columns: 8.5em 1fr;
    gap: 16px;
  }
  .company div {
    grid-template-columns: 8em 1fr;
    gap: 16px;
  }
}

@media (min-width: 720px) {
  .for-grid {
    grid-template-columns: 1fr 3fr;
    gap: 32px;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 980px) {
  .top-nav .wide-only {
    display: inline-flex;
  }
  .hero {
    padding: 72px 0 88px;
  }
  .hero-grid {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: 64px;
  }
  .hero-shots {
    max-width: 480px;
    margin-right: 0;
  }
  .chapter {
    padding: 104px 0;
  }
  .ch-grid {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
    align-items: start;
  }
  .ch-text {
    position: sticky;
    top: 104px;
  }
  .chapter.flip .ch-grid {
    grid-template-columns: 7fr 5fr;
  }
  .chapter.flip .ch-text {
    order: 2;
  }
  .pair .phone {
    width: 30%;
    margin: -150px 24px 0 0;
  }
  .pair.stack .phone {
    margin-top: 24px;
  }
  .phone.solo {
    width: 62%;
  }
  .how {
    padding: 96px 0;
  }
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .steps li {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .steps li::before {
    grid-row: auto;
    margin-bottom: 14px;
  }
  .pricing {
    padding: 96px 0;
  }
  .swipe,
  .plan-cards {
    display: none;
  }
  .plan-table {
    display: block;
    margin-top: 36px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
  }
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    table-layout: fixed; /* every plan column equally wide, so the buttons match */
  }
  thead th:first-child {
    width: 21%;
  }
  th,
  td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
  }
  tbody tr:last-child th,
  tbody tr:last-child td {
    border-bottom: 0;
  }
  thead th {
    background: var(--surface-tint);
    font-weight: 600;
    vertical-align: bottom; /* names and prices line up under the recommended plan's label */
  }
  /* The panel's table head label: 11px, bold, uppercase. */
  thead th:first-child {
    vertical-align: bottom;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .pname {
    display: block;
    font-size: 18px;
  }
  /* The recommended column: a light tint down the whole column, an accent line on top. */
  th.rec,
  td.rec {
    background: #f5f8ff;
  }
  thead th.rec {
    background: var(--accent-3);
    box-shadow: inset 0 3px 0 var(--accent-9);
  }
  /* In the narrow column the label is plain accent text, so a long Uzbek label wraps cleanly. */
  thead .rec-tag {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    line-height: 1.3;
  }
  .pprice {
    display: block;
    margin-top: 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .pper {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-3);
  }
  tbody th {
    font-weight: 400;
    color: var(--ink-2);
    min-width: 200px;
  }
  td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .close {
    padding: 104px 0 88px;
  }
  .close-grid {
    grid-template-columns: 7fr 5fr;
    gap: 80px;
    align-items: start;
  }
  .chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lead-form .btn {
    width: auto;
    justify-self: start;
  }
  .lead-aside {
    padding-top: 12px;
  }
  .foot-row {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px 32px;
  }
  .foot-row p {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* «What every plan includes» above the plan table: the table only shows what differs. */
.every {
  margin: 32px 0 28px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.every h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
}
.every ul {
  display: grid;
  gap: 10px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.every li {
  position: relative;
  padding-left: 26px;
  line-height: 1.45;
}
.every li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.45em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent-9);
  border-bottom: 2px solid var(--accent-9);
  transform: rotate(-45deg);
}
.every .tag {
  margin-left: 4px;
  vertical-align: 1px;
}
.row-hint {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}
@media (min-width: 900px) {
  .every ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}