/* ============================================================================
   УЧЕБНАЯ ПОДПИСКА — стили страницы (/uchebnaya-podpiska/)
   Самодостаточный модуль на дизайн-токенах темы (colors.css).
   Префикс .ls-* — чтобы не конфликтовать с другими страницами.
   Общие секции (teachers/partners/reviews/faq) используют свои глобальные стили.
   ============================================================================ */

.ls-main {
    background: var(--color-bg-pages);
}

.ls-main section {
    padding: 64px 0;
}

.ls-main section .teachers-title{
    text-align: center;
}

/* Общая «шапка» секции: заголовок + подзаголовок по центру */
.ls-section-head {
    max-width: 860px;
    margin: 0 auto 40px;
    text-align: center;
}

.ls-section-head h2 {
    margin: 0 0 14px;
}

.ls-section-head .text-p1 {
    margin: 0;
    color: var(--color-text-plashka);
}

/* Маркер-галочка в списках */
.ls-li-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    display: inline-flex;
    margin-top: 1px;
}
.ls-li-icon svg { width: 100%; height: 100%; }

/* ============================================================
   1. HERO
   ============================================================ */
.ls-hero {
    padding: 96px 0 64px !important;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(50, 119, 10, 0.06) 0%, transparent 55%),
        var(--color-bg-pages);
}

.ls-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.ls-hero-text h1 {
    margin: 0 0 20px;
    color: var(--color-text-main);
}

.ls-hero-subtitle {
    margin: 0 0 18px;
    color: var(--color-text-main);
}

.ls-hero-intro {
    margin: 0 0 28px;
    color: var(--color-text-plashka);
}

.ls-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ls-hero-benefits {
    background: var(--color-white);
    border-radius: 24px;
    padding: 28px 30px;
    box-shadow: var(--shadow-md);
}

.ls-benefit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ls-benefit-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ls-benefit-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--color-bg-green-shield);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ls-benefit-icon svg { width: 24px; height: 24px; }

.ls-benefit-item .text-p3 {
    margin: 0;
    align-self: center;
    color: var(--color-text-main);
}

/* ============================================================
   2. СЕГМЕНТАЦИЯ ЦА
   ============================================================ */
.ls-segments {
    background: var(--color-white);
}

.ls-segments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ls-segment-card {
    background: var(--color-bg-pages);
    border: 1px solid var(--color-border-light);
    border-radius: 24px;
    padding: 30px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.ls-segment-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.ls-segment-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--color-bg-burgundy-shield);
    color: var(--color-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.ls-segment-icon svg { width: 28px; height: 28px; }

.ls-segment-card h4 {
    margin: 0 0 10px;
    color: var(--color-text-main);
}

.ls-segment-lead {
    margin: 0 0 14px;
    color: var(--color-text-plashka);
}

.ls-segment-help {
    margin: 0 0 10px;
    font-weight: 600;
    color: var(--color-text-main);
}

.ls-segment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ls-segment-list li {
    display: flex;
    gap: 10px;
    margin: 0;
    color: var(--color-text-main);
}

.ls-segments-plate {
    margin-top: 28px;
    background: var(--gradient-primary);
    color: var(--color-text-white);
    border-radius: 24px;
    padding: 36px 40px;
    text-align: center;
}
.ls-segments-plate .text-p2 { margin: 0 0 12px; color: var(--color-text-white); }
.ls-segments-plate .text-p2:last-of-type { margin-bottom: 0; }
.ls-slogan {
    margin: 18px 0 0;
    font-size: var(--font-size-32);
    font-weight: 700;
    color: var(--color-text-white);
}

/* ============================================================
   3. ЧТО ТАКОЕ ПОДПИСКА + ШАГИ
   ============================================================ */
.ls-about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: start;
}

.ls-about-text h2 { margin: 0 0 20px; }
.ls-about-text .text-p2 { margin: 0 0 16px; color: var(--color-text-main); }
.ls-about-worries-lead { font-weight: 600; }

.ls-worries-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ls-worries-list li {
    margin: 0;
    padding: 14px 18px;
    background: var(--color-bg-burgundy-shield);
    border-left: 3px solid var(--color-secondary);
    border-radius: 10px;
    color: var(--color-text-burgundy);
    font-style: italic;
}

.ls-steps {
    background: var(--color-white);
    border-radius: 24px;
    padding: 30px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 100px;
}
.ls-steps-title { margin: 0 0 22px; color: var(--color-secondary); }

.ls-steps-list { display: flex; flex-direction: column; gap: 16px; }

.ls-step-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.ls-step-num {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-white);
    font-weight: 700;
    font-size: var(--font-size-18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ls-step-body { display: flex; gap: 12px; align-items: flex-start; }
.ls-step-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--color-primary);
    display: inline-flex;
}
.ls-step-icon svg { width: 100%; height: 100%; }
.ls-step-body .text-p3 { margin: 0; color: var(--color-text-main); }

