/* bomj поверх шаблона Linea (8B, MIT): то, чего в шаблоне нет.
   Стили шаблона лежат в каскадных слоях (@layer), этот файл — вне слоёв, поэтому он сильнее их без !important.
   Здесь: мостик токенов старого сайта к палитре Linea, герой-экспонат с качающимся богатым,
   блок «Попробуй сам» с голосовым и петлёй Pronin, цифры в блоке цитат, цена вместо формы,
   островок скидки и док (компоненты Bencho, перенесены без React). */


/* ── из старого site.css: кнопки бота в карточках ── */
.tg-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 96%; }
.tg-kb.three { grid-template-columns: repeat(3, 1fr); }
.tg-kb span { display: grid; place-items: center; min-height: 38px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .07); font-size: 14px; font-weight: 600; text-align: center; }
.tg-kb span.wide { grid-column: 1 / -1; }
.tg-kb span.wide2 { grid-column: span 2; }
.tg-kb span.on { color: var(--green); display: flex; gap: 5px; align-items: center; justify-content: center; }

/* ── из старого site.css: «Попробуй сам» ── */
/* ═══════════════ Попробуй сам ═══════════════ */
.try { position: relative; min-height: 92svh; overflow: hidden; background: var(--bg); color: var(--ink); transition: background-color .45s var(--ease-out), color .45s var(--ease-out); }
.try.is-rec { background: var(--green); color: var(--bg); }
.try-copy { position: relative; z-index: 2; padding: calc(var(--section) * .55) var(--m) 0; max-width: calc(560px + var(--m)); }
.try-word, .try-word2 { display: inline-block; }
.try-lead { margin-top: 18px; font-size: var(--fs-body); line-height: 1.55; max-width: 34em; }
.try-form { margin-top: 28px; display: flex; align-items: center; gap: 8px; max-width: 460px; height: 54px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--raised); transition: background .3s ease; }
.try.is-rec .try-form { background: rgba(14, 15, 18, .12); }
.try-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 16px; outline: none; }
.try-input::placeholder { color: var(--muted); }
.try.is-rec .try-input::placeholder { color: rgba(14, 15, 18, .6); }
.try-form:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.try-send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--white-btn); color: var(--btn-ink); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; transition: transform .14s var(--ease-out); }
.try-send svg { width: 20px; height: 20px; }
.try-send:active { transform: scale(.92); }
.try-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.chip { height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--surface); color: var(--soft); font-size: 14px; cursor: pointer; transition: background .18s ease, color .18s ease, transform .14s var(--ease-out); }
.chip:hover { background: var(--raised); color: var(--ink); }
.chip:active { transform: scale(.96); }
.try.is-rec .chip { background: rgba(14, 15, 18, .1); color: var(--bg); }
.try-note { margin-top: 18px; max-width: 460px; font-size: var(--fs-s); line-height: 1.5; color: var(--muted); }
.try.is-rec .try-note { color: rgba(14, 15, 18, .72); }

.mic-wrap { position: absolute; z-index: 1; right: -8vh; bottom: -9vh; width: 50vh; height: 50vh; }
.mic { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--green); color: var(--bg); touch-action: none; -webkit-user-select: none; user-select: none; transition: background-color .45s var(--ease-out), color .45s var(--ease-out), transform .2s var(--ease-out); }
.mic:hover { transform: scale(1.015); }
.mic:active { transform: scale(.985); }
.mic-icon { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-58%, -62%); }
.try.is-rec .mic { background: var(--bg); color: var(--green); }
.mic-rings { position: absolute; inset: 0; pointer-events: none; }
.mic-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bg); opacity: 0; transform: scale(1); }
.try.is-rec .mic-rings i { opacity: calc(.5 - var(--n) * .12); transform: scale(calc(1 + var(--lvl, 0) * (.08 + var(--n) * .07))); transition: transform .09s linear; }
.mic-rings i:nth-child(1) { --n: 1; }
.mic-rings i:nth-child(2) { --n: 2; }
.mic-rings i:nth-child(3) { --n: 3; }
.mic-live { position: absolute; right: calc(100% + 24px); bottom: 54%; width: min(36vw, 420px); text-align: right; font-size: var(--fs-m); line-height: 1.25; letter-spacing: -.01em; }
.mic-live.idle { color: var(--soft); }
.try.is-rec .mic-live.idle { color: inherit; }

