/* WunderCards — сайт. Палитра взята из иконки приложения (замерена пипеткой по PNG):
   янтарь #FFB320 → #FB9F0E · тёмно-синий #122069 · крем #FBEEDE.

   ДВА ПРАВИЛА КОНТРАСТА, проверены расчётом — не нарушать:
   1. Чистый янтарь НЕЛЬЗЯ брать текстом по светлому: 2.09 при норме 4.5.
      Для текста есть приглушённые тона того же семейства:
      #8A5A00 — мелкий (5.9 на белом), #B26A00 — крупный от 24px, #7A5000 — на кремовом.
   2. Синий текст ПОВЕРХ янтарного градиента — не прозрачнее .80 для мелкого:
      градиент к низу темнеет, и в худшей точке (#FB9F0E) .70 даёт лишь 4.19.

   Тема одна, светлая: дизайн построен на янтаре, тёмная версия ломала бы замысел. */

:root {
  --amber-1:#FFBC33; --amber-2:#FB9F0E;
  --navy:#122069; --navy-bg:#0B1240;
  --cream:#FBEEDE; --cream-tile:#FDF6EC;
  --ink:#101935; --ink-2:#4A5261; --ink-3:#55606F; --ink-4:#6B7280;
  --amber-ink:#8A5A00; --amber-ink-2:#7A5000;
  --line:#F0E2CC;
  --maxw:1120px;
  --pad:clamp(20px, 5vw, 88px);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0; background:#fff; color:var(--ink);
  font-family:"Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}

img { max-width:100%; }
a { color:#0A4899; text-underline-offset:2px; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.band { width:100%; }
.amber { background:linear-gradient(158deg, var(--amber-1) 0%, var(--amber-2) 100%); }
.navybg { background:var(--navy-bg); }
.creambg { background:var(--cream); }

/* --- Шапка --- */
header.site { padding:26px 0 8px; }
.navrow { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:800; font-size:18px;
         letter-spacing:-.3px; color:var(--navy); text-decoration:none; }
/* Знак без подложки: скруглять и обрезать нечего, задаём только высоту.
   Квадратная иконка приложения тут не годится — её янтарная плашка
   сливается с янтарным фоном шапки и знак теряет силуэт.

   В файле вокруг знака есть прозрачное поле: слева оно занимает 24 из 120
   пикселей высоты, то есть ровно 0.2 высоты. Без поправки видимый знак вставал
   на 9px правее левого края заголовка и подвала. Поправка выражена через саму
   высоту, поэтому менять --mk-h можно свободно — выравнивание не разъедется. */
.brand .mk {
  --mk-h: 44px;
  height: var(--mk-h);
  width: auto;
  display: block;
  margin-left: calc(var(--mk-h) * -0.2);
}
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:600; }
.navlinks a { color:rgba(18,32,105,.82); text-decoration:none; }
.navlinks a:hover { color:var(--navy); text-decoration:underline; }
/* на белых страницах шапка тёмная */
.onwhite .brand { color:var(--ink); }
.onwhite .navlinks a { color:var(--ink-2); }

/* --- Типографика --- */
h1 { font-weight:900; letter-spacing:-2.2px; line-height:1.02; margin:0;
     font-size:clamp(38px, 7.2vw, 78px); text-wrap:balance; }
h2 { font-weight:900; letter-spacing:-1.1px; line-height:1.13; margin:0;
     font-size:clamp(26px, 4vw, 36px); text-wrap:balance; }
h3 { font-size:20px; font-weight:800; letter-spacing:-.5px; margin:0 0 8px; color:var(--ink); }
p  { margin:0 0 14px; color:var(--ink-2); }
p:last-child { margin-bottom:0; }
strong { color:var(--ink); font-weight:700; }

.lede { font-size:clamp(17px, 2.2vw, 20px); line-height:1.52; margin:16px 0 0; max-width:36em; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
           color:var(--amber-ink); }
.body { font-size:17px; line-height:1.62; color:var(--ink-2); }

/* --- Значок App Store ---
   НАБРОСОК. Перед запуском заменить на официальную графику Apple: они требуют
   свой файл, свой шрифт и свои отступы. Ссылка — заглушка до публикации. */
.asbadge { display:inline-flex; align-items:center; gap:11px; background:#000; color:#fff;
           padding:10px 22px 11px; border-radius:11px; text-decoration:none; }
.asbadge:hover { background:#1a1a1a; }
.asbadge svg { fill:#fff; flex:none; }
.asbadge .t1 { display:block; font-size:10.5px; letter-spacing:.3px; line-height:1.15; opacity:.9; }
.asbadge .t2 { display:block; font-size:19px; font-weight:600; line-height:1.2; letter-spacing:-.4px; }

.btnN { display:inline-flex; align-items:center; background:var(--navy); color:#fff;
        font-weight:700; font-size:17px; padding:15px 30px; border-radius:999px; text-decoration:none; }
.btnN:hover { background:#1B2E86; }

/* --- Чипы (языки, свойства) --- */
.langlbl { font-size:12px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; }
.chiprow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Флаг и слово — ОТДЕЛЬНЫЕ элементы, иначе gap не работает и флаг липнет к буквам.
   Флаги те же, что DeckOptions.flag(for:) в приложении. */
.chip { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
        padding:8px 15px; border-radius:999px; }
.chip .fl { font-size:15px; line-height:1; }
.chipCr { background:rgba(255,255,255,.62); color:var(--navy); }
.chipAm { background:rgba(255,179,32,.16); color:var(--amber-ink-2); }
.chipNv { background:rgba(255,255,255,.08); color:var(--cream); }

/* --- Телефон --- */
.phone { border-radius:36px; background:var(--navy); padding:8px;
         box-shadow:0 30px 70px rgba(18,32,105,.34); width:min(300px, 74vw); margin-inline:auto; }
/* height:auto ОБЯЗАТЕЛЕН: в разметке у картинки заданы width/height (они нужны,
   чтобы вёрстка не прыгала при подгрузке). Без height:auto браузер берёт высоту
   из атрибута буквально и растягивает снимок по вертикали. При height="640" это
   было почти незаметно, при height="1851" телефон вытянулся втрое. */
.phone img { display:block; border-radius:29px; width:100%; height:auto; }
.phone.glow { background:#1B2456; box-shadow:0 0 0 1px rgba(255,179,32,.28), 0 34px 80px rgba(255,179,32,.20); }

/* --- Плитки --- */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tile { background:var(--cream-tile); border-radius:16px; padding:18px 20px; }
.tile .t { font-weight:700; font-size:16px; margin-bottom:3px; color:var(--ink); }
.tile .d { font-size:15px; color:var(--ink-3); line-height:1.45; }

/* --- Маркер: прямая цитата из приложения, там так подсвечено слово в примерах --- */
.hl  { background:linear-gradient(180deg, transparent 56%, #FFD37A 56%, #FFD37A 94%, transparent 94%); padding:0 3px; }
.hlN { background:linear-gradient(180deg, transparent 56%, rgba(255,179,32,.42) 56%, rgba(255,179,32,.42) 94%, transparent 94%); padding:0 3px; }

/* --- Лестница интервалов ---
   Подписи НЕ выдуманы: прогон настоящего processAnswer из SpacedRepetition.swift —
   семь верных ответов подряд: 10 мин → 1 д → 2.6 д → 7 д → 19.7 д → 57 д → потолок 180 д.
   Высоты ступеней — ровный рост для читаемости, НЕ масштаб. Правду несут подписи. */
.ladder { display:flex; align-items:flex-end; gap:12px; margin-top:34px; border-bottom:2px solid var(--line); }
.st { flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0; }
.st .lbl { font-size:clamp(11px, 1.3vw, 14px); font-weight:800; letter-spacing:-.2px;
           white-space:nowrap; color:var(--amber-ink); }
.st i { display:block; width:100%; height:var(--s); border-radius:9px 9px 0 0; background:var(--c); }
.ladnote { font-size:14.5px; color:var(--ink-4); margin-top:12px; }

.notes { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.note { background:var(--cream-tile); border-radius:18px; padding:22px 24px; }
.note .nt { font-weight:800; font-size:17px; letter-spacing:-.3px; margin-bottom:6px; color:var(--ink); }
.note .nd { font-size:15.5px; line-height:1.55; color:var(--ink-3); }

/* --- Раскладка «текст + телефон» --- */
.split { display:grid; grid-template-columns:1fr 300px; gap:clamp(28px, 5vw, 64px); align-items:center; }
.split.rev { grid-template-columns:280px 1fr; }
.split.top { align-items:start; }

/* --- Справочник поддержки: слева раздел, справа вопросы --- */
.qa { display:grid; grid-template-columns:220px 1fr; gap:clamp(24px, 4vw, 56px);
      padding:40px 0; border-top:2px solid var(--line); }
.qa:first-of-type { border-top:0; padding-top:24px; }
.qsec { font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
        color:var(--amber-ink); padding-top:6px; }
.q { margin-bottom:28px; }
.q:last-child { margin-bottom:0; }
.q p { font-size:16.5px; line-height:1.62; margin-bottom:10px; }
/* Подписи путей взяты из SettingsView.swift и AccountSettingsView.swift дословно,
   чтобы человек нашёл их глазами, не угадывая. */
.path { background:#FDF0DC; color:var(--amber-ink-2); font-weight:700; padding:2px 9px;
        border-radius:6px; font-size:15.5px; white-space:nowrap; }
.closing { background:var(--cream); border-radius:22px; padding:clamp(24px, 4vw, 34px) clamp(22px, 4vw, 38px); }

/* --- Подвал --- */
footer.site { border-top:2px solid var(--line); padding:26px 0 44px; color:var(--ink-4); font-size:14px; }
footer.site nav { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:10px; }
footer.site a { color:var(--ink-4); text-decoration:none; }
footer.site a:hover { color:var(--ink); text-decoration:underline; }

/* --- Резина --- */
@media (max-width:860px) {
  .split, .split.rev { grid-template-columns:1fr; }
  .split .phone { order:2; margin-top:6px; }
  .qa { grid-template-columns:1fr; gap:14px; padding:32px 0; }
  .qsec { padding-top:0; }
}

@media (max-width:720px) {
  /* Лестница встаёт вертикально: подпись слева, полоса растёт вправо.
     Семь подписей вроде «2½ days» в семь колонок на телефоне не помещаются. */
  .ladder { flex-direction:column; align-items:stretch; gap:8px; border-bottom:0; margin-top:26px; }
  /* Сетка, а не flex-строка: проценты полосы должны считаться от места СПРАВА от
     подписи. На flex они считались от всей ширины строки, и две верхние ступени
     упирались в край, становясь одинаковыми — лестница теряла вершину. */
  .st { display:grid; grid-template-columns:76px 1fr; align-items:center; gap:12px; }
  .st .lbl { text-align:right; font-size:13px; }
  .st i { height:26px; width:var(--w); border-radius:0 8px 8px 0; }
  .tiles, .notes { grid-template-columns:1fr; }
  h1 { letter-spacing:-1.4px; }
}

@media (max-width:560px) {
  /* Знак с названием и три ссылки в одну строку на 375px не помещаются
     (186 + 178 при доступных 335). Вместо того чтобы жать шрифт до нечитаемого,
     разрешаем перенос и прижимаем ОБЕ строки влево — тогда это читается как
     задуманная раскладка, а не как оторвавшееся меню справа. */
  .navrow { justify-content:flex-start; gap:10px 22px; }
  .navlinks { gap:18px; font-size:14px; }
  .brand .mk { --mk-h:38px; }
  .asbadge .t2 { font-size:17px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}