/* ============================================================
   MedHome — shared stylesheet
   Hebrew RTL · light theme · "clean air" premium medical
   Fonts: Secular One (display) + Heebo (body) via Google Fonts
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --brand: #00b1f1;
  --brand-deep: #0296cc;
  /* AA-safe cyan for small text on white (eyebrows, links, active states) */
  --brand-ink: #026e9e;
  --ink: #08344f;
  --ink-soft: #3d5c72;
  --bg: #ffffff;
  --sky: #eefaff;
  --sky-2: #dff4fe;
  --line: #d9ecf5;
  --navy: #062a42;
  --navy-2: #0a3e5e;
  --wa: #25d366;
  --sun: #ffb628;

  --font-display: 'Rubik', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Rubik', -apple-system, 'Segoe UI', sans-serif;

  --radius: 26px;
  --radius-sm: 18px;
  --shadow-soft: 0 20px 60px rgba(2, 105, 150, 0.10);
  --shadow-lift: 0 28px 70px rgba(2, 105, 150, 0.17);
  --container: 1160px;
  --sec-pad: clamp(56px, 7vw, 96px);
  --header-h: 74px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
}

ul[class], ol[class] {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-ink);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection {
  background: var(--sky-2);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid rgba(0, 177, 241, 0.6);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -60px;
  inset-inline-start: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: min(100% - 44px, var(--container));
  margin-inline: auto;
}

/* ---------- Typography helpers ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.h-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.55rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.h-card {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--ink);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sky);
  border: 1px solid var(--sky-2);
  color: var(--brand-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 177, 241, 0.18);
}

.accent {
  color: var(--brand-deep);
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding-block: var(--sec-pad);
}

/* Two neighbouring sections each contributed a full pad, so the seam between
   them was double-height and read as a hole. One gap = the previous section's
   bottom padding. The solid dark band is the exception at both of its edges:
   its own top padding is inside the tint, and the section after it needs a real
   gap because the band's padding ends with its background. */
.section + .section:not(.price-band) {
  padding-block-start: 0;
}

.price-band + .section {
  padding-block-start: var(--sec-pad);
}

.section--tight {
  padding-block: clamp(44px, 6vw, 72px);
}

.section-head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 6vw, 64px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.section-head p {
  max-width: 620px;
  font-size: 1.06rem;
}

.wash {
  background: linear-gradient(180deg, rgba(238, 250, 255, 0) 0%, var(--sky) 16%, var(--sky) 84%, rgba(238, 250, 255, 0) 100%);
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* ---------- Icons ---------- */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.btn .icon {
  width: 20px;
  height: 20px;
}

.btn__arrow {
  transition: transform 0.25s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(-4px);
}

.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
  box-shadow: 0 14px 34px rgba(6, 42, 66, 0.24);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(2, 150, 204, 0.32);
}

.btn--ghost {
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: 0 10px 26px rgba(2, 105, 150, 0.07);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--sky-2);
  box-shadow: var(--shadow-soft);
}

.btn--ghost .icon {
  color: var(--wa);
}

.btn--wa {
  color: #073042;
  background: var(--wa);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.32);
}

.btn--wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(37, 211, 102, 0.42);
}

.btn--light {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0, 177, 241, 0.35);
}

.btn--sm {
  padding: 12px 22px;
  font-size: 16px;
}

.btn--lg {
  padding: 18px 38px;
  font-size: 1.08rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--brand-ink);
}

.link-arrow .icon {
  width: 19px;
  height: 19px;
  transition: transform 0.25s ease;
}