.try-result { position: absolute; z-index: 2; left: var(--m); bottom: 7vh; width: min(440px, calc(100% - var(--m) * 2)); }
.try-result .tg-card { padding: 16px 18px 14px; border-radius: 18px 18px 18px 6px; background: var(--raised); color: var(--ink); font-size: 16px; line-height: 1.45; }
.try-result .tg-card b { display: block; margin-bottom: 6px; }
.try-result .tg-card .op { display: block; font-variant-numeric: tabular-nums; }
.try-result .tg-card .op.inc { color: var(--green); }
.try-result .tg-card .op.sav { color: var(--gold); }
.try-result .tg-card i { display: block; margin-top: 10px; color: var(--soft); font-size: 15px; }
.try-result .tg-kb { margin-top: 6px; max-width: 100%; }
.try-result .tg-kb span { color: var(--ink); }
.try-result .op { opacity: 0; transform: translateY(10px); animation: opIn .5s var(--ease-expo) forwards; animation-delay: calc(var(--i) * 110ms + 120ms); }
@keyframes opIn { to { opacity: 1; transform: none; } }
.try-result .tg-card { animation: cardIn .55s var(--ease-expo) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }


/* Кнопка микрофона в покое приглашает: кольцо расходится раз в пару секунд */
@keyframes invite { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .try:not(.is-rec) .mic::after { animation: invite 2.6s var(--ease-out) infinite; }
}


/* ═══════════════ Компоненты Bencho (bencho.dev/licence, MIT) ═══════════════
   Токены Bencho сведены к токенам сайта, новых глобальных переменных нет:
   --card и --fill-slab → --raised (поднятая поверхность, как строка ввода),
   --fill-on и --ink → --ink, --font-ui → --font, --ink-3 → --muted,
   --pane-edge → --line, --signal → --green (наш цвет фокуса), --ok → --green,
   красный #e5484d → наш --red. */

/* ══ Voice note ═══════════════════════════════════════════ */
/* a fixed frame, so opening the pill never rescales the block */
.vn-frame {
  position: relative;
  width: 300px;
  height: 156px;
  display: grid;
  place-items: center;}

/* на сайте полоса стоит слева над полем ввода, а не по центру блока */
.try-copy .vn-frame { margin-top: 18px; height: 96px; place-items: center start; }

.vn {
  position: relative;
  width: var(--w);
  height: 56px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--raised);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* y1 past 1 is the overshoot; Bounce sets it */
  transition:
    width 420ms cubic-bezier(0.3, var(--ov), 0.4, 1),
    scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing: -0.01em;}

.vn[data-phase="clip"] { cursor: default; }

.vn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--green); /* taste-skill-ignore: кольцо фокуса */}

.vn-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: vn-in 240ms ease 80ms both;}

.vn-idle { justify-content: center; gap: 12px; }

.vn-rec { gap: 12px; padding: 0 24px; }

.vn-clip { gap: 12px; padding: 0 12px 0 8px; }

.vn-time {
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  opacity: 0.6;}

.vn-rec .vn-time { opacity: 1; }

.vn-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--red);
  animation: vn-blink 1s ease-in-out infinite;}

.vn-wave {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* the wave goes quiet as you drag toward throwing it away */
  opacity: calc(1 - var(--pull, 0) * 0.7);}

.vn-bar {
  width: 3px;
  flex: none;
  height: calc(4px + var(--l) * 28px);
  border-radius: 2px;
  background: currentColor;
  transition: height 160ms linear;}

/* each new sample grows in from the middle */
.vn-rec .vn-bar { animation: vn-grow 200ms cubic-bezier(0.3, 1.5, 0.4, 1) both; }

/* the playhead: a bar is lit once progress has passed it */
.vn-scrub { cursor: ew-resize; }

.vn-scrub .vn-bar {
  transition: none;
  opacity: clamp(0.3, calc((var(--prog) * var(--n) - var(--i)) * 99), 1);}

/* thrown away: the bars fold to nothing before the pill closes */
.vn[data-phase="cancel"] .vn-in { animation: none; }

.vn[data-phase="cancel"] .vn-bar {
  scale: 1 0;
  opacity: 0;
  transition: scale 220ms ease, opacity 220ms ease;}

.vn[data-phase="cancel"] .vn-dot,
.vn[data-phase="cancel"] .vn-time,
.vn[data-phase="cancel"] button { opacity: 0; transition: opacity 160ms ease; }

.vn-play, .vn-x {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: scale 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms ease;}

.vn-play {
  width: 44px;
  height: 44px;
  border-radius: var(--inner);
  background: var(--ink);
  color: var(--raised);}

