/* ═══════════════════════════════════════════════════════════════════
   mommy.baby — landing blocks

   Ordered exactly like the brief, block 1 through block 17, so a
   section in the document and a section in this file are one search
   apart. Mobile is the base case; min-width queries are the desktop
   afterthought, because the traffic is a link in an Instagram bio.
   ═══════════════════════════════════════════════════════════════════ */

.wrap--narrow { max-width: 820px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Image slots waiting on the shoot. `data-slot` marks a element whose
   file has not been delivered yet; app.js adds .is-empty when the
   request 404s, and this paints a calm branded panel with the asset id
   instead of a broken-image glyph. Once the file exists the rule never
   matches again — nothing to remove at launch. */
.is-empty {
  position: relative;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(140deg, var(--crimson-tint), var(--paper-2) 55%, var(--sky-tint));
  border-radius: inherit;
}
.is-empty::after {
  content: attr(data-slot);
  position: absolute; inset: auto 10px 10px auto;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.82);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted);
  pointer-events: none;
}

/* ═══════════ 1 · Хедер ═══════════ */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Transparent over the hero, solid the moment the page moves. */
.hdr.is-stuck {
  background: rgba(251,247,242,.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(36,30,26,.06);
}

.hdr__in {
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}

.hdr__brand { display: flex; align-items: center; gap: 9px; flex: none; }
.hdr__brand img {
  width: 34px; height: 34px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(218,8,64,.26);
}
.hdr__name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: -.04em;
}
.hdr__dot { color: var(--crimson); }

.hdr__nav {
  display: none;
  margin-inline: auto;
  gap: 26px;
  font-size: 14.5px; font-weight: 500;
}
.hdr__nav a { position: relative; padding-block: 4px; color: var(--ink); }
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--crimson);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.hdr__nav a:hover::after, .hdr__nav a.is-current::after { transform: scaleX(1); }