.link-arrow:hover .icon {
  transform: translateX(-4px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Glass blur lives on a pseudo-element: backdrop-filter on the header itself
   would make it the containing block for the fixed-position .mobile-nav. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 40px rgba(2, 105, 150, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.logo img {
  width: 152px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}

/* Hairline separators: without them the items ran together at this size. */
.site-nav .nav-link + .nav-link {
  position: relative;
  margin-inline-start: 14px;
}

.site-nav .nav-link + .nav-link::before {
  content: '';
  position: absolute;
  inset-inline-start: -8px;
  top: 50%;
  height: 15px;
  margin-top: -7px;
  border-inline-start: 1px solid var(--line);
}

.nav-link {
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 600;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link:hover {
  color: var(--ink);
  background: var(--sky);
}

.nav-link[aria-current="page"] {
  color: var(--brand-ink);
  background: var(--sky);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.site-nav + .header-actions {
  margin-inline-start: 0;
}

.wa-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.14);
  color: #128c4b;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.wa-round:hover {
  transform: translateY(-2px);
  background: rgba(37, 211, 102, 0.24);
}

.wa-round .icon {
  width: 22px;
  height: 22px;
}

/* Burger */
.burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--sky);
  flex: none;
}

.burger span {
  position: absolute;
  inset-inline: 13px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }

.burger[aria-expanded="true"] span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

/* Mobile nav */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: 18px 22px calc(28px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.mobile-nav a.m-link {
  padding: 16px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.mobile-nav a.m-link[aria-current="page"] {
  color: var(--brand-ink);
}

.mobile-nav__cta {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

body.nav-open {
  overflow: hidden;
}

/* ---------- Sticky bottom CTA (mobile) ---------- */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 34px rgba(2, 105, 150, 0.10);
}

/* Two pills share one phone-wide row, and the right one carries the price, so
   the WhatsApp label was being squeezed out. It gets only the width it needs;
   the CTA takes the rest, and both scale their text down with the viewport. */
.sticky-cta .btn {
  padding: 14px 12px;
  font-size: clamp(0.9rem, 3.6vw, 1rem);
  white-space: nowrap;
  min-width: 0;
}

.sticky-cta .btn--wa {
  flex: 0 1 auto;
}

.sticky-cta .btn--primary {
  flex: 1 1 auto;
}

@media (max-width: 860px) {
  .sticky-cta {
    display: flex;
    /* JS reveals the bar once the hero is scrolled past (see app.js) */
    transform: translateY(120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }

  .sticky-cta.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* No JS: never hide the bar behind a class that will never be added */
  html:not(.js) .sticky-cta {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  body {
    padding-bottom: 78px;
  }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 92px) clamp(64px, 9vw, 110px);
  overflow: clip;
}

.hero__glow-1,
.hero__glow-2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

.hero__glow-1 {
  width: 560px;
  height: 560px;
  inset-inline-end: -180px;
  top: -220px;
  background: radial-gradient(circle, rgba(0, 177, 241, 0.16) 0%, rgba(0, 177, 241, 0) 70%);
}

.hero__glow-2 {
  width: 480px;
  height: 480px;
  inset-inline-start: -160px;
  bottom: -200px;
  background: radial-gradient(circle, rgba(2, 150, 204, 0.13) 0%, rgba(2, 150, 204, 0) 70%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero__copy {
  display: grid;
  gap: 18px;
  justify-items: start;
}

/* justify-items:start sizes every child to its max-content width, so a long
   headline shot past the column and over the artwork. */
.hero__copy > * {
  max-width: 100%;
}

/* Give the offer block room to breathe — at an even 18px rhythm the headline,
   text, price and buttons read as one wall. */
.hero--offer .hero__copy {
  gap: 28px;
}

.hero--offer .hero__sub {
  margin-block-start: -4px;
}

.hero--offer .hero__note {
  margin-block-start: -8px;
}

/* The headline now carries the price, so it runs much longer than the old one:
   cap its size and widen its column, otherwise it wraps to four lines and pushes
   the CTA below the fold on a 900px-tall laptop. */
/* Desktop only: below 980px the shared rule collapses the hero to one column,
   and this override must not resurrect the two-track grid there. minmax(0,…)
   keeps the photo's min-content width from blowing the tracks past the container. */
@media (min-width: 981px) {
  .hero--offer .hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  }
}

/* Must out-specify the html[lang="ru"] display sizing below. */
.hero--offer .h-display,
html[lang="ru"] .hero--offer .h-display {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  /* splits each sentence evenly instead of leaving one word on its own line */
  text-wrap: balance;
}

.hero--offer .hero__sub {
  max-width: 620px;
  font-size: 1.06rem;
}

.hero__copy .h-display strong {
  font-weight: inherit;
  color: var(--brand-deep);
}

.hero__sub {
  max-width: 560px;
  font-size: 1.13rem;
  line-height: 1.7;
  /* evens out the line lengths so no stub line is left at the end */
  text-wrap: balance;
}

.hero__cta {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 6px;
}

/* The two hero CTAs must read as one row; trim their padding so the pair
   fits the copy column instead of wrapping. */
.hero__cta .btn--lg {
  padding-inline: 26px;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(2, 105, 150, 0.06);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.chip .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-deep);
}

/* Hero visual */
.hero__visual {
  position: relative;
  justify-self: center;
  width: min(100%, 500px);
}

.arch {
  position: relative;
  aspect-ratio: 0.86;
  border-radius: 999px 999px 34px 34px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-2), var(--sky));
  box-shadow: var(--shadow-soft);
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}

.hero__ring {
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  inset-inline-start: -70px;
  top: 30px;
  border: 2px dashed var(--sky-2);
  border-radius: 50%;
}

.hero__dot {
  position: absolute;
  z-index: -1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sun);
  inset-inline-end: 6px;
  top: 44px;
  box-shadow: 0 8px 20px rgba(255, 182, 40, 0.5);
}

.glass-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 40px rgba(2, 105, 150, 0.16);
}

.glass-card .icon {
  width: 26px;
  height: 26px;
  color: var(--brand-deep);
}

.glass-card b {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.glass-card span {
  display: block;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* Four facts ringing the artwork. The illustration keeps its top strip empty and
   the faces sit centre-right, so the two small cards take the top corners and the
   wider ones hug the left torso / bottom right — nothing lands on a face. */
.glass-card--1 {
  top: 7%;
  inset-inline-end: -6%;
}

.glass-card--2 {
  top: 44%;
  inset-inline-start: -11%;
}

.glass-card--3 {
  bottom: 5%;
  inset-inline-end: -4%;
}

.glass-card--4 {
  top: 7%;
  inset-inline-start: -8%;
}

/* The cards mirror with the layout but the artwork does not, so in RTL the
   open side of the illustration would end up under a card. Flip the drawing
   too (no text in it) to keep the same card-to-subject relationship. */
[dir="rtl"] .arch img {
  transform: scaleX(-1);
}

/* ---------- Kupot strip ---------- */
.kupot {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--sky) 160%);
}

.kupot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 26px;
  padding-block: 26px;
}

.kupot__label {
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 600;
}

.kupot__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 32px;
}

/* Real fund logos: normalise them optically — capping height alone would let the
   short-and-wide marks (Meuhedet) dwarf the tall ones. */
.kupa {
  width: auto;
  height: auto;
  max-height: 30px;
  max-width: 124px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.25s ease;
}

.kupa:hover {
  opacity: 1;
}

/* ---------- Steps ---------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.steps::before {
  content: '';
  position: absolute;
  top: 33px;
  inset-inline: 11%;
  border-top: 2px dashed #b9dff2;
}

.step {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 0 6px;
}

.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  box-shadow: 0 12px 28px rgba(2, 150, 204, 0.35), 0 0 0 8px #fff;
}

.step .icon {
  width: 30px;
  height: 30px;
  color: var(--brand-deep);
}

.step h3 {
  font-size: 1.13rem;
  font-weight: 800;
  color: var(--ink);
}

.step p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 250px;
}

/* ---------- Bento services ---------- */
.bento {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  grid-auto-rows: 1fr;
  gap: 22px;
}

