/* Gluline /welcome.
   The page is the app's own chat wallpaper; glass appears only where the app has
   glass (the demo's header pill and composer, the nav pill, the quick-reply bar).
   Tokens are lifted from the shipped client (web/next/web-glass.css) unless a
   comment says why they differ (contrast on a marketing surface). */

@font-face {
  font-family: "Inter Display";
  src: url("fonts/InterDisplay-Black-latcyr.woff2?v=202609280400") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Until Inter Display arrives (swap), a local heavy face scaled to the same
   advance widths, so the cqi-fitted three-line H1 keeps its breaks and the
   demo below it does not jump when the font lands. Measured on the H1 lines. */
@font-face {
  font-family: "Inter Display Fallback";
  src: local("Arial Black"), local("ArialMT-Black");
  font-weight: 900;
  /* Arial Black runs 8.7-13% wider than Inter Display on the H1 lines
     («который думает» 8.75em vs 8.05em, "A messenger" 6.78em vs 6.07em) */
  size-adjust: 91%;
  ascent-override: 97%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ================================================================ tokens */
:root {
  color-scheme: light dark;

  --font-display: "Inter Display", "Inter Display Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --accent: oklch(0.64 0.12 195);
  --accent-2: oklch(0.57 0.13 215);
  --accent-soft: oklch(0.64 0.12 195 / 0.14);
  --accent-soft-2: oklch(0.64 0.12 195 / 0.22);
  --accent-grad: linear-gradient(150deg, var(--accent), var(--accent-2));
  --accent-txt: oklch(0.47 0.12 208);
  /* Filled controls that carry white text. The app's accent gives white text
     2.4 to 3.1:1; this pair gives 5.5:1 and stays in the same hue family. */
  --cta-grad: linear-gradient(150deg, oklch(0.52 0.12 210), oklch(0.47 0.12 220));
  /* the same fill for engines without oklch() (iOS < 15.4, Chromium < 111):
     declared as background-color under the gradient image, so an invalid
     gradient still leaves white text on teal */
  --cta-solid: #00718c;

  /* page ink, set on the wallpaper */
  --ink: oklch(0.2 0.03 212);
  --ink-2: oklch(0.36 0.03 212);
  --ink-link: oklch(0.38 0.1 214);
  --rule: oklch(0.25 0.04 205 / 0.16);
  --halo: #ffffff;

  /* app UI text (inside the demo, the cards, the instrument) */
  --txt: oklch(0.24 0.025 220);
  --txt-2: oklch(0.44 0.025 220);
  --txt-3: oklch(0.53 0.02 220);

  /* glass */
  --lg-tint-rgb: 255, 255, 255;
  --lg-tint-a: 0.62;
  --lg-sat: 1.4;
  --lg-rim-a: 0.28;
  --lg-frost: 5px;
  --lg-rim: rgba(255, 255, 255, 0.92);
  --lg-glow: rgba(255, 255, 255, 0.5);
  --g-border: rgba(255, 255, 255, 0.7);
  --g-border-2: rgba(255, 255, 255, 0.5);
  --g-hi: rgba(255, 255, 255, 0.85);
  --g-bg-strong: rgba(255, 255, 255, 0.82);
  --pop-bg: rgba(249, 252, 253, 0.97);
  --field: rgba(255, 255, 255, 0.66);
  --press: rgba(120, 160, 180, 0.16);
  --hair: rgba(20, 45, 60, 0.12);
  --card-bg: rgba(255, 255, 255, 0.8);
  --card-edge: rgba(255, 255, 255, 0.85);
  --g-shadow: 0 12px 38px -10px rgba(30, 55, 75, 0.22);
  --g-shadow-sm: 0 6px 18px -8px rgba(30, 55, 75, 0.2);
  --g-shadow-lg: 0 26px 60px -18px rgba(20, 45, 65, 0.4);

  /* bubbles */
  --recv: rgba(255, 255, 255, 0.72);
  --recv-txt: oklch(0.26 0.03 220);
  --sent-grad: linear-gradient(160deg, #e4fbec, #cbf1d9);
  --sent-txt: #10331a;
  --sent-meta: color-mix(in oklch, #10331a 72%, transparent);

  /* wallpaper: the auth / iOS / Android --wall as the base ... */
  --wall:
    radial-gradient(62% 58% at 4% -2%, oklch(0.8 0.11 196 / 0.42), transparent 62%),
    radial-gradient(56% 52% at 100% 3%, oklch(0.85 0.09 172 / 0.36), transparent 56%),
    radial-gradient(72% 68% at 90% 102%, oklch(0.74 0.12 234 / 0.42), transparent 72%),
    radial-gradient(66% 62% at 8% 100%, oklch(0.82 0.1 158 / 0.38), transparent 66%),
    linear-gradient(165deg, #eef5f6, #f4f8f8 50%, #eaf3f4);
  /* ... with the web client's sage mesh laid over it at partial strength. */
  --mesh-a: 0.36;
  --mesh-still:
    radial-gradient(60% 60% at 26.5% 58.2%, #cfe0d2, transparent 70%),
    radial-gradient(55% 55% at 41.5% 83.6%, #7ec3a4, transparent 70%),
    radial-gradient(60% 60% at 73.5% 41.8%, #5db298, transparent 72%),
    radial-gradient(55% 55% at 58.5% 16.4%, #c2dcbb, transparent 70%),
    #93c7ac;
  --doodle-tile: 900px;
  --doodle-tint: #16323a;
  --doodle-a: 0.085;

  /* the demo's own screen: the app's real light wallpaper at full strength */
  --screen-base: #93c7ac;
  --screen-mesh-a: 1;

  --bezel: linear-gradient(160deg, #fbfdfd, #e2eaeb 55%, #d3dddf);
  --bezel-rim: rgba(255, 255, 255, 0.95);
  --bezel-edge: rgba(20, 40, 50, 0.16);

  --vault: oklch(0.25 0.03 218);
  --vault-ink: oklch(0.84 0.06 190);
  --vault-txt: oklch(0.95 0.01 210);
  --vault-txt-2: oklch(0.82 0.025 205);
  --vault-tile: rgba(255, 255, 255, 0.09);
  /* the ledger's «Не видит…» panel: an opaque recessed well, so no doodle
     runs under its text (light); in dark a navy the app's own surfaces reach,
     not the switch vault's near-black */
  --vault-panel: color-mix(in oklch, #eef5f6 94%, #16323a);
  /* the vault once the assistant is on: it holds readable text, so it lifts
     from the recessed black to a paper surface with ink on it */
  --vault-open: #f6faf9;
  --vault-open-ink: oklch(0.22 0.03 215);
  /* 3:1 edge for off-state controls (WCAG 1.4.11) */
  --ctl-edge: rgba(62, 74, 84, 0.62);
  /* the stroked G is the brand mark: #57b3a8 in both themes, as in the app,
     the favicon and the chat-list screenshot (a logo is exempt from 1.4.3) */
  --mark: #57b3a8;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-snap: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* layout */
  --gutter: clamp(16px, 4.6vw, 88px);
  --maxw: 1600px;
  --sec: clamp(104px, 12vw, 200px);
  --nav-h: 58px;
  /* Two peaks, H1 and the close, and nothing louder: section H2s sit at about
     0.65 of the H1. --fs-h1 is the H1's own size (12.1cqi of its column)
     restated in viewport units, so headings in other containers can be capped
     by it. Below 1024 the H1 column is the full content width. */
  --h1-k: 0.121;
  --fs-h1: clamp(2rem, calc(var(--h1-k) * (100vw - 2 * var(--gutter))), 7.9rem);
  /* phones: 34px from 360 (31px at 320, where the H1 itself is 35px), so a
     section title always outranks the Glu lines under it by 1.6x */
  --fs-h2: clamp(min(2.125rem, 9.7vw), 1.2rem + 3vw, 4.25rem);
  --fs-lead: clamp(1rem, 0.93rem + 0.42vw, 1.3rem);
  /* the demo's UI unit: 1px on phones; the desktop phone scales its chat with its height */
  --u: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: oklch(0.72 0.12 195);
    --accent-2: oklch(0.66 0.13 215);
    --accent-soft: oklch(0.72 0.12 195 / 0.2);
    --accent-soft-2: oklch(0.72 0.12 195 / 0.3);
    --accent-txt: oklch(0.83 0.11 196);
    /* nearer the app's bright dark chip; the start stop still gives white 4.59:1 */
    --cta-grad: linear-gradient(150deg, oklch(0.54 0.12 200), oklch(0.47 0.12 220));
    --cta-solid: #00758a;

    --ink: oklch(0.96 0.01 220);
    --ink-2: oklch(0.82 0.02 220);
    --ink-link: oklch(0.86 0.1 196);
    --rule: oklch(0.96 0.01 220 / 0.14);
    --halo: #04070c;

    --txt: oklch(0.95 0.012 220);
    --txt-2: oklch(0.76 0.02 220);
    --txt-3: oklch(0.74 0.02 220);

    --lg-tint-rgb: 30, 40, 52;
    --lg-rim: rgba(255, 255, 255, 0.4);
    --lg-glow: rgba(255, 255, 255, 0.14);
    --g-border: rgba(255, 255, 255, 0.14);
    --g-border-2: rgba(255, 255, 255, 0.08);
    --g-hi: rgba(255, 255, 255, 0.22);
    --g-bg-strong: rgba(44, 56, 72, 0.8);
    --pop-bg: rgba(38, 48, 62, 0.98);
    --field: rgba(48, 60, 78, 0.64);
    --press: rgba(255, 255, 255, 0.12);
    --hair: rgba(255, 255, 255, 0.09);
    --card-bg: rgba(22, 31, 44, 0.84);
    --card-edge: rgba(255, 255, 255, 0.12);
    --g-shadow: 0 16px 44px -12px rgba(0, 0, 0, 0.55);
    --g-shadow-sm: 0 8px 22px -10px rgba(0, 0, 0, 0.5);
    --g-shadow-lg: 0 34px 80px -24px rgba(0, 0, 0, 0.8);

    --recv: rgba(54, 66, 84, 0.62);
    --recv-txt: oklch(0.94 0.015 220);
    /* the app's violet sent bubble (#8f7fee -> #6f59d8): its own end stop, and
       a start one step deeper so white text still clears 4.5:1 (4.58:1) */
    --sent-grad: linear-gradient(160deg, #7762de, #6f59d8);
    --sent-txt: #ffffff;
    --sent-meta: #ffffff;

    /* the Android prototype's richer dark wall */
    --wall:
      radial-gradient(62% 58% at 4% -2%, oklch(0.5 0.15 196 / 0.45), transparent 62%),
      radial-gradient(56% 52% at 100% 3%, oklch(0.48 0.13 172 / 0.4), transparent 56%),
      radial-gradient(72% 68% at 90% 102%, oklch(0.46 0.16 240 / 0.46), transparent 72%),
      radial-gradient(66% 62% at 8% 100%, oklch(0.48 0.14 158 / 0.4), transparent 66%),
      linear-gradient(165deg, #0b1220, #0d1624 55%, #0a1018);
    --mesh-a: 0.06;
    --mesh-still:
      radial-gradient(60% 60% at 26.5% 58.2%, #7fc0bd, transparent 70%),
      radial-gradient(55% 55% at 41.5% 83.6%, #89b9e3, transparent 70%),
      radial-gradient(60% 60% at 73.5% 41.8%, #8f9fe0, transparent 72%),
      radial-gradient(55% 55% at 58.5% 16.4%, #dd9db0, transparent 70%),
      #8fb0cf;
    --wp-glow: 0.17;

    /* the phone and the switch's chat well wear the SHIPPED dark wall
       (web-glass.css .app[data-theme=dark] --wall), with the mesh glowing
       through the doodles at the app's strength, so they match the real
       dark screenshots on the page; the page keeps its richer wall around them */
    --screen-base:
      radial-gradient(62% 58% at 4% -2%, rgba(0, 122, 127, 0.11), transparent 62%),
      radial-gradient(56% 52% at 100% 3%, rgba(0, 116, 77, 0.08), transparent 56%),
      radial-gradient(72% 68% at 90% 102%, rgba(0, 94, 167, 0.1), transparent 72%),
      radial-gradient(66% 62% at 8% 100%, rgba(0, 116, 61, 0.07), transparent 66%),
      linear-gradient(165deg, #03060a, #04070b 50%, #020407);
    --screen-mesh-a: 0.13;

    --bezel: linear-gradient(160deg, #2c3643, #19202a 50%, #121820);
    --bezel-rim: rgba(255, 255, 255, 0.26);
    --bezel-edge: rgba(0, 0, 0, 0.6);

    --vault: oklch(0.14 0.02 225);
    --vault-panel: oklch(0.2 0.025 225);
    --vault-ink: oklch(0.82 0.07 190);
    --vault-open: oklch(0.35 0.025 220);
    --vault-open-ink: #ffffff;
    --ctl-edge: rgba(205, 215, 225, 0.5);
  }
}

/* ================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: #e9f3f1;
  /* a focused link is never left under the fixed quick-reply bar */
  scroll-padding-bottom: 96px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) { html { background: #0b1220; } }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; }
a { color: inherit; }
p, ul, ol, h1, h2, h3, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 700; }
template { display: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Focus: a 2px ink ring with a 2px halo between it and the element, so it
   clears 3:1 on every part of the wall in both themes. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--halo); }
/* the same halo on the controls that set a box-shadow of their own (their
   rules come later and would otherwise drop it) */
.pill-btn:focus-visible, .mini-switch:focus-visible, .kb-cta:focus-visible, .demo-pause:focus-visible { box-shadow: 0 0 0 2px var(--halo); }
.sec-title:focus, .sec-title:focus-visible, .hero h1:focus, main:focus { outline: none; box-shadow: none; }
::selection { background: color-mix(in oklch, var(--accent) 34%, transparent); }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  padding: 10px 16px; border-radius: 12px;
  background: var(--pop-bg); color: var(--txt); font-weight: 650; text-decoration: none;
  box-shadow: var(--g-shadow);
}
.skip:focus { top: 12px; }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.022em;
  word-spacing: 0.02em;
  font-kerning: normal;
}
/* English sets tighter; its H1 is shorter, so it fills its column at a larger factor */
:root:lang(en) { --h1-k: 0.146; }
/* at -0.03em the space in "A messenger" closes up; a little word space opens it */
.display:lang(en) { letter-spacing: -0.03em; word-spacing: 0.06em; }

/* ============================================================= wallpaper */
.wall {
  position: fixed;
  left: 0; top: 0; right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  background: var(--wall);
  overflow: hidden;
}
.wp { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-mesh { background: var(--mesh-still); opacity: var(--mesh-a); }
.wp-glyph { display: none; }
.wall::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--doodle-tint);
  -webkit-mask: url("doodles.svg?v=202609280400") 0 0 / var(--doodle-tile) repeat;
          mask: url("doodles.svg?v=202609280400") 0 0 / var(--doodle-tile) repeat;
  opacity: var(--doodle-a);
}
@media (prefers-color-scheme: dark) {
  /* dark: the mesh glows through the doodle shapes (the app's rule), over the
     richer wall; a faint unmasked wash lets the 700 ms tween read at night */
  .wp-glyph {
    display: block;
    background: var(--mesh-still);
    -webkit-mask: url("doodles.svg?v=202609280400") 0 0 / var(--doodle-tile) repeat;
            mask: url("doodles.svg?v=202609280400") 0 0 / var(--doodle-tile) repeat;
    opacity: var(--wp-glow);
  }
  .wall::after { display: none; }
}
@media (max-width: 720px) { :root { --doodle-tile: 620px; } }

.page { position: relative; z-index: 1; }

/* ================================================================= glass */
.glass {
  position: relative;
  isolation: isolate;
  background: rgba(var(--lg-tint-rgb), var(--lg-tint-a));
  border: 0.5px solid var(--g-border);
  box-shadow: var(--g-shadow-sm), inset 0 1px 0 0 var(--g-hi);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 16px -8px rgba(255, 255, 255, var(--lg-rim-a)), inset 1px 1px 0 -1px var(--lg-rim), inset 0 0 6px 0 var(--lg-glow);
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  -webkit-backdrop-filter: blur(var(--lg-frost)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-frost)) saturate(var(--lg-sat));
}
.glass > * { position: relative; z-index: 1; }
/* Refraction: desktop only, on the two demo panels only, and parked while the
   page scrolls or the demo moves its rows (the app's .gl-scrolling rule). */
@media (min-width: 1024px) and (hover: hover) {
  .device .glass::after { filter: url("#lg-refract"); }
  .is-scrolling .device .glass::after,
  .device.is-moving .glass::after { filter: none; }
}

/* ================================================================ layout */
.top, main > section, .foot {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =================================================================== nav */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--nav-h);
  padding-top: max(8px, env(safe-area-inset-top));
}
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; border-radius: 10px; padding: 6px 2px; }
.brand-mark { width: 28px; height: 29px; color: var(--mark); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16)); }
.brand-word { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; }
.top-nav { display: flex; align-items: center; gap: 2px; }
.top-link {
  font-size: 15px; font-weight: 600; text-decoration: none;
  padding: 11px 12px; border-radius: 999px;
  transition: background-color 0.18s ease;
}
.pill-btn {
  font-size: 15px; font-weight: 650; text-decoration: none; color: var(--txt);
  padding: 11px 18px; border-radius: 999px;
  background: var(--field);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border: 0.5px solid var(--g-border);
  box-shadow: inset 0 1px 0 var(--g-hi), 0 4px 14px -8px rgba(0, 0, 0, 0.3);
  transition: transform 0.14s var(--ease-out), background-color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .top-link:hover { background-color: rgba(var(--lg-tint-rgb), 0.4); }
  .pill-btn:hover { background: var(--g-bg-strong); }
}
.pill-btn:active { transform: scale(0.96); }

/* ================================================================== hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(4px, 2vw, 28px);
}
.h1-wrap { container-type: inline-size; min-width: 0; }
.hero h1 {
  /* «который думает» is 8.05em wide: 12.1cqi keeps the three-line set
     «Мессенджер, / который думает / вместе с вами» at every width. EN:
     "A messenger" is 6.07em and "that thinks with" 7.1em, so 14.6cqi keeps
     "A messenger / that thinks / with you". */
  font-size: clamp(2rem, 10.6vw, 7.9rem);
  font-size: clamp(2rem, calc(var(--h1-k) * 100cqi), 7.9rem);
  line-height: 1.02;
}
/* phones: more room between the «д» descender of line 1 and the «й» breve of line 2 */
@media (max-width: 480px) { .hero h1 { line-height: 1.07; } }
/* a phone on its side: the width-sized H1 would fill the whole first screen */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --fs-h1: clamp(2rem, 11vh, 4rem); }
  .hero h1 { font-size: clamp(2rem, 11vh, 4rem); }
}
.consent {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: clamp(12px, 2vw, 28px);
  font-size: clamp(16.5px, 0.95rem + 0.45vw, 22px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.006em;
  max-width: 30em;
}
/* Not a fake control: a link to the real switch, drawn as its off state. */
.mini-switch {
  flex: none; position: relative;
  width: 40px; height: 24px; border-radius: 12px;
  margin-top: max(0px, calc((1.3em - 24px) / 2));
  background: rgba(24, 44, 54, 0.14);
  box-shadow: inset 0 0 0 1px var(--ctl-edge), inset 0 1px 2px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.consent > span { text-wrap: balance; }
.mini-switch::after { content: ""; position: absolute; inset: -10px -8px; }
.mini-switch i {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.28s var(--ease-snap);
}
.mini-switch:focus-visible { border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .mini-switch:hover i { transform: translateX(4px); } }
.mini-switch::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent-grad); opacity: 0; transition: opacity 0.18s ease;
}
.mini-switch.is-going::before { opacity: 1; }
.mini-switch.is-going i { transform: translateX(16px); transition-duration: 0.18s; }
@media (prefers-color-scheme: dark) {
  .mini-switch { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px var(--ctl-edge); }
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 33em;
  text-wrap: pretty;
}
.hero-lead { margin-top: clamp(8px, 1.4vw, 18px); }
/* Phones: the lead restates what the demo shows, so it follows the demo (with
   the small print) and the demo rises about 100px into the first screen; the
   consent line stays right under the tagline. Reading order is unchanged. */
@media (max-width: 520px) {
  .hero-ctas { margin-top: 16px; }
  .hero-lead { order: 1; margin-top: 22px; text-wrap: balance; }
  .fine { order: 2; }
}
@media (min-width: 1024px) { .hero-lead { text-wrap: balance; } }

.ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 24px; row-gap: 4px;
}
.hero-ctas { margin-top: clamp(14px, 2.6vw, 36px); }
.badges { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.badge { display: block; border-radius: 9px; }
.badge img { height: 44px; width: auto; }
@media (min-width: 1024px) { .badge img { height: 48px; } }
/* 320: both badges on one row (126 + 142 + 8 <= 288) */
@media (max-width: 359px) { .badge img { height: 42px; } .badges { column-gap: 8px; } }
.web-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 16.5px; font-weight: 650; color: var(--ink-link);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklch, currentColor 42%, transparent);
  padding-block: 8px;
  border-radius: 6px;
  transition: text-decoration-color 0.18s ease;
}
.web-link svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .web-link:hover { text-decoration-color: currentColor; }
  .web-link:hover svg { transform: translateX(3px); }
}
.fine { font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.005em; margin-top: 14px; }
.fine span:not(.sep) { white-space: nowrap; }
/* below 1024 (phones, and the tablet's narrow text column): two deliberate
   lines, the break taking the place of a separator, so a dot never ends a line */
@media (max-width: 1023.98px) { .fine .sep-br { display: block; height: 0; overflow: hidden; } }

.hero-demo { position: relative; margin-top: 10px; min-width: 0; }

/* ---------------------------------------------------------------- device
   Below calc(1024 * var(--u)) the demo is a frameless glass chat panel (the app's thread
   surface). From calc(1024 * var(--u)) it sits in a neutral phone bezel. */
.device {
  position: relative;
  height: 468px;
  border-radius: 28px;
}
/* only the narrowest phones (320, 340) wrap round 1 onto enough extra lines
   to need a taller panel; 360 keeps the 468 one, or it opens on an empty band */
@media (max-width: 349px) { .device { height: 524px; } }
.screen {
  position: relative;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  background: var(--screen-base);
  color: var(--txt);
  font-family: var(--font-ui);
  box-shadow: var(--g-shadow-lg), 0 0 0 0.5px var(--bezel-edge), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  /* the header and the seeded day chip answer to the screen's own size (the
     desktop phone scales with the viewport's HEIGHT, not its width) */
  container: screen / size;
  /* the apps' own doodle tile (iOS PerChatWallpaperStore 600, Android
     WP_DOODLE_TILE 600.dp), in the demo's UI unit */
  --doodle-tile: calc(600 * var(--u));
  --head-top: calc(10 * var(--u));
  --head-h: calc(56 * var(--u));
  --th-top: calc(var(--head-top) + var(--head-h) + 10 * var(--u));
  --th-bot: calc(76 * var(--u));
  --comp-bottom: calc(12 * var(--u));
}
.screen .wp-screen { z-index: 0; background: var(--mesh-still); opacity: var(--screen-mesh-a); }
.screen-ink {
  position: absolute; inset: 0; z-index: 1;
  background: var(--doodle-tint);
  -webkit-mask: url("doodles.svg?v=202609280400") 0 0 / var(--doodle-tile) repeat;
          mask: url("doodles.svg?v=202609280400") 0 0 / var(--doodle-tile) repeat;
  opacity: 0.1;
}
@media (prefers-color-scheme: dark) {
  .screen { box-shadow: var(--g-shadow-lg), 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 0 70px -24px oklch(0.6 0.12 196 / 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .screen .wp-screen {
    background: #8fb0cf;
    -webkit-mask: url("doodles.svg?v=202609280400") 0 0 / var(--doodle-tile) repeat;
            mask: url("doodles.svg?v=202609280400") 0 0 / var(--doodle-tile) repeat;
  }
  .screen-ink { display: none; }
}

.status { display: none; }

.thread {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  display: flex; flex-direction: column;
  /* a chat sits on its composer: the newest row is always just above it, any
     slack is under the header (where the day chip lives), and older rows
     slide up under the glass header */
  justify-content: flex-end;
  padding: var(--th-top) calc(12 * var(--u)) var(--th-bot);
  /* as in the app, rows run on under the glass header and read frosted
     through it: full strength until 26 units below the pill, half at its
     bottom edge, gone at its top edge (nothing above it, round the status bar) */
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--head-top), rgba(0, 0, 0, 0.5) calc(var(--head-top) + var(--head-h)), #000 calc(var(--head-top) + var(--head-h) + 26 * var(--u)));
          mask-image: linear-gradient(to bottom, transparent var(--head-top), rgba(0, 0, 0, 0.5) calc(var(--head-top) + var(--head-h)), #000 calc(var(--head-top) + var(--head-h) + 26 * var(--u)));
}
/* The seeded «Сегодня» chip shows only where round 1 AND the chip fit under
   the header: never half-under the frost. welcome.js measures it (.is-cut);
   without JS, the short phone panel (under 560px) drops it. */
.row.seed.is-cut { display: none; }
@container screen (max-height: 560px) { .row.seed { display: none; } }
.thread-inner {
  flex: none;
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
  font-size: calc(14.5 * var(--u)); line-height: 1.4;
}
.row { display: flex; }
.row.sent { justify-content: flex-end; }
.row.ai + .row.sent, .row.sent + .row.ai, .row.day + .row { margin-top: calc(5 * var(--u)); }
.row.day { justify-content: center; padding: calc(2 * var(--u)) 0 calc(4 * var(--u)); }
.day-chip {
  font-size: calc(12 * var(--u)); font-weight: 600; color: var(--txt-2);
  padding: calc(5 * var(--u)) calc(13 * var(--u)); border-radius: calc(14 * var(--u));
  background: rgba(var(--lg-tint-rgb), 0.66);
  border: calc(0.5 * var(--u)) solid var(--g-border);
}
.bubble {
  max-width: 84%;
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u));
  border-radius: calc(18 * var(--u));
  position: relative;
  overflow-wrap: break-word;
}
.bubble .meta {
  font-size: calc(11 * var(--u)); margin-left: calc(9 * var(--u)); float: right; margin-top: calc(6 * var(--u));
  display: inline-flex; align-items: center; gap: calc(3 * var(--u));
  font-variant-numeric: tabular-nums; color: var(--txt-3); line-height: 1.2;
}
.bubble.recv {
  background: var(--recv); color: var(--recv-txt);
  border: calc(0.5 * var(--u)) solid var(--g-border);
  border-bottom-left-radius: calc(6 * var(--u));
  box-shadow: var(--g-shadow-sm), inset 0 calc(1 * var(--u)) 0 var(--g-hi);
}
.bubble.sent {
  color: var(--sent-txt);
  background: var(--sent-grad);
  border: calc(0.5 * var(--u)) solid rgba(255, 255, 255, 0.16);
  border-bottom-right-radius: calc(6 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) -8px var(--accent-soft-2), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.4);
}
.bubble.sent .meta { color: var(--sent-meta); }
.ticks { width: calc(16 * var(--u)); height: calc(11 * var(--u)); }

.bubble.dots { display: flex; gap: calc(5 * var(--u)); align-items: center; padding: calc(13 * var(--u)) calc(16 * var(--u)); }
.bubble.dots i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--accent); opacity: 0.4; animation: gtBlink 1.2s infinite ease-in-out; }
.bubble.dots i:nth-child(2) { animation-delay: 0.2s; }
.bubble.dots i:nth-child(3) { animation-delay: 0.4s; }
.is-paused .bubble.dots i { animation-play-state: paused; }
@keyframes gtBlink { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ai-col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); min-width: 0; max-width: 100%; }
.ai-col .bubble { max-width: 92%; }
.ai-bubble { padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)); }
.ai-bubble > * + * { margin-top: calc(8 * var(--u)); }
.ai-bubble .meta { margin-top: calc(2 * var(--u)); }
.glu-text { font-size: calc(14.5 * var(--u)); line-height: 1.48; color: var(--txt); }
.glu-card {
  display: flex; align-items: center; gap: calc(11 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(13 * var(--u));
  background: var(--field); border: calc(0.5 * var(--u)) solid var(--g-border-2);
}
.glu-date, .glu-bell {
  width: calc(40 * var(--u)); flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1 * var(--u));
  min-height: calc(40 * var(--u)); padding: calc(4 * var(--u)) 0; border-radius: calc(10 * var(--u)); background: var(--accent-soft); color: var(--accent-txt);
}
.gd-day { font-size: calc(9.5 * var(--u)); font-weight: 800; letter-spacing: calc(0.5 * var(--u)); }
.gd-num { font-size: calc(17 * var(--u)); font-weight: 800; line-height: 1; }
.glu-bell svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.glu-card-b { flex: 1; min-width: 0; }
.glu-card-t { font-size: calc(13.5 * var(--u)); font-weight: 650; line-height: 1.3; }
.glu-card-s { font-size: calc(12 * var(--u)); color: var(--txt-3); margin-top: calc(1 * var(--u)); }
.glu-src {
  display: inline-flex; align-items: center;
  padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(7 * var(--u));
  font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--txt-2);
  background: var(--field); border: calc(0.5 * var(--u)) solid var(--g-border-2);
}
.ai-bubble > .glu-src { margin-top: calc(7 * var(--u)); }
.glu-chips { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); }
.glu-chip {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(7 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(11 * var(--u));
  font-size: calc(12.5 * var(--u)); font-weight: 650; line-height: 1.25; white-space: nowrap;
  color: var(--accent-txt);
  background: var(--g-bg-strong);
  border: calc(0.5 * var(--u)) solid color-mix(in oklch, var(--accent) 34%, transparent);
  transition: transform 0.16s var(--ease-out), filter 0.16s ease;
}
.glu-chip svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); flex: none; }
/* The demo's filled controls wear the app's own accent, exactly as the Glu
   screenshot further down shows them (white on #09b5b9 dark, #009ea2 light).
   A deliberate exception to the 4.5:1 rule: the demo is an aria-hidden
   picture of the UI with an sr-only transcript, and the page's real controls
   (the quick-bar «Скачать») keep the darker --cta-grad. */