.vn-x {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, var(--ink) 50%, var(--raised));}

.vn-x:hover { color: var(--ink); }

.vn-play:active, .vn-x:active { scale: 0.96; }

.vn-play:focus-visible, .vn-x:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;}

.vn-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 42px);
  text-align: center;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  letter-spacing: 0em;}

.try-copy .vn-hint { right: auto; width: 300px; top: calc(50% + 34px); }
.try.is-rec .vn-hint { color: rgba(14, 15, 18, .72); }

.vn-hint[data-on] { opacity: calc(1 - var(--pull, 0)); }

.vn-hint[data-armed] { opacity: 1; color: var(--red); }

/* the row fades as it slides, so the cancel mark has the left
   end of the pill to itself when it arrives */
.vn-rec { opacity: calc(1 - var(--pull, 0) * 0.55); }

/* the dot and the clock are gone before the mark lands on them */
.vn-rec .vn-dot, .vn-rec .vn-time { opacity: max(0, 1 - var(--pull, 0) * 1.6); }

.vn-cancel {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  opacity: 0;
  scale: 0.4;
  pointer-events: none;
  transition: opacity 160ms ease, scale 160ms ease;}

.vn-cancel[data-on] {
  opacity: 1;
  scale: 1;
  transition: opacity 160ms ease, scale 420ms cubic-bezier(0.24, 1.34, 0.38, 1);}

.vn[data-phase="cancel"] .vn-cancel { opacity: 0; scale: 0.6; transition: opacity 220ms ease, scale 220ms ease; }

@keyframes vn-in { from { opacity: 0; } }

@keyframes vn-blink { 50% { opacity: 0.25; } }

@keyframes vn-grow { from { scale: 1 0.2; } }

/* караоке «Расслышал»: слова загораются вслед за бегунком голосового */
.try-result .heard-w { transition: color .15s ease; }
.try-result .heard-w.lit { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .vn, .vn-in, .vn-dot, .vn-bar { animation: none !important; transition: none !important; }
}



/* ══ Dynamic island ══════════════════════════════════════
   See lab/Island.tsx. На сайте остров висит от верхнего края экрана по центру,
   поверх плашки, и растёт вниз; рамка Bencho 300×182 здесь не нужна.
   Токены: --font-ui → --font, янтарный таймер #e09a12 → наше золото --gold (деньги). */
.dyn {
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;}

.dyn-site { position: fixed; z-index: 40; top: 10px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; opacity: 0; }
.dyn-site.on { opacity: 1; }

/* hangs from the top edge, so it grows downward from there */
.dyn-top {
  display: flex;
  justify-content: center;
  align-items: flex-start;}

.dyn-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: scale 160ms cubic-bezier(.22, 1, .36, 1);}

.dyn-pill:active { scale: .97; }
.dyn-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.dyn-in {
  position: absolute;
  inset: 0;
  display: flex;}

.dyn-compact,
.dyn-open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;}

/* shut: one mark at each end, the middle left dark for the
   camera, as on the real one */
.dyn-compact { justify-content: space-between; padding: 0 12px 0 12px; }
.dyn-compact.dyn-gone { justify-content: center; }

.dyn-open { padding: 0 16px; gap: 12px; }

/* предложение: три строки, как «музыка» у Bencho */
.dyn-open[data-kind="Offer"] { flex-direction: column; align-items: stretch; justify-content: space-between; padding: 16px 18px 14px 22px; gap: 6px; }

.dyn-num {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0em;}

.dyn-amber { color: var(--gold); }

.dyn-round {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: scale 160ms ease;}

.dyn-round:active { scale: 0.96; }

