/* ─────────────────────────────────────────────────────────────────
   WorkDone 3 — біла картка з роликом ліворуч.

   Дизайн-мова взята з основного сайту (workdone.study.local):
     • типографіка Montserrat 16/25, заголовок 50px/700, підзаголовок #776C7C;
     • кнопки — темні капсули rgb(41,36,43) з radius 50px і ховером у #7147CD;
     • поля форми — капсули з рамкою 2px #7147CD, іконкою ліворуч і
       текстом фіолетовим (як у калькуляторі на сайті);
     • плашки переваг — білі напівпрозорі картки radius 20px на бузковій
       підкладці (як секція «Чому наші клієнти обирають саме нас?»).

   Палітра: #7147CD — акцент, #29242B — текст і темні поверхні,
   #F2EDFD — бузковий поверх.
   ───────────────────────────────────────────────────────────────── */
:root {
    --lp-dark: #29242B;
    --lp-primary: #7147CD;
    --lp-primary-light: rgb(146, 91, 255);
    --lp-primary-deep: rgb(88, 52, 168);
    --lp-text-soft: #776C7C;

    --lp-page: #E9E6FB;
    --lp-surface: #FFFFFF;
    --lp-surface-soft: #F2EDFD;

    --lp-border: rgba(113, 71, 205, .18);
    --lp-pill: 50px;
    --lp-radius-lg: 20px;
    --lp-radius-md: 15px;

    --lp-shadow-card: 0 30px 70px rgba(59, 38, 122, .12);
    --lp-shadow-soft: 0 8px 22px rgba(59, 38, 122, .08);
    --lp-shadow-cta: 0 16px 34px rgba(41, 36, 43, .22);
}

/* ─── Сторінка ─── */
.lp {
    min-height: 100vh;
    padding: 28px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-page);
    color: var(--lp-dark);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 25px;
    /* Мобильные мелочи: не даём iOS раздувать текст в ландшафте и убираем
       синюю вспышку при тапе. */
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* На телефоне 100vh включает скрытую адресную строку — карточка уезжает
   вниз. Где поддерживается dvh, берём видимую высоту. */
@supports (min-height: 100dvh) {
    .lp { min-height: 100dvh; }
}

.lp-card {
    position: relative;
    width: 100%;
    max-width: 1100px;
    background: var(--lp-surface);
    border-radius: 32px;
    box-shadow: var(--lp-shadow-card);
    padding: 48px 52px 40px;
}

/* Останній блок картки не додає свій margin до нижнього падінга —
   склад блоків різний (контакти можуть бути вимкнені в адмінці). */
.lp-card > *:last-child { margin-bottom: 0; }

/* ─── Логотип ─── */
/* Логотип лежить у правому верхньому куті картки, поверх вільного поля:
   правий стовпець починається одразу із заголовка, а бренд стоїть там,
   де нічого не заважає. На вузьких екранах кута немає — там логотип
   повертається у потік над заголовком (див. медіазапит нижче). */
.lp-logo {
    position: absolute;
    /* По верхньому краю контенту картки — щоб логотип не «висі́в» вище
       за заголовок. */
    top: 48px;
    right: 52px;
    z-index: 2;
    flex: none;
}

.lp-logo img { display: block; height: 62px; width: auto; max-width: none; }

/* ─── Герой: ролик ліворуч, текст і CTA праворуч ─── */
.lp-hero {
    display: grid;
    /* Ролик трохи вужчий за 320px, а проміжок — 40px: ці 28px переходять
       текстовій колонці, щоб у неї лишався запас під логотип у куті. */
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    /* Ролик вищий за текстову колонку — центруємо її, щоб порожнє місце
       розходилось зверху й знизу, а не збиралось під кнопками. */
    align-items: center;
    gap: 40px;
    margin-bottom: 6px;
}

.lp-hero-media { position: relative; }

/* Лавандова підкладка під роликом: тримає відео в палітрі сторінки
   (той самий поверх, що в плашок переваг) і дає йому повітря. */
.lp-hero-media::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 28px;
    background: var(--lp-surface-soft);
}

.lp-hero-media .wd-video { position: relative; z-index: 1; }

/* Плеєр лишається функціональним (постер, play, панель керування), але
   без декору з TikTok-версії: у білій картці потрібне саме відео,
   а не лайки, підписи та хендл. */
.lp-hero-media .wd-video__top,
.lp-hero-media .wd-video__meta { display: none; }

.lp-hero-media .wd-video__stage {
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-soft);
}

.lp-hero-copy { min-width: 0; }

