/* SMeet public site: landing, features, business, and the two bots pages.
   One stylesheet for all the pages: they are one system, and a card or a
   store button that drifts between them reads as a different product.

   The design comes from the canvas mockups in ios-native/DesignReference. Those
   are two fixed-width artboards with 288 inline styles and no classes, so none
   of this is ported markup — the palette, the type, the section order and the
   copy are taken from them, the implementation is written here. */

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  /* Ink and greys, in the order the mockup uses them most. */
  --ink:        #0c1116;
  --ink-2:      #3c4653;
  --ink-3:      #5b6672;
  --muted:      #6b7480;

  --bg:         #fbfaf9;   /* warm off-white; never pure #fff */
  --surface:    #ffffff;
  --surface-2:  #f6f5f3;   /* banded sections */
  --line:       #e8e6e2;
  --line-soft:  #f0eeeb;

  --accent:     #6c3fc4;   /* purple: memory, AI, the second half of the H1 */
  --accent-ink: #5b3a96;
  --link:       #1f6fd0;   /* blue: links, the first half of the H1 */
  --sky:        #37a8ff;
  --ok:         #2f7d4f;
  --alert:      #e0483f;

  /* Dark surfaces — the product shot and the phone screens. */
  --night:      #12161c;
  --night-2:    #1b2029;
  --night-line: #2a313c;

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale, taken from the mockups rather than guessed.
     ⚠️ The desktop artboards are already fluid — every heading is a `clamp()`,
     and the mobile artboard sits almost exactly on each clamp's lower bound
     (35 vs 36, 25 vs 26, 15.5 vs 15.5). So the two artboards are one fluid
     system drawn at two widths, and these are its real numbers. What the
     mockups leave fixed — card and meta text — is made fluid here, because a
     14 px card label beside a 70 px headline is the one thing that does not
     survive the jump to a wide screen. */
  --t-display: clamp(2.25rem, 6vw, 4.375rem);
  --t-h2:      clamp(1.625rem, 3.7vw, 2.75rem);
  --t-h3:      clamp(1.125rem, 1.9vw, 1.3125rem);
  --t-lede:    clamp(0.96875rem, 1.5vw, 1.1875rem);
  --t-cta:     clamp(1.75rem, 4.6vw, 3.5rem);
  --t-body:    clamp(0.90625rem, 1.1vw, 1.03125rem);
  --t-small:   clamp(0.9375rem, 1.05vw, 1.0625rem);
  --t-caption: clamp(0.84375rem, 0.95vw, 0.9375rem);
  --t-meta:    clamp(0.75rem, 0.85vw, 0.84375rem);
  --t-stat:    clamp(1.6875rem, 3.7vw, 2.75rem);
  --t-eyebrow: clamp(0.6875rem, 0.8vw, 0.75rem);

  --sp-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --wrap: 1240px;
  --gut: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(12, 17, 22, 0.04), 0 8px 24px rgba(12, 17, 22, 0.05);
  --shadow-lift: 0 2px 6px rgba(12, 17, 22, 0.06), 0 24px 60px rgba(12, 17, 22, 0.10);
}

/* ⚠️ The design is a single light world on purpose — a marketing page that
   half-inverts under a dark OS looks broken rather than themed. The palette is
   therefore stated outright, including the body background: a transparent body
   would borrow whatever ground the browser paints. */

/* ── Base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* One light world, stated outright: a marketing page that half-inverts under a
   dark OS looks broken rather than themed. */
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchored sections must clear the sticky header, or a jump hides the heading
   it was aimed at. */