.bento-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 44px rgba(2, 105, 150, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.bento-card__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--sky);
  color: var(--brand-deep);
}

.bento-card__icon .icon {
  width: 32px;
  height: 32px;
}

.bento-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
}

.bento-card p {
  font-size: 1rem;
  line-height: 1.65;
}

.bento-card--main {
  position: relative;
  isolation: isolate;
  grid-row: 1 / 3;
  justify-content: flex-end;
  min-height: 380px;
  overflow: hidden;
  border: 0;
  background: linear-gradient(168deg, #015d85 0%, #027db3 52%, #0296cc 100%);
  color: #fff;
}

.bento-card--main::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 42, 66, 0.04) 12%, rgba(6, 42, 66, 0.64) 58%, rgba(6, 42, 66, 0.96) 100%),
    linear-gradient(90deg, rgba(6, 42, 66, 0.38), rgba(6, 42, 66, 0.04) 72%);
}

.bento-card--main::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 210px;
  height: 210px;
  inset-inline-start: -60px;
  bottom: -80px;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.bento-card__photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 46%;
  transition: transform 0.6s ease;
}

.bento-card--main:hover .bento-card__photo {
  transform: scale(1.025);
}

.bento-card--main > :not(.bento-card__photo) {
  z-index: 2;
}

.bento-card--main .bento-card__icon {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.bento-card--main h3 {
  position: relative;
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-family: var(--font-display);
  font-weight: 400;
}

.bento-card--main p {
  position: relative;
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.06rem;
  max-width: 400px;
}

.bento-card--main .bento-badge {
  position: relative;
  align-self: start;
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

/* ---------- Visit tabs ---------- */
.visit-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-inline: auto;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(2, 105, 150, 0.07);
}

.visit-tab {
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.visit-tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
  color: #fff;
  box-shadow: 0 10px 24px rgba(6, 42, 66, 0.28);
}

.visit-panels {
  margin-top: 34px;
}

.visit-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.visit-panel[hidden] {
  display: none;
}

.visit-item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(2, 105, 150, 0.06);
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  animation: visit-in 0.45s ease backwards;
}

.visit-item .icon {
  width: 26px;
  height: 26px;
  color: var(--brand-deep);
}

.visit-item:nth-child(2) { animation-delay: 0.05s; }
.visit-item:nth-child(3) { animation-delay: 0.1s; }
.visit-item:nth-child(4) { animation-delay: 0.15s; }
.visit-item:nth-child(5) { animation-delay: 0.2s; }
.visit-item:nth-child(6) { animation-delay: 0.25s; }

@keyframes visit-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visit-item {
    animation: none;
  }
}

.visit-note {
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  color: var(--ink-soft);
}

/* ---------- Audience cards ---------- */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.aud-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 26px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 44px rgba(2, 105, 150, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aud-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.aud-card__art {
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 27%),
    linear-gradient(160deg, var(--sky) 0%, var(--sky-2) 100%);
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.aud-card__art svg {
  width: min(100%, 300px);
  height: auto;
}

.aud-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(0.99);
  transition: transform 0.55s ease;
}

.aud-card:hover .aud-card__art img {
  transform: scale(1.035);
}

.aud-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 6px;
  color: var(--ink);
  font-size: 1.28rem;
  font-weight: 800;
}

.aud-card h3 .icon {
  width: 22px;
  height: 22px;
  color: var(--brand-deep);
  transition: transform 0.25s ease;
}

.aud-card:hover h3 .icon {
  transform: translateX(-5px);
}

.aud-card p {
  padding-inline: 6px;
  font-size: 1rem;
}

/* ---------- Price band ---------- */
.price-band {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(ellipse 70% 90% at 82% 10%, rgba(0, 177, 241, 0.26) 0%, rgba(0, 177, 241, 0) 55%),
    radial-gradient(ellipse 60% 80% at 12% 95%, rgba(2, 150, 204, 0.22) 0%, rgba(2, 150, 204, 0) 55%),
    linear-gradient(150deg, var(--navy) 20%, var(--navy-2) 100%);
  color: #fff;
  text-align: center;
}

.price-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 0%, transparent 75%);
}

.price-band__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.price-band .eyebrow {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  color: #9fdcf5;
}

.price-band h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: #fff;
}

.price-figure {
  display: flex;
  align-items: baseline;
  gap: 14px;
  line-height: 1;
}

.price-figure__amount {
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 8.5rem);
  color: #fff;
  text-shadow: 0 0 60px rgba(0, 177, 241, 0.55);
}

.price-figure__currency {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  color: var(--brand);
}

.price-figure__period {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.price-ticks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  max-width: 640px;
  margin-top: 6px;
}

.price-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.price-ticks .icon {
  width: 22px;
  height: 22px;
  color: var(--brand);
}

.price-band .btn {
  margin-top: 14px;
}

