/* web/static/home.css — стили главной, редизайн v2 (26.09).
   Отдельный файл, а не раздел style.css: общий файл грузит каждая
   страница, а эти правила нужны только главной (условие замера 26.09 —
   редизайн не добавляет ни байта в общий style.css). Подключается из
   index.html после style.css, поэтому перекрывает общие .hero-drop и
   .hero-dropzone при равной специфичности. Токены (--ico-*, --wash,
   --lift) — из style.css. */
/* ===== Главная, редизайн v2 (26.09) ===== */
/* Решение Алексея 26.09 по макету главной. Замер 14 дней: главная —
   это первый экран (зону видят 97 % на телефоне, жмут 68 %; разделы ниже
   видят 0–6 %). На ПК две колонки: текст | «камера» (кнопка на 354 px вместо
   784); на телефоне колонка: заголовок → камера → факты → инструменты.
   Классы hm-: .hero, .hero-drop и .hero-dropzone общие с ЕГЭ, SEO-лендингами
   и /tester — их не меняем, здесь только перекрываем внутри .hm-cam. */
.hm-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:48px;
  align-items:start;padding:36px 0 8px}
.hm-copy{min-width:0}
.hm-hero h1{margin:0 0 16px;font-size:clamp(36px,4.6vw,54px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
/* Подзаголовок — ровно <p class="lead">, без своих классов: по этой разметке
   его находит сторож линии сгиба tests/test_home_fold.py. */
.hm-hero .lead{margin:0 0 22px;max-width:30em;font-size:18.5px;line-height:1.55;color:var(--muted)}
.hm-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0}
.hm-facts li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:var(--pill);
  background:var(--card);border:1px solid var(--border);font-size:14.5px;font-weight:600;line-height:1.3}
