/* The landing (site/index.html). Shared tokens, buttons and form fields are in brand.css. */
.wrap {
  max-width: 1240px;
  margin: auto;
  padding: 0 38px;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
p,
summary,
small {
  text-wrap: pretty;
}
h2,
.lead-block h2 {
  font-size: clamp(32px, 3.4vw, 48px);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* site.js hides links and lines with the attribute; a class's display must not bring them back. */
[hidden] {
  display: none !important;
}
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
/* A text link keeps its look and gets a finger-sized target. */
.text-link {
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-link,
.no-risk a,
.footer-links a,
.section-heading p a,
.faq > div:first-child p a,
.pricing-theses a,
.footer-bottom a {
  display: inline-block;
  padding: 11px 0;
  margin: -11px 0;
}
.text-note {
  font-size: 13px;
  color: var(--muted);
}

/* --- the strip for a visitor who came by someone's link ------------------------------------------------------- */
.ribbon {
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 44px 10px 21px;
  position: relative;
  text-align: center;
}
.ribbon[hidden] {
  display: none;
}
.ribbon a {
  color: var(--lime);
  font-weight: 650;
}
.ribbon-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #fff;
  min-width: 44px;
  min-height: 44px;
}

/* --- the header ------------------------------------------------------------------------------------------------ */
.topbar {
  position: relative;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
/* From 761 px the header stays at the top: the free start is always at hand. Its paper background and bottom line
   run the full width through border-image, which neither scrolls sideways nor clips the tablet's open menu. */
@media (min-width: 761px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 72px;
    border-bottom: 0;
    background: var(--paper);
    border-image: linear-gradient(0deg, var(--line) 1px, var(--paper) 1px) fill 0 / 0 / 0 100vmax;
  }
}
.nav {
  display: flex;
  gap: 26px;
  align-items: center;
}
.nav a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.nav a:hover {
  color: #548122;
}
.nav-cta {
  display: none;
}
.topbar-cta {
  white-space: nowrap;
}
.menu-button {
  display: none;
  border: 1px solid var(--line);
  background: none;
  padding: 9px 14px;
  border-radius: 10px;
}

/* --- the hero -------------------------------------------------------------------------------------------------- */
.hero {
  padding: 57px 0 77px;
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.hero.wrap {
  padding-left: 38px;
  padding-right: 38px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -40px 0 0 36%;
  background: radial-gradient(closest-side at 60% 48%, #dce9c9b3, #dce9c900);
  pointer-events: none;
}
.hero-top {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 50px;
  align-items: center;
}
.hero-copy {
  min-width: 0;
}
/* H1 — 3 строки на 320–1440 px: «Хватит терять записи / вечером, в выходные / и пока вы с клиентом.» */
.hero h1 {
  font-size: clamp(34px, 4.3vw, 62px);
  line-height: 1.04;
  text-wrap: balance;
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  color: #57713c;
}
.hero .eyebrow {
  margin-bottom: 22px;
  text-wrap: balance; /* «…автосервисов / и клиник», never «клиник» alone */
}
.v {
  display: none;
}
body[data-for=""] .v-any,
body[data-for="auto"] .v-auto,
body[data-for="dental"] .v-dental,
body[data-for="beauty"] .v-beauty,
body[data-for="stay"] .v-stay {
  display: revert;
}
.hero-copy > p {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 30px;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-note {
  display: flex;
  gap: 8px 18px;
  margin-top: 21px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.hero-note span::before,
.hero-note a::before {
  content: "✓";
  color: #688244;
  margin-right: 5px;
}
.hero-note a {
  flex-basis: 100%;
  padding-block: 3px;
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 3px;
}
.hero-note a::before {
  display: inline-block; /* the link's underline no longer runs under the ✓ */
}
/* A base of stays has neither the free 14 days nor the п. 4.4 guarantee: its own line under the buttons. site.js marks
   the sphere on the body (data-kind); without the script ?for=stay decides. */
.hero-note.n-stay,
body[data-for="stay"]:not([data-kind]) .hero-note.n-any,
body[data-kind="stay"] .hero-note.n-any {
  display: none;
}
body[data-for="stay"]:not([data-kind]) .hero-note.n-stay,
body[data-kind="stay"] .hero-note.n-stay {
  display: flex;
}
.workspace {
  position: relative;
  padding: 30px 0 0 24px;
  min-width: 0;
}
.workspace::before {
  content: "";
  position: absolute;
  inset: 7px -10px 16px 0;
  border-radius: 48% 45% 35% 40%;
  background: #e6eddb;
  transform: rotate(-8deg);
  z-index: -1;
}
/* The example of the result: the question at 23:12, then the finished booking in the owner's Telegram at 23:14. */
.mock {
  position: relative;
}
.chat-float {
  position: relative;
  z-index: 0;
  width: 236px;
  background: var(--forest);
  color: #fff;
  border-radius: 18px;
  padding: 16px 16px 18px;
  box-shadow: 0 13px 35px -20px #1b2e21;
  transform: rotate(2deg);
}
.chat-head {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 10px;
}
.chat-head small {
  font-size: 11px;
  display: block;
  color: #b7c6b9;
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
}
.bubble {
  font-size: 13px;
  line-height: 1.5;
  border-radius: 10px;
  padding: 9px 11px;
  background: #ffffff14;
  margin-top: 8px;
}
.bubble.answer {
  background: var(--lime);
  color: var(--ink);
  margin-left: 22px;
}
.bubble .checkmark {
  display: block;
  text-align: right;
  line-height: 1;
  color: #4f6b31;
  font-size: 11px;
  margin-top: 4px;
}
/* the Telegram card overlaps the chat's foot: the lime answer and its ✓✓ stay above it */
.chat-float {
  padding-bottom: 32px;
}
.workspace {
  padding-top: 8px;
}
.chat-float .chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.chip {
  padding: 3px 8px;
  border-radius: 6px;
  background: #fff;
  font-weight: 700;
}
.chip.on {
  background: var(--ink);
  color: var(--lime);
}
.tg-card {
  position: relative;
  z-index: 1;
  margin: -22px 0 0 64px;
  background: #fff;
  border: 1px solid #dee5d9;
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow:
    0 30px 80px -34px #3b4e274d,
    0 4px 10px #253c3008;
  transform: rotate(-1.5deg);
}
.tg-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf0e9;
  font-size: 13px;
}
.tg-head small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.tg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--forest);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.tg-msg {
  display: none;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
body:not([data-for="auto"]):not([data-for="dental"]) .tg-msg.m-beauty,
body[data-for="auto"] .tg-msg.m-auto,
body[data-for="dental"] .tg-msg.m-dental {
  display: block;
}
.tg-msg b {
  display: block;
  font-size: 15px;
}
.tg-msg .night {
  display: block;
  color: #3f5a26;
  font-weight: 650;
}
.tg-msg .gap {
  display: block;
  height: 8px;
}
/* The masked digits in two groups: Manrope's bullets stand wide apart and would read as a broken number. */
.mask {
  letter-spacing: -0.14em;
}
.tg-buttons {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.tg-buttons span {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border-radius: 9px;
  background: #eef2ea;
  font-size: 12px;
  font-weight: 600;
}
.visual-label {
  display: inline-block;
  margin: 16px 0 0 64px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 14px;
  text-decoration: none;
}
.hero-strip {
  margin-top: 53px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.hero-strip p {
  font-size: 13px;
  margin: 0;
  max-width: 280px;
}
.channels {
  display: flex;
  gap: 30px;
  font-weight: 650;
  font-size: 15px;
}
.channels span {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.channel-icon {
  width: 25px;
  height: 25px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  font-style: normal;
}
.made-in {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
}
.made-in .dot {
  margin: 0;
}

/* --- sections -------------------------------------------------------------------------------------------------- */
.section {
  padding: 95px 0;
}
.section-heading {
  margin-bottom: 40px;
}
.section-heading h2 {
  margin-bottom: 0;
}
.section-heading p {
  max-width: 600px;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #45544a;
}
.white-section {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.accent {
  color: #57713c;
}

/* --- the demos ------------------------------------------------------------------------------------------------- */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}
body[data-for="auto"] .demo-card.auto,
body[data-for="dental"] .demo-card.dental,
body[data-for="beauty"] .demo-card.beauty,
body[data-for="stay"] .demo-card.stay {
  order: -1;
}
.demo-card:focus-within {
  border-color: #789d4d;
  box-shadow: 0 12px 40px -24px #253c3059;
}
@media (hover: hover) {
  .demo-card:hover {
    transform: translateY(-3px);
    border-color: #9aaf85;
    box-shadow: 0 14px 45px -27px #253c3059;
  }
}
/* The whole card opens its demo: the button's layer covers the card, the second link stays above it. */
.demo-actions .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
}
.demo-actions .btn:hover {
  transform: none;
}
.demo-actions .text-link {
  position: relative;
  z-index: 1;
}
.demo-art {
  height: 206px;
  padding: 33px 36px;
  background: radial-gradient(ellipse at 20% 10%, #f3f7eb, #dbe6cc);
  position: relative;
  overflow: hidden;
}
.demo-art.dental {
  background: radial-gradient(ellipse at 80% 10%, #f4f6fc, #dce3f0);
}
.demo-art.beauty {
  background: radial-gradient(ellipse at 50% 0%, #fbf3f6, #ecd9e3);
}
.demo-art.stay {
  background: radial-gradient(ellipse at 30% 0%, #eef8f7, #cfe6e4);
}
.mini-ticket {
  background: #fff;
  border: 1px solid #d9dfd2;
  border-radius: 12px;
  padding: 17px 21px;
  width: 87%;
  transform: rotate(-3deg);
  box-shadow: 0 15px 28px -23px #2b392c;
  font-size: 12px;
}
.dental .mini-ticket {
  transform: rotate(3deg);
}
.beauty .mini-ticket {
  transform: rotate(-2deg);
}
.stay .mini-ticket {
  transform: rotate(2deg);
}
.ticket-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 19px;
  font-size: 11px;
  color: var(--muted);
}
.ticket-head span {
  white-space: nowrap;
}
.mini-ticket strong {
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}
.slots {
  display: flex;
  gap: 8px;
  font-size: 11px;
}
.slots span {
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 7px;
}
.slots .chosen {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.slots .chosen.pulse {
  animation: slot-pulse 0.18s ease-out;
}
@keyframes slot-pulse {
  50% {
    transform: scale(1.06);
  }
}
.ticket-seal {
  position: absolute;
  right: 25px;
  bottom: 23px;
  border-radius: 30px;
  background: var(--lime);
  padding: 10px 17px;
  font-size: 12px;
  font-weight: 600;
  transform: rotate(4deg);
  border: 4px solid #e6ebdf;
}
.dental .ticket-seal {
  border-color: #e8ecf4;
  background: #d6ddef;
}
.beauty .ticket-seal {
  border-color: #f4e8ee;
  background: #ecc9d9;
}
.stay .ticket-seal {
  border-color: #e4f0ee;
  background: #bfe0dc;
}
.demo-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 30px;
}
.demo-content h3 {
  margin: 0 0 13px;
}
.demo-content p {
  font-size: 15px;
  max-width: 440px;
  margin-bottom: 22px;
}
.tile-seal {
  display: none;
}
.demo-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto; /* the buttons sit on one line across the row, whatever the text above */
}
/* «Или в Telegram» in the colour of its card. */
.demo-card.auto .text-link {
  color: #4a7318;
}
.demo-card.dental .text-link {
  color: #4a63a8;
}
.demo-card.beauty .text-link {
  color: #b14f7c;
}
.demo-card.stay .text-link {
  color: #276f75;
}
.demo-tg {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  margin: 14px 0 0;
}
.demo-tg a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}
.demo-note {
  font-size: 13px;
  text-align: center;
  margin: 21px 0 0;
}
.demo-other {
  font-size: 13px;
  text-align: center;
  margin: 6px 0 0;
}
/* After the demos: what the visitor's own clients will see and do, then what the owner gets, then the button. */
.demo-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px 48px;
  align-items: center;
  margin-top: 34px;
  padding: 34px 38px;
  border-radius: var(--radius);
  background: var(--forest);
}
.demo-next-title {
  color: #fff;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.demo-next-me {
  display: block;
  color: var(--lime);
  font-size: 18px;
  margin-bottom: 4px;
}
.demo-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  color: #dfe8d8;
  font-size: 15px;
}
.demo-next-list li {
  position: relative;
  padding-left: 1.35em; /* a wrapped line starts under the words, not under the tick */
}
.demo-next-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 700;
}
/* The strip's words for a base of stays (site.js marks the sphere on the body) */
body:not([data-kind="stay"]) .k-stay,
body[data-kind="stay"] .k-any {
  display: none;
}
.demo-next-you {
  margin: 14px 0 0;
  color: var(--lime);
  font-weight: 650;
}
.demo-next-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.demo-next-actions small {
  color: #c3d0bd;
  font-size: 13px;
}
.demo-next .text-link {
  color: var(--lime);
}

/* --- the calculator ------------------------------------------------------------------------------------------- */
.calc-section {
  padding: 56px 0;
}
.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--forest);
  border-radius: 28px;
  padding: 47px;
  gap: 64px;
  color: #fff;
}
.calc .eyebrow {
  color: #c3d0bd;
}
.calc h3 {
  font-size: 33px;
  line-height: 1.18;
}
.calc p {
  color: #c3d0bd;
  font-size: 13px;
}
.calc-controls {
  display: grid;
  gap: 18px;
}
.range-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 2px;
}
.range-top label {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  color: #dce6d6;
}
.range-top output {
  font-size: 20px;
  font-weight: 650;
  color: var(--lime);
  white-space: nowrap;
}
.range-hint {
  display: block;
  margin: 0 0 2px;
  font-size: 11.5px;
  color: #b3c4ad;
}
/* A 32 px target, a 6 px track filled with lime up to the thumb's centre (--p, 0…1, set by site.js), a 26 px thumb. */
.calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.calc input[type="range"]:focus {
  box-shadow: none;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(var(--lime), var(--lime)) 0 / calc(13px + (100% - 26px) * var(--p, 0.2)) 100% no-repeat,
    #53694a;
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--forest);
}
.calc input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #53694a;
}
.calc input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--lime);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--forest);
}
.calc-result {
  border-left: 1px solid #53694a;
  padding-left: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calc-result strong {
  font-size: clamp(40px, 4.5vw, 65px);
  font-weight: 600;
  letter-spacing: -0.06em;
  color: var(--lime);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.result-count {
  color: #fff;
  font-size: 20px;
  font-weight: 650;
  margin: 6px 0 4px;
}
.calc .result-count {
  color: #fff;
  font-size: 20px;
}
.calc-result .result-label {
  font-size: 14px;
  max-width: 420px;
  margin: 0 0 6px;
  color: #dce6d6;
}
.calc-result .btn {
  align-self: flex-start;
  margin-top: 18px;
}
.calc-result small {
  font-size: 11px;
  color: #bdcdb5;
  max-width: 360px;
  line-height: 1.7;
}
.calc-result .calc-terms {
  margin-top: 8px;
  font-size: 13px;
  color: #c3d0bd;
}
.calc .calc-promise {
  color: #c3d0bd;
  font-size: 14px;
  margin: 14px 0 6px;
  max-width: 440px;
}

/* --- features: how it works, after the visit ------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 17px;
}
#loyalty .feature-grid {
  grid-template-columns: 1fr 1.15fr;
}
#loyalty .feature.big {
  grid-row: span 2;
}
/* Two rows tall: the icon, then the invitation as the customer gets it in the bot, then the words at the bottom. */
#loyalty .feature.big .feature-icon {
  margin-bottom: 0;
}
.gift-mock {
  position: relative;
  max-width: 372px;
  margin: 30px 0 auto;
  padding-bottom: 34px;
}
.gift-card {
  background: #fff;
  color: var(--ink);
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 30px 60px -30px #0009;
  transform: rotate(-1.5deg);
}
.gift-card b {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}
.gift-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.gift-toast {
  position: absolute;
  right: -18px;
  bottom: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--lime);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transform: rotate(2deg);
  box-shadow: 0 14px 30px -14px #000b;
}
@media (max-width: 1000px) {
  .gift-toast {
    right: 0;
  }
}
@media (max-width: 760px) {
  .gift-mock {
    display: none;
  }
}
.feature {
  padding: 30px 27px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.feature.big {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
}
.feature-icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.big .feature-icon {
  background: var(--lime);
  border: 0;
}
.feature h3 {
  font-size: 26px;
  line-height: 1.18;
  margin: 26px 0 0;
  max-width: 300px;
}
.feature .feature-text {
  font-size: 16px;
  line-height: 1.55;
  margin: 12px 0 0;
}
.feature.big .feature-text {
  color: #dfe8d8;
}
.feature small {
  font-size: 13px;
  color: #c8d6c6;
  margin-top: 18px;
}
.feature:not(.big) small {
  color: var(--muted);
}
.loyalty-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 28px;
}
.loyalty-more {
  margin: 0;
  font-size: 15px;
}