.price-band__note {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 8px 26px rgba(2, 105, 150, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item.is-open {
  border-color: var(--sky-2);
  box-shadow: var(--shadow-soft);
}

.faq-q {
  margin: 0;
}

.faq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 19px 22px;
  text-align: start;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
}

.faq-btn__chev {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--sky);
  color: var(--brand-ink);
  transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.faq-btn__chev .icon {
  width: 17px;
  height: 17px;
}

.faq-item.is-open .faq-btn__chev {
  transform: rotate(180deg);
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  color: #fff;
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.faq-a__inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0.4s;
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-item.is-open .faq-a__inner {
  visibility: visible;
}

.faq-a p {
  padding: 0 22px 22px;
  font-size: 1rem;
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .faq-a,
  .faq-a__inner {
    transition: none;
  }
}

/* ---------- About teaser ---------- */
.teaser {
  position: relative;
  overflow: clip;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--sky) 0%, #fff 70%);
  border: 1px solid var(--line);
  padding: clamp(30px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: 30px;
}

.teaser__copy {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.teaser__mark {
  justify-self: center;
  width: min(100%, 220px);
  opacity: 0.9;
}

/* ---------- Lead section ---------- */
.lead-section {
  position: relative;
}

/* The form follows the dark price band and rides up onto it, so the offer and
   the action read as one object instead of two stacked blocks. */
.lead-section--overlap {
  padding-block-start: 0;
  margin-block-start: clamp(-190px, -13vw, -104px);
  z-index: 2;
}

.lead-section--overlap .lead-card {
  box-shadow: 0 34px 80px rgba(6, 42, 66, 0.22);
}

/* The dark band keeps its own bottom padding plus room for the overlap. */
.price-band:has(+ .lead-section--overlap) {
  padding-block-end: calc(var(--sec-pad) + clamp(104px, 13vw, 190px));
}

.lead-card {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: 32px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.lead-card__copy {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.lead-card__copy p {
  font-size: 1.05rem;
  max-width: 440px;
}

.lead-points {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.lead-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
}

.lead-points .icon {
  width: 22px;
  height: 22px;
  color: var(--brand-deep);
}

.lead-card__form {
  padding: clamp(22px, 3vw, 34px);
  border-radius: 24px;
  background: linear-gradient(170deg, var(--sky) 0%, #f6fcff 100%);
  border: 1px solid var(--sky-2);
}

.lead-form {
  display: grid;
  gap: 14px;
}

.input {
  width: 100%;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input::placeholder {
  color: #7d99ab;
}

.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 177, 241, 0.16);
}

.terms {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.terms a {
  color: var(--brand-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.submit {
  width: 100%;
  padding: 17px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(6, 42, 66, 0.24);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(2, 150, 204, 0.32);
}

.submit:disabled {
  opacity: 0.6;
  transform: none;
  cursor: wait;
}

.alt-contact {
  margin-top: 18px;
}

.alt-contact__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #7d99ab;
  font-size: 16px;
  font-weight: 600;
}

.alt-contact__divider::before,
.alt-contact__divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--sky-2);
}

.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(37, 211, 102, 0.5);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.whatsapp-btn:hover {
  transform: translateY(-2px);
  border-color: var(--wa);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.22);
}

.whatsapp-btn .icon {
  width: 22px;
  height: 22px;
  color: #1faa59;
  flex: none;
}

/* On a phone the label was breaking into two lines inside the pill. Trim the
   padding, gap and icon and scale the label with the viewport so it stays on
   one line down to the narrowest phone. */
@media (max-width: 480px) {
  .whatsapp-btn {
    gap: 9px;
    padding: 14px 12px;
    font-size: clamp(0.86rem, 3.9vw, 1rem);
    line-height: 1.2;
    white-space: nowrap;
  }

  .whatsapp-btn .icon {
    width: 19px;
    height: 19px;
  }
}

.alt-contact__note {
  margin-top: 12px;
  text-align: center;
  font-size: 16px;
  color: var(--ink-soft);
}

/* Thank-you */
.thank-you {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding-block: 26px;
}

/* display:grid above would defeat the hidden attribute without this guard */
.thank-you[hidden] {
  display: none;
}

.thank-you__icon {
  width: 74px;
  height: 74px;
  color: var(--brand-deep);
}

.thank-you h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--ink);
}

.thank-you p {
  font-size: 1.04rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(160deg, var(--navy) 30%, var(--navy-2) 100%);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(52px, 7vw, 80px) 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}

.footer-brand {
  display: grid;
  gap: 16px;
  align-content: start;
  justify-items: start;
}

.footer-brand img {
  width: 168px;
}

.footer-brand p {
  max-width: 320px;
  font-size: 16px;
  line-height: 1.7;
}

.footer-title {
  margin-bottom: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.footer-links {
  display: grid;
  gap: 9px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
}

.footer-wa .icon {
  width: 22px;
  height: 22px;
  color: var(--wa);
}

.footer-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 44px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.footer-disclaimer .icon {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--sun);
}

.footer-disclaimer strong {
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.footer-bottom a:hover {
  color: #fff;
}

/* ---------- Sub-page hero ---------- */
.page-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(44px, 6.5vw, 84px) clamp(56px, 8vw, 96px);
}

.page-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}

.page-hero__copy {
  display: grid;
  gap: 20px;
  justify-items: start;
}

.page-hero__copy .h-display {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
}

.page-hero__sub {
  max-width: 540px;
  font-size: 1.1rem;
  line-height: 1.7;
}

.page-hero__art {
  position: relative;
  justify-self: center;
  width: min(100%, 520px);
  padding: clamp(20px, 3vw, 36px);
  border-radius: 42% 58% 52% 48% / 46% 44% 56% 54%;
  background: linear-gradient(160deg, var(--sky) 0%, var(--sky-2) 100%);
  box-shadow: var(--shadow-soft);
}

.page-hero__art > svg {
  width: 100%;
  height: auto;
}

.page-hero__art--photo {
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.page-hero__art--photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 42px 42px 24px 24px;
  box-shadow: var(--shadow-soft);
}

.page-hero .hero__ring {
  inset-inline-start: auto;
  inset-inline-end: -60px;
  top: -40px;
}

/* ---------- Situations row ---------- */
.sit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 18px;
}

