/* Cardly — business.css («Для бизнеса», cool palette) */

/* Navy instead of black for this page's dark bands */
.theme-business .section--inverse {
  --bg: #050b16;
  --bg-alt: #0a1424;
  --surface: #0f1b2d;
  --surface-2: #0b1626;
  --surface-3: #1b2b44;
  --line: rgba(148, 190, 255, 0.14);
  --line-strong: rgba(148, 190, 255, 0.26);
  --text-2: #9fb0c8;
  --text-3: #7486a1;
}
@media (prefers-color-scheme: dark) {
  .theme-business .section--inverse { --bg: #07111f; }
}

/* ---------- Shared bits ------------------------------------------------ */
.qrow {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.qrow i {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-style: normal;
  font-weight: 700;
  font-size: 0.85em;
}
.qrow em {
  margin-left: auto;
  font-style: normal;
  font-weight: 650;
  color: #d9650f;
  white-space: nowrap;
}
.section--inverse .qrow em,
.dash .qrow em { color: #f0a24a; }
@media (prefers-color-scheme: dark) {
  .qrow em { color: #f0a24a; }
}
.qrow--more { padding-left: 2.6em; color: var(--text-2); font-size: 0.9em; }

/* An uploaded logo arrives as an inline background-image, so only the
   colour, size and position are forced here (a `background` shorthand would
   reset the image too). */
.has-logo {
  background-color: #fff !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
}

/* ---------- Hero -------------------------------------------------------- */
.bhero {
  position: relative;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
.bhero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 35% -20% 0;
  background:
    radial-gradient(40% 45% at 30% 50%, rgba(80, 188, 255, 0.22), transparent 70%),
    radial-gradient(35% 40% at 75% 60%, rgba(11, 111, 208, 0.18), transparent 70%);
  pointer-events: none;
}
.bhero .headline { max-width: 1000px; margin-inline: auto; }
.bhero .gradient-text { display: inline-block; padding-bottom: 0.06em; }
.bhero__lead { max-width: 720px; margin: 24px auto 0; color: var(--text-2); }
.bhero__cta { margin-top: 34px; }
.bhero__stage {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  padding-right: clamp(40px, 9vw, 120px);
}
.bhero__phone {
  --w: clamp(120px, 16vw, 220px);
  position: absolute;
  right: 0;
  bottom: -14%;
  z-index: 2;
}

/* Dashboard mock — designed on a 64em grid that scales with its width */
.dash { container-type: inline-size; }
.dash__body {
  display: grid;
  grid-template-columns: 21% 1fr;
  font-size: calc(100cqw / 64);
  line-height: 1.3;
  text-align: left;
}
.dash__side {
  display: grid;
  align-content: start;
  gap: 0.25em;
  padding: 1.5em 1em;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
}
.dash__venue { display: flex; align-items: center; gap: 0.6em; margin-bottom: 1.3em; font-size: 1.05em; }
.dash__venue .wcard__logo { font-size: 0.9em; }
.dash__nav {
  padding: 0.55em 0.8em;
  border-radius: 0.6em;
  color: var(--text-2);
  font-size: 0.92em;
  font-weight: 550;
}
.dash__nav.is-on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.dash__main { display: grid; gap: 1.1em; padding: 1.6em 1.8em 1.9em; }
.dash__head { display: flex; align-items: baseline; gap: 0.8em; }
.dash__head b { font-size: 1.65em; letter-spacing: -0.03em; }
.dash__head span { color: var(--text-2); font-size: 0.9em; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8em; }
.kpi {
  padding: 0.9em 1em;
  border-radius: 0.9em;
  background: var(--surface-2);
}
.kpi small { display: block; color: var(--text-2); font-size: 0.74em; }
.kpi b { display: block; margin: 0.3em 0 0.15em; font-size: 1.4em; letter-spacing: -0.02em; }
.kpi em { font-style: normal; font-size: 0.74em; color: var(--text-2); }
.kpi em.up { color: #1f9d55; font-weight: 650; }
.dash__row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0.8em; }
.dash__card { padding: 1em 1.1em; border-radius: 0.9em; background: var(--surface-2); }
.dash__card small { color: var(--text-2); font-size: 0.76em; }
.dash__chart svg { width: 100%; height: 9.5em; margin-top: 0.6em; }
.dash__quiet { display: grid; align-content: start; gap: 0.5em; font-size: 0.95em; }
.dash__btn {
  margin-top: 0.3em;
  padding: 0.55em;
  border-radius: 0.6em;
  background: var(--accent);
  color: #fff;
  font-size: 0.82em;
  font-weight: 650;
  text-align: center;
}

/* Lock screen + notification */
.lock {
  background: linear-gradient(165deg, #10294a 0%, #0b6fd0 55%, #6cc4ff 100%);
  color: #fff;
}
.lock .phone__status { color: #fff; }
.lock__time { margin-top: 1.4em; text-align: center; }
.lock__time small { display: block; font-size: 0.9em; opacity: 0.85; }
.lock__time b { display: block; font-size: 4.4em; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.notif {
  display: flex;
  gap: 0.7em;
  margin: 1.7em 0.7em 0;
  padding: 0.8em 0.9em;
  border-radius: 1.25em;
  background: rgba(245, 245, 247, 0.84);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #1d1d1f;
  text-align: left;
  font-size: 1em;
}
/* the app icon in a notification stays in the brand colour */
.notif__icon { width: 2.4em; height: 2.4em; border-radius: 0.65em; font-size: 0.95em; background: var(--brand); color: var(--ink); }
.notif > div { min-width: 0; }
.notif__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  color: #6e6e73;
  font-size: 0.78em;
}
.notif__meta b { color: #1d1d1f; font-size: 1em; }
.notif > div > b { display: block; font-size: 0.92em; letter-spacing: -0.01em; }
.notif > div > span:last-child { display: block; font-size: 0.86em; line-height: 1.3; }
html.js .bhero__phone .notif { animation: notif-in 0.8s var(--ease) 1.1s both; }
@keyframes notif-in {
  from { opacity: 0; transform: translateY(-1.5em) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.notif--light {
  width: min(340px, 100%);
  margin: 0;
  font-size: 15px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}
.notif--light .notif__meta { color: var(--text-2); }
.notif--light .notif__meta b { color: var(--text); }

@media (max-width: 733px) {
  .bhero__stage { padding-right: 0; padding-bottom: 72px; }
  .bhero__phone { --w: 132px; right: 4px; bottom: 0; }
}

/* ---------- Problem ----------------------------------------------------- */
.problem__visual {
  position: relative;
  display: grid;
  place-items: center start;
  min-height: 460px;
}
/* Thermal paper: a warm off-white, a shade darker than the page so it
   doesn't melt into a white background. The zig-zag edge is a mask, and a
   mask would cut away the element's own shadow, so the shadow sits on a
   wrapper (.receipt-wrap) instead. */
.receipt {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(320px, 82vw);
  padding: 26px 24px 34px;
  background: #f1eee8;
  color: #1d1d1f;
  font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 96%, #000) bottom / 14px 100% repeat-x;
  mask: radial-gradient(circle 7px at 50% 100%, transparent 96%, #000) bottom / 14px 100% repeat-x;
}
.receipt-wrap {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08)) drop-shadow(0 18px 34px rgba(0, 0, 0, 0.16));
}
.problem__visual .receipt-wrap { transform: rotate(-3deg); }
.receipt__title { font-size: 17px; font-weight: 700; text-align: center; letter-spacing: -0.01em; }
.receipt__sub {
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1.5px dashed #c9c5bd;
  color: #6e6e73;
  font-size: 12px;
  text-align: center;
}
.receipt__line { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.receipt__total { margin-top: 4px; padding-top: 12px; border-top: 1.5px dashed #c9c5bd; font-weight: 700; }
.receipt__who { color: #0b6fd0; font-weight: 700; }
.receipt__who span:last-child { font-size: 22px; line-height: 1; }
.thought {
  position: absolute;
  top: 16%;
  right: 0;
  max-width: 240px;
  padding: 14px 16px;
  border-radius: 20px 20px 20px 6px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--shadow-1);
}
.thought__who { display: block; margin-bottom: 4px; color: var(--text); font-size: 12px; font-weight: 700; }
@media (max-width: 733px) {
  .problem__visual { min-height: 0; gap: 18px; }
  .thought { position: relative; top: auto; right: auto; justify-self: end; }
}
.problem__text .copy { margin-top: 20px; }
.stat {
  display: grid;
  gap: 6px;
  margin: 28px 0;
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--surface-2);
}
.stat__num { font-size: clamp(48px, 6vw, 72px); font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.stat > span { color: var(--text-2); font-size: 17px; font-weight: 500; }

/* ---------- «Cardly в действии» ---------------------------------------- */
.inaction-head { padding-bottom: clamp(16px, 3vw, 40px); }
.inaction-head__copy { max-width: 560px; margin: 18px auto 0; }
.inaction-tail { padding-top: 24px; }

.bstory { --step-len: calc(var(--vh) * 0.85); }
.bstory__layout {
  display: grid;
  align-items: center;
  gap: 32px;
  height: 100%;
  padding-block: 24px;
}
@media (min-width: 1068px) {
  .bstory__layout { grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
}
.bstory__caps {
  display: grid;
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bstory__n {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bstory__cap .h3 {
  margin-bottom: 14px;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.bstory__cap .copy { max-width: 470px; }
.bstory__cap .fine { margin-top: 12px; }

.scene {
  container-type: inline-size;
  justify-self: center;
  width: min(100%, 640px);
}
.scene__inner {
  position: relative;
  aspect-ratio: 36 / 32;
  font-size: calc(100cqw / 36);
  line-height: 1.3;
}

/* without the scroll engine: captions as a list + the final frame */
.frame { display: none; }
.frame--5 { display: grid; }
.bstory:not([data-story-ready]) .scene__inner { aspect-ratio: auto; padding-block: 2em; }

html.js .bstory[data-story-ready] .bstory__caps { display: block; position: relative; min-height: 270px; }
html.js .bstory[data-story-ready] .bstory__cap {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
html.js .bstory[data-story-ready] .bstory__cap.is-past { transform: translateY(-18px); }
html.js .bstory[data-story-ready] .bstory__cap.is-active { opacity: 1; transform: none; pointer-events: auto; }
html.js .bstory[data-story-ready] .frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.6s;
}
html.js .bstory[data-story-ready] .frame.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}

@media (max-width: 1067px) {
  html.js .bstory[data-story-ready] .bstory__layout {
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 8px;
    padding-top: 18px;
    padding-bottom: 44px;
    text-align: center;
  }
  html.js .bstory[data-story-ready] .bstory__caps { min-height: 190px; }
  html.js .bstory[data-story-ready] .bstory__cap .h3 { margin-bottom: 8px; }
  html.js .bstory[data-story-ready] .bstory__cap .copy { margin-inline: auto; font-size: 16px; }
  html.js .bstory[data-story-ready] .bstory__n { margin-bottom: 6px; }
  html.js .bstory[data-story-ready] .scene {
    align-self: center;
    width: min(100%, calc((var(--vh) - var(--header-bottom) - 300px) * 36 / 32), 560px);
  }
}
/* Phones: the scene gives up a little width so the progress dots can stand to
   its right, centred on it (it sits centred between the 216px of captions
   above and the 44px of padding below). */
@media (max-width: 733px) {
  html.js .bstory[data-story-ready] {
    --sw: min(100vw - 2 * var(--gutter) - 40px, calc((var(--vh) - var(--header-bottom) - 300px) * 36 / 32), 560px);
  }
  html.js .bstory[data-story-ready] .scene { width: var(--sw); }
  html.js .bstory[data-story-ready] .story__dots {
    top: calc(50% + 86px);
    right: auto;
    bottom: auto;
    left: calc(50% + var(--sw) / 2 + 12px);
    grid-auto-flow: row;
    transform: translateY(-50%);
  }
  html.js .bstory[data-story-ready] .story__dots button[aria-current="step"] { width: 8px; height: 26px; }
}

/* frame 0 — receipt → person */
.frame--0 { place-items: initial !important; }
.receipt--scene {
  position: absolute;
  left: 0.6em;
  top: 9.2em;
  width: 15.5em;
  gap: 0.65em;
  padding: 1.3em 1.2em 1.9em;
  font-size: 1em;
  transform: rotate(-4deg);
}
.receipt--scene .receipt__title { font-size: 1.05em; }
.receipt--scene .receipt__line { font-size: 0.92em; }
.receipt__card {
  font-size: 0.86em !important;
  margin: 0.2em -0.5em 0;
  padding: 0.35em 0.5em;
  border-radius: 0.45em;
  background: rgba(11, 111, 208, 0.09);
  color: #0b6fd0;
  font-weight: 700;
}
/* runs from the receipt to just under the edge of Марина's chip (the chip
   is ~13em wide at right: 0.4em, so its left edge sits at ~22.6em) and is
   revealed left to right as the step plays */
.link-line {
  position: absolute;
  left: 16.2em;
  top: 12.4em;
  width: 7em;
  height: 4em;
  overflow: visible;
  clip-path: inset(-1em calc(100% - 100% * min(1, var(--sp, 1) * 2.4)) -1em -1em);
}
.link-line path {
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.person-chip {
  --show: clamp(0, calc(var(--sp, 1) * 3 - 0.9), 1);
  position: absolute;
  right: 0.4em;
  top: 11em;
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.9em 1.3em 0.9em 0.9em;
  border-radius: 1.4em;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1em 3em rgba(0, 0, 0, 0.35);
  opacity: var(--show);
  transform: translateY(calc((1 - var(--show)) * 1.2em)) scale(calc(0.92 + var(--show) * 0.08));
}
.person-chip__ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5aa42, #eb624e);
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
}
.person-chip b { display: block; font-size: 1.15em; letter-spacing: -0.02em; }
.person-chip small { display: block; color: var(--text-2); font-size: 0.82em; }

/* frame 1 — profile */
.profile {
  display: grid;
  gap: 1.2em;
  width: 26em;
  padding: 1.5em;
  border-radius: 1.6em;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1.5em 4em rgba(0, 0, 0, 0.4);
  text-align: left;
}
.profile__head { display: flex; align-items: center; gap: 0.9em; }
.profile__head b { display: block; font-size: 1.3em; letter-spacing: -0.02em; }
.profile__head small { display: block; color: var(--text-2); font-size: 0.85em; }
.profile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.profile__grid > div { padding: 0.75em 0.9em; border-radius: 0.9em; background: var(--surface-2); }
.profile__grid small,
.profile__bars small { display: block; color: var(--text-2); font-size: 0.78em; }
.profile__grid b { font-size: 1.25em; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bars {
  display: flex;
  align-items: flex-end;
  gap: 0.35em;
  height: 3.8em;
  margin-top: 0.6em;
}
.bars i {
  flex: 1;
  height: calc(var(--h) * 100%);
  min-height: 0.2em;
  border-radius: 0.25em;
  background: var(--c-sky);
  transform-origin: bottom;
  transform: scaleY(clamp(0.05, calc(var(--sp, 1) * 2.4), 1));
}
.bars i:nth-last-child(-n + 3) { background: #f0a24a; }

/* frame 2 — silence */
.quiet { display: grid; gap: 0.9em; width: 30em; text-align: left; }
.timeline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5em;
  height: 3.2em;
  padding: 0 1.1em;
  border-radius: 1em;
  background: var(--surface);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 1.1em;
  right: 1.1em;
  top: 50%;
  height: 2px;
  background: var(--line-strong);
}
.timeline i { position: relative; width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--c-sky); }
.timeline__gap {
  position: relative;
  margin-left: auto;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: #2a2112;
  color: #f0a24a;
  font-size: 0.82em;
  font-weight: 650;
  box-shadow: 0 0 0 1px rgba(240, 162, 74, 0.35);
}
.risk {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9em;
  padding: 0.85em 1.1em;
  border-radius: 1em;
  background: var(--surface);
  font-size: 0.92em;
}
.risk span { color: var(--text-2); }
.risk__bar { height: 0.5em; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.risk__bar i {
  display: block;
  height: 100%;
  width: calc(min(1, var(--sp, 1) * 2) * 82%);
  border-radius: inherit;
  background: linear-gradient(90deg, #50bcff, #f0a24a 60%, #ff6b5a);
}
.risk b { color: #ff8a6e; }
.quiet__list {
  display: grid;
  gap: 0.5em;
  padding: 0.95em 1.1em;
  border-radius: 1em;
  background: var(--surface);
  font-size: 0.95em;
}
.quiet__list small { color: var(--text-2); font-size: 0.82em; }
.quiet__list .qrow {
  --show: clamp(0, calc(var(--sp, 1) * 8 - var(--i) - 0.4), 1);
  opacity: var(--show);
  transform: translateX(calc((1 - var(--show)) * 1em));
}

/* frame 3 — segment → action */
.segact { display: grid; justify-items: center; gap: 0.9em; width: 30em; }
.seg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.7em 1.2em;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 650;
}
.seg-chip svg { width: 1.3em; height: 1.3em; }
.segact__arrow { width: 1.6em; height: 1.6em; color: var(--text-3); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; }
.act {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1em;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  font-size: 0.95em;
  font-weight: 600;
}
.act svg { width: 1.2em; height: 1.2em; }
.frame--3.is-active .act.is-picked { animation: pick 0.5s var(--ease) 0.5s both; }
.bstory:not([data-story-ready]) .act.is-picked,
.act.is-picked { background: var(--accent); color: #fff; box-shadow: none; }
@keyframes pick {
  from { background: var(--surface); color: var(--text-2); transform: scale(1); }
  60% { transform: scale(1.08); }
  to { background: var(--accent); color: #fff; transform: scale(1); }
}
.offer {
  --show: clamp(0, calc(var(--sp, 1) * 3 - 0.6), 1);
  display: grid;
  gap: 0.3em;
  width: 100%;
  margin-top: 0.4em;
  padding: 1.2em 1.4em;
  border-radius: 1.2em;
  background: linear-gradient(135deg, #0b6fd0, #2a9bf0);
  color: #fff;
  text-align: left;
  opacity: var(--show);
  transform: translateY(calc((1 - var(--show)) * 1.2em));
}
.offer b { font-size: 1.35em; letter-spacing: -0.02em; }
.offer small { font-size: 0.85em; opacity: 0.88; }
.offer__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  justify-self: start;
  margin-bottom: 0.3em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.75em;
  font-weight: 650;
}
.offer__tag svg { width: 1.1em; height: 1.1em; }

/* frame 4 — push */
.scene__phone { --w: 14.5em; }
.scene__phone .notif {
  --show: clamp(0, calc(var(--sp, 1) * 3.2), 1);
  opacity: var(--show);
  transform: translateY(calc((1 - var(--show)) * -5em));
}
.scene__note {
  position: absolute;
  right: 0.5em;
  bottom: 4em;
  padding: 0.5em 0.95em;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.82em;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* frame 5 — result */
.frame--5 { align-content: center; gap: 1.6em; }
.result { display: flex; align-items: center; gap: 2em; }
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 11em;
  aspect-ratio: 1;
  text-align: center;
}
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.ring .ring__val {
  stroke: #50bcff;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - 69 * min(1, var(--sp, 1) * 2));
}
.ring b { display: block; font-size: 1.6em; letter-spacing: -0.02em; }
.ring small { color: var(--text-2); font-size: 0.82em; }
.result__kpis { display: grid; gap: 0.6em; text-align: left; }
.result__kpis > div { min-width: 15em; padding: 0.75em 1.1em; border-radius: 1em; background: var(--surface); }
.result__kpis small { display: block; color: var(--text-2); font-size: 0.78em; }
.result__kpis b { font-size: 1.4em; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.result__roi b { color: #4cd964; }
.outro { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em; }
.outro span {
  padding: 0.55em 1em;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.9em;
  font-weight: 650;
}

/* ---------- Bento (analytics) ----------------------------------------- */
.bento { display: grid; gap: 20px; }
@media (min-width: 734px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1068px) { .bento { grid-template-columns: repeat(3, 1fr); } }
.bento__cell {
  --pad: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 380px;
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
@media (min-width: 734px) {
  .bento__cell--wide,
  .bento__cell--strip { grid-column: 1 / -1; }
}
@media (min-width: 1068px) {
  .bento__cell--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 40px; }
  .bento__cell--wide .bento__text { flex: 0 0 44%; }
}
.bento__cell--strip { min-height: 0; gap: 4px; }
.bento__label {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 650;
}
.bento .h3 { margin-bottom: 10px; }
.bento .copy { font-size: 17px; }
.bento__art { margin-top: auto; }
.bento__cell--wide .bento__art { margin-top: 0; flex: 1; min-width: 0; }

.clv { display: grid; gap: 12px; }
.clv__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 8em) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.clv__row i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
}
.clv__row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.clv__bar {
  height: 10px;
  width: calc(var(--v) * 100%);
  border-radius: 5px;
  background: linear-gradient(90deg, #89ddff, #0b6fd0);
}
.clv__row em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

.churn { position: relative; padding-top: 30px; }
.churn svg { width: 100%; height: 110px; overflow: visible; }
.churn__line { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.churn circle { fill: #f0a24a; }
.churn__flag {
  position: absolute;
  left: 52%;
  top: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(240, 162, 74, 0.16);
  color: #c46a00;
  font-size: 12px;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) { .churn__flag { color: #f0a24a; } }

.roi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  justify-items: center;
  gap: 12px 16px;
}
.donut {
  --c: #f0a24a;
  position: relative;
  display: grid;
  place-content: center;
  width: 104px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--surface-3) 0);
  text-align: center;
}
.donut::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--surface-2);
}
.donut b,
.donut small { position: relative; }
.donut b { font-size: 20px; letter-spacing: -0.02em; line-height: 1.1; }
.donut small { color: var(--text-2); font-size: 11px; }
.donut--good { --c: #34c759; }
.roi__verdict { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.roi__verdict--bad { background: rgba(215, 0, 21, 0.09); color: #d70015; }
.roi__verdict--good { background: rgba(52, 199, 89, 0.14); color: #1c7c3a; }
@media (prefers-color-scheme: dark) {
  .roi__verdict--bad { color: #ff6961; background: rgba(255, 105, 97, 0.14); }
  .roi__verdict--good { color: #4cd964; }
}

.names { display: grid; gap: 10px; font-size: 15px; }
.names .qrow { padding: 10px 14px; border-radius: 14px; background: var(--surface); }

.funnel { display: grid; gap: 8px; }
.funnel__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(var(--v) * 100%);
  min-width: max-content;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(80, 188, 255, 0.32), rgba(11, 111, 208, 0.2));
  font-size: 13px;
  color: var(--text);
}
.funnel__bar b { font-size: 18px; letter-spacing: -0.02em; }

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pills li {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px;
  font-weight: 600;
}

/* «И базовая аналитика» as drifting rows, built by business.js. Each track
   holds the row twice, side by side, each copy exactly as wide as the strip,
   and slides by one copy per loop: what leaves on the left is already coming
   in on the right. */
.ticker {
  display: grid;
  gap: 10px;
  margin-inline: calc(-1 * var(--pad));
}
.ticker__row { overflow: hidden; }
.ticker__track {
  display: flex;
  width: 200%;
  animation: ticker var(--dur, 40s) linear infinite;
}
.ticker__copy {
  display: flex;
  flex: none;
  justify-content: space-around;
  align-items: center;
  width: 50%;
}
.ticker__pill {
  flex: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }
@media (max-width: 733px) {
  .ticker__pill { padding: 7px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__copy + .ticker__copy { visibility: hidden; }
}

/* ---------- Without / with --------------------------------------------- */
.vs__col {
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius);
}
.vs__col--before { background: var(--surface); color: var(--text-2); }
.vs__col--after { background: linear-gradient(150deg, #0b5fb5, #1e88e5 60%, #50bcff); color: #fff; }
.vs__tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
}
.vs__col--after .vs__tag { background: rgba(255, 255, 255, 0.2); color: #fff; }
.vs__col--before .h3 { color: var(--text); }
.vs ul {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 550;
}
.vs li { display: flex; align-items: flex-start; gap: 12px; }
.vs li svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.vs__col--before li svg { color: var(--text-3); }

/* ---------- Assistant -------------------------------------------------- */
.assistant__text .copy { margin-top: 20px; }
.chat {
  display: grid;
  gap: 12px;
  width: min(100%, 470px);
  margin-inline: auto;
  padding: 18px;
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
  font-size: 15px;
}
.chat__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.chat__ava { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--grad); color: #fff; }
.chat__ava svg { width: 18px; height: 18px; }
.chat__msg { max-width: 88%; padding: 12px 14px; border-radius: 18px; line-height: 1.4; }
.chat__msg--me { justify-self: end; border-bottom-right-radius: 6px; background: var(--accent); color: #fff; }
.chat__msg--bot { display: grid; gap: 8px; justify-self: start; border-bottom-left-radius: 6px; background: var(--surface); }
.chat__msg--bot .qrow { font-size: 14px; }
.chat__more { padding-left: 2.6em; color: var(--text-2); font-size: 13px; }
.chat__action {
  justify-self: start;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 650;
}
.chat__input { padding: 12px 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); }
html.js .chat .chat__msg { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
html.js .chat.is-in .chat__msg--me { opacity: 1; transform: none; transition-delay: 0.35s; }
html.js .chat.is-in .chat__msg--bot { opacity: 1; transform: none; transition-delay: 1.1s; }

/* ---------- Business customizer ---------------------------------------- */
.bcz {
  display: grid;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1068px) {
  .bcz { grid-template-columns: 380px 1fr; gap: 56px; align-items: center; }
}
.bcz__controls {
  display: grid;
  gap: 22px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
}
.bcz__field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bcz__field > label,
.bcz__label { padding: 0; font-size: 15px; font-weight: 650; }
legend.bcz__label { margin-bottom: 8px; }
.bcz .field { min-height: 46px; padding: 10px 14px; border-radius: 12px; font-size: 16px; }
.bcz__logo-row { display: flex; align-items: center; gap: 16px; }
.bcz__upload { min-height: 40px; padding: 8px 16px; font-size: 15px; cursor: pointer; }
.bcz__upload svg { width: 18px; height: 18px; }
.bcz__upload:focus-within { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.bcz__clear,
.bcz__reset { padding: 0; border: 0; background: none; font-size: 15px; }
.bcz__reset { justify-self: start; }
.bcz__hint { color: var(--text-3); font-size: 12px; }
.bcz .swatches { gap: 10px; }
.bcz .swatch { width: 34px; height: 34px; }

.bcz__preview { display: grid; gap: 20px; }
.bcz__tabs { display: none; }
.bcz__surfaces {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px 32px;
  align-items: center;
  justify-items: center;
}
.bcz__surface { display: grid; place-items: center; width: 100%; }
.bcz__surface--app { grid-row: span 2; }
.bcz__phone { --w: clamp(260px, 23vw, 300px); }
.bcz__pass { width: min(320px, 100%); }

@media (max-width: 1067px) {
  .bcz__preview { order: -1; }
  .bcz__tabs {
    display: inline-flex;
    justify-self: center;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-3);
  }
  .bcz__tabs button {
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
  }
  .bcz__tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
  .bcz__surfaces { grid-template-columns: 1fr; }
  .bcz__surface { display: none; }
  .bcz__surface--app { grid-row: auto; }
  .bcz[data-cz-view="app"] .bcz__surface--app,
  .bcz[data-cz-view="pass"] .bcz__surface--pass,
  .bcz[data-cz-view="push"] .bcz__surface--push { display: grid; }
  .bcz__phone { --w: min(230px, 62vw); }
}

.app-points { margin-top: clamp(48px, 6vw, 72px); }
.app-point { padding: 28px; border-radius: var(--radius); background: var(--surface); }
.app-point .h3 { margin-bottom: 10px; }
.app-point .copy { font-size: 17px; }

/* ---------- Feedback ---------------------------------------------------- */
.ticks {
  display: grid;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding-left: 36px;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.45;
}
.ticks li b { color: var(--text); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.fbdash {
  display: grid;
  gap: 12px;
  width: min(100%, 440px);
  margin-inline: auto;
  padding: 22px;
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
}
.fbdash__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; }
.fbdash__head small { display: block; color: var(--text-2); font-size: 13px; }
.fbdash__head b { display: inline-flex; align-items: center; gap: 6px; font-size: 34px; letter-spacing: -0.03em; }
.fbdash__head b svg { width: 24px; height: 24px; color: #f5aa42; }
.fbdash__spark { width: 120px; height: 36px; }
.fbdash__spark path { fill: none; stroke: #34c759; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fbdash__item { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.fbdash__item p { font-size: 15px; font-weight: 550; }
.fbdash__item small { color: var(--text-2); font-size: 12px; }
.fbdash .stars svg { width: 15px; height: 15px; }
.fbdash .stars svg.off { color: var(--surface-3); }
.fbdash__item--alert { box-shadow: inset 3px 0 0 #ff6b5a; }
.fbdash__item--alert small b { color: #d70015; }
.fbdash__tag {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e3f6e8;
  color: #1c7c3a;
  font-size: 12px;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .fbdash__item--alert small b { color: #ff6961; }
  .fbdash__tag { background: rgba(52, 199, 89, 0.16); color: #4cd964; }
}
.bfb__text .ticks { max-width: 520px; }

/* ---------- Mechanics --------------------------------------------------- */
.mech__card { display: grid; align-content: start; gap: 10px; }
.mech__art {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  height: 170px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: var(--tint);
  text-align: center;
}
.mech__big { display: block; color: var(--accent-ink); font-size: 60px; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.mech__art small { color: var(--text-2); font-size: 14px; }
.stamps { display: grid; grid-template-columns: repeat(3, 42px); gap: 10px; }
.stamps i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px dashed var(--line-strong);
  color: var(--accent-ink);
}
.stamps i.on { border: 0; background: var(--accent); }
.stamps i.gift { border: 2px solid var(--accent-ink); }
.stamps svg { width: 22px; height: 22px; }
.mech__badges { display: flex; gap: 14px; }
.mech .copy { font-size: 17px; }

/* ---------- Setup ------------------------------------------------------- */
.setup {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1068px) { .setup { grid-template-columns: repeat(3, 1fr); } }
.setup__step {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px 16px 30px;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.setup__step > :not(.setup__art) { margin-inline: 14px; }
.setup__step .copy { font-size: 17px; }
.setup__art {
  display: grid;
  place-items: center;
  height: 230px;
  margin-bottom: 12px;
  border-radius: 20px;
  background: var(--tint);
}
.mini-page {
  display: grid;
  justify-items: start;
  gap: 9px;
  width: 180px;
  padding: 18px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.mini-page .wcard__logo { font-size: 16px; }
.mini-page b { font-size: 16px; }
.mini-page i { width: 100%; height: 10px; border-radius: 5px; background: var(--surface-3); }
.mini-page i.short { width: 60%; }
.pair {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 28px;
  border-radius: 18px;
  background: #1d1d1f;
  color: #fff;
  box-shadow: var(--shadow-2);
}
.pair small { font-size: 12px; opacity: 0.7; }
.pair b { font-size: 36px; letter-spacing: 0.08em; }
.pair span { color: #f0a24a; font-size: 12px; }
.setup__more { margin-top: 20px; }
.setup__more .card { background: var(--surface-2); }
.setup__more .copy { font-size: 17px; }

/* ---------- Comparison table ------------------------------------------- */
.cmp-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.cmp {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 15px;
}
.cmp th,
.cmp td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.cmp thead th {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 650;
  vertical-align: bottom;
}
.cmp tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 210px;
  background: var(--surface);
  font-weight: 550;
  text-align: left;
}
.cmp thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp td { font-size: 0; }
.cmp td::before { font-size: 20px; font-weight: 700; }
.cmp td.yes::before { content: "✓"; color: #1f9d55; }
.cmp td.no::before { content: "—"; color: var(--text-3); font-weight: 400; }
.cmp td.part::before { content: "±"; color: #c46a00; }
@media (prefers-color-scheme: dark) {
  .cmp td.yes::before { color: #4cd964; }
  .cmp td.part::before { color: #f0a24a; }
}
.cmp .cmp__us { background: var(--accent-soft); }
.cmp thead .cmp__us { color: var(--accent-ink); font-size: 17px; font-weight: 750; }
@media (max-width: 733px) {
  .cmp { min-width: 620px; font-size: 14px; }
  .cmp th,
  .cmp td { padding: 12px 10px; }
  .cmp tbody th { min-width: 150px; max-width: 150px; }
  .cmp thead th { font-size: 12px; }
}

/* ---------- Calculator ------------------------------------------------- */
.calc {
  display: grid;
  gap: 28px;
  padding: clamp(22px, 4vw, 44px);
  border-radius: var(--radius);
  background: var(--surface-2);
}
@media (min-width: 1068px) {
  .calc { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
}
.calc__inputs { display: grid; gap: 30px; }
.range { display: grid; gap: 14px; }
.range__top { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; }
.range output { color: var(--accent-ink); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.range input[type="range"] {
  --fill: 50%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.range input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(var(--accent), var(--accent)) 0 / var(--fill) 100% no-repeat, var(--surface-3);
}
.range input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(var(--accent), var(--accent)) 0 / var(--fill) 100% no-repeat, var(--surface-3);
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.range input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.calc__result {
  display: grid;
  gap: 8px;
  padding: 28px;
  border-radius: 22px;
  background: var(--surface);
}
.calc__result small { color: var(--text-2); font-size: 15px; }
.calc__sum {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.04;
  font-variant-numeric: tabular-nums;
}
.calc__formula { color: var(--text-2); font-size: 15px; font-variant-numeric: tabular-nums; }

/* setup step 1: sign-up card; step 3: POS code + QR sign side by side */
.mini-signup {
  display: grid;
  gap: 8px;
  width: 190px;
  padding: 16px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: 13px;
}
.mini-signup b { font-size: 16px; margin-bottom: 2px; }
.mini-signup span {
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--text-2);
}
.mini-signup i {
  margin-top: 4px;
  padding: 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-style: normal;
  font-weight: 600;
  text-align: center;
}
.setup__art--pair { display: flex; justify-content: center; align-items: center; gap: 0; }
.setup__art--pair .pair { padding: 14px 18px; transform: rotate(-3deg); z-index: 1; margin-right: -22px; }
.setup__art--pair .pair b { font-size: 26px; }
.setup__art--pair .qr-sign { width: 120px; padding: 14px 14px 10px; font-size: 11px; transform: rotate(4deg); }