/* --- the start ------------------------------------------------------------------------------------------------- */
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  counter-reset: steps;
}
.step {
  position: relative;
  border-top: 1px solid #bcc7b4;
  padding-top: 27px;
}
.step::before {
  counter-increment: steps;
  content: "0" counter(steps);
  font-size: 12px;
  font-weight: 700;
  display: block;
  color: #66785a;
  margin-bottom: 30px;
}
.step h3 {
  font-size: 25px;
}
.step p {
  font-size: 15px;
  line-height: 1.7;
}
.start-actions {
  display: flex;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
  margin-top: 44px;
}

/* --- prices ---------------------------------------------------------------------------------------------------- */
.section-heading p a {
  color: var(--ink);
  font-weight: 600;
}
.price-anchor {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #f1f7e4;
  font-weight: 650;
  color: var(--ink);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
}
.plan .eyebrow {
  font-size: 10.5px;
  margin-bottom: 18px;
}
.plan h3 {
  font-size: 24px;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
}
.plan-result {
  font-weight: 650;
  margin: 4px 0 14px;
  color: var(--ink);
}
.plan .price {
  font-size: 43px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
  white-space: nowrap;
}
.plan .price small {
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
}
.plan .per-day {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}
.plan .per-day span {
  display: block;
}
.plan > .btn {
  margin-top: 20px;
}
.plan-terms {
  display: block;
  font-size: 13.5px;
  margin: 8px 0 12px;
  color: var(--muted);
}
.plan-terms a {
  color: inherit;
  text-underline-offset: 3px;
}
.plan .setup {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
.plan > .btn + .setup {
  margin-top: 14px;
}
.plan-alt {
  align-self: flex-start;
  margin-top: 8px;
}
.plan.recommended {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.plan.recommended .eyebrow {
  background: var(--lime);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 11px;
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap; /* a pill broken in two looks broken */
}
.plan.recommended .plan-result,
.plan.recommended .setup {
  color: #fff;
}
.plan.recommended .setup {
  font-weight: 600;
}
.plan.recommended ul {
  color: #e3ebdf;
  border-top-color: #ffffff22;
}
.plan.recommended li::before {
  color: var(--lime);
}
.plan.recommended .per-day,
.plan.recommended .price small,
.plan.recommended .plan-terms {
  color: #b9c9b6;
}
.plan.recommended .text-link {
  color: var(--lime);
}
.plan ul {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 13.5px;
  line-height: 1.6;
  flex: 1;
}
.plan li {
  position: relative;
  padding-left: 21px;
  margin-bottom: 10px;
}
.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #647f47;
}
.plan li.plan-no {
  color: #6b756c;
  text-decoration: line-through;
}
.plan li.plan-no::before {
  content: "–";
}
.plan-more {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  flex: 1;
}
.plan-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 650;
}
.plan-more summary::-webkit-details-marker {
  display: none;
}
.plan-more summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
}
.plan-more[open] summary::after {
  content: "−";
}
.plan-more ul {
  margin: 0;
  padding: 4px 0 0;
  border-top: 0;
}
.no-risk {
  margin-top: 26px;
  padding: 30px 32px;
  border: 1px solid #cbdaba;
  border-radius: var(--radius);
  background: #f4f8ee;
}
.no-risk h3 {
  font-size: 26px;
  margin-bottom: 20px;
}
.risk-theses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 36px;
}
.risk-theses li {
  font-size: 15px;
  line-height: 1.55;
}
.risk-theses b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f6b4b;
}
.risk-theses span {
  display: block;
}
.risk-theses a {
  padding: 13px 0;
  margin: -8px 0 -13px;
  font-size: 12.5px;
  color: var(--muted);
}
.pricing-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 22px;
}
.pricing-theses {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pricing-theses li {
  display: block;
  line-height: 1.6;
}
.pricing-theses b {
  display: inline-block;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f6b4b;
  margin-right: 8px;
  white-space: nowrap;
}
/* «Ваш процесс не помещается в тариф?» closes «Про»: the card's own foot instead of 360 px of white under its list */
.plan-custom {
  margin-top: auto;
  padding: 18px 20px;
  border: 1px solid #dfe9d2;
  border-radius: 14px;
  background: #f4f8ee;
  font-size: 13.5px;
  line-height: 1.55;
}
.plan-custom b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: var(--ink);
}
.plan-custom p {
  margin: 0 0 10px;
  color: var(--muted);
}
.plan:has(.plan-custom) .plan-more {
  flex: 0 0 auto;
  margin-bottom: 24px;
}
/* «12 месяцев по цене 10» is the win of the year: its own line, in the card's accent */
.plan .per-day .per-year-win {
  color: #3f5a26;
  font-weight: 650;
}
.plan.recommended .per-day .per-year-win {
  color: var(--lime);
}
.plan .setup a {
  color: inherit;
  text-underline-offset: 3px;
}
.plan li.plan-no::before {
  color: #9aa39a;
}
/* One row across the three cards where the visitor decides: prices and buttons at one height, no desktop toggle */
@media (min-width: 761px) {
  .plan:not(.recommended) .eyebrow {
    padding: 5px 0;
  }
  .plan-result {
    min-height: 3.1em;
  }
  .plan-more > summary {
    display: none;
  }
  .plan-more ul {
    padding-top: 20px;
  }
}

