/* ═══════════════════════════════════════════════════════════════════════════
   БЕСПЛАТНЫЙ АУДИТ
   ═══════════════════════════════════════════════════════════════════════════
   Что чинится по сравнению с прежней версией:
   1. С первого экрана не читалось главное — «бесплатно» и «за 3–5 дней».
      Теперь это метка, три маркера и кнопка в первом же экране.
   2. Карточки видов аудита были разной высоты, одна выделена чужой рамкой
      с фиолетовым градиентом. Теперь сетка одинаковых плиток.
   3. Девять вопросов стояли развёрнутыми на два экрана — свёрнуты в аккордеон
      на нативном <details>, без единой строки JS.
   4. Внизу шли четыре призыва подряд — остался один блок переходов.
   ═════════════════════════════════════════════════════════════════════════ */

.au { --au-line: rgba(8, 9, 11, .14); background: var(--paper); }

.au__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

.au > section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--au-line); }
.au > section:first-child { border-top: 0; padding-top: clamp(2rem, 4vw, 3.5rem); }

.au__sec {
    margin: 0 0 .75rem;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--soft);
}

.au__h2 {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.au__lead {
    max-width: 56ch;
    margin: 0 0 1.5rem;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.6;
    color: var(--soft);
}

/* ── первый экран ─────────────────────────────────────────────────────── */
.au__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.au__badge {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: .375rem .75rem;
    background: var(--acid);
    border: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
}

.au__h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.035em;
}

.au__acts { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: 2rem; }

.au__acts .btn {
    padding: 1rem 1.875rem;
    font-family: var(--mono);
    font-size: .8125rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
}

.au__acts .btn--acid { background: var(--acid); color: var(--ink); border: 1px solid var(--ink); }
.au__acts .btn--acid:hover { background: var(--ink); color: var(--acid); }
.au__acts .btn--o { background: transparent; color: var(--ink); border: 1px solid rgba(8, 9, 11, .4); }
.au__acts .btn--o:hover { border-color: var(--ink); background: rgba(8, 9, 11, .04); }

.au__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin: 0;
    padding: 1.25rem 0 0;
    list-style: none;
    border-top: 1px solid var(--au-line);
}

.au__marks li { display: flex; align-items: baseline; gap: .5rem; }
.au__marks b { font-family: var(--mono); font-size: 1.375rem; color: var(--green); }
.au__marks span { font-size: .875rem; color: var(--soft); }

.au__side { padding: clamp(1.25rem, 2vw, 1.625rem); background: var(--ink); color: var(--paper); }

.au__sh {
    margin: 0 0 1rem;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acid);
}

.au__list { margin: 0 0 1rem; padding: 0 0 0 1.125rem; display: flex; flex-direction: column; gap: .5rem; }
.au__list li { font-size: .9375rem; line-height: 1.4; }
.au__sn { margin: 0; font-size: .8125rem; line-height: 1.5; color: rgba(237, 237, 234, .6); }

/* ── виды аудита: строго равные плитки ────────────────────────────────── */
.au__kinds {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--au-line);
    border: 1px solid var(--au-line);
}

.kind {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(1.125rem, 1.8vw, 1.5rem);
    background: var(--paper);
    transition: background-color .16s;
}

.kind:hover { background: #FFFFFF; }
.kind__t { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.kind__n { margin: 0 0 .375rem; font-size: .8125rem; color: var(--lit); font-family: var(--mono); }

.kind__l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.kind__l li {
    position: relative;
    padding-left: 1rem;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--soft);
}

.kind__l li::before { content: "+"; position: absolute; left: 0; color: var(--lit); font-family: var(--mono); }

/* ── состав отчёта ────────────────────────────────────────────────────── */
.au__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.au__cols li {
    position: relative;
    padding: .625rem 0 .625rem 1.5rem;
    border-bottom: 1px solid var(--au-line);
    font-size: .9375rem;
    line-height: 1.5;
}

.au__cols li::before { content: "✓"; position: absolute; left: 0; color: var(--lit); font-family: var(--mono); }

/* ── шаги ─────────────────────────────────────────────────────────────── */
.steps { margin: 0; padding: 0; list-style: none; }

.steps__i {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--au-line);
}

.steps__i:first-child { border-top: 0; }
.steps__n { font-family: var(--mono); font-size: .875rem; color: var(--soft); }
.steps__b { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .25rem 1.5rem; align-items: baseline; }
.steps__t { font-size: 1.125rem; font-weight: 700; }
.steps__m { font-family: var(--mono); font-size: .8125rem; color: var(--lit); }
.steps__d { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.55; color: var(--soft); }

/* ── форма ────────────────────────────────────────────────────────────── */
.au__fgrid {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.au__contact { margin: 0; font-size: .9375rem; color: var(--soft); }
.au__contact a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }

.af {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: #FFFFFF;
    border: 1px solid var(--ink);
}

.af__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.af__kinds { margin: 0; padding: 0; border: 0; }
.af__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin-top: .625rem; }

.af__area { min-height: 5.5rem; resize: vertical; font-family: var(--grotesk); }

.fld__opt { font-family: var(--grotesk); text-transform: none; letter-spacing: 0; color: rgba(8, 9, 11, .38); }

.af__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: .25rem; }

.af__acts .btn {
    padding: 1rem 1.75rem;
    background: var(--acid);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0;
    font-family: var(--mono);
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.af__acts .btn:hover { background: var(--ink); color: var(--acid); }
.af__note { flex: 1 1 14rem; margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--soft); }
.af__note a { color: var(--green); }

/* ── вопросы: свёрнутый аккордеон ─────────────────────────────────────── */
.faq { border-top: 1px solid var(--au-line); }

.faq__i { border-bottom: 1px solid var(--au-line); }

.faq__q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: color .15s;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
    content: "+";
    flex: none;
    font-family: var(--mono);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--lit);
    transition: transform .2s;
}

.faq__i[open] .faq__q::after { content: "−"; }
.faq__q:hover { color: var(--lit); }

.faq__a { padding: 0 0 1.25rem; max-width: 76ch; }
.faq__a p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--soft); }

/* ── переходы ─────────────────────────────────────────────────────────── */
.au__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--au-line);
    border: 1px solid var(--au-line);
}

.au__links a {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: 1.125rem 1.25rem;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: background-color .16s;
}

.au__links a:hover { background: #FFFFFF; }
.au__links b { font-size: 1rem; }
.au__links span { font-family: var(--mono); font-size: .8125rem; color: var(--lit); }

/* ── адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .au__grid, .au__fgrid { grid-template-columns: minmax(0, 1fr); }
    .au__kinds, .au__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .au__kinds, .au__links, .au__cols, .af__row, .af__picks { grid-template-columns: minmax(0, 1fr); }
    .steps__i { grid-template-columns: 2.25rem minmax(0, 1fr); }
    .steps__b { grid-template-columns: minmax(0, 1fr); }
    .au__acts .btn { flex: 1 1 100%; text-align: center; }
}