/* Фотомастерская — оформление.

   Стиль: ElevenLabs design system (база styles.refero.design).
   Светлая «бумажная» тема: тёплый фон, почти полная ахроматика,
   два акцентных цвета только как декор.

   Почему именно он для фотосервиса: интерфейс не спорит с фотографиями.
   Палитра на 97% серая и тёплая, поэтому единственное цветное пятно на
   странице — сам снимок. Для сервиса, где результат работы и есть
   картинка, это ровно то, что нужно.

   Ключевые правила системы (соблюдаем их, а не «примерно похоже»):
     1. Основное действие — чёрная заливная pill-кнопка. Цветных CTA нет.
     2. Акценты #0447ff и #ff4704 — только декор, не кнопки и не ссылки.
     3. Разделяем поверхности штрихом 1px #ebe8e4, а не тенями.
     4. Поверхности: eggshell → taupe → stone. Чистого белого нет.
     5. Тени почти невидимые, размытых «карточных» теней нет.
     6. Заголовки — начертание 300 с трекингом -0.02em.
     7. Радиусы: карточки 20-24px, кнопки и теги — pill, поля ввода 4px.

   Отступления от системы — только там, где без них нельзя, и все помечены
   комментарием «отступление».
*/

/* ── Шрифт ─────────────────────────────────────────────────────────────
   Inter, подмножества с кириллицей. Лежит у нас, а не на стороннем CDN:
   быстрее для российских пользователей и не тянет запросы за границу. */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/inter-cyrillic-ext-wght.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/inter-cyrillic-wght.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/inter-latin-ext-wght.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/inter-latin-wght.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Токены ── */
:root{
  /* Поверхности: только тёплые, чистого белого нет */
  --eggshell:#fdfcfc;      /* фон страницы */
  --taupe:#f5f3f1;         /* поверхность карточки */
  --stone:#ebe8e4;         /* плита, разделители */

  /* Текст */
  --ink:#000000;
  --graphite:#44403b;
  --smoke:#777169;         /* текст на eggshell: 4.71:1 */
  /* «отступление»: Smoke на taupe даёт 4.36:1 — чуть ниже порога 4.5:1.
     Затемнили на 3%: оттенок тот же, контраст 4.62:1. */
  --smoke-warm:#736d65;
  --ash:#a59f97;           /* только декор: 2.56:1, для текста не годится */

  /* Акценты — только декор */
  --spark:#0447ff;
  --ember:#ff4704;

  /* «отступление»: система ахроматична и семантических цветов не задаёт,
     а нам нужно показывать ошибку и предупреждение. Взяты тёплые оттенки,
     чтобы не выпадать из палитры. */
  --err:#a3231a;
  --err-bg:#fdf3f2;
  --warn:#8a5a1c;
  --warn-bg:#fdf8ef;

  --hairline:#ebe8e4;
  --edge:#e5e5e5;          /* граница кнопок */

  --r-sm:4px;              /* поля ввода */
  --r-md:10px;
  --r-card:20px;           /* карточки */
  --r-card-lg:24px;        /* крупные панели */
  --r-full:9999px;         /* кнопки, теги */

  /* Тени почти невидимые — глубину даёт штрих, а не размытие */
  --shadow:rgba(0,0,0,.4) 0 0 1px 0,rgba(0,0,0,.04) 0 1px 1px 0,rgba(0,0,0,.04) 0 2px 4px 0;
  --inset:rgba(0,0,0,.075) 0 0 0 .5px inset;

  --page:1280px;
  --gap:8px;
}

*{box-sizing:border-box}

/* Атрибут hidden обязан побеждать любой display из наших правил.
   Без этого скрытые блоки остаются видимыми: у .drop-busy и .drop-inner
   задан display:flex, а он перебивает браузерное [hidden]. Из-за этого зона
   загрузки показывала приглашение и «Обрабатываю…» одновременно. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--eggshell);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.16px;
  font-feature-settings:'ss01' on,'cv05' on;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

.wrap{max-width:var(--page);margin:0 auto;padding:0 24px}

/* Ссылки: система запрещает цветные ссылки, поэтому подчёркивание */
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--ash);transition:text-decoration-color .15s}
a:hover{text-decoration-color:var(--ink)}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}

/* ── Шапка ── */
.top{background:var(--eggshell);border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:68px;flex-wrap:wrap}