.glu-chip.primary {
  color: #fff; background-color: var(--accent); background-image: var(--accent-grad); border-color: transparent;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) -8px var(--accent-soft-2), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.25);
}
/* The app's draft quote carries a calc(3 * var(--u)) accent side stripe; here it says
   "draft" with a tint and a full hairline instead. */
.glu-draft {
  border-radius: calc(13 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u));
  background: color-mix(in oklch, var(--accent) 8%, var(--field));
  border: calc(0.5 * var(--u)) solid color-mix(in oklch, var(--accent) 32%, transparent);
}
.glu-draft-q {
  display: flex; align-items: center; gap: calc(5 * var(--u)); margin-bottom: calc(5 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: calc(0.5 * var(--u)); color: var(--accent-txt);
}
.glu-draft-q span { text-transform: uppercase; }
.glu-draft-q em { font-style: normal; font-weight: 650; letter-spacing: 0; font-size: calc(12 * var(--u)); }
.glu-draft-q svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.glu-draft p { font-size: calc(14.5 * var(--u)); line-height: 1.45; color: var(--txt); }
.ds-wrap { margin-top: calc(9 * var(--u)); }
.draft-send {
  position: relative; display: inline-grid;
  padding: calc(7 * var(--u)) calc(15 * var(--u)); border-radius: calc(11 * var(--u));
  font-size: calc(13.5 * var(--u)); font-weight: 700; color: #fff;
  background-color: var(--accent); background-image: var(--accent-grad);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) -8px var(--accent-soft-2), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.16s var(--ease-out);
}
.draft-send > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); transition: opacity 0.2s ease, filter 0.2s ease, transform 0.26s var(--ease-out); }
.draft-send svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.draft-send .ds-sent { opacity: 0; filter: blur(calc(3 * var(--u))); transform: scale(0.9); }
.draft-send.is-sent { background: var(--field); background-image: none; color: var(--accent-txt); box-shadow: inset 0 0 0 calc(0.5 * var(--u)) color-mix(in oklch, var(--accent) 36%, transparent); }
.draft-send.is-sent .ds-send { opacity: 0; filter: blur(calc(3 * var(--u))); transform: scale(1.06); }
.draft-send.is-sent .ds-sent { opacity: 1; filter: none; transform: none; }

