/* Лендинг анти-возрастного интенсива — перенос один в один.
 *
 * У этой страницы своя палитра и своя типографика, не такие, как у главной:
 * тёплый белый разворот, шалфейно-зелёный акцент и заголовки с засечками.
 * Тёмно-синий и лайм основного сайта сюда НЕ переносим — это отдельный
 * продукт со своим лицом.
 *
 * Цвета сняты пипеткой с оригинала, шрифты — Merriweather и Open Sans,
 * те же, что в конструкторе (оба со свободной лицензией, лежат у нас).
 */

:root {
    --paper: #FAF8F3;      /* тёплый белый — основной фон */
    --card: #FFFFFF;
    --sage: #5E7B69;       /* шалфейный зелёный — акцент и полосы */
    --sage-dark: #4d6857;
    --ink: #111111;
    --ink-soft: #4a4a4a;
    --grey: #F6F7F8;
    --line: #E4E0D8;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: "Merriweather", Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.2;
}

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ─────────────────────────── шапка ─────────────────────────── */

.age-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.age-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 82px;
}

.age-bar__logo {
    font-family: "Merriweather", serif;
    font-size: 26px;
    color: var(--sage);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

.age-bar nav { display: none; }

.age-bar nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }

.age-bar nav a { color: var(--ink); text-decoration: none; font-size: 16px; }

.age-bar nav a:hover { color: var(--sage); }

.age-burger { display: grid; width: 44px; height: 44px; place-content: center; gap: 6px; background: none; border: 0; cursor: pointer; }
.age-burger span { display: block; width: 26px; height: 2px; background: var(--ink); }

.age-menu { background: var(--paper); border-bottom: 1px solid var(--line); }
.age-menu ul { list-style: none; margin: 0; padding: 6px 0 18px; }
.age-menu a { display: block; padding: 11px 24px; color: var(--ink); text-decoration: none; max-width: 1180px; margin: 0 auto; }

/* ─────────────────────── первый экран ─────────────────────── */

.age-hero { position: relative; padding: 96px 0 110px; }

.age-hero__bg {
    position: absolute;
    inset: 0;
    background: url(../img/age-hero.jpg) 60% center / cover no-repeat;
}

/* В оригинале это ровная заливка чёрным на 30 %, а не градиент.
   Градиент слева получался заметно темнее — фотография пропадала. */
.age-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
}

.age-hero .wrap { position: relative; }

/* Оригинал: Merriweather 54px, вес 400 (не 700) */
.age-hero__title {
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 400;
    line-height: 1.22;
    margin: 0 0 18px;
    color: #fff;
}

