/* =============================================================================
   Nodra — публичный лендинг (Carbon-style). Использует токены --n-* из tokens.css.
   Всё скоупится в .nodra (как и base.css).
   ============================================================================= */

.nodra .l-page { min-height: 100vh; background: var(--n-background); color: var(--n-text-primary); }

/* Контейнер по центру */
.nodra .l-container { max-width: 76rem; margin-inline: auto; padding-inline: var(--n-spacing-06); }

/* ---- Навигация ---- */
.nodra .l-nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--n-background) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--n-border-subtle);
}
.nodra .l-nav__inner { display: flex; align-items: center; gap: var(--n-spacing-06); height: 3.5rem; }
.nodra .l-nav__brand { font-size: 1.25rem; font-weight: 600; color: var(--n-text-primary); text-decoration: none; letter-spacing: -0.01em; }
.nodra .l-nav__links { display: flex; gap: var(--n-spacing-06); margin-left: var(--n-spacing-05); }
.nodra .l-nav__links a { color: var(--n-text-secondary); text-decoration: none; font-size: 0.875rem; }
.nodra .l-nav__links a:hover { color: var(--n-text-primary); }
.nodra .l-nav__spacer { flex: 1 1 auto; }

/* ---- Секции ---- */
.nodra .l-section { padding-block: var(--n-spacing-12); }
.nodra .l-section--tight { padding-block: var(--n-spacing-10); }
.nodra .l-section__head { max-width: 44rem; margin-inline: auto; text-align: center; margin-bottom: var(--n-spacing-09); }
.nodra .l-eyebrow {
    display: inline-block; font-family: var(--n-font-mono, monospace); font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-link-primary);
    border: 1px solid var(--n-border-subtle); padding: 2px 10px; margin-bottom: var(--n-spacing-05);
}
.nodra .l-h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.nodra .l-h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.nodra .l-lead { font-size: 1.125rem; line-height: 1.5; color: var(--n-text-secondary); margin-top: var(--n-spacing-05); }

/* ---- Hero ---- */
.nodra .l-hero { text-align: center; padding-block: var(--n-spacing-13) var(--n-spacing-11); position: relative; }
.nodra .l-hero__inner { max-width: 52rem; margin-inline: auto; }
.nodra .l-hero__cta { display: flex; gap: var(--n-spacing-05); justify-content: center; flex-wrap: wrap; margin-top: var(--n-spacing-08); }
.nodra .l-hero__note { margin-top: var(--n-spacing-06); font-size: 0.8125rem; color: var(--n-text-helper); }

/* ---- Сетка фич ---- */
.nodra .l-grid { display: grid; gap: var(--n-spacing-05); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 672px)  { .nodra .l-grid--2 { grid-template-columns: repeat(2, 1fr); } .nodra .l-grid--3 { grid-template-columns: repeat(2, 1fr); } .nodra .l-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1056px) { .nodra .l-grid--3 { grid-template-columns: repeat(3, 1fr); } .nodra .l-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.nodra .l-feature { background: var(--n-layer-01); border: 1px solid var(--n-border-subtle); padding: var(--n-spacing-06); }
.nodra .l-feature__icon { width: 2rem; height: 2rem; fill: var(--n-link-primary); margin-bottom: var(--n-spacing-05); }
.nodra .l-feature__title { font-size: 1.125rem; font-weight: 600; margin: 0 0 var(--n-spacing-03); }
.nodra .l-feature__text { font-size: 0.875rem; line-height: 1.45; color: var(--n-text-secondary); margin: 0; }

/* ---- Почему это важно / статы ---- */
.nodra .l-stat { background: var(--n-layer-01); border: 1px solid var(--n-border-subtle); padding: var(--n-spacing-06); }
.nodra .l-stat__value { font-size: 2.5rem; font-weight: 300; line-height: 1.1; }
.nodra .l-stat__label { font-size: 0.875rem; color: var(--n-text-secondary); margin-top: var(--n-spacing-03); }

/* ---- Шаги ---- */
.nodra .l-step { display: flex; gap: var(--n-spacing-05); }
.nodra .l-step__num {
    flex-shrink: 0; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
    background: var(--n-button-primary); color: #fff; font-weight: 600; font-size: 0.875rem;
}
.nodra .l-step__title { font-weight: 600; margin: 0 0 var(--n-spacing-02); }
.nodra .l-step__text { font-size: 0.875rem; color: var(--n-text-secondary); margin: 0; line-height: 1.45; }

/* ---- Полоса «спокойствие/цена» ---- */
.nodra .l-band { background: var(--n-layer-01); border: 1px solid var(--n-border-subtle); padding: var(--n-spacing-09); text-align: center; }

/* ---- Тарифы ---- */
.nodra .l-price { background: var(--n-layer-01); border: 1px solid var(--n-border-subtle); padding: var(--n-spacing-07); display: flex; flex-direction: column; gap: var(--n-spacing-05); }
.nodra .l-price--featured { border-color: var(--n-button-primary); box-shadow: inset 0 0 0 1px var(--n-button-primary); }
.nodra .l-price__name { display: flex; align-items: center; justify-content: space-between; }
.nodra .l-price__title { font-size: 1.25rem; font-weight: 600; }
.nodra .l-price__amount { font-size: 2.25rem; font-weight: 300; line-height: 1; }
.nodra .l-price__period { font-size: 0.875rem; color: var(--n-text-helper); }
.nodra .l-price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--n-spacing-03); }
.nodra .l-price__list li { display: flex; gap: var(--n-spacing-03); font-size: 0.875rem; color: var(--n-text-secondary); align-items: flex-start; }
.nodra .l-price__list svg { flex-shrink: 0; width: 1rem; height: 1rem; fill: var(--n-support-success); margin-top: 2px; }