.p-head {
  position: absolute; z-index: 5; top: var(--head-top); left: calc(10 * var(--u)); right: calc(10 * var(--u));
  display: flex;
}
.p-pill {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: var(--head-h); padding: 0 calc(16 * var(--u)) 0 calc(12 * var(--u));
  border-radius: calc(100 * var(--u));
}
.p-back { flex: none; display: grid; place-items: center; color: var(--txt-2); margin-right: calc(-1 * var(--u)); }
.p-back svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.p-acts { flex: none; display: flex; align-items: center; gap: calc(16 * var(--u)); color: var(--txt-2); transition: opacity 0.2s ease; }
.p-pill.has-toast .p-acts { opacity: 0; }
.p-acts svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
/* a narrow screen (320 phones, the 1366x768 laptop's phone) keeps the
   calendar and drops search, so «ИИ‑ассистент» never runs into a glyph */
@container screen (max-width: 300px) { .p-acts svg:first-child { display: none; } }
@container screen (max-width: 236px) { .p-acts { display: none; } }
.glu-ava {
  flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) -4px var(--accent-soft-2), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.3), 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.22);
}
.glu-ava svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.p-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.p-name b, .p-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-name b { font-size: calc(16 * var(--u)); font-weight: 650; }
.p-name small { font-size: calc(12.5 * var(--u)); color: var(--txt-2); }