.logo{display:inline-flex;align-items:center;gap:8px;font-size:16px;
  font-weight:500;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.logo:hover{text-decoration:none}
/* Акцент как декор: точка у названия, а не цветной текст */
.logo::after{content:'';width:6px;height:6px;border-radius:var(--r-full);
  background:var(--ember);display:block;margin-top:1px}

.tools-nav{display:flex;gap:2px;flex-wrap:wrap;font-size:14px;letter-spacing:.14px}

/* Переключатель меню. На широком экране он не нужен: пункты помещаются
   в строку. Поле остаётся в разметке и доступно с клавиатуры, но взгляду
   не мешает — поэтому не display:none, а невидимое. */
.nav-toggle,.nav-burger{display:none}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tools-nav a{padding:7px 14px;border-radius:var(--r-full);color:var(--smoke);
  text-decoration:none;transition:background .15s,color .15s}
.tools-nav a:hover{background:var(--taupe);color:var(--ink)}
.tools-nav a.active{background:var(--ink);color:var(--eggshell)}

/* ── Плашка тестового режима ── */
.drybar{background:var(--stone);color:var(--graphite);font-size:13.5px;
  letter-spacing:.14px;padding:9px 24px;text-align:center;
  border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;gap:8px}
.drybar::before{content:'';width:6px;height:6px;border-radius:var(--r-full);
  background:var(--ember);flex:none}

main{padding:56px 0 96px}

/* ── Типографика ──
   Заголовки — начертание 300 и трекинг -0.02em: это самая узнаваемая
   черта системы. Жирнить их нельзя. */
h1{font-size:36px;font-weight:300;line-height:1.17;letter-spacing:-.02em;margin:0 0 16px}
h2{font-size:32px;font-weight:300;line-height:1.13;letter-spacing:-.02em;margin:72px 0 20px}
h3{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:0;margin:0 0 8px}

.lead{font-size:20px;line-height:1.35;letter-spacing:0;color:var(--smoke);
  margin:0 0 32px;max-width:62ch}
.crumbs{font-size:14px;letter-spacing:.14px;color:var(--smoke);margin-bottom:20px}
.crumbs a{color:var(--smoke);text-decoration-color:var(--stone);
  display:inline-block;padding:7px 0}
.crumbs a:hover{color:var(--ink)}
/* «первоисточник» в списке источников: строчная ссылка высотой 17 px. */
.sources a{display:inline-block;padding:6px 0}
.fine{font-size:13px;letter-spacing:.14px;color:var(--smoke);
  border-top:1px solid var(--hairline);margin-top:40px;padding-top:24px;line-height:1.6;max-width:80ch}

/* ── Главная: обложка ── */
.hero{position:relative;isolation:isolate;padding:46px 0 56px;max-width:820px}
/* Знак из двух акцентов системы. Именно так она и предписывает их
   использовать: как декор, а не как заливку фона. Размытое цветное пятно
   здесь читалось кляксой и залезало под шапку. */
.hero::before,.hero::after{content:'';position:absolute;width:13px;height:13px;
  border-radius:var(--r-full);pointer-events:none}
.hero::before{top:14px;left:0;background:var(--spark)}
.hero::after{top:23px;left:11px;background:var(--ember)}
.hero h1{font-size:48px;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}

/* ── Карточки инструментов ── */
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin:0}
@media (min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
/* 3 колонки: пять карточек дают ряды 3+2. При четырёх колонках пятая
   остаётся сиротой в пустом ряду — выглядит как ошибка вёрстки. */
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--taupe);border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:28px;color:var(--ink);
  text-decoration:none;display:flex;flex-direction:column;
  transition:background .18s,border-color .18s}
.card:hover{text-decoration:none;background:var(--stone);border-color:var(--ash)}
.card h2{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3;
  margin:0 0 10px}
.card p{color:var(--smoke-warm);font-size:14.5px;letter-spacing:.14px;
  margin:0 0 20px;flex:1}
.card .go{font-size:14px;font-weight:500;letter-spacing:.14px;
  display:inline-flex;align-items:center;gap:6px}
.card .go::after{content:'';width:14px;height:1px;background:var(--ink);
  transition:width .18s}
.card:hover .go::after{width:24px}

/* ── Инструмент ── */
.tool{background:var(--eggshell);border:1px solid var(--hairline);
  border-radius:var(--r-card-lg);padding:32px;margin-bottom:16px}

/* Зона загрузки */
.drop{border:1px dashed var(--ash);border-radius:var(--r-card);
  padding:56px 24px;text-align:center;background:var(--taupe);
  transition:background .18s,border-color .18s;cursor:pointer}