[id] { scroll-margin-top: 78px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: rgba(108, 63, 196, 0.18); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
/* ⚠️ Safari снимает со списка семантику, если у него убраны маркеры, —
   VoiceOver перестаёт объявлять «список из N». Маркеры убираем, роль
   возвращаем явно. */
ul { padding: 0; list-style: none; }
ul { -webkit-padding-start: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
}
.skip:focus { left: 0; color: #fff; }

/* ── Type helpers ────────────────────────────────────────────────────────── */

.eyebrow {
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--ok { color: var(--ok); }

.display {
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

.h2 {
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 34em;
}

.tint-link { color: var(--link); }
.tint-accent { color: var(--accent); }

/* The second half of the headline is one gradient across both words, not two
   flat colours: the mockup runs blue into purple through the phrase. The plain
   colour underneath is what a browser without `background-clip: text` keeps. */
.tint-run {
  color: var(--link);
  background: linear-gradient(100deg, var(--link) 0%, #4a58cc 42%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tint-run { color: transparent; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: 600 var(--t-small)/1.2 var(--sans);
  /* ⚠️ At exactly 900 px — the last width that still shows the nav — a longer
     nav row squeezed "For business" and "Get SMeet" into two lines each. The
     labels are short; they should shorten the nav, not fold. */
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(12, 17, 22, 0.24);
}
.btn--dark:hover { background: #1a222c; color: #fff; }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: #d8d5cf; }

.btn__label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.btn__note { font-weight: 400; font-size: 11px; opacity: 0.66; letter-spacing: 0.01em; }

.btn__icon { flex: none; width: 17px; height: 17px; }

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.note {
  font-size: var(--t-caption);
  color: var(--muted);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 250, 249, 0.86);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-head[data-scrolled="true"] { border-bottom-color: var(--line); }

.site-head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 1.0625rem;
}
.brand:hover { color: var(--ink); }
.brand img { width: 26px; height: 18px; display: block; }

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.site-nav a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 500;
}
.site-nav a:hover { color: var(--ink); background: var(--line-soft); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.site-head__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-head__end .btn { min-height: 38px; padding: 8px 16px; }

/* The burger only exists below the nav breakpoint. */
.burger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

/* The menu sheet drops from the top, as the mockup's "Menu, open" panel shows. */
/* ⚠️ The panel is taller than a landscape phone now that it carries up to ten
   links (the landing page, since Bots and Developers joined), and `open()`
   locks the page behind it, so if the sheet itself does not scroll, the last
   links and the store button are simply unreachable.
   The scroll lives on the backdrop, which is the element sized to the
   viewport; clicking it still closes the menu. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(12, 17, 22, 0.32);
}
.sheet[data-open="true"] { display: block; }

.sheet__panel {
  background: var(--surface);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  padding: 14px var(--gut) 20px;
  box-shadow: var(--shadow-lift);
  animation: sheetIn 0.22s ease;
}
@keyframes sheetIn { from { transform: translateY(-12px); opacity: 0; } }

.sheet__top { display: flex; align-items: center; min-height: 48px; }
.sheet__close {
  margin-left: auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}
.sheet__links { margin: 6px 0 14px; }
.sheet__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sheet__links a:last-child { border-bottom: 0; }
.sheet__links a[data-secondary] { color: var(--ink-3); font-weight: 500; }
.sheet__panel .btn { width: 100%; justify-content: center; }

/* ── Sticky download bar (phones only) ───────────────────────────────────── */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.sticky-cta__text { line-height: 1.25; }
.sticky-cta__title { font-weight: 700; font-size: var(--t-small); }
.sticky-cta__note { font-size: var(--t-caption); color: var(--muted); }
.sticky-cta .btn { margin-left: auto; min-height: 40px; padding: 9px 18px; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.section { padding-block: var(--sp-section); }
.section--band { background: var(--surface-2); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.section__head { display: grid; gap: 14px; max-width: 46rem; }
.section__head .lede { margin-top: 2px; }

/* Features opens with the product, not an empty half-screen. The drawing is
   inline UI rather than decorative artwork, so it stays sharp at every size
   and explains the new messaging tools without loading another asset. */
.feature-hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.feature-hero__visual {
  position: relative;
  min-width: 0;
  padding: clamp(8px, 1.5vw, 16px);
  overflow: hidden;
  border: 1px solid rgba(12, 17, 22, 0.12);
  border-radius: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(circle at 18% 8%, rgba(55, 168, 255, 0.18), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(108, 63, 196, 0.18), transparent 32%),
    #111419;
  box-shadow: var(--shadow-lift);
}
.feature-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.feature-hero__visual svg { display: block; width: 100%; height: auto; }

@media (min-width: 940px) {
  .feature-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.95fr); }
  .feature-hero__grid .section__head { max-width: 41rem; }
}

@media (max-width: 939px) {
  .feature-hero__visual { width: min(100%, 680px); }
}

/* Two-column blocks. ⚠️ On a phone every one of these stacks text first and the
   visual second — that is the mockup's own rule, and it is why the visual is a
   later sibling in the markup rather than a floated element. */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .split--narrow-visual { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.checks { display: grid; gap: 12px; margin-top: 26px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-small); color: var(--ink-2); }
.checks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 26px;
  font-weight: 600;
  font-size: var(--t-small);
}
.arrow-link svg { width: 14px; height: 14px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 36px;
  /* Room for the sticky bar so the last line never hides under it. */
  padding-bottom: calc(36px + var(--sticky-room, 0px));
}
.site-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
}
.site-foot__brand { display: grid; gap: 2px; }
.site-foot__brand .brand { font-size: 1rem; }
/* The product line, in the one place the site introduces itself by name —
   the same pairing the iOS sign-in screen uses under the app mark. It names
   both contours on purpose: a slogan that mentions only the corporate half
   tells the larger half they opened the wrong app. */
.site-foot__tagline { font-size: var(--t-caption); font-weight: 600; color: var(--ink-2); }
.site-foot__note { font-size: var(--t-caption); color: var(--muted); }
.site-foot__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-foot__links a { font-size: var(--t-small); color: var(--ink-2); font-weight: 500; }
.site-foot__links a:hover { color: var(--accent); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) 0; }

/* The soft bloom behind the headline. Decorative, so it is hidden from
   assistive tech and stops moving when the reader asks for less motion. */
.hero__bloom {
  position: absolute;
  top: -22%;
  left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background:
    radial-gradient(38% 46% at 32% 42%, rgba(55, 168, 255, 0.22), transparent 70%),
    radial-gradient(34% 44% at 68% 38%, rgba(108, 63, 196, 0.20), transparent 70%),
    radial-gradient(30% 36% at 50% 70%, rgba(255, 138, 128, 0.14), transparent 72%);
  filter: blur(14px);
  animation: bloomDrift 18s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bloomDrift {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-50%, -16px) scale(1.05); }
}

.hero__inner { position: relative; text-align: center; display: grid; justify-items: center; gap: 22px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--t-caption);
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(12, 17, 22, 0.04);
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  animation: softPulse 2.6s ease-in-out infinite;
}
@keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.hero .lede { margin-inline: auto; text-align: center; }
.hero .store-row { justify-content: center; margin-top: 6px; }

/* ── Product shot ────────────────────────────────────────────────────────── */