.hdr__side { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.lang { display: flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: rgba(36,30,26,.06); }
.lang__btn {
  min-width: 38px; padding: 5px 9px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.lang__btn.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.hdr__cta { display: none; }

.burger {
  width: 42px; height: 42px;
  display: grid; place-content: center; gap: 5px;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .24s var(--ease), opacity .18s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
@media (max-width: 899px) {
  .hdr__nav {
    position: fixed; inset: var(--header-h) 0 auto;
    display: grid; gap: 0;
    padding: 8px var(--gut) 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .hdr__nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .hdr__nav a { padding: 14px 2px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .hdr__nav a::after { display: none; }
  .hdr__nav a:last-child { border-bottom: 0; }
}

@media (min-width: 900px) {
  .hdr__nav { display: flex; }
  .hdr__cta { display: inline-flex; }
  .burger { display: none; }
  .hdr__brand img { width: 40px; height: 40px; }
  .hdr__name { font-size: 18px; }
}

/* ═══════════ 2 · Первый экран ═══════════ */

.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  background:
    radial-gradient(90% 60% at 85% 0%, var(--crimson-tint), transparent 65%),
    radial-gradient(70% 50% at 0% 40%, var(--sky-tint), transparent 60%),
    var(--paper);
}
.hero__in { padding-block: 22px 40px; display: grid; gap: 24px; }

.hero__title {
  font-size: clamp(27px, 7.2vw, 46px);
  line-height: 1.08;
}
.hero__lead {
  margin-top: 12px; max-width: 30em;
  font-size: clamp(15px, 3.6vw, 17.5px);
  color: var(--muted);
}
.hero__cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 9px; }
.hero__cta .btn { flex: 1 1 auto; min-width: 150px; }

.hero__micro {
  margin-top: 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.hero__micro svg { width: 15px; height: 15px; flex: none; color: var(--moss); }

.hero__media { position: relative; margin: 0; }
.hero__media img,
.hero__media picture {
  display: block; width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  background: var(--paper-2);
}

.hero__badge {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}
.hero__badge strong {
  font-family: "Unbounded", sans-serif; font-size: 17px; letter-spacing: -.03em;
  color: var(--crimson);
}
.hero__badge span { font-size: 12.5px; color: var(--muted); }

@media (min-width: 860px) {
  /* The first screen has to be a first *screen*: the whole thing fits
     between the header and the fold, with the image capped so a tall
     photo cannot push the buttons out of view. svh, not vh, so mobile
     browser chrome does not break the sum. */
  .hero__in {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 48px;
    padding-block: 24px 32px;
    min-height: calc(100svh - var(--header-h));
  }
  .hero__media img, .hero__media picture {
    aspect-ratio: 16 / 11;
    max-height: calc(100svh - var(--header-h) - 72px);
  }
  .hero__cta .btn { flex: 0 0 auto; }
  .hero__badge { left: 24px; bottom: 24px; }
}

/* ═══════════ 3 · Полоса доверия ═══════════ */

.trust { background: var(--surface); border-block: 1px solid var(--line); }
.trust__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  padding: 0;
  max-width: none;
}
.trust__item {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 28px 16px;
  background: var(--surface);
}
.trust__icon {
  width: 30px; height: 30px;
  fill: none; stroke: var(--crimson); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 4px;
}
.trust__num {
  font-family: "Unbounded", sans-serif; font-weight: 700;
  font-size: clamp(17px, 4.4vw, 24px); letter-spacing: -.035em;
}
.trust__cap { font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 20ch; }

@media (min-width: 760px) {
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .trust__item { padding: 40px 20px; }
  .trust__cap { font-size: 13.5px; }
}

/* ═══════════ 4 · Доступный премиум ═══════════ */

.why { display: grid; gap: 16px; }
/* The illustrations are flat vector art on white. Dropped straight onto
   a white card they read as clip-art floating in space, so each one
   gets a tinted, full-width panel of its own at the top of the card —
   the art then belongs to the card instead of sitting on it. */
.why__card {
  position: relative;
  padding: 0 0 24px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.why__card > picture {
  display: block;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.why__img {
  width: 100%; height: 168px;
  object-fit: contain;
  object-position: center;
  padding: 14px;
  mix-blend-mode: multiply;      /* kills the art's own white box */
}
.why__card .h3 { padding-inline: 22px; margin-top: 20px; }
.why__card p { padding-inline: 22px; margin-top: 9px; font-size: 15px; color: var(--muted); }

.why__num {
  position: absolute; right: 16px; top: 12px;
  z-index: 1;
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 30px;
  letter-spacing: -.06em; color: var(--line-2);
  line-height: 1;
}

.why__kicker {
  margin-top: 30px; text-align: center;
  font-family: "Unbounded", sans-serif; font-weight: 600;
  font-size: clamp(17px, 3.2vw, 25px); letter-spacing: -.035em;
  color: var(--crimson);
}

@media (min-width: 760px) {
  .why { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .why__img { height: 190px; }
  .why__card { padding: 0 0 28px; }
  .why__card .h3 { padding-inline: 26px; }
  .why__card p { padding-inline: 26px; }
}

/* ═══════════ 5 · Анатомия ═══════════ */

.anat { display: grid; gap: 20px; }

.anat__stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.anat__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.anat__layers {
  position: absolute; inset: auto 0 0;
  display: grid; gap: 1px;
  padding: 0;
  background: linear-gradient(to top, rgba(36,30,26,.72), rgba(36,30,26,0));
}
.anat__layer {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border: 0; background: transparent; cursor: pointer;
  color: rgba(255,255,255,.8);
  font-size: 13.5px; font-weight: 500; text-align: left;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.anat__layer:hover { background: rgba(255,255,255,.1); color: #fff; }
.anat__layer.is-on { color: #fff; background: rgba(255,255,255,.14); font-weight: 600; }
.anat__dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.anat__layer.is-on .anat__dot {
  background: var(--crimson);
  box-shadow: 0 0 0 4px rgba(218,8,64,.3);
}

.anat__panels { display: grid; gap: 16px; align-content: start; }
.anat__panel { animation: fadeUp .32s var(--ease); }
.anat__panel p { margin-top: 10px; color: var(--muted); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

.anat__note {
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.anat__note h4 { font-family: "Unbounded", sans-serif; font-size: 14.5px; letter-spacing: -.02em; margin: 0; }
.anat__note p { margin-top: 7px; font-size: 14px; color: var(--muted); }
/* A literal wetness-indicator stripe: yellow that turns blue, which is
   what the mother actually sees on the waistband. */
.anat__strip {
  display: block; height: 8px; margin-top: 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #F2D98B 0%, #F2D98B 35%, #6FA8CC 65%, #3E7FA8 100%);
}

.absorb { margin: 26px 0 0; }
.absorb__play {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.absorb__play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.absorb__btn {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--crimson);
  box-shadow: var(--shadow-md);
  transition: transform .2s var(--ease);
}
.absorb__btn svg { width: 26px; height: 26px; }
.absorb__play:hover .absorb__btn { transform: scale(1.08); }
.absorb figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }

@media (min-width: 900px) {
  .anat { grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: start; }
  .anat__layer { padding: 11px 20px; font-size: 14.5px; }
}

/* ═══════════ 6 · Размеры и герои ═══════════ */

/* Horizontal scroll on mobile, grid on desktop. Snap points make the
   one-handed swipe land on a whole card instead of halfway. */
.heroes { margin-top: 4px; }
.heroes__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74vw, 280px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 6px 20px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.heroes__row::-webkit-scrollbar { height: 6px; }
.heroes__row::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.hcard {
  min-width: 0;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  padding: 20px 20px 22px;
  border-radius: var(--r-lg);
  background: var(--tone, var(--paper-2));
  border: 1px solid rgba(36,30,26,.06);
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.hcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* The delivered characters are drawn at different aspect ratios, so
   they are sized by height rather than boxed into a square — standing
   figures read as "the same size" when their heights match, not their
   bounding boxes. */
.hcard__art {
  width: 100%; height: 140px; margin: 0 auto 12px;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.hcard:hover .hcard__art { transform: translateY(-3px) rotate(-2deg); }

.hcard__size {
  display: inline-block;
  padding: 3px 12px; margin-bottom: 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.8);
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .02em;
}
.hcard__name {
  font-family: "Unbounded", sans-serif; font-weight: 700;
  font-size: 19px; letter-spacing: -.035em;
}
.hcard__size { align-self: center; }
.hcard__kg { margin-top: 4px; font-size: 15px; font-weight: 600; }
.hcard__age { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.hcard__count {
  margin-top: 8px; margin-bottom: 14px;
  font-size: 12px; font-weight: 600; color: var(--faint);
}

/* Per-size pack shots are off until all five exist — one real photo
   next to four gaps reads as broken rather than unfinished. Flip
   MB.config.showPackShots once the photography is delivered. */
.hcard__pack {
  width: 100%; height: 118px; margin-top: 14px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Pushed to the bottom so the CTA sits on one line across all five
   cards, whatever the length of the hero's name above it. */
.hcard__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.86);
  font-size: 13px; font-weight: 600;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.hcard__cta:hover { background: #fff; transform: translateY(-1px); }
.hcard__cta svg { width: 14px; height: 14px; }

.heroes__kicker { margin-top: 6px; text-align: center; font-size: 15px; color: var(--muted); }
.heroes__kicker a { color: var(--crimson); font-weight: 600; }

/* ── трусики-подгузники ──────────────────────────────────────────
   A quieter strip than the character cards above it: this is the
   second product, not the headline one, and it has no heroes of its
   own. Same card language, less colour. */
.pants {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.pants__head { max-width: 620px; margin-bottom: 22px; }
.pants__head p { margin-top: 9px; font-size: 15px; color: var(--muted); }

.pants__row { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.pcard {
  display: flex; flex-direction: column;
  padding: 16px 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pcard__pack {
  width: 100%; height: 132px; margin-bottom: 12px;
  object-fit: contain;
  border-radius: var(--r-md);
}
.pcard__size {
  align-self: center;
  padding: 3px 12px; margin-bottom: 8px;
  border-radius: var(--r-pill);
  background: var(--plum-tint); color: var(--plum);
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 12.5px;
}
.pcard__kg { font-size: 15.5px; font-weight: 700; }
.pcard__count { margin-top: 3px; font-size: 12.5px; color: var(--muted); }

@media (min-width: 760px) {
  .pants__row { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .pcard__pack { height: 168px; }
}

/* Six sizes now, so the row is driven by the data rather than a magic
   number: three across on tablet, all six on a wide screen. */
@media (min-width: 760px) and (max-width: 1099px) {
  .heroes__row {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
  }
}
@media (min-width: 1100px) {
  .heroes__row {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-columns: auto;
    gap: 12px;
    overflow: visible;
  }
  .hcard { padding: 18px 14px 20px; }
  .hcard__art { height: 124px; }
  .hcard__name { font-size: 17px; }
}

/* ═══════════ 7 · Подбор размера ═══════════ */

.calc { display: grid; gap: 0; overflow: hidden; }
.calc__form { padding: 20px 16px; display: grid; gap: 18px; }

.calc__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 600;
  padding: 0; border: 0;
  min-height: 2.6em;                 /* two lines, so a long KY label cannot shift the block */
}
.calc__label span:not(.calc__out) em,
.calc__label > span > span { font-weight: 400; color: var(--faint); }

.calc__out {
  font-family: "Unbounded", sans-serif; font-weight: 700;
  font-size: 19px; letter-spacing: -.04em;
  color: var(--crimson);
  /* «7,0 кг» and «28,0 кг» must occupy the same box: otherwise the
     readout grows, squeezes the label beside it onto a second line and
     the whole calculator jumps by a line height. Tabular figures stop
     the digits themselves changing width as the slider moves. */
  min-width: 5.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* A range input rebuilt to a 44px-friendly thumb — mothers scroll this
   one-handed, per the brief. */
.calc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; margin-top: 6px;
  background: transparent; cursor: pointer;
}
.calc__range::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--crimson) var(--fill, 30%), var(--line) var(--fill, 30%));
}
.calc__range::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: var(--line); }
.calc__range::-moz-range-progress { height: 8px; border-radius: var(--r-pill); background: var(--crimson); }
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -10px;
  border-radius: 50%; border: 3px solid #fff;
  background: var(--crimson);
  box-shadow: 0 2px 10px rgba(218,8,64,.4);
}
.calc__range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%; border: 3px solid #fff;
  background: var(--crimson);
  box-shadow: 0 2px 10px rgba(218,8,64,.4);
}

.calc__hint { margin-top: 0; font-size: 12px; color: var(--faint); }

.calc__manual { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.calc__manual input {
  width: 96px; padding: 9px 11px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 16px; font-weight: 600;   /* 16px stops iOS zooming on focus */
}
.calc__manual span { font-size: 14px; color: var(--muted); }

.calc__step--chips { border: 0; padding: 0; margin: 0; }
.chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface);
  /* Weight is fixed at 600 for every chip, selected or not. Bolding on
     selection changes the label's width, which re-wraps the row and
     shifts the whole calculator by a line — selection is signalled by
     colour alone so the layout cannot move. */
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chip input:checked + span {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.chip input:focus-visible + span { outline: 2px solid var(--crimson); outline-offset: 2px; }

.calc__result {
  padding: 22px 18px;
  background: var(--tone, var(--paper-2));
  border-top: 1px solid var(--line);
  transition: background-color .45s var(--ease);
}
.res__card, .res__none {
  display: grid; gap: 14px; justify-items: center; text-align: center;
  align-content: center;
}
/* `display: grid` outranks the UA rule for the hidden attribute. */
.res__card[hidden], .res__none[hidden] { display: none; }
.res__artbox { display: block; line-height: 0; }

/* The panel is a fixed stage, not a box that grows and shrinks. The
   advice line runs two to four lines depending on the concern picked,
   and past the nappy range a character is swapped for a pack shot —
   without a reserved height the whole calculator would jump every time
   the mother touched a control.

   The reserve is measured, not guessed. Worst case in either language:
   438px of content plus 68px of panel padding, against a 480px form
   column beside it — so 506px is the floor. 520px clears it with
   headroom. Re-measure if you lengthen a calc.tip.* string or resize
   .res__art. */
.calc__result { min-height: 360px; display: grid; }
.res__tip {
  /* Five lines — what the longest tip wraps to at the narrowest
     (375px) panel width in either language. Expressed in px, not em,
     because a fractional em reserve rounds differently per string and
     left a 1px shiver in the page height. */
  min-height: 94px;
  display: grid; align-content: center;
}
.res__noneText { font-size: 15px; color: var(--muted); max-width: 40ch; }

/* The трусики pack shown instead of a hero once the weight passes the
   nappy range. */
.res__nonePack { display: block; line-height: 0; }
.res__pack {
  width: auto; height: 190px; margin-inline: auto;
  object-fit: contain;
}
.res__pack.is-anim { animation: charSwap .42s cubic-bezier(.33,.7,.35,1) both; }
/* Only the size-dependent parts animate, and only when the size
   actually changes. A quiet cross-fade with a touch of scale — no
   bounce, no rotation, no travel. The panel should feel like it
   settled on an answer, not like it performed one. */
.res__art { width: 100%; height: 116px; object-fit: contain; }
.res__art.is-anim { animation: charSwap .42s cubic-bezier(.33,.7,.35,1) both; }
@keyframes charSwap {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}

.res__size.is-anim,
.res__kg.is-anim,
.res__age.is-anim { animation: textSwap .38s cubic-bezier(.33,.7,.35,1) both; }
.res__kg.is-anim  { animation-delay: .05s; }
.res__age.is-anim { animation-delay: .08s; }
@keyframes textSwap { from { opacity: 0; } to { opacity: 1; } }

.res__label { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.res__size {
  font-family: "Unbounded", sans-serif; font-weight: 700;
  font-size: clamp(26px, 6vw, 36px); letter-spacing: -.05em;
  line-height: 1.1;
}
.res__size em { font-style: normal; color: var(--crimson); }
.res__kg { font-size: 15px; font-weight: 600; }
.res__age { margin-top: -8px; font-size: 12.5px; color: var(--muted); }
.res__tip {
  max-width: 44ch; font-size: 14.5px; color: var(--muted);
  padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(255,255,255,.7);
}
@media (min-width: 880px) {
  .calc { grid-template-columns: 1.15fr .85fr; }
  .calc__form { padding: 30px 28px; gap: 22px; }
  .res__art { height: 148px; }
  .calc__result {
    border-top: 0; border-left: 1px solid var(--line);
    padding: 30px 26px;
    display: grid; align-content: center;
    /* Measured: 438px of tallest content + 60px padding = 498, and the
       form column beside it is 498 too. 500 makes the reserve — not a
       coincidence between two numbers — the thing that sets the height. */
    min-height: 500px;
  }
}

/* Held to the same measure as the FAQ accordion at the foot of the
   page — the two are the same component and should not be two
   different widths on the same site.

   The FAQ lives in .wrap--narrow, so its content box is 820px minus
   that wrapper's two gutters; these sit in the full-width .wrap, so
   the gutters have to be subtracted here instead. */
.calc__extras,
.calc__download {
  max-width: calc(820px - var(--gut) * 2);
  margin-inline: auto;
}
.calc__over {
  margin: 14px auto 0;
  max-width: calc(820px - var(--gut) * 2);
  text-align: center;
  font-size: 14px; color: var(--muted);
}
.calc__over a { color: var(--crimson); font-weight: 600; }
.calc__over a:hover { text-decoration: underline; }

.calc__extras { margin-top: 22px; display: grid; gap: 10px; }

.acc__img { width: 100%; max-width: 300px; margin-top: 14px; border-radius: var(--r-md); }
.acc__img--wide { max-width: 520px; }

/* On a wide panel the illustration belongs beside the list, not
   stranded under it with a column of empty space to its right. */
@media (min-width: 700px) {
  .acc__body--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 26px;
    align-items: start;
  }
  .acc__body--media .acc__img { margin-top: 0; max-width: 100%; }
}

.ticks { display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crimson-tint); border: 2px solid var(--crimson);
}

.calc__download {
  margin-top: 22px; padding: 22px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-2);
  background: rgba(255,255,255,.6);
  display: grid; gap: 14px; align-items: center;
}
.calc__download p { margin-top: 5px; font-size: 14px; color: var(--muted); }
@media (min-width: 720px) {
  .calc__download { grid-template-columns: 1fr auto; gap: 24px; padding: 24px 28px; }
}

/* ═══════════ 8 · Сертификаты ═══════════ */

.certs { display: grid; gap: 14px; }
/* Static cards: the scans speak for themselves at this size and the
   lightbox was removed, so nothing here is clickable. */
.cert {
  width: 100%;
  display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center;
  padding: 14px; text-align: left;
  border-radius: var(--r-lg);
}

/* The scan reads as a document lying on the table: paper edge, soft
   drop, slight tilt. */
.cert__scan {
  display: block; overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 14px rgba(36,30,26,.12);
  transform: rotate(-1.5deg);
  background: #fff;
}
.cert__scan img { width: 84px; height: 108px; object-fit: cover; }

.cert__body { display: grid; gap: 5px; }
.cert__body strong { font-size: 15.5px; line-height: 1.35; letter-spacing: -.01em; }
.cert__body em {
  font-style: normal; font-size: 12.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.cert__body em::before {
  content: ""; width: 13px; height: 15px; flex: none;
  background: currentColor;
  clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
  opacity: .5;
}

.certs__note { margin-top: 20px; font-size: 13.5px; color: var(--faint); }

@media (min-width: 720px) { .certs { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════ 9 · Педиатры ═══════════ */

.docs { display: grid; gap: 16px; }
.doc { padding: 24px 22px; display: grid; justify-items: start; }
.doc__photo {
  width: 68px; height: 68px; border-radius: 50%;
  object-fit: cover; margin-bottom: 16px;
  background: var(--paper-2);
}
.doc__quote {
  margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink);
}
.doc__name { margin-top: 16px; font-weight: 700; font-size: 15px; }
.doc__meta { font-size: 13px; color: var(--muted); }

.docs__foot {
  margin-top: 24px;
  display: grid; gap: 14px;
}
.disclaimer {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border-left: 3px solid var(--line-2);
  font-size: 13px; color: var(--muted);
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: var(--crimson);
  text-align: left;
}
.link-arrow::after {
  content: "→";
  transition: transform .2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

@media (min-width: 860px) {
  .docs { grid-template-columns: repeat(3, 1fr); }
  .docs__foot { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
}

/* ═══════════ 10 · Отзывы ═══════════ */

/* ═══════════ 10 · Отзывы ═══════════
   Text only — no photographs were supplied, and a stock face under a
   real message would undo the trust the message earns. The card does
   the work instead: an MB mark, generous leading, and an honest line
   about where the message came from. */

.quotes { display: grid; gap: 14px; }

.quote {
  position: relative;
  display: flex; flex-direction: column;
  padding: 46px 22px 20px;
  background: var(--surface);
}
.quote::before {
  content: "MB";
  position: absolute; left: 20px; top: 6px;
  font-family: "Unbounded", serif;
  font-size: 62px; line-height: 1;
  color: var(--crimson-tint);
  pointer-events: none;
}
.quote__text {
  position: relative;
  font-size: 15px; line-height: 1.62;
  /* Real messages arrive with emoji and line breaks; keep them. */
  white-space: pre-line;
}
.quote__meta {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--faint);
  display: flex; align-items: center; gap: 7px;
}
.quote__meta::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson);
  opacity: .55;
}

.ugc__cta { margin-top: 22px; font-size: 15px; color: var(--muted); text-align: center; }
.ugc__cta a { color: var(--crimson); font-weight: 600; }

@media (min-width: 780px) {
  .quotes { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .quote { padding: 50px 24px 22px; }
}

/* ═══════════ 10б · Reels ═══════════ */

/* Swiped horizontally, exactly like the size line-up — same gesture,
   same snap behaviour, and the strip bleeds to the screen edge so it
   reads as scrollable rather than clipped. */
.reels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(62vw, 240px);
  gap: 12px;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  padding-block: 4px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
.reel {
  position: relative; width: 100%; padding: 0; border: 0; cursor: pointer;
  display: block;
  scroll-snap-align: center;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.reel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.reel img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }

.reel__play {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: 42px; height: 42px; display: grid; place-content: center;
  border-radius: 50%; background: rgba(255,255,255,.94); color: var(--crimson);
  box-shadow: var(--shadow-md);
  transition: transform .2s var(--ease);
}
.reel:hover .reel__play { transform: scale(1.08); }
.reel__play svg { width: 22px; height: 22px; }

/* Caption sits on the clip itself — a vertical video with a label
   underneath makes the tile read as a card, which these are not. */
.reel__cap {
  position: absolute; inset: auto 0 0;
  padding: 30px 10px 10px;
  background: linear-gradient(to top, rgba(28,20,18,.82), transparent);
  color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.3;
  text-align: left;
}

.reels__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .28em .5em;
}
.reels__soc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.reels__soc a {
  width: 44px; height: 44px;
  display: grid; place-content: center;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease), border-color .16s var(--ease);
}
.reels__soc a:hover { transform: translateY(-1px); border-color: var(--ink); }
.reels__soc svg { width: 20px; height: 20px; }

@media (min-width: 720px) {
  /* Wide enough to show all three without a swipe — but they keep the
     same card size rather than stretching to fill the row. */
  .reels {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 260px));
    grid-auto-columns: auto;
    justify-content: center;
    gap: 18px;
    margin-inline: 0; padding-inline: 0;
    overflow: visible;
  }
  .reel__cap { font-size: 13.5px; padding: 34px 14px 13px; }
  .reel__play { width: 52px; height: 52px; }
  .reel__play svg { width: 22px; height: 22px; }
}

@media (min-width: 720px) { .ugc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ugc { grid-template-columns: repeat(4, 1fr); } }

/* ═══════════ 11 · Где купить ═══════════ */

.where { display: grid; gap: 16px; }

.where__main { overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.where__map { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.where__body { padding: 24px 22px; display: flex; flex-direction: column; }
.where__body p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.where__body strong { color: var(--ink); }
/* Sits on the floor of its card so the three call-to-actions across
   the block land on one line. */
.where__btns { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }

.where__side { display: grid; gap: 16px; }
.where__card { position: relative; padding: 24px 22px; display: flex; flex-direction: column; }
.where__card p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }

/* Not yet live. Dimmed rather than removed, so the channel is visibly
   planned instead of silently missing. */
.where__card.is-soon { background: var(--paper-2); box-shadow: none; }
.where__card.is-soon .h3 { color: var(--muted); }
.soon {
  position: absolute; right: 18px; top: 18px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}

.shops { margin-top: auto; padding-top: 16px; display: grid; gap: 8px; }
.shops a {
  display: block; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 14.5px; font-weight: 500;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.shops a:hover { border-color: var(--ink); transform: translateX(3px); }
.where__todo { margin-top: 10px; font-size: 12px; color: var(--faint); font-style: italic; }

.where__card--wa .btn { margin-top: auto; }
.where__phone {
  display: block; margin-top: 12px; text-align: center;
  font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: -.02em;
}
.where__note { margin-top: 20px; font-size: 14.5px; color: var(--muted); }

@media (min-width: 900px) {
  /* Both columns stretch to the taller of the two, and the right-hand
     pair splits that height evenly, so all three cards share a bottom
     edge instead of ending wherever their text runs out. */
  .where { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
  .where__side { grid-template-rows: 1fr 1fr; }
}

/* ═══════════ 12 · Партнёрам ═══════════ */

.part { display: grid; gap: 20px; }
.part__ways { display: grid; gap: 14px; }
.part__way {
  padding: 22px 20px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.part__way img { width: 62px; height: 62px; object-fit: contain; margin-bottom: 14px; border-radius: var(--r-sm); }
.part__way p { margin-top: 8px; margin-bottom: 14px; font-size: 14.5px; color: var(--muted); }
.part__way .link-arrow { margin-top: auto; }
.part__way.is-picked { outline: 2px solid var(--crimson); outline-offset: -1px; }

.part__form { padding: 26px 22px; display: flex; flex-direction: column; }
.part__form form { display: grid; gap: 14px; align-content: start; flex: 1; }
.part__form .h3 { margin-bottom: 4px; }
/* The submit sinks to the bottom of the panel so its baseline matches
   the last row of direction cards beside it. */
.part__form form > .btn { margin-top: auto; }

.fld { display: grid; gap: 6px; }
.fld > span { font-size: 13.5px; font-weight: 600; }
.fld > span em { font-style: normal; font-weight: 400; color: var(--faint); }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 16px;                     /* keeps iOS from zooming on focus */
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: 0; border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(218,8,64,.13);
}
.fld textarea { resize: vertical; min-height: 84px; }
.fld.is-bad input, .fld.is-bad select { border-color: var(--crimson); background: var(--crimson-tint); }

.fld__err { font-size: 13px; color: var(--crimson-dark); font-weight: 500; }

/* Honeypot: out of the layout, out of the tab order, out of the
   accessibility tree — but present in the DOM for a bot to fill. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.part__alt { margin-top: 4px; font-size: 13.5px; color: var(--muted); text-align: center; }
.part__alt a { color: var(--crimson); font-weight: 600; }

.part__done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 30px 10px; }
/* `display: grid` above outranks the UA rule for the hidden attribute,
   so without this the thank-you panel is visible from page load —
   before anyone has filled anything in. */
.part__done[hidden] { display: none; }
.part__done svg { width: 56px; height: 56px; color: var(--moss); }
.part__done p { color: var(--muted); }

@media (min-width: 720px) { .part__ways { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  /* Stretch, not start: the form panel and the block of direction
     cards finish on the same line. Sticky is dropped — it cannot
     coexist with a stretched track, and the form is short enough to
     stay in view on its own. */
  .part { grid-template-columns: 1.25fr .9fr; gap: 26px; align-items: stretch; }
  .part__form { padding: 30px 28px; }
}

/* ═══════════ 13 · Полезное мамам ═══════════ */

.posts { display: grid; gap: 16px; }
/* Cards fill their grid cell, so every card on a row ends level even
   when one headline wraps to a second line. */
.posts > li { display: grid; }
.post {
  height: 100%;
  display: grid; align-content: start;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
/* The card is a single <a>, so its inner parts are spans — they need
   to be told to behave like blocks. */
.post__body, .post__tag, .post__title, .post__excerpt { display: block; }
.post__body { padding: 18px 18px 20px; }
.post__tag {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--crimson);
}
.post__title {
  margin-top: 7px;
  font-family: "Unbounded", sans-serif; font-weight: 600;
  font-size: 16.5px; letter-spacing: -.03em; line-height: 1.28;
}
.post__excerpt { margin-top: 8px; font-size: 14px; color: var(--muted); }

.posts__foot { margin-top: 24px; text-align: center; }

@media (min-width: 700px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .posts { grid-template-columns: repeat(3, 1fr); }
  /* The 272k-views article leads the grid — it earned the space. */
  .posts > li:first-child { grid-column: span 2; }
  .posts > li:first-child .post__cover { aspect-ratio: 2 / 1; }
  .posts > li:first-child .post__title { font-size: 21px; }
}

/* ═══════════ 14 · Соцсети ═══════════ */

.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.feed li:nth-child(n+7) { display: none; }
.feed a { display: block; border-radius: var(--r-sm); overflow: hidden; }
.feed img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  background: var(--paper-2);
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.feed a:hover img { transform: scale(1.05); filter: saturate(1.1); }

.social__btns { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (min-width: 760px) { .feed { gap: 12px; } }

/* ═══════════ 15 · FAQ ═══════════ */

.acc { display: grid; gap: 10px; }
.acc__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.acc__item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 18px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
}
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 2.2px solid var(--crimson);
  border-bottom: 2.2px solid var(--crimson);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--ease);
}
.acc__item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.acc__item[open] summary { color: var(--crimson); }
/* app.js animates height and bottom padding on open/close, so this has
   to clip during the transition. */
.acc__body { padding: 0 18px 18px; color: var(--muted); font-size: 15px; overflow: hidden; }
.acc__body > *:first-child { margin-top: 0; }

/* ═══════════ 16 · Финальный CTA ═══════════ */

.final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, #2A211E, #40302B);
  color: #fff;
}
.final__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .55;
}
.final::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(30,22,20,.35), rgba(30,22,20,.82));
}
.final__in { padding-block: 64px; text-align: center; }

/* The character line-up doubles as the block's decoration, which is the
   brief's second option for this section — it does more for recall than
   another photograph would. */
.final__team {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 4px; margin-bottom: 26px; flex-wrap: wrap;
}
.final__team svg, .final__team img {
  width: auto; height: clamp(64px, 15vw, 104px);
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.3));
}
.final__lead { margin-top: 14px; font-size: clamp(15.5px, 3.4vw, 18px); color: rgba(255,255,255,.82); }
.final__cta { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.final .btn--ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); color: #fff; }
.final .btn--ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }

@media (min-width: 760px) { .final__in { padding-block: 96px; } }

/* ═══════════ 17 · Футер ═══════════ */

.foot { background: #241E1A; color: rgba(255,255,255,.72); }
.foot__in { padding-block: 44px 30px; display: grid; gap: 30px; }
.foot__brand p { margin-top: 12px; font-size: 14px; max-width: 30ch; }
.foot .hdr__name { color: #fff; }
.foot .hdr__brand img { width: 38px; height: 38px; }

.foot__nav { display: grid; gap: 10px; font-size: 14.5px; align-content: start; }
.foot__nav a:hover { color: #fff; }

.foot__contacts { display: grid; gap: 7px; align-content: start; font-size: 14.5px; }
.foot__contacts h3 {
  font-family: "Unbounded", sans-serif; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 5px;
}
.foot__contacts a:hover { color: #fff; }
.foot__contacts p { font-size: 13.5px; color: rgba(255,255,255,.5); }
.foot__soc { margin-top: 10px; display: flex; gap: 8px; }
.foot__soc a {
  width: 38px; height: 38px; display: grid; place-content: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 11px;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.foot__soc a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.foot__soc svg { width: 19px; height: 19px; }
/* WhatsApp keeps its own green on hover — it is the one channel people
   look for by colour. */
.foot__soc--wa:hover { background: rgba(37,211,102,.18); border-color: #25D366; color: #4BE68C; }

.foot__legal {
  display: grid; gap: 12px; align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
}
.foot__legal a:hover { color: #fff; text-decoration: underline; }
.foot__copy { color: rgba(255,255,255,.45); }
.lang--foot { justify-self: start; background: rgba(255,255,255,.1); }
.lang--foot .lang__btn { color: rgba(255,255,255,.6); }
.lang--foot .lang__btn.is-on { background: rgba(255,255,255,.92); color: var(--ink); }

@media (min-width: 780px) {
  .foot__in { grid-template-columns: 1.3fr .8fr 1fr; gap: 40px; }
  .foot__legal {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto auto;
    gap: 24px;
  }
  .foot__legal .foot__copy { order: 5; margin-left: auto; }
}

/* ═══════════ overlays ═══════════ */

.modal {
  width: min(94vw, 900px);
  max-height: 92dvh;
  padding: 0; border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.modal::backdrop { background: rgba(24,18,16,.72); backdrop-filter: blur(3px); }
.modal__body { max-height: 92dvh; overflow: auto; border-radius: var(--r-lg); }
.modal__body img { width: 100%; height: auto; }
.modal__body video { width: 100%; height: auto; max-height: 88dvh; background: #000; display: block; }
.modal__body h3 { padding: 18px 20px 16px; font-size: 16px; }
.modal__close {
  position: absolute; right: 8px; top: -46px;
  width: 38px; height: 38px;
  display: grid; place-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink);
  cursor: pointer;
}
.modal__close svg { width: 19px; height: 19px; }
@media (max-width: 520px) {
  .modal__close { top: 8px; right: 8px; box-shadow: var(--shadow-md); }
}

/* Mobile dock — appears once the hero is gone. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; gap: 8px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(251,247,242,.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.dock.is-up { transform: none; }
.dock[hidden] { display: none; }   /* `display: flex` above beats the UA hidden rule */
.dock .btn { flex: 1; }
@media (min-width: 900px) { .dock { display: none; } }