.drop.over{border-color:var(--ink);border-style:solid;background:var(--stone)}
.drop-inner{display:flex;flex-direction:column;align-items:center;gap:4px}
.drop-icon{width:32px;height:32px;color:var(--graphite);margin-bottom:12px}
.drop-icon svg{width:100%;height:100%;display:block}
.drop p{margin:4px 0;color:var(--smoke-warm);font-size:15px;letter-spacing:.14px}
.drop p strong{color:var(--ink);font-weight:500}
.hint{font-size:13.5px;color:var(--smoke-warm)}

.drop-busy{display:flex;flex-direction:column;align-items:center;gap:20px}
.drop-busy p{margin:0}

.spinner{width:32px;height:32px;border:2px solid var(--stone);
  border-top-color:var(--ink);border-radius:var(--r-full);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{width:min(320px,80%);height:2px;background:var(--stone);
  border-radius:var(--r-full);overflow:hidden}
.progress .bar{height:100%;width:8%;background:var(--ink);transition:width .5s}

/* ── Кнопки ──
   Иерархия ровно из двух ступеней: чёрная заливная и контурная.
   Цветных заливок система не допускает. */
.btn{display:inline-block;background:var(--ink);color:var(--eggshell);
  border:1px solid var(--ink);border-radius:var(--r-full);
  padding:12px 26px;font-family:inherit;font-size:15px;font-weight:500;
  letter-spacing:.14px;line-height:1.2;cursor:pointer;text-align:center;
  text-decoration:none;transition:opacity .15s,background .15s}
.btn:hover{text-decoration:none;opacity:.86}
.btn.primary{padding:15px 34px;font-size:16px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--edge)}
.btn.ghost:hover{background:var(--taupe);opacity:1}

/* ── Настройки инструмента ── */
.controls{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px}
.controls label{display:flex;flex-direction:column;gap:8px;font-size:14px;
  letter-spacing:.14px;color:var(--smoke);max-width:min(100%,440px)}
.controls select,.controls input{padding:11px 14px;border:1px solid var(--edge);
  border-radius:var(--r-sm);font-family:inherit;font-size:15px;
  background:var(--eggshell);color:var(--ink)}
.controls select:hover,.controls input:hover{border-color:var(--ash)}
.control-hint{font-size:13px;letter-spacing:.14px;color:var(--smoke);line-height:1.5}

/* ── Результат ── */
.result{margin-top:32px;text-align:center}
.result h2{margin:0 0 20px;font-size:28px}
/* Картинка и примечания — вертикально, а не в одну строку.
   img и список были inline-элементами, поэтому при нешироком фото
   примечания вставали рядом с ним и уезжали за край. */
.result img{display:block;max-width:100%;max-height:460px;border-radius:var(--r-card);
  border:1px solid var(--hairline);margin:0 auto 24px;background:
  repeating-conic-gradient(var(--taupe) 0 25%,var(--eggshell) 0 50%) 50%/20px 20px}
.notes{display:block;list-style:none;padding:0;margin:0 auto 28px;font-size:14.5px;
  letter-spacing:.14px;text-align:left;max-width:62ch}
.notes li{color:var(--smoke);padding:5px 0 5px 18px;position:relative}
.notes li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:1px;
  background:var(--ash)}  /* декор: короткая черта перед строкой */
.quota{font-size:13px;letter-spacing:.14px;color:var(--smoke);margin:20px 0 0}
.result .btn{margin:0 4px 8px}

/* ── Оценка времени и таймер ── */
.eta{margin:20px 0 0;padding:14px 18px;border-radius:var(--r-md);
  background:var(--taupe);border:1px solid var(--hairline);
  font-size:14px;letter-spacing:.14px;color:var(--smoke-warm);line-height:1.5}

.done-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  justify-content:center;margin-bottom:20px}
.done-head h2{margin:0;font-size:28px}
.elapsed{margin:0;font-size:14px;letter-spacing:.14px;color:var(--smoke);
  font-variant-numeric:tabular-nums}