/* ============================================================
   4. ТРЕКИ И ФОРМАТЫ
   ============================================================ */
.ls-tracks { background: var(--color-white); }

.ls-tracks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ls-track-card {
    background: var(--color-bg-pages);
    border: 1px solid var(--color-border-light);
    border-radius: 20px;
    padding: 26px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.ls-track-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.ls-track-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--color-bg-green-shield);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.ls-track-icon svg { width: 26px; height: 26px; }
.ls-track-card h4 { margin: 0 0 8px; color: var(--color-text-main); }
.ls-track-card .text-p3 { margin: 0; color: var(--color-text-plashka); }

.ls-formats { margin-top: 48px; }
.ls-formats-title { margin: 0 0 8px; text-align: center; }
.ls-formats-intro { margin: 0 0 24px; text-align: center; color: var(--color-text-plashka); }

.ls-formats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.ls-format-card {
    background: var(--color-bg-pages);
    border-radius: 18px;
    border-top: 4px solid var(--color-secondary);
    padding: 22px;
}
.ls-format-card h5 { margin: 0 0 8px; color: var(--color-secondary); }
.ls-format-card .text-p3 { margin: 0; color: var(--color-text-main); }

.ls-formats-footer {
    margin: 24px auto 0;
    max-width: 760px;
    text-align: center;
    color: var(--color-text-main);
}

/* Визуал платформы */
.ls-platform-visual {
    margin-top: 48px;
    text-align: center;
}
.ls-platform-mockup {
    width: 100%;
    max-width: 760px;
    height: auto;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.10));
    border-radius: 16px;
}
.ls-platform-caption {
    margin: 14px auto 0;
    max-width: 560px;
    color: var(--color-text-gray);
}

.ls-tracks-cta { margin-top: 40px; text-align: center; }

/* ============================================================
   5. ПЛАТФОРМА + ЛИД-МАГНИТ
   ============================================================ */
.ls-platform-lead {
    text-align: center;
    font-weight: 600;
    margin: 0 0 24px;
}
.ls-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.ls-platform-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--color-white);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.ls-platform-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--color-bg-green-shield);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ls-platform-icon svg { width: 25px; height: 25px; }
.ls-platform-card h4 { margin: 0 0 6px; color: var(--color-text-main); }
.ls-platform-card .text-p3 { margin: 0; color: var(--color-text-plashka); }

.ls-lead-magnet {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    scroll-margin-top: 100px;
}
.ls-lead-info {
    background: var(--gradient-secondary);
    color: var(--color-text-white);
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ls-lead-info h3 { margin: 0 0 14px; color: var(--color-text-white); }
.ls-lead-info .text-p3 { margin: 0; color: rgba(255, 255, 255, 0.9); }
.ls-lead-form {
    background: var(--color-white);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ls-lead-cta-note {
    margin: 12px 0 0;
    color: var(--color-text-gray);
}

/* ============================================================
   6. ПОЧЕМУ ВЫГОДНЕЕ (сравнение)
   ============================================================ */
.ls-compare { background: var(--color-white); }
.ls-compare-intro {
    max-width: 880px;
    margin: 0 auto 32px;
    text-align: center;
    color: var(--color-text-main);
}

.ls-compare-table {
    max-width: 980px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}
.ls-compare-row {
    display: grid;
    grid-template-columns: 0.9fr 1.05fr 1.05fr;
}
.ls-compare-row + .ls-compare-row { border-top: 1px solid var(--color-border-light); }
.ls-compare-cell {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ls-compare-cell .text-p3 { margin: 0; }
.ls-compare-label {
    background: var(--color-bg-pages);
    font-weight: 600;
}
.ls-compare-label .text-p3 { font-weight: 600; }
.ls-compare-without { color: var(--color-text-gray); }
.ls-compare-with { background: rgba(50, 119, 10, 0.05); color: var(--color-text-main); }

.ls-compare-head { background: var(--color-bg-pages); }
.ls-compare-head .ls-compare-cell { padding-top: 16px; padding-bottom: 16px; }
.ls-col-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--font-size-14);
    font-weight: 600;
}
.ls-col-tag-gray { background: var(--color-bg-gray-shield); color: var(--color-text-gray); }
.ls-col-tag-green { background: var(--color-bg-green-shield); color: var(--color-text-green); }

.ls-cell-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
}
.ls-cell-icon svg { width: 100%; height: 100%; }
.ls-cell-icon-cross { color: var(--color-text-gray); }
.ls-cell-icon-check { color: var(--color-primary); }