/* Первые две строки шалфейные, третья белая — как в оригинале */
.age-hero__title span { display: block; color: #9db3a4; }

.age-hero__sub {
    font-family: "Merriweather", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    margin: 0 0 60px;
    line-height: 1.55;
}

/* Оригинал: 24/32, колонка 653px — на широком экране укладывается
   в две строки. При узкой колонке ломалось на четыре. */
.age-hero__lead {
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-size: clamp(19px, 1.9vw, 24px);
    line-height: 1.33;
    color: #fff;
    max-width: 660px;
    margin: 0 0 30px;
}

.age-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─────────────────────────── кнопки ─────────────────────────── */

.age-btn {
    display: inline-block;
    padding: 14px 30px;
    font-size: 17px;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid var(--sage);
    background: var(--sage);
    color: #fff;
    cursor: pointer;
}

.age-btn:hover { background: var(--sage-dark); border-color: var(--sage-dark); }

.age-btn_light { background: none; border-color: #fff; color: #fff; }
.age-btn_light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.age-btn_outline { background: none; color: var(--sage); }
.age-btn_outline:hover { background: var(--sage); color: #fff; }

/* ─────────────────────────── секции ─────────────────────────── */

.age-section { padding: 76px 0; }

.age-section_sage { background: var(--sage); color: #fff; }

.age-section_sage h2, .age-section_sage h3 { color: #fff; }

.age-title {
    font-size: clamp(30px, 4.4vw, 54px);
    color: var(--sage);
    margin: 0 0 34px;
}

.age-section_sage .age-title { color: #fff; text-align: center; }

/* ─────────────────────── для кого ─────────────────────── */

.age-intro {
    display: grid;
    gap: 0;
    background: var(--card);
    border-radius: 4px;
    overflow: hidden;
}

.age-intro img { width: 100%; height: 100%; object-fit: cover; display: block; }

.age-intro__text { padding: 34px 36px 40px; }

/* Оригинал: Merriweather 40/48, вес 700, шалфейный */
.age-intro__text h2 {
    color: var(--sage);
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 22px;
}

.ticks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }

/* Оригинал: Open Sans 16/24, цвет чёрный на 56 % */
.ticks li {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    line-height: 24px;
    color: rgba(17, 17, 17, .56);
}

.ticks li::before { content: "✔️"; position: absolute; left: 0; top: 0; }

/* ─────────────────────── девять тем ─────────────────────── */

.age-grid { display: grid; gap: 22px; }

.age-topic {
    background: var(--card);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.age-topic__media { position: relative; }

.age-topic__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

/* Крупный полупрозрачный номер поверх фотографии — приём оригинала.
   Темы пронумерованы, порядок здесь несёт смысл. */
.age-topic__num {
    position: absolute;
    left: 22px;
    bottom: -14px;
    font-family: "Merriweather", serif;
    font-size: 92px;
    line-height: 1;
    color: rgba(255, 255, 255, .72);
}

.age-topic__body { padding: 26px 24px 30px; }

.age-topic__body h3 { font-size: 22px; margin: 0 0 10px; }

.age-topic__body p { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* ─────────────────────── формат: шаги ─────────────────────── */

.age-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 34px;
    text-align: center;
}

.age-steps b {
    display: grid;
    place-content: center;
    width: 68px; height: 68px;
    margin: 0 auto 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    font-family: "Merriweather", serif;
    font-size: 26px;
    font-weight: 400;
}

.age-steps h3 { font-size: 21px; margin: 0 0 8px; }

.age-steps p { margin: 0; opacity: .85; font-size: 16px; }

/* ─────────────────────── результат ─────────────────────── */

.age-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.age-results li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    align-items: center;
    background: var(--card);
    border-radius: 4px;
    padding: 18px 22px;
}

.age-results b {
    display: grid;
    place-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    font-family: "Merriweather", serif;
    font-weight: 400;
}

/* ─────────────────────── тарифы ─────────────────────── */

.age-note { font-size: 17px; margin: 0 0 30px; }

.age-prices { display: grid; gap: 24px; }

.age-price { display: flex; flex-direction: column; }

.age-price__head {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 22px;
}

.age-price__head img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.age-price__head::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .15));
}

.age-price__label {
    position: absolute;
    left: 26px;
    top: 26px;
    z-index: 1;
    color: #fff;
}

.age-price__label h3 { font-size: 26px; margin: 0 0 6px; }

.age-price__label p {
    font-family: "Merriweather", serif;
    font-size: 30px;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* align-content: start — иначе в коротком тарифе три пункта
   растягивает по высоте карточки и между ними зияют дыры */
.age-price ul {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 14px;
    align-content: start;
    flex-grow: 1;
}

.age-price li { position: relative; padding-left: 26px; line-height: 1.5; }

.age-price li::before { content: "✔"; position: absolute; left: 0; color: var(--ink); }

.age-price .age-btn { align-self: center; }

/* ─────────────────────── вопросы ─────────────────────── */

.age-split { display: grid; gap: 34px; align-items: start; }

.age-split img { width: 100%; border-radius: 4px; }

.age-split h2 { color: var(--ink); font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 24px; }

/* ─────────────────────── программа по дням ─────────────────────── */

.age-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.age-days li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.age-days li:last-child { border-bottom: 0; }

.age-days b { font-family: "Merriweather", serif; color: var(--sage); font-weight: 700; }

/* ─────────────────────── отзывы ─────────────────────── */

.age-reviews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

.age-reviews img { width: 100%; border-radius: 4px; }

/* ─────────────────────── вопросы-ответы ─────────────────────── */

.age-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }

.age-faq summary {
    font-family: "Merriweather", serif;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.age-faq summary::-webkit-details-marker { display: none; }

.age-faq summary::after { content: "+"; float: right; color: var(--sage); font-weight: 400; }

.age-faq details[open] summary::after { content: "–"; }

.age-faq details p { margin: 12px 0 2px; color: var(--ink-soft); }

/* ─────────────────────── завершение ─────────────────────── */

.age-closing {
    padding: 84px 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(rgba(20, 18, 16, .62), rgba(20, 18, 16, .62)),
                url(../img/age-cta.jpg) center / cover no-repeat;
}

.age-closing__text {
    font-family: "Merriweather", serif;
    font-size: clamp(21px, 2.8vw, 30px);
    max-width: 26ch;
    margin: 0 auto 14px;
    line-height: 1.35;
}

.age-closing__sub { margin: 0 0 28px; }

/* ─────────────────────── подвал ─────────────────────── */

.age-foot {
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: 40px 0 50px;
    font-size: 15px;
}

.age-foot nav ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }

.age-foot a { color: var(--sage); }

.age-foot__legal { color: var(--ink-soft); }

/* ─────────────────────── адаптив ─────────────────────── */

@media (min-width: 760px) {
    .age-grid   { grid-template-columns: repeat(2, 1fr); }
    .age-prices { grid-template-columns: repeat(3, 1fr); }
    .age-steps  { grid-template-columns: repeat(3, 1fr); }
    .age-foot nav ul { grid-template-columns: repeat(3, max-content); gap: 12px 44px; }
}

@media (min-width: 1000px) {
    .age-bar nav { display: flex; flex: 1; justify-content: space-between; }
    .age-burger { display: none; }
    .age-grid  { grid-template-columns: repeat(3, 1fr); }
    .age-intro { grid-template-columns: .95fr 1.05fr; }
    .age-split { grid-template-columns: .8fr 1.2fr; gap: 46px; }
    .age-steps { grid-template-columns: repeat(5, 1fr); gap: 24px; }
}


/* ─────────── страницы успеха в оформлении лендинга ───────────
   «Базовый» и «Продвинутый». Значения с оригинала: заголовок
   Merriweather 40/48 вес 400, кнопка кремовая #FFEBC1, радиус 100px. */

.okage {
    padding: 80px 0 90px;
    text-align: center;
    min-height: 60svh;
}

.okage .wrap { max-width: 860px; }

.okage h1 {
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 26px;
}

.okage p { font-size: 16px; line-height: 24px; margin: 0 0 22px; }

.okage__contacts a { color: var(--ink); }

.okage__btn {
    display: block;
    width: 100%;
    padding: 17px 24px;
    margin: 14px 0 0;
    background: #FFEBC1;
    color: var(--ink);
    text-decoration: none;
    border-radius: 100px;
    font-size: 16px;
}

.okage__btn:hover { background: #ffe0a4; }

/* Зелёная кнопка с подписью — как на странице «Продвинутый» */
.okage__btn_sage { background: var(--sage); color: #fff; }

.okage__btn_sage:hover { background: var(--sage-dark); }

.okage__btn small { display: block; margin-top: 4px; font-size: 14px; opacity: .8; }