/* landing-pages.css - product-facing pages outside the legal template.
   Scope: .landing-page only. Legal documents are intentionally untouched. */

.landing-page { overflow-x: hidden; }
.landing-page main { width: 100%; }

.lp-shell { width: min(100%, var(--container-wide)); margin-inline: auto; padding-inline: var(--gutter); }
.lp-section { padding-block: clamp(3rem, 6vw, 5.25rem); }
.lp-section--compact { padding-block: clamp(2.25rem, 4.6vw, 3.75rem); }
.lp-band { background: var(--surface); border-block: 1px solid var(--line);
  /* Полоса песочная - значит, все внутри нее переворачивается на светлое:
     иначе чип или гармошка на ней сливаются с ней в один тон. */
  --fon-tihiy: var(--bg); --fon-navedeniya: var(--karta); }
.lp-band--sage { background: color-mix(in srgb, var(--sage-bg) 72%, var(--bg));
  --podsvetka-ssylki: var(--karta); }
.lp-band--dark { background: var(--ink); color: var(--ink-on-dark); }
.lp-band--dark :where(h2,h3,strong) { color: var(--ink-on-dark); }
.lp-band--dark p { color: var(--ink-on-dark-2); }

.lp-kicker { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .85rem; color: var(--terra-text); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.lp-kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--cta); }
.lp-heading { max-width: 900px; font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3.45rem); line-height: 1.08; font-weight: 600; letter-spacing: -.025em; }
.lp-heading--medium { font-size: clamp(1.75rem, 3.5vw, 2.65rem); }
.lp-lead { max-width: 760px; margin-top: 1rem; color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.16rem); line-height: 1.65; }
.lp-section-head { margin-bottom: clamp(1.5rem, 3vw, 2.35rem); }
.lp-section-head--center { text-align: center; }
.lp-section-head--center :where(.lp-heading,.lp-lead) { margin-inline: auto; }

.lp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.35rem; }
.lp-actions .cta { width: auto; min-width: 210px; }
.lp-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: var(--cta-h); padding: 0 1.35rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--fon-tihiy); color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none; transition: color calc(140ms * var(--motion)) ease, transform calc(120ms * var(--motion)) ease, background calc(140ms * var(--motion)) ease, border-color calc(140ms * var(--motion)) ease; }
@media (hover:hover) and (pointer:fine) { .lp-btn-secondary:hover { background: var(--fon-navedeniya); transform: translateY(-2px); } }

.lp-icon { --icon: none; display: inline-grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--sage-bg); }
.lp-icon::before { content: ""; width: 23px; height: 23px; background: var(--sage); -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.lp-icon--profile { --icon: url('/assets/icons/profile.d58c5954.svg'); }
.lp-icon--compass { --icon: url('/assets/icons/compass.901c2c30.svg'); }
.lp-icon--heart { --icon: url('/assets/icons/heart.6b2f7202.svg'); }
.lp-icon--energy { --icon: url('/assets/icons/energy.6929e036.svg'); }
.lp-icon--briefcase { --icon: url('/assets/icons/briefcase.0d8d10c5.svg'); }
.lp-icon--family { --icon: url('/assets/icons/family.814f0876.svg'); }
.lp-icon--eye { --icon: url('/assets/icons/eye.31142daf.svg'); }
.lp-icon--links { --icon: url('/assets/icons/links.130a5140.svg'); }
.lp-icon--route { --icon: url('/assets/icons/route.fa96d2c0.svg'); }
.lp-icon--mail { --icon: url('/assets/icons/mail.5c400667.svg'); }
.lp-icon--payment { --icon: url('/assets/icons/payment.24c80e5e.svg'); }
.lp-icon--shield { --icon: url('/assets/icons/shield-data.43511a52.svg'); }
.lp-icon--document { --icon: url('/assets/icons/document.676f1538.svg'); }
.lp-icon--scales { --icon: url('/assets/icons/scales.f55340cd.svg'); }
.lp-icon--question { --icon: url('/assets/icons/question.ac499f02.svg'); }/* ---------- Home ---------- */

.home-page .home-hero__text { display: grid; align-content: end; }
.home-page .home-hero__text .lp-actions { margin-top: 1rem; }
.home-page .home-hero__text .cta,
.home-page .home-hero__text .lp-btn-secondary {
  min-height: var(--cta-h);
  padding-inline: 1rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
.home-trust-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.home-trust-chip { display: inline-flex; align-items: center; gap: .42rem; min-height: 34px; padding: .35rem .7rem; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--ink-2); font-size: .75rem; font-weight: 600; }
.home-trust-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.home-directions { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1rem; }
.home-direction { position: relative; display: flex; flex-direction: column; min-height: 250px; grid-column: span 4; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); overflow: hidden; text-decoration: none; box-shadow: 0 1px 0 rgba(44,39,35,.02); transition: transform calc(140ms * var(--motion)) ease, box-shadow calc(140ms * var(--motion)) ease, border-color calc(140ms * var(--motion)) ease; }
.home-direction--active { grid-column: span 6; min-height: 330px; }
.home-direction__media { position: absolute; inset: 0; }
.home-direction__media img { width: 100%; height: 100%; object-fit: cover; }
.home-direction__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,14,.02) 15%, rgba(20,17,14,.18) 48%, rgba(20,17,14,.82) 100%); }
.home-direction__content { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 1.25rem; }
.home-direction--active .home-direction__content { justify-content: flex-end; color: var(--ink-on-dark); }
.home-direction--active :where(h3,p) { color: inherit; }
.home-direction__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.home-direction__status { display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .65rem; border-radius: var(--radius-pill); background: var(--fon-tihiy); color: var(--ink-2); font-size: .72rem; font-weight: 700; }
.home-direction--active .home-direction__status { background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); }
.home-direction h3 { margin-top: auto; font-family: var(--serif); font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 600; }
.home-direction p { margin-top: .45rem; max-width: 36ch; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.home-direction__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; color: inherit; font-size: .84rem; font-weight: 750; }
.home-direction__link::after { content: "→"; }
.home-direction--locked { cursor: pointer; background: var(--surface);
  /* Плитка песочная, значит метка «Скоро» внутри нее не может быть песочной. */
  --fon-tihiy: var(--karta); }
