/* The open main page (landing.html) and the policy's page (politika.html). The owner's direction of 03.11.2026 — two halves, mint for
   a business that works, lilac for one that opens — drawn in one language: white bar with a hairline, Onest for text and JetBrains
   Mono for hours and numbers (fonts.css, our own server), white cards with a hairline and a 10 px radius, ruled sections without
   cards (Refero style a0f473eb, Operate). Teal is for actions, for a free window and for the salon's place; dashes mean a free
   window and nothing else. The decisions and their sources are listed at the top of landing.html. */
.lp {
  --ink: #242827; --muted: #3d5048; --soft: #55605b;
  --mint: #e5f2ee; --mint-line: #c4d9d1; --mint-rule: #9fbfb4;
  --lilac: #eee9f8; --lilac-line: #d6cde6; --lilac-muted: #4e4462;
  --teal: #116c67; --teal-h: #084c48;
  --hair: #e3e8e6; --hair-strong: #cfd8d4; --ctl: #b6c4be;
  --booked: #e8e0f8; --booked-ink: #3a2b5e; --booked-sub: #5b4a80;
  --fresh: #d3ebe3; --fresh-ink: #0b4a46; --fresh-sub: #2e6a61;
  --block: #ebe5f4; --block-edge: #e2daee;
  --p1: #dbd0ef; --p2: #bea9e1; --p3: #9c82cc; --p4: #775ab2; --p5: #533a8c;
  --bad: #b3261e; --bad-bg: #fdf2f1;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --pad: clamp(16px, 4.2vw, 64px);
  --r: 10px; --r-ctl: 8px;
  color-scheme: light;
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.5 var(--font);
  font-size-adjust: from-font;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp [hidden] { display: none !important; }
/* the resets weigh nothing (:where), so every block below sets its own margins */
:where(.lp) :where(h1, h2, h3, h4, p, figure, dl, dd, ol, ul) { margin: 0; }
:where(.lp) :where(h1, h2, h3, h4) { font-weight: 600; text-wrap: balance; }
:where(.lp) :where(button, input) { font: inherit; color: inherit; }
.lp a { color: var(--teal); text-underline-offset: 3px; }
.lp a:hover { color: var(--teal-h); }
.lp a, .lp button { -webkit-tap-highlight-color: transparent; }
/* a dark ring, never only a colour change */
.lp :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lp-half:focus, .lp-plans:focus { outline: none; }

/* ---------- buttons: one filled action, the rest white with a border ---------- */
.lp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--ctl); border-radius: var(--r-ctl); background: #fff; color: var(--ink);
  font: 500 0.9375rem/1.2 var(--font); text-decoration: none; cursor: pointer; }
.lp .btn:hover { border-color: var(--ink); color: var(--ink); }
.lp .btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.lp .btn-primary:hover { background: var(--teal-h); border-color: var(--teal-h); color: #fff; }
.lp .btn:disabled { background: var(--hair); border-color: var(--hair); color: var(--soft); cursor: default; }
.lp .btn-sm { min-height: 36px; padding: 0 12px; font-size: 0.875rem; }
@media (pointer: coarse) { .lp .btn-sm { min-height: 44px; } }
/* a disclosure that is a real button, drawn as a link with an arrow */
.lp-more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--teal); font: 600 1rem/1.3 var(--font); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lp-more span { display: inline-block; text-decoration: none; }
.lp-more:hover { color: var(--teal-h); text-decoration-thickness: 2px; }

/* ---------- the top bar ---------- */
.lp-top { display: flex; align-items: center; gap: 8px 28px; min-height: 64px; padding: 10px var(--pad); background: #fff; border-bottom: 1px solid var(--hair); }
.lp .lp-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: var(--ink); font-size: 1.25rem; font-weight: 600;
  letter-spacing: -0.035em; line-height: 1; text-decoration: none; text-transform: lowercase; white-space: nowrap; }
/* the sign: a square with four windows, the last one mint — the window that fills; the same as favicon.svg (the policy's page keeps
   «ПЗ» in it for old markup, never shown) */
.lp-mark { flex: none; display: inline-block; width: 26px; height: 26px; border-radius: 6px; font-size: 0; color: transparent; font-style: normal;
  background-color: var(--teal); background-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#8fd6c4 0 0);
  background-size: 6px 6px; background-repeat: no-repeat; background-position: 6px 6px, 14px 6px, 6px 14px, 14px 14px; }
.lp-nav { display: flex; gap: 28px; }
.lp .lp-nav a, .lp .lp-in { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.lp .lp-nav a:hover, .lp .lp-in:hover { color: var(--teal); text-decoration: underline; }
.lp-demo { min-height: 40px; }

/* ---------- the headline on white ---------- */
.lp-hero { padding: clamp(28px, 4.2vw, 64px) var(--pad) clamp(24px, 3vw, 40px); }
.lp-hero h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.75rem); line-height: 1.04; letter-spacing: -0.04em; }
/* the lead-in to the halves: the question and a hairline running to them */
.lp-choose { display: flex; align-items: center; gap: 18px; margin-top: clamp(12px, 1.6vw, 22px); color: var(--muted); font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem); }
.lp-choose::after { content: ""; flex: 1; height: 1px; background: var(--hair-strong); }
.lp-tabs { display: none; }

