/* ── Уместно — production layer on top of styles.css ─────────────
   Adds the mobile burger menu and a consolidated ≤768px responsive
   layer (single column, full-width CTAs, card stacking, swipe reviews).
   The fluid system (clamp/fr/vw) from styles.css is preserved. */

/* ── Burger button (hidden on desktop) ─────────────────── */
.u-burger{
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent;
  border: 0;
  border-radius: 8px;
  flex-shrink: 0;
}
.u-burger span{
  display: block;
  width: 24px; height: 2px;
  background: var(--u-ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
body.u-nav-open .u-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.u-nav-open .u-burger span:nth-child(2){ opacity: 0; }
body.u-nav-open .u-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav panel ──────────────────────────────────── */
.u-mobile-nav{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px clamp(20px, 4vw, 56px) 24px;
  background: rgba(255,253,249,.98);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--u-line);
}
.u-mobile-nav[hidden]{ display: none; }
.u-mobile-nav a{
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--u-ink-2);
  padding: 14px 2px;
  border-bottom: 1px solid var(--u-line);
}
.u-mobile-nav a:hover{ color: var(--u-ink); }
.u-mobile-nav .u-btn{
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}

/* result checklist check icon — mobile only */
.u-result-card__check{ display: none; }

/* ── ≤768px mobile layer ───────────────────────────────── */
@media (max-width: 768px){
  /* header: swap inline nav + CTA for the burger */
  .u-nav{ display: none !important; }
  .u-header__cta{ display: none !important; }
  .u-burger{ display: inline-flex; }

  /* full-width primary CTAs */
  main .u-btn--lg,
  main .u-btn--accent,
  main .u-btn--sage{
    width: 100%;
    justify-content: center;
  }

  /* single-column stacks */
  .u-steps--4{ grid-template-columns: 1fr; gap: 36px; }
  .u-step-card{
    border-right: 0;
    border-bottom: 1px solid var(--u-line);
    padding: 0 0 28px 0 !important;
  }
  .u-step-card:last-child{ border-bottom: 0; padding-bottom: 0 !important; }
  .u-step-card h4{ min-height: 0; }

  /* result cards → checklist of what you get, revealed on scroll */
  .u-result-cards{ display: block; border: 0; }
  .u-result-cards .u-result-card{
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0;
    padding: 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--u-line) !important;
    background: transparent !important;
  }
  .u-result-cards .u-result-card:last-child{ border-bottom: 0 !important; }
  .u-result-card__check{
    display: block;
    grid-column: 1; grid-row: 1;
    width: 24px; height: 24px;
    margin-top: 1px;
    color: var(--u-sage-d);
  }
  .u-result-card__check svg{ width: 100%; height: 100%; display: block; }
  .u-result-cards .u-result-card h5{ grid-column: 2; grid-row: 1; font-size: var(--fs-xl); }
  .u-result-cards .u-result-card p{ grid-column: 2; grid-row: 2; font-size: var(--fs-sm); }

  /* scroll reveal (JS-armed): each row + its check appear in turn */
  .u-result-cards.reveal-armed .u-result-card{
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .u-result-cards.reveal-armed .u-result-card.is-in{ opacity: 1; transform: none; }
  .u-result-cards.reveal-armed .u-result-card__check{
    opacity: 0; transform: scale(.3);
    transition: transform .45s cubic-bezier(.2,1.4,.4,1) .1s, opacity .3s ease .1s;
  }
  .u-result-cards.reveal-armed .u-result-card.is-in .u-result-card__check{
    opacity: 1; transform: scale(1);
  }

  .u-footer__grid{ grid-template-columns: 1fr 1fr; gap: 28px; }
  .u-footer__brand{ grid-column: 1 / -1; }
  .u-footer__bottom{ flex-direction: column; gap: 8px; align-items: flex-start; }

  /* hero magazine — keep the photo from getting too tall */
  .u-hero__mag-photo{ aspect-ratio: 4/3; min-height: 0; }
  .u-hero__mag-meta{ grid-template-columns: 1fr; row-gap: 18px; }
  .u-hero__mag-meta-list{ width: 100%; }

  /* config: stack already at 900; tidy paddings */
  .u-config2__form,
  .u-config2__result{ padding: 24px 20px; }
  .u-config2__sizes{ gap: 8px; }

  /* reviews — copy above the swipeable compare pair */
  .u-review-slide{ gap: 32px; padding: 0; }
  .u-review-slide__compare{ gap: 12px; }
  .u-review-slide__col:first-child,
  .u-review-slide__col:nth-child(2){ transform: none; }
  .u-review-slide__img{ border-width: 5px; }
  .u-review-slide__caption{ font-size: var(--fs-xs); }

  /* notes: keep mono notes readable, not oversized */
  .u-result-note,
  .u-steps__note{ font-size: var(--fs-sm) !important; align-items: flex-start; }

  /* section header lede sizing */
  .u-sec-head__title{ max-width: 100%; }
}