/* ---- FAQ ---- */
.nodra .l-faq { max-width: 48rem; margin-inline: auto; }
.nodra .l-faq details { border-bottom: 1px solid var(--n-border-subtle); }
.nodra .l-faq summary {
    list-style: none; cursor: pointer; padding: var(--n-spacing-05) 0;
    display: flex; justify-content: space-between; align-items: center; gap: var(--n-spacing-05);
    font-weight: 600; color: var(--n-text-primary);
}
.nodra .l-faq summary::-webkit-details-marker { display: none; }
.nodra .l-faq summary .l-faq__plus { color: var(--n-text-helper); transition: transform var(--n-duration-fast, .15s) ease; font-weight: 400; }
.nodra .l-faq details[open] summary .l-faq__plus { transform: rotate(45deg); }
.nodra .l-faq__answer { padding: 0 0 var(--n-spacing-06); color: var(--n-text-secondary); font-size: 0.9375rem; line-height: 1.5; max-width: 42rem; }

/* ---- Финальный CTA ---- */
.nodra .l-cta { background: var(--n-button-primary); color: #fff; padding: var(--n-spacing-11) var(--n-spacing-07); text-align: center; }
.nodra .l-cta .l-h2 { color: #fff; }
.nodra .l-cta .l-lead { color: rgba(255,255,255,0.85); }
.nodra .l-cta__btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: var(--n-spacing-07);
    background: #fff; color: var(--n-button-primary); height: 3rem; padding-inline: var(--n-spacing-06);
    font-weight: 600; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer;
}
.nodra .l-cta__btn:hover { background: rgba(255,255,255,0.9); }

/* ---- Футер ---- */
.nodra .l-footer { border-top: 1px solid var(--n-border-subtle); padding-block: var(--n-spacing-08); }
.nodra .l-footer__row { display: flex; flex-wrap: wrap; gap: var(--n-spacing-06); align-items: center; justify-content: space-between; }
.nodra .l-footer__muted { color: var(--n-text-helper); font-size: 0.875rem; }
.nodra .l-footer a { color: var(--n-link-primary); text-decoration: none; }

.nodra .l-hide-sm { display: none; }
@media (min-width: 672px) { .nodra .l-hide-sm { display: flex; } }

/* Текстовые публичные страницы (политика, оферта, инструкции) */
.nodra .l-prose { max-width: 52rem; margin: 0 auto; padding: var(--n-spacing-09) 0 var(--n-spacing-11); color: var(--n-text-secondary); font-size: 1rem; line-height: 1.7; }
.nodra .l-prose h1 { color: var(--n-text-primary); font-size: 2rem; margin: 0 0 var(--n-spacing-05); }
.nodra .l-prose h2 { color: var(--n-text-primary); font-size: 1.35rem; margin: var(--n-spacing-08) 0 var(--n-spacing-04); }
.nodra .l-prose h3 { color: var(--n-text-primary); font-size: 1.1rem; margin: var(--n-spacing-06) 0 var(--n-spacing-03); }
.nodra .l-prose p { margin: 0 0 var(--n-spacing-05); }
.nodra .l-prose ul, .nodra .l-prose ol { margin: 0 0 var(--n-spacing-05); padding-left: var(--n-spacing-06); }
.nodra .l-prose li { margin-bottom: var(--n-spacing-03); }
.nodra .l-prose a { color: var(--n-link-primary); }
.nodra .l-prose code { font-family: 'IBM Plex Mono', monospace; font-size: 0.9em; background: var(--n-layer-01); padding: 0 4px; }
.nodra .l-prose__meta { color: var(--n-text-helper); font-size: 0.85rem; margin-bottom: var(--n-spacing-07); }
.nodra .l-prose__toc { display: flex; flex-wrap: wrap; gap: var(--n-spacing-04); margin: 0 0 var(--n-spacing-07); padding: var(--n-spacing-05); background: var(--n-layer-01); }
.nodra .l-prose__toc a { color: var(--n-link-primary); text-decoration: none; font-size: 0.9rem; }

/* Плейсхолдер кнопки платного тарифа, пока оплата не подключена */
.nodra .l-price__soon { text-align: center; color: var(--n-text-helper); font-size: 0.9rem; padding: var(--n-spacing-04); border: 1px dashed var(--n-border-subtle-02); }