.home-direction--locked h3 { margin-top: 1rem; font-family: var(--sans); font-size: 1.1rem; font-weight: 700; }
.home-direction--locked .home-direction__content { justify-content: flex-start; }
.home-direction--locked .lp-icon { width: 42px; height: 42px; }
.home-direction--locked .lp-icon::before { width: 21px; height: 21px; }
@media (hover:hover) and (pointer:fine) { .home-direction:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cta) 65%, var(--line)); box-shadow: var(--shadow-card); } }

.home-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.home-value-card { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); }
.home-value-card h3 { margin-top: 1rem; font-family: var(--serif); font-size: 1.38rem; font-weight: 600; }
.home-value-card p { margin-top: .55rem; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }

.home-compare { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 1rem; align-items: stretch; }
.home-compare__side { padding: clamp(1.35rem, 2.5vw, 2rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--karta); }
.home-compare__side--strong { background: var(--ink); color: var(--ink-on-dark); border-color: var(--ink); }
.home-compare__side--strong :where(h3,strong) { color: var(--ink-on-dark); }
.home-compare__side h3 { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; }
.home-compare__list { display: grid; gap: .75rem; margin-top: 1rem; list-style: none; }
.home-compare__list li { position: relative; padding-left: 1.35rem; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.home-compare__side--strong .home-compare__list li { color: var(--ink-on-dark-2); }
.home-compare__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); }

.lp-sample-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.lp-sample-card { position: relative; display: grid; min-height: 260px; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); text-decoration: none; overflow: hidden; }
.lp-sample-card::after { content: ""; position: absolute; right: -34px; bottom: -48px; width: 150px; height: 150px; border-radius: 50%; background: var(--sage-bg); }
.lp-sample-card__label { position: relative; z-index: 1; width: fit-content; align-self: start; padding: .28rem .62rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--terra-text); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
.lp-sample-card h3 { position: relative; z-index: 1; align-self: end; max-width: 15ch; font-family: var(--serif); font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 600; }
.lp-sample-card p { position: relative; z-index: 1; margin-top: .55rem; max-width: 52ch; color: var(--ink-2); font-size: .88rem; }
.lp-sample-card__link { position: relative; z-index: 1; display: inline-flex; gap: .45rem; align-items: center; margin-top: 1rem; color: var(--teal); font-size: .85rem; font-weight: 750; }
.lp-sample-card__link::after { content: "→"; }/* ---------- Journey pages: /men-me/ and /decision/ ---------- */

.journey-page .hero__overlay { max-width: var(--container-wide); }
.journey-page .hero__overlay h1 { max-width: 18ch; font-family: var(--serif); font-weight: 600; }
.journey-page .hero__sub { max-width: 64ch; }
.journey-page .hero .lp-actions { margin-top: 0; margin-bottom: .55rem; }
.journey-page .hero .cta,
.journey-page .hero .lp-btn-secondary {
  width: auto;
  min-width: var(--paired-cta-width);
  min-height: var(--cta-h);
  padding-inline: 1rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
.journey-page .hero .lp-btn-secondary {
  color: var(--ink-on-dark);
  background: transparent;
  border-color: var(--dark-cta-border);
}/* Ревизия 11, 2026-08-12. Было: кремовая подложка с темным текстом - ее ввели,
   когда под текстом хиро был светлый участок фото и белая контурная кнопка на нем
   терялась. С ревизии 8 под текстом лежит плотное затемнение (замер контраста
   4.6..17.1), и та причина отпала, а расхождение с лендингами осталось: на
   /men-me/ и /decision/ вторая кнопка прозрачная с белой рамкой. Оператор
   потребовал одинаковый вид. Приводим к лендингам - те же токены. */

.home-page .home-hero--photo .lp-btn-secondary {
  color: var(--ink-on-dark);
  background: transparent;
  border-color: var(--dark-cta-border);
  white-space: nowrap;
}

.issue-selector { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr); gap: 1rem; }
.issue-tabs { display: grid; gap: .55rem; }
.issue-tab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; min-height: 64px; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--fon-tihiy); text-align: left; cursor: pointer; }
.issue-tab[aria-selected="true"] { border-color: var(--teal); background: var(--sage-bg); box-shadow: inset 3px 0 0 var(--teal); }
.issue-tab__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink-2); font-size: .82rem; font-weight: 750; }
.issue-tab[aria-selected="true"] .issue-tab__num { background: var(--teal); color: #fff; }
.issue-tab strong { font-size: .9rem; }
.issue-panel { min-height: 310px; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); box-shadow: var(--shadow-card); }
.issue-panel__label { color: var(--terra-text); font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.issue-panel h3 { margin-top: .55rem; max-width: 25ch; font-family: var(--serif); font-size: clamp(1.55rem, 2.8vw, 2.15rem); font-weight: 600; }
.issue-panel p { margin-top: .7rem; max-width: 66ch; color: var(--ink-2); font-size: .92rem; line-height: 1.65; }
.issue-panel__points { display: grid; gap: .55rem; margin-top: 1rem; list-style: none; }
.issue-panel__points li { display: flex; gap: .65rem; color: var(--ink-2); font-size: .88rem; }
.issue-panel__points li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .55em; border-radius: 50%; background: var(--cta); }