.dyn-x { width: 40px; height: 40px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); cursor: pointer; }
.dyn-x:hover { color: #fff; background: rgba(255, 255, 255, .16); }

.dyn-label { font-size: 13px; color: rgba(255, 255, 255, 0.6); font-weight: 400; letter-spacing: 0em; }

.dyn-big {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;}

.dyn-name { font-size: 19px; font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1.1; }

.dyn-row { display: flex; align-items: center; gap: 12px; }
.dyn-ends { justify-content: space-between; }

.dyn-cta { flex: 1; height: 40px; border-radius: 999px; background: var(--white-btn); color: var(--btn-ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .18s ease, scale .14s ease; }
.dyn-cta:hover { background: #fff; }
.dyn-cta:active { scale: .97; }

@media (max-width: 552px) { .dyn-site { top: 66px; } }

/* ══ Magnifying dock ═══════════════════════════════════════
   Стеклянный док Bencho внизу экрана. Это стекло и плавающая пилюля, которые правила
   taste-skill запрещают, — док попросил автор, поэтому строки помечены taste-skill-ignore.
   Токены Bencho сведены к токенам сайта и заданы на корне дока, наружу не выходят:
   --ink и --ink-rgb — чернила главы, --pane — стекло на тон главы, --fill-on/--on-ink —
   подсказка чернилами по фону, --font-ui → --font, --pane-edge → --line,
   рамка стекла (--g-edge-*), блик (--g-spec) и тень (--g-lift, --shadow-rgb) — числа ниже. */
.gdock-wrap {
  --pane: rgba(16, 17, 21, .58);
  --dock-ink: #F4F3F6; --dock-ink-rgb: 244, 243, 246; --dock-on-ink: #0E0F12;
  --g-blur: 14px; --g-sat: 160%; --g-bright: 100%;
  --g-edge-hi: .42; --g-edge-lo: .06; --g-edge-far: .16; --g-spec: .12; --g-lift: .38;
  --shadow-rgb: 0, 0, 0;
  position: fixed; z-index: 25; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; pointer-events: none;}
html[data-dock-chapter="light"] .gdock-wrap { --pane: rgba(244, 243, 246, .64); --dock-ink: #0E0F12; --dock-ink-rgb: 14, 15, 18; --dock-on-ink: #F4F3F6; --g-lift: .16; }
html[data-dock-chapter="green"] .gdock-wrap { --pane: rgba(14, 15, 18, .2); --dock-ink: #0E0F12; --dock-ink-rgb: 14, 15, 18; --dock-on-ink: #F4F3F6; --g-edge-hi: .5; --g-lift: .12; }
body.has-dock .foot { padding-bottom: 104px; }

/* ── glass navigation ──────────────────────────────────────
   Same recipe as .gcard: 60% white, 2px frost, refraction,
   lit inner edge. Shapes differ, the material does not. */
.gdock {
  position: relative;
  background: var(--pane);
  -webkit-backdrop-filter: blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%)); /* taste-skill-ignore: стекло дока по просьбе автора */
  backdrop-filter: blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%)); /* taste-skill-ignore: стекло дока по просьбе автора */
  isolation: isolate;
  color: var(--dock-ink);
  pointer-events: auto;
  transition: background-color .3s ease, color .3s ease;}

.gdock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* transparent unless Stroke says otherwise — see the
     stroke block below */
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 3;}

/* dock */
.gdock {
  display: inline-flex;
  align-items: flex-end;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 28px;
  /* sideways is the dock's, up and down stays the page's — a
     finger passing over this on the way down the wall is
     scrolling, not picking. See .tick-row. */
  touch-action: pan-y;}

/* no tile behind the icon: scaling a translucent rectangle over
   glass is what made this look cheap. The glyph scales instead,
   and SVG scales cleanly at any size. */
.gdock-item {
  position: relative;
  width: 44px; height: 44px;
  border: 0;
  background: none;
  color: var(--dock-ink);
  opacity: 0.42;
  display: grid; place-items: center;
  cursor: pointer;
  transition: opacity 220ms ease;}

/* the magnification lives here, so the dot and the label keep
   their own size and their own distance from the bar */
.gdock-glyph {
  display: grid; place-items: center;
  transform-origin: center bottom;
  transition: transform 420ms cubic-bezier(0.24, 1.34, 0.38, 1);}

.gdock-item[data-near="1"] { opacity: 0.66; }

.gdock-item[data-near="0"] { opacity: 1; }

.gdock-item[data-active="true"] { opacity: 1; }

.gdock-item:focus-visible { outline: 1.5px solid var(--dock-ink); outline-offset: 3px; border-radius: 10px; }

/* the running dot, the only persistent mark in the dock */
.gdock-dot {
  position: absolute;
  /* inside the item, not slung underneath it. The glyph is
     20px in a 44px box, so anything hung off the bottom edge
     lands 17px from the mark it belongs to. */
  left: 50%; bottom: 3px;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--dock-ink);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 220ms ease, transform 420ms cubic-bezier(0.24, 1.34, 0.38, 1);}

.gdock-item[data-active="true"] .gdock-dot { opacity: 0.55; transform: scale(1); }

/* ONE tip for the whole dock (after transitions.dev's avatar
   tooltip): a dark pill above the bar that slides to the icon under
   the pointer and grows or shrinks to the word, both on the same
   160ms curve, and fades in 120ms. The word is centred in a box
   whose width animates, and the box clips it, so a longer word is
   uncovered rather than squeezed. */