/* ---------- the two halves, edge to edge ---------- */
.lp-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); }
/* each half follows the same six rows (subgrid), so the two pictures stand at one height */
.lp-half { --muted-h: var(--muted); --rule-h: var(--mint-rule); --card-line: var(--mint-line);
  grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0;
  padding: clamp(32px, 3.6vw, 52px) var(--pad) 0; background: var(--mint); }
.lp-half-new { --muted-h: var(--lilac-muted); --rule-h: #b9abd0; --card-line: var(--lilac-line); background: var(--lilac); border-left: 1px solid var(--lilac-line); }
.lp-half > * { min-width: 0; max-width: 40rem; }
.lp-eyebrow { grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-h, var(--muted)); }
.lp-badge { display: inline-flex; align-items: center; gap: 7px; color: #4e3c68; font-size: 0.875rem; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.lp-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lp-half h2 { grid-row: 2; margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(1.875rem, 0.95rem + 2.5vw, 3.25rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; }
.lp-desc { grid-row: 3; margin-top: 16px; max-width: 32em; font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem); line-height: 1.5; text-wrap: pretty; }
.lp-fig { grid-row: 4; display: flex; flex-direction: column; margin-top: clamp(22px, 2.4vw, 32px); }
.lp-fig > figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  margin-top: 10px; font-size: 0.875rem; line-height: 1.4; color: var(--muted-h); }
/* «Пауза» of a moving picture (src/landing.js adds it): a quiet text button, finger-sized without pushing the caption down */
.lp-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-block: -12px; padding: 0 2px; border: 0; background: none;
  color: var(--muted-h); font: 500 0.875rem/1.2 var(--font); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.lp-pause:hover { color: var(--ink); }
.lp-pause::before { content: ""; width: 9px; height: 10px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px); }
.lp-pause.is-play::before { width: 9px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* whose example the schedule shows (src/landing.js): a row of pills over the card, the pressed one filled teal, as a row of pills over the
   example it switches on Refero screen 46f88085 (Sana); the row stands over the half's big link, so a press between two pills is no click */
.lp-kinds { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lp-kinds button { min-height: 36px; padding: 0 14px; border: 1px solid var(--mint-rule); border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 0.875rem; font-weight: 500; line-height: 1.2; cursor: pointer; }
.lp-kinds button:hover { border-color: var(--teal); color: var(--teal-h); }
.lp-kinds button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; cursor: default; }
@media (pointer: coarse) { .lp-kinds button { min-height: 44px; } }
/* four pills do not fit one row of a phone: two by two, of one width */
@media (max-width: 640px) { .lp-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-acts { grid-row: 5; display: grid; justify-items: start; align-content: start; gap: 10px; margin-top: 22px; }
.lp-door { display: grid; justify-items: start; gap: 14px; width: 100%; }
.lp-bottom { grid-row: 6; align-self: end; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px;
  margin-top: 40px; padding: 14px 0 22px; border-top: 1px solid var(--rule-h); font-size: 0.875rem; line-height: 1.4; color: var(--muted-h); }

/* the two halves as two big buttons (the owner, 04.11.2026: «это будут большие кнопки. При нажатии они как бы поднимаются … по клику
   можно перейти на страницу входа»): two panels with a gap. src/landing.js picks what each half leads to and marks it lp-stretch: «Войти в
   кабинет» with the sign-in on; with it off «Посмотреть пример кабинета» on the left and «Что планируем» on the right (the legal session,
   04.11.2026). That element covers the whole half (class is-link): the half lifts under the pointer and sinks when pressed, and the forms
   and «Пауза» stay pressable over it */
.lp-halves { --gap-h: clamp(8px, 1.4vw, 20px); column-gap: var(--gap-h); padding: 0 var(--gap-h) var(--gap-h); }
.lp-half { position: relative; border: 1px solid var(--card-line); border-radius: 16px; }
.lp-half-new { border-left: 1px solid var(--card-line); }
.lp-half-go:not([hidden]) { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--teal);
  font: 600 1.0625rem/1.3 var(--font); text-decoration: none; }
.lp-half-go span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lp-half-go i { font-style: normal; }
.lp-half-note { margin-top: -8px; font-size: 0.875rem; line-height: 1.4; color: var(--muted-h); }
.lp-half.is-link .lp-stretch { position: static; }
.lp-half.is-link .lp-stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.lp-half.is-link :is(button, form, a):not(.lp-stretch) { position: relative; z-index: 1; }
.lp-half.is-link { cursor: pointer; box-shadow: 0 1px 0 rgb(36 40 39 / .04); }
@media (hover: hover) {
  .lp-half.is-link:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgb(36 40 39 / .5); }
  .lp-half.is-link:hover .lp-half-go span { text-decoration-thickness: 2px; }
  .lp-half.is-link:hover .lp-half-go i { transform: translateX(3px); }
}
.lp-half.is-link:has(.lp-stretch:active) { transform: translateY(-1px); box-shadow: 0 8px 18px -14px rgb(36 40 39 / .5); }
.lp-half:has(.lp-stretch:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.lp-half .lp-stretch:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) { .lp-half, .lp-half-go i { transition: transform 0.18s ease, box-shadow 0.18s ease; } }
@media (prefers-reduced-motion: reduce) { .lp-half.is-link, .lp-half.is-link:hover, .lp-half.is-link:has(.lp-stretch:active), .lp-half-go i { transform: none !important; } }