/* --- questions ------------------------------------------------------------------------------------------------- */
.faq {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
}
@media (min-width: 961px) {
  .faq > div:first-child {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}
.faq h2 {
  margin-bottom: 20px;
}
.faq > div > p {
  max-width: 300px;
  font-size: 15px;
}
.faq-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
}
.faq-cta small {
  font-size: 13px;
  color: var(--muted);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq details:first-child summary {
  padding-top: 0;
}
.faq summary::after {
  content: "+";
  font-size: 25px;
  font-weight: 400;
  flex-shrink: 0;
}
.faq details[open] summary::after {
  content: "−";
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq details p {
  font-size: 15px;
  margin: 0 25px 20px 0;
  line-height: 1.75;
}

/* --- the request for a set-up ---------------------------------------------------------------------------------- */
.lead-block {
  background: #e8efdf;
  border-radius: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 52px;
  gap: 60px;
  position: relative;
  border: 1px solid #cbdaba;
  box-shadow: 0 18px 56px -42px #253c304d;
}
.lead-block h2 {
  margin-bottom: 23px;
}
.lead-block > div > p {
  font-size: 15px;
  max-width: 380px;
  line-height: 1.75;
}
.lead-block > div > .text-link {
  font-size: 14px;
}
.lead-marker {
  display: flex;
  width: fit-content;
  margin-top: 28px;
  background: #fff;
  border-radius: 12px;
  padding: 13px 17px;
  gap: 13px;
  align-items: center;
  font-size: 13px;
}
.lead-marker .icon {
  width: 22px;
  height: 22px;
  color: #3f5a26;
}
.lead-form {
  display: grid;
  gap: 16px;
  align-content: start;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lead-form .check {
  margin: 0;
}
.lead-form .btn {
  width: 100%;
}
.lead-form .lead-promise {
  font-size: 13px;
  color: var(--muted);
  margin: -4px 0 0;
  line-height: 1.6;
}
.hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
}
#lead-status {
  font-size: 13px;
  line-height: 1.6;
  min-height: 20px;
  margin: 0;
}
.lead-form[hidden],
.lead-done[hidden] {
  display: none;
}
.lead-done {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
  padding: 30px;
  border-radius: 20px;
  background: #fff;
}
.lead-done:focus {
  outline: none;
}
.lead-done h3 {
  font-size: 28px;
  margin: 0;
}
.lead-block .lead-done p {
  margin: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.6;
}
.lead-done p b {
  color: var(--ink);
}
.lead-block .lead-done .lead-done-wait {
  margin-top: 14px;
  color: var(--ink);
  font-weight: 650;
}

/* --- the footer, the phone's sticky button, the skip link ------------------------------------------------------- */
footer.wrap {
  padding-top: 56px;
  padding-bottom: 25px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 30px;
  padding-bottom: 28px;
}
.footer-top p {
  font-size: 13px;
  margin-top: 12px;
}
.footer-links {
  font-size: 13px;
  line-height: 2;
  text-align: right;
}
.footer-links a {
  text-decoration: none;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 28px;
  line-height: 1.9;
}
.footer-bottom a {
  color: var(--muted);
}
.mobile-cta {
  display: none;
}
.skip-link {
  position: fixed;
  top: -70px;
  left: 12px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px;
}
.skip-link:focus {
  top: 10px;
}

/* --- widths ---------------------------------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .hero-top {
    gap: 56px;
  }
}
@media (max-width: 1100px) {
  .hero-strip {
    flex-wrap: wrap;
    row-gap: 14px;
  }
  .hero-strip p {
    flex-basis: 100%;
    max-width: none;
  }
}
@media (max-width: 1000px) {
  .wrap,
  .hero.wrap {
    padding-left: 26px;
    padding-right: 26px;
  }
  .nav {
    gap: 18px;
  }
  .hero-top {
    gap: 25px;
  }
  .workspace {
    padding-left: 0;
  }
  .tg-card {
    margin-left: 28px;
  }
  .visual-label {
    margin-left: 28px;
  }
  .hero-strip {
    margin-top: 39px;
  }
  .channels {
    gap: 18px;
  }
  .feature-grid,
  #loyalty .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature {
    padding: 24px 21px;
  }
  .feature h3 {
    font-size: 23px;
  }
  .how-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 36px;
  }
  .risk-theses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* A tablet: the strip's button goes under its list, so the title keeps one line. */
  .demo-next {
    grid-template-columns: 1fr;
  }
  .demo-next-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
  }
  .faq {
    gap: 50px;
  }
  .lead-block {
    padding: 36px;
    gap: 35px;
  }
  .calc {
    gap: 32px;
    padding: 35px;
  }
  .calc-result {
    padding-left: 30px;
  }
  .plan {
    padding: 25px;
  }
  .plan .price {
    font-size: 38px;
  }
  .section {
    padding: 74px 0;
  }
}
/* Four links and the trial button do not fit a tablet's header: the menu button from 960 px down. */
@media (max-width: 960px) {
  .menu-button {
    display: block;
  }
  .topbar > .btn {
    margin-left: auto;
  }
  .nav {
    display: none;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 84px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    z-index: 20;
    box-shadow: 0 12px 30px #17221615;
  }
  .nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav a {
    padding: 13px;
  }
  .nav.open .nav-cta {
    display: block;
    margin-top: 8px;
    padding: 14px;
    background: var(--lime);
    color: var(--ink);
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
  }
  .nav.open .nav-cta:hover {
    background: #bce85b;
    color: var(--ink);
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .faq > div > p {
    max-width: 560px;
  }
}
@media (max-width: 760px) {
  .wrap,
  .hero.wrap {
    padding-left: 21px;
    padding-right: 21px;
  }
  .topbar {
    height: 78px;
    gap: 12px;
  }
  .brand {
    font-size: 23px;
  }
  .topbar > .btn {
    font-size: 12px;
    min-height: 44px;
    padding: 9px 10px;
    gap: 6px;
  }
  .nav {
    top: 70px;
  }
  .hero {
    padding: 30px 0 43px;
  }
  .hero-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero .eyebrow {
    margin-bottom: 16px;
    font-size: 11px;
  }
  .hero-copy > p {
    font-size: 15px;
    line-height: 1.6;
    max-width: 420px;
    margin-bottom: 22px;
  }
  .hero .actions {
    flex-direction: column;
  }
  .hero .actions .btn {
    width: 100%;
    justify-content: space-between;
    min-height: 52px;
  }
  .hero-note {
    font-size: 12.5px;
    gap: 6px 15px;
  }
  .workspace {
    max-width: 440px;
    padding: 8px 0 0;
  }
  .workspace::before {
    right: 4px;
  }
  /* the owner's finished booking («🌙 Запись в 23:14 — когда вы были закрыты») ends inside the first screen */
  .chat-float {
    display: none;
  }
  .tg-card {
    margin: 0;
    transform: none;
  }
  .visual-label {
    margin: 12px 0 0;
  }
  .hero-strip {
    margin-top: 30px;
    align-items: start;
    gap: 14px;
    flex-direction: column;
  }
  .hero-strip p {
    display: none;
  }
  .channels {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 12px;
    font-size: 13px;
  }
  .channel-icon {
    width: 23px;
    height: 23px;
  }
  .section {
    padding: 61px 0;
  }
  .calc-section {
    padding: 44px 0;
  }
  .section-heading {
    margin-bottom: 28px;
  }
  .section-heading p {
    font-size: 15px;
    margin-top: 14px;
  }
  .section .eyebrow {
    margin-bottom: 16px;
  }
  .feature-grid,
  #loyalty .feature-grid {
    grid-template-columns: 1fr;
  }
  #loyalty .feature.big {
    grid-row: auto;
  }
  .feature {
    padding: 26px 24px;
  }
  .feature h3 {
    max-width: none;
    font-size: 25px;
    margin-top: 20px;
  }
  /* Phone: the four spheres as 2×2 tiles, one line each, all on one screen. */
  .demo-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .demo-art,
  .demo-content p:not(.tile-seal),
  .demo-actions .text-link,
  .demo-actions .text-note {
    display: none;
  }
  .demo-content {
    padding: 16px 12px;
  }
  .demo-card h3 {
    font-size: clamp(16px, 4.6vw, 19px);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
  }
  .demo-content .tile-seal {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: #4d5d48;
    margin: 0 0 14px;
    min-height: 36px;
  }
  .demo-actions .btn {
    width: 100%;
    justify-content: space-between;
    min-height: 46px;
    padding: 11px 12px;
    font-size: clamp(12.5px, 3.6vw, 14px);
    line-height: 1.2;
    gap: 6px;
  }
  .demo-tg {
    display: flex;
  }
  .demo-note,
  .demo-other {
    text-align: left;
  }
  .demo-next {
    grid-template-columns: 1fr;
    padding: 26px 20px;
  }
  .demo-next-title {
    font-size: 20px;
  }
  .demo-next-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .demo-next .btn {
    width: 100%;
    justify-content: space-between;
    min-height: 52px;
  }
  .demo-next .text-link {
    align-self: flex-start;
  }
  .how-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .step {
    padding-top: 20px;
    padding-left: 50px;
  }
  .step::before {
    position: absolute;
    top: 23px;
    left: 0;
  }
  .step h3 {
    margin-bottom: 12px;
  }
  .step p {
    margin: 0;
  }
  .calc {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 29px 22px;
  }
  .calc h3 {
    font-size: 29px;
  }
  .calc-result {
    border-left: 0;
    border-top: 1px solid #53694a;
    padding: 26px 0 0;
  }
  .calc-result strong {
    font-size: 50px;
  }
  .calc-result .btn {
    align-self: stretch;
    justify-content: space-between;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 19px;
  }
  .pricing-grid .plan.recommended {
    order: -1;
  }
  .plan {
    padding: 26px 24px;
  }
  .plan .price {
    font-size: 42px;
  }
  .no-risk {
    padding: 26px 22px;
  }
  .risk-theses {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .start-actions {
    margin-top: 30px;
  }
  .start-actions .btn {
    width: 100%;
    justify-content: space-between;
  }
  .faq summary {
    font-size: 15px;
  }
  .faq-cta .btn {
    align-self: stretch;
    justify-content: space-between;
  }
  .lead-block {
    padding: 30px 22px;
    grid-template-columns: 1fr;
    gap: 30px;
    border-radius: 22px;
  }
  .lead-block > div > p {
    max-width: 360px;
  }
  .lead-marker {
    margin-top: 20px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .lead-done {
    padding: 24px 20px;
  }
  .footer-top {
    flex-direction: column;
    gap: 12px;
  }
  .footer-links {
    text-align: left;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
  .footer-bottom span {
    max-width: 420px;
  }
  .demo-note,
  .range-hint,
  .calc-result small,
  .footer-bottom,
  .hero-note {
    font-size: 12.5px;
  }
  .plan .per-day,
  .plan .setup,
  .plan-terms {
    font-size: 13.5px;
  }
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    z-index: 30;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    background: var(--lime);
    color: var(--ink);
    border-radius: 13px;
    padding: 13px 18px;
    text-decoration: none;
    font-weight: 650;
    font-size: 15px;
    box-shadow: 0 6px 22px #18231d38;
    transition:
      opacity 0.2s,
      transform 0.2s,
      visibility 0.2s;
  }
  .mobile-cta.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(80px);
  }
  footer.wrap {
    padding-top: 44px;
    padding-bottom: 92px;
  }
}
@media (max-width: 420px) {
  /* A tile is the link as a whole; on a narrow phone its button keeps the word and drops the arrow, so that
     «Забронировать дом» fits the tile. */
  .demo-actions .btn {
    padding: 11px 9px;
  }
  .demo-actions .btn > span {
    display: none;
  }
}
@media (max-width: 400px) {
  .lead-block h2 {
    font-size: 34px;
  }
}
@media (max-width: 360px) {
  .topbar > .btn {
    display: none;
  }
  .menu-button {
    margin-left: auto;
  }
  .hero h1 {
    font-size: min(8.8vw, 32px);
  }
  .demo-grid {
    gap: 10px;
  }
  .demo-content {
    padding: 14px 10px;
  }
  .demo-actions .btn {
    padding: 11px 7px;
  }
  .demo-next {
    padding: 24px 16px;
  }
  .demo-next .btn {
    padding: 13px 16px;
    font-size: 15px;
    gap: 8px;
  }
}
/* A tablet: «Старт» and «Стандарт» side by side, «Про» across the row under them with its list in two columns. */
@media (min-width: 761px) and (max-width: 1000px) {
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-grid .plan:last-child {
    grid-column: 1 / -1;
  }
  .pricing-grid .plan:last-child .plan-more ul {
    columns: 2;
    column-gap: 32px;
  }
  .pricing-grid .plan:last-child li {
    break-inside: avoid;
  }
  /* The ticket keeps its service on one line, so it ends above the seal. */
  .demo-art {
    padding: 26px 24px;
  }
}
/* A narrow card: the seal steps down to the corner, so the chosen time (it pulses once) stays in sight. */
@media (min-width: 761px) and (max-width: 1100px) {
  .ticket-seal {
    bottom: 8px;
    right: 14px;
    padding: 7px 12px;
    font-size: 11px;
  }
}
@media (max-width: 1100px) {
  .plan.recommended .eyebrow {
    letter-spacing: 0.04em;
  }
}
/* The demo buttons of a row start at one height where a card's second link may wrap to a second line; from 1120 px
   every link fits beside its button and no card keeps 40 px of dead space for it. */