.sit-card {
  display: grid;
  gap: 10px;
  padding: 24px 22px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(2, 105, 150, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.sit-card .icon {
  width: 30px;
  height: 30px;
  color: var(--brand-deep);
}

.sit-card h3 {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ink);
}

.sit-card p {
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Benefits list ---------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 26px;
  max-width: 880px;
  margin-inline: auto;
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 1rem;
  color: var(--ink-soft);
}

.benefit .icon {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  color: var(--brand-deep);
}

.benefit strong {
  color: var(--ink);
}

/* Callout (e.g. seniors: kids can subscribe for parents) */
.callout {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 34px auto 0;
  padding: 20px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 182, 40, 0.12), rgba(255, 182, 40, 0.05));
  border: 1px solid rgba(255, 182, 40, 0.4);
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 600;
}

.callout .icon {
  width: 30px;
  height: 30px;
  flex: none;
  color: #d98f00;
}

/* ---------- About page ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stat {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  padding: 26px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(2, 105, 150, 0.06);
}

.stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--brand-deep);
}

.stat span {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
}

.about-story {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.about-story__copy {
  display: grid;
  gap: 16px;
}

.about-story__copy p {
  font-size: 1.06rem;
  line-height: 1.75;
}

.about-story__photo {
  border-radius: 999px 999px 30px 30px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.about-story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 48%;
  aspect-ratio: 0.9;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.value-card {
  display: grid;
  gap: 10px;
  padding: 24px 20px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
}

.value-card .icon {
  width: 30px;
  height: 30px;
  color: var(--brand-deep);
}

.value-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.value-card p {
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Legal (privacy) ---------- */
.legal-wrap {
  max-width: 780px;
  margin-inline: auto;
}

.legal-card {
  padding: clamp(28px, 4.5vw, 48px);
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.legal-card h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--ink);
  text-align: center;
}

.legal-updated {
  margin-top: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #7d99ab;
}

