/* ══════════════════════════════════════════════════════════════════════════
   apple.css — слой «как в Apple» поверх бренда.

   Подключается ПОСЛЕ brand.css / home.css / funnel.css и переопределяет три
   вещи, из которых и складывается это ощущение:

   1. Гарнитура. У Apple всё набрано одним системным шрифтом с плотным
      трекингом на крупных кеглях. Unbounded остаётся только в вордмарке —
      логотип это фирменный знак, а не элемент интерфейса.
   2. Плоскость и воздух. Фон нейтральный (#F5F5F7), карточки белые, границы —
      волосяные линии, тени почти незаметны. Разделяет не рамка, а пустота.
   3. Формы. Радиусы 12/18/22, высоты 44–50 (палец), кнопки полужирные без
      подложек-градиентов, поля с мягкой обводкой и янтарным кольцом фокуса.

   Банановый акцент никуда не девается: в системе Apple ровно так и работает
   accent color — один цвет на заливках и активных состояниях.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Шрифт: SF на технике Apple, системный — на остальных. Один стек на всё. */
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ap-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Поверхности */
  --ap-bg:        #F5F5F7;   /* фон страницы */
  --ap-bg-2:      #FFFFFF;   /* карточка, лист */
  --ap-bg-3:      #FAFAFC;   /* вложенный блок */
  --ap-tint:      #F2F2F7;   /* серая заливка контролов (iOS fill) */

  /* Текст */
  --ap-ink:       #1D1D1F;
  --ap-ink-2:     rgba(29,29,31,.62);
  --ap-ink-3:     rgba(29,29,31,.42);

  /* Линии и тени: у Apple разделяет волосяная линия, а не рамка. */
  --ap-line:      rgba(0,0,0,.10);
  --ap-line-2:    rgba(0,0,0,.06);
  --ap-shadow:    0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --ap-shadow-sm: 0 1px 2px rgba(0,0,0,.05);

  /* Акцент и семантика */
  --ap-accent:    #FFC61E;
  --ap-accent-2:  #F0B60A;
  --ap-on-accent: #1D1D1F;
  --ap-link:      #8A6400;   /* янтарь читаемой плотности для текста-ссылки */
  --ap-green:     #34C759;   --ap-green-ink: #1B7F3A;
  --ap-red:       #FF3B30;   --ap-red-ink:   #C7261D;

  /* Радиусы и ритм */
  --ap-r-sm: 10px;  --ap-r: 14px;  --ap-r-lg: 18px;  --ap-r-xl: 22px;
  --ap-ease: cubic-bezier(.32,.72,0,1);
}

/* ── Типографика ─────────────────────────────────────────────────────────── */
html, body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, li, td, th, label, span, div, a {
  font-family: var(--ap-font);
}
/* Темы страниц назначают гарнитуру точечными селекторами (.hero h1, .price-amount
   и т.п.), поэтому слой перебивает её явно — это единственное место в файле,
   где !important оправдан: одна гарнитура на весь интерфейс и есть Apple. */
body, h1, h2, h3, h4, h5, h6, p, li, td, th, label, span, div, a,
button, input, select, textarea,
.hero h1, .section-header h2, .price-amount, .plan-price, .plan-features li,
.bn-sum, .lk-h1, .fn-h1, .osum-price, .badge, .btn, .ui-btn, .sec-kicker,
.step-number, .acad-name, .review-text, .faq-question, .stat-n {
  font-family: var(--ap-font) !important;
}
/* Моноширинные места (номер заказа, выданные доступы) — системный моно. */
.dl-body, .ord-id, .mono, code, kbd, pre { font-family: var(--ap-mono) !important; }
.tabular { font-variant-numeric: tabular-nums; }

body { background: var(--ap-bg); color: var(--ap-ink); -webkit-font-smoothing: antialiased; }

h1, .hero h1 { letter-spacing: -.022em; font-weight: 700; }
h2, .section-header h2 { letter-spacing: -.021em; font-weight: 700; }
h3, h4 { letter-spacing: -.014em; font-weight: 600; }
p, li { letter-spacing: -.008em; }