/* Кнопки стоять одразу під описом: колонку не розтягуємо на висоту
   ролика, бо тоді між текстом і кнопками зʼявляється порожнеча. */
.lp-actions { margin-top: 0; }

/* Правий верхній кут картки займає логотип. Заголовок не має під нього
   заходити, тому в нього відступ праворуч — під ширину логотипа (74px)
   плюс повітря. Опис і форму не чіпаємо: опис і так закінчується за
   170px від бренду, а відступ лише звужував абзац і ламав перенос. */
.lp-heading { padding-right: 84px; }

.lp-heading {
    margin: 0 0 16px;
    font-size: clamp(32px, 3.8vw, 46px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--lp-dark);
    /* Довгий заголовок на телефоні інакше кидає слово-сироту на окремий
       рядок («Беремося за» / «роботу»): balance вирівнює рядки. */
    text-wrap: balance;
}

/* ─── WorkDone 3.2 (workdone32.blade.php) ───
   Той самий CSS, але заголовок довший («Допомога з навчанням / від
   перевірених фахівців»), тому кегль менший: 36px дає рівно два рядки в
   колонці, 24px — на телефоні. line-height трохи більший, щоб щільні
   рядки не злипалися. */
.lp--wd32 .lp-heading {
    font-size: clamp(28px, 2.9vw, 36px);
    line-height: 1.1;
}

.lp-heading-accent { display: block; color: var(--lp-primary); }

.lp-desc {
    margin: 0 0 28px;
    max-width: 46ch;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: var(--lp-text-soft);
}

/* ─── CTA: кнопки вибору курсу ─── */
/* grid-auto-rows: 1fr — щоб кнопки були однієї висоти навіть коли
   підпис в одній із них переноситься на другий рядок. */
.lp-actions {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 14px;
    max-width: 500px;
}

/* Капсула як на сайті: темна, з ховером у фіолетовий. */
.lp-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    border-radius: var(--lp-pill);
    background: var(--lp-dark);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--lp-shadow-cta);
    transition: background-color .35s ease, transform .18s ease, box-shadow .18s ease;
}

.lp-btn:hover { background: var(--lp-primary); transform: translateY(-2px); }
.lp-btn:focus-visible { outline: 3px solid var(--lp-primary-deep); outline-offset: 3px; }

/* Друга кнопка — світла з фіолетовою рамкою: та сама капсула, інший тон. */
.lp-btn--alt {
    background: #fff;
    color: var(--lp-primary);
    border: 2px solid var(--lp-primary);
    box-shadow: none;
    padding: 10px 22px;
}