.legal-divider {
  margin: 26px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.legal-body {
  font-size: 1rem;
  line-height: 1.75;
}

.legal-body p {
  margin-bottom: 14px;
}

.legal-body h2 {
  margin: 26px 0 8px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

.legal-lead {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.legal-contact {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--sky);
  border: 1px solid var(--sky-2);
  color: var(--ink);
  font-weight: 600;
}

.legal-contact a {
  font-weight: 800;
}

/* ---------- Reveal on scroll — switched off ----------
   Blocks now render immediately; the .reveal class is left on the markup so
   nothing else has to change. */

@media (prefers-reduced-motion: reduce) {

  .btn,
  .bento-card,
  .aud-card,
  .sit-card,
  .submit {
    transition: none;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .site-nav {
    display: none;
  }

  .site-nav + .header-actions {
    margin-inline-start: auto;
  }

  .burger {
    display: block;
  }
}

@media (min-width: 1041px) {
  .mobile-nav {
    display: none;
  }
}

@media (max-width: 980px) {
  .hero__grid,
  .page-hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__copy,
  .page-hero__copy {
    justify-items: center;
    text-align: center;
  }

  .hero__sub,
  .page-hero__sub {
    margin-inline: auto;
  }

  .hero__cta,
  .hero__chips {
    justify-content: center;
  }

  .hero__visual {
    width: min(100%, 460px);
  }

  .arch {
    aspect-ratio: 1.15;
  }

  .glass-card--2 {
    inset-inline-start: -2%;
  }

  .glass-card--1 {
    inset-inline-end: -2%;
  }

  .teaser {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .teaser__copy {
    justify-items: center;
  }

  .about-story {
    grid-template-columns: 1fr;
  }

  .about-story__photo {
    max-width: 480px;
    margin-inline: auto;
  }

  .about-story__photo img {
    aspect-ratio: 1.2;
  }
}

@media (max-width: 1000px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 20px;
  }

  .steps::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .bento-card--main {
    grid-row: auto;
    min-height: 300px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .stat-band,
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .benefits {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .aud-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  :root {
    --header-h: 64px;
  }

  .logo img {
    width: 132px;
  }

  .header-actions .btn {
    display: none;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .step {
    grid-template-columns: 66px 1fr;
    justify-items: start;
    text-align: start;
    gap: 4px 18px;
    padding: 0 0 30px;
  }

  .step__num {
    grid-row: 1 / 4;
  }

  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-start: 32px;
    top: 74px;
    bottom: 6px;
    border-inline-start: 2px dashed #b9dff2;
  }

  .step .icon {
    display: none;
  }

  .step p {
    max-width: none;
  }

  .lead-card {
    grid-template-columns: 1fr;
  }

  .price-ticks {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 10px;
    text-align: start;
  }

  .visit-tabs {
    width: 100%;
  }

  .visit-tab {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
  }

  .visit-item {
    width: 100%;
    justify-content: flex-start;
  }

}

/* Floating the cards over the artwork only works while the hero is two columns
   and there is room to either side. Once it collapses to one column they clip
   against the screen edges and land on the faces, so they leave the image and
   become a 2×2 fact grid beneath it. */
@media (max-width: 980px) {
  .hero__visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .arch {
    grid-column: 1 / -1;
    aspect-ratio: 0.95;
  }

  .hero__ring,
  .hero__dot {
    display: none;
  }

  .glass-card {
    position: static;
    display: flex;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line);
    box-shadow: 0 8px 22px rgba(2, 105, 150, 0.08);
  }
}

@media (max-width: 480px) {
  .wa-round {
    display: none;
  }

  .hero__cta {
    width: 100%;
    flex-direction: column;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .stat-band,
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   i18n — language switcher + RU (LTR) version
   Everything below supports the Russian mirror in /ru/.
   ============================================================ */

/* ---------- Language switcher (footer pill) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex: none;
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 7px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

a.lang-switch__item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.lang-switch__item.is-active {
  background: #fff;
  color: var(--navy);
}

.lang-switch--footer {
  margin-top: 26px;
}

/* ---------- LTR directional fixes ---------- */
/* The stylesheet is almost fully logical-property based, so RTL→LTR
   mirrors by itself. The one physical bit is the shared arrow glyph
   (#i-arrow points LEFT = "forward" in RTL): flip it in LTR and
   reverse its hover travel. */
[dir="ltr"] .btn__arrow,
[dir="ltr"] .link-arrow .icon,
[dir="ltr"] .aud-card h3 .icon {
  transform: scaleX(-1);
}

[dir="ltr"] .btn:hover .btn__arrow {
  transform: translateX(4px) scaleX(-1);
}

[dir="ltr"] .link-arrow:hover .icon {
  transform: translateX(4px) scaleX(-1);
}

[dir="ltr"] .aud-card:hover h3 .icon {
  transform: translateX(5px) scaleX(-1);
}

/* ---------- Display weights ---------- */
/* Rubik is a variable-weight face, so the display roles — which used to ride on
   single-weight Secular One at 400 — have to ask for bold explicitly. */
.h-display,
.h-section,
.bento-card--main h3,
.price-band h2,
.thank-you h3,
.legal-card h1,
.stat b,
.step__num,
.price-figure__amount,
.price-figure__currency {
  font-weight: 700;
}

/* Russian copy runs longer than Hebrew — ease the display sizes a touch. */
html[lang="ru"] .h-display {
  font-size: clamp(2.1rem, 5.2vw, 3.7rem);
}

html[lang="ru"] .page-hero__copy .h-display {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
}

html[lang="ru"] .h-section {
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
}

/* RU nav labels are long: tighten the links and hand over to the
   burger earlier than the Hebrew 1040px breakpoint. */
html[lang="ru"] .nav-link {
  padding: 9px 10px;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  html[lang="ru"] .site-nav {
    display: none;
  }

  html[lang="ru"] .site-nav + .header-actions {
    margin-inline-start: auto;
  }

  html[lang="ru"] .burger {
    display: block;
  }
}

@media (min-width: 1041px) and (max-width: 1200px) {
  html[lang="ru"] .mobile-nav {
    display: flex;
  }
}

/* ============================================================
   Subscription landing v4 (ru/index.html)
   New blocks only — nothing above is redefined, so the Hebrew
   pages and the segment pages keep rendering exactly as before.
   House rule: no text below 16px (1rem = 16px, body is 17px).
   ============================================================ */

/* ---------- 1. Hero: three-step flow ---------- */
/* The price lives inside step 1, so the ribbon has to sit between the
   sub-headline and the buttons — that is the whole point of the block. */
/* Sits right above the fields: people arrive from ads expecting to summon a
   doctor now, and fill the form as if it were a call-out request. Plain text —
   a boxed callout here only adds another frame inside the card. */
.form-lead-note {
  margin-bottom: 16px;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.form-lead-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* A price TAG, not a line of text: two cells — the number, and what the number
   buys — so it reads as its own object between the promise and the buttons. */
.price-tag {
  display: inline-flex;
  align-items: stretch;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* line-height:1 on both lines makes each box equal its font size, so the gap
   below the figure is exactly this gap value at any breakpoint — no negative
   margins fighting the body line-height. */
.price-tag__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px 22px;
  background: linear-gradient(160deg, var(--sky-2), var(--sky));
}

.price-tag__num b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.price-tag__num span {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  white-space: nowrap;
}

.price-tag__txt {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 14px 22px;
  /* stays left-aligned even where the hero centres its copy on phones */
  text-align: start;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-soft);
}

.price-tag__txt strong {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
}

@media (max-width: 420px) {
  .price-tag__num,
  .price-tag__txt {
    padding-inline: 16px;
  }

  .price-tag__num b {
    font-size: 2rem;
  }
}

.flow {
  --flow-gap: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--flow-gap);
  width: 100%;
  margin-top: 2px;
}

/* The strip spans the full hero width, under both columns: in the copy column
   alone each Russian step label broke onto two lines. */
.hero--offer .flow {
  --flow-gap: clamp(22px, 2.4vw, 34px);
  grid-column: 1 / -1;
  margin-top: clamp(24px, 3vw, 40px);
}

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 11px;
  justify-items: start;
  text-align: start;
  padding: 13px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(2, 105, 150, 0.07);
}

/* Number sits beside the label, not above it — keeps the hero short enough
   that the CTA stays above the fold on a laptop. */
.flow__num {
  align-self: start;
}

/* Chevron in the gap: shows the order physically, not just by number.
   Rotating a 9px square by 45deg widens it to ~13px, so it needs a gap wider
   than itself — hence --flow-gap, which also centres it between the cards. */
.flow__step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: calc(-0.5 * var(--flow-gap) - 4.5px);
  margin-top: -5px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #b9dff2;
  border-inline-end: 2px solid #b9dff2;
  transform: rotate(45deg);
}

[dir="rtl"] .flow__step:not(:first-child)::before {
  transform: rotate(-135deg);
}

.flow__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(2, 150, 204, 0.32);
}

.flow__text b {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.flow__sub {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

/* The RU labels are longer than the Hebrew ones — let the pair wrap
   instead of overflowing the copy column on mid-size screens. */
.hero__cta--wrap {
  flex-wrap: wrap;
}

.hero__note {
  max-width: 470px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  /* breaks after "перезвонит," instead of stranding two words */
  text-wrap: balance;
}

/* ---------- 2. Trust strip ---------- */
.trustbar {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--sky) 160%);
}

/* Facts and logos on one line never fit at any real width — the logos wrapped
   under half a fact and the strip read as broken. Now: an even 3-up fact row
   with rules between, then the funds on their own line. */
.trustbar__inner {
  display: grid;
  gap: 20px;
  padding-block: 30px;
}

.trustbar__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.trustbar__fact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding-inline: 16px;
}

.trustbar__fact + .trustbar__fact {
  border-inline-start: 1px solid var(--line);
}

.trustbar__fact .icon {
  width: 27px;
  height: 27px;
  color: var(--brand-deep);
}

.trustbar__fact-txt {
  display: block;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

.trustbar__fact-txt b {
  display: block;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
}

.trustbar__kupot {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 10px clamp(16px, 3vw, 34px);
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.trustbar__kupot .kupot__badges {
  display: contents;
}

.trustbar__kupot .kupa {
  justify-self: center;
  max-height: 32px;
  max-width: 100%;
}

.trustbar__label {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
}

/* ---------- 3. What the subscription includes ---------- */
.svc {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 44px rgba(2, 105, 150, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc:not(.svc--main):hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.svc__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--sky);
  color: var(--brand-deep);
}

.svc__icon .icon {
  width: 30px;
  height: 30px;
}

.svc__title {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.svc__text {
  font-size: 1.02rem;
  line-height: 1.65;
}

.svc--main {
  gap: clamp(22px, 3vw, 30px);
  margin-bottom: 22px;
  background: linear-gradient(168deg, var(--sky) 0%, #fff 52%);
}

/* Single column since the stock-looking device photo was dropped. */
.svc__head {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
}

.svc__head .svc__text {
  max-width: 760px;
}

.svc__headcopy {
  display: grid;
  justify-items: start;
  gap: 13px;
}

.svc--main .svc__title {
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
}

.svc--main .svc__text {
  max-width: 620px;
}

.svc--main .svc__icon {
  background: #fff;
  border: 1px solid var(--sky-2);
}

.svc__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 54% 46%;
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(2, 105, 150, 0.14);
}

/* Both groups stay open at once: for a subscription the perceived volume
   of what is included is the main argument against the price. */
.svc__groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px clamp(24px, 4vw, 48px);
  padding-top: clamp(20px, 3vw, 26px);
  border-top: 1px solid var(--sky-2);
}

.svc-group {
  display: grid;
  align-content: start;
  gap: 13px;
}

.svc-group__title {
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--brand);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.svc-list {
  display: grid;
  gap: 10px;
}

.svc-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.svc-list .icon {
  width: 24px;
  height: 24px;
  color: var(--brand-deep);
}

.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* The main service is one tall card down the left, spanning both rows; the two
   smaller services stack in the right column beside it. */
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: 22px;
  align-items: stretch;
}

.svc--visit {
  grid-row: span 2;
  gap: 22px;
  background: linear-gradient(160deg, #fff 0%, var(--sky) 150%);
}

@media (max-width: 860px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }

  .svc--visit {
    grid-row: auto;
  }
}

/* ---------- 4. What people call about ---------- */
/* Column counts are stepped so the longest label ("Восстановление и
   реабилитация") always has room to wrap between words. minmax(0,…) plus
   overflow-wrap keep it from pushing the grid wider than the container at
   in-between widths. */
.case-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.case {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(2, 105, 150, 0.06);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.case .icon {
  width: 26px;
  height: 26px;
  color: var(--brand-deep);
}

.case-note {
  max-width: 760px;
  margin: clamp(24px, 3vw, 32px) auto 0;
  text-align: center;
  font-size: 1.04rem;
  line-height: 1.65;
}

/* Audience picker: illustrated cards, 4-up on desktop and 2×2 on phones. */
.seg-title {
  margin-top: clamp(34px, 4vw, 52px);
  text-align: center;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
}

.seg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

/* "For the whole family" is this very page, so its tile carries no link and
   no arrow — it is there to say the service is not only for the three niches. */
.seg-card--static {
  cursor: default;
}

.seg-card--static:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: 0 12px 34px rgba(2, 105, 150, 0.07);
}

.seg-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* art takes every pixel the name does not, so cards of different name length
     still have their artwork filling the frame edge to edge */
  grid-template-rows: 1fr auto;
  gap: 12px;
  padding: 12px 12px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(2, 105, 150, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.seg-card:hover {
  transform: translateY(-3px);
  border-color: var(--sky-2);
  box-shadow: var(--shadow-lift);
}

.seg-card__art {
  display: block;
  min-height: 148px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sky);
}

.seg-card__art img {
  width: 100%;
  height: 100%;
  min-height: 148px;
  object-fit: cover;
}

.seg-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* room for two lines everywhere, so every card's artwork is the same height */
  min-height: 2.6em;
  padding-inline: 6px;
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.25;
}

.seg-card__name .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-deep);
  transition: transform 0.25s ease;
}