/* very small phones — stack the До/После pair */
@media (max-width: 460px){
  .u-review-slide__compare{ grid-template-columns: 1fr; }
}

/* Form controls must be allowed to shrink inside grid/flex tracks.
   By default a text input keeps its intrinsic width (~size attr), and with
   min-width:auto on the grid/flex item it refuses to shrink — two size
   inputs then overflow a narrow viewport and stretch the whole page. */
.u-calc__sz{ min-width: 0; }
.u-calc__sz input,
.u-calc__select-wrap select,
.u-apology__email input{ width: 100%; min-width: 0; }
.u-calc__item-row{ min-width: 0; }
/* safety net against any residual horizontal overflow */
.u-calc{ overflow-x: clip; }
body{ overflow-x: hidden; }

/* ── configurator (/configure, /no-fit) mobile fixes ───── */
/* The global .u-container leaves ~40px outer margin + 40px inner padding
   on mobile (from --container: calc(100vw - 80px) + --gutter: 40px), which
   wasted horizontal space site-wide and squeezed the calc form card so the
   big heading overflowed. Widen the container on every page for mobile and
   let long calc headings wrap. */
@media (max-width: 768px){
  .u-container{
    max-width: 100%;
    padding-left: clamp(14px, 4vw, 24px);
    padding-right: clamp(14px, 4vw, 24px);
  }
  .u-calc__form-card{
    padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 24px);
    border-radius: 16px;
    gap: 24px;
  }
  .u-calc__title{
    font-size: clamp(30px, 8vw, 44px);
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* choice cards stay 3-across on mobile, each ≈ (viewport − paddings)/3 */
  .u-calc__choices{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .u-calc__choice{
    min-width: 0;
    height: auto !important;
    padding: 16px 6px;
    gap: 8px;
    font-size: var(--fs-xs);
  }
  .u-calc__choice-ic{ width: 34px; height: 34px; }
  .u-calc__choice-t{ text-align: center; line-height: 1.2; }
  .u-calc__choice-soon{ top: 6px; right: 6px; padding: 2px 5px; }
  /* primary CTA: drop the 280px min so it fits narrow screens */
  .u-calc__actions .u-calc__cta{ min-width: 0; width: 100%; }
  /* sidebar «Совет» tip is redundant on mobile */
  .u-calc__tip{ display: none; }
  /* apology page — tighter hierarchy + slimmer decorative band */
  .u-apology{ padding-top: 12px; gap: 18px; }
  .u-apology__body{ padding: clamp(24px, 6vw, 36px); gap: 18px; }
  .u-apology__title{ font-size: clamp(29px, 8.2vw, 40px); }
  .u-apology__lede{ font-size: var(--fs-sm); }
  .u-apology__what{ padding: 18px 16px; gap: 12px; }
  /* slim banner; small olive sprigs in opposite corners, tips → edges */
  .u-apology__art{ aspect-ratio: auto; height: 124px; border-radius: 18px; }
  .u-apology__art > img{ width: 26%; opacity: .5; }
  .u-apology__art > img:first-child{ right: -4%; bottom: -12%; top: auto; left: auto; transform: none; }
  .u-apology__art > img.twig{ left: -4%; top: -12%; right: auto; bottom: auto; transform: rotate(180deg); }
}
@media (max-width: 520px){
  /* item rows: stack «что хранить» over «объём» so long select
     labels (e.g. «Средне (9–16 пар)») aren't clipped in a ~156px track */
  .u-calc__item-row{ grid-template-columns: 1fr; }
  .u-calc__item-row .u-calc__item-rm{ grid-column: auto; }
}
@media (max-width: 480px){
  .u-calc__step-marker{ font-size: var(--fs-xl); }
}

/* ════════════════════════════════════════════════════════════
   MOBILE EDITORIAL LAYER — the landing is mobile-first in usage,
   so ≤768px gets a purpose-built layout instead of a squeezed
   desktop. Three areas: hero breathing room, problem-card
   hierarchy, and a horizontal accordion for the 4 steps.
   ════════════════════════════════════════════════════════════ */
/* the head wrapper is invisible to layout on desktop — the number
   and h4 act as direct children of the step card (as before). The
   mobile accordion turns it into a real left-edge "spine". */
.u-step-card__head{ display: contents; }

@media (max-width: 768px){
  /* ── Hero: give it air ──────────────────────────────────── */
  .u-hero__mag-shell{
    gap: 30px;
    padding-top: 16px;
    padding-bottom: clamp(44px, 12vw, 64px);
  }
  /* the giant editorial title overwhelms a phone at 64px+;
     bring it down and open the leading so it breathes */
  .u-hero h1.u-hero__mag-title{
    font-size: clamp(40px, 12.5vw, 58px);
    line-height: 1.0;
    width: 100%;
  }
  /* third line hugs the right screen edge */
  .u-hero__mag-title .row-2{ align-self: flex-end; text-align: right; }
  /* base block rhythm 24px; two gaps pulled tighter optically */
  .u-hero__mag-shell{ gap: 24px; }
  .u-hero__mag-topbar{ padding-top: 0; padding-bottom: 0; }
  /* the large serif title carries internal top leading, so the
     eyebrow→title gap reads larger — pull it up to match */
  .u-hero__mag-banner{ display: flex; flex-direction: column; gap: 24px; margin-top: -8px; }
  .u-hero__mag-meta{ row-gap: 24px; margin-top: 0; }
  .u-hero__mag-meta-list li{ padding: 6px 0; }
  /* raise the photo closer to the lede; right-align the inline price tag */
  .u-hero__mag-photo{ margin-top: -10px; min-height: 0; text-align: right; }
  /* price tag: quieter and pinned to the right edge */
  .u-hero__mag-price{ margin-top: -40px; padding: 10px 14px; gap: 4px; border-radius: 14px; text-align: left; }
  .u-hero__mag-price-row{ gap: 14px; }
  .u-hero__mag-price .label{ font-size: var(--fs-xs); }
  .u-hero__mag-price .amt{ font-size: var(--fs-lg); }
  .u-hero__mag-price .sub{ font-size: var(--fs-2xs); padding-top: 4px; }
  /* CTA «Начать расчёт» below, normal rhythm */
  .u-hero__mag-foot{ padding-top: 26px; }
  .u-hero__mag-cta{ font-size: 30px; gap: 14px; padding-bottom: 10px; }

  /* ── Problem cards: clear hierarchy under the section title ─ */
  .u-pain{
    grid-template-columns: 48px 1fr !important;
    column-gap: 18px;
    row-gap: 10px;
    padding: 30px 0 !important;
  }
  .u-pain__icon{ width: 44px; height: 44px; margin-left: 0; }
  .u-pain h3{ font-size: var(--fs-xl); padding-top: 2px; }   /* 24px vs 34px head */
  .u-pain p{ font-size: var(--fs-md); }

  /* ── Steps: vertical timeline with a scroll progress line ──
     No cards/background. A left rail fills as you scroll; each
     step's number sits on the rail as a node (JetBrains Mono). */
  .u-steps--4{
    display: block;
    grid-template-columns: none;
    gap: 0;
    position: relative;
    padding: 6px 0 0;
    overflow: visible;
  }
  /* the rail (unfilled) */
  .u-steps--4::before{
    content: "";
    position: absolute;
    left: 17px; top: 24px; bottom: 24px;
    width: 2px;
    background: var(--u-line-2);
    border-radius: 2px;
  }
  /* the rail (filled by scroll progress) */
  .u-steps--4::after{
    content: "";
    position: absolute;
    left: 17px; top: 24px;
    width: 2px;
    height: var(--steps-progress, 0px);
    background: var(--u-accent);
    border-radius: 2px;
    transition: height .12s linear;
  }
  .u-step-card{
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 18px;
    align-items: start;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 48px 0 !important;
    margin: 0 !important;
    position: relative;
  }
  .u-step-card:last-child{ padding-bottom: 6px !important; }
  .u-step-card::after{ display: none !important; }
  .u-step-card__head{ display: contents; }
  /* number node on the rail */
  .u-step-card .u-step-card__num{
    grid-column: 1; grid-row: 1;
    width: 36px; height: 36px;
    margin: 0;
    border-radius: 50%;
    background: var(--u-bg);
    border: 1.5px solid var(--u-line);
    color: var(--u-ink-3);
    font-family: var(--f-mono);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
  }
  /* node turns solid once the progress line reaches it */
  .u-step-card.is-reached .u-step-card__num{
    background: var(--u-accent);
    border-color: var(--u-accent);
    color: #fff;
  }
  .u-step-card:nth-child(3).is-reached .u-step-card__num{
    background: var(--u-sage-d);
    border-color: var(--u-sage-d);
  }
  .u-step-card h4{
    grid-column: 2; grid-row: 1;
    min-height: 36px;
    display: flex; align-items: center;
    margin: 0;
    font-size: var(--fs-xl);
    line-height: var(--lh-tight);
  }
  .u-step-card__rule{ display: none; }
  .u-step-card p{
    grid-column: 2; grid-row: 2;
    margin: 2px 0 0;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
  }
}

/* ════════════════════════════════════════════════════════════
   «Как это работает» (config2) — mobile rework.
   Desktop keeps two side-by-side columns with a detached I/II
   header row. When the columns stack, that header row detaches
   the «II» label from the result, so on mobile we hide it and
   give each part its own inline heading, move the CTA to the end
   (after the result), enlarge the scheme and use a 2×2 product
   grid. ════════════════════════════════════════════════════════ */
.u-config2__part{ display: none; }

@media (max-width: 900px){
  /* the detached top I/II row → per-part inline headings */
  .u-config2__colheads{ display: none; }
  .u-config2__part{
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: var(--fs-xl);
    color: var(--u-ink);
    line-height: 1.1;
    margin: 0 0 6px;
  }
  .u-config2__part-num{
    font-family: var(--f-display);
    font-style: italic;
    font-size: var(--fs-2xl);
    line-height: 1;
    color: var(--u-accent);
  }
  .u-config2__part--ii{ color: var(--u-sage-d); }
  .u-config2__part--ii .u-config2__part-num{ color: var(--u-sage-d); }
}

@media (max-width: 768px){
  .u-config2__form,
  .u-config2__result{ padding: 22px 18px 24px; gap: 20px; }
  /* dedicated portrait (3:4) mobile scheme image fills exactly */
  .u-config2__schema{ aspect-ratio: 3 / 4; }
  /* recommended products: two rows of two, compact type */
  .u-config2__products{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .u-config2__pr-n{ font-size: 11px; }
  .u-config2__pr-sub{ font-size: 10px; }
  /* fineprint under the CTA */
  .u-config2__fineprint{ font-size: 9px; }
  /* keep a normal gap before the note when stacked (no column to fill) */
  .u-config2__compat-note{ margin-top: 14px; }
}

/* on mobile the CTA is moved (via JS) out of the form to sit after the
   result as a full-width card footer; desktop keeps it inside the form */
.u-config2__cta-area.is-footer{
  margin-top: 0;
  align-items: center;
  padding: 22px 18px 26px;
  border-top: 1px solid var(--u-line);
  background: var(--u-card);
}
.u-config2__cta-area.is-footer .u-config2__cta-btn{
  font-size: var(--fs-sm);
  padding: 15px 18px;
  white-space: normal;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════
   «Как это работает» — scroll-triggered reveal (JS-armed).
   The .anim-armed class is added by JS only when motion is allowed,
   so without JS / with reduced motion everything is visible as-is.
   ════════════════════════════════════════════════════════════ */
.u-config2.anim-armed .u-config2__schema,
.u-config2.anim-armed .u-config2__pr-card{
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.u-config2.anim-armed .u-config2__schema{
  transition: opacity .55s ease, transform .55s ease;
}
.u-config2.anim-armed .u-config2__pr-card{
  transition: opacity .5s ease, transform .5s ease;
}
.u-config2.anim-armed .u-config2__schema.is-in,
.u-config2.anim-armed .u-config2__pr-card.is-in{
  opacity: 1;
  transform: none;
}
/* size fields glow softly while the values count up */
.u-config2__sz.is-filling,
.u-config2__sz.is-filling:focus-within{ border-color: var(--u-accent); }

/* ════════════════════════════════════════════════════════════
   Mobile connector — the link between part I (input) and part II
   (result). On phones the divider becomes a short vertical rail;
   when scrolled into view a pulse travels down it (input → result).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .u-config2__divider{
    height: 56px;
    background: transparent;
    position: relative;
  }
  .u-config2__divider::before{          /* the rail */
    content: "";
    position: absolute;
    left: 50%; top: 6px; bottom: 6px;
    width: 2px; margin-left: -1px;
    background: var(--u-line-2);
    border-radius: 2px;
  }
  .u-config2__divider::after{           /* the bead — position driven by scroll */
    content: "";
    position: absolute;
    left: 50%;
    top: var(--c2-dot, calc(50% - 5.5px));
    width: 11px; height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: var(--u-accent);
    box-shadow: 0 0 0 4px rgba(208,138,114,.16);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .u-config2__divider.is-active::after{ opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   «Не просто красиво. Логично.» — keep the magazine feel on mobile:
   a small (≈2-line) drop-cap opens every principle, the lead stays
   inline-bold, and the grey example becomes its own block set off by
   a thin left rule. Desktop two-column essay is unchanged.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .u-logic-essay{
    font-size: var(--fs-md);
    line-height: 1.72;
    margin: 8px 0 44px;
  }
  .u-logic-essay p{
    margin: 0 0 40px;
    color: var(--u-ink-2);
  }
  .u-logic-essay p:last-child{ margin-bottom: 0; }
  /* principles open with a small raised initial (baseline on the
     first line's bottom) */
  .u-logic-essay p::first-letter{
    float: none;
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 2em;
    line-height: 1;
    color: var(--u-ink);        /* 2–4 in the main text colour */
    padding: 0;
    margin: 0 -1px 0 0;         /* flush — reads as part of the word */
  }
  /* the opening principle keeps a big article-style drop-cap
     (override the more-specific desktop first-child rule here) */
  .u-logic-essay > p:first-child::first-letter{
    float: left;
    font-size: 3.4em;
    line-height: 0.78;
    color: var(--u-accent);     /* opener stays accent */
    padding: 6px 12px 0 0;
    margin: 0;
  }
  .u-logic-essay__lead{
    display: inline;
    font-weight: var(--fw-card);
    color: var(--u-ink);
  }
  /* grey example → just a new muted line tucked under the body */
  .u-logic-essay__sub{
    display: block;
    clear: left;
    margin-top: 5px;
    color: var(--u-ink-3);
    font-size: var(--fs-sm);
    line-height: 1.65;
  }
}

/* ════════════════════════════════════════════════════════════
   PROTOTYPE — carry the mobile principle treatment to desktop:
   small raised ink initials on principles 2–4 and the grey example
   as its own muted line. The first principle keeps its big accent
   drop-cap (defined in styles.css). ≥769px only.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px){
  .u-logic-essay p::first-letter{
    float: none;
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 2em;
    line-height: 1;
    color: var(--u-ink);
    margin: 0 -1px 0 0;
  }
  .u-logic-essay__sub{
    display: block;
    margin-top: 6px;
    color: var(--u-ink-3);
  }
}

/* ════════════════════════════════════════════════════════════
   «Логика» + finale — desktop width/spacing tuning (≥769px).
   ════════════════════════════════════════════════════════════ */
/* staggered title: «Логично.» drops to its own line. On mobile it's
   right-aligned; on desktop it starts where «красиво.» ends (≈ width of
   the first line, in em so it scales with the font). */
section[data-screen-label="06 Не просто красиво. Логично"] .u-sec-head__title{ max-width: none; }
section[data-screen-label="06 Не просто красиво. Логично"] .u-sec-head__title em{
  display: block;
  width: fit-content;
  margin-left: auto;          /* mobile: align to the right edge */
}

@media (min-width: 769px){
  section[data-screen-label="06 Не просто красиво. Логично"] .u-sec-head__title em{ margin-left: 7.6em; }
  section[data-screen-label="06 Не просто красиво. Логично"] .u-sec-head__lede{ max-width: 90ch; }
  .u-logic-essay{ max-width: 80ch; }
  .u-logic-finale{ max-width: 100ch; }
  /* inside the AI card: more air under the title, pull-quote at body size */
  .u-logic-finale__title{ margin-bottom: 28px; }
  .u-logic-finale__pull{ font-size: var(--fs-md) !important; }
}

/* Interlude quote — smaller on mobile (inline size is set on the markup) */
@media (max-width: 768px){
  .u-interlude__text,
  .u-interlude__text em{ font-size: clamp(24px, 6.5vw, 26px) !important; }
}

/* ════════════════════════════════════════════════════════════
   Reviews — mobile before/after drag-slider.
   The before/after frames are identical, so on mobile we overlay
   them into one full-width image and reveal «После» by dragging a
   handle. The comparison leads (order:-1); quote/author/nav follow.
   Captions cross-fade with the handle: «До» left, «После» right.
   Desktop keeps the side-by-side compare. ═══════════════════════ */
.u-review-slide__handle{ display: none; }

@media (max-width: 768px){
  .u-review-slide{ display: flex; flex-direction: column; gap: 18px; }
  /* «История 01 / 5» eyebrow above the photos */
  .u-review-slide__num{ order: -2; margin: 0; }
  /* smaller testimonial text */
  .u-review-slide__quote{ font-size: var(--fs-md) !important; }
  .u-review-slide__copy{ gap: 16px; }
  /* nav on the left, author on the right, one row */
  .u-review-slide__foot{
    display: flex; flex-direction: row-reverse;
    align-items: flex-end; justify-content: space-between; gap: 12px;
  }
  .u-review-slide__author .meta{ text-align: right; }
  .u-review-nav{ margin-top: 0; gap: 8px; }
  .u-review-nav button.nav{ width: 32px; height: 32px; }
  .u-review-nav .dots button{ width: 6px; height: 6px; }
  .u-review-nav .dots button.active{ width: 18px; }
  .u-review-slide__compare{
    order: -1;                       /* photos lead */
    position: relative;
    display: block;
    gap: 0;
    touch-action: pan-y;             /* vertical scroll ok, we handle horizontal */
    --ba: 50%;
    --ban: .5;
  }
  .u-review-slide__col{ transform: none !important; gap: 0; position: relative; }
  .u-review-slide__col:nth-child(2){
    position: absolute; inset: 0 0 auto 0; width: 100%;
    pointer-events: none;
  }
  .u-review-slide__img{
    margin: 0; border-radius: 8px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 16px 34px -18px rgba(80,60,40,.42);
  }
  /* polaroid frames: thin sides, wide coloured bottom holds the caption.
     До terracotta, После sage. */
  .u-review-slide__col:first-child .u-review-slide__img{
    border: 6px solid #B6735C; border-bottom-width: 52px;
  }
  .u-review-slide__col:nth-child(2) .u-review-slide__img{
    border: 6px solid #7D8C72; border-bottom-width: 52px;
    clip-path: inset(0 0 0 var(--ba));   /* reveal «После» right of the handle */
  }
  .u-review-slide__img .pill{ left: 10px; top: 10px; }
  .u-review-slide__col:nth-child(2) .u-review-slide__img .pill.after{ left: auto; right: 10px; }

  /* drag handle (visual; JS sets its height to the image) */
  .u-review-slide__handle{
    display: block; position: absolute;
    top: 6px; left: var(--ba); height: var(--ba-h, 60vw);
    width: 2px; margin-left: -1px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
    z-index: 4; pointer-events: none;
  }
  .u-review-slide__handle span{
    position: absolute; top: 50%; left: 50%;
    width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    box-shadow: 0 2px 10px rgba(0,0,0,.28);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none' stroke='%23B6735C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 13l-4 6 4 6M22 13l4 6-4 6'/></svg>");
    background-repeat: no-repeat; background-position: center;
  }

  /* caption sits on the coloured polaroid bottom; the dominant side's
     caption shows, the other fades out (no overlapping letters) */
  .u-review-slide__caption{
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 52px; margin: 0;
    display: flex; align-items: center;
    padding: 0 12px;
    color: #FFFDF9;
    font-family: var(--f-sans);
    font-size: var(--fs-xs); line-height: 1.3;
    text-align: left;
    transition: opacity .25s ease;
  }
  .u-review-slide__col:first-child .u-review-slide__caption{ opacity: calc(1 - var(--ban)); }
  .u-review-slide__col:nth-child(2) .u-review-slide__caption{ opacity: var(--ban); z-index: 5; }
}

/* ════════════════════════════════════════════════════════════
   Header + mobile menu — warm (hero-colour) bar, softer CTA, and a
   full-screen magazine-style mobile menu.
   ════════════════════════════════════════════════════════════ */
.u-header{
  background: var(--u-warm);   /* solid hero warm (no blur → fixed menu fills viewport) */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(80, 60, 40, .08);
}
/* softer CTA (outline) in header + menu — fixes dark-on-sage text */
.u-header__cta .u-btn,
.u-mobile-nav .u-btn{
  background: transparent !important;
  color: var(--u-sage-d) !important;
  border: 1.5px solid var(--u-sage-d) !important;
  font-weight: 600;
}
.u-header__cta .u-btn:hover,
.u-mobile-nav .u-btn:hover{
  background: var(--u-sage-d) !important;
  color: #FFFDF9 !important;
}

@media (max-width: 768px){
  body.u-nav-open{ overflow: hidden; }
  /* full-screen warm overlay below the header */
  .u-mobile-nav{
    position: fixed; left: 0; right: 0; top: 72px; bottom: 0;
    z-index: 45;
    background: var(--u-warm);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0;
    display: flex; flex-direction: column; gap: 0;
    padding: clamp(20px, 5vw, 30px) clamp(20px, 6vw, 40px) calc(env(safe-area-inset-bottom, 0px) + 28px);
    overflow-y: auto;
    counter-reset: mnav;
  }
  /* editorial nav links: big serif + mono index */
  .u-mobile-nav a:not(.u-btn){
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.0;
    color: var(--u-ink);
    padding: 22px 0;
    border-bottom: 1px solid rgba(80, 60, 40, .12);
    display: flex; align-items: baseline; gap: 16px;
  }
  .u-mobile-nav a:not(.u-btn)::before{
    counter-increment: mnav;
    content: counter(mnav, decimal-leading-zero);
    font-family: var(--f-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-widest);
    color: var(--u-accent);
    align-self: flex-start;
    margin-top: 6px;
  }
  .u-mobile-nav .u-btn{
    margin: 28px 0 0;
    width: 100%; justify-content: center;
    padding: 16px 24px; font-size: var(--fs-md);
  }
}

/* ════════════════════════════════════════════════════════════
   Subpage nav (configure / no-fit): a single first-level
   «О сервисе» (→ landing Hero) with the landing sections as a
   submenu — desktop hover-dropdown, mobile nested list.
   Scoped to .u-header--sub / .u-navgroup so the landing nav is
   untouched.
   ════════════════════════════════════════════════════════════ */
/* desktop dropdown */
.u-navgroup{ position: relative; }
.u-navgroup__top{ display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.u-navgroup__caret{
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55; margin-top: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.u-navgroup:hover .u-navgroup__caret,
.u-navgroup:focus-within .u-navgroup__caret{ transform: rotate(180deg); opacity: .85; }
.u-navgroup__sub{
  position: absolute; top: calc(100% + 16px); right: 0;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 210px;
  background: var(--u-card, #FFFDF9);
  border: 1px solid var(--u-line);
  border-radius: 12px;
  padding: 9px;
  box-shadow: 0 20px 44px -20px rgba(60, 45, 30, .38);
  opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.u-navgroup__sub::before{ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.u-navgroup:hover .u-navgroup__sub,
.u-navgroup:focus-within .u-navgroup__sub{ opacity: 1; visibility: visible; transform: translateY(0); }
.u-navgroup__sub a{
  font-size: var(--fs-sm); color: var(--u-ink-2); font-weight: 500;
  padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
.u-navgroup__sub a:hover{ color: var(--u-ink); background: var(--u-warm); }

/* mobile nested list */
@media (max-width: 768px){
  .u-header--sub .u-mobile-nav a.u-mnav-top{
    font-family: var(--f-display); font-weight: 500;
    font-size: clamp(34px, 10vw, 48px); line-height: 1.0;
    color: var(--u-ink);
    padding: 6px 0 22px; margin-bottom: 6px;
    border-bottom: 1px solid rgba(80, 60, 40, .14);
    display: block;
  }
  .u-header--sub .u-mobile-nav a.u-mnav-top::before{ content: none; }
  .u-header--sub .u-mnav-sub{
    display: flex; flex-direction: column;
    counter-reset: mnav;
  }
  .u-header--sub .u-mobile-nav .u-mnav-sub a{
    font-family: var(--f-display); font-weight: 500;
    font-size: clamp(22px, 6.5vw, 30px); line-height: 1.0;
    color: var(--u-ink-2);
    padding: 19px 0;
    border-bottom: 1px solid rgba(80, 60, 40, .10);
    display: flex; align-items: baseline; gap: 14px;
  }
  .u-header--sub .u-mobile-nav .u-mnav-sub a::before{
    counter-increment: mnav;
    content: counter(mnav, decimal-leading-zero);
    font-family: var(--f-mono); font-size: var(--fs-2xs);
    letter-spacing: var(--tr-widest); color: var(--u-accent);
    align-self: flex-start; margin-top: 5px;
  }
}