.ls-compare-note {
    max-width: 980px;
    margin: 16px auto 0;
}
.ls-compare-note summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 600;
    list-style: none;
}
.ls-compare-note summary::-webkit-details-marker { display: none; }
.ls-compare-note summary::before { content: '+ '; }
.ls-compare-note[open] summary::before { content: '– '; }
.ls-compare-note p { margin: 10px 0 0; color: var(--color-text-gray); }

/* ============================================================
   7. ТАРИФЫ
   ============================================================ */
.ls-tariffs { scroll-margin-top: 90px; }
.ls-tariffs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}
.ls-tariff-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 24px;
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
}
.ls-tariff-popular {
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(50, 119, 10, 0.15);
}
.ls-tariff-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: var(--font-size-14);
    font-weight: 600;
    white-space: nowrap;
}
.ls-tariff-name { margin: 0; color: var(--color-text-main); }
.ls-tariff-term { margin: 4px 0 0; color: var(--color-text-gray); }
.ls-tariff-price {
    margin: 18px 0 22px;
    font-size: var(--font-size-38);
    font-weight: 700;
    color: var(--color-primary);
}
.ls-tariff-popular .ls-tariff-price { color: var(--color-primary); }
.ls-tariff-features {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1 1 auto;
}
.ls-tariff-features li {
    display: flex;
    gap: 10px;
    margin: 0;
    color: var(--color-text-main);
}
.ls-tariff-cta { width: 100%; text-align: center; margin-top: auto; }

.ls-tariffs-doc-note,
.ls-tariffs-micro {
    max-width: 980px;
    margin: 18px auto 0;
    text-align: center;
    color: var(--color-text-gray);
}
.ls-tariffs-cta {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ============================================================
   8. ЭКСПЕРТЫ (переиспользует .teachers-section)
   ============================================================ */
.ls-experts .ls-experts-text {
    max-width: 880px;
    margin: -16px auto 36px;
    text-align: center;
    color: var(--color-text-plashka);
}

/* ============================================================
   9. НАМ ДОВЕРЯЮТ
   ============================================================ */
.ls-trust { background: var(--color-white); padding-bottom: 24px !important; }
.ls-trust-text {
    max-width: 880px;
    margin: 0 auto 24px;
    text-align: center;
    color: var(--color-text-main);
}
.ls-trust-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    justify-content: center;
}
.ls-trust-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ls-trust-link:hover { color: var(--color-hover-green); }

/* ============================================================
   12. ФИНАЛЬНЫЙ CTA
   ============================================================ */
.ls-final { background: var(--color-bg-pages); }
.ls-final-inner {
    background: var(--gradient-primary);
    color: var(--color-text-white);
    border-radius: 28px;
    padding: 56px 48px;
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
}
.ls-final-inner h2 { margin: 0 0 16px; color: var(--color-text-white); }
.ls-final-inner .text-p2 { margin: 0 auto 28px; max-width: 760px; color: rgba(255, 255, 255, 0.92); }
.ls-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
/* На зелёном фоне вторичная кнопка должна быть читаемой (белая) */
.ls-final-actions .btn-secondary {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1024px) {
    .ls-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .ls-about-grid { grid-template-columns: 1fr; gap: 32px; }
    .ls-steps { position: static; }
    .ls-tracks-grid { grid-template-columns: repeat(2, 1fr); }
    .ls-formats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ls-main section { padding: 48px 0; }
    .ls-hero { padding: 72px 0 48px !important; }
    .ls-segments-grid { grid-template-columns: 1fr; }
    .ls-platform-grid { grid-template-columns: 1fr; }
    .ls-tariffs-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .ls-lead-magnet { grid-template-columns: 1fr; }
    .ls-segments-plate { padding: 28px 24px; }
    .ls-slogan { font-size: var(--font-size-24); }

    /* Сравнительная таблица → карточки */
    .ls-compare-head { display: none; }
    .ls-compare-row { grid-template-columns: 1fr; }
    .ls-compare-row + .ls-compare-row { border-top: 8px solid var(--color-bg-pages); }
    .ls-compare-label { font-size: var(--font-size-18); }
    .ls-compare-without::before { content: 'Без подписки'; font-weight: 600; color: var(--color-text-gray); margin-right: 4px; }
    .ls-compare-with::before { content: 'С подпиской'; font-weight: 600; color: var(--color-text-green); margin-right: 4px; }
}

@media (max-width: 480px) {
    .ls-tracks-grid { grid-template-columns: 1fr; }
    .ls-formats-grid { grid-template-columns: 1fr; }
    .ls-hero-actions .btn,
    .ls-tariffs-cta .btn,
    .ls-final-actions .btn { width: 100%; }
    .ls-lead-info, .ls-lead-form { padding: 28px 22px; }
    .ls-final-inner { padding: 40px 24px; }
}