.journey-preview { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 1rem; align-items: stretch; }
.journey-preview__report { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); box-shadow: var(--shadow-card); }
.journey-preview__report-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.journey-preview__brand { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.journey-preview__tag { color: var(--terra-text); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.journey-metrics { display: grid; gap: .85rem; margin-top: 1rem; }
.journey-metric__row { display: flex; justify-content: space-between; gap: .8rem; font-size: .82rem; }
.journey-metric__value { color: var(--teal); font-weight: 750; }
.journey-metric__bar { height: 8px; margin-top: .35rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-2); }
.journey-metric__bar span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.journey-preview__insight { margin-top: 1rem; padding: .9rem; border-left: 3px solid var(--sage); border-radius: 9px; background: var(--sage-bg); color: var(--ink-2); font-size: .84rem; line-height: 1.55; }
.journey-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.journey-benefit { padding: 1.05rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.journey-benefit h3 { margin-top: .75rem; font-family: var(--serif); font-size: 1.22rem; font-weight: 600; }
.journey-benefit p { margin-top: .4rem; color: var(--ink-2); font-size: .84rem; line-height: 1.5; }

.journey-contrast { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.journey-contrast__card { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); }
.journey-contrast__card--strong { border-color: var(--teal); background: var(--sage-bg); }
.journey-contrast__label { color: var(--terra-text); font-size: .72rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.journey-contrast h3 { margin-top: .55rem; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.journey-contrast ul { display: grid; gap: .7rem; margin-top: 1rem; list-style: none; }
.journey-contrast li { position: relative; padding-left: 1.25rem; color: var(--ink-2); font-size: .88rem; line-height: 1.5; }
.journey-contrast li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); }

.journey-cost { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 1rem; align-items: stretch; }
.journey-cost__intro { padding: 1.45rem; border-radius: var(--radius-lg); background: var(--ink); color: var(--ink-on-dark); }
.journey-cost__intro h3 { color: var(--ink-on-dark); font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }
.journey-cost__intro p { margin-top: .7rem; color: var(--ink-on-dark-2); font-size: .9rem; line-height: 1.6; }
.journey-cost__path { display: grid; gap: .7rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); }
.journey-cost-step { display: grid; grid-template-columns: 32px 1fr; gap: .75rem; align-items: start; }
.journey-cost-step__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink-2); font-size: .8rem; font-weight: 750; }
.journey-cost-step strong { display: block; font-size: .9rem; }
.journey-cost-step span { display: block; margin-top: .15rem; color: var(--ink-2); font-size: .82rem; line-height: 1.45; }
.journey-cost-step--result .journey-cost-step__num { background: var(--cta); color: var(--cta-ink); }

.journey-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.journey-step { position: relative; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); }
.journey-step__num { color: var(--terra-text); font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.journey-step h3 { margin-top: .55rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.journey-step p { margin-top: .45rem; color: var(--ink-2); font-size: .86rem; line-height: 1.55; }

.journey-data { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.journey-data__item { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--karta); }
.journey-data__item strong { display: block; margin-top: .7rem; font-size: .88rem; }
.journey-data__item span { display: block; margin-top: .25rem; color: var(--ink-2); font-size: .8rem; line-height: 1.45; }

.journey-page .faq-list { max-width: 900px; margin-inline: auto; }/* ---------- Contacts ---------- */

.contact-hero { padding-block: clamp(3.25rem, 7vw, 6rem); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--sage-bg) 82%, transparent), transparent 35%), var(--bg); }
.contact-hero__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 2rem; align-items: center; }
.contact-primary { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); box-shadow: var(--shadow-card); }
.contact-primary__icon { width: 54px; height: 54px; }
.contact-primary h2 { margin-top: 1rem; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.contact-email { display: block; margin-top: .55rem; color: var(--teal); font-size: clamp(1.15rem,2.2vw,1.55rem); font-weight: 750; text-decoration: none; overflow-wrap:anywhere; }
.contact-primary p { margin-top: .55rem; color: var(--ink-2); font-size: .88rem; }
.copy-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.copy-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .85rem; border: 1px solid var(--field-border); border-radius: 10px; background: var(--bg); cursor: pointer; font-size: .82rem; font-weight: 700; }
.copy-btn::before { content:""; width: 16px; height: 16px; background: var(--teal); -webkit-mask:url('/assets/icons/copy.6c6ac788.svg') center/contain no-repeat; mask:url('/assets/icons/copy.6c6ac788.svg') center/contain no-repeat; }
.copy-btn[data-copied="true"]::before { -webkit-mask-image:url('/assets/icons/check-circle.8c7dcf54.svg'); mask-image:url('/assets/icons/check-circle.8c7dcf54.svg'); }

.contact-topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.contact-topic { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); }
.contact-topic h3 { margin-top: .9rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.contact-topic p { margin-top: .45rem; color: var(--ink-2); font-size: .85rem; line-height: 1.55; }

.contact-help { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 1rem; }
.contact-help__note { padding: 1.35rem; border-radius: var(--radius-lg); background: var(--ink); color: var(--ink-on-dark); }
.contact-help__note h3 { color: var(--ink-on-dark); font-family: var(--serif); font-size: 1.55rem; font-weight: 600; }
.contact-help__note p { margin-top: .65rem; color: var(--ink-on-dark-2); font-size: .88rem; line-height: 1.55; }
.contact-checklist { display: grid; gap: .7rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); list-style:none; }
.contact-checklist li { display: grid; grid-template-columns: 28px 1fr; gap: .75rem; align-items:start; color: var(--ink-2); font-size: .88rem; }
.contact-checklist li::before { content:"✓"; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--sage-bg); color:var(--ok); font-weight:800; }