.seg-card:hover .seg-card__name .icon {
  transform: translateX(-4px);
}

[dir="ltr"] .seg-card__name .icon {
  transform: scaleX(-1);
}

[dir="ltr"] .seg-card:hover .seg-card__name .icon {
  transform: translateX(4px) scaleX(-1);
}

@media (max-width: 780px) {
  .seg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* odd card out spans the row instead of sitting alone in one column */
  .seg-grid > .seg-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  .seg-grid > .seg-card:nth-child(odd):last-child .seg-card__art {
    min-height: 120px;
    max-height: 168px;
  }

  .seg-card__name {
    font-size: 1rem;
  }
}

/* ---------- 5. Price checklist ---------- */
/* Columns hug their own content instead of splitting the width in half. Two
   equal 1fr columns are as wide as the longest line in the whole list, so the
   shorter column carried ~150px of dead space — which lands on the outward
   side and drags the visible text off centre. Worse in Hebrew, where the text
   sits against the far edge of its column, but the same flaw in Russian. */
.price-check {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: 13px clamp(24px, 4vw, 44px);
  max-width: 100%;
  margin-top: 6px;
  text-align: start;
}

.price-check li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
}

.price-check .icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--brand);
}

.price-note {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- 7. Lead section ---------- */
/* Top alignment: the copy column is shorter than the form, and centring it
   left a pocket of empty space above and below. */
.lead-card--top {
  align-items: start;
}

/* The copy column still ran out before the form did, leaving dead space under
   it. On desktop let it fill the card height instead: the text gets a wider
   measure, the steps breathe, and the trust line sits on the card's bottom
   edge so both columns finish on the same line. */
@media (min-width: 981px) {
  .lead-card--top {
    align-items: stretch;
    /* Give the copy the wider half: the form only holds three fields, while
       this column carries a headline, a paragraph and three steps. */
    grid-template-columns: 1.06fr 0.94fr;
  }

  .lead-card--top .lead-card__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .lead-card--top .lead-card__copy p {
    max-width: 34em;
  }

  .lead-card--top .next-steps {
    gap: 22px;
  }

  .lead-card--top .lead-trust {
    margin-block-start: auto;
    max-width: none;
  }
}

.next-steps {
  display: grid;
  gap: 16px;
  width: 100%;
  margin-top: 4px;
}

.next-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 3px 14px;
}