/* Шкала: Large Title → Title → Headline → Body → Footnote, как в HIG. */
.hero h1            { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.07; }
.section-header h2  { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
.hero-sub           { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ap-ink-2); }
.section-header p   { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: var(--ap-ink-2); }

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn, .ui-btn, button.btn {
  border-radius: 12px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .18s var(--ap-ease), background .18s var(--ap-ease), box-shadow .18s var(--ap-ease);
}
.btn-primary, .ui-btn--primary {
  background: var(--ap-accent); color: var(--ap-on-accent); border: 0; box-shadow: none;
}
.btn-primary:hover, .ui-btn--primary:hover { background: var(--ap-accent-2); }
.btn-primary:active, .btn-secondary:active { transform: scale(.985); }
.btn-secondary {
  background: var(--ap-tint); color: var(--ap-ink); border: 0;
  box-shadow: none;
}
.btn-secondary:hover { background: #EAEAEF; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 17px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 15px; }

/* ── Поля ────────────────────────────────────────────────────────────────── */
/* Класс .in в общий список НЕ берём: в академии это модификатор анимации
   появления (rv in), и поле-подобные стили превращали каждый текстовый блок
   в белую капсулу. Здесь только настоящие поля ввода. */
input:not([type=checkbox]):not([type=radio]), textarea, select, .em-input, .tk-in {
  background: var(--ap-bg-2); border: 0;
  box-shadow: inset 0 0 0 1px var(--ap-line);
  border-radius: 12px; font-size: 17px; color: var(--ap-ink);
}
input:focus, textarea:focus, select:focus, .em-input:focus, .tk-in:focus {
  outline: none; background: var(--ap-bg-2);
  box-shadow: inset 0 0 0 1.5px var(--ap-accent-2), 0 0 0 4px rgba(255,198,30,.28);
}
::placeholder { color: var(--ap-ink-3); }

/* ── Карточки и секции ───────────────────────────────────────────────────── */
.pricing-card, .step, .safety-item, .way, .review-card, .acad-card,
.card, .ord, .tk-card, .msg, .cta-card, .guarantee, .faq-list {
  background: var(--ap-bg-2);
  border: 0;
  border-radius: var(--ap-r-lg);
  box-shadow: var(--ap-shadow-sm);
}
.pricing-card:hover, .step:hover, .safety-item:hover, .review-card:hover, .acad-card:hover {
  box-shadow: var(--ap-shadow); transform: none;
}
.pricing-card--featured {
  background: var(--ap-bg-2);
  box-shadow: 0 0 0 2px var(--ap-accent), var(--ap-shadow);
}
.section--alt, .pricing.section--alt { background: transparent; }

/* Волосяная линия вместо рамки — фирменный приём разделения у Apple. */
.header, .header.scrolled, .header--past { background: rgba(245,245,247,.82) !important;
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ap-line-2) !important; box-shadow: none !important; }
.footer { border-top: 1px solid var(--ap-line-2); background: transparent; }
/* Шапка академии (.hdr) — то же матовое стекло, что и на сайте. */
.hdr { background: rgba(245,245,247,.82) !important; backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ap-line-2) !important; }
.ccard, .doc, .faq details { background: var(--ap-bg-2); border: 0; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow-sm); }
.chip, .filter { border-radius: 999px; }

/* ── Мелочи, которые выдают систему ──────────────────────────────────────── */
.badge, .plan-tag, .ui-badge { border-radius: 999px; font-weight: 600; letter-spacing: -.005em; }
.plan-tag--acc { background: var(--ap-accent); color: var(--ap-on-accent); }
.plan-tag--stock { background: rgba(52,199,89,.14); color: var(--ap-green-ink); }
a { color: inherit; }
.link, .lk-foot a, .ftr-legal a { color: var(--ap-link); }

/* Прокрутка внутри карточек и лент — тонкая, как в macOS */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.22) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

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

/* ══ Личный кабинет ═══════════════════════════════════════════════════════
   Разделы кабинета — это списки, а у Apple список выглядит одинаково везде:
   белый лист, волосяные разделители между строками, chevron справа, серые
   вложенные блоки для служебного текста. */

/* Боковая панель — как sidebar в macOS: на холсте, без карточки и рамок.
   Раньше это были две белые коробки (профиль и меню) плюс кнопка выхода —
   три плоскости там, где нужна одна колонка. */
.pf { background: none; border: 0; box-shadow: none; padding: 4px 10px 14px; margin-bottom: 4px; }
.lk-nav { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; gap: 1px; }
.lk-tab { border-radius: 8px; min-height: 34px; padding: 0 10px; font-size: 14.5px; font-weight: 500;
  color: var(--ap-ink-2); gap: 10px; }