.p-composer {
  position: absolute; z-index: 5; left: calc(10 * var(--u)); right: calc(10 * var(--u)); bottom: var(--comp-bottom);
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u)) calc(18 * var(--u)); border-radius: calc(26 * var(--u)); min-height: calc(50 * var(--u));
}
.p-mic { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); display: grid; place-items: center; color: var(--txt-2); }
.p-mic svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.p-composer:not(.has-text) .send-btn, .p-composer.has-text .p-mic { display: none; }
.p-field { flex: 1; min-width: 0; font-size: calc(15 * var(--u)); white-space: nowrap; overflow: hidden; }
.p-ph { color: var(--txt-3); }
.p-typed:empty { display: none; }
.p-field.has-text .p-ph { display: none; }
.p-typed::after { content: ""; display: inline-block; width: calc(2 * var(--u)); height: 1.05em; margin-left: calc(1 * var(--u)); vertical-align: -2px; background: var(--accent); animation: caret 1.05s steps(2, jump-none) infinite; }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.send-btn {
  flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) -6px var(--accent-soft-2), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.16s var(--ease-out);
}
.send-btn svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }

/* the send confirmation takes the title's place (as a messenger shows
   "typing..."); the header's two glyphs step aside for it, so it is never cut */
.p-id { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.p-id > * { grid-area: 1 / 1; align-self: center; transition: opacity 0.2s ease, transform 0.32s var(--ease-snap); }
.p-toast {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap; position: relative; z-index: 1;
  font-size: calc(14.5 * var(--u)); font-weight: 650; color: var(--txt);
  opacity: 0; transform: translateY(calc(8 * var(--u)));
}
.p-toast svg { flex: none; width: calc(17 * var(--u)); height: calc(17 * var(--u)); color: var(--accent-txt); }

.p-pill.has-toast .p-name { opacity: 0; transform: translateY(calc(-8 * var(--u))); }
.p-pill.has-toast .p-toast { opacity: 1; transform: none; }

.touch {
  position: absolute; z-index: 9; left: 0; top: 0; width: calc(42 * var(--u)); height: calc(42 * var(--u)); margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: rgba(20, 40, 45, 0.18);
  box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.8), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease;
}
.touch.is-on { opacity: 1; }
.is-pressed { transform: scale(0.94); filter: brightness(1.06); }
/* before the demo starts, a real tap on a chip plays its round at once */
.device.is-tappable .glu-chip[data-tap] { cursor: pointer; }

/* live-mode entrances (JS on, motion allowed): transform + opacity only */
.row.is-new { animation: rowIn 0.42s var(--ease-out) both; }
.row.sent.is-new { animation-name: sentIn; animation-duration: 0.36s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes sentIn { from { opacity: 0; transform: translateY(14px) scale(0.94); transform-origin: 100% 100%; } }
.w { transition: opacity 0.18s ease; }
.w.is-hidden { display: none; }
.w.is-fresh { opacity: 0; }
[data-reveal].is-hidden { display: none; }
.is-rising { animation: rowIn 0.36s var(--ease-out) both; }
.meta.is-hidden { visibility: hidden; }

.demo-pause {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  width: max-content; height: 34px; margin: 12px auto 0; padding: 0 14px 0 11px;
  border-radius: 999px; cursor: pointer;
  font: 650 13.5px/1 var(--font-ui); color: var(--ink);
  background: rgba(var(--lg-tint-rgb), 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  border: 0.5px solid var(--g-border);
  box-shadow: inset 0 1px 0 var(--g-hi);
  transition: transform 0.14s var(--ease-out), background-color 0.15s ease;
}
.demo-pause::after { content: ""; position: absolute; inset: -5px -4px; border-radius: 999px; }
.demo-pause[hidden] { display: none; }
.demo-pause svg { width: 13px; height: 13px; flex: none; }
.demo-pause .ic-play { display: none; }
.demo-pause.is-paused .ic-pause { display: none; }
.demo-pause.is-paused .ic-play { display: block; }
.demo-pause:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .demo-pause:hover { background-color: rgba(var(--lg-tint-rgb), 0.72); } }

/* ------------------------------------------------------------- tablet */
@media (min-width: 700px) and (max-width: 1023.98px) {
  /* the consent line sits right under the tagline, as the brief asks; the
     panel beside the text column starts on the same line */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 46%);
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .h1-wrap { grid-column: 1 / -1; grid-row: 1; }
  .consent { grid-column: 1; grid-row: 2; margin-top: 22px; }
  .hero-lead { grid-column: 1; grid-row: 3; }
  .hero-ctas { grid-column: 1; grid-row: 4; }
  .fine { grid-column: 1; grid-row: 5; }
  .hero-demo { grid-column: 2; grid-row: 2 / span 5; margin-top: 22px; }
  .device { height: 480px; }
  .hero-ctas .web-link { flex-basis: 100%; }
}