.gdock-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--dock-ink);
  color: var(--dock-on-ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 32px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    width 160ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing: 0em;}

.gdock-tip > span { flex: none; }

.gdock-tip:not([data-ready]) { transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1); }

.gdock-tip[data-on="true"] { opacity: 1; }

/* ── the rim ─────────────────────────────────────────────────
   Every glass surface already drew a 1px ring in one flat
   colour. A flat rim is the single clearest tell that a thing
   is a rectangle with a border rather than a pane with
   thickness: real edges are lit unevenly, and evenly lit ones
   read as ink.

   So the ring becomes a gradient — bright at the corner
   facing the light, almost nothing along the sides that run
   edge-on to it, and a second weaker catch at the far corner
   where the light has come through the pane and out again.

   Painting a gradient in a border needs the border box filled
   and the padding box punched out of it, which is what the
   two masks do: one covers the whole element, one covers only
   the inside, and compositing them apart leaves the rim. It
   is the only way to get a gradient into a border without a
   second element to draw it on. */
[data-surface="glass"] .gdock::before {
  border-color: transparent;
  background: linear-gradient(142deg, rgba(255, 255, 255, var(--g-edge-hi, 0)) 0%, rgba(255, 255, 255, var(--g-edge-lo, 0)) 26%, rgba(255, 255, 255, var(--g-edge-lo, 0)) 62%, rgba(255, 255, 255, var(--g-edge-far, 0)) 100%) border-box; /* taste-skill-ignore: освещённая кромка стекла, а не заливка */
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); /* taste-skill-ignore: маска кромки */
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); /* taste-skill-ignore: маска кромки */
  mask-composite: exclude;}

/* ── толщина ──────────────────────────────────────────────
   Светлая линия по верху — свет, вошедший в край листа; мягкая тень под доком говорит,
   что стекло висит над страницей: одним размытием фона этого не сказать. */
[data-surface="glass"] .gdock {
  box-shadow: var(--g-shadow, inset 0 1px 0 rgba(255, 255, 255, var(--g-spec, 0)), 0 10px 40px rgba(var(--shadow-rgb), var(--g-lift, 0))); /* taste-skill-ignore: док парит над страницей */}

@media (max-width: 552px) {
  .gdock { gap: 4px; padding: 8px 10px; }
  .gdock-item { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .gdock-glyph, .gdock-tip { transition: none; } }



/* ── мостик: компоненты старого сайта говорят своими токенами, здесь они смотрят на палитру Linea ── */
:root {
  --font: var(--font-1);
  --green: var(--color-4); --gold: #F5C451; --red: #FF5A5F; --blue: #4C8DFF;
  --bg: var(--color-1); --ink: var(--color-2); --surface: #2a211d; --raised: #3a2f29; --line: #4a3d36;
  --soft: var(--color-9); --muted: var(--color-9); --tg-out: var(--color-6);
  --white-btn: var(--color-2); --btn-ink: var(--color-1);
  --fs-body: 17px; --fs-s: 14px; --fs-m: clamp(21px, 2vw, 30px); --m: var(--space-1); --section: var(--space-2); --radius: 20px;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.33, 1, .68, 1);
}
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── герой: сцена и богатый — два слоя одного кадра (tools/prepare_hero.py) ──
   Кадр 1800×1065 накрывает поле героя как object-fit: cover, но вручную: через единицы контейнера,
   чтобы слой героя совпадал со сценой пиксель в пиксель и качался вокруг своих ступней.
   Сдвиг 0.3 по горизонтали ставит богатого правее середины, на место фото из шаблона. */