.lp-btn--alt:hover { background: var(--lp-primary); color: #fff; }
.lp-btn--alt:hover .lp-btn-icon { background: rgba(255, 255, 255, .2); color: #fff; }
.lp-btn--alt:hover .lp-btn-sub { color: #fff; }

.lp-btn-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.lp-btn--alt .lp-btn-icon { background: var(--lp-surface-soft); color: var(--lp-primary); }

.lp-btn-content { flex: 1 1 auto; min-width: 0; }

.lp-btn-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.lp-btn-sub {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    opacity: .82;
}

.lp-btn--alt .lp-btn-sub { color: var(--lp-text-soft); opacity: 1; }

.lp-btn-arrow { flex: none; display: flex; opacity: .9; }

/* ─── Форма (режим модерації) ─── */
.lp-form-wrap { max-width: 100%; }

/* Поля стоять одне під одним на всю ширину: у заявці лишились імʼя,
   телефон і коментар — двом контактним полям у рядку тісно, а короткий
   email поруч із телефоном тільки плутав. */
.lp-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.lp-field { position: relative; display: flex; align-items: center; }
.lp-field--area { grid-column: 1 / -1; align-items: flex-start; }

/* Іконка всередині поля — як у калькуляторі на сайті: 25px, фіолетова,
   на відступі 23px від краю. */
.lp-field-icon {
    position: absolute;
    left: 23px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lp-primary);
    pointer-events: none;
    display: flex;
}

.lp-field-icon svg { width: 22px; height: 22px; }

.lp-field--area .lp-field-icon { top: 20px; transform: none; }

/* Поля-капсули з рамкою 2px, як на сайті. */
.lp-input,
.lp-textarea {
    width: 100%;
    border: 2px solid var(--lp-primary);
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: var(--lp-primary);
    transition: box-shadow .18s ease, border-color .18s ease;
}

.lp-input {
    height: 50px;
    padding: 8px 22px 8px 65px;
    border-radius: var(--lp-pill);
}

.lp-textarea {
    min-height: 130px;
    padding: 18px 22px 18px 65px;
    border-radius: var(--lp-radius-md);
    resize: vertical;
}

/* Плейсхолдер сірий, як на сайті: фіолетовий текст у порожньому полі
   читався б як заповнене значення. */
.lp-input::placeholder,
.lp-textarea::placeholder { color: rgba(41, 36, 43, .38); }

.lp-input:hover,
.lp-textarea:hover { border-color: var(--lp-primary-light); }

.lp-input:focus,
.lp-textarea:focus {
    outline: none;
    border-color: var(--lp-primary-light);
    box-shadow: 0 0 0 4px rgba(113, 71, 205, .14);
}

/* Поле, на яке скаржиться валідація: помітна рамка, щоб було видно,
   куди повертатись, навіть коли текст помилки стоїть окремим блоком. */
.lp-input[aria-invalid="true"],
.lp-textarea[aria-invalid="true"] {
    border-color: #d92d5e;
    color: var(--lp-dark);
}

/* Рядок під текст помилки зарезервований навіть коли помилки немає:
   інакше перша ж невдала валідація зсувала б униз кнопку, ролик
   (він центрується по висоті колонки) і весь блок під карткою.
   visibility: hidden лишає текст поза деревом доступності.

   Негативні відступи зверху й знизу зʼїдають майже весь запас: рядок
   займає ~3px, а сам текст виходить у проміжки між полями. Без них
   зарезервовані 19px роздували відступ перед кнопкою до 43px на
   телефоні — майже вчетверо більше за проміжок між полями. */
.lp-form-error {
    grid-column: 1 / -1;
    margin: -8px 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #d92d5e;
}

.lp-form-error[hidden] { display: block; visibility: hidden; }

/* ─── Поле телефону: прапорець країни (intl-tel-input) ─── */
/* Бібліотека малює навколо інпута власну обгортку .iti. Перефарбовуємо
   її через змінні самої бібліотеки, щоб капсула лишалась у палітрі
   сторінки, а не виглядала як чужорідний віджет. */
.lp-form .iti {
    width: 100%;
    --iti-border-width: 0;
    --iti-border-color: rgba(113, 71, 205, .2);
    --iti-hover-color: rgba(113, 71, 205, .08);
    --iti-icon-color: var(--lp-primary);
    --iti-country-selector-bg: #fff;
    --iti-spacer-horizontal: 16px;
    --iti-arrow-padding: 7px;
    --iti-flag-width: 20px;
}

/* Місце під прапорець, код країни та стрілку: номер не має заїжджати
   під кнопку вибору країни. */
.lp-field--phone .lp-input { padding-left: 104px; }

.lp-form .iti__selected-country { height: 46px; border-radius: var(--lp-pill); }
.lp-form .iti__selected-country-primary { border-radius: var(--lp-pill) 0 0 var(--lp-pill); }
.lp-form .iti__selected-dial-code { font-size: 15px; font-weight: 500; color: var(--lp-primary); }
.lp-form .iti__flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(41, 36, 43, .12); }

/* Список країн — та сама капсульна геометрія, що й у полів. */
.lp-form .iti .iti__country-selector {
    margin-top: 6px;
    border: 2px solid rgba(113, 71, 205, .18);
    border-radius: 20px;
    box-shadow: 0 20px 44px rgba(41, 36, 43, .16);
    overflow: hidden;
}

.lp-form .iti .iti__country-list { max-height: 264px; }
.lp-form .iti .iti__country { padding: 9px 16px; font-size: 15px; font-weight: 500; color: var(--lp-dark); }
.lp-form .iti .iti__country.iti__highlight { background: var(--lp-surface-soft); }
.lp-form .iti .iti__country-check { color: var(--lp-primary); }
.lp-form .iti .iti__search-input-wrapper { border-bottom: 1px solid rgba(113, 71, 205, .16); }
.lp-form .iti .iti__search-input {
    font-family: inherit;
    font-size: 15px;
    color: var(--lp-dark);
    padding-top: 11px;
    padding-bottom: 11px;
}
.lp-form .iti .iti__search-input::placeholder { color: rgba(41, 36, 43, .38); }

/* На телефоні бібліотека відкриває список на весь екран, тому правила
   для нього вже не можуть бути привʼязані до .lp-form. */
.iti--fullscreen-popup.iti--detached-country-selector { background: rgba(41, 36, 43, .45); }
.iti--fullscreen-popup .iti__country-selector { border-radius: 22px; }

.lp-submit {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 50px 12px;
    border: 0;
    border-radius: var(--lp-pill);
    background: var(--lp-dark);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 25px;
    cursor: pointer;
    transition: background-color .35s ease, transform .18s ease;
}

.lp-submit:hover:not(:disabled) { background: var(--lp-primary); transform: translateY(-2px); }
.lp-submit:disabled { opacity: .6; cursor: default; }

.lp-success { display: none; text-align: center; padding: 34px 20px; }

.lp-form-wrap.is-sent .lp-form { display: none; }
.lp-form-wrap.is-sent .lp-success { display: block; }

.lp-success-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-surface-soft);
    color: var(--lp-primary);
}