/* ------------------------------------------------------------ desktop */
@media (min-width: 1024px) {
  :root {
    --nav-h: 84px;
    /* the phone stands fully in view from the nav line down, with room under it
       for the pause pill: the composer is part of the demo, so it is never cut */
    --dev-h: clamp(600px, calc(100vh - var(--nav-h) - 64px), 1010px);
    --dev-h: clamp(600px, calc(100svh - var(--nav-h) - 64px), 1010px);
    --hero-gap: clamp(40px, 5vw, 120px);
    /* the H1's column = content width - gap - phone; 16px allows for a
       classic scrollbar so the caps never pass the real H1 */
    --fs-h1: clamp(2rem, calc(var(--h1-k) * (min(100vw - 16px, var(--maxw)) - 2 * var(--gutter) - var(--hero-gap) - 0.472 * var(--dev-h))), 7.9rem);
  }
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: var(--hero-gap);
    padding-top: 0;
  }
  .h1-wrap, .consent, .hero-lead, .hero-ctas, .fine { grid-column: 1; }
  .h1-wrap { padding-top: clamp(28px, 11vh, 132px); }
  .hero h1 { font-size: clamp(2rem, 5.6vw, 7.9rem); font-size: clamp(2rem, calc(var(--h1-k) * 100cqi), 7.9rem); line-height: 1.04; }
  .fine { grid-row: 5; }
  /* the phone's right edge sits on the gutter line, under «Войти» */
  .hero-demo { grid-column: 2; grid-row: 1 / -1; margin: 0; }

  .device {
    --bz: 10px;
    height: var(--dev-h);
    aspect-ratio: 0.472;
    border-radius: 62px;
    padding: var(--bz);
    background: var(--bezel);
    box-shadow:
      var(--g-shadow-lg),
      0 60px 120px -50px rgba(10, 30, 40, 0.45),
      inset 0 0 0 1px var(--bezel-edge),
      inset 1.5px 1.5px 0 0 var(--bezel-rim),
      inset -1px -1px 0 0 rgba(255, 255, 255, 0.2);
  }
  .screen {
    border-radius: 52px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    --head-top: calc(56 * var(--u));
    --th-bot: calc(100 * var(--u));
    --comp-bottom: calc(34 * var(--u));
  }
  .status {
    display: flex; position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: calc(50 * var(--u));
    align-items: center; justify-content: space-between;
    padding: calc(6 * var(--u)) calc(30 * var(--u)) 0 calc(36 * var(--u));
    font-size: calc(15 * var(--u)); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--txt);
  }
  .cam { position: absolute; left: 50%; top: calc(17 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-left: -6.5px; border-radius: 50%; background: #05080b; box-shadow: inset 0 0 0 calc(2 * var(--u)) #121a22, 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.06); }
  .st-icons svg { width: calc(60 * var(--u)); height: calc(13 * var(--u)); }
}
/* a short laptop (1366x768, 1280x800): the phone is only ~600px tall, so its
   chat sets a touch smaller and round 1 clears the header with room to spare */
@media (min-width: 1024px) and (max-height: 820px) { :root { --u: 0.92px; } }
@media (min-width: 1024px) and (min-height: 860px) { :root { --u: 1.05px; } }
@media (min-width: 1024px) and (min-height: 960px) { :root { --u: 1.12px; } }
@media (min-width: 1024px) and (min-height: 1040px) { :root { --u: 1.19px; } }
@media (prefers-color-scheme: dark) and (min-width: 1024px) {
  .device {
    box-shadow:
      var(--g-shadow-lg),
      0 0 90px -30px oklch(0.62 0.12 196 / 0.4),
      inset 0 0 0 1px var(--bezel-edge),
      inset 1.5px 1.5px 0 0 var(--bezel-rim),
      inset -1px -1px 0 0 rgba(255, 255, 255, 0.08);
  }
  .screen { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); }
}

/* ============================================================== sections */
main > section { padding-top: var(--sec); }
/* the rhythm is not a metronome: Glu and the switch are one argument and sit
   close; the limits get the long breath before them */
main > .switch { padding-top: clamp(72px, 7vw, 104px); }
main > .limits { padding-top: clamp(136px, 15.5vw, 232px); }
main h2 { font-size: var(--fs-h2); line-height: 1.04; }
.sec-title { position: relative; scroll-margin-top: 24px; }
/* the app's jump-to-message highlight band */
.sec-title.is-flash::before {
  content: ""; position: absolute; z-index: -1;
  top: -0.14em; bottom: -0.14em; left: -100vw; right: -100vw;
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  animation: flash 1.6s var(--ease-out) both;
}
@keyframes flash { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
/* reduced motion: the band is simply there while the heading holds focus */
@media (prefers-reduced-motion: reduce) {
  .sec-title.is-flash::before { animation: none !important; opacity: 1; }
}

/* ------------------------------------------------------------------ Glu */
.glu { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(30px, 4vw, 60px); }
.glu h2 { max-width: 12em; text-wrap: balance; }
.does { display: grid; gap: clamp(16px, 2vw, 26px); }
/* 21px on a 390 phone (the 34px H2 above is 1.6x), 19px at 320, 30px from about 740 */
.does li {
  font-size: clamp(19px, 2.6vw + 11px, 30px);
  font-weight: 650; line-height: 1.26; letter-spacing: -0.014em;
  max-width: 21em; text-wrap: pretty;
}
.nw { white-space: nowrap; }
.atom { display: inline-flex; vertical-align: 0.08em; margin-left: 0.14em; }
.atom-unread {
  align-items: center; justify-content: center;
  min-width: 1.32em; height: 1.08em; padding: 0 0.34em; border-radius: 0.6em;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0; color: #fff; vertical-align: 0.14em;
  background-color: var(--accent); background-image: var(--accent-grad);
  box-shadow: 0 2px 8px -3px var(--accent-soft-2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-variant-numeric: tabular-nums;
}
.atom-date {
  align-items: center; justify-content: center; gap: 0.28em;
  height: 1.08em; padding: 0 0.36em 0 0.32em; border-radius: 0.3em;
  font-size: 0.72em; vertical-align: 0.14em; line-height: 1;
  background: var(--accent-soft); color: var(--accent-txt);
  box-shadow: inset 0 0 0 0.5px color-mix(in oklch, var(--accent) 30%, transparent);
}
.atom-date b { font-size: max(9px, 0.62em); font-weight: 800; letter-spacing: 0.06em; }
.atom-date i { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.atom-send {
  align-items: center; justify-content: center; width: 1.2em; height: 1.2em; border-radius: 50%;
  vertical-align: middle; margin-top: -0.14em; color: #fff;
  /* one fill for the inline atoms, the app's own: the badge matches the one
     in the chats screenshot below */
  background-color: var(--accent); background-image: var(--accent-grad);
  box-shadow: 0 6px 16px -6px var(--accent-soft-2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.atom-send svg { width: 0.62em; height: 0.62em; }
.atom-wave { align-items: center; gap: 0.08em; height: 1em; vertical-align: middle; margin-top: -0.12em; color: var(--accent-txt); }
.atom-wave i { width: 0.09em; border-radius: 0.05em; background: currentColor; height: 0.4em; }
.atom-wave i:nth-child(2) { height: 0.7em; }
.atom-wave i:nth-child(3) { height: 0.5em; }
.atom-wave i:nth-child(4) { height: 0.9em; }
.atom-wave i:nth-child(5) { height: 0.6em; }
.atom-wave i:nth-child(6) { height: 0.8em; }
.atom-wave i:nth-child(7) { height: 0.35em; }
.atom-wave i:nth-child(8) { height: 0.62em; }
.atom-wave i:nth-child(9) { height: 0.3em; }

/* the app's AI settings group: the one card on the page, because it is UI */
.ai-card {
  align-self: start;
  border-radius: 24px;
  background: var(--card-bg);
  border: 0.5px solid var(--card-edge);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hi);
  color: var(--txt);
  max-width: 560px;
}
.ai-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; }
/* the card's header is Glu's identity, so it wears Glu's round avatar (iOS
   GluAssistantAvatar); settings rows keep the square tile */
.ai-card-head .tile-glu {
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.22);
}
.ai-card-name { display: flex; flex-direction: column; line-height: 1.15; }
.ai-card-name b { font-size: 17px; font-weight: 700; }
.ai-card-name small { font-size: 13px; color: var(--txt-2); }
.ai-rules li {
  position: relative;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px;
  padding: 13px 18px 14px 22px;
}
.ai-rules li::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 0.5px; background: var(--hair); }
.ai-rules p { font-size: 15.5px; line-height: 1.45; color: var(--txt-2); text-wrap: pretty; }
.ai-rules strong { display: block; color: var(--txt); font-weight: 650; margin-bottom: 2px; }
.rg { width: 21px; height: 21px; margin-top: 1px; color: var(--txt-2); }
.ai-rules li:last-child { padding-bottom: 18px; }

.tile {
  position: relative;
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: var(--t, #5b8def);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.tile svg { width: 18px; height: 18px; }
.tile-glu { background: var(--accent-grad); }
.t-blue { --t: #5b8def; }
/* the app's settings palette, exactly (the glyphs sit next to a text label) */
.t-amber { --t: #d9a02c; }
.t-green { --t: #22b07d; }
/* what the server cannot read: a recessed tile and a lock badge. Light: the
   app's field surface with the accent glyph; dark: the vault's ink. */
.t-lock { background: var(--field); color: var(--accent-txt); box-shadow: inset 0 0 0 0.5px var(--g-border-2); }
.tile .tb {
  position: absolute; right: -5px; bottom: -5px; width: 15px; height: 15px; padding: 2px;
  border-radius: 50%; color: #fff; background: var(--accent-txt);
  box-shadow: 0 0 0 2px var(--vault-panel);
}
@media (prefers-color-scheme: dark) {
  .t-lock { background: var(--vault-tile); color: var(--vault-ink); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); }
  .tile .tb { color: var(--vault-panel); background: var(--vault-ink); box-shadow: 0 0 0 2px var(--vault-panel); }
}

@media (min-width: 1024px) {
  .glu { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px); }
  /* two columns, not an L: the settings card stands beside the heading, its
     top edge on the H2's cap height (0.16em of it under Inter Display's
     line box at 1.04) */
  .glu { grid-template-rows: auto 1fr; }
  .glu h2 { grid-column: 1 / span 7; grid-row: 1; }
  .does { grid-column: 1 / span 7; grid-row: 2; align-content: start; }
  .ai-card { grid-column: 8 / span 5; grid-row: 1 / span 2; margin-top: calc(var(--fs-h2) * 0.16); }
}

/* ------------------------------------------------------------- the switch */
.switch { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 3.4vw, 44px); }
.switch h2 { max-width: 11.5em; text-wrap: balance; }
.switch-copy .lead { margin-top: clamp(16px, 2vw, 24px); max-width: 31em; }

.instrument {
  position: relative;
  border-radius: 30px;
  padding: 8px;
  background: var(--card-bg);
  border: 0.5px solid var(--card-edge);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hi);
  color: var(--txt);
  scroll-margin-top: 16px;
}
.inst-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px 12px 12px; border-radius: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.inst-ic { flex: none; width: 22px; height: 22px; color: var(--txt-2); margin-inline: 2px 4px; }
.inst-label { flex: 1; min-width: 0; font-size: clamp(15px, 0.9rem + 0.3vw, 18px); font-weight: 650; line-height: 1.25; }
.sw-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* the app's toggle: 50x30, a 24px knob inset 3px, the --press track; the 1px
   ring is ours, so the off state clears 3:1 (WCAG 1.4.11) */
.toggle {
  flex: none; position: relative; width: 50px; height: 30px; border-radius: 15px;
  background: var(--press);
  box-shadow: inset 0 0 0 1px var(--ctl-edge);
}
.toggle::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent-grad); opacity: 0; transition: opacity 0.22s ease;
}
.toggle .knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s var(--ease-snap), width 0.16s var(--ease-out);
}
.sw-input:checked + .toggle::before, .instrument.is-on .toggle::before { opacity: 1; }
.sw-input:checked + .toggle .knob, .instrument.is-on .toggle .knob { transform: translateX(20px); }
.sw-input:focus-visible + .toggle { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--halo); }
.toggle.is-hint::after {
  content: ""; position: absolute; inset: -6px; border-radius: 21px;
  box-shadow: 0 0 0 2px var(--accent);
  animation: hint 1.1s var(--ease-out) both;
}
@keyframes hint { from { opacity: 0.9; transform: scale(0.92); } to { opacity: 0; transform: scale(1.14); } }

.panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 2px 6px 8px; }
.pane-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--txt-2);
  margin: 6px 4px 9px;
}
.lk { width: 15px; height: 15px; }
.lk-open { display: none; }

.well {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  min-height: 172px; padding: 12px 14px 16px;
  border-radius: 20px;
  background: var(--mesh-still);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  font-size: 15.5px; line-height: 1.4;
}
.well::before {
  content: ""; position: absolute; inset: 0;
  background: var(--doodle-tint);
  -webkit-mask: url("doodles.svg?v=202609280400") 0 0 / 600px repeat;
          mask: url("doodles.svg?v=202609280400") 0 0 / 600px repeat;
  opacity: 0.1;
}
@media (prefers-color-scheme: dark) {
  .well { background: var(--screen-base); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
  /* the canvas is the mesh glowing through the doodles; no ink layer */
  .well::before { display: none; }
}
.well { isolation: isolate; }
.well > .wp-well { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background: var(--mesh-still); }
.well::before { z-index: 1; }
.well > :not(.wp-well) { position: relative; z-index: 2; }
@media (prefers-color-scheme: dark) {
  .well > .wp-well {
    background: #8fb0cf; opacity: var(--screen-mesh-a);
    -webkit-mask: url("doodles.svg?v=202609280400") 0 0 / 600px repeat;
            mask: url("doodles.svg?v=202609280400") 0 0 / 600px repeat;
  }
}
/* 320: the English bubble takes two lines */
@media (max-width: 359px) { .well { min-height: 190px; } }
/* the app's thread header: one glass pill */
.mini-head {
  align-self: flex-start; max-width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 100px;
  background: rgba(var(--lg-tint-rgb), 0.62);
  border: 0.5px solid var(--g-border);
  box-shadow: inset 0 1px 0 var(--g-hi);
}
.ava {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13.5px; font-weight: 600; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.12);
}
.ava-n { background: linear-gradient(to bottom, #d669ed, #e0a2f3); }
/* the app's thread header: name, «в сети», and, with the assistant on, its
   honesty line (reserved, so turning it on moves nothing) */
.mh-id { display: grid; line-height: 1.2; min-width: 0; }
.mh-name { font-size: 15px; font-weight: 650; color: var(--txt); }
.mh-st { font-size: 12.5px; color: var(--txt-2); }
/* the honesty line appears inside the pill with the assistant on; the well is
   tall enough for both states, so the pill grows into its own slack and
   nothing below it moves */
.mh-ai { display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: var(--txt-2); white-space: nowrap; }
.mh-ai svg { width: 12px; height: 12px; color: var(--accent-txt); flex: none; }
.well .bubble { align-self: flex-start; font-size: 16px; }

/* the pipe spans the whole gap between the panes; the packet leaves a short trail */
.pipe { position: relative; height: 46px; }
.pipe::before {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 0;
  border-left: 1.5px dashed color-mix(in oklch, var(--txt-2) 50%, transparent);
}
.packet {
  position: absolute; left: 50%; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
  opacity: 0;
}
.packet::before {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 5px; height: 22px; border-radius: 3px;
  background: linear-gradient(to top, color-mix(in oklch, var(--accent) 70%, transparent), transparent);
}
.pipe.is-sending .packet { animation: packetY 0.46s var(--ease-out) both; }
@keyframes packetY { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(32px); } }

.vault {
  position: relative;
  display: grid;
  min-height: 136px; padding: 16px 18px;
  border-radius: 20px;
  background: var(--vault);
  color: var(--vault-ink);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
  align-items: center;
  overflow: hidden;
  transition: background-color 0.64s var(--ease-out), box-shadow 0.64s var(--ease-out);
}
.vault > * { grid-area: 1 / 1; transition: opacity 0.26s ease, filter 0.26s ease; }
.cipher, .scr {
  font-family: var(--font-mono); font-size: 14.5px; line-height: 1.62; letter-spacing: 0.02em;
  color: var(--vault-ink);
}
.cipher > span { display: block; white-space: nowrap; }
/* the scramble sits in the same grid cell with the same metrics as the
   ciphertext, so the two never show as a double image */
.scr { opacity: 0; white-space: pre; overflow: hidden; align-self: center; }
.plain {
  font-size: clamp(19px, 1rem + 0.5vw, 22px); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--vault-open-ink); opacity: 0; filter: blur(4px); visibility: hidden;
  transition: opacity 0.26s ease, filter 0.26s ease, visibility 0s linear 0.26s;
}
/* both captions share one cell: the taller one sets the height, so the swap
   never moves the screenshot below */
.caps {
  display: grid; align-items: center;
  margin: 10px 0 0; padding: 12px 14px 13px; border-radius: 16px;
  background: color-mix(in oklch, var(--txt) 4.5%, transparent);
  box-shadow: inset 0 0 0 0.5px var(--hair);
}
.cap { grid-area: 1 / 1; font-size: 15px; line-height: 1.48; color: var(--txt-2); text-wrap: pretty; }
.cap-on { visibility: hidden; color: var(--txt); }
.fn-ref { position: relative; text-decoration: none; color: var(--accent-txt); font-weight: 800; padding: 0 3px; border-radius: 4px; white-space: nowrap; }
.fn-ref::after { content: ""; position: absolute; inset: -13px -15px; }

/* state. Without JS, :has() does it; with JS, welcome.js drives data-server
   (what the vault holds) and data-cap (the caption), and mirrors the box as .is-on. */