.contact-operator { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:1rem; }
.operator-card { padding:1.35rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--karta); }
.operator-card h3 { font-family:var(--serif); font-size:1.4rem; font-weight:600; }
.operator-list { display:grid; gap:.7rem; margin-top:1rem; }
.operator-row { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.65rem; border-bottom:1px solid var(--line); }
.operator-row:last-child { border-bottom:0; padding-bottom:0; }
.operator-row span { color:var(--ink-2); font-size:.82rem; }
.operator-row strong { text-align:right; font-size:.86rem; }
.contact-links { display:grid; gap:.7rem; }
.contact-link-card { display:flex; align-items:center; gap:.8rem; min-height:72px; padding:.9rem 1rem; border:1px solid var(--line); border-radius:12px; background:var(--bg); text-decoration:none; }
.contact-link-card strong { display:block; font-size:.88rem; }
.contact-link-card span { display:block; margin-top:.18rem; color:var(--ink-2); font-size:.78rem; }/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .home-direction { grid-column: span 6; }
  .home-direction--active { min-height: 300px; }
  .home-value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-value-card:last-child { grid-column: 1 / -1; }
  .issue-selector, .journey-preview, .journey-cost, .contact-help, .contact-operator { grid-template-columns: 1fr; }
  .journey-data { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-topic:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .lp-section { padding-block: 3rem; }/* Ревизия 4 (техдолг), 2026-08-05: отсюда убраны мертвые
     .home-page .home-hero__text .lp-actions { flex-direction:column; align-items:stretch }
     и { .cta, .lp-btn-secondary { width:100% } }. Оба ряда CTA в hero содержат по две
     кнопки, поэтому правило парных CTA в components.css (:has(> :is(a,button):nth-child(2)))
     переводит контейнер в display:grid - flex-direction в гриде не действует вовсе,
     а width:100% детям там уже задан. Ниже 680px тот же блок сам схлопывает сетку в
     одну колонку во всю ширину. Замер до и после удаления совпал побайтово. */

  .home-trust-chips { gap:.35rem; }
  .home-trust-chip { font-size:.7rem; }
  .home-directions { grid-template-columns: 1fr; }
  .home-direction, .home-direction--active { grid-column:auto; min-height:235px; }
  .home-direction--locked { min-height:190px; }
  .home-value-grid, .home-compare, .lp-sample-grid, .journey-contrast, .journey-steps, .contact-topic-grid { grid-template-columns:1fr; }
  .home-value-card:last-child, .contact-topic:last-child { grid-column:auto; }
  .issue-selector { gap:.75rem; }/* padding-top нужен из-за наведения: карточка приподнимается на 2px и с тенью,
     а у контейнера включен overflow-x - без верхнего поля верхушка кнопки срезалась. */

  .issue-tabs { display:flex; overflow-x:auto; padding-top:.35rem; padding-bottom:.25rem; scroll-snap-type:x proximity; }
  .issue-tab { flex:0 0 min(78vw,300px); scroll-snap-align:start; }
  .issue-panel { min-height:0; }
  .journey-preview__report { order:0; }
  .journey-benefits { grid-template-columns:1fr; }
  .journey-data { grid-template-columns:1fr; }/* Здесь удалены такие же мертвые правила для hero страниц направлений
     (.journey-page .hero .lp-actions) - причина та же, см. комментарий выше. */

  .contact-hero__grid { grid-template-columns:1fr; }
  .contact-hero { padding-top:2.75rem; }
  .operator-row { flex-direction:column; gap:.2rem; }
  .operator-row strong { text-align:left; }
}

@media (min-width: 1024px) and (max-height: 700px) {/* Ревизия 5 (hero главной, 2026-08-06): три правила для .home-page убраны
     отсюда и заменены непрерывной шкалой --vs в конце файла. Скачок на
     контрольной точке 700px давал разрыв геометрии в один кадр; ramp по --vs
     тот же прием, что уже применен на лендингах (.hero в components.css). */

  .journey-page .hero .lp-actions { margin-bottom:.25rem; }
  .journey-page .hero .cta, .journey-page .hero .lp-btn-secondary { min-height:44px; }
}/* ---------- Final layout stabilization ---------- */

.landing-page .site-footer { margin-top: 0; }
.home-direction--active h3 { color: var(--ink-on-dark); }
.home-direction--active p { color: var(--ink-on-dark-2); }

@media (min-width: 1024px) {
  .home-direction:not(.home-direction--active) { grid-column: span 3; }
}/* ═══ CONSISTENCY PASS v58: главная и продуктовые лендинги ═══ *//* Главная сохраняет собственную согласованную геометрию hero из base.css. *//* Карточки примеров: вся карточка и видимая ссылка ведут себя как кнопка. */