.hm-facts .ico{width:18px;height:18px}
.hm-tools-lg{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hm-tools-grid{display:flex;flex-wrap:wrap;gap:8px}
.hm-chip{display:inline-flex;flex-direction:column;gap:1px;padding:9px 16px;border-radius:16px;background:var(--card);
  border:1px solid var(--border);color:var(--ink);text-decoration:none;font-size:15px;font-weight:700;line-height:1.3}
.hm-chip small{font-size:13px;font-weight:500;color:var(--muted)}

/* «Камера» — одна карточка: фото или текст условия. */
.hm-cam{position:relative;display:grid;margin:0;padding:24px 22px 20px;border-radius:24px;border:1.5px solid var(--accent);
  background:linear-gradient(180deg,var(--wash),var(--card) 55%);box-shadow:var(--lift)}
.hm-cam .error{margin:0 0 12px}
.hm-photo{display:grid;justify-items:center;text-align:center}
.hm-zone.hero-dropzone{display:grid;justify-items:center;gap:6px;width:100%;padding:14px 12px 10px;border-radius:16px;
  background:transparent;border:1.5px dashed var(--border);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.hm-zone-ico{width:96px;height:96px;border-radius:22px;margin-bottom:6px}
.hm-zone .dropzone-title{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.hm-zone .field-hint{margin:0;font-size:15px}
.hm-cam #hero-drop-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin-top:14px}
.hm-cam .btn .ico,.hm-final-btn .ico{width:22px;height:22px}
.hm-cam #hero-drop-submit .ico,.hm-final-btn .ico{color:var(--on-accent)}
.hm-cam #hero-drop-submit .ico .i-b,.hm-final-btn .ico .i-b{fill:var(--wash)}
/* «или» между способами (идея Алексея 26.09): два равных пути. */
.hm-or{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 8px;font-size:13.5px;font-weight:600;
  color:var(--muted);line-height:1}
.hm-or::before,.hm-or::after{content:"";flex:1;height:1px;background:var(--border)}
.hm-text-open{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px}
.hm-note{margin:10px 0 0;font-size:13px;color:var(--muted)}
.hm-cam .btn{transition:transform .12s cubic-bezier(.23,1,.32,1),filter .15s ease,background-color .15s ease}
.hm-cam .btn:active,.hm-text-back:active{transform:scale(.97)}
.hm-text{text-align:left}
.hm-text-lg{display:block;margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hm-text textarea{display:block;width:100%;min-height:128px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--accent);
  background:var(--card);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;resize:vertical}
.hm-text textarea:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.hm-text .btn{display:flex;justify-content:center;width:100%;margin-top:12px}
.hm-text-back{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;padding:6px 10px;border:0;
  background:none;color:var(--accent-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.hm-text-back .ico{width:18px;height:18px}
/* Не через [hidden]: у .hm-photo display:grid, а класс сильнее атрибута. */
.hm-cam.is-text .hm-photo{display:none}
.hm-wait{grid-column:1/-1}
/* Переключатель режима внутри «камеры» (29.09): ЕГЭ — «Разобрать /
   Проверить», «Родителям» — «Проверить домашку / Объяснить тему». Радио
   настоящие: форма шлёт mode, как раньше. Подписи зоны и кнопки под режим
   переключает CSS страницы. Надпись сегмента — одним вложенным span: у
   label>span display:grid, и слово .hm-w отдельным ребёнком встало бы
   второй строкой сетки (стенд ЕГЭ 29.09). */
.hm-modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--border);
  border-radius:16px;background:var(--card);min-width:0}
.hm-modes label{position:relative;display:grid;min-width:0;cursor:pointer}
.hm-modes input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.hm-modes label>span{display:grid;place-items:center;min-height:42px;padding:8px 6px;border-radius:12px;text-align:center;
  font-size:15px;font-weight:600;line-height:1.25;color:var(--muted);transition:background-color .15s ease,color .15s ease}
.hm-modes input:checked+span{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.hm-modes input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.hm-modes label>span{transition:none}}

/* Ниже первого экрана */
.hm-sec{margin:84px 0 0}
.hm-sec h2{margin:0 0 20px}
.hm-demo{display:grid;grid-template-columns:200px 40px minmax(0,1fr);gap:18px;align-items:center;max-width:860px}
.hm-demo-photo{display:grid;gap:8px;justify-items:center;padding:16px;border-radius:18px;background:var(--card);
  border:1px solid var(--border);font-size:13.5px;color:var(--muted)}
.hm-demo-photo svg{width:150px;height:110px}
.hm-demo-paper{fill:var(--wash);stroke:var(--border);stroke-width:2}
.hm-demo-lines{stroke:var(--muted);stroke-width:4;stroke-linecap:round;opacity:.45}
.hm-demo-num{font:700 12px 'Onest',system-ui,sans-serif;fill:var(--accent-ink)}
.hm-demo-arrow{display:grid;place-items:center;color:var(--accent);font-size:28px;font-weight:800}
.hm-demo-res{padding:18px 20px;border-radius:18px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.hm-demo-ans{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.hm-demo-ans span{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ok);
  background:var(--ok-soft);padding:3px 9px;border-radius:var(--pill)}
.hm-demo-res ol{margin:0;padding-left:20px;display:grid;gap:4px;font-size:15.5px}
.hm-demo-tag{margin:10px 0 0;font-size:13px;color:var(--muted)}
.hm-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hm-tile{display:grid;grid-template-columns:52px 1fr auto;column-gap:14px;align-items:center;height:100%;padding:14px 16px;
  border-radius:18px;background:var(--card);border:1px solid var(--border);color:var(--ink);text-decoration:none}
.hm-tile img{grid-row:1/3;width:52px;height:52px;border-radius:14px}
.hm-tile b{align-self:end;font-size:16.5px;line-height:1.3}
.hm-tile small{grid-column:2;align-self:start;font-size:13.5px;line-height:1.35;color:var(--muted)}
.hm-go{grid-column:3;grid-row:1/3;color:var(--accent);font-size:22px;font-weight:800}
@media (hover:hover) and (pointer:fine){.hm-tile:hover,.hm-chip:hover{border-color:var(--accent)}}
.hm-cmp{width:100%;max-width:860px;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--border);border-radius:18px;overflow:hidden;font-size:15px}
.hm-cmp th,.hm-cmp td{padding:11px 16px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.hm-cmp thead th{font-size:13px;color:var(--muted);font-weight:700}
.hm-cmp thead th:nth-child(2){color:var(--accent-ink)}
.hm-cmp tbody tr:last-child>*{border-bottom:0}
.hm-cmp .yes{color:var(--ok);font-weight:800}
.hm-cmp .no{color:var(--muted)}
.hm-parents{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:860px;margin:14px 0 0;
  padding:14px 18px;border-radius:14px;background:var(--accent-soft);color:var(--ink);font-weight:600;text-decoration:none}
.hm-parents span{color:var(--accent-ink);font-weight:800}
.hm-mat-lead{margin:0 0 16px;max-width:40em}
.hm-mat{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:860px;list-style:none;margin:0;padding:0}
.hm-mat li{display:grid;align-content:start;gap:4px;padding:14px 16px;border-radius:14px;background:var(--card);
  border:1px solid var(--border);font-size:14.5px;color:var(--muted)}
.hm-mat-t{font-size:16px;font-weight:700;color:var(--accent-ink)}
.hm-mat-more{margin:14px 0 0;max-width:60em;font-size:14.5px}
.hm-final-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.hm-nw{white-space:nowrap}
/* Планшет и телефон — колонкой: заголовок → камера → факты → инструменты.
   На 768 px две колонки оставляли карточке 340 px, и обе её кнопки
   ломались в две строки (стенд 26.09). */
@media(max-width:959px){
  /* stretch: общее align-items:start (оно для двух колонок) давало карточке
     ширину по содержимому, и в режиме «текст» она сжималась до 270 px. */
  .hm-hero{display:flex;flex-direction:column;align-items:stretch;padding:28px 0 0}
  .hm-copy{display:contents}
  .hm-hero h1{order:1}
  .hm-hero .lead{order:2}
  .hm-cam{order:3;margin:0}
  .hm-wait{order:4}
  .hm-facts{order:5;margin:20px 0 0}
  .hm-tools{order:6;margin-top:24px;width:100%;min-width:0}
}
@media(min-width:760px) and (max-width:959px){
  .hm-cam,.hm-wait{max-width:560px}
  .hm-tiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:759px){
  .hm-hero{padding-top:22px}
  .hm-hero h1{font-size:36px;margin-bottom:12px}
  .hm-hero .lead{font-size:16.5px;margin-bottom:18px}
  .hm-cam{padding:16px 16px 14px}
  .hm-facts{margin-top:18px;gap:6px}
  .hm-facts li{font-size:13.5px;padding:6px 12px 6px 9px}
  /* «Ещё умею» — сетка 2×3, а не строка с прокруткой вбок: в flex-колонке
     строка растягивалась шире экрана и плашки 3–6 обрезались (макет 26.09). */
  .hm-tools{margin-top:22px}
  .hm-tools-grid{display:grid;grid-template-columns:1fr 1fr}
  .hm-chip{min-width:0;padding:9px 12px;font-size:14.5px}
  .hm-chip small{font-size:12.5px}
  .hm-zone.hero-dropzone{grid-template-columns:64px 1fr;justify-items:start;text-align:left;column-gap:14px;row-gap:2px;
    padding:4px 0 0;border:0}
  .hm-zone-ico{grid-row:1/3;width:64px;height:64px;border-radius:16px;margin:0}
  .hm-zone .dropzone-title{font-size:17px;align-self:end}
  .hm-zone .field-hint{font-size:14px;align-self:start}
  .hm-modes{margin-bottom:10px;padding:3px}
  .hm-modes label>span{min-height:38px;padding:6px 4px;font-size:14.5px}
  /* Поля 16 px вместо общих 32: с ними «Сфотографировать задачу» не
     влезала в строку на 390 px и ломалась в две (снимок стенда 26.09). */
  .hm-cam #hero-drop-submit{min-height:60px;padding:12px 16px;font-size:17.5px}
  /* Три класса: у общего .btn.lg два, и при равной силе он оставлял бы
     поля 32 px и шрифт 18 px — надпись ломалась до 390 px включительно. */
  .btn.lg.hm-final-btn{display:flex;width:100%;padding:15px 16px;font-size:17px}
  .hm-sec{margin-top:52px}
  .hm-demo{grid-template-columns:1fr;gap:10px}
  .hm-demo-photo{grid-template-columns:auto 1fr;justify-items:start;align-items:center;padding:12px 14px}
  .hm-demo-photo svg{width:64px;height:48px}
  .hm-demo-arrow{transform:rotate(90deg);height:20px}
  .hm-tiles{grid-template-columns:1fr;gap:0;background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden}
  .hm-tile{border:0;border-radius:0;background:transparent;grid-template-columns:44px 1fr auto;padding:12px 16px}
  .hm-tiles li+li .hm-tile{border-top:1px solid var(--border)}
  .hm-tile img{width:44px;height:44px;border-radius:12px}
  .hm-tile b{font-size:15.5px}
  /* Ширину колонок считает браузер по самым длинным словам: при жёстких
     долях «Репетитор» и «бесплатно» рвались посреди слова. */
  .hm-cmp{font-size:13px}
  .hm-cmp th,.hm-cmp td{padding:9px 7px}
  .hm-mat{grid-template-columns:1fr}
}
/* Уже 390 px длинная надпись сегмента ломалась в две строки (стенд ЕГЭ
   29.09: «Проверить решение» на 375 и 360) — второе слово .hm-w прячем,
   что именно — говорит подпись зоны ниже. */
@media(max-width:389px){
  .hm-w{display:none}
}
/* Надписи кнопок — в одну строку на любом телефоне. Ширины замерены на
   стенде 26.09 (Onest 700): «Сфотографировать задачу» 16,5 px = 219,5 px
   при месте 229 на 360 px; «Решить задачу бесплатно» 16,5 px = 211,9 при 216. */
@media(max-width:374px){
  .hm-cam #hero-drop-submit,.btn.lg.hm-final-btn{font-size:16.5px}
}
/* 320 px: поля ужаты до 12 px, шрифт 15 px (199,5 и 192,6 px при месте
   207 и 202). Слова таблицы в ширину уже не влезают — лучше перенос
   внутри слова, чем прокрутка страницы вбок. */
@media(max-width:339px){
  .hm-cam{padding:14px 12px 12px}
  .hm-cam #hero-drop-submit,.btn.lg.hm-final-btn{gap:8px;padding-inline:12px;font-size:15px}
  .hm-text-open{padding-inline:12px}
  .final-cta{padding:32px 16px}
  .hm-cmp{table-layout:fixed}
  .hm-cmp th,.hm-cmp td{overflow-wrap:anywhere}
}