.instrument:not([data-server]):has(.sw-input:checked) .cipher,
.instrument[data-server="plain"] .cipher,
.instrument[data-server="scramble"] .cipher { opacity: 0; transition: none; }
.instrument[data-server="scramble"] .scr { opacity: 1; transition: none; }
.instrument:not([data-server]):has(.sw-input:checked) .plain,
.instrument[data-server="plain"] .plain { opacity: 1; filter: none; visibility: visible; transition-delay: 0s; }
.instrument:not([data-server]):has(.sw-input:checked) .vault,
.instrument[data-server="plain"] .vault,
.instrument[data-server="scramble"].is-on .vault {
  background-color: var(--vault-open);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 0 0 0.5px var(--hair);
}
.instrument[data-server="scramble"].is-on .scr { color: var(--vault-open-ink); }
.instrument:not([data-server]):has(.sw-input:checked) .cap-off,
.instrument[data-cap="on"] .cap-off { visibility: hidden; }
.instrument:not([data-server]):has(.sw-input:checked) .cap-on,
.instrument[data-cap="on"] .cap-on { visibility: visible; }
.instrument:not([data-server]):has(.sw-input:checked) .lk-closed,
.instrument[data-cap="on"] .lk-closed { display: none; }
.instrument:not([data-server]):has(.sw-input:checked) .lk-open,
.instrument[data-cap="on"] .lk-open { display: block; }
.instrument:has(.sw-input:checked) .mh-ai,
.instrument.is-on .mh-ai { display: inline-flex; }

@media (min-width: 700px) {
  .panes { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.1fr); align-items: stretch; }
  .pane-chat, .pane-server { display: flex; flex-direction: column; }
  .well { flex: 1; }
  .pipe { height: auto; margin-top: 30px; }
  .pipe::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 1.5px dashed color-mix(in oklch, var(--txt-2) 50%, transparent); }
  .packet { left: 0; top: calc(50% - 5px); margin-left: 0; }
  .packet::before { left: auto; right: 5px; top: 2px; bottom: 2px; width: 26px; height: auto; background: linear-gradient(to left, color-mix(in oklch, var(--accent) 70%, transparent), transparent); }
  .pipe.is-sending .packet { animation-name: packetX; }
  @keyframes packetX { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(54px); } }
  .well, .vault { min-height: 172px; }
  .cipher, .scr { font-size: 15.5px; }
}

/* the real switch, in a phone: a close crop of its lower edge, wide enough
   that «ИИ‑ассистент в этом чате» reads at 13px or more, and short enough
   that it holds the «ИИ‑АССИСТЕНТ» group alone (from the gap above its card,
   81.5% down the screen): H = 0.4*(W-12)+6, about W/2.47 */
.info-shot { display: grid; justify-items: start; row-gap: 12px; }
.info-shot figcaption { font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--ink); padding-inline: 4px; }
.bezel {
  position: relative;
  border-radius: 34px;
  padding: 6px;
  background: var(--bezel);
  box-shadow: var(--g-shadow-lg), inset 0 0 0 1px var(--bezel-edge), inset 1px 1px 0 0 var(--bezel-rim);
}
.bezel img { width: 100%; height: auto; aspect-ratio: 480 / 1039; object-fit: cover; border-radius: 28px; background: var(--screen-base); }
.scr-wrap { position: relative; display: block; }
/* hugs the «ИИ‑ассистент в этом чате» row inside its settings card */
.shot-ring {
  position: absolute; left: 4.4%; right: 4.4%; top: 89.9%; height: 5%;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft);
  transition: opacity 0.3s ease;
}
.js .scr-wrap:has(img:not([data-loaded])) .shot-ring { opacity: 0; }
.info-shot .bezel {
  width: min(100%, 460px); aspect-ratio: 2.47; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px);
          mask-image: linear-gradient(to bottom, transparent, #000 20px);
}
.info-shot .scr-wrap { position: absolute; left: 6px; right: 6px; bottom: 6px; }

/* the ledger: what the server sees sits on the open wall; what it cannot see
   sits in a recessed well (light: the app's inset field; dark: the vault) */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 48px); margin-top: clamp(28px, 5vw, 72px); }
.led-hw {
  font-size: clamp(20px, 1rem + 0.6vw, 25px); font-weight: 750; line-height: 1.2; letter-spacing: -0.014em;
  margin: 0 0 18px; max-width: 18em; text-wrap: balance;
}
/* the heading is its own words only; the footnote star follows it, outside */
.led-h { display: inline; font: inherit; letter-spacing: inherit; }
.list { display: grid; gap: 16px; }
.list li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: clamp(16px, 0.95rem + 0.15vw, 17px); line-height: 1.45;
  color: var(--ink-2);
  max-width: 34em;
}
.list strong { color: var(--ink); font-weight: 650; }
.list .tile { margin-top: -3px; }
.led-vault {
  border-radius: 28px;
  padding: 24px 22px 26px;
  background: var(--vault-panel);
  box-shadow: inset 0 1px 3px rgba(20, 45, 65, 0.14), inset 0 0 0 0.5px var(--hair), var(--g-shadow-sm);
}
@media (prefers-color-scheme: dark) {
  .led-vault {
    color: var(--vault-txt);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08), var(--g-shadow-sm);
  }
  .led-vault .led-hw { color: var(--vault-txt); }
  .led-vault .list li { color: var(--vault-txt-2); }
  .led-vault .list strong { color: var(--vault-txt); }
  .led-vault .fn-ref { color: var(--vault-ink); }
  .led-vault .fn-ref:focus-visible { outline-color: var(--vault-txt); box-shadow: 0 0 0 2px var(--vault-panel); }
}

.footnote { font-size: 14.5px; line-height: 1.52; color: var(--ink-2); max-width: 46em; text-wrap: pretty; border-radius: 12px; }
.fn-star { color: var(--accent-txt); font-weight: 800; margin-right: 4px; }
.footnote:target { outline: 2px solid var(--accent); outline-offset: 8px; }
.fn-back { position: relative; display: inline-block; min-width: 24px; text-align: center; color: var(--ink-link); text-decoration: none; font-weight: 700; border-radius: 6px; }
.fn-back::after { content: ""; position: absolute; inset: -11px -10px; }

@media (min-width: 900px) {
  /* both lists start on one line: the headings share a subgrid row and sit on
     its bottom edge, whatever their length */
  .ledger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .led { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .led-hw { align-self: end; }
  .led-seen { padding-top: 26px; }
  .led-vault { padding: 26px 30px 30px; }
}

@media (min-width: 1024px) {
  .switch { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px); }
  .switch-copy { grid-column: 1 / -1; }
  .switch h2 { max-width: 14.5em; }
  .instrument { grid-column: 1 / span 7; grid-row: 2; align-self: start; }
  /* the crop stands beside the instrument, centred on it */
  .info-shot { grid-column: 8 / span 5; grid-row: 2; align-self: center; display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-height: 0; }
  .info-shot .bezel { width: 100%; }
  .info-shot figcaption { padding: 0; text-align: center; font-size: 14.5px; color: var(--ink-2); }
  /* ~72px under the instrument/phone row (row-gap + this); the lists share the
     section's 12 columns, so the footnote sits exactly under the vault */
  .ledger { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(24px, 2vw, 28px); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px); }
  .led-seen { grid-column: 1 / span 6; padding-right: clamp(0px, 2vw, 32px); }
  .led-vault { grid-column: 7 / span 6; }
  .footnote { grid-column: 7 / -1; grid-row: 4; padding-inline: 30px 2px; }
}
@media (min-width: 1280px) {
  .instrument { grid-column: 1 / span 8; }
  .info-shot { grid-column: 9 / span 4; }
}

/* ---------------------------------------------------------------- limits */
.limits { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 4vw, 48px); }
.limits-head { container-type: inline-size; min-width: 0; }
/* the one art-directed giant: as wide as its column allows, never taller than the H1 */
.limits h2 { font-size: min(14vw, var(--fs-h1)); font-size: min(16.2cqi, var(--fs-h1)); line-height: 1.02; }
.limit-list { display: grid; gap: clamp(30px, 5vw, 40px); }
.claim {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 1.05rem + 0.55vw, 26px); line-height: 1.14;
  letter-spacing: -0.01em; word-spacing: 0.05em;
  color: var(--ink); max-width: 22em; text-wrap: balance;
}
.expl { margin-top: 9px; color: var(--ink-2); max-width: 34em; text-wrap: pretty; font-size: clamp(16px, 0.96rem + 0.15vw, 17.5px); }
.more { margin-top: clamp(32px, 4vw, 44px); color: var(--ink-2); }
.more a { color: var(--ink-link); font-weight: 650; text-underline-offset: 3px; text-decoration-thickness: 1.5px; white-space: nowrap; }
@media (min-width: 1024px) {
  .limits { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px); }
  /* the sticky heading lets go while the last claims are still on screen
     (its column ends 40vh short of the list), and the list gets room after
     it: at the moment it lets go, the next H2 is still below the fold */
  .limits { padding-bottom: clamp(48px, 8vw, 128px); }
  .limits-head { grid-column: 1 / span 5; margin-bottom: 40vh; }
  .limits h2 { position: sticky; top: max(40px, 16vh); }
  .limits-body { grid-column: 7 / span 6; padding-top: 0.6rem; }
  .limit-list { gap: 0; border-top: 1px solid var(--rule); }
  .limit-list li { padding: 26px 0 30px; border-bottom: 1px solid var(--rule); }
  .limit-list li:first-child .claim { font-size: clamp(28px, 1rem + 1.3vw, 36px); max-width: 15em; }
}

/* ---------------------------------------------------------------- basics */
/* The four feature groups are one paragraph with run-in heads (a spec sheet,
   not a fifth stack of bold lead + grey sentence); the three real screens
   carry one short label each. Phones: a peeking strip, then the text. From
   700: an overlapping trio. From 1200: text in columns 1-5, the trio in 6-12. */