@media (min-width: 761px) and (max-width: 1119px) {
  .demo-actions {
    min-height: 90px;
    align-content: flex-start;
  }
}
@media (max-width: 420px) {
  /* The four tiles' buttons are as tall as «Забронировать дом» on two lines. */
  .demo-actions .btn {
    min-height: 58px;
  }
  /* With the greeting over it, the strip's title keeps one line. */
  .demo-next-title:has(.demo-next-me) {
    font-size: 18px;
  }
  /* The form runs edge to edge, so the choice «Пока не знаю — помогите выбрать» shows whole beside the arrow. */
  #lead.wrap {
    padding-left: 0;
    padding-right: 0;
  }
  .lead-block {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  .lead-form select {
    padding-left: 12px;
    padding-right: 30px;
  }
}
/* «Попробовать 14 дней бесплатно →» on one line on a 360 px phone. */
@media (max-width: 380px) {
  .hero .actions .btn,
  .faq-cta .btn {
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
  }
}
@media (max-width: 340px) {
  .hero .actions .btn,
  .faq-cta .btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
  }
  .plan.recommended .eyebrow {
    white-space: normal;
    border-radius: 12px;
  }
  .lead-block {
    padding-left: 12px;
    padding-right: 12px;
  }
  .lead-form select {
    padding-left: 10px;
    padding-right: 22px;
    letter-spacing: -0.03em;
  }
}
/* --- phones: the sum beside the sliders, the visitor's own sphere first, tight words apart ----------------------- */
.calc-peek {
  display: none;
}
body[data-for="auto"] .for-stay,
body[data-for="dental"] .for-stay,
body[data-for="beauty"] .for-stay {
  display: none;
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 12px; /* the phone's header is not sticky: no blank band above a jump */
  }
  .calc-peek {
    display: block;
    margin: 10px 0 18px;
    color: #c3d0bd;
    font-size: 15px;
  }
  .calc-peek b {
    color: var(--lime);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
  }
  .feature h3,
  .no-risk h3,
  .demo-next-title {
    letter-spacing: -0.03em;
  }
  /* A visitor from an ad of one sphere: its tile spans the row with its own words, the base of stays steps aside */
  body[data-for="auto"] .demo-card.auto,
  body[data-for="dental"] .demo-card.dental,
  body[data-for="beauty"] .demo-card.beauty {
    grid-column: 1 / -1;
  }
  body[data-for="auto"] .demo-card.auto .demo-content p:not(.tile-seal),
  body[data-for="dental"] .demo-card.dental .demo-content p:not(.tile-seal),
  body[data-for="beauty"] .demo-card.beauty .demo-content p:not(.tile-seal) {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 14px;
  }
  body[data-for="auto"] .demo-card.stay,
  body[data-for="dental"] .demo-card.stay,
  body[data-for="beauty"] .demo-card.stay {
    display: none;
  }
}
/* The last button of the page reads as the others: words at the left, the arrow at the right */
.lead-form .btn {
  justify-content: space-between;
  text-align: left;
  padding-left: 18px;
  padding-right: 18px;
}
@media (max-width: 380px) {
  .lead-form .btn {
    font-size: 15px;
  }
}
@media (max-width: 340px) {
  .mobile-cta {
    font-size: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .calc {
    padding-left: 18px;
    padding-right: 18px;
  }
  .calc-result .btn {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* The consent's documents under its box: a thumb ticks the box instead of opening a document */
.check-docs {
  margin: -6px 0 0 32px;
  font-size: 12px;
}
#lead-status:empty {
  min-height: 0;
  margin-top: -16px;
}
/* The pricing notes' texts start at one x on a wide screen */
@media (min-width: 761px) {
  .pricing-theses li {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 16px;
    align-items: baseline;
  }
  .pricing-theses b {
    margin-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}