.elapsed.done{color:var(--ok, #1a7f4b)}

/* ── Фото до и после ── */
.pair{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  margin-bottom:24px}
.pair figure{margin:0;display:flex;flex-direction:column;gap:8px;
  align-items:center}
.pair img{max-width:100%;max-height:360px;border-radius:var(--r-card);
  border:1px solid var(--hairline);background:
  repeating-conic-gradient(var(--taupe) 0 25%,var(--eggshell) 0 50%) 50%/20px 20px}
.pair figcaption{font-size:13px;letter-spacing:.14px;color:var(--smoke)}

/* ── Все слайды карточки ── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;margin:0 0 24px}
.gallery a{display:block;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--hairline);transition:border-color .15s}
.gallery a:hover{border-color:var(--ink)}
.gallery img{display:block;width:100%;height:auto}

/* ── Определение товара ── */
.analysis{margin-top:24px;padding:20px 22px;border-radius:var(--r-card);
  background:var(--taupe);border:1px solid var(--hairline)}
.analysis-head{margin:0;font-size:15px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;gap:10px}
.analysis-head::before{content:'';width:8px;height:8px;border-radius:var(--r-full);
  background:var(--ember);flex:none}
/* Предупреждение о разных товарах на снимках — заметно, но не красным:
   это не ошибка сервиса, а повод проверить свои файлы */
.analysis-warn{background:var(--warn-bg);border-color:#efe0c4}
.analysis-warn .analysis-head{color:var(--warn)}
.analysis-warn .analysis-head::before{background:var(--warn)}
.analysis-hint{margin:8px 0 0;font-size:13.5px;letter-spacing:.14px;
  color:var(--smoke-warm);line-height:1.5}
.build-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* ── Сообщения ── */
.alert{background:var(--err-bg);color:var(--err);border:1px solid #f0d5d2;
  border-radius:var(--r-md);padding:15px 18px;margin-top:24px;font-size:15px;
  letter-spacing:.14px}
.alert.warn{background:var(--warn-bg);color:var(--warn);border-color:#efe0c4}

/* ── Текстовые блоки ── */
.prose{max-width:72ch}
.prose h2:first-child{margin-top:56px}
.steps{padding-left:0;list-style:none;counter-reset:s;color:var(--smoke);
  margin:0;font-size:15.5px;letter-spacing:.14px}
.steps li{counter-increment:s;padding:10px 0 10px 40px;position:relative;
  border-bottom:1px solid var(--hairline)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;
  left:0;top:10px;font-size:13px;color:var(--smoke);letter-spacing:0}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:var(--r-card);overflow:hidden;margin-top:8px}
.two>div{background:var(--eggshell);padding:26px}
.two p{margin:0;color:var(--smoke);font-size:14.5px;letter-spacing:.14px;line-height:1.6}

/* ── Вопросы ── */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline);padding:0}
.faq summary{cursor:pointer;font-weight:500;font-size:16px;letter-spacing:.14px;
  padding:20px 32px 20px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:6px;top:29px;
  width:9px;height:9px;border-right:1.5px solid var(--smoke);
  border-bottom:1.5px solid var(--smoke);transform:rotate(45deg);
  transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--graphite)}
.faq p{color:var(--smoke);margin:0;padding:0 0 22px;font-size:15px;
  letter-spacing:.14px;line-height:1.6;max-width:66ch}

/* ── Источники требований ── */
.sources{list-style:none;padding:0;margin:0;border-top:1px solid var(--hairline)}
.sources li{padding:14px 0;border-bottom:1px solid var(--hairline);
  font-size:14.5px;letter-spacing:.14px;color:var(--smoke);line-height:1.6}
.sources a{color:var(--graphite);text-decoration-color:var(--ash)}
.sources a:hover{color:var(--ink)}

/* ── Ссылки на другие инструменты ── */
.mini-cards{display:flex;gap:8px;flex-wrap:wrap}
.mini-cards a{background:var(--taupe);border:1px solid var(--hairline);
  border-radius:var(--r-full);padding:9px 18px;font-size:14px;
  letter-spacing:.14px;color:var(--graphite);text-decoration:none;
  transition:background .15s,color .15s}
.mini-cards a:hover{background:var(--ink);color:var(--eggshell);border-color:var(--ink)}