.basics { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(26px, 3vw, 44px); }
.basics h2 { max-width: 9.5em; text-wrap: balance; }

.trio {
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding: 14px var(--gutter) 24px;
  scroll-padding-inline: var(--gutter);
}
.trio::-webkit-scrollbar { display: none; }
/* the peeking phone fades out at the edge instead of being cut (JS lifts the
   fade once the strip reaches its end) */
.js .trio:not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
/* the strip is full-bleed and taller than its padding: an outside ring would
   be clipped on every side, so it is drawn inside */
.trio:focus-visible {
  outline: 2px solid var(--ink); outline-offset: -4px;
  box-shadow: inset 0 0 0 2px var(--halo);
  border-radius: 14px;
  -webkit-mask-image: none; mask-image: none;
}
.shot { flex: none; width: min(64vw, 290px); scroll-snap-align: start; }
.shot .bezel { border-radius: 36px; padding: 6px; }
.shot .bezel img { border-radius: 30px; }
.shot figcaption {
  margin-top: 14px; padding-inline: 4px;
  font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--ink);
  text-wrap: balance;
}
.trio-dots { display: none; }
.js .trio-dots { display: flex; justify-content: center; gap: 8px; margin-top: -14px; }
.trio-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.22; transition: opacity 0.2s ease, transform 0.2s var(--ease-out); }
.trio-dots i.is-on { opacity: 0.72; transform: scale(1.15); }
/* phones: only the phone that has snapped into place is captioned; the peek
   dims, so it still says "more" without a label cut mid-word at the edge */
@media (max-width: 699.98px) {
  .js .trio .shot .bezel, .js .trio .shot figcaption { transition: opacity 0.22s ease; }
  .js .trio .shot:not(.is-front) .bezel { opacity: 0.6; }
  .js .trio .shot:not(.is-front) figcaption { opacity: 0; }
}

.feats {
  font-size: clamp(18px, 1rem + 0.35vw, 20px); line-height: 1.55; letter-spacing: -0.004em;
  color: var(--ink-2); max-width: 34em; text-wrap: pretty;
}
.feats b { color: var(--ink); font-weight: 700; }

@media (min-width: 700px) {
  /* one overlapping trio: the thread forward and 12% larger. The overlaps are
     uneven on purpose: chats tucks 9% under it (its covered edge holds only
     times and unread badges), Glu only 1% (its bubbles start 2.5% in, so no
     word is cut). A grid, so the three captions share one line under the
     lowest phone; each figure spans both rows through subgrid. */
  .trio {
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 26.2fr) minmax(0, 39.4fr) minmax(0, 34.2fr);
    grid-template-rows: auto auto;
    align-items: start; gap: 0;
    width: min(100%, 780px);
    overflow: visible; margin: clamp(8px, 2vw, 24px) 0 0; padding: 0;
  }
  .js .trio:not(.at-end) { -webkit-mask-image: none; mask-image: none; }
  .shot {
    position: relative; width: auto; min-width: 0;
    grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; row-gap: 0;
  }
  .s-chats { grid-column: 1; z-index: 1; margin-right: -9cqi; }
  .s-thread { grid-column: 2; z-index: 2; }
  .s-glu { grid-column: 3; z-index: 1; margin-left: -1cqi; }
  .shot .bezel { align-self: start; }
  .s-chats .bezel { margin-top: clamp(40px, 7vw, 96px); }
  .s-glu .bezel { margin-top: clamp(14px, 2.4vw, 32px); }
  .shot figcaption { align-self: start; margin-top: 18px; padding-inline: clamp(6px, 1.2vw, 16px); }
  /* a label never sits under the neighbour that overlaps its phone */
  .s-chats figcaption { padding-right: calc(9cqi + 8px); }
  .s-glu figcaption { padding-left: calc(1cqi + clamp(6px, 1.2vw, 16px)); }
  .shot .bezel { border-radius: clamp(28px, 3.4vw, 44px); padding: clamp(5px, 0.6vw, 8px); }
  .shot .bezel img { border-radius: clamp(23px, 2.8vw, 36px); }
  /* the front phone: a deeper contact shadow than the two behind it */
  .s-thread .bezel { box-shadow: var(--g-shadow-lg), 0 50px 90px -40px rgba(10, 30, 40, 0.5), 0 14px 28px -14px rgba(10, 30, 40, 0.42), inset 0 0 0 1px var(--bezel-edge), inset 1px 1px 0 0 var(--bezel-rim); }
  .js .trio-dots { display: none; }
}
@media (min-width: 1200px) {
  .basics {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px);
    grid-template-rows: auto 1fr; align-items: start;
  }
  .basics h2 { grid-column: 1 / span 5; grid-row: 1; }
  .feats { grid-column: 1 / span 5; grid-row: 2; padding-right: clamp(0px, 2vw, 40px); }
  .trio { grid-column: 6 / -1; grid-row: 1 / span 2; width: auto; margin-top: 0; }
}

/* ----------------------------------------------------------------- close */
.close { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-bottom: clamp(88px, 11vw, 160px); }
.close-copy { container-type: inline-size; min-width: 0; }
/* the second peak: the H1's size, or less if its column is narrower */
.close h2 { font-size: min(10.4vw, var(--fs-h1)); font-size: min(11.8cqi, var(--fs-h1)); line-height: 1.02; max-width: 9em; text-wrap: balance; }
.close .lead { margin-top: clamp(16px, 2vw, 26px); max-width: 30em; }
.close .ctas { margin-top: clamp(22px, 3vw, 36px); }
.close-icon { display: grid; justify-items: center; gap: 9px; justify-self: start; }
/* the real iOS icon, light or dark with the visitor's theme */
.app-icon {
  display: block; overflow: hidden;
  width: clamp(88px, 11vw, 168px); aspect-ratio: 1; border-radius: 22.5%;
  box-shadow: var(--g-shadow-lg), 0 0 0 0.5px var(--bezel-edge);
}
.app-icon img { width: 100%; height: 100%; }
.app-name { font-size: 13px; font-weight: 600; color: var(--ink); }
@media (min-width: 1024px) {
  .close { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .close-icon { margin-top: 0.2em; }
}

/* ---------------------------------------------------------------- footer */
.foot {
  display: grid; justify-items: center; gap: 14px; text-align: center;
  padding-top: 8px; padding-bottom: calc(44px + env(safe-area-inset-bottom));
  font-size: 14px; color: var(--ink-2);
}
.svc {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 14px;
  font-size: 13px; font-weight: 600; color: var(--txt);
  background: rgba(var(--lg-tint-rgb), 0.66);
  border: 0.5px solid var(--g-border);
}
.foot-mark { width: 18px; height: 19px; color: var(--mark); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.foot-links a { display: inline-block; padding: 11px 4px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.foot-tm { font-size: 12.5px; max-width: 46em; text-wrap: balance; }

/* ================================================== quick-reply composer
   A glass bar at the bottom once the hero is gone; hidden again while the
   close or the footer is on screen. Revealed by welcome.js only. */
.kb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
  transform: translateY(calc(100% + 16px));
  visibility: hidden;
  transition: transform 0.36s var(--ease-drawer), visibility 0s linear 0.36s;
}
.kb[hidden] { display: none; }
.kb.is-up { transform: none; visibility: visible; transition: transform 0.5s var(--ease-drawer), visibility 0s; }
.kb-bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  max-width: min(100%, 640px); min-width: 0;
  padding: 6px; border-radius: 28px;
  background: rgba(var(--lg-tint-rgb), 0.74);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
          backdrop-filter: blur(20px) saturate(1.5);
  border: 0.5px solid var(--g-border);
  box-shadow: var(--g-shadow), inset 2px 2px 0 -2px var(--lg-rim), inset 0 0 6px 0 var(--lg-glow);
}
/* whole chips only: welcome.js drops any chip that would be cut, so the box
   needs no clipping, and a chip's focus ring is never cut off */
.kb-chips { display: flex; gap: 6px; min-width: 0; }
.kb-chip.is-out { display: none; }
.ks { display: none; }
.kb-chip, .kb-cta {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 15px; border-radius: 22px;
  font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: transform 0.14s var(--ease-out), background-color 0.15s ease;
}
.kb-chip { gap: 6px; color: var(--accent-txt); background: var(--field); border: 0.5px solid var(--g-border-2); }
.kb-ic { width: 16px; height: 16px; flex: none; margin-left: -2px; }
/* light: white chips on a white bar lose their edges; a teal wash and hairline */
@media (prefers-color-scheme: light) {
  .kb-chip { background: color-mix(in oklch, var(--accent) 9%, #fff); border: 1px solid color-mix(in oklch, var(--accent) 26%, transparent); }
}
.kb-cta {
  color: #fff; background-color: var(--cta-solid); background-image: var(--cta-grad); font-weight: 650; padding-inline: 18px;
  box-shadow: 0 6px 16px -6px var(--accent-soft-2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.kb-chip:active, .kb-cta:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .kb-chip:hover { background: var(--g-bg-strong); }
  .kb-cta:hover { filter: brightness(1.06); }
}
@media (max-width: 520px) {
  .kb-bar { width: 100%; }
  .kb-chips { flex: 1; }
  /* the chips that fit share the bar's width, so a dropped chip leaves no hole */
  .kb-chip:not(.is-out) { flex: 1 1 auto; }
  .kl { display: none; }
  .ks { display: inline; }
  .kb-chip, .kb-cta { font-size: 14.5px; padding: 0 11px; }
  .kb-cta { padding: 0 14px; }
}

/* ======================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bubble.dots i { animation: none; opacity: 0.6; }
}