.lp-sample-card {
  transition: transform calc(140ms * var(--motion)) ease,
              border-color calc(140ms * var(--motion)) ease,
              box-shadow calc(140ms * var(--motion)) ease;
}
.lp-sample-card__link {
  width: fit-content;
  min-height: 42px;
  padding: .45rem .8rem;
  border: 1px solid color-mix(in srgb, var(--teal) 55%, var(--line));
  border-radius: 10px;
  background: transparent;
  transition: color calc(140ms * var(--motion)) ease,
              background-color calc(140ms * var(--motion)) ease,
              border-color calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease,
              box-shadow calc(140ms * var(--motion)) ease;
}
@media (hover:hover) and (pointer:fine) {
  .lp-sample-card:hover {
    border-color: var(--teal);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(44,39,35,.11);
  }
  .lp-sample-card:hover .lp-sample-card__link {
    color: #fff;
    background: var(--teal);
    border-color: var(--teal);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(44,39,35,.12);
  }
  .journey-page .hero .lp-btn-secondary:hover {
    color: var(--ink);
    background: var(--bg);
    border-color: var(--bg);
  }
  .home-page .home-hero--photo .lp-btn-secondary:hover {
    color: var(--ink);
    background: var(--bg);
    border-color: var(--bg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-sample-card:hover,
  .lp-sample-card:hover .lp-sample-card__link { transform:none; }
}/* CTA на темных полосах: единый стандарт по образцу /faq/ («Написать нам»). */

.lp-band--dark .lp-kicker { color: var(--ink-on-dark-2); }
.lp-band--dark .lp-actions > :is(.cta, .lp-btn-secondary) {
  min-height: var(--cta-h);
  padding-inline: 1rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
.lp-band--dark .lp-btn-secondary {
  color: var(--ink-on-dark);
  background: transparent;
  border-color: var(--dark-cta-border);
}
@media (hover:hover) and (pointer:fine) {
  .lp-band--dark .lp-btn-secondary:hover {
    color: var(--ink);
    background: var(--bg);
    border-color: var(--bg);
  }
}/* Контактные карточки - те же сквозные hover-состояния, что у остальных интерактивов. */

.contact-link-card,
.contact-email {
  transition: color calc(140ms * var(--motion)) ease,
              background-color calc(140ms * var(--motion)) ease,
              border-color calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease,
              box-shadow calc(140ms * var(--motion)) ease;
}
@media (hover:hover) and (pointer:fine) {
  .contact-link-card:hover {
    border-color: var(--teal);
    background: var(--surface);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(44,39,35,.10);
    text-decoration: none;
  }
  .contact-email:hover {
    color: var(--ink);
    transform: translateY(-1px);
    text-decoration: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-link-card:hover,
  .contact-email:hover { transform:none; }
}/* карточки полезных страниц в контактах: читаемые пиктограммы и
   завершенное интерактивное состояние вместо бледных кругов. */

.contact-link-card {
  position: relative;
  padding-right: 3.1rem;
}
.contact-link-card > .lp-icon {
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  background: var(--karta);
  box-shadow: inset 0 0 0 4px var(--sage-bg);
  transition: background-color calc(140ms * var(--motion)) ease,
              border-color calc(140ms * var(--motion)) ease,
              box-shadow calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease;
}
.contact-link-card > .lp-icon::before {
  width: 21px;
  height: 21px;
  background: var(--teal);
  transition: background-color calc(140ms * var(--motion)) ease;
}
.contact-link-card > span:nth-child(2) {
  display: block;
  min-width: 0;
  margin: 0;
  color: inherit;
}
.contact-link-card > span:nth-child(2) > strong {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: .9rem;
}
.contact-link-card > span:nth-child(2) > span {
  display: block;
  margin-top: .2rem;
  color: var(--ink-2);
  font-size: .78rem;
  line-height: 1.45;
}
.contact-link-card::after {
  content: "→";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--teal);
  font-size: 1.05rem;
  font-weight: 750;
  transition: color calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease;
}
.operator-card .operator-list { margin-top: 0; }

@media (hover:hover) and (pointer:fine) {
  .contact-link-card:hover > .lp-icon {
    border-color: var(--teal);
    background: var(--teal);
    box-shadow: none;
    transform: scale(1.04);
  }
  .contact-link-card:hover > .lp-icon::before { background: #fff; }
  .contact-link-card:hover::after {
    color: var(--ink);
    transform: translate(3px, -50%);
  }
}

@media (max-width: 679px) {
  .contact-primary .copy-row { width: 100%; }
}

.contact-link-card > .lp-icon::before { display: none; }
.contact-link-card > .lp-icon svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color calc(140ms * var(--motion)) ease;
}/* В hero направлений длинный вторичный CTA не переносится и сохраняет
   ту же высоту, что основная кнопка. */

@media (min-width: 680px) {
  .journey-page .hero .lp-actions:has(> :is(a, button):nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, var(--paired-cta-width)));
  }
  .journey-page .hero .lp-actions:has(> :is(a, button):nth-child(2)) > :is(a, button) {
    white-space: nowrap;
  }
}
.journey-page .hero .lp-actions:has(> :is(a, button):nth-child(2)) .cta {
  margin-bottom: 0;
}/* /contacts/: hero по высоте продуктовых страниц и завершенные карточки ссылок. */

@media (min-width: 900px) {
  .contact-page .contact-hero {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(1.5rem, 4vh, 3.25rem);
  }
  .contact-page .contact-hero__grid { width: min(100%, var(--container-wide)); }
}
@media (max-width: 899px) {
  .contact-page .contact-hero {
    min-height: auto;
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }
}/* В карточках тем обращения используется один источник иконки - CSS-mask.
   Удаленные дублирующие inline-SVG больше не создают черные заливки. */

.contact-topic > .lp-icon {
  overflow: hidden;
}/* Полезные страницы: не пустой круг, а полноценная иконка-плитка и отдельный CTA. */

.contact-link-card {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 36px;
  gap: .9rem;
  align-items: center;
  min-height: 88px;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: var(--karta);
}
.contact-link-card > .lp-icon {
  width: 50px;
  height: 50px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--teal) 20%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--sage-bg) 84%, white);
  box-shadow: none;
}
.contact-link-card > .lp-icon svg {
  width: 26px;
  height: 26px;
  color: var(--teal);
  stroke-width: 1.75;
}
.contact-link-card > span:nth-child(2) {
  grid-column: 2;
  min-width: 0;
}
.contact-link-card > span:nth-child(2) > strong {
  font-size: .94rem;
  line-height: 1.3;
}
.contact-link-card > span:nth-child(2) > span {
  margin-top: .24rem;
  font-size: .8rem;
  line-height: 1.42;
}
.contact-link-card::after {
  content: "→";
  position: static;
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--teal);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1;
  transform: none;
  transition: color calc(140ms * var(--motion)) ease,
              background-color calc(140ms * var(--motion)) ease,
              border-color calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease;
}
@media (hover:hover) and (pointer:fine) {
  .contact-link-card:hover {
    border-color: color-mix(in srgb, var(--teal) 52%, var(--line));
    background: #fffefb;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(44,39,35,.10);
  }
  .contact-link-card:hover > .lp-icon {
    border-color: var(--teal);
    background: var(--teal);
    box-shadow: none;
    transform: none;
  }
  .contact-link-card:hover > .lp-icon svg { color: #fff; }
  .contact-link-card:hover::after {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff;
    transform: translateX(2px);
  }
}
@media (max-width: 479px) {
  .contact-link-card {
    grid-template-columns: 46px minmax(0, 1fr) 32px;
    gap: .75rem;
    min-height: 84px;
    padding: .8rem;
  }
  .contact-link-card > .lp-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }
  .contact-link-card > .lp-icon svg {
    width: 24px;
    height: 24px;
  }
  .contact-link-card::after {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
}/* /contacts/: один источник пиктограммы и жесткое геометрическое
   центрирование внутри круглой области. */

.contact-link-card > .lp-icon {
  position: relative;
  display: block;
}
.contact-link-card > .lp-icon::before {
  content: none !important;
  display: none !important;
}
.contact-link-card > .lp-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
@media (max-width: 479px) {
  .contact-link-card > .lp-icon svg {
    width: 28px;
    height: 28px;
  }
}/* точечные исправления двух активных лендингов. */

.journey-page .hero .trust-badge { margin-top: 1rem; }
.issue-panel__persavel { margin-top: 1rem; color: var(--ink); font-size: .88rem; }
.issue-panel__persavel + .issue-panel__points { margin-top: .5rem; }
.journey-cost-step > .journey-cost-step__num { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 0; color: var(--ink-2); font-size: .8rem; line-height: 1; }
.journey-cost-step--result > .journey-cost-step__num { color: var(--cta-ink); }
.journey-data__item > .lp-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-top: 0; }
.journey-data__item > .lp-icon::before { width: 24px; height: 24px; }
.journey-pricing-section { width: 100%; background: var(--surface); border-block: 1px solid var(--line); }
.journey-pricing-section .lp-section { max-width: var(--container-wide); }
.journey-pricing-section .pricing-grid { margin-top: 0; }
.journey-pricing-section .price-card > .cta { text-decoration: none; }/* тарифные секции на лендингах визуально отделены от соседнего контента. */