.next-steps__num {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(2, 150, 204, 0.28);
}

.next-steps b {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
}

.next-steps__sub {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.lead-trust {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 4px;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--sky);
  border: 1px solid var(--sky-2);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

.lead-trust .icon {
  width: 23px;
  height: 23px;
  flex: none;
  color: var(--brand-deep);
}

.lead-terms {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.lead-terms a {
  color: var(--brand-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Microcopy under the buttons: width is capped by the container, never
   by a hard <br>. */
.form-note {
  margin-top: 12px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.form-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #6b8a9d;
  font-size: 1rem;
  font-weight: 600;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--sky-2);
}

.thank-you__hint {
  max-width: 380px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Sticky bar with the price ---------- */
.sticky-cta--price .btn {
  font-size: 1rem;
}

.sticky-cta--price .btn--wa {
  flex: 0 1 auto;
}

.sticky-cta--price .btn--cta {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 12px;
  /* below 360px the label wraps instead of pushing the bar out of frame */
  white-space: normal;
  line-height: 1.2;
}

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .case-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  /* Only one glass fact card here, so it takes the full width under the
     photo instead of leaving half a row empty. */
  .hero__visual--solo {
    grid-template-columns: 1fr;
  }

  .flow__step {
    justify-items: start;
    text-align: start;
  }
}

@media (max-width: 900px) {
  .svc__head {
    grid-template-columns: 1fr;
  }

  .svc__photo {
    display: none;
  }
}

@media (max-width: 760px) {
  .svc__groups,
  .svc-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .price-check {
    grid-template-columns: max-content;
  }
}

@media (max-width: 680px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .case-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  /* Three steps become three rows. */
  .flow,
  .hero--offer .flow {
    --flow-gap: 8px;
    grid-template-columns: 1fr;
  }

  .flow__step {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
  }

  .flow__step:not(:first-child)::before {
    display: none;
  }

  /* Stack the facts and put the funds in a 2×2 block — a 3+1 wrap looked
     accidental. */
  .trustbar__facts {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: start;
  }

  .trustbar__fact {
    justify-content: flex-start;
    padding-inline: 0;
  }

  .trustbar__fact + .trustbar__fact {
    border-inline-start: 0;
  }

  .trustbar__kupot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 18px 20px;
  }

  .trustbar__label {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc,
  .case,
  .seg-links a {
    transition: none;
  }
}

/* ---------- Segment pages: the six-tile situation grid ---------- */
/* Segment pages list six situations, not the home page's ten, and their labels
   are longer ("Период восстановления и реабилитации"). In the 5-up grid that
   leaves a single tile alone on the second row, so these go three across in two
   even rows, width-capped to keep the tiles as dense as the ten-tile grid.
   Declared after the .case-grid breakpoints above, so the smaller steps have to
   be repeated here to win by source order. */
/* Situations on the segment pages carry a line of explanation, so they are
   cards rather than chips — the bare labels lost too much of the old detail. */
.case--rich {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 20px;
}

.case__body {
  display: grid;
  gap: 6px;
}

.case__body b {
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.case__body span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-soft);
}

.case-grid--6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 940px;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .case-grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .case-grid--6 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- About page: room for the overlapping lead card ----------
   On the other pages the lead card rides up onto the dark price band, and the
   band reserves that room itself (.price-band:has(+ .lead-section--overlap)).
   The About page has no price band, so the block above the form asks for the
   same room here — otherwise the card lands on top of it. */
.section--overlap-room {
  padding-block-end: calc(var(--sec-pad) + clamp(104px, 13vw, 190px));
}

/* The UA stylesheet forces direction:ltr on tel inputs. Aligning the text right
   was not enough: in an LTR box the trailing "*" of the Hebrew placeholder is
   laid out after the word, so it showed up on the RIGHT while every other field
   had it on the left.
   The value and the placeholder want opposite directions, so the field switches
   between them: RTL while the placeholder is showing, so it matches its
   neighbours, and LTR the moment something is typed — an RTL box would reorder
   "+972 50-123-4567" into "50-123-4567 972+", since the spaces break the number
   into separate runs that then lay out right to left. Right-aligned in both
   states, so the caret never jumps. */
[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: right;
}

[dir="rtl"] input[type="tel"]:placeholder-shown {
  direction: rtl;
}