.lp-success-heading { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.lp-success-text { margin: 0; font-size: 16px; font-weight: 400; color: var(--lp-text-soft); }

/* ─── Переваги: бузкова підкладка, білі картки ─── */
.lp-benefits {
    list-style: none;
    margin: 40px 0 0;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    background: var(--lp-surface-soft);
    border-radius: 28px;
}

.lp-benefit {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: var(--lp-radius-lg);
    background: rgba(255, 255, 255, .72);
}

/* Та сама товщина обводки, що в макеті: 4 у системі координат 48×48. */
.lp-benefit-icon {
    flex: none;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: var(--lp-primary);
}

.lp-benefit-icon svg {
    display: block;
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-benefit-text { min-width: 0; }

.lp-benefit-title {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    color: var(--lp-primary);
}

.lp-benefit-desc {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: var(--lp-text-soft);
}

/* ─── Контакти (спільний partial _contacts.blade.php) ─── */
.lp-contacts { margin-top: 40px; }

.lp-contacts-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    text-align: center;
}

/* Флекс, а не сітка: карток сім (телефон, email, telegram, instagram,
   whatsapp, viber, графік), і в сітці остання завжди лишалась сама
   в лівому куті другого рядка. Тут рядки центруються. */
.lp-contacts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.lp-contact-card {
    flex: 1 1 150px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 14px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: #fff;
    color: var(--lp-dark);
    text-decoration: none;
    text-align: center;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.lp-contact-card:hover {
    border-color: var(--lp-primary);
    transform: translateY(-2px);
    box-shadow: var(--lp-shadow-soft);
}

.lp-contact-icon { color: var(--lp-primary); display: flex; margin-bottom: 4px; }
.lp-contact-label { font-size: 12px; font-weight: 600; color: var(--lp-text-soft); }
.lp-contact-value { font-size: 14px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }

/* ─── Адаптив ─── */
/* Накладення логотипа в кут працює, поки текстовій колонці є куди
   відступити від бренду. Другий рядок заголовка («за будь-яку
   складність») довгий, і зі зменшенням вікна він підходить до кута
   упритул: на 1040px запас ще 31px, на 1010px — нуль, далі накладення.
   Тому вужче за 1040px логотип стає в потік над заголовком. */
@media (max-width: 1040px) {
    .lp-logo { position: static; margin: 0 0 18px; }
    .lp-logo img { height: 52px; }
    .lp-heading { padding-right: 0; }
}

@media (max-width: 1100px) {
    .lp-hero { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 36px; }
    .lp-hero-media { max-width: 280px; }
}

@media (max-width: 900px) {
    /* На вузькому екрані порядок інший, ніж у розмітці:
       заголовок → опис → ролик → форма/кнопки → переваги → контакти.
       display: contents розкриває і .lp-hero, і .lp-hero-copy, щоб кожен
       блок можна було поставити окремо; вертикальні відступи віддаємо
       row-gap. */
    /* Планшет — це вже широка картка (до 790px), тож і відступи, і кегль
       ростуть разом із нею: інакше дрібний заголовок і ролик на 300px
       губились посеред порожнього поля. clamp тримає пропорцію між
       620 і 900px, а ті самі значення в px лишаються на телефоні. */
    .lp-card {
        display: flex;
        flex-direction: column;
        row-gap: clamp(22px, 3.4vw, 30px);
        padding: clamp(26px, 4.6vw, 42px) clamp(20px, 4.4vw, 38px) clamp(26px, 4.2vw, 38px);
        border-radius: 28px;
    }

    .lp-hero,
    .lp-hero-copy { display: contents; }

    /* Після display: contents селектор «.lp-card > *» до цих блоків уже
       не дістає — обнуляємо відступи списком. */
    .lp-card > *,
    .lp-logo,
    .lp-heading,
    .lp-desc,
    .lp-hero-media,
    .lp-actions,
    .lp-form-wrap,
    .lp-benefits,
    .lp-contacts { margin: 0; }

    /* Кута для накладення тут немає — логотип знову в потоці
       (див. медіазапит на 1150px вище), лишається тільки порядок. */
    .lp-logo { position: static; order: 1; margin: 0; }
    .lp-logo img { height: clamp(48px, 6.4vw, 58px); }
    .lp-heading { order: 2; font-size: clamp(32px, 4.6vw, 40px); }
    .lp--wd32 .lp-heading { font-size: clamp(26px, 3.4vw, 32px); }
    /* Абзац на всю ширину картки читався б одним довгим рядком. */
    .lp-desc { order: 3; max-width: 46ch; }
    /* Ролик — головний вміст сторінки, тому на планшеті він займає
       помітну частину картки, але не настільки, щоб відсунути форму
       за межу екрана. */
    .lp-hero-media { order: 4; max-width: min(380px, 60%); width: 100%; margin-inline: auto; }
    .lp-actions,
    .lp-form-wrap { order: 5; max-width: none; }
    /* На планшеті дві колонки ще вміщаються — у один стовпчик список
       розтягувався б на цілий екран. */
    .lp-benefits { order: 6; }
    .lp-contacts { order: 7; }
}

@media (max-width: 620px) {
    /* На телефоні все стискаємо: десктопні розміри тут читаються як
       розсипані по екрану острівці, а сторінці треба бути щільною. */
    .lp { padding: 14px; }
    .lp-card { padding: 22px 18px 24px; border-radius: 24px; row-gap: 20px; }

    .lp-logo img { height: 46px; }

    /* Без margin-bottom: у флекс-розкладці відступи дає row-gap, і зайві
       12px робили проміжок під заголовком 32px проти 20px між рештою
       блоків. */
    .lp-heading { font-size: 33px; }
    /* 24px — межа, на якій акцентний рядок («від перевірених фахівців»)
       лишається в один рядок і заголовок тримає два рядки, а не три. */
    .lp--wd32 .lp-heading { font-size: 24px; }
    .lp-desc { font-size: 15px; line-height: 23px; }

    .lp-btn { padding: 10px 18px; gap: 12px; }
    .lp-btn--alt { padding: 8px 16px; }
    .lp-btn-icon { width: 40px; height: 40px; }
    .lp-btn-icon svg { width: 22px; height: 22px; }
    .lp-btn-title { font-size: 17px; }
    .lp-btn-sub { font-size: 12.5px; }

    /* Ролик росте разом із карткою, але не на всю ширину: інакше він
       відсуває форму за межу екрана. */
    .lp-hero-media { max-width: min(320px, 88%); }

    .lp-input { height: 50px; padding: 8px 18px 8px 58px; }

    /* Компактніший прапорець із кодом: на 360px 104px відступу — це
       третина поля. */
    .lp-form .iti { --iti-spacer-horizontal: 13px; --iti-arrow-padding: 5px; }
    .lp-field--phone .lp-input { padding-left: 94px; }
    .lp-textarea { padding: 16px 18px 16px 58px; }
    .lp-field-icon { left: 20px; }
    .lp-form { gap: 12px; }

    .lp-benefits { padding: 12px; gap: 10px; border-radius: 22px; grid-template-columns: minmax(0, 1fr); }
    .lp-benefit { padding: 13px; gap: 12px; }

    /* Було два стовпчики — іконка й абзац: на 360px тексту лишалось
       ~210px і опис рвався на шість рядків. Тепер іконка стоїть в один
       рядок із заголовком, а опис займає всю ширину картки. */
    .lp-benefit {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px 12px;
    }

    .lp-benefit-text { display: contents; }
    .lp-benefit-icon { width: 40px; height: 40px; }
    .lp-benefit-icon svg { width: 32px; height: 32px; }
    .lp-benefit-title { margin: 0; font-size: 16px; line-height: 22px; }
    .lp-benefit-desc { grid-column: 1 / -1; font-size: 14px; line-height: 21px; }

    /* Дві картки в ряд і дрібніший текст: номер і нік інакше рвуться
       посередині слова. */
    .lp-contacts-grid { gap: 10px; }
    .lp-contact-card { flex: 1 1 45%; max-width: none; padding: 14px 8px; }
    .lp-contact-label { font-size: 11.5px; }
    .lp-contact-value { font-size: 13px; line-height: 18px; }
}

@media (max-width: 380px) {
    .lp-contact-card { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn, .lp-submit, .lp-contact-card { transition: none; }
    .lp-btn:hover, .lp-submit:hover, .lp-contact-card:hover { transform: none; }
}