.journey-pricing-section {
  background: var(--sage-bg);
  border-block-color: color-mix(in srgb, var(--sage) 42%, var(--line));
  /* Полоса шалфейная: подсветка ссылки по умолчанию тоже шалфейная и слилась бы. */
  --podsvetka-ssylki: var(--karta);
}/* чередование фонов: «Цена повторений» получает самостоятельную теплую поверхность. */

.lp-band.repeat-cost-section {
  background: color-mix(in srgb, var(--cta) 7%, var(--bg));
  border-block-color: color-mix(in srgb, var(--cta) 18%, var(--line));
}/* /men-me/ и /decision/: убран избыточный нижний воздух после
   строки платежных систем перед темной CTA-секцией. */

.journey-pricing-section > .lp-shell.lp-section {
  padding-bottom: var(--space-5);
}/* ═══════════════════════════════════════════════════════════
   Ревизия 3.1. Карточки направлений главной, ширины до 1023px:
   затемнение привязано к ТЕКСТУ, а не к карточке.

   Что было не так. Градиент .home-direction__media::after привязан к боксу
   карточки: .02 до 15% высоты, .18 на 48%, .82 у нижней кромки. А текстовый
   блок (h3 + абзац + ссылка) прижат к низу карточки и занимает 134-156px -
   то есть на карточке высотой 235px (ниже 761px) заголовок стоит на 66%
   высоты, где затемнения еще почти нет (замер: альфа .10-.12). Фотографии
   у обоих активных направлений солнечные, прямо под заголовком - светлый
   свитер, и заголовок ложится на самое светлое место кадра.
   Замер до правки (99-й процентиль яркости фона под маской глифов, WCAG):
   h3 опускался до 1.41, абзац до 1.34 при цели 4.6 и 4.2; ниже цели
   31 замер из 84 на ширинах до 1023px. Хуже всего 320-500px.

   Решение - то же, что уже принято на лендингах и на хиро главной: кривая
   едет вместе с текстом. Текст прижат к нижней кромке карточки, поэтому
   привязку задаем в пикселях ОТ НИЗА, а не в процентах высоты: карточка
   бывает 235 / 300 / 330px, а текстовый блок во всех трех случаях стоит
   на нижней кромке и имеет почти постоянную высоту (замер по 19 ширинам:
   134px при ширине от 390px, 156px при 320-375px).

     d <= 165px          : a = 0.58                              (полка)
     165px < d <= 221px  : a = 0.58 * (1 - smoothstep((d-165)/56))  (спад вверх)
     d > 221px           : a = 0
   smoothstep(x) = x^2*(3-2x) - нулевая производная на обоих концах, поэтому
   у верхней кромки спада нет излома и не появляется полоса Маха.
   Полка 165px, а не 156px по замеру: 9px запаса на случай, если заголовок
   когда-нибудь перенесется на вторую строку.

   Числа A=0.58 и спад 56px не назначены, а найдены перебором A от 0.30 до
   0.91 с шагом 0.01, полки от 150 до 180px и спада от 40 до 110px по всем
   84 замерам, критерий - минимальная средняя альфа при выполнении цели.
   Старый градиент именно ЗАМЕНЯЕТСЯ, а не дополняется: наложение вторым
   слоем давало у нижней кромки композит 0.92 и убивало фотографию.

   Абзац на активной карточке ниже 1023px перекрашен с --ink-on-dark-2
   (#D8CFC0) в --ink-on-dark (#FBF6EE). Причина численная: тусклый цвет
   требовал полки 0.66 вместо 0.58, то есть фотография темнела еще на 12%
   по средней альфе. Иерархию между заголовком и абзацем держат кегль
   (23 против 14), гарнитура (serif против sans) и насыщенность - цвет
   в этой паре не единственный носитель различия.

   Правило живет строго до 1023px. Утвержденный десктоп (>=1024px) не
   затронут: там замер дает h3 >= 5.60, абзац >= 4.33, ссылка >= 10.79,
   то есть цель выполняется на нынешнем градиенте.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .home-direction--active .home-direction__media::after {
    background: linear-gradient(0deg,
      rgba(20,17,14,.58)      0,
      rgba(20,17,14,.58)  165px,
      rgba(20,17,14,.556) 172px,
      rgba(20,17,14,.489) 179px,
      rgba(20,17,14,.396) 186px,
      rgba(20,17,14,.290) 193px,
      rgba(20,17,14,.184) 200px,
      rgba(20,17,14,.091) 207px,
      rgba(20,17,14,.024) 214px,
      rgba(20,17,14,0)    221px);
  }
  .home-direction--active p { color: var(--ink-on-dark); }
}/* ═══════════════════════════════════════════════════════════
   HERO ГЛАВНОЙ: перенос лендинговой обработки (ревизия 5, 2026-08-06)

   На /decision/ и /men-me/ hero уже переведен на непрерывную шкалу --vs
   (components.css, блок .hero) - «hero-vs-3» от 27.07.2026. Главная жила
   на двух отдельных механизмах: base.css честно масштабировал по --vs
   заголовок, абзац и паддинги, а ряд кнопок и чипсы доверия из этого
   файла не масштабировались вовсе и держались на скачке в контрольной
   точке 700px. Здесь оба механизма сведены к одному - тому же, что на
   лендингах.

   ЗАМЕР ДО ПРАВКИ (84 ячейки: ширина 320..1920, высота 400..900):
     перелив первого экрана - 6 ячеек, худшая 320x400 = +121px;
     контраст ниже цели (h1>=4.6, sub>=4.2) - 38 замеров из 168,
     36 из них при ширине >=1024.

   1) ПРИЧИНА ПЕРЕЛИВА - НАЙДЕНА, НЕ УГАДАНА.
      Замер детей .home-hero__text на 320x400: h1 93px + отступ 6 +
      абзац 78 + отступ 16 + .lp-actions 124 + отступ 13.6 + чипсы 113,
      плюс паддинги 63 и 14 = 520.6px против измеренных 521px при окне
      400px. .lp-actions и .home-trust-chips - единственные два блока
      без --vs; их лендинговые аналоги (.hero .cta, .hero .trust-badge,
      .hero .trust-badge__icon) масштабируются все три.

   2) НАКЛОНЫ. Каждая вертикаль записана как max(ПОЛ, БАЗА - --vs*НАКЛОН).
      При высоте окна >=800px --vs = 0, выражение схлопывается ровно в
      базовое значение, и утвержденный десктоп не меняется ни на пиксель.
      Полы: кнопка 44px (тап-таргет), чипс 26px, кегль h1 20px (18px ниже
      440px высоты - как в лендинговом эталоне), межстрочные ступени
      1.10/1.06/1.02 для h1 и 1.42/1.32/1.26 для абзаца на 700/560/440.

   3) ВУАЛЬ ПОД ТЕКСТОМ НА ДЕСКТОПЕ (>=1024px). Замер геометрии: правый
      край h1 приходится на 59.4% ширины окна (1280), 58.3% (1440),
      56.2% (1920), правый край абзаца - 53.1/52.8/52.1%. Контейнерный
      градиент .home-hero--photo::before к 52% уже упал до 0.25, к 72% -
      до нуля, поэтому хвосты обеих строк лежат на голом фото: женщина
      в зеленом кардигане. Отсюда 1.08 у абзаца на 1280x900.
      Физика: --ink-2 (#6A6052, L=0.1204) на чистом --bg дает всего
      5.73:1 - запаса почти нет, и вытянуть абзац одной вуалью можно
      только при alpha≈0.87, то есть стерев фотографию. Поэтому лечим
      двумя рычагами сразу: вуаль 0.60 плюс сдвиг абзаца к --ink на 52%.
      Перебор по 8 десктопным ячейкам (1024/1280/1440/1920 x 800/900):
        A=0.48 + --ink        h1 4.81  sub 5.83   0/16, но h1 и абзац
                                                  сливаются по тону;
        A=0.54 + сдвиг 52%    h1 5.56  sub 4.42   0/16, запас тонкий;
        A=0.60 + сдвиг 52%    h1 6.38  sub 4.93   0/16  <- выбрано;
        A=0.88 + --ink-2      h1 11.12 sub 4.79   0/16, фото стерто.
      0.60 по весу совпадает с утвержденной полкой 0.56 на лендингах.

      ФОРМА ВУАЛИ. Первая рабочая версия шла от -50vw сплошной полкой и
      была переделана: слева контейнерный градиент уже дает 0.92, вуаль
      добавляла сверху 0.60, композит 1-(1-0.92)(1-0.60) = 0.968 - фото
      в левой трети стиралось в лист бумаги. Это ровно тот случай, что
      уже описан в этом файле для .home-direction («наложение вторым
      слоем убивало фотографию»). Поэтому вуаль привязана к КОРОБКЕ
      ТЕКСТА и гаснет с обеих сторон: набор 0 -> 0.60 на первых 4rem
      слева (там работает контейнерный градиент), полка 0.60 ровно по
      мере, спад 0.60 -> 0 на 7rem за правым краем текста. Плюс
      вертикальная маска на верх и низ. Композит слева остается 0.92,
      как было утверждено; замер по 84 ячейкам после переделки не
      изменился - h1 мин 5.18, абзац мин 4.55.

      Геометрия не сдвинута: псевдоэлемент абсолютный, из потока
      выключен. На десктопе меняется только подложка под текстом и цвет
      абзаца - подтверждено сверкой 218 боксов на 1280x800 / 1440x900 /
      1600x900 / 1920x1080 (расхождений left/top/width/height - ноль,
      высота документа совпала до пикселя).

      mask-image не обернут в @supports намеренно: в этом же коде уже
      без оговорок используются :has() (парные CTA, components.css) и
      color-mix() (чипсы выше), поддержка которых строго уже.
   ═══════════════════════════════════════════════════════════ *//* --- 2.1 Ряд кнопок --- */