.lk-tab:hover { background: rgba(0,0,0,.04); color: var(--ap-ink); }
.lk-tab.on { background: rgba(0,0,0,.07); color: var(--ap-ink); font-weight: 600; }
.lk-tab.on svg, .lk-tab:hover svg { color: var(--ap-ink); }
.lk-tab svg { width: 17px; height: 17px; }
.lk-bal-chip { background: var(--ap-accent); color: var(--ap-on-accent); }
/* Выход — тихая строка внизу колонки, а не кнопка вровень с разделами. */
.lk-side .lk-out { margin-top: 14px; padding: 0 10px; min-height: 34px; border: 0 !important;
  background: none !important; box-shadow: none !important; color: var(--ap-ink-3); font-weight: 500; }
.lk-side .lk-out:hover { color: var(--ap-ink-2); background: rgba(0,0,0,.04) !important; border-radius: 8px; }

/* Статус выдачи не должен липнуть к блоку с доступом. */
/* Отступ до блока доступа даём СТРОКЕ статуса, а не бейджу внутри неё: на
   бейдже он сдвигал «Выдан» вверх относительно даты рядом — строка выглядела
   разъехавшейся. */
.ord-body .ord-st { margin-bottom: 12px; }
.delivered { margin-top: 4px; }

/* Заказ: карточка-лист, содержимое разделено линиями. */
.ord { background: var(--ap-bg-2); border: 0; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow-sm); }
.ord:hover { box-shadow: var(--ap-shadow); }
.ord-top { padding: 16px 18px; }
.osum-mark { background: var(--ap-tint); color: var(--ap-ink); border-radius: 12px; }
.ord-body { border-top: 1px solid var(--ap-line-2); padding-top: 14px; margin-top: 0; }
.ord-next { border-top: 1px solid var(--ap-line-2); }

/* Выданный доступ — не «зелёная плашка», а серый блок с моноширинным текстом:
   так в macOS показывают выданные ключи и коды. */
.delivered { background: var(--ap-tint); color: var(--ap-ink); border-radius: 14px; font-weight: 400; }
.delivered .dl-h { color: var(--ap-ink-2); }
.dl-body { font-size: 14px; line-height: 22px; color: var(--ap-ink); }
.badge.is-done { color: var(--ap-green-ink); }

/* Баллы */
.bn-top { background: var(--ap-bg-2); box-shadow: 0 0 0 1.5px rgba(255,198,30,.55), var(--ap-shadow-sm); border-radius: var(--ap-r-lg); }
.bn-sum { letter-spacing: -.03em; font-weight: 700; }
.bn-tiers li { background: var(--ap-bg-2); box-shadow: inset 0 0 0 1px var(--ap-line); border-radius: 14px; }
.bn-op-ic { background: var(--ap-tint); border-radius: 10px; }
.bn-hold-bar { background: rgba(0,0,0,.08); }
.bn-hold-bar i { background: var(--ap-accent-2); }

/* Форма входа и панель «что даёт кабинет» */
.auth .card { background: var(--ap-bg-2) !important; box-shadow: var(--ap-shadow) !important; border-radius: var(--ap-r-xl); }
.auth-side { background: var(--ap-bg-2); box-shadow: var(--ap-shadow-sm); border-radius: var(--ap-r-xl); }
.ap-ico { background: var(--ap-tint); border-radius: 10px; }

/* Шапка кабинета и воронки — то же матовое стекло, что на сайте. */
.fn-header { background: rgba(245,245,247,.82); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ap-line-2); }
.fn-foot, .lk-foot { color: var(--ap-ink-3); }

/* Вторичные кнопки витрины были контурными — в системном интерфейсе такую роль
   играет серая заливка. Контур на белой карточке читался как «неактивно». */
/* Тема витрины красит кнопку в нескольких местах (по бренду тарифа и в hover),
   поэтому здесь важность выставлена явно — иначе контур возвращается. */
