/* Главная страница: типографика, кнопки и тёмные секции поверх дизайн-токенов. */
.home {
    --home-serif: 'Playfair Display', Georgia, serif;
    --home-forest: #213D2F;
    --home-on-dark: #F3EDE4;
    --home-on-dark-soft: rgb(243 237 228 / 0.8);
    --home-mint: #B9D3C3;
    --home-cream: var(--color-surface-muted);
    /* В DM Sans нет кириллицы — тексты главной набраны Manrope, как в макете. */
    font-family: 'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Без «висячего» слова в последней строке абзаца. */
.home p, .home li { text-wrap: pretty; }

/* Ритм макета на 1440 px: обычные секции — 96 px, «Обо мне» и Клуб — 112, «Для кого» и Telegram — 88;
   на телефоне все по 56. */
.home-section { padding-block: clamp(3.5rem, 2rem + 4.5vw, 7rem); }
.home-section--wide { padding-block: clamp(3.5rem, 2rem + 5.6vw, 7rem); }
.home-section--tight { padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); }
.home-dark { background: var(--home-forest); color: var(--home-on-dark); }

/* До lg у hero нет большого фото с едой, поэтому сразу за ним — «Свежие рецепты»,
   а «Узнаёте себя?» — после подборки. Разделитель между ними — нижняя линия цифр hero. */
@media (max-width: 1023.98px) {
    .home { display: flex; flex-direction: column; }
    .home > section { width: 100%; }
    .home-hero { order: -2; }
    .home-recipes { order: -1; padding-top: 0; }
}

.home-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary-green);
}
.home-dark .home-eyebrow { color: var(--home-mint); }

.home-title,
.home-display {
    font-family: var(--home-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.home-title { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1.14; }
.home-display { font-size: clamp(2.0625rem, 1.2rem + 2.6vw, 3.375rem); line-height: 1.1; }
/* Акцент цветом, без курсива: в русском курсиве «т» читается как «m». */
.home-display em { font-style: normal; color: var(--color-primary-green); }
/* На 320–359 px «чувствовать» иначе не помещается и рвётся посередине слова. */
@media (max-width: 359px) { .home-display { font-size: 1.875rem; } }
.home-number { font-family: var(--home-serif); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
/* Подписи цифр hero: до lg — в две строки, чтобы три колонки помещались с 320 px. */
.home-stat-label { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-soft); }
@media (min-width: 1024px) { .home-stat-label { font-size: 15px; line-height: 20px; } }
/* Надпись над заголовком карточки: одна высота строки во всех трёх форматах. */
.home-card-label { font-size: 13px; font-weight: 700; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; }

.home-lead { font-size: 1rem; line-height: 1.6; color: var(--color-text-soft); text-wrap: pretty; }
@media (min-width: 1024px) { .home-lead { font-size: 1.0625rem; line-height: 1.65; } }
.home-dark .home-lead { color: var(--home-on-dark-soft); }

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Большая кнопка: 56 px и 16 px текста до 1280, с 1280 — 17 px, как в макетах. */
.home-btn--lg { min-height: 56px; padding: 0.75rem 1.25rem; font-size: 16px; font-weight: 700; }
@media (max-width: 379px) { .home-btn--lg { padding-inline: 1rem; } }
@media (min-width: 640px) { .home-btn--lg { padding-inline: 2rem; } }
/* 1024–1279: запас, чтобы кнопка и ссылка на Клуб в hero стояли в одну строку при любом сглаживании шрифта. */
@media (min-width: 1024px) and (max-width: 1279px) { .home-btn--lg { padding-inline: 1.75rem; } }
@media (min-width: 1280px) { .home-btn--lg { padding-block: 1.0625rem; font-size: 17px; } }
.home-btn--primary { background: var(--color-accent-berry); color: #fff; }
.home-btn--primary:hover { background: var(--color-accent-berry-dark); }
.home-btn--outline { border-color: var(--color-text-main); color: var(--color-text-main); }
.home-btn--outline:hover { background: var(--color-text-main); color: #fff; }
.home-btn--light { background: #fff; color: var(--home-forest); font-weight: 700; }
.home-btn--light:hover { background: var(--home-on-dark); }

.home-link {
    font-weight: 600;
    color: var(--color-primary-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.home-link:hover { color: var(--color-primary-green-dark); }
.home-link--ink { color: var(--color-text-main); }
.home-link--ink:hover { color: var(--color-primary-green); }
.home-dark .home-link { color: var(--home-on-dark); }

/* FAQ: собственная иконка вместо системного треугольника. */
.home-faq summary { list-style: none; }
.home-faq summary::-webkit-details-marker { display: none; }
/* Открытый вопрос: «+» превращается в «−», как в макете. */
.home-faq__v { transition: opacity 0.2s ease; }
.home-faq[open] .home-faq__v { opacity: 0; }

/* Тарифы: выбранная строка подсвечивается без JS. */
.home-plan:has(:checked) {
    border-color: var(--color-accent-berry);
    box-shadow: inset 0 0 0 1px var(--color-accent-berry);
    background: color-mix(in srgb, var(--color-accent-berry) 5%, #fff);
}
/* Контур невыбранного тарифа — 3,7:1 к белому: элемент управления должен быть виден (WCAG 1.4.11). */
.home-plan input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #8F8372; border-radius: 50%; background: #fff; }
.home-plan input:checked { border: 7px solid var(--color-accent-berry); }
.home-plan input:focus-visible { outline: 3px solid var(--color-primary-green); outline-offset: 3px; }

/* Отзывы на главной: кремовая рамка 2:3 — в скриншот переписки помещается сообщение целиком;
   ширину и число карточек задаёт reviews.css. */
/* Полоса прокрутки отзывов не нужна: листают свайпом и стрелками. */
.reviews-home .review-strip { scrollbar-width: none; }
.reviews-home .review-strip::-webkit-scrollbar { display: none; }
.reviews-home .review-strip .review-card {
    aspect-ratio: 2 / 3;
    max-height: none;
    padding: 12px;
    border: 0;
    border-radius: 24px;
    background: var(--home-cream);
    box-shadow: none;
}
/* Центр кадра: в скриншотах переписок сверху статус-бар телефона, а не отзыв. */
.reviews-home .review-strip .review-card img { border-radius: 16px; object-position: 50% 40%; }
/* Меньше четырёх отзывов: карточки делят ширину, а не стоят островком по центру. */
@media (min-width: 1024px) {
    .reviews-home .review-strip:not(:has(.review-card:nth-child(4))) .review-card { flex: 1 1 0; max-width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-btn, .home-faq__v { transition: none; }
}