.home-page .home-hero__text .lp-actions {
  margin-top: max(6px, calc(1rem - var(--vs) * 0.030));
  gap: max(6px, calc(.75rem - var(--vs) * 0.018));
}
.home-page .home-hero__text .cta,
.home-page .home-hero__text .lp-btn-secondary {
  min-height: max(44px, calc(var(--cta-h) - var(--vs) * 0.040));
}/* --- 2.2 Чипсы доверия --- */

.home-page .home-hero__text .home-trust-chips {
  margin-top: max(5px, calc(.85rem - var(--vs) * 0.026));
  gap: max(3px, calc(.45rem - var(--vs) * 0.011));
}
@media (max-width: 760px) {
  .home-page .home-hero__text .home-trust-chips { gap: max(3px, calc(.35rem - var(--vs) * 0.011)); }
}
.home-page .home-hero__text .home-trust-chip {
  min-height: max(26px, calc(34px - var(--vs) * 0.024));
  padding-block: max(2px, calc(.35rem - var(--vs) * 0.010));
}/* --- 2.3 Кегль заголовка: пол вынесен в переменную, чтобы ступень
       18px ниже 440px высоты задавалась один раз на все три ширины --- */

.home-page .home-hero__text { --h1-floor: 20px; }
@media (max-height: 440px) { .home-page .home-hero__text { --h1-floor: 18px; } }
@media (max-width: 640px) {
  .home-page .home-hero__text h1 {
    font-size: max(var(--h1-floor), calc(clamp(1.55rem, 6vw, 2rem) - var(--vs) * 0.040));
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .home-page .home-hero__text h1 {
    font-size: max(var(--h1-floor), calc(clamp(1.45rem, 4.2vw, 1.9rem) - var(--vs) * 0.040));
  }
}
@media (min-width: 1024px) {
  .home-page .home-hero__text h1 {
    font-size: max(var(--h1-floor), calc(clamp(1.75rem, 3.6vw, 2.9rem) - var(--vs) * 0.050));
  }
}/* --- 2.4 Межстрочные ступени --- */

@media (max-height: 700px) {
  .home-page .home-hero__text h1 { line-height: 1.10; }
  .home-page .home-hero__text .home-sub { line-height: 1.42; }
}
@media (max-height: 560px) {
  .home-page .home-hero__text h1 { line-height: 1.06; }
  .home-page .home-hero__text .home-sub { line-height: 1.32; }
}
@media (max-height: 440px) {
  .home-page .home-hero__text h1 { line-height: 1.02; }
  .home-page .home-hero__text .home-sub { line-height: 1.26; }
}/* --- 2.5 Паддинги полосы 641-1023: base.css отдает их .home-page-блоку
       без --vs, возвращаем шкалу. Полоса >=1024 не трогается: там
       clamp(1rem,3vh,2.5rem) и clamp(1.5rem,5vh,4rem) уже сжимаются
       по vh, и перелива на замере в ней нет. --- */

@media (min-width: 641px) and (max-width: 1023px) {
  .home-page .home-hero__inner {
    padding-top: calc(var(--header-h) + max(2px, calc(var(--space-2) - var(--vs) * 0.016)));
    padding-bottom: max(14px, calc(var(--space-5) - var(--vs) * 0.030));
  }
}
@media (max-width: 640px) {
  .home-page .home-hero__inner {
    padding-top: calc(var(--header-h) + max(2px, calc(var(--space-2) - var(--vs) * 0.016)));
  }
}
@media (max-width: 640px) and (max-height: 440px) {
  .home-page .home-hero__inner { padding-bottom: 8px; }
}

/* --- 2.6 Ревизия 8, 2026-08-08. Кремовая дымка под текстом на десктопе УБРАНА.
       Хиро главной переведен на схему лендингов: темный градиент --hero-scrim к низу
       кадра плюс белый текст (base.css). Кремовая подложка при этом не нужна и
       мешала - чтобы держать контраст темных букв, ей требовалась плотность .72,
       а на такой плотности она читалась пятном поверх фотографии. --- */