#hero .hero__media { container-type: size; }
#hero .hero__stage {
  position: absolute;
  width: max(100cqw, 100cqh * 1.6901); height: max(100cqh, 100cqw / 1.6901);
  left: calc((100cqw - max(100cqw, 100cqh * 1.6901)) * .3);
  top: calc((100cqh - max(100cqh, 100cqw / 1.6901)) * .25);
}
#hero .hero__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
#hero .hero__man { transform-origin: 50.31% 72.39%; }
#hero .hero__contact { position: absolute; left: calc(50.31% - 4.6%); top: calc(72.39% - .7%); width: 9.2%; height: 1.6%; border-radius: 50%; background: #030405; opacity: .8; }
@keyframes heroSway { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
@keyframes heroContact { from { translate: -18% 0; } to { translate: 18% 0; } }
@media (prefers-reduced-motion: no-preference) {
  #hero .hero__man { animation: heroSway 2.1s ease-in-out 1.2s infinite alternate both; }
  #hero .hero__contact { animation: heroContact 2.1s ease-in-out 1.2s infinite alternate both; }
  #hero.is-paused .hero__man, #hero.is-paused .hero__contact { animation-play-state: paused; }
}

/* русский заголовок длиннее английского: при ширине 6.7em «bomj запишет.» падало на четвёртую строку */
#hero .hero__title { max-width: 7.6em; }

/* на телефоне шаблон кладёт фото под нижнюю часть текста; у нас там лицо героя, поэтому сцена уходит ниже
   текста, а верхнее затухание короче — голова стоит на 9% высоты кадра и не должна растворяться */
@media (max-width: 47.99rem) {
  #hero .hero__copy { padding-bottom: min(104vw, 30rem); }
  #hero .hero__media { -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%); mask-image: linear-gradient(180deg, transparent, #000 7%); }
}

/* ── «Попробуй сам»: тёмно-синяя лента, как «как работает»; во время записи лента становится зелёной ── */
#try { position: relative; isolation: isolate; color: var(--color-2); padding-block: var(--space-2) calc(var(--space-2) + 1rem);
  --bg: var(--color-6); --ink: var(--color-2); --raised: color-mix(in srgb, var(--color-2) 12%, var(--color-6)); --surface: color-mix(in srgb, var(--color-2) 7%, var(--color-6));
  --soft: var(--color-7); --muted: color-mix(in srgb, var(--color-7) 82%, var(--color-6)); --line: color-mix(in srgb, var(--color-2) 18%, var(--color-6)); }
#try > :not(.try__sheet) { position: relative; z-index: 1; }
#try .try__sheet { transition: background-color .45s var(--ease-out); }
#try.is-rec { background: transparent; color: var(--color-1); }
#try.is-rec .try__sheet { background: var(--color-4); }
#try .try__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem 5rem; align-items: start; }
#try .try-copy { padding: 0; max-width: 40rem; }
#try .try-lead { margin-top: 1.25rem; max-width: 30rem; }
#try .mic-wrap { position: relative; right: auto; bottom: auto; width: auto; height: auto; display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
#try .mic { flex: none; width: 6rem; height: 6rem; }
#try .mic-icon { width: 36%; height: 36%; }
#try .mic-live { position: static; width: auto; max-width: 22rem; text-align: left; font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
#try .try-result { position: static; width: auto; max-width: 30rem; margin-top: 1.5rem; }
#try .try-note { margin-top: 1.5rem; max-width: 30rem; }
#try .try-loop { display: grid; gap: 1rem; }
#try .try-loop__video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-2); background: #121212; box-shadow: var(--shadow-1); }
#try.is-rec .try-loop figcaption { color: color-mix(in srgb, var(--color-1) 76%, transparent); }
@media (max-width: 47.99rem) {
  #try .try__inner { grid-template-columns: 1fr; }
  #try .try-loop { max-width: 26rem; }
}

/* ── цифры опросов среди цитат: крупное число, строка, источник ── */
#voices .voices__num { display: grid; gap: .5rem; }
#voices .voices__big { font-size: clamp(2.5rem, 4.2vw, 3.75rem); line-height: 1; color: var(--color-1); }
#voices .m-card .m-text-6 { color: var(--color-5); }

/* ── цена на месте формы: сайт не собирает данных, поэтому формы нет ── */
#contact .contact__price { display: grid; gap: 1.25rem; justify-items: start; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radius-2); background: var(--color-2); }
#contact .contact__figure { font-size: clamp(4.5rem, 9vw, 8rem); line-height: .9; }
#contact .contact__plan { color: var(--color-5); margin-top: -.5rem; }
#contact .contact__list { display: grid; gap: .625rem; }
#contact .contact__list li { position: relative; padding-left: 1.75rem; }
#contact .contact__list li::before { content: ""; position: absolute; left: 0; top: .45em; width: .875rem; height: .5rem; border-left: 2px solid var(--color-4); border-bottom: 2px solid var(--color-4); rotate: -45deg; }
#contact .contact__sub { max-width: 30rem; }
#contact .contact__ways span.m-text-5 { font-weight: 600; }
#footer .footer__legal li span { color: inherit; }

/* островок скидки встаёт под плавающей шапкой Linea, а не на неё */
.dyn-site { top: var(--page-nav-h, 5.5rem); }
body.has-dock #footer { padding-bottom: 6.5rem; }