/* ── Подвал ── */
.bottom{background:var(--taupe);border-top:1px solid var(--hairline);
  padding:56px 0 40px;margin-top:80px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.cols div{display:flex;flex-direction:column;gap:8px;font-size:14px;letter-spacing:.14px}
.cols strong{font-size:13px;font-weight:500;color:var(--ink);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.cols a{color:var(--smoke-warm);text-decoration:none}
.cols a:hover{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--ash)}
.cols span{color:var(--smoke-warm)}

/* ── Мобильные ── */
@media (max-width:720px){
  .wrap{padding:0 18px}
  main{padding:36px 0 64px}
  h1{font-size:28px}
  h2{font-size:24px;margin-top:52px}
  .hero{padding:44px 0 36px}  /* знак занимает 14-27px, заголовок ниже */
  .hero h1{font-size:34px}
  .lead{font-size:17px}
  .top .wrap{min-height:60px;gap:10px;padding-top:8px;padding-bottom:8px}
  .logo{padding:8px 0}   /* область нажатия выше самого текста */

  /* Меню на телефоне — кнопка, а не полоса прокрутки.
     Раньше здесь была горизонтальная прокручиваемая строка со спрятанной
     полосой: восемь пунктов в экран не влезали, крайние обрезались посреди
     слова («Улучшить качество», «Документ»), и ничто не подсказывало, что
     строку можно тянуть. Выглядело как сломанное меню. */
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:44px;height:44px;padding:11px 10px;
    border:1px solid var(--stone);border-radius:var(--r-full);
    background:var(--eggshell);cursor:pointer
  }
  .nav-burger span{
    display:block;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .18s ease,opacity .18s ease
  }
  .nav-toggle:checked + .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked + .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked + .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--ink);outline-offset:2px}

  /* Список пунктов раскрывается вниз и раздвигает страницу, а не
     накрывает её: перекрытие мешало бы читать заголовок. */
  .tools-nav{display:none}
  .nav-toggle:checked ~ .tools-nav{
    display:flex;flex-direction:column;gap:2px;width:100%;
    margin-top:6px;padding-top:8px;border-top:1px solid var(--stone)
  }
  .tools-nav a{
    padding:13px 14px;font-size:15px;border-radius:10px;
    white-space:normal
  }
  .tool{padding:20px;border-radius:var(--r-card)}
  .drop{padding:36px 16px}
  .result img{max-height:320px}
  .bottom{margin-top:56px;padding:40px 0 28px}
  .cols{gap:24px}
  /* Ссылки в подвале были высотой 21 px — по ним не попасть пальцем.
     Отступы увеличиваем, промежуток между строками уменьшаем: список
     остаётся компактным, но каждая строка становится удобной. */
  .cols div{gap:2px}
  .cols a,.cols span{padding:6px 0}
  .cols a{display:inline-block}
  .faq summary{padding:18px 28px 18px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ─────────────────── Правовая часть ───────────────────
   152-ФЗ требует, чтобы политика была доступна с любой страницы, а
   согласие — понятным. Поэтому подвал получил настоящие ссылки, а текст
   согласия читается как абзац, а не как серая мелочь. */

.linkish{
  background:none;border:0;padding:0;font:inherit;color:var(--graphite);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  text-align:left
}
.linkish:hover{color:var(--ink)}
.linkish:disabled{color:var(--smoke);cursor:default;text-decoration:none}

/* Согласие перед обработкой */
.consent{
  display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;
  padding:16px 18px;background:var(--taupe);border:1px solid var(--stone);
  border-radius:var(--r-card);cursor:pointer;font-size:14px;line-height:1.55
}
.consent.bad{border-color:#b3261e;background:#fdf4f3}
.consent input{margin:2px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:#b3261e}
.consent-text{color:var(--graphite)}
.consent-text a{color:var(--ink)}
.consent-warn{display:inline-block;margin-top:8px;color:var(--smoke-warm)}
.consent-error{
  margin:10px 0 0;padding:12px 16px;border-radius:var(--r-card);
  background:#fdf4f3;border:1px solid #b3261e;color:#8c1d18;font-size:14px
}

/* Пока уведомление об аналитике показано, внизу страницы оставляем под
   него место. Иначе оно накрывает содержимое: на телефоне под ним
   пропадали последние пункты раскрытого меню. */
body.cookie-open{padding-bottom:calc(var(--cookie-h, 130px) + 16px)}

/* Уведомление об аналитике */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--eggshell);border-top:1px solid var(--stone);
  box-shadow:0 -8px 28px rgba(0,0,0,.06)
}
.cookie-inner{
  display:flex;gap:20px;align-items:center;justify-content:space-between;
  padding:16px 0;flex-wrap:wrap
}
.cookie p{margin:0;font-size:14px;color:var(--graphite);max-width:640px;line-height:1.5}
.cookie-buttons{display:flex;gap:10px;flex-wrap:wrap}

/* Правовые документы */
.legal{max-width:760px}
.legal h1{margin-bottom:6px}
.legal-meta{color:var(--smoke);font-size:14px;margin:0 0 28px}
.legal section{margin-top:34px}
.legal h2{font-size:19px;margin:0 0 12px}
.legal p{margin:0 0 12px;line-height:1.62;color:var(--graphite)}
.legal ul{margin:0 0 12px;padding-left:22px}
.legal li{margin-bottom:8px;line-height:1.6;color:var(--graphite)}
.legal-back{margin-top:40px;padding-top:20px;border-top:1px solid var(--stone)}
.legal-back a{color:var(--graphite)}
.legal-warn,.legal-note{
  padding:16px 20px;border-radius:var(--r-card);margin:0 0 24px;
  font-size:14px;line-height:1.6
}
.legal-warn{background:#fdf4f3;border:1px solid #b3261e;color:#8c1d18}
.legal-note{background:var(--taupe);border:1px solid var(--stone);color:var(--graphite)}

@media (max-width:700px){
  .cookie-inner{padding:14px 0}
  .cookie-inner p{font-size:13px}
  .consent{padding:14px;font-size:13px}
}

/* ─── Мобильные правки правовой части ───
   Этот блок обязан быть в конце файла. Правила правовой части объявлены
   ниже обычных медиазапросов, и при равной специфичности побеждает то,
   что стоит позже: правка, поставленная выше, просто не срабатывала —
   кнопка «Удалить мои данные» так и оставалась высотой 21 px. */
@media (max-width:720px){
  /* Уведомление на телефоне делаем компактнее: оно закреплено внизу
     и не должно занимать пол-экрана. */
  .cookie-inner{padding:12px 0 14px;gap:12px}
  .cookie p{font-size:13px;line-height:1.45}
  .cookie-buttons{gap:8px}
  .cookie-buttons .btn{padding:11px 16px;font-size:14px}

  /* Кнопка и одиночные ссылки: те же 6 px отступа, что и в подвале.
     У строчных ссылок вертикальный отступ не сдвигает строку, но
     расширяет область нажатия — вёрстка не меняется, попасть проще. */
  .linkish{padding:8px 0}
  .legal-back a{display:inline-block;padding:8px 0}
  .cookie a,.consent-text a,.fine a{padding:6px 0}
}

/* ─── Пример «до и после» ───
   Показываем настоящий результат работы сервиса, а не стоковое фото:
   человек должен видеть, что получит у себя. Пара стоит сразу после
   инструмента — до того, как он загрузит своё фото. */
.showcase{margin-top:52px;padding-top:34px;border-top:1px solid var(--hairline)}
.showcase h2{margin:0 0 10px}
.showcase-lead{margin:0 0 24px;color:var(--smoke);font-size:15px;max-width:62ch}
.showcase-pair{display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap}
.showcase-pair figure{margin:0;display:flex;flex-direction:column;
  align-items:center;gap:10px;flex:1 1 240px;max-width:340px}
.showcase-pair img{display:block;width:100%;height:auto;
  border:1px solid var(--hairline);border-radius:var(--r-card);
  /* В клетку — чтобы прозрачный фон читался как прозрачный, а не как
     белый лист. Так же показываем результат после обработки. */
  background:repeating-conic-gradient(var(--taupe) 0 25%,var(--eggshell) 0 50%) 50%/18px 18px}
.showcase-pair figcaption{font-size:13px;letter-spacing:.14px;
  text-transform:uppercase;color:var(--smoke)}
/* Стрелка нарисована рамками, а не символом: символ в разных шрифтах
   выглядит по-разному и на телефоне уезжает по базовой линии. */
.showcase-arrow{flex:0 0 auto;width:34px;height:1px;background:var(--ash);
  position:relative}
.showcase-arrow::after{content:'';position:absolute;right:0;top:-3px;
  width:7px;height:7px;border-top:1px solid var(--ash);
  border-right:1px solid var(--ash);transform:rotate(45deg)}
.showcase-note{margin:26px auto 0;max-width:62ch;font-size:14.5px;
  line-height:1.6;color:var(--smoke-warm)}
.showcase-note strong{color:var(--ink);font-weight:500}

@media (max-width:720px){
  /* На телефоне оставляем картинки РЯДОМ, а не друг под другом.
     Столбиком сравнение теряет смысл: чтобы увидеть «после», надо
     прокрутить пол-экрана и «до» при этом уже не видно. Пусть будут
     мельче, зато видно обе сразу. */
  .showcase-pair{gap:8px;align-items:flex-start}
  .showcase-pair figure{flex:1 1 0;min-width:0;max-width:none;gap:8px}
  .showcase-arrow{width:16px}
  .showcase{margin-top:40px;padding-top:26px}
  .showcase-lead{font-size:14px}
}