/* «Заявки…» and «Список ожидания…»: a grey note with a clock, nothing that looks pressable */
.lp-off { display: flex; align-items: flex-start; gap: 10px; max-width: 32em; font-size: 0.9375rem; line-height: 1.45; color: var(--soft); }
.lp-half-new .lp-off { color: #57506a; }
.lp-off::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 3px; border: 1.5px solid currentColor; border-radius: 50%;
  background: linear-gradient(currentColor 0 0) 5.25px 2px / 1.5px 4.75px no-repeat, linear-gradient(currentColor 0 0) 5.25px 5.25px / 3.5px 1.5px no-repeat; }
.lp-go span { font-weight: 400; }

/* ---------- the pictures: white cards of one kind ---------- */
.lp-card { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; background: #fff; border: 1px solid var(--card-line, var(--hair-strong)); border-radius: var(--r); }
.lp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-size: 0.9375rem; line-height: 1.3; }
.lp-card-head strong { font-weight: 600; }
.lp-card-head span { font-size: 0.8125rem; color: var(--soft); }
.lp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 0.8125rem; line-height: 1.3; color: var(--soft); }
.lp-k { display: inline-flex; align-items: center; gap: 8px; }
.lp-k::before { content: ""; width: 16px; height: 12px; border-radius: 3px; }
.lp-k-free::before { background: #fff; border: 1.5px dashed var(--teal); }
.lp-k-busy::before { background: var(--booked); }

/* the schedule: an hour ruler, three equal days, booked cells soft lilac, free ones white with a dashed edge (Refero screen baa80bc0) */
.lp-sched { container: sched / inline-size; }
.lp-cal { --cg: 8px; --rg: 6px; --tie: 17px; position: relative; flex: 1; display: grid; grid-template-columns: 2.25rem repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, minmax(3rem, 1fr)) auto; gap: var(--rg) var(--cg); }
/* «Послезавтра» may run a few pixels past its narrow column on a 320 px phone: into the card's padding, never into a cell */
.lp-day { padding: 0 1px 2px; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.lp-day-1 { grid-column: 2; }
.lp-t { padding-top: 9px; font: 400 0.75rem/1.2 var(--mono); color: var(--soft); font-variant-numeric: tabular-nums; }
.lp-s { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 9px; border-radius: 6px; background: var(--booked); color: var(--booked-ink);
  font-size: 0.8125rem; font-weight: 500; line-height: 1.3; }
.lp-s small { font-size: 0.75rem; font-weight: 400; color: var(--booked-sub); }
.lp-s-free { padding: 5.5px 7.5px; background: #fff; border: 1.5px dashed var(--teal); color: var(--teal); }
/* a group's free cell: the class and, under it, its free places */
.lp-s-free small { color: var(--teal); }
.lp-cal .lp-r4 { display: none; }
/* four hours on a computer (the halves side by side) and wherever the card is wide; three on a phone */
@container sched (width >= 26rem) {
  .lp-cal { --cg: 10px; grid-template-columns: 3rem repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(4, minmax(2.875rem, 1fr)) auto; }
  .lp-cal .lp-t.lp-r4 { display: block; }
  .lp-cal .lp-s.lp-r4 { display: flex; }
  .lp-s { font-size: 0.875rem; }
}
@media (min-width: 900px) {
  .lp-cal { grid-template-rows: auto repeat(4, minmax(2.75rem, 1fr)) auto; }
  .lp-cal .lp-t.lp-r4 { display: block; }
  .lp-cal .lp-s.lp-r4 { display: flex; }
}
/* the thin line from the free window «Сегодня, 12:00» to its text: it runs in the gap between the first two days, so it crosses no cell */
.lp-tie { position: absolute; grid-column: 2 / 3; grid-row: 3 / -2; top: var(--tie); right: calc(var(--cg) / -2); bottom: calc(-1 * (var(--rg) + 8px));
  width: calc(var(--cg) / 2); border-top: 1px solid var(--teal); border-right: 1px solid var(--teal); pointer-events: none; }
.lp-tie::before { content: ""; position: absolute; left: -3px; top: -3.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.lp-note { grid-column: 2 / -1; grid-row: -2; display: grid; gap: 3px; margin-top: 8px; padding: 10px 12px 11px; border: 1px solid #a9cbc2; border-radius: 8px; background: #fff; }
.lp-note-h { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--soft); }
.lp-note p { font-size: 0.875rem; line-height: 1.45; text-wrap: pretty; }
.lp-k-new::before { background: var(--fresh); }

/* the schedule fills (the owner, 03.11.2026: «чтобы вот эти свободные окна заполнялись потихонечку»). src/landing.js marks the free cells
   .lp-anim, puts «Свободно» and the new booking on one spot of the cell, and steps the classes: .is-sent on the grid (the dot runs up the
   tie, «Отправлено» on the note), .is-booked on a cell (a mint fill sweeps in, the service rises), .is-rewind (all fade back to free) */
.lp-s-free.lp-anim { position: relative; isolation: isolate; display: grid; align-items: start; overflow: hidden; transition: border-color 0.45s; }
.lp-anim > span { grid-area: 1 / 1; }
.lp-anim::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fresh); transform-origin: 0 50%; scale: 0 1;
  transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s; }
.lp-free-t { display: flex; flex-direction: column; gap: 1px; transition: opacity 0.25s, translate 0.35s; }
.lp-new { display: flex; flex-direction: column; gap: 1px; color: var(--fresh-ink); opacity: 0; translate: 0 8px; transition: opacity 0.35s 0.2s, translate 0.45s 0.2s; }
.lp-new small { font-size: 0.75rem; font-weight: 400; color: var(--fresh-sub); }
.lp-anim.is-booked { border-style: solid; border-color: var(--fresh); animation: lp-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25); }
.lp-anim.is-booked::before { scale: 1 1; }
.lp-anim.is-booked .lp-free-t { opacity: 0; translate: 0 -8px; }
.lp-anim.is-booked .lp-new { opacity: 1; translate: 0 0; }
@keyframes lp-pop { from { scale: 0.94; } }
.is-rewind .lp-anim.is-booked { border-style: dashed; border-color: var(--teal); }
.is-rewind .lp-anim.is-booked::before, .is-rewind .lp-anim.is-booked .lp-new { opacity: 0; transition-delay: 0s; }
.is-rewind .lp-anim.is-booked .lp-free-t { opacity: 1; translate: 0 0; transition-delay: 0.25s; }
.is-quiet .lp-anim, .is-quiet .lp-anim *, .is-quiet .lp-anim::before { transition: none !important; animation: none !important; }
.lp-tie::after { content: ""; position: absolute; right: -2.5px; top: 100%; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: 0; }
.is-sent .lp-tie::after { animation: lp-run 0.9s ease-in-out; }
@keyframes lp-run { 15% { opacity: 1; } 90% { top: -3.5px; opacity: 1; } to { top: -3.5px; opacity: 0; } }
.lp-note { position: relative; }
.lp-sent { position: absolute; top: 9px; right: 11px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 500; line-height: 1.2;
  color: var(--teal); opacity: 0; translate: 0 3px; transition: opacity 0.3s, translate 0.3s; }
