/*
 * New page — standalone styles.
 * Contract: every selector starts with .lp (the page root). No bare tag selectors, no :root, no body/html.
 * Load AFTER /public/installment.css so ties on specificity resolve in our favour.
 *
 * Do not put these styles in @layer: the site CSS is unlayered, and unlayered rules beat every layer.
 */

/* ---------- 1. Root: tokens + isolation ---------- */
.lp {
  /* Own tokens, seeded from the site's :root so the page tracks the brand if it changes. */
  --lp-font: SFTSchriftedSans, Arial, Helvetica, sans-serif;
  --lp-text: var(--main-color-black-secondary, #272727);
  --lp-muted: var(--main-soft-gray, #8b8a8c);
  --lp-accent: var(--main-orange, #ed5d2b);
  --lp-accent-hover: var(--btn-hover-color-orange, #ef7b31);
  --lp-accent-active: var(--btn-active-color-orange, #d05e2d);
  --lp-purple: var(--main-purple, #7c7cbd);
  --lp-bg-soft: var(--bg-light-pink, #fef5f1);
  --lp-radius: 26px;
  /* Height of the sticky nav, used for anchor offsets. */
  --lp-sticky-offset: calc(var(--main-nav-wrapper-height, 56px) + 20px);

  position: relative;
  isolation: isolate; /* our z-indexes can never climb above header (1020), mobile bar (1040), modals (1050) */
  font-family: var(--lp-font);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--lp-text);
  font-feature-settings: "ss03" on;
}

/* ---------- 2. Guards against site-wide leaks (see docs/README.md, section CSS) ---------- */

/* h1–h5, p: the site resizes them at <=640px; section/ul/ol/blockquote/table get margins. */
/* not inside the site's .article typography (used by v2 components such as the crown types tabs) */
.lp :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, table, section, figure, dl, dd):where(:not(.article *)) {
  margin: 0;
  max-width: none;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* a:hover { color: orange } is global (0,1,1) — neutralise, then style links via classes. */
.lp :where(a):hover { color: inherit; }

/* *:before/*:after get a global transition-property list. */
.lp :where(*)::before,
.lp :where(*)::after { transition: none; }

/* :target:before injects a spacer block for the sticky nav. Use scroll-margin instead. */
.lp :target::before { content: none; display: none; }
.lp [id] { scroll-margin-top: var(--lp-sticky-offset); }

/* Global custom checkbox skin -> back to browser default; style ours via .lp-checkbox. */
.lp input[type="checkbox"] { all: revert; }
.lp input[type="checkbox"]::before { content: none; }

/* ---------- 3. Layout: containers, section spacing and section frames come from the site (container-xl / container-2xl)
   and the v2 skeleton (v2-base.css). This file only adds what the mockup needs on top. ---------- */

/*
 * Units: px only. html font-size is 14px on desktop and 12px at <=640px on this site,
 * so rem would silently shrink on mobile.
 * Breakpoints used by the site: 640 / 768 / 1024 / 1280 / 1470 (max-width).
 */

/* ---------- 4. Page components go below, all prefixed .lp- ---------- */

/* Page-only font cut (the site ships only the regular widths). Loaded only when the Split banner renders. */
@font-face { font-family: SFTSchriftedSansComp; src: url(/lp/fonts/SFTSchriftedSans-RegularComp.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: SFTSchriftedSansComp; src: url(/lp/fonts/SFTSchriftedSans-ExtraBoldComp.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Bold (700) for the rating and Hero labels — the site ships no 700 cut. Subset: Cyrillic, digits, punctuation, ₽ (18 KB); a separate family so site text is not affected */
@font-face { font-family: SFTSchriftedSansBold; src: url(/lp/fonts/SFTSchriftedSans-Bold-sub.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- page rhythm ----
   Spacing between blocks comes from the v2 skeleton: .content (64 / 88 between sections), .good-place-container (58),
   .page-intro (76). Ours only where v2 has no block: the second Hero and the anchors. No top padding: the Hero sits
   right under the breadcrumbs, as on v2 and the live service pages. */
.lp > :has(> .lp-hero) + :has(> .lp-hero) { margin-top: 36px; }
.lp-anchors { margin-top: 36px; }
/* v2's .good-place-container (58px) follows the Hero there; after the anchors the mockup has 36px (Figma 963→1045) */
.lp > :has(> .lp-anchors) + * > .good-place-container { margin-top: 36px; }
@media (max-width: 640px) {
  .lp > :has(> .lp-hero) + :has(> .lp-hero) { margin-top: 20px; }
  .lp-anchors { margin-top: 20px; }
  .lp > :has(> .lp-anchors) + * > .good-place-container { margin-top: 20px; }
}

/* ===================== Hero (Figma 30946:4073 dark, 31128:70421 light) ===================== */
.lp-hero {
  --hero-bg: #000;
  --hero-ink: #fff;
  --hero-tick: #ff5000;
  --hero-label: rgba(170, 173, 186, .8);

  display: grid;
  grid-template-columns: minmax(0, 1fr) 667px;
  padding: 26px 25px 26px 62px; /* the photo panel: 26px from top/bottom, 25px from the right */
  border-radius: 46px;
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.lp-hero__main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 22px 0; }
.lp-hero__title {
  font-size: 72.097px; line-height: 79.307px; font-weight: 600; letter-spacing: -1.4419px; color: inherit;
}
.lp-hero__lead { margin-top: 24.4px; font-size: 22px; line-height: 34px; }
.lp-hero__includes { margin-top: 24px; }
.lp-hero__includes-title {
  font-family: SFTSchriftedSansBold, var(--lp-font); font-weight: 700;
  font-size: 14.5px; line-height: 15px; letter-spacing: .29px; text-transform: uppercase; color: var(--hero-label);
  font-feature-settings: normal;
}
/* list: the site's .check-list.list-two-columns (its orange check icon, 2 CSS columns); sizes from Figma */
.lp .lp-hero__list { --text-body: 18px; width: 664px; max-width: 100%; margin: 12px 0 0; column-gap: 0; } /* 2nd column at 332px */
.lp .lp-hero__list > li { margin: 0 0 12px; padding-left: 26px; font-size: 20px; line-height: 28px; font-weight: 300; white-space: nowrap; font-feature-settings: normal; }

/* price card: absolute positions from Figma turned into a 2-column grid */
.lp-hero__offer { position: relative; margin-top: auto; padding-top: 20px; }
.lp-hero__promo {
  position: absolute; top: 0; left: 32px; z-index: 1;
  padding: 12px 13px 12px; border: 1px solid rgba(173, 176, 192, .25); border-radius: 43px;
  background: #fff; box-shadow: 0 15px 84px rgba(167, 104, 84, .2);
  font-size: 15px; line-height: 15px; font-weight: 600; letter-spacing: .15px; text-transform: uppercase; color: #272727;
  white-space: nowrap;
}
.lp-hero__card {
  display: grid; grid-template-columns: 248px auto; align-items: start;
  width: 657px; padding: 33px 32px 24px;
  border-radius: 28px; background: #fff; color: #111;
}
.lp-hero__price-label {
  font-size: 14.5px; line-height: 14.5px; font-weight: 600; letter-spacing: .29px; text-transform: uppercase; color: rgba(0, 0, 0, .8);
  font-feature-settings: normal;
}
.lp-hero__price-value { margin-top: -.5px; font-size: 52px; line-height: 72.8px; font-weight: 600; white-space: nowrap; font-feature-settings: normal; }
.lp-hero__split { padding-top: 26.5px; font-feature-settings: normal; }
.lp-hero__split-row { display: flex; align-items: center; gap: 9px; font-size: 20px; line-height: 23px; font-weight: 600; white-space: nowrap; }
.lp-hero__split-badge {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4.78px; min-width: 74.64px; /* Figma box */
  padding: 3.58px 8.36px 3.83px 5.97px; border-radius: 7.17px; background: #151a26;
  font-size: 13.141px; line-height: 15.77px; letter-spacing: .26px; color: #fff;
}
.lp-hero__split-badge img { display: block; width: 13.61px; height: 15.45px; }
.lp-hero__split-note { margin-top: 5px; font-size: 13.5px; line-height: 20.3px; font-weight: 500; text-transform: uppercase; color: #8a8a8a; opacity: .8; }
.lp-hero__actions { grid-column: 1 / -1; display: flex; gap: 12px; margin-top: 9.2px; }

/* buttons: the site's .btn.btn--primary (its hover) and .button-messangers with .btn-socials icons; size and shape from Figma */
.lp .lp-hero__btn { position: relative; isolation: isolate; overflow: hidden; height: 56px; font-size: 18px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.lp .lp-hero__btn--book { width: 209px; padding: 0; border-radius: 16px; }
.lp .lp-hero__btn--msg { width: 372px; justify-content: flex-start; gap: 10px; padding: 0 0 0 25px; border: 0; border-radius: 20px; background: #2b2e38; }
.lp .lp-hero__btn--msg .btn-socials > * { outline-color: #2b2e38; }
/* the light streak on the messenger button (Figma "Gradient": 554x104 band, 61.17deg), under the content */
.lp-hero__btn--msg::before {
  content: ""; position: absolute; z-index: -1; left: -364.2px; top: -6.99px; width: 554.4px; height: 103.96px;
  background: linear-gradient(rgba(229, 172, 142, 0), rgba(255, 255, 255, .5) 50%, rgba(229, 172, 142, 0));
  transform: rotate(61.17deg) skewX(2.36deg); pointer-events: none;
}
/* the site's .button-messangers:hover makes the button transparent with white text: unreadable on the white card and
   on the light Hero, so here it keeps a dark fill */
.lp .lp-hero__btn--msg:hover { background: #393d4a; color: #fff; }
.lp .lp-hero__btn:focus-visible { outline: 2px solid #ed5d2b; outline-offset: 3px; }

/* photo panel + reviews */
.lp-hero__media { position: relative; overflow: hidden; height: 697px; border-radius: 32px; background: #0b0c10; }
.lp-hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
/* reviews: the site's .stars-container, .boilerplate-wrapper and .avatar (as in v2); sizes and colours from Figma */
.lp-hero__reviews { position: absolute; right: 27.71px; bottom: 22.22px; color: #fff; font-size: 15.166px; line-height: 21.6px; font-feature-settings: normal; }
.lp .lp-hero__reviews .stars-container { gap: 0; margin-left: .3px; }
.lp .lp-hero__reviews .stars-container__star { width: 15.12px; height: 15.12px; background-color: #ff5000; }
.lp .lp-hero__reviews .boilerplate-wrapper { flex-direction: row; justify-content: flex-end; gap: 12.96px; } /* v2 reverses it below 768px for a left-aligned block; ours sits at the right edge */
.lp .lp-hero__reviews .boilerplate-wrapper > [data-slot=icon] { transform: none; }
.lp .lp-hero__reviews .forward-i { width: 25.92px; height: 25.92px; background-color: currentColor; }
.lp .lp-hero__reviews .text-body { font-size: 17.062px; line-height: 21.6px; }
.lp .lp-hero__reviews .boilerplate__img { width: 43.2px; height: 43.2px; max-width: none; }
.lp .lp-hero__reviews .boilerplate > * + * { margin-left: -8.64px; }
.lp .lp-hero__more { background: #000; font-family: SFTSchriftedSansBold, var(--lp-font); }
.lp .lp-hero__more span { font-size: 9.479px; font-weight: 700; }
.lp-bold { font-family: SFTSchriftedSansBold, var(--lp-font); font-weight: 700; }

/* ---- light version (31128:70421): own spacing, card without label, buttons under the card ---- */
.lp-hero--light {
  --hero-bg: #f6f6f9;
  --hero-ink: #111;
  --hero-tick: #ed5d2b;
  --hero-label: #6b7280;
  padding-top: 108px;
}
.lp-hero--light .lp-hero__main { padding-bottom: 24px; }
.lp-hero--light .lp-hero__includes { margin-top: 28px; }
.lp-hero--light .lp-hero__includes-title {
  font-family: var(--lp-font); font-weight: 600; font-size: 15px; letter-spacing: .3px;
}
.lp-hero--light .lp-hero__list > li { font-size: 22px; line-height: 31px; }
.lp-hero--light .lp-hero__offer { padding-top: 16px; }
.lp-hero--light .lp-hero__promo {
  left: 32px; padding: 8px 20px; border: 0; border-radius: 49px;
  box-shadow: 0 16px 44px rgba(79, 76, 204, .07); color: #2b303b;
}
.lp-hero--light .lp-hero__card {
  grid-template-columns: 251px auto; align-items: center;
  width: 513px; height: 104px; padding: 0 32px;
  box-shadow: 0 16px 22px rgba(79, 76, 204, .07);
}
.lp-hero--light .lp-hero__price { position: relative; height: 62px; }
.lp-hero--light .lp-hero__price::after { content: ""; position: absolute; top: 0; right: 30px; width: 1px; height: 62px; background: #e8e8f0; }
.lp-hero--light .lp-hero__price-value { margin: 0; font-size: 44px; line-height: 62px; }
.lp-hero--light .lp-hero__split { padding: 0 0 0 0; }
.lp-hero--light .lp-hero__split-badge { background: #111; }
.lp-hero--light .lp-hero__split-note { margin-top: 10px; font-size: 16px; text-transform: none; color: #6b7280; }
.lp-hero--light .lp-hero__actions { margin-top: 40px; }
.lp-hero--light .lp-hero__media { height: 678px; background: #fcfcfd; }
.lp-hero--light .lp-hero__reviews { bottom: 18.22px; }

/* narrower desktops: the photo column shrinks first, then the type */
@media (max-width: 1440px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); column-gap: 24px; padding-left: 48px; }
  .lp-hero__title { font-size: 60px; line-height: 66px; letter-spacing: -1.2px; }
  .lp-hero__lead { font-size: 20px; line-height: 30px; }
  .lp-hero__includes { align-self: stretch; }
  .lp .lp-hero__list { width: 100%; }
  .lp .lp-hero__list > li, .lp .lp-hero--light .lp-hero__list > li { font-size: 18px; line-height: 26px; }
  /* the card follows the column instead of its fixed 657px; the messenger button takes what is left */
  .lp-hero__card { width: 100%; max-width: 657px; padding-left: 24px; padding-right: 24px; }
  .lp .lp-hero__btn--book { flex: none; }
  .lp .lp-hero__btn--msg { flex: 1 1 auto; width: auto; max-width: 372px; min-width: 0; padding-left: 20px; padding-right: 16px; }
  .lp-hero--light .lp-hero__card { width: 100%; max-width: 513px; }
}
@media (max-width: 1279px) {
  .lp-hero { padding: 24px 24px 24px 40px; border-radius: 38px; }
  .lp-hero--light { padding-top: 24px; }
  .lp-hero__title { font-size: 48px; line-height: 54px; letter-spacing: -.96px; }
  .lp-hero__lead { margin-top: 18px; font-size: 18px; line-height: 27px; }
  .lp-hero__includes { margin-top: 20px; }
  .lp .lp-hero__list { column-count: 1; }
  .lp-hero__offer { margin-top: 48px; }
  .lp-hero__card { width: 100%; max-width: 657px; grid-template-columns: auto auto; justify-content: space-between; column-gap: 20px; padding: 33px 24px 24px; }
  .lp-hero__actions { flex-wrap: wrap; }
  .lp .lp-hero__btn--book { width: auto; padding: 0 28px; }
  .lp .lp-hero__btn--msg { width: auto; padding: 0 24px 0 20px; }
  .lp-hero__media, .lp-hero--light .lp-hero__media { height: auto; min-height: 560px; }
  .lp-hero--light .lp-hero__card { width: 100%; max-width: 513px; height: auto; min-height: 104px; padding: 18px 24px; }
}
@media (max-width: 1023px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 32px 24px 24px; }
  .lp-hero--light { padding-top: 32px; }
  .lp-hero__main { padding: 0; }
  .lp .lp-hero__list { column-count: 2; }
  .lp-hero__media, .lp-hero--light .lp-hero__media { min-height: 0; height: 460px; }
  .lp-hero__photo { object-position: center 70%; }
}
@media (max-width: 640px) {
  .lp-hero { padding: 24px 12px 12px; border-radius: 28px; }
  .lp-hero--light { padding-top: 24px; }
  .lp-hero__title { font-size: 34px; line-height: 38px; letter-spacing: -.68px; }
  .lp-hero__lead { margin-top: 14px; font-size: 16px; line-height: 24px; }
  .lp .lp-hero__list { column-count: 1; }
  .lp .lp-hero__list > li, .lp .lp-hero--light .lp-hero__list > li { margin-bottom: 8px; font-size: 16px; line-height: 22px; white-space: normal; }
  .lp-hero__offer { width: 100%; margin-top: 36px; }
  .lp-hero__promo, .lp-hero--light .lp-hero__promo { left: 20px; padding: 8px 14px; font-size: 13px; line-height: 13px; }
  .lp-hero__offer { padding-top: 16px; }
  .lp-hero__card { grid-template-columns: minmax(0, 1fr); padding: 28px 16px 16px; border-radius: 24px; }
  .lp-hero__price-label { font-size: 13px; line-height: 13px; }
  .lp-hero__price-value { font-size: 40px; line-height: 52px; }
  .lp-hero__split { padding-top: 6px; }
  .lp-hero__actions { flex-direction: column; margin-top: 18px; }
  .lp .lp-hero__btn--book, .lp .lp-hero__btn--msg { width: 100%; max-width: none; }
  .lp .lp-hero__btn--msg { justify-content: center; gap: 6px; padding: 0 8px; font-size: 15px; }
  .lp .lp-hero__btn--msg .telegram-widget__btn-icon { --size: 26px; }
  .lp-hero__card .lp-hero__actions { margin-left: -6px; margin-right: -6px; } /* buttons a little wider than the card text */
  .lp-hero--light .lp-hero__card { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 20px; }
  .lp-hero--light .lp-hero__price { height: auto; }
  .lp-hero--light .lp-hero__price::after { content: none; }
  .lp-hero--light .lp-hero__price-value { font-size: 38px; line-height: 46px; }
  .lp-hero--light .lp-hero__actions { margin-top: 20px; }
  .lp-hero__media, .lp-hero--light .lp-hero__media { height: 380px; border-radius: 22px; }
  .lp-hero__reviews { right: 14px; bottom: 14px; transform: scale(.86); transform-origin: right bottom; }
}

/* very narrow phones: the messenger icons give way to the button text */
@media (max-width: 359px) { .lp .lp-hero__btn--msg .btn-socials { display: none; } }

/* ===================== Anchors (Figma 30893:1515) ===================== */
.lp-anchors { font-feature-settings: normal; }
.lp-anchors__list { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; list-style: none; }
.lp-anchors__list > li { padding: 0; }
.lp-anchors__list > li::before { content: none; }
.lp .lp-anchors__link {
  display: block;
  padding: 12px 21.6px;
  border-radius: 999px;
  background: #f4f4f6;
  font-size: 18px; line-height: 22px; font-weight: 400; color: #272727;
  white-space: nowrap; text-decoration: none;
  transition: background-color .2s, color .2s;
}
/* hover: the dark pill in the mockup is the hover sample — full inversion, white on #171c27 (contrast 16.8:1) */
.lp .lp-anchors__link:hover { background: #171c27; color: #fdfdfd; }
.lp .lp-anchors__link:focus-visible { outline: 2px solid #171c27; outline-offset: 2px; }

/* narrow screens: one swipeable row instead of 3–4 rows of pills, bleeding to the screen edges */
@media (max-width: 767px) {
  .lp-anchors__list {
    flex-wrap: nowrap; gap: 8px;
    margin: 0 calc(-1 * var(--container-padding, 16px)); padding: 0 var(--container-padding, 16px);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .lp-anchors__list::-webkit-scrollbar { display: none; }
  .lp .lp-anchors__link { padding: 10px 18px; font-size: 16px; line-height: 20px; }
}

/* ===================== «Хорошее место» banner (Figma 30952:4602) ===================== */
.lp-goodplace {
  container: lp-goodplace / inline-size;
  position: relative;
  /* the badge sticks out 22px above and below the plate. Room is kept only above (the mockup measures the gap from the
     anchors to the badge); below it overhangs, so the next block counts its gap from the plate (Figma: plate → intro 76) */
  padding: 22px 0 0;
  color: #fff;
  font-feature-settings: normal;
}
.lp-goodplace__badge { position: absolute; top: 0; left: 31px; z-index: 1; width: 107px; height: 144px; }
.lp-goodplace__badge img { display: block; width: 107px; height: 144px; filter: drop-shadow(0 0 25px rgba(0, 0, 0, .1)); }
.lp-goodplace__badge-text {
  position: absolute; top: 83.36px; left: 0; right: 0;
  font-size: 12.5px; line-height: 13px; font-weight: 600; text-align: center; color: #333;
}
.lp-goodplace__plate {
  display: flex; align-items: center;
  min-height: 100px;
  padding-left: 138px;
  border-radius: 30px;
  background: #000;
}
.lp-goodplace__text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 100px; padding: 20px 32px 20px 24px;
}
.lp-goodplace__title { font-size: 24px; line-height: 32px; font-weight: 500; font-feature-settings: "lnum", "pnum"; }
.lp-goodplace__desc { font-size: 16px; line-height: 24px; letter-spacing: -.16px; opacity: .8; }
.lp-goodplace__rating {
  flex: none;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  margin: 1px 4.78px 0 0; /* Figma: 5.5px from the plate top when the plate is 100px tall */
  padding: 20px 32px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .15);
}
.lp-goodplace__score { display: flex; align-items: center; gap: 4px; height: 30px; }
.lp-goodplace__num { font-family: SFTSchriftedSansBold, var(--lp-font); font-size: 22px; line-height: 30px; font-weight: 700; }
.lp-goodplace__score img { display: block; width: 116px; height: 30px; }
.lp-goodplace__reviews { font-size: 15px; line-height: 15px; font-weight: 500; white-space: nowrap; }
/* light version (Figma 31044:6788): #f6f6f8 plate, black text; the rating pill stays rgba(255,255,255,.15) as in the mockup */
.lp-goodplace--light { color: #000; }
.lp-goodplace--light .lp-goodplace__plate { background: #f6f6f8; }
/* two plates in a row (the light one shown under the dark one): the badge overhang needs room between them */
.lp > :has(> .good-place-container > .lp-goodplace) + :has(> .good-place-container > .lp-goodplace) > .good-place-container { margin-top: 36px; }

/* tablet: rating moves under the text */
@container lp-goodplace (max-width: 760px) {
  .lp-goodplace__plate { flex-direction: column; align-items: stretch; }
  .lp-goodplace__text { min-height: 0; padding-bottom: 14px; }
  .lp-goodplace__rating { align-self: flex-start; margin: 0 0 20px 24px; padding: 14px 24px; }
}
/* phone: smaller badge, text beside it, rating across the bottom */
@container lp-goodplace (max-width: 480px) {
  .lp-goodplace__badge { left: 14px; transform: scale(.7); transform-origin: top left; }
  .lp-goodplace__plate { padding-left: 89px; border-radius: 24px; }
  .lp-goodplace__text { padding: 18px 18px 14px 12px; }
  .lp-goodplace__title { font-size: 19px; line-height: 24px; }
  .lp-goodplace__desc { font-size: 14px; line-height: 20px; }
  .lp-goodplace__rating { margin: 0 12px 12px -77px; align-self: stretch; padding: 12px 18px; border-radius: 18px; }
}

/* ===================== Intro text (Figma 30893:1474) ===================== */
/* v2 .page-intro: 24px / 170%, #111, as in the mockup; Figma sets the first sentence in Medium (site <strong> is SemiBold) */
.lp .page-intro { font-feature-settings: normal; }
.lp .page-intro strong { font-weight: 500; }

/* ===================== Prices (Figma 31006:4002) ===================== */
.lp-prices {
  --pr-ink: #272727;
  --pr-muted: #6e6e6e;
  --pr-dark: #2b303b;
  --pr-line: #e9e9e9; /* Figma: #dedede at 0.667px */
  --pr-promo: #ff5000;
  --pr-shadow: 0 16px 44px rgba(79, 76, 204, .07);
  color: var(--pr-ink);
  /* The mockup is set without the site-wide "ss03" stylistic set (ss03 narrows lines by ~2%) */
  font-feature-settings: normal;
}

/* ---- left column: v2 .badge-category / .section-heading / .section-paragraph; Figma colour and size where they differ ---- */
.lp .lp-prices__title { color: #111; letter-spacing: .12px; }
.lp .lp-prices__lead, .lp .lp-section-lead { max-width: 380px; font-size: 18px; line-height: 1.55; color: rgba(37, 37, 37, .8); text-wrap: auto; }

/* ---- perks (v2 .prices / .prices-card): as in Figma already ---- */

/* ---- price list: v2 .price-stages / .price-item-row / .price__row / .btn-cta (v2-base.css); Figma looks on top ---- */
/* v2 strikes the first item of .price__cost (the old price); rows without an old price start with the price itself */
.lp .price__cost > .from:first-child { text-decoration-line: none; }
/* Figma split pill: 13px muted text */
.lp .price__badges { font-size: 13px; line-height: 20px; font-weight: 500; color: #6e6e6e; white-space: nowrap; }
/* the consultation row (with the list under it): price and button stay on the first line, as in Figma */
@media (min-width: 1025px) { .lp .lp-price-row--top { align-items: flex-start; } }
/* «Акция»: orange arrow (Figma); hover keeps the dark fill and white text */
.lp .lp-btn-cta--promo .btn-cta__arr-wrapper { background-color: #ff5000; color: #fff; }
.lp .btn-cta:focus-visible, .lp .price-stages__cta:focus-visible { outline: 2px solid #ff5000; outline-offset: 2px; }

/* «В консультацию входит» (Figma; v2 has no such list) */
.lp-price-includes { margin-top: 12px; }
.lp-price-includes__title { font-size: 14.5px; line-height: 24.5px; font-weight: 600; letter-spacing: -.14px; color: #4b4b4b; }
.lp-checklist {
  display: grid; grid-template-columns: 255.48px 255.48px;
  column-gap: 0; row-gap: 6px; margin-top: 6.5px; padding: 0; list-style: none;
}
.lp-checklist li { display: flex; align-items: center; gap: 8px; padding: 0; font-size: 14.5px; line-height: 19.58px; color: #404040; }
.lp-checklist svg { flex: none; }

.lp-prices__main { container: lp-main / inline-size; display: grid; gap: 20px; min-width: 0; }

/* ---- Yandex Split banner ---- */
.lp-splitbanner {
  position: relative;
  display: grid;
  grid-template-columns: 137.7px 174.63px minmax(0, 1fr);
  column-gap: 23.22px;
  align-items: start;
  min-height: 110px; padding: 0 264px 0 30px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--pr-dark); color: #fff;
}
.lp-splitbanner__logo { width: 137.7px; height: 28.47px; margin-top: 41.55px; }
/* no hover look: the banner stays exactly as designed (guard .lp a:hover would inherit dark text) */
.lp .lp-splitbanner:hover { color: #fff; }
.lp-splitbanner:focus-visible { outline: 2px solid var(--pr-promo); outline-offset: 3px; }
.lp-splitbanner__slogan {
  position: relative; align-self: start; padding-top: 19.6px;
  font-family: SFTSchriftedSansComp, SFTSchriftedSans, sans-serif;
  font-size: 20.82px; line-height: 1.1; font-weight: 800; text-transform: uppercase;
}
.lp-splitbanner__pill {
  display: flex; align-items: center;
  width: 150.04px; height: 28.77px; margin-top: -3.46px; padding: 1px 0 0 9px;
  border-radius: 14.385px 0 14.385px 14.385px; /* Figma radii clamp to half height; 999px would shrink the 84px corner */
  background: var(--pr-promo);
  font-size: 18.58px; transform: rotate(-4.73deg);
}
.lp-splitbanner__text { display: grid; align-self: start; padding-top: 21.17px; }
.lp-splitbanner__title { font-size: 20px; line-height: 1.15; font-weight: 800; }
.lp-splitbanner__legal {
  max-width: 218px; margin-top: 6px;
  font-family: SFTSchriftedSansComp, SFTSchriftedSans, sans-serif;
  font-size: 4.72px; line-height: 1.1; opacity: .6;
}
.lp-splitbanner__art { position: absolute; inset: 0 0 0 auto; width: 264px; pointer-events: none; }
/* glow: lower half of a 213px disc, rotated about the disc centre (Figma 31006:4015) */
.lp-splitbanner__glow { position: absolute; right: 19.36px; top: 61px; width: 213.28px; height: 106.64px; transform-origin: 50% 0; transform: rotate(21.21deg); }
.lp-splitbanner__coins { position: absolute; right: 61.93px; top: 4.17px; width: 195.7px; height: 108.27px; }

/* ===================== Adaptive: the price list follows v2 (perks under the prices below 1404px) ===================== */
@media (max-width: 1024px) { .lp .price__desc br { display: none; } } /* the Figma line break only fits the desktop column */
@media (max-width: 640px) {
  .lp .lp-prices__lead, .lp .lp-section-lead { font-size: 16px; }
  .lp-checklist { grid-template-columns: minmax(0, 1fr); }
}

/* Banner between 760 and 880px wide (e.g. 1440 screens): art moves to the edge so the title keeps its 2 lines */
@container lp-main (max-width: 880px) {
  .lp-splitbanner { padding-right: 200px; }
  .lp-splitbanner__art { width: 200px; }
  .lp-splitbanner__coins { right: 0; }
  .lp-splitbanner__glow { right: -40px; }
}
/* Banner below the desktop width: logo + slogan, then the text; art stays on the right */
@container lp-main (max-width: 760px) {
  .lp-splitbanner { grid-template-columns: 137.7px minmax(0, 1fr); row-gap: 16px; padding: 22px 230px 24px 24px; }
  .lp-splitbanner__logo { margin-top: 0; align-self: center; }
  .lp-splitbanner__slogan { padding-top: 0; }
  .lp-splitbanner__text { grid-column: 1 / -1; padding-top: 0; }
  .lp-splitbanner__art { top: 50%; bottom: auto; height: 120px; transform: translateY(-50%); }
}
/* Phone: one column, art scaled into the top-right corner, clear of the text */
@container lp-main (max-width: 480px) {
  .lp-splitbanner { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 20px; }
  .lp-splitbanner__logo { justify-self: start; }
  .lp-splitbanner__title { font-size: 18px; }
  .lp-splitbanner__art { top: 0; right: 0; width: 264px; height: 120px; transform: scale(.62); transform-origin: top right; }
  .lp-splitbanner__coins { right: 30px; }
}

/* ===================== Sliders: the site's swiper presets (.slider-container[data-option]) ===================== */
/* On phones the presets show exactly one slide. .lp-peek narrows the slider so a part of the next slide shows at the
   right edge (clipped by the section), otherwise it is not clear the row scrolls. */
@media (max-width: 768px) {
  .lp .lp-peek > .slider-container { width: 84%; margin-left: 0; margin-right: 0; overflow: visible; }
}
/* Before a slider starts. The presets start lazily: the script and the Swiper styles load when the slider comes into
   view. Until then the site's pre-start rule applies (.slider-container .swiper-slide { width: var(--item-size);
   margin-right: var(--gap) }, 100% / 2%): every slide is as wide as the row and the arrows are hidden — then the block
   shrinks and everything below it jumps. The same variables here repeat each preset (config-*.js; Swiper's slide =
   (100% - (n - 1) × gap) / n, gap in % of the row), as v2 does for .clinic-gallery__thumbs. */
.lp .slider-container:is([data-option="case-slider-scroll"], [data-option="lab-slider-scroll"], [data-option="reviews-slider-scroll"], [data-option="awards"], [data-option="clinic-gallery"]) { --item-size: 100%; --gap: 6%; }
.lp .lp-doctors__thumbs { --gap: 12px; } /* clinic-gallery-thumb: spaceBetween 12 */
@media (min-width: 640px) {
  .lp .slider-container:is([data-option="lab-slider-scroll"], [data-option="awards"]) { --item-size: 49%; --gap: 2%; }
}
@media (min-width: 769px) {
  .lp .slider-container:is([data-option="case-slider-scroll"], [data-option="reviews-slider-scroll"]) { --gap: 2%; }
  .lp .slider-container[data-option="awards"] { --item-size: 32%; }
}
@media (min-width: 1025px) {
  .lp .slider-container[data-option="case-slider-scroll"] { --item-size: 49%; }
}
@media (min-width: 1260px) {
  .lp .slider-container[data-option="case-slider-scroll"] { --item-size: 44.364%; } /* 2.2 per view */
  .lp .slider-container[data-option="lab-slider-scroll"] { --item-size: 32%; }
  .lp .slider-container[data-option="awards"] { --item-size: 23.5%; }
}
@media (min-width: 1406px) {
  .lp .slider-container[data-option="reviews-slider-scroll"] { --item-size: 49%; }
}
/* the Swiper styles make every slide a block; until they load the site's .swiper-slide is flex and shrinks the content
   (the gallery photo to 0, the video card to its text) */
.lp .swiper-slide { display: block; }
/* the arrows: the script shows them on start (inline display: flex); on phones the site hides them with !important */
.lp .slider-navigation-wrapper .btn-slider { display: flex; }
.lp .slider-navigation-wrapper > .swiper-scrollbar { min-height: 4px; } /* the Swiper styles give it 4px on start */

/* ===================== Doctors team (Figma 31118:4468; not on v2) ===================== */
/* site slider presets: .lp-doctors__main = clinic-gallery (1 per view), .lp-doctors__thumbs = clinic-gallery-thumb */
.lp-doctors { font-feature-settings: normal; }
.lp .lp-doctors__lead { font-size: 22px; line-height: 1.55; font-weight: 300; color: #252525; }
/* Figma: the photo starts 25px above the grey card (photo 4947, card 4972) — the head rises over its edge.
   So the card is drawn by ::before 25px lower, and the slider (it clips the slides) starts at the top of the head */
.lp-doctors__stage { --lp-head: 25px; position: relative; margin-top: calc(-1 * var(--lp-head)); }
.lp-doctors__stage::before { content: ""; position: absolute; inset: var(--lp-head) 0 0; border-radius: 38px; background: #f9f9fb; }
@media (min-width: 1528px) { .lp-doctors__stage { margin-inline: -64.5px; } } /* the card is container-2xl wide, the title container-xl */
.lp-doctors__main .swiper-slide { height: auto; }
.lp-doctor { position: relative; height: calc(693px + var(--lp-head)); }
.lp-doctor__media { position: absolute; top: 0; right: 170px; bottom: 0; width: 587px; }
.lp-doctor__backdrop { position: absolute; left: 33px; top: calc(96px + var(--lp-head)); width: 553px; height: 553px; max-width: none; }
.lp-doctor__photo { position: absolute; left: 0; top: 0; width: 587px; height: 720px; max-width: none; object-fit: cover; object-position: top; } /* the picture has the Figma proportions (587 x 720, the photo drawn wider than the source) */
.lp-doctor__info { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 657px; padding: calc(55px + var(--lp-head)) 0 0 76px; }
.lp-doctor__name { font-size: 44px; line-height: 1.2; font-weight: 500; letter-spacing: -.44px; color: #2b2e38; }
.lp-doctor__role { margin-top: 25.75px; font-size: 18px; line-height: 1.25; font-weight: 600; text-transform: uppercase; color: rgba(43, 46, 56, .9); opacity: .7; }
.lp-doctor__desc { margin-top: 25.75px; font-size: 20px; line-height: 1.65; color: #252525; }
.lp-doctor__exp { display: flex; align-items: flex-end; gap: 18px; margin-top: 32px; }
.lp-doctor__years { display: flex; flex-direction: column; font-size: 36px; line-height: 1.2; font-weight: 500; letter-spacing: .36px; color: rgba(37, 37, 37, .9); }
.lp-doctor__years span { font-size: 13px; font-weight: 400; letter-spacing: .13px; text-transform: uppercase; }
.lp-doctor__diplomas { display: flex; padding-bottom: 2px; } /* the doctor's own certificates (link to them on the doctor's page) */
.lp-doctor__diplomas img { width: 40px; height: 55px; border: 2.5px solid #fff; border-radius: 3.8px; background: #fff; box-shadow: 0 2.5px 5px rgba(30, 50, 80, .16); object-fit: cover; }
.lp-doctor__diplomas img + img { margin-left: -15.3px; }
.lp-doctor__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp .lp-doctor__cta { width: 380px; height: 56px; padding: 0 20px; border-radius: 20px; }
/* «О враче»: black outline button (the site has only orange/WhatsApp outline ones — same pattern, site .btn base) */
.lp .lp-doctor__about { height: 56px; padding: 0 32px; border-radius: 20px; border-color: #2b2e38; background: transparent; color: #2b2e38; font-weight: 500; transition: background-color .2s, color .2s; }
.lp .lp-doctor__about:hover, .lp .lp-doctor__about:focus-visible { border-color: #2b2e38; background: #2b2e38; color: #fff; }
/* thumbnails over the bottom of the card (Figma: 323 x 90.5, gap 22 = the preset's 12 + 10) */
.lp-doctors__thumbs { position: absolute; z-index: 2; left: 69px; right: 69px; bottom: 56.5px; }
.lp .lp-doctors__thumbs .swiper-slide { width: 333.22px; padding-right: 10px; cursor: pointer; }
.lp-doctor-thumb { display: flex; align-items: center; gap: 11.08px; height: 90.5px; padding: 7.39px; border-radius: 13.85px; background: #fff; box-shadow: 0 0 16.6px rgba(0, 0, 0, .07); transition: background-color .15s; }
.lp .lp-doctors__thumbs .swiper-slide-thumb-active .lp-doctor-thumb { background: rgba(255, 255, 255, .75); box-shadow: none; } /* Figma: the current one is the flat card */
.lp-doctor-thumb__photo { flex: none; width: 75.73px; height: 75.73px; overflow: hidden; border-radius: 9.24px; background: #ededf4; }
.lp-doctor-thumb__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-doctor-thumb__text { display: flex; flex-direction: column; gap: 7.39px; min-width: 0; }
.lp-doctor-thumb__name { font-size: 16.62px; line-height: 1.35; font-weight: 500; letter-spacing: -.17px; color: #252525; }
.lp-doctor-thumb__role { font-size: 12.93px; line-height: 1; color: #787878; }
.lp-doctors__nav { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.lp-doctors__progress { flex: 1 1 auto; height: 4px; border-radius: 2px; background: #e8e8ee; overflow: hidden; }
.lp-doctors__progress span { display: block; width: 20%; height: 100%; border-radius: 2px; background: #2b2e38; transition: width .3s ease; }

@media (max-width: 1279px) {
  .lp-doctor__media { right: 0; width: 46%; clip-path: inset(0 round 0 0 38px 0); } /* the photo reaches the card's rounded bottom-right corner */
  .lp-doctor__backdrop { left: 5%; width: 90%; height: auto; }
  .lp-doctor__photo { width: 100%; }
  .lp-doctor__info { width: 56%; padding: calc(44px + var(--lp-head)) 0 0 40px; }
  .lp-doctor__name { font-size: 36px; }
  .lp-doctor__desc { font-size: 18px; }
  .lp .lp-doctor__cta { width: auto; max-width: 100%; }
  .lp-doctors__thumbs { left: 40px; right: 40px; }
}
/* phones / small tablets: no thumbnails — a row of doctor cards, a part of the next one showing (.lp-peek) */
@media (max-width: 768px) {
  .lp .lp-doctors__lead { font-size: 18px; }
  .lp-doctors__stage { --lp-head: 12px; } /* the head rises 12px over the card, as on desktop (25px of a 720px photo) */
  .lp-doctors__stage::before { content: none; }
  .lp-doctors__thumbs { display: none; }
  .lp-doctor { display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* clips the backdrop circle at the card sides */
  .lp-doctor::before { content: ""; position: absolute; inset: var(--lp-head) 0 0; border-radius: 24px; background: #f9f9fb; }
  .lp-doctor__media { position: relative; right: auto; width: 100%; height: 300px; flex: none; clip-path: none; }
  .lp-doctor__backdrop { left: 50%; top: calc(40px + var(--lp-head)); width: 300px; height: 300px; transform: translateX(-50%); }
  .lp-doctor__photo { left: 50%; top: 0; width: 245px; height: 300px; transform: translateX(-50%); }
  .lp-doctor__info { width: auto; padding: 20px 20px 24px; flex: 1 1 auto; }
  .lp-doctor__name { font-size: 24px; letter-spacing: -.24px; }
  .lp-doctor__role { margin-top: 12px; font-size: 13px; line-height: 1.3; }
  .lp-doctor__desc { margin-top: 12px; font-size: 16px; line-height: 1.5; }
  .lp-doctor__desc br { display: none; }
  .lp-doctor__exp { margin-top: 16px; }
  .lp-doctor__years { font-size: 28px; }
  .lp-doctor__actions { flex-direction: column; gap: 8px; margin-top: auto; }
  .lp .lp-doctor__cta, .lp .lp-doctor__about { width: 100%; height: 52px; border-radius: 16px; }
  .lp-doctor__exp { margin-bottom: 20px; }
}

/* ===================== Clinic gallery (Figma 31119:4818): v2 .clinic-gallery on the site's slider presets ===================== */
/* Figma: 1356 x 600 photo (v2 has 16:9; kept on phones, where it gives a bigger picture) */
@media (min-width: 769px) { .lp .lp-gallery .clinic-gallery__figure { aspect-ratio: 1356 / 600; } }
/* Figma thumbnails are not dimmed; the current one has an orange frame */
.lp .lp-gallery .clinic-gallery__thumbs .swiper-slide::before { content: none; }
.lp .lp-gallery .clinic-gallery__thumbs .swiper-slide-thumb-active { outline: 2px solid #ed5d2b; outline-offset: -2px; }

/* ===================== Crown types (Figma 31122:59276): v2 .crown-types on the site's tabs script ===================== */
/* Phones: no tabs. v2 turned them into an accordion (the active button glued to its card, the other one looking
   disabled at the bottom). Here both kinds are shown as two cards one under the other — short texts, nothing to tap,
   easy to compare. .accordion-off keeps the site's tabs script from moving the cards between the buttons. */
/* card text as in Figma: 28px title, 18px / 1.55 #404040 text (v2's .article gives 26px and #272727) */
.lp .lp-types .article h3 { font-size: 28px; line-height: 34px; color: #272727; }
.lp .lp-types .article p { line-height: 1.55; color: #404040; }
@media (max-width: 640px) {
  .lp .lp-types .article h3 { font-size: 22px; line-height: 28px; }
  .lp .lp-types .crown-types__buttons { display: none; }
  .lp .lp-types .tab-item { display: block; border-radius: 20px; }
  .lp .lp-types .tab-item + .tab-item { margin-top: 12px; }
}

/* ===================== Why us (Figma 31123:68865) ===================== */
.lp-why {
  color: #272727;
  font-feature-settings: normal; /* as in the mockup, see .lp-prices */
}
.lp .lp-why__title { color: #111; letter-spacing: normal; line-height: 1.1; } /* Figma; size and layout from v2 */
.lp-reason {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 27px;
  min-height: 220px; padding: 29px 32px 35px;
}
/* plate with the top-right notch for the badge (Figma boolean shape): 60px corner piece + solid rest.
   On a pseudo-element so the mask does not clip the badge. Inline SVG keeps it working from file:// */
.lp-reason::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 28px 0 28px 28px;
  background: #f9f9fb;
  --notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M0 0H0.26C3.767 0 5.784 4.40731 4.128 7.49843C1.494 12.4145 0 18.0325 0 24C0 43.33 15.67 59 35 59C41.278 59 47.169 57.3463 52.263 54.4514C55.378 52.6809 60 54.706 60 58.2893V60H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--notch) top right / 60px 60px no-repeat, linear-gradient(#000 0 0) left / calc(100% - 60px) 100% no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 60px) no-repeat;
          mask: var(--notch) top right / 60px 60px no-repeat, linear-gradient(#000 0 0) left / calc(100% - 60px) 100% no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 60px) no-repeat;
}
.lp-reason__title { max-width: 329px; padding-right: 8px; font-size: 31px; line-height: 1.2; font-weight: 600; color: #272727; }
.lp-reason__title--wide { max-width: 335px; }
.lp-reason__text { max-width: 375px; font-size: 18px; line-height: 1.5; color: #404040; }
.lp-reason__badge { position: absolute; top: 0; right: 0; width: 49px; height: 49px; }

@media (max-width: 1279px) {
  .lp-reason { padding: 26px 24px 28px; }
  .lp-reason__title { max-width: calc(100% - 56px); font-size: 26px; }
  .lp-reason__text { font-size: 16px; }
}
@media (max-width: 768px) {
  .lp-reason { min-height: 0; }
  .lp-reason__title { max-width: 520px; }
  .lp-reason__text { max-width: 520px; }
}
@media (max-width: 640px) {
  .lp-reason { gap: 16px; padding: 22px 20px 24px; }
  .lp-reason::before { border-radius: 22px 0 22px 22px; }
  .lp-reason__title { max-width: calc(100% - 52px); font-size: 22px; }
}

/* ===================== Article author (Figma 31217:19534): v2 .author-badge ===================== */
/* v2 turns the link orange on hover: 3.1:1 on the grey plate. Here the text stays dark and gets underlined, the arrow turns orange */
@media (hover: hover) {
  .lp .author-badge__certs:hover { color: #2b303b; }
  .lp .author-badge__certs:hover > span { text-decoration: underline; text-underline-offset: 3px; }
  .lp .author-badge__certs:hover > i { color: #ed5d2b; }
}

/* ===================== Media and awards (Figma 31258:5418 / 31258:5482; not on v2) ===================== */
/* v2 skeleton (gray section-card, grid-section) and the site's slider presets; cards as in Figma */
.lp .lp-section-desc { max-width: 1080px; font-size: 20px; line-height: 1.55; color: #252525; }
/* Figma: the button sits on the description line, centred on it (31px line) */
@media (min-width: 1025px) {
  .lp .lp-media .grid-section-button { align-self: end; }
  .lp .lp-media .grid-section-button .btn { margin-top: 0; translate: 0 calc(50% - 15.5px); } /* translate, not transform: the site btn may animate transform */
}
.lp-progress { flex: 1 1 auto; height: 4px; border-radius: 2px; background: #e3e3eb; overflow: hidden; }
.lp-progress span { display: block; width: 25%; height: 100%; border-radius: 2px; background: #2b2e38; transition: width .3s ease; }

.lp .lp-video { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 16px 44px rgba(79, 76, 204, .07); color: #272727; }
.lp .lp-video:hover { color: #272727; } /* the card is a link: the text keeps its colour, only the play button reacts */
.lp-video__cover { position: relative; display: block; aspect-ratio: 666 / 375; background: #2b2e38; }
.lp-video__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-video__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 32px; background: #2b2e38 url("/lp/img/media/play.svg") 50% 50% / 20px 24px no-repeat; transition: background-color .2s; }
.lp-video:hover .lp-video__play, .lp-video:focus-visible .lp-video__play { background-color: #ed5d2b; }
.lp-video__text { display: flex; flex-direction: column; gap: 8px; padding: 24px 28px; }
.lp-video__cat { font-size: 14px; line-height: 18px; color: #7e8196; }
.lp-video__title { min-height: 60px; font-size: 24px; line-height: 30px; font-weight: 600; }

.lp-award { display: flex; flex-direction: column; height: 100%; padding: 24px; border-radius: 28px; background: #fff; box-shadow: 0 16px 22px rgba(79, 76, 204, .07); }
.lp-award__doc { position: relative; display: block; aspect-ratio: 273 / 276; }
.lp-award__doc img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; } /* absolute: the picture never stretches the box */
.lp-award__title { display: block; min-height: 52px; margin-top: 20px; font-size: 22px; line-height: 26px; font-weight: 600; color: #272727; }
.lp-award__desc { display: block; min-height: 48px; margin-top: 8px; font-size: 16px; line-height: 24px; color: #404040; }

/* tablets: the site preset shows one video per view up to 1405px (a ~900px card, nothing hints at the next one) —
   the slider is narrowed so a part of the next video shows, as on phones (.lp-peek) */
@media (min-width: 769px) and (max-width: 1405px) {
  .lp .lp-media .lp-peek { overflow: hidden; }
  .lp .lp-media .lp-peek > .slider-container { width: 62%; margin-left: 0; margin-right: 0; overflow: visible; }
}
@media (max-width: 1024px) {
  .lp .lp-section-desc { font-size: 18px; }
}
@media (max-width: 640px) {
  .lp .lp-section-desc { font-size: 16px; line-height: 1.5; }
  .lp .lp-video { border-radius: 22px; }
  .lp-video__play { width: 52px; height: 52px; margin: -26px 0 0 -26px; background-size: 16px 19px; }
  .lp-video__text { gap: 6px; padding: 16px 20px 20px; }
  .lp-video__cat { font-size: 13px; }
  .lp-video__title { min-height: 48px; font-size: 18px; line-height: 24px; }
  .lp-award { padding: 16px; border-radius: 22px; }
  .lp-award__title { min-height: 44px; margin-top: 16px; font-size: 18px; line-height: 22px; }
  .lp-award__desc { min-height: 40px; font-size: 14px; line-height: 20px; }
}

/* ===================== Implant systems (Figma 31126:69344; the implant page, CustomPageServiceImplantPodKlyuch.tpl) ===================== */
/* v2 skeleton (gray section-card, grid-section) and the site's lab-slider-scroll preset: 3 cards from 1260px — all of them
   on screen, so the arrows and the scrollbar are not shown there (Figma has none) */
.lp-implants { font-feature-settings: normal; } /* as in the mockup, see .lp-prices */
.lp .lp-implants__lead { max-width: none; font-size: 22px; line-height: 31px; color: #666673; }
.lp-implant { display: flex; flex-direction: column; gap: 24px; height: 100%; padding: 28px; border-radius: 28px; background: #fff; box-shadow: 0 16px 22px rgba(79, 76, 204, .07); color: #111; }
.lp-implant__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lp-implant__country { font-size: 16px; line-height: 22px; color: #666673; }
.lp .lp-implant__brand { margin-top: 8px; font-size: 40px; line-height: 56px; font-weight: 600; color: #111; }
.lp-implant__flag { flex: none; width: 44px; height: 30px; }
/* the implant over a soft grey glow (Figma: 380 x 174 ellipse, 100px below the picture's top) */
.lp-implant__media { display: flex; justify-content: center; height: 289px; background: url("/lp/img/implants/glow.svg") 50% 100px / 100% 174px no-repeat; }
.lp-implant__photo { display: block; width: 257px; height: 289px; object-fit: contain; }
.lp-implant__includes-title { font-size: 20px; line-height: 28px; font-weight: 600; }
.lp-implant__list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.lp-implant__list li { display: flex; gap: 10px; font-size: 18px; line-height: 25px; }
.lp-implant__list li::before { content: ""; flex: none; width: 18px; height: 24px; background: url("/lp/img/implants/check.svg") center / contain no-repeat; }
.lp-implant__price { padding-top: 24px; border-top: 1px solid #f6f6f8; }
.lp-implant__price-label, .lp-implant__split { font-size: 16px; line-height: 22px; color: #666673; }
.lp-implant__cost { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; margin-top: 6px; }
.lp-implant__now { font-size: 38px; line-height: 53px; font-weight: 600; white-space: nowrap; }
.lp-implant__old { font-size: 18px; line-height: 25px; color: #666673; white-space: nowrap; }
.lp-implant__split { margin-top: 6px; }
.lp-implant__actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.lp .lp-implant__btn { width: 100%; height: 56px; padding: 0 20px; border-radius: 20px; font-size: 18px; }
.lp .lp-implant__btn.btn--primary { font-weight: 600; }
.lp-implants__note { margin-top: 32px; font-size: 16px; line-height: 22px; color: #9b9bb1; opacity: .7; }
@media (min-width: 1260px) {
  .lp .lp-implants .slider-navigation-wrapper { display: none; }
}
@media (max-width: 1024px) {
  .lp .lp-implants__lead { font-size: 18px; line-height: 1.5; }
}
@media (max-width: 640px) {
  .lp .lp-implants__lead { font-size: 16px; }
  .lp-implant { gap: 20px; padding: 20px; border-radius: 22px; }
  .lp .lp-implant__brand { margin-top: 4px; font-size: 30px; line-height: 38px; }
  .lp-implant__media { height: 220px; background-position: 50% 76px; background-size: 100% 132px; }
  .lp-implant__photo { width: 196px; height: 220px; }
  .lp-implant__includes-title { font-size: 18px; line-height: 24px; }
  .lp-implant__list { gap: 8px; }
  .lp-implant__list li { font-size: 16px; line-height: 22px; }
  .lp-implant__list li::before { height: 22px; }
  .lp-implant__price { padding-top: 20px; }
  .lp-implant__now { font-size: 30px; line-height: 40px; }
  .lp-implant__old { font-size: 16px; }
  .lp .lp-implant__btn { height: 52px; border-radius: 16px; font-size: 16px; }
  .lp-implants__note { margin-top: 20px; font-size: 13px; line-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp .btn-cta__arr-wrapper, .lp .prices-card__arr, .lp .lp-anchors__link, .lp-video__play, .lp-progress span, .lp .lp-doctor__about { transition: none; }
}