.pricing-card .plan-btn.btn-secondary,
.pricing-card:hover .plan-btn.btn-secondary,
.pricing-card .plan--claude .plan-btn.btn-secondary {
  background: var(--ap-tint) !important; box-shadow: none !important; border: 0 !important; color: var(--ap-ink) !important;
}
.pricing-card .plan-btn.btn-secondary:hover { background: #E9E9EE !important; }

/* Ритм: между секциями было до 230 px пустоты — страница разваливалась на
   отдельные экраны. Ужимаем, оставляя воздух внутри блоков. */
/* Между секциями было под 140 px — на широком экране это читается как обрыв.
   Оставляем воздух, но такой, чтобы следующий блок начинался в том же экране. */
.section { padding: clamp(48px, 4.2vw, 72px) 0; }
#pricing .pricing-grid { margin-bottom: 4px; }
@media (max-width: 760px) { .section { padding: clamp(44px, 8vw, 60px) 0; } }

/* ── Логотип ─────────────────────────────────────────────────────────────
   Знак убран по решению владельца: ни рисованный банан, ни плашка не держали
   мелкий кегль и спорили с системной типографикой. Остаётся вордмарк и
   эндорсмент — так же, как у большинства системных интерфейсов. */
.logo-mark, .ui-side-logo img { display: none !important; }
.logo-text { letter-spacing: -.028em; font-weight: 700; }
.logo-endorse { letter-spacing: .16em; }

/* ── Витрина: кнопка «в корзину» ─────────────────────────────────────────
   Она растягивалась во всю ширину карточки и весила столько же, сколько
   «Подключить», — на широкой карточке Gemini это выглядело как вторая главная
   кнопка. Делаем её тихой строкой-действием под ценой. */
.cart-add {
  width: auto; min-height: 34px; margin: 10px auto 0; padding: 0 14px;
  border: 0 !important; background: var(--ap-tint) !important; color: var(--ap-ink-2) !important;
  border-radius: 10px; font-size: 13.5px;
}
.cart-add:hover { background: #E9E9EE !important; color: var(--ap-ink) !important; }
.plan--full .cart-add { grid-column: 1 / -1; justify-self: center; }

/* Широкая карточка (Gemini) — колонки одной высоты и без провала снизу. */
.plan--full { align-items: center; }
.plan--full .plan-features { margin-top: 0; padding-top: 0; }

/* ══ По аудиту сайта ═══════════════════════════════════════════════════════ */

/* Сквозь шапку читались цены и заголовки: 82% прозрачности мало, когда под ней
   проезжает крупный текст. Материал должен размывать, а не показывать. */
.header, .header.scrolled, .header--past, .fn-header, .hdr {
  background: rgba(245,245,247,.94) !important;
}

/* Блоки одной секции обязаны иметь общий правый край: статистика, плашка
   гарантии и ряд карточек расходились на 480 px. */
#safety .guarantee, #safety .safety-grid, #safety .facts { max-width: none; margin-inline: 0; }

/* Плашка «Не активируем — вернём деньги» осталась единственным кремовым блоком
   с жёлтой рамкой. Форма — как у всех карточек, цвет отдан иконке. */
#safety .guarantee { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
#safety .guarantee-ico { background: rgba(255,198,30,.30); }

/* Ряды: карточки одной строки — одной высоты. */
#safety .safety-grid, .acad-grid, .steps, .ways, .art-more-grid { align-items: stretch; }
#safety .safety-grid > *, .acad-grid > *, .steps > *, .ways > * { height: 100%; }

/* FAQ обрывался на 164 px раньше соседних блоков. */
#faq .faq-list { max-width: none; }

/* Лента отзывов. Прошлая правка убрала вылет только слева, справа он остался —
   и четвёртая карточка резалась пополам об край окна, мимо всех сеток страницы.
   Держим ленту в границах контейнера: карточка, обрезанная ровно по колонке,
   читается как «есть ещё», а обрезанная краем экрана — как поломка. */
.reviews-rail { margin: 0; padding-inline: 0; scroll-padding-left: 0; }
.reviews-rail > :last-child { margin-right: 0; }
@media (max-width: 760px) {
  /* На телефоне лента, наоборот, должна доходить до краёв: полоса белого поля
     сбоку съедает и без того узкую карточку. */
  .reviews-rail { margin: 0 -16px; padding-inline: 16px; }
}

/* Один вторичный стиль кнопки на весь сайт — было три (контур, заливка, белая). */
.btn-secondary, .btn-secondary:link, .btn-secondary:visited {
  background: var(--ap-tint) !important; border: 0 !important; box-shadow: none !important; color: var(--ap-ink) !important;
}
.btn-secondary:hover { background: #E9E9EE !important; }

/* Маскот в «С чего начнём» перекрывал жёлтую кнопку. */
.mascot--cheer { right: -18px; bottom: -14px; width: 78px; }

/* Мобильные поверхности оставались кремовыми на сером холсте. */
.buybar { background: rgba(245,245,247,.96) !important; border-top: 1px solid var(--ap-line-2) !important; }
.nav-mobile, .nav-mobile.open { background: var(--ap-bg-2) !important; }

/* Тап-цель у строк тарифов на телефоне была 28 px при минимуме 44. */
@media (max-width: 760px) {
  .pricing-card .plan-btn::after { content: ""; position: absolute; inset: -10px; }
  .pricing-card .plan-btn { width: 32px; height: 32px; }
}

/* ── Академия ────────────────────────────────────────────────────────────── */
/* Радиусы кнопок разъезжались: пилюля в шапке, прямоугольник в герое. */
.hdr .btn, .top .btn, .browse .btn { border-radius: 12px !important; }
.filter, .chip { border-radius: 999px !important; }
/* Кремовые остатки: поле поиска и метки уроков. */
.browse input, .doc-meta, .ccard-meta, .lesson-meta { background: var(--ap-tint) !important; }
/* Ряд карточек уроков — одной высоты, описания не режем посреди слова. */
.grid { align-items: stretch; }
.grid > * { height: 100%; }

/* ── Воронка ─────────────────────────────────────────────────────────────── */
/* Последний шаг степпера упирался в край плашки. */
.steps-pill, .fn-steps { padding-right: 14px; }

/* ══ Страницы офферов: строка тарифа ═══════════════════════════════════════
   Строка была на flex: ширину левой колонки задавал текст, поэтому у каждого
   тарифа цена и кнопка стояли на своей вертикали — три строки «лесенкой».
   Ставим сетку с общими колонками: описание переносится внутри своей, а цены
   и кнопки выстраиваются столбиком. */
.o-plan {
  display: grid;
  /* Колонки кнопки и цены сжимаются вместе со страницей: жёсткие 15em съедали
     место у названия, и «Claude Pro» ломался на две строки. */
  grid-template-columns: minmax(0, 1fr) max-content minmax(9.5em, 14em);
  column-gap: 16px; align-items: center;
}
.o-plan-nm { white-space: nowrap; }         /* имя тарифа в одну строку */
.o-plan-ds { white-space: normal; }
.o-plan-l { min-width: 0; }
.o-plan-pr { justify-self: end; text-align: right; }
.o-plan .o-buy, .o-plan .btn { width: 100%; justify-content: center; }

@media (max-width: 720px) {
  /* На телефоне столбцы не помещаются: возвращаем перенос, кнопка во всю ширину. */
  .o-plan { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .o-plan .o-buy, .o-plan .btn { grid-column: 1 / -1; }
}

/* ══ По осмотру дизайна (сайт и уроки) ═════════════════════════════════════ */

/* Маскот в карточке «Знаю, что нужно» вылезал за её край, а карточка режет всё
   лишнее — у фигуры срезало руку и ступни, и она наезжала на жёлтую кнопку.
   Ставим внутрь карточки, рядом с кнопкой, а не поверх неё. */
/* Поза «радуется» убрана из карточки «Знаю, что нужно»: карточка режет всё, что
   выходит за её край, а анимация подпрыгивания клала фигуру на кнопку. Свободного
   места, где маскот сидел бы целиком и никому не мешал, в этой карточке нет. */

/* Под «Как это работает» стоял точечный отступ поверх общего ритма секций:
   зазор до «Гарантий» получался вдвое больше, чем везде (220 px против 121). */
/* Зазор считается как нижний отступ этой секции плюс верхний у следующей.
   С нулём выходило 60 px, с полным отступом секции — 156; ровно 121, как между
   остальными блоками, даёт 61. */
#how-it-works { padding-bottom: 61px !important; }

/* Кнопка подбора тарифа на телефоне была 36 px — меньше пальца. */
@media (max-width: 760px) {
  .btn-sm, .sec-quiz { min-height: 44px; height: auto; }

  /* Двустрочные ссылки в подвале почти слипались: высота фиксированная, а
     текста две строки. Отступ задаём полями, тогда воздух не зависит от длины. */
  .footer-links, .footer-contact { gap: 4px; }
  .footer-links a, .footer-contact a {
    min-height: 44px; height: auto; padding: 11px 0; box-sizing: border-box;
  }

  /* Лиана в первом экране начиналась в пустоте — под героем, ни на чём.
     На телефоне уже работает маскот, прыгающий по карточкам тарифов. */
  .mascot--swing-m { display: none; }
}

/* ── Уроки ─────────────────────────────────────────────────────────────── */

/* Тело урока получило фон карточки, но не получило внутренних полей: текст
   упирался прямо в её края. */
/* На страницах уроков нет общего класса-обёртки, поэтому целимся прямо в блоки. */
.doc { padding: clamp(18px, 2.4vw, 30px); }

@media (max-width: 760px) {
  /* Кнопка «наверх» лежала прямо на тексте. */
  .up { right: 12px; bottom: 12px; }
  /* Мелкие цели: кнопка шапки, фильтры, пункты оглавления. */
  .nav a.btn { min-height: 44px; display: inline-flex; align-items: center; }
  .filters button, .filter { min-height: 44px; }
  .toc a { min-height: 44px; display: flex; align-items: center; }
}