.lp-sent::before { content: ""; width: 9px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; translate: 0 -2px; }
.is-sent .lp-sent { opacity: 1; translate: 0 0; }
.is-rewind .lp-sent { opacity: 0; }
.is-held .lp-anim, .is-held .lp-tie::after { animation-play-state: paused; }

/* the scheme of a place: a box of constant ratio and a viewBox that never stretches (Refero screen bae76aa9). The tags are HTML at fixed
   sizes, in lanes along the top and the bottom kept free of icons; their leaders are in the drawing and always start under the tag */
.lp-place { container: place / inline-size; }
.lp-map { flex: 1; position: relative; overflow: hidden; border: 1px solid var(--block-edge); border-radius: 6px; background: #fff; }
.lp-map-in { position: relative; aspect-ratio: 3 / 2; }
/* drawn past its bottom edge, so a taller card shows more of the same streets instead of an empty band */
.lp-scheme { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.lp-streets rect { fill: #fff; }
.lp-streets path { fill: none; stroke: var(--block-edge); stroke-width: 1; }
.lp-blocks rect { fill: var(--block); }
.lp-ring { fill: rgba(17, 108, 103, 0.07); stroke: var(--teal); stroke-width: 1.25; }
.lp-houses .h1 { fill: var(--p1); } .lp-houses .h2 { fill: var(--p2); } .lp-houses .h3 { fill: var(--p3); }
.lp-houses .h4 { fill: var(--p4); } .lp-houses .h5 { fill: var(--p5); }
.lp-leaders path { fill: none; stroke: #5d5470; stroke-width: 1; }
.lp-leaders circle { fill: #5d5470; }
.lp-spot { fill: var(--teal); stroke: #fff; stroke-width: 4; }
.lp-ml { position: absolute; z-index: 1; padding: 4px 8px; background: #fff; border: 1px solid #cdc2de; border-radius: 5px;
  font-size: 0.8125rem; line-height: 1.25; color: #3a3148; white-space: nowrap; }
.lp-ml-homes { left: 3%; top: 3%; }
.lp-ml-shops { right: 3%; top: 3%; }
.lp-ml-place { left: 50%; bottom: 3%; translate: -50% 0; border-color: #a9cbc2; color: var(--teal); font-weight: 500; }
@container place (width < 24rem) { .lp-ml { padding: 3px 6px; font-size: 0.75rem; } }
/* people on the streets (the owner, 03.11.2026: «потоки людей шли с такими мыслями, желаниями: вот им приходит СМС-ка»): src/landing.js
   walks them; one now and then thinks of a service (a thought bubble), gets an SMS (a card with a teal edge), turns teal and goes to the
   place; the ring answers with one soft wave. The bubbles are HTML at fixed sizes, moved with `translate` and kept inside the box */
.lp-walker use { fill: #5d5470; stroke: #fff; stroke-width: 1.4; paint-order: stroke; transition: fill 0.5s; }
.lp-walker.is-told use { fill: var(--teal); }
.lp-walker { transition: opacity 0.45s; }
.lp-walker.is-gone { opacity: 0; }
.lp-ping, .lp-pulse { fill: none; stroke: var(--teal); opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-ping { stroke-width: 1.5; }
.lp-pulse { stroke-width: 2; }
.lp-spot { transform-box: fill-box; transform-origin: center; }
.lp-bub { position: absolute; left: 0; top: 0; z-index: 2; width: max-content; max-width: min(13.5rem, 34%); padding: 6px 10px 7px; border-radius: 12px; background: #fff;
  font-size: 0.8125rem; line-height: 1.3; color: #3a3148; text-wrap: balance; pointer-events: none;
  opacity: 0; transform: translate(-50%, calc(-100% + 8px)) scale(0.92); transform-origin: 50% 100%;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
.lp-bub.is-on { opacity: 1; transform: translate(-50%, -100%); }
.lp-think { border: 1px solid #cdc2de; }
.lp-think::before, .lp-think::after { content: ""; position: absolute; left: calc(50% + var(--tail, 0px)); background: #fff; border: 1px solid #cdc2de; border-radius: 50%; }
.lp-think::before { bottom: -8px; width: 8px; height: 8px; translate: -80% 0; }
.lp-think::after { bottom: -14px; width: 5px; height: 5px; translate: -30% 0; }
.lp-sms { border: 1px solid #a9cbc2; box-shadow: 0 6px 16px -6px rgba(17, 76, 72, 0.35); }
.lp-sms b { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font: 500 0.75rem/1.2 var(--mono); letter-spacing: 0.04em; color: var(--teal); }
.lp-sms b::before { content: ""; width: 12px; height: 9px; border-radius: 2px; background: linear-gradient(to bottom right, transparent 46%, #fff 47% 55%, transparent 56%) 0 0 / 50% 60% no-repeat,
  linear-gradient(to bottom left, transparent 46%, #fff 47% 55%, transparent 56%) 100% 0 / 50% 60% no-repeat, var(--teal); }
@container place (width < 24rem) { .lp-bub { padding: 4px 8px 5px; font-size: 0.75rem; } }
.lp-scale { gap: 10px; }
.lp-ramp { display: inline-flex; gap: 2px; }
.lp-ramp i { width: 14px; height: 10px; border-radius: 2px; background: var(--p1); }
.lp-ramp i:nth-child(2) { background: var(--p2); } .lp-ramp i:nth-child(3) { background: var(--p3); }
.lp-ramp i:nth-child(4) { background: var(--p4); } .lp-ramp i:nth-child(5) { background: var(--p5); }

/* ---------- the request, unfolded inside its half ---------- */
.lp-form { display: grid; gap: 14px; width: 100%; max-width: 30rem; padding: 18px; background: #fff; border: 1px solid var(--card-line, var(--hair-strong)); border-radius: var(--r); }
.lp-field { display: grid; gap: 5px; }
.lp-field > label:not(.lp-check) { font-size: 0.875rem; font-weight: 500; }
.lp-opt { font-weight: 400; color: var(--soft); }
.lp-hint { font-size: 0.8125rem; color: var(--soft); }
.lp-form input[type=email], .lp-form input[type=text] { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--ctl); border-radius: var(--r-ctl);
  background: #fff; color: var(--ink); font: 400 1rem var(--font); }
.lp-form input[type=email]:focus-visible, .lp-form input[type=text]:focus-visible { border-color: var(--ink); outline-offset: 1px; }
.lp-form input[aria-invalid=true] { border-color: var(--bad); background: var(--bad-bg); }
.lp-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; cursor: pointer; }
.lp-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--teal); }
.lp-check input[aria-invalid=true] { outline: 2px solid var(--bad); outline-offset: 1px; }
.lp-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 -6px 30px; padding: 0; border: 0; background: none;
  color: var(--teal); font: 400 0.875rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lp-err { display: none; font-size: 0.8125rem; color: var(--bad); }
.lp-err::before { content: "! "; font-weight: 600; }
.lp-field:has([aria-invalid=true]) > .lp-err { display: block; }
.lp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-form .btn-primary { justify-self: start; }
.lp-status { font-size: 0.875rem; color: var(--soft); }
.lp-status:empty { display: none; }
.lp-status.bad { color: var(--bad); }
.lp-done { width: 100%; max-width: 30rem; padding: 14px 16px; border: 1px solid var(--card-line, var(--hair-strong)); border-radius: var(--r-ctl); background: #fff; }

/* ---------- «Что планируем», unfolded under the halves ---------- */
.lp-plans { padding: clamp(40px, 5vw, 64px) var(--pad); background: var(--lilac); border-top: 1px solid var(--lilac-line); }
.lp-plans .lp-eyebrow { color: var(--lilac-muted); }
.lp-plans h2 { margin-top: 14px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; }
.lp-plans > p:not(.lp-eyebrow) { max-width: 62ch; margin-top: 16px; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.lp-plans .lp-more { margin-top: 18px; }

/* ---------- the sections below: ruled, no cards (Refero style a0f473eb) ---------- */
.lp-sec { padding: clamp(48px, 6vw, 88px) var(--pad); }
.lp-sec-head { display: grid; gap: 10px; margin-bottom: clamp(28px, 3vw, 44px); }
.lp-sec h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem); line-height: 1.08; letter-spacing: -0.035em; }
.lp-sec-lead { font-size: 1.0625rem; color: var(--muted); }
.lp-sec h3 { letter-spacing: -0.015em; line-height: 1.3; }
/* how it works: a mint band, for those who have a salon */
.lp-how { background: var(--mint); border-top: 1px solid var(--mint-line); }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.lp-steps li { display: grid; align-content: start; gap: 10px; padding-top: 18px; border-top: 1px solid var(--mint-rule); }
.lp-n, .lp-tier-n { font: 400 0.8125rem/1.2 var(--mono); color: var(--muted); }
.lp-steps h3 { font-size: 1.1875rem; }
.lp-steps p { max-width: 38ch; line-height: 1.55; text-wrap: pretty; }
/* what МТС Маркетолог is and who pays for its SMS, with MTS's own price list */
.lp-steps .lp-step-note { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
/* two levels in columns parted by hairlines */
.lp-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair-strong); }
.lp-tier { display: grid; align-content: start; gap: 10px; padding: 22px clamp(20px, 2.6vw, 40px) 4px; border-left: 1px solid var(--hair-strong); }
.lp-tier:first-child { padding-left: 0; border-left: 0; }
.lp-tier h3 { font-size: 1.25rem; }
.lp-tier dl { display: grid; gap: 3px; margin-top: 2px; }
.lp-tier dt { margin-top: 8px; font-size: 0.8125rem; color: var(--soft); }
.lp-tier dd { line-height: 1.55; text-wrap: pretty; }
/* the paid set: an example list until the owner settles it */
.lp-tier-list { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.lp-tier-list li { position: relative; padding-left: 18px; line-height: 1.5; text-wrap: pretty; }
.lp-tier-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
/* the price as a note with a rule on the left */
.lp-price { max-width: 60ch; margin-top: 36px; padding: 2px 0 2px 14px; border-left: 2px solid var(--muted); font-size: 0.9375rem; color: var(--muted); }
/* questions and answers: a row a question on hairlines, the sign on the right — plus, minus when open — several open at once (Refero:
   Mercury d2c507ad, Family 5ab0d7a8); the heading beside the list on a wide screen and staying in view while answers are read */
.lp-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 0 clamp(24px, 4vw, 64px); padding-top: 0; }
.lp-faq .lp-sec-head { position: sticky; top: 24px; }
.lp-faq-list { border-bottom: 1px solid var(--hair-strong); }
.lp-faq-item { border-top: 1px solid var(--hair-strong); }
.lp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0;
  cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-right: 4px;
  background: linear-gradient(currentColor 0 0) center / 14px 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 14px no-repeat; }
.lp-faq-item[open] summary::after { background-size: 14px 2px, 2px 0; }
.lp-faq-item summary:hover { color: var(--teal); }
.lp-faq-a { display: grid; gap: 10px; padding: 0 0 24px; }
.lp-faq-a p { max-width: 62ch; color: var(--muted); line-height: 1.6; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) { .lp-faq-item summary::after { transition: background-size 0.18s ease; } }

/* ---------- the footer: small and quiet ---------- */
.lp-foot { display: grid; gap: 6px; padding: 24px var(--pad) 36px; border-top: 1px solid var(--hair); font-size: 0.8125rem; line-height: 1.5; color: var(--soft); }
.lp-foot p { max-width: 90ch; }
/* a link inside a sentence keeps its line, and gets a finger-sized area on a touch screen */
@media (pointer: coarse), (max-width: 640px) {
  .lp-tier dd a, .lp-faq-a a, .lp-foot a { padding-block: 12px; }
}

/* ---------- the papers: the consent in a dialog, the policy on its own page ---------- */
.lp-doc { width: min(720px, 100% - 32px); max-height: 85vh; max-height: 85svh; padding: 0; border: 1px solid var(--hair-strong); border-radius: var(--r); background: #fff; color: var(--ink); }
.lp-doc[open] { display: flex; flex-direction: column; }
.lp-doc::backdrop { background: rgba(36, 40, 39, 0.45); }
.lp-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--hair); }
.lp-doc-head h2 { font-size: 1.125rem; letter-spacing: -0.01em; }
.lp-doc-head form { margin: 0; }
.lp-doc-body { padding: 4px 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.lp-intro { margin-top: 14px; line-height: 1.6; }
.lp-pt { margin-top: 16px; }
.lp-pt h3, .lp-pt h4 { font-size: 1rem; }
.lp-pt p, .lp-pt ul { margin: 6px 0 0; line-height: 1.6; }
.lp-pt ul { padding-left: 1.25rem; }
.lp-pt li + li { margin-top: 4px; }
.lp-paper { max-width: 760px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--pad) 72px; }
.lp-paper h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; }
.lp-paper-since { margin-top: 10px; font: 400 0.8125rem/1.4 var(--mono); color: var(--soft); }
.lp-paper-since:empty { display: none; }
.lp-paper > div { margin-top: 24px; }
.lp-paper .lp-pt { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hair); }
.lp-paper .lp-pt .lp-pt { margin-top: 14px; padding-top: 0; border-top: 0; }
.lp-paper .lp-pt h2 { font-size: 1.1875rem; letter-spacing: -0.015em; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .lp-nav { gap: 20px; }
}
/* the halves one under the other; the tabs of the doors take their place in the headline */
@media (max-width: 899px) {
  .lp-halves { display: block; }
  .lp-half { display: flex; flex-direction: column; padding-top: 32px; }
  .lp-half + .lp-half { margin-top: var(--gap-h); }
  .lp-bottom { align-self: stretch; }
  .lp-choose::after { display: none; }
  .lp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 40rem; margin-top: 14px; }
  .lp .lp-tabs a { display: grid; place-items: center; min-height: 48px; padding: 6px 10px; border: 1px solid var(--mint-line); border-radius: var(--r-ctl);
    background: var(--mint); color: var(--ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; text-wrap: balance; }
  .lp .lp-tabs a:last-child { background: var(--lilac); border-color: var(--lilac-line); }
  .lp .lp-tabs a:hover { border-color: var(--ink); color: var(--ink); }
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-steps p { max-width: 60ch; }
  .lp-tiers { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .lp-tier, .lp-tier:first-child { padding: 20px 0 22px; border-left: 0; border-top: 1px solid var(--hair-strong); }
  .lp-faq { display: block; }
  .lp-faq .lp-sec-head { position: static; }
}
/* four links, the name and «Демо» need about 720 px in one row */
@media (max-width: 760px) {
  .lp-nav { display: none; }
}
@media (max-width: 640px) {
  .lp-top { min-height: 56px; gap: 4px 12px; padding-block: 6px; }
  .lp .lp-brand { gap: 9px; font-size: 1.1875rem; }
  .lp-mark { width: 24px; height: 24px; border-radius: 5px; background-size: 5px 5px; background-position: 6px 6px, 13px 6px, 6px 13px, 13px 13px; }
  .lp-demo { min-height: 44px; padding: 0 16px; }
  .lp-hero { padding: 20px var(--pad) 22px; }
  .lp-hero h1 { font-size: clamp(1.875rem, 1.2rem + 3.2vw, 2.25rem); line-height: 1.06; letter-spacing: -0.035em; }
  .lp-choose { margin-top: 10px; font-size: 1.0625rem; }
  .lp-half { padding: 28px 14px 0; border-radius: 14px; }
  .lp-eyebrow { font-size: 0.75rem; letter-spacing: 0.05em; }
  .lp-half h2 { margin-top: 12px; font-size: clamp(1.75rem, 1.1rem + 3vw, 1.875rem); letter-spacing: -0.03em; }
  .lp-desc { margin-top: 12px; font-size: 1rem; }
  .lp-fig { margin-top: 20px; }
  .lp-card { gap: 12px; padding: 14px; }
  .lp-acts { margin-top: 18px; }
  .lp-bottom { margin-top: 26px; padding: 12px 0 18px; font-size: 0.8125rem; }
  .lp-form { padding: 16px; }
  .lp-faq-item summary { min-height: 60px; padding: 12px 0; font-size: 1.0625rem; }
  .lp-price { margin-top: 28px; }
}
/* small phones: the cells keep whole words, at 13 px down to 341 px and at 12 px below */
@media (max-width: 374px) {
  .lp-card { padding: 14px 12px; }
  .lp-cal { --cg: 6px; }
  .lp-s { padding: 6px 6px; }
  .lp-s-free { padding: 4.5px 4.5px; }
}
@media (max-width: 340px) {
  .lp-card { padding: 12px 10px; }
  .lp-cal { --cg: 5px; }
  .lp-s { padding: 6px 5px; font-size: 0.75rem; }
  .lp-s-free { padding: 4.5px 3.5px; }
  .lp-day { font-size: 0.75rem; }
}

/* ---------- «Что даёт кабинет»: a bento after Refero screen 556092c0 (Column) — two large tiles with a picture, small tiles with an icon,
   a title and a line; mint for filling the windows, ink for the morning look at the market, lilac for what is being made ---------- */
.lp-kicker { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: clamp(12px, 1.4vw, 20px);
  grid-template-areas: "fill fill best" "fill fill ads" "chat ink ink" "soon ink ink"; margin: 0; padding: 0; list-style: none; }
.lp-bento > :nth-child(1) { grid-area: fill; }
.lp-bento > :nth-child(2) { grid-area: ink; }
.lp-bento > :nth-child(3) { grid-area: best; }
.lp-bento > :nth-child(4) { grid-area: ads; }
.lp-bento > :nth-child(5) { grid-area: chat; }
.lp-bento > :nth-child(6) { grid-area: soon; }
.lp-tile { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--hair-strong); border-radius: var(--r); background: #fff; min-width: 0; }
.lp-tile h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.lp-tile p { line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.lp-tag { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--fresh-ink); font-size: 0.8125rem; font-weight: 500; }
/* the topics of a talk with the AI, as chips of the page's lilac (the chat is the owner's next step, not an action of the page) */
.lp-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.lp-topics li { padding: 4px 10px; border-radius: 999px; background: var(--booked); color: var(--booked-ink); font-size: 0.8125rem; font-weight: 500; }
.lp-ico { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--mint); fill: none; stroke: var(--fresh-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the two large tiles: the text at the top, the picture at the bottom right (as the large tiles of Column), so the tile is filled however
   tall the column of small tiles beside it is */
.lp-tile-fill, .lp-tile-ink { grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: clamp(24px, 3vw, 44px); padding: clamp(24px, 2.6vw, 40px); }
.lp-tile-fill .lp-tile-text p, .lp-tile-ink .lp-tile-text p { max-width: 40ch; }
.lp-tile-fill .lp-tile-pic, .lp-tile-ink .lp-tile-pic { justify-self: end; width: min(100%, 540px); }
.lp-tile-text { display: grid; gap: 12px; align-content: start; }
.lp-tile-fill h3, .lp-tile-ink h3 { font-size: clamp(1.5rem, 1.15rem + 1vw, 2.125rem); line-height: 1.08; letter-spacing: -0.03em; }
.lp-tile-fill p, .lp-tile-ink p { font-size: 1.0625rem; }
.lp-tile-fill { background: var(--mint); border-color: var(--mint-line); }
.lp-tile-fill .lp-tag { background: #fff; }
.lp-tile-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.lp-tile-ink .lp-tile-text p { color: #c9d3cf; }
.lp-tile-ink .lp-tag { background: #364240; color: #e5f2ee; }
.lp-tile-pic { margin: 0; display: grid; gap: 8px; }
.lp-tile-pic figcaption { font: 400 0.75rem/1.3 var(--mono); color: var(--soft); }
.lp-tile-ink .lp-tile-pic figcaption { color: #9fb0aa; }
.lp-mini { display: grid; gap: 10px; padding: 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--mint-line); box-shadow: 0 10px 30px -18px rgb(17 108 103 / .45); }
.lp-mini p { margin: 0; color: var(--ink); font-size: 0.9375rem; line-height: 1.45; }
.lp-mini-slot { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1.5px dashed var(--teal); border-radius: var(--r-ctl); font-family: var(--mono); font-size: 0.8125rem !important; }
.lp-mini-slot b { color: var(--teal); font-weight: 500; }
.lp-mini-sms { position: relative; margin-left: 18px !important; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--booked); color: var(--booked-ink) !important; }
.lp-mini-sms::before { content: "СМС"; position: absolute; left: -18px; top: 10px; font: 500 0.625rem/1 var(--mono); color: var(--soft); writing-mode: vertical-rl; transform: rotate(180deg); }
.lp-mini-who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; color: var(--muted) !important; }
.lp-mini-who b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.lp-mini-houses { display: grid; grid-template-columns: repeat(7, 9px); gap: 3px; }
.lp-mini-houses i { height: 14px; border-radius: 2px 2px 1px 1px; background: var(--p2); }
.lp-mini-houses i:nth-child(2), .lp-mini-houses i:nth-child(5) { background: var(--p4); }
.lp-mini-houses i:nth-child(3) { background: var(--p5); }
.lp-mini-houses i:nth-child(6) { background: var(--p3); }
.lp-mini-dark { background: #2f3836; border-color: #3d4946; box-shadow: none; }
.lp-mini-dark p { color: #eef3f1; }
.lp-mini-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #3d4946; font: 400 0.75rem/1.3 var(--mono) !important; color: #9fb0aa !important; }
.lp-mini-row { display: flex; align-items: baseline; gap: 10px; }
.lp-mini-row i { flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.lp-mini-row.red i { background: #ff8a7a; }
.lp-mini-row.green i { background: #6fd3a8; }
.lp-mini-row.amber i { background: #f2c45a; }
.lp-mini-sub { margin-top: 4px !important; padding: 8px 0 0 !important; border-top: 1px solid #3d4946; border-bottom: 0 !important; }
.lp-mini-bar { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.8125rem !important; }
.lp-mini-bar span { color: #9fb0aa; }
.lp-mini-bar b { font: 400 0.75rem/1.2 var(--mono); color: #eef3f1; white-space: nowrap; }
.lp-mini-bar i { position: relative; height: 6px; border-radius: 3px; background: #3d4946; }
.lp-mini-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: #6fd3a8; }
.lp-fill-80::after { width: 80%; }
.lp-fill-70::after { width: 70%; }
/* the price: the usual of the competitors in the middle, you a dot a little to the right */
.lp-mark-55::before { content: ""; position: absolute; left: 50%; top: -3px; width: 2px; height: 12px; background: #9fb0aa; }
.lp-mark-55::after { left: 55% !important; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #f2c45a !important; }
/* what is being made: lilac, as the half «Бизнес только открывается» */
.lp-tile-soon { background: var(--lilac); border-color: var(--lilac-line); }
.lp-soon { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--lilac-muted) !important; }
.lp-soon .lp-badge { font-weight: 400; }
.lp-soon-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lp-soon-list li { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--lilac-line); }
.lp-soon-list h3 { font-size: 1.0625rem; }
.lp-soon-list p { color: var(--lilac-muted); }
@media (max-width: 899px) {
  .lp-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "fill fill" "ink ink" "best ads" "chat soon"; }
}
@media (max-width: 640px) {
  .lp-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .lp-bento > * { grid-area: auto !important; }
  .lp-tile-fill h3, .lp-tile-ink h3 { font-size: 1.5rem; }
}

/* motion: the scroll to an anchor and the two pictures, only for those who did not ask for less; for them the pictures stay as drawn */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.lp) { scroll-behavior: smooth; }
  .lp .btn, .lp-more, .lp .lp-tabs a { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .lp-pause, .lp-walkers, .lp-bub, .lp-pulse, .lp-k-new, .lp-sent { display: none !important; }
}