.shot {
  margin-top: clamp(2rem, 1rem + 4vw, 3.5rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--night);
}

.shot__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
  color: #aab3c0;
  font-size: var(--t-caption);
}
.rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(224, 72, 63, 0.16);
  color: #ff8a80;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.rec__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--alert); animation: softPulse 1.6s ease-in-out infinite; }

/* ⚠️ Тот же значок на светлой карточке. Цвет #ff8a80 выбран под тёмный кадр
   продуктового снимка и на белом даёт 1.85:1 — нечитаемо. Здесь свой тон. */
.mock .rec { background: rgba(224, 72, 63, 0.10); color: #a8342c; }

.shot__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}
@media (min-width: 760px) {
  .shot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Four across, the tile stops being a portrait box and becomes a strip. */
  .shot__grid .tile { aspect-ratio: 5 / 2; }
}

.tile {
  position: relative;
  display: grid;
  place-content: center;
  gap: 8px;
  justify-items: center;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  background: var(--night-2);
  border: 1px solid var(--night-line);
  color: #cdd4de;
  font-size: var(--t-caption);
}
.tile[data-speaking="true"] { border-color: var(--link); box-shadow: 0 0 0 1px var(--link) inset; }
.avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font: 600 12px/1 var(--sans);
  color: #fff;
}

.shot__panel {
  display: grid;
  gap: 22px;
  padding: 18px 16px 20px;
  background: var(--surface);
}
@media (min-width: 860px) { .shot__panel { grid-template-columns: 1.15fr 1fr; gap: 34px; padding: 22px 22px 24px; } }

.panel__label {
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}

.line { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 7px 0; }
.line__at { font: 400 11px/1.5 var(--mono); color: var(--muted); }
.line__who { font-weight: 600; font-size: var(--t-caption); }
.line__text { font-size: var(--t-caption); color: var(--ink-3); }

.summary {
  padding: 11px 13px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(108, 63, 196, 0.06);
  font-size: var(--t-caption);
  color: var(--ink-2);
}
.todo { display: grid; gap: 10px; margin-top: 14px; }
.todo li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.todo .avatar { width: 24px; height: 24px; font-size: 10px; }
.todo__task { font-size: var(--t-caption); font-weight: 600; }
.todo__meta { font: 400 11px/1.4 var(--mono); color: var(--accent-ink); }

/* ── Stats ───────────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  border-block: 1px solid var(--line);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat__value { font-size: var(--t-stat); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat__label { margin-top: 8px; font-size: var(--t-caption); color: var(--ink-3); max-width: 15em; }

/* ── Phone slider ────────────────────────────────────────────────────────── */

.slider__head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.slider__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-small); font-weight: 500; }
.slider__hint svg { width: 14px; height: 14px; }

/* ⚠️ Cards keep the mockup's 240 px on every width, including the phone. At
   390 pt that shows one card and half of the next, which is the point: a half
   card is what tells the reader the row scrolls. */
.slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 16px;
  margin-top: 30px;
  padding-bottom: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.slider::-webkit-scrollbar { height: 6px; }
.slider::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
.slide { scroll-snap-align: start; }
.slide__caption { margin-top: 14px; }
.slide__title { font-size: var(--t-small); font-weight: 700; }
.slide__text { margin-top: 4px; font-size: var(--t-caption); color: var(--ink-3); }

