/* Стили промо-страницы. Цвета — токены сайта: мастер с кнопки «Создать
   профиль» попадает на регистрацию, и своя тёмно-зелёная гамма промо делала
   этот переход похожим на уход на другой сайт. */
.promo {
    --promo-ink: var(--color-ink);
    --promo-muted: var(--color-ink-muted);
    --promo-line: var(--color-line);
    --promo-radius: 12px;
    background: var(--color-canvas);
    color: var(--promo-ink);
    font-family: Inter, sans-serif;
    line-height: 1.65;
}
.promo *, .promo *::before, .promo *::after { box-sizing: border-box; }
.promo-wrap { max-width: 1160px; margin-inline: auto; padding-inline: 32px; }
.promo h1, .promo h2 { font-family: Manrope, Inter, sans-serif; text-wrap: balance; }
.promo h2 { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -.7px; }
.promo-eyebrow { font-size: 14px; font-weight: 500; color: var(--color-brand-700); margin: 0 0 14px; }
.promo-hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 56px; padding-block: 64px 56px; }
.promo-intro { min-width: 0; }
.promo h1 { max-width: 590px; font-size: clamp(40px, 4.1vw, 56px); line-height: 1.12; font-weight: 800; letter-spacing: -1.8px; margin: 0 0 24px; }
.promo-dot { color: var(--color-brand-600); }
.promo-lead { font-size: 18px; font-weight: 500; margin-bottom: 12px; }
.promo-description { max-width: 450px; font-size: 15px; color: var(--promo-muted); margin-bottom: 28px; }
.promo-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; max-width: 100%; padding: 14px 22px; border: 1px solid var(--color-brand-600); border-radius: var(--promo-radius); background: var(--color-brand-600); color: var(--color-on-brand); font-size: 14px; line-height: 1.4; font-weight: 600; text-decoration: none; transition: background .2s; }
.promo-button:hover { background: var(--color-brand-700); border-color: var(--color-brand-700); }
.promo-button:focus-visible, .promo summary:focus-visible { outline: 3px solid var(--color-brand-600); outline-offset: 5px; }
.promo-button>svg { flex-shrink: 0; }
.promo-note { max-width: 380px; font-size: 12px; line-height: 1.6; color: var(--promo-muted); margin-top: 14px; }
.promo-note>span { margin-right: 4px; color: var(--color-brand-600); }
.promo-specialties { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--promo-muted); margin-top: 24px; }
.promo-preview { position: relative; display: grid; justify-items: center; min-width: 0; padding: 8px 0; }
.promo-phone { position: relative; width: 244px; padding: 10px 9px 12px; border: 5px solid var(--color-ink-fixed); border-radius: 34px; background: var(--color-surface); box-shadow: 0 14px 28px rgba(40, 36, 28, 0.09); transform: rotate(2deg); overflow: hidden; line-height: 1.4; }
.promo-phone-status { height: 25px; font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; padding-inline: 8px; }
.promo-island { height: 16px; width: 65px; border-radius: 12px; background: var(--color-ink-fixed); position: absolute; top: 9px; left: 50%; transform: translateX(-50%); }
.promo-phone-logo { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; }
.promo-phone-logo>.promo-brand { display: block; height: 24px; }
.promo-phone-menu { font-size: 16px; }
.promo-product-title { font-size: 13px; line-height: 1.4; font-weight: 700; padding: 8px 2px; }
.promo-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--promo-line); border-radius: 6px; padding: 8px; color: var(--color-ink-muted); font-size: 15px; }
.promo-search>span { font-size: 9px; }
.promo-filters { display: flex; justify-content: space-between; gap: 5px; margin-block: 7px; font-size: 9px; color: var(--color-ink-muted); }
.promo-filters>span { border: 1px solid var(--promo-line); border-radius: 6px; padding: 5px 11px; }
.promo-map{height:220px;margin:10px -10px 0;position:relative;background-color:#e9eddf;background-image:linear-gradient(26deg,transparent 43%,#fff 44%,#fff 47%,transparent 48%),linear-gradient(105deg,transparent 46%,#fff 47%,#fff 50%,transparent 51%),repeating-linear-gradient(0deg,transparent 0 48px,#fcfdf9 49px 55px),repeating-linear-gradient(90deg,transparent 0 60px,#fcfdf9 61px 67px);overflow:hidden}.promo-river{width:50px;height:340px;background:#d2e5df;transform:rotate(36deg);position:absolute;right:23px;top:-55px;border-radius:40%}.promo-street{position:absolute;font-size:8px;color:#a0a69a;transform:rotate(26deg)}.street-one{left:20px;top:55px}.street-two{left:70px;bottom:35px}.promo-map-pin{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;border:3px solid white;box-shadow:0 2px 7px #0002;color:#fff;font-size:12px;background:#8a7668;position:absolute}.pin-one{left:35px;top:35px}.pin-two{right:38px;top:55px;background:#767e68}.pin-three{left:50px;bottom:35px;background:#b68e78}.pin-four{right:18px;bottom:35px;background:#6e7a72}.promo-main-pin{position:absolute;left:115px;top:92px;background:var(--color-ink-inverse);color:white;border-radius:50% 50% 50% 0;transform:rotate(-45deg);padding:10px;box-shadow:0 4px 14px #0003}.promo-main-pin svg{transform:rotate(45deg);width:21px;height:21px}
.promo-map { height: 175px; margin: 8px -9px 0; }
/* Нарисованная карта повторяет тёмную подложку настоящей (input.css). Фильтр, как там,
   не годится: он перекрасил бы и метки, а они здесь лежат внутри карты. */
[data-theme='dark'] .promo-map { background-color: #23261f; background-image: linear-gradient(26deg,transparent 43%,#33362d 44%,#33362d 47%,transparent 48%),linear-gradient(105deg,transparent 46%,#33362d 47%,#33362d 50%,transparent 51%),repeating-linear-gradient(0deg,transparent 0 48px,#2b2e26 49px 55px),repeating-linear-gradient(90deg,transparent 0 60px,#2b2e26 61px 67px); }
[data-theme='dark'] .promo-river { background: #1d2c2a; }
.promo-street { color: var(--color-ink-muted); }
.promo-main-pin { left: 100px; top: 90px; padding: 7px; box-shadow: none; }
.promo-map-pin { box-shadow: none; }
.promo .promo-product-card { width: 100%; transform: none; margin: -6px 0 0; border: 1px solid var(--promo-line); border-radius: 9px; box-shadow: none; }
.promo-product-card::after { display: none; }
.promo-product-card .map-card__body { padding: 10px; }
.promo-product-card .map-card__head { gap: 7px; }
.promo-product-card .map-card__avatar { width: 29px; height: 29px; font-size: 12px; }
.promo-product-name { min-width: 0; }
.promo-product-card .map-card__name { font-size: 11px; }
.promo-product-card .map-card__meta { font-size: 9px; color: var(--color-ink-muted); }
.promo-product-card .map-card__services { margin-top: 10px; gap: 5px; }
.promo-product-card .map-card__service { font-size: 9px; }
.promo-phone-caption { text-align: center; font-size: 9px; color: var(--color-ink-muted); margin-top: 10px; }
/* Плашка лежит на карте телефона, а не на карточке мастера: ниже она закрывала названия услуг. */
.promo-map-label { position: absolute; bottom: 200px; left: -4px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--promo-line); border-radius: var(--promo-radius); box-shadow: var(--shadow-soft); font-size: 12px; line-height: 1.5; }
.promo-map-label svg { color: var(--color-brand-600); flex-shrink: 0; }
.promo-demo { position: relative; text-align: center; font-size: 11px; line-height: 1.5; color: var(--promo-muted); margin-top: 20px; }
.promo-story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 48px; border-top: 1px solid var(--promo-line); }
.promo-story h2 { font-size: 28px; max-width: 480px; }
.promo-story-copy { padding-top: 30px; color: var(--promo-muted); font-size: 15px; }
.promo-story-copy p+p { margin-top: 14px; }
.promo-story-copy strong { color: var(--promo-ink); font-weight: 600; }
.promo-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; padding-block: 16px 56px; }
.promo-benefits article { display: grid; grid-template-columns: 48px 1fr; gap: 6px 18px; align-content: start; }
.promo-icon { width: 48px; height: 48px; border-radius: var(--promo-radius); background: var(--color-brand-50); display: grid; place-items: center; grid-row: span 2; color: var(--color-brand-700); }
.promo-benefits h2 { font-family: Inter, sans-serif; font-size: 17px; letter-spacing: -.2px; line-height: 1.5; font-weight: 600; }
.promo-benefits p { font-size: 14px; color: var(--promo-muted); max-width: 360px; }
.promo-steps { padding-block: 8px 64px; }
.promo-steps h2 { margin-bottom: 28px; }
.promo-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.promo-steps li { position: relative; padding-top: 20px; border-top: 2px solid var(--color-brand-600); }
.promo-step-number { display: block; font-family: Manrope, Inter, sans-serif; font-size: 34px; font-weight: 800; line-height: 1; color: var(--color-brand-600); margin-bottom: 14px; }
.promo-steps h3 { font-size: 17px; font-weight: 600; line-height: 1.5; margin-bottom: 4px; }
.promo-steps p { font-size: 14px; color: var(--promo-muted); max-width: 300px; }
.promo-business-section { padding-top: 8px; }
.promo-business { padding: 48px; background: var(--color-ink-inverse); color: #fff; border-radius: var(--promo-radius); }
.promo-business h2 { max-width: 560px; font-size: 36px; margin-bottom: 20px; }
.promo-business p { color: var(--color-dusk-300); font-size: 15px; max-width: 600px; }
.promo-trust { max-width: 600px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px; margin-top: 24px; font-size: 13px; line-height: 1.7; color: var(--color-dusk-400); }
.promo-free { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 56px; }
.promo-free h2 { font-size: 26px; }
.promo-free>p { align-self: center; font-size: 15px; color: var(--promo-muted); }
.promo-faq { max-width: 900px; padding-top: 8px; }
.promo-faq h2 { margin-bottom: 16px; }
.promo-faq details { border-bottom: 1px solid var(--promo-line); }
.promo-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 18px; min-height: 56px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; }
.promo-faq summary::-webkit-details-marker { display: none; }
.promo-faq summary span { font-size: 24px; color: var(--color-brand-600); flex-shrink: 0; }
.promo-faq details[open] summary span { transform: rotate(45deg); }
.promo-faq details p { font-size: 14px; color: var(--promo-muted); max-width: 690px; padding-bottom: 20px; }
.promo-final { text-align: center; padding-block: 56px 16px; }
.promo-final h2 { font-size: 32px; margin-bottom: 12px; }
.promo-final>p:not([class]) { font-size: 14px; color: var(--promo-muted); margin-bottom: 22px; }
@media (max-width: 1050px) {
    .promo-hero { gap: 32px; grid-template-columns: 1.3fr 1fr; }
    .promo h1 { font-size: 44px; }
    .promo-map-label { left: -12px; bottom: 190px; padding: 10px 12px; }
    .promo-story, .promo-free, .promo-benefits { column-gap: 40px; }
    .promo-business { padding: 36px; }
}
@media (max-width: 800px) {
    .promo-wrap { padding-inline: 24px; }
    .promo-hero { gap: 20px; grid-template-columns: 1.2fr 1fr; padding-block: 48px; }
    .promo h1 { font-size: 39px; letter-spacing: -1.3px; }
    .promo-lead { font-size: 16px; }
    .promo-map-label { position: relative; left: auto; bottom: auto; margin-top: 20px; padding: 0; border: 0; background: none; }
    .promo-demo { margin-top: 12px; font-size: 10px; }
    .promo-business { padding: 32px; }
    .promo-business h2 { font-size: 30px; }
    .promo-story h2 { font-size: 25px; }
    .promo-free h2 { font-size: 23px; }
}
@media (max-width: 640px) {
    .promo-wrap { padding-inline: 20px; }
    .promo-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 36px; }
    .promo h1 { max-width: 440px; font-size: clamp(34px, 9.4vw, 40px); letter-spacing: -1.2px; }
    .promo-eyebrow { font-size: 13px; margin-bottom: 12px; }
    .promo-description { font-size: 14px; margin-bottom: 24px; }
    .promo-button { gap: 18px; padding-inline: 18px; font-size: 13px; }
    .promo-specialties { gap: 5px 8px; }
    .promo-map-label { font-size: 12px; margin-top: 22px; }
    .promo-demo { font-size: 10px; }
    .promo-story, .promo-free { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 32px; }
    .promo-story h2, .promo-free h2 { font-size: 25px; }
    .promo-story-copy { padding-top: 0; font-size: 14px; }
    .promo-benefits { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 12px 36px; }
    .promo-benefits article { grid-template-columns: 44px 1fr; column-gap: 14px; }
    .promo-icon { width: 44px; height: 44px; }
    .promo-benefits h2 { font-size: 16px; }
    .promo-business { padding: 28px 22px; }
    .promo-business h2 { font-size: 27px; }
    .promo-business p { font-size: 14px; }
    .promo-steps { padding-block: 4px 40px; }
    .promo-steps h2 { font-size: 25px; margin-bottom: 20px; }
    .promo-steps ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* На телефоне шаги — список с номером слева, а не три карточки подряд. */
    .promo-steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding-block: 16px; border-top: 1px solid var(--promo-line); }
    .promo-steps li:first-child { border-top: 2px solid var(--color-brand-600); }
    .promo-step-number { grid-row: span 2; font-size: 28px; margin: 0; }
    .promo-steps h3 { font-size: 16px; }
    .promo-free>p { font-size: 14px; }
    .promo-faq { padding-top: 4px; }
    .promo-faq h2 { font-size: 26px; }
    .promo-faq summary { font-size: 14px; }
    .promo-final { padding-block: 36px 8px; }
    .promo-final h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .promo-button { transition: none; } }

/* Подвал встык к странице: общий отступ над ним открывал полосу фона сайта,
   который темнее фона промо, и низ страницы читался обрезанным. */
body:has(.promo)>footer { margin-top: 0; }
.promo { padding-bottom: 72px; }
@media (max-width: 640px) { .promo { padding-bottom: 48px; } }

/* Fit the existing shared header on this page only, including 320 px. */
@media (max-width: 360px) {
    body:has(.promo)>header .logo-full { height: 24px; }
    body:has(.promo)>header .btn { padding-inline: 8px; font-size: 12px; }
}