/* The phone frame. Aspect ratio is a real 390 × 844 screen. */
.phone {
  position: relative;
  border-radius: 30px;
  padding: 7px;
  background: var(--ink);
  box-shadow: var(--shadow-card);
}
.phone__screen {
  position: relative;
  aspect-ratio: 390 / 690;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.35;
}
.phone__screen--dark { background: var(--night); color: #dfe4ea; }

.ph-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 11px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.phone__screen--dark .ph-top { border-bottom-color: var(--night-line); }
.ph-title { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }

.ph-body { flex: 1; overflow: hidden; padding: 9px 11px; display: grid; gap: 8px; align-content: start; }
/* Страховка к тому же: содержимое плитки не должно задавать ширину колонки. */
.ph-body > * { min-width: 0; }

.ph-chips { display: flex; gap: 6px; }
.chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
}
.chip[data-on="true"] { background: var(--link); color: #fff; }

.ph-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ph-row .avatar { width: 28px; height: 28px; font-size: 10px; }
.ph-name { font-weight: 600; font-size: 11px; }
.ph-preview { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-meta { text-align: right; font-size: 9px; color: var(--muted); display: grid; gap: 3px; justify-items: end; }
.ph-unread {
  min-width: 16px; padding: 1px 5px;
  border-radius: var(--r-pill);
  background: var(--link); color: #fff;
  font-size: 9px; font-weight: 700; text-align: center;
}

.ph-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 7px 6px calc(7px + 4px);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.phone__screen--dark .ph-tabs { border-top-color: var(--night-line); background: var(--night); }
.ph-tab { display: grid; justify-items: center; gap: 3px; font-size: 8px; color: var(--muted); }
.ph-tab[data-on="true"] { color: var(--link); }
.ph-tab svg { width: 15px; height: 15px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  gap: 16px;
  margin-top: clamp(2rem, 1.2rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(12, 17, 22, 0.03);
}
.section--band .card { background: var(--surface); }
.card__icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(31, 111, 208, 0.10);
  color: var(--link);
  margin-bottom: 14px;
}
.card__icon svg { width: 16px; height: 16px; }
.card__icon--accent { background: rgba(108, 63, 196, 0.10); color: var(--accent); }
.card__icon--ok { background: rgba(47, 125, 79, 0.10); color: var(--ok); }
.card__icon--warm { background: rgba(255, 138, 128, 0.16); color: #c4564c; }
.card__title { font-size: var(--t-small); font-weight: 700; }
.card__text { margin-top: 6px; font-size: var(--t-caption); color: var(--ink-3); }

/* ── Demo cards (memory, voice) ──────────────────────────────────────────── */

.demo {
  padding: 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
}

.ask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.ask svg { flex: none; width: 15px; height: 15px; color: var(--accent); }

.answer__label {
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.answer__text { margin-top: 7px; font-size: var(--t-small); color: var(--ink); }
.cite {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 5px;
  background: rgba(108, 63, 196, 0.12);
  color: var(--accent-ink);
  font: 600 10px/1 var(--mono);
  vertical-align: 2px;
}

.source {
  padding: 12px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.source__head { display: flex; align-items: center; gap: 9px; }
.source__who { font-size: var(--t-caption); font-weight: 700; }
.source__when { margin-left: auto; font-size: 11px; color: var(--muted); }
.source__quote { margin-top: 7px; font-size: var(--t-caption); color: var(--ink-3); }
.play {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 12px;
  border: 0; border-radius: var(--r-sm);
  background: var(--accent); color: #fff;
  font: 600 11px/1 var(--sans);
  cursor: default;
}
.play svg { width: 10px; height: 10px; }

.voice__head { display: flex; align-items: center; gap: 12px; }
.voice__play {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
}
.voice__play svg { width: 12px; height: 12px; }
.wave { flex: 1; display: flex; align-items: center; height: 26px; }
.wave { gap: 3px; }
/* Запасная высота: столбик без инлайнового значения всё равно рисуется. */
.wave i { width: 3px; height: 55%; flex: none; border-radius: 2px; background: var(--link); opacity: 0.85; }
.voice__time { font: 400 11px/1 var(--mono); color: var(--muted); }
.voice__said { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-caption); }
.voice__translated {
  display: flex; gap: 9px; align-items: baseline;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(108, 63, 196, 0.07);
  font-size: var(--t-caption);
  color: var(--ink-2);
}
.lang-tag {
  font: 600 9px/1 var(--mono); letter-spacing: 0.06em;
  padding: 4px 6px; border-radius: 5px;
  background: rgba(108, 63, 196, 0.14); color: var(--accent-ink);
}
.langs { display: flex; flex-wrap: wrap; gap: 6px; }
.langs li {
  font: 500 10px/1 var(--mono); letter-spacing: 0.06em;
  padding: 6px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--ink-3);
}

/* ── QR block ────────────────────────────────────────────────────────────── */

.qr-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 30px 24px;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.qr-card svg { width: min(210px, 62%); height: auto; }
.qr-card p { max-width: 24em; text-align: center; font-size: var(--t-caption); color: var(--ink-3); }

/* ── Closing block ───────────────────────────────────────────────────────── */

.closing .h2 { font-size: var(--t-cta); }
.closing { text-align: center; display: grid; justify-items: center; gap: 18px; }
.closing .lede { text-align: center; margin-inline: auto; }
.closing .store-row { justify-content: center; }

.platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  width: 100%;
}
.platform { flex: 1 1 150px; max-width: 260px; }
.platform {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
}
.platform__name { font-size: var(--t-small); font-weight: 700; }
.platform__note { margin-top: 3px; font-size: var(--t-caption); color: var(--muted); }

/* ── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  .site-nav { display: none; }
  .site-head__end .btn--ghost { display: none; }
  .burger { display: inline-flex; }
  .sticky-cta { display: flex; }
  body { --sticky-room: 64px; }
  /* The mockup centres the hero on a phone and trims the paragraph's width. */
  .hero__inner { gap: 18px; }
  /* Stacked and full width is right on a phone. On a 834 pt tablet the same
     rule gave a button 790 pt wide, which reads as a mistake rather than a
     call to action — so the column is capped and centred. */
  .hero .store-row, .closing .store-row {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    flex-direction: column;
  }
  .hero .store-row .btn, .closing .store-row .btn { width: 100%; justify-content: center; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .shot__panel { padding: 16px 14px 18px; }
}

@media (min-width: 900px) {
  .sheet { display: none !important; }
}

/* ── Chip navigation (Features) ──────────────────────────────────────────── */

.chip-nav {
  position: sticky;
  top: 62px;
  z-index: 30;
  background: rgba(251, 250, 249, 0.9);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.chip-nav ul {
  display: flex;
  gap: 6px;
  padding-block: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chip-nav ul::-webkit-scrollbar { display: none; }
.chip-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 500;
}
.chip-nav a:hover { background: var(--line-soft); color: var(--ink); }
.chip-nav a[aria-current="true"] { background: rgba(12, 17, 22, 0.06); color: var(--ink); font-weight: 600; }
.chip-nav .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* Two stacked sticky bars, so anchors have to clear both. */
.has-chip-nav [id] { scroll-margin-top: 122px; }

/* ⚠️ At 200 % browser zoom the window is short, and two pinned bars took
   almost half of it — leaving a strip of content between them and the
   keyboard. Below that height they stop being pinned; the page is short
   enough there that scrolling back up costs nothing. */
@media (max-height: 560px) {
  .site-head, .chip-nav { position: static; }
  .has-chip-nav [id] { scroll-margin-top: 12px; }
}

/* ── List groups ─────────────────────────────────────────────────────────── */

.groups {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  margin-top: clamp(2rem, 1.2rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* ⚠️ Между 700 и 1023 три колонки не помещаются, а `auto-fit` даёт «2 + 1» —
   то есть ряд с сиротой. Одна колонка честнее: полоса всё равно не нарисована ни в
   одном макете, и читается она как телефон, только шире. */
@media (min-width: 700px) and (max-width: 1023px) {
  .groups { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .groups--balanced-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.group__label {
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.group ul { display: grid; }
.group li { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.group li:last-child { border-bottom: 0; }
.group__title { font-size: var(--t-caption); font-weight: 700; }
.group__text { margin-top: 3px; font-size: var(--t-meta); color: var(--ink-3); }

/* ── Dark section ────────────────────────────────────────────────────────── */

.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.section--dark .h2, .section--dark .display { color: #fff; }
/* ⚠️ Not `--ink-3` on a dark ground: that grey is chosen for contrast against
   the light page and falls to about 2:1 here. */
.section--dark .lede { color: rgba(255, 255, 255, 0.62); }
.section--dark .eyebrow { color: #9d8cf0; }
.section--dark :focus-visible { outline-color: #fff; }
.section--dark .btn--ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.18); }
.section--dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.section--dark .btn--dark { background: #fff; color: var(--ink); }
.section--dark .btn--dark:hover { background: #eef1f4; color: var(--ink); }
.section--dark .wrap { position: relative; }
.section--dark .bloom {
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: min(900px, 120%);
  aspect-ratio: 1.7;
  transform: translateX(-50%);
  background:
    radial-gradient(40% 50% at 40% 50%, rgba(108, 63, 196, 0.42), transparent 70%),
    radial-gradient(36% 46% at 62% 46%, rgba(55, 168, 255, 0.26), transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}
.glass {
  position: relative;
  padding: 22px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 16px;
}
.glass li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.glass .tick {
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--sky));
  color: #fff;
}
.glass .tick svg { width: 11px; height: 11px; }
.glass__title { font-size: var(--t-caption); font-weight: 700; }
.glass__text { margin-top: 3px; font-size: var(--t-meta); color: rgba(255, 255, 255, 0.62); }

.business-workflow {
  min-width: 0;
  padding: clamp(8px, 1.4vw, 14px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: clamp(20px, 3vw, 30px);
  background:
    radial-gradient(circle at 12% 12%, rgba(10, 132, 255, 0.18), transparent 34%),
    radial-gradient(circle at 92% 84%, rgba(94, 92, 230, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.06);
}
.business-workflow svg { display: block; width: 100%; height: auto; }

/* ── Chat mock (Features) ────────────────────────────────────────────────── */

.mock { padding: 16px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.mock__day { text-align: center; font-size: var(--t-meta); color: var(--muted); margin-bottom: 12px; }
.bubble { max-width: 86%; padding: 10px 13px; border-radius: 14px 14px 14px 5px; background: var(--surface-2); font-size: var(--t-caption); }
.bubble--own { margin-left: auto; border-radius: 14px 14px 5px 14px; background: var(--link); color: #fff; }
.bubble__who { font-size: var(--t-meta); font-weight: 700; color: var(--accent-ink); margin-bottom: 3px; }
.bubble__meta { margin-top: 7px; font-size: 11px; opacity: 0.75; }
.mock__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--t-meta); color: var(--muted); }
.mock__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mock__actions span {
  padding: 7px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--t-meta); font-weight: 600; color: var(--ink-2);
}

.composer-preview {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(108, 63, 196, 0.22);
  border-radius: var(--r-md);
  background: rgba(108, 63, 196, 0.06);
}
.composer-preview__label {
  font: 500 var(--t-eyebrow)/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.composer-preview__text {
  margin: 9px 0 12px;
  font-size: var(--t-caption);
  color: var(--ink);
}

/* ⚠️ `.wrap` and `.section__head` on the same element used to fight over
   `max-width`: the narrower one won and then centred itself, so a left-aligned
   hero drifted into the middle of the page. Put the head *inside* a wrap —
   and if the two do end up combined, this keeps the page width and narrows the
   lines instead of the block. */
.wrap.section__head { max-width: var(--wrap); }
.wrap.section__head > * { max-width: 46rem; }

/* These two are spans inside one cell, so they need to be told to stack —
   otherwise the service name and its role run together into one word. */
.glass__title, .glass__text, .todo__task, .todo__meta,
.line__who, .line__text, .group__title, .group__text,
.ph-name, .ph-preview { display: block; }

/* Плитка платформы, ставшая ссылкой: цвет и подчёркивание — как у обычной
   плитки, иначе она выбивается из ряда соседей. */
.platform > a { display: block; color: inherit; }
.platform > a:hover { color: inherit; }
.platform > a:hover .platform__name { color: var(--link); }

/* ── Focus, Decisions and Spaces ─────────────────────────────────────────────
   Three sections added when Focus and the decision record shipped. They reuse
   the existing card, chip and source components wherever those already said
   the right thing; what follows is only what had no equivalent — a shelf with
   a count, a warning card that quotes an older decision, a status pill that
   survives being read in greyscale, and the space switcher. */

/* ⚠️ Not #c4564c, the warm icon colour: at 4.21:1 on the page ground it is
   fine behind a 16px glyph and not fine as 11px text. This one is 4.99:1. */
.eyebrow--warm { color: #b8483f; }

/* Three panels under the hero shot instead of two. Two-up first, because three
   360 px columns only stop being cramped around 1100. */
@media (min-width: 860px) { .shot__panel--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ⚠️ Two columns and three panels is the "2 + 1" orphan row this stylesheet
   already refuses for `.groups`. Between the two breakpoints the third panel
   takes the whole second row instead of sitting beside an empty cell. */
@media (min-width: 860px) and (max-width: 1099px) { .shot__panel--three > :last-child { grid-column: 1 / -1; } }
/* minmax(0,…) like every other grid here: a bare `fr` cannot shrink below its
   content, and `.shot` is `overflow: hidden`, so a long token would clip. */
@media (min-width: 1100px) { .shot__panel--three { grid-template-columns: 1.1fr minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }

/* ── Focus shelves ───────────────────────────────────────────────────────── */

.shelves { display: grid; gap: 10px; }
.shelf {
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.shelf__head { display: flex; align-items: center; gap: 10px; }
.shelf__name { font-size: var(--t-caption); font-weight: 700; }
/* The count is the only number on the screen, so it carries the tint rather
   than the row: a coloured row for every shelf would read as four alerts. */
.shelf__count {
  margin-left: auto;
  min-width: 22px; padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font: 600 11px/1.5 var(--mono);
  text-align: center;
}
.shelf[data-open="true"] .shelf__count { background: rgba(31, 111, 208, 0.12); color: var(--link); }
.shelf__item { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.shelf__quote { font-size: var(--t-caption); color: var(--ink-2); }
.shelf__from { margin-top: 6px; font: 400 11px/1.45 var(--mono); color: var(--muted); }

.mock__actions span[data-primary] { background: var(--link); border-color: var(--link); color: #fff; }
/* ⚠️ `.mock__actions span` (0,1,1) outranks `.play` (0,1,0), so a play button
   dropped into an action row lost its accent, its padding and its type and
   came out as a third grey chip — while the same `.play` two blocks down kept
   them. Restated here at matching specificity rather than reordered. */
.mock__actions .play {
  margin: 0;
  padding: 6px 12px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: 600 11px/1 var(--sans);
}

/* ── The contradiction card ──────────────────────────────────────────────── */

.watch {
  padding: 14px;
  border: 1px solid rgba(224, 72, 63, 0.26);
  border-radius: var(--r-md);
  background: rgba(224, 72, 63, 0.05);
}
/* ⚠️ Not #e0483f on this tint: it lands near 3:1 on the wash. This is the same
   darker red the light-ground REC badge uses. */
.watch__head { display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-caption); font-weight: 700; color: #a8342c; }
.watch__head svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.watch__old { margin-top: 11px; padding: 11px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); }
.watch__why { margin-top: 8px; font-size: var(--t-meta); color: var(--ink-3); }

/* ── Decision status and supersession ────────────────────────────────────── */

/* ⚠️ Colour is never the only carrier: each pill keeps its own glyph, because
   active and superseded are the two a reader must not confuse and the design
   brief says statuses have to survive greyscale. */
.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status svg { width: 10px; height: 10px; }
.status--active { background: rgba(47, 125, 79, 0.10); border-color: rgba(47, 125, 79, 0.22); color: #25663f; }
.status--proposed { background: rgba(108, 63, 196, 0.10); border-color: rgba(108, 63, 196, 0.20); color: var(--accent-ink); }
.status--superseded { background: var(--surface-2); color: var(--ink-3); }

.led__row { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.led__row:last-child { border-bottom: 0; }
.led__text { font-size: var(--t-caption); font-weight: 600; }
.led__meta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 400 11px/1.5 var(--mono); color: var(--muted); }
.chain { margin-top: 10px; padding-left: 13px; border-left: 2px solid var(--line); display: grid; gap: 6px; }
.chain p { font-size: var(--t-meta); color: var(--ink-3); }

/* ── Space switcher ──────────────────────────────────────────────────────── */

.sw { padding: 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sw__label {
  padding: 4px 6px 9px;
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.sw__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: var(--r-sm); }
.sw__row[data-on="true"] { background: var(--surface-2); }
.sw__row .avatar { width: 28px; height: 28px; font-size: 11px; }
.sw__name { display: block; font-size: var(--t-caption); font-weight: 600; }
/* --ink-3, not --muted: the selected row is `--surface-2`, where --muted is
   4.35:1 — and this note is the line that says an admin can read the chat. */
.sw__note { display: block; font-size: 11px; color: var(--ink-3); }
.sw__tick { color: var(--link); }
.sw__tick svg { width: 14px; height: 14px; display: block; }
.sw__foot { margin-top: 7px; padding: 9px 6px 3px; border-top: 1px solid var(--line-soft); font-size: var(--t-meta); color: var(--muted); }

/* The same switcher inside a phone mock, where the base font is 11 px and the
   fluid caption sizes are a third too large. */
.phone__screen .sw { padding: 7px; border-radius: 10px; }
.phone__screen .sw__label { padding: 3px 5px 7px; font-size: 8px; }
.phone__screen .sw__row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 6px 5px; }
.phone__screen .sw__row .avatar { width: 22px; height: 22px; font-size: 9px; }
.phone__screen .sw__name { font-size: 10.5px; }
.phone__screen .sw__note { font-size: 9px; }
.phone__screen .sw__foot { font-size: 9px; padding: 7px 5px 2px; }
.phone__screen .shelf { padding: 8px 9px; border-radius: 9px; }
.phone__screen .shelf__name { font-size: 10.5px; }
.phone__screen .shelf__count { font-size: 9px; min-width: 18px; padding: 1px 6px; }
.phone__screen .shelf__item { margin-top: 8px; padding-top: 8px; }
.phone__screen .shelf__quote { font-size: 10px; }
.phone__screen .shelf__from { font-size: 9px; margin-top: 4px; }
.phone__screen .led__row { padding: 8px 0; }
.phone__screen .led__text { font-size: 10px; }
.phone__screen .led__meta { font-size: 9px; margin-top: 4px; gap: 6px; }
.phone__screen .status { font-size: 8px; padding: 2px 6px; }
.phone__screen .chain p { font-size: 9px; }

/* ── SMeet Bots ──────────────────────────────────────────────────────────────
   The two product pages (/bots, /ru/bots) and the Bots sections of the other
   three pages, added 26.09.2026. Everything here is new: a chat with a bot in
   the phone frame, the buttons under a bot's message, the pilot notice, the
   numbered steps, the documentation grid, the FAQ and the organisation's two
   switches. The existing cards, groups, checks and glass lists are reused as
   they are. */

code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  font: 500 0.88em/1.4 var(--mono);
  /* An API address in a phone-width column is longer than the column: let it
     break rather than push the page sideways. */
  overflow-wrap: anywhere;
}
.section--dark code { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: #fff; }

/* The language switch of the two bots pages. A plain link, not a ghost button,
   because below 900 px the ghost buttons leave the header and this must not. */
.lang-switch {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}
.lang-switch:hover { color: var(--ink); border-color: #d8d5cf; }
/* On a phone the bots pages keep the brand, the language switch and the menu;
   "Create a bot" moves to the sticky bar at the bottom, which carries it anyway.
   Three header items plus a button did not fit a 360 px screen in Russian. */
@media (max-width: 899px) {
  .site-head__cta { display: none; }
}

/* The pilot notice. One block per page, between the PILOT NOTICE comments,
   plus the small tag on the three Bots sections: the day access opens, they
   go with one deletion each (landing/README.md, "The pilot notice"). */
.pilot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  max-width: 36rem;
  padding: 12px 15px;
  border: 1px solid rgba(138, 82, 0, 0.28);
  border-radius: var(--r-md);
  background: rgba(255, 149, 0, 0.08);
  color: var(--ink-2);
  font-size: var(--t-caption);
  text-align: left;
}
.pilot__label {
  font: 600 var(--t-eyebrow)/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a5200;
}
.pilot a { font-weight: 600; }
.pilot-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(255, 149, 0, 0.14);
  color: #8a5200;
  font: 600 10px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.section--dark .pilot-tag { background: rgba(255, 196, 120, 0.16); color: #ffc278; }

/* The product page hero: the site's hero, but text on the left and the phone
   on the right, so it does not centre. */
.bots-hero { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.bots-hero .split { position: relative; }
/* The phone is 290 px wide, so the text gets the larger share, and the
   headline a step below the centred heroes: it sits in half the page. */
@media (min-width: 900px) { .bots-hero .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.bots-hero .display { font-size: clamp(2.125rem, 4.2vw, 3.5rem); }
.bots-hero__text { display: grid; gap: 20px; justify-items: start; }
.bots-hero .bots-hero__text .lede { margin-inline: 0; text-align: left; }
.bots-hero .bots-hero__text .store-row { justify-content: flex-start; margin-top: 2px; }
@media (max-width: 899px) {
  .bots-hero .bots-hero__text .store-row { margin-inline: 0; }
}

/* ── A chat with a bot, in the phone frame ───────────────────────────────── */

/* No tab bar in these phones. The app hides it inside a conversation, so a
   chat screen with one would be a screen that does not exist, and the five
   copies of the bar the README counts stay five. */
.phone--solo { width: min(100%, 290px); margin-inline: auto; }
.section--dark .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), var(--shadow-lift); }
.bot-figure { margin: 0; }
.bot-figure figcaption { margin-top: 14px; text-align: center; font-size: var(--t-caption); color: var(--muted); }
.section--dark .bot-figure figcaption { color: rgba(255, 255, 255, 0.62); }

.chat-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  /* Stated, not inherited: inside a dark section the text colour is white. */
  color: var(--ink);
}
.chat-top__back { flex: none; width: 13px; height: 13px; color: var(--link); }
.chat-top .avatar { flex: none; width: 26px; height: 26px; font-size: 10px; }
.chat-top__name { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; }
/* No "last seen" and no call button under a bot's name: the app hides both for
   bots, so the mock does too. The address sits there instead. */
.chat-top__sub { display: block; font: 400 9px/1.3 var(--mono); color: var(--muted); }

/* The "Bot" mark is a word, not a colour: it has to read in greyscale too. */
.bot-tag {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(31, 111, 208, 0.12);
  color: #1a5fb4;
  font: 600 8px/1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Bottom-aligned like a real conversation: when the lines outgrow the screen
   the oldest are the ones that go, never the reply. */
.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 10px 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.msg {
  align-self: flex-start;
  max-width: 86%;
  padding: 7px 9px;
  border-radius: 12px 12px 12px 4px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(12, 17, 22, 0.05);
  color: var(--ink);
  font-size: 10.5px;
  line-height: 1.38;
}
.msg--own { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--link); color: #fff; box-shadow: none; }

/* Buttons under a bot's message: rows of equal cells, as the app lays them out. */
.kbd { align-self: flex-start; width: 86%; display: grid; gap: 4px; margin-top: -2px; }
.kbd__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.kbd__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--link);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.kbd__btn svg { flex: none; width: 8px; height: 8px; }
.kbd__btn[data-pressed="true"] { border-color: rgba(31, 111, 208, 0.4); background: rgba(31, 111, 208, 0.10); }

.chat-compose {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 10px 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.chat-compose__cmd { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font: 600 11px/1 var(--mono); }
.chat-compose__field { padding: 6px 11px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font-size: 10px; }

/* The same chat at page scale, for the Features and Business cards. */
/* Bubbles hug their text here, as they do in the app; the older chat mock on
   Features keeps its fixed-width bubbles. */
.bot-chat .bubble { width: fit-content; }
.bot-chat .bubble--own { justify-self: end; }
.bot-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.bot-head .avatar { width: 30px; height: 30px; font-size: 11px; flex: none; }
.bot-head__name { display: flex; align-items: center; gap: 7px; font-size: var(--t-caption); font-weight: 700; }
.bot-head__name .bot-tag { font-size: 9px; padding: 2px 6px; }
.bot-head__sub { display: block; font: 400 11px/1.4 var(--mono); color: var(--muted); }
.kbd--wide { width: min(100%, 360px); margin-top: 8px; gap: 6px; }
.kbd--wide .kbd__row { gap: 6px; }
.kbd--wide .kbd__btn { min-height: 34px; padding: 6px 10px; border-radius: 10px; font-size: var(--t-meta); }
.kbd--wide .kbd__btn svg { width: 10px; height: 10px; }
.cmds { display: grid; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.cmds li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-meta); }
.cmds li:last-child { border-bottom: 0; }
.cmds__name { font-family: var(--mono); font-weight: 500; color: var(--link); }
.cmds__text { color: var(--ink-3); }
.cmds__label { padding: 8px 12px 0; font: 500 var(--t-eyebrow)/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ── Steps, the terminal line, the documentation grid ────────────────────── */

.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 13px; align-items: start; counter-increment: step; }
.steps > li::before {
  content: counter(step);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 600 12px/1 var(--mono);
}
.step__title { display: block; padding-top: 3px; font-size: var(--t-small); font-weight: 700; }
.step__text { display: block; margin-top: 3px; font-size: var(--t-caption); color: var(--ink-3); }

.term {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--night);
  color: #dfe4ea;
  font: 400 12px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.term__prompt { color: #7cc4ff; }
.term__out { color: #aab3c0; }

.doclinks {
  display: grid;
  gap: 12px;
  margin-top: clamp(2rem, 1.2rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.doclink {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.doclink:hover { color: var(--ink); border-color: #d8d5cf; box-shadow: var(--shadow-card); }
.doclink__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-small); font-weight: 700; }
.doclink__title svg { flex: none; width: 13px; height: 13px; color: var(--link); }
.doclink__text { font-size: var(--t-caption); color: var(--ink-3); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

/* The questions and answers are repeated word for word in the page's
   FAQPage structured data; landing/tools/check_bots_site.py compares them. */
.faq { display: grid; gap: 10px; margin-top: clamp(2rem, 1.2rem + 3vw, 3rem); max-width: 52rem; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-small);
  font-weight: 600;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.faq__item[open] .faq__q::after { transform: translateY(2px) rotate(-135deg); }
.faq__a { padding: 0 18px 16px; max-width: 46rem; font-size: var(--t-caption); color: var(--ink-3); }

/* ── The organisation's two switches ─────────────────────────────────────── */

/* Drawn as the web client draws them (components/SpaceBotsPolicy): two
   checkboxes with their own hints, labels quoted from the app. */
.switches { padding: 2px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.switch-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.switch-row:last-child { border-bottom: 0; }
.switch-row__name { display: block; font-size: var(--t-caption); font-weight: 700; }
.switch-row__text { display: block; margin-top: 2px; font-size: var(--t-meta); color: var(--ink-3); }
/* A tick, not a tint, says the box is on: the state survives greyscale. */
.tickbox { width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border: 1.5px solid #c9c5bf; border-radius: 5px; background: var(--surface); color: #fff; }
.tickbox svg { width: 11px; height: 11px; }
.tickbox[data-on="true"] { border-color: var(--ok); background: var(--ok); }

/* Six use cases, so three across: `auto-fit` would give "4 + 2" on a laptop,
   the orphan row this stylesheet already refuses for `.groups`. */
@media (min-width: 900px) { .cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 899px) { .cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.term { display: block; }
.section--dark .arrow-link { color: #fff; }
.section--dark .arrow-link:hover { color: #c9bdf7; }

/* Platform-aware downloads remain in iPhone/Android/Mac order without JavaScript. */
.growth-secondary { background: transparent; border: 0; padding-inline: 8px; font-size: 13px; }
.growth-qr { padding: 10px; border-radius: 16px; background: white; }
.growth-qr[hidden] { display: none; }
.growth-qr img { display: block; }
#faq details { padding: 20px 0; border-bottom: 1px solid rgba(128,128,128,.25); }
#faq summary { cursor: pointer; font-weight: 600; }
#faq details p { max-width: 72ch; line-height: 1.65; }