/* ============================================================
   ШРИФТЫ — локальные, без обращения к Google Fonts.
   Нужны, чтобы страница выглядела одинаково в браузере,
   в превью и офлайн. Файлы лежат в assets/fonts/.
   Onest — вариативный, 300–900. Caveat — вариативный, 400–700.
   ============================================================ */

/* ---------- Onest ---------- */
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('fonts/onest-latin-ext.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:'Onest';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('fonts/onest-latin.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;
}

/* ---------- Caveat · только почерк автора ---------- */
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/caveat-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/caveat-latin.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;
}

/* ============================================================
   ТОКЕНЫ
   вёрстка и тексты — v30
   материя — v29: обводка 2px, жёсткая офсетная тень, радиус 6
   палитра — v30, референсная. Кремового нет.
   ============================================================ */
:root{
  /* цвет */
  --bg:#F5F8FC;          /* фон страницы — на тон светлее */
  --card:#FFFFFF;
  --band:#EAF1F9;        /* подложка под медиа */
  --ink:#14205E;         /* текст, заголовки, ВСЕ обводки и тени */
  --text:#3E4766;
  --muted:#5A6285;       /* затемнён: на 13px давал 3.9:1 */
  --accent:#2F6FED;
  --accent-dark:#1B4FC4;

  --blue:#DCE8FA;
  --green:#DDECD4;
  --pink:#F9DDE7;
  --hand:#3B82E8;

  /* материя v29 */
  --b:2px;
  --r:6px;
  --sh:4px 4px 0 var(--ink);
  --sh-lg:6px 6px 0 var(--ink);

  /* пробелы */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;
  --sec:48px;
  --pad:20px;

  /* кегль */
  --t-h1:clamp(27px, 21.44px + 1.484vw, 43px);
  --t-h2:clamp(22px, 17.77px + 1.127vw, 34px);
  --t-h3:clamp(17px, 16.3px + 0.188vw, 19px);
  --t-lead:clamp(15px, 14.30px + 0.188vw, 17px);
  --t-body:clamp(15px, 14.6px + 0.09vw, 16px);
  --t-sm:14px;
  --t-xs:13px;
  --t-num:clamp(38px, 25.7px + 3.28vw, 68px);
}
@media (min-width:768px){ :root{ --pad:32px; --sec:62px; } }
@media (min-width:1200px){ :root{ --pad:40px; --sec:72px; } }

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Onest',system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
h1,h2,h3{margin:0;color:var(--ink);font-weight:800;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);line-height:1.3;letter-spacing:-.01em;}
p{margin:0 0 var(--s4);max-width:62ch;}
p:last-child{margin-bottom:0;}
/* текст под заголовком не липнет к нему: заголовки своих отступов
   не имеют, поэтому воздух задаёт то, что идёт следом */
h1 + p, h2 + p, h3 + p,
h1 + ul, h2 + ul, h3 + ul,
h1 + ol, h2 + ol, h3 + ol{margin-top:var(--s4);}
a{color:var(--accent-dark);text-underline-offset:3px;text-decoration-thickness:2px;}
a:hover{color:var(--ink);}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px;}

.wrap{max-width:1160px;margin:0 auto;padding-inline:var(--pad);}
section{padding-block:var(--sec);}
.lead{font-size:var(--t-lead);line-height:1.6;}
.sm{font-size:var(--t-sm);}
.xs{font-size:var(--t-xs);}
.muted{color:var(--muted);}
.center{text-align:center;}

/* ============================================================
   КОМПОНЕНТЫ · материя v29
   ============================================================ */
.card{
  background:var(--card);
  border:var(--b) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:var(--s6);
}
@media (min-width:768px){ .card{padding:var(--s7);} }
.card > * + *{margin-top:var(--s4);}
.card--tight{padding:var(--s5);}
.card--blue{background:var(--blue);}
.card--pink{background:var(--pink);}
.card--green{background:var(--green);}
.card--band{background:var(--band);}
.card--flat{box-shadow:none;}

.plaque{
  background:var(--blue);
  border:var(--b) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:var(--s5);
}
.plaque--pink{background:var(--pink);}
/* формула кейса: капсом и по центру плашки.
   Отступ абзаца снимаем с запасом по специфичности: правило .lesson p
   объявлено ниже и иначе возвращает нижний отступ, из-за чего строка
   съезжает выше центра */
.formula{margin-bottom:var(--s6);padding:var(--s4) var(--s5);text-align:center;}
.formula p,.lesson .formula p{
  margin:0;max-width:none;
  color:var(--ink);font-weight:800;font-size:var(--t-sm);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.4;
}
.plaque--green{background:var(--green);}
.plaque--flat{box-shadow:none;}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);
  border:var(--b) solid var(--ink);border-radius:var(--r);
  padding:5px 11px;
  font-size:var(--t-xs);font-weight:600;color:var(--ink);line-height:1.4;
  white-space:nowrap;
}
.chip--accent{background:var(--accent);color:#fff;}
.chip--blue{background:var(--blue);}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);}

.num{
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;
  border:var(--b) solid var(--ink);
  display:grid;place-items:center;
  font-size:var(--t-sm);font-weight:700;line-height:1;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:inherit;font-size:var(--t-lead);font-weight:700;line-height:1.2;
  color:#fff;background:var(--accent);
  border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);
  padding:14px 24px;min-height:52px;
  text-decoration:none;cursor:pointer;
  transition:transform .06s linear, box-shadow .06s linear;
}
.btn:hover{color:#fff;background:var(--accent-dark);}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.btn--ghost{background:var(--card);color:var(--ink);}
.btn--ghost:hover{background:var(--blue);color:var(--ink);}
.btn--wide{width:100%;}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);}
@media (max-width:479px){ .btn{width:100%;} }

/* заголовок секции */
.head{margin-bottom:var(--s7);max-width:62ch;}
.head .chip{margin-bottom:var(--s4);}
/* чип в паре с номером живёт в строке .chips: собственный нижний отступ
   поднимал его над кружком, отступ держит сама строка */
.head .chips{align-items:center;}
.head .chips .chip{margin-bottom:0;}
.head p{margin-top:var(--s4);}
/* синее подчёркивание-маркер под заголовком */
.marker{position:relative;display:inline-block;}
.marker::after{
  content:'';position:absolute;left:0;right:6%;bottom:-6px;height:5px;
  background:var(--hand);opacity:.55;border-radius:4px;
}

/* почерк */
.hand{
  font-family:'Caveat',cursive;font-size:24px;font-weight:400;
  color:var(--hand);line-height:1.2;transform:rotate(-4deg);display:inline-block;
}

/* заглушки */
.ph{
  width:100%;border-radius:var(--r);
  background:var(--band);border:var(--b) dashed var(--ink);
  display:grid;place-items:center;padding:var(--s4);min-height:120px;
}
.ph span{font-size:var(--t-xs);font-weight:600;color:var(--muted);text-align:center;line-height:1.5;}
.ph--sq{aspect-ratio:1/1;}
.ph--wide{aspect-ratio:16/10;}
.ph--tall{aspect-ratio:3/4;}
.ph--circle{border-radius:50%;aspect-ratio:1/1;}

/* сетки */
.grid{display:grid;gap:var(--s5);}
.g2{grid-template-columns:1fr;}
.g3{grid-template-columns:1fr;}
.split{grid-template-columns:1fr;align-items:start;}
@media (min-width:680px){ .g2{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){
  .g3{grid-template-columns:repeat(3,1fr);}
  .split{grid-template-columns:1fr 1fr;gap:var(--s9);}
  .split--wide{grid-template-columns:1.15fr 1fr;}
  .split--narrow{grid-template-columns:.8fr 1.2fr;}
}

/* шапка */
.hdr{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:var(--b) solid var(--ink);}
.hdr .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:70px;}
.brand{
  display:inline-flex;align-items:center;
  min-height:44px;
  text-decoration:none;
}
.hdr nav{display:none;gap:var(--s6);}
@media (min-width:1000px){ .hdr nav{display:flex;} }
/* тап-зона 44: паддинг, а не увеличение кегля */
.hdr nav a{
  color:var(--text);text-decoration:none;font-size:var(--t-sm);font-weight:500;
  display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s2);
}
.hdr nav a:hover{color:var(--accent);}
.hdr .btn{min-height:44px;padding:10px 18px;font-size:var(--t-sm);box-shadow:3px 3px 0 var(--ink);width:auto;}
/* тень шапки объявлена ниже общего .btn:active и перебивала его,
   поэтому кнопка вдавливалась прямо на собственную тень */
.hdr .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* строка преимуществ */
.facts{display:grid;gap:var(--s5);}
@media (min-width:760px){ .facts{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:var(--s5);} }
.fact{display:flex;gap:var(--s3);align-items:flex-start;}
.fact > span:last-child{min-width:0;}
.fact .ic{
  flex:none;width:36px;height:36px;border-radius:var(--r);
  background:var(--blue);border:var(--b) solid var(--ink);
  display:grid;place-items:center;color:var(--ink);
}
.fact .ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fact b{display:block;color:var(--ink);font-weight:700;font-size:var(--t-sm);line-height:1.4;}
.fact i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--muted);line-height:1.4;}

/* «на выходе» */
.out{
  background:var(--green);border:var(--b) solid var(--ink);
  border-radius:var(--r);padding:var(--s3) var(--s4);
  font-size:var(--t-xs);color:var(--ink);margin-top:auto;
}

/* списки */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);align-content:start;}
.ticks li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-sm);}
.ticks li::before{
  content:'✓';flex:none;width:20px;height:20px;margin-top:1px;
  border:var(--b) solid var(--ink);border-radius:4px;
  background:var(--card);color:var(--accent);
  font-size:12px;font-weight:700;line-height:1;
  display:grid;place-items:center;
}
.stars{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);align-content:start;}
.stars li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-sm);color:var(--ink);}
.stars li::before{content:'★';flex:none;color:var(--ink);font-size:14px;line-height:1.7;}
.card > .stars{margin-top:var(--s5);}

/* цифры и цена */
.stat b{display:block;color:var(--ink);font-size:var(--t-num);font-weight:800;line-height:1;letter-spacing:-.03em;}
/* четыре цифры автора стоят одной строкой: кегль подбираем под ширину */
.g4{grid-template-columns:1fr;}
@media (min-width:680px){ .g4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){
  .g4{grid-template-columns:repeat(4,1fr);gap:var(--s4);}
  .g4 .stat{padding:var(--s5);}
  .g4 .stat b{font-size:clamp(26px,14px + 1.7vw,40px);}
  .g4 .stat--sm b{font-size:clamp(22px,10px + 1.5vw,32px);}
  .g4 .stat span{font-size:var(--t-xs);}
}
.stat span{display:block;margin-top:var(--s3);font-size:var(--t-sm);color:var(--muted);}
.price{color:var(--ink);font-size:var(--t-num);font-weight:800;line-height:1;letter-spacing:-.03em;}

/* строки материалов */
.rows{display:grid;gap:var(--s3);}
.rowitem{
  background:var(--card);
  border:var(--b) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
  padding:var(--s5) var(--s6);display:grid;gap:var(--s2);
}
@media (min-width:820px){ .rowitem{grid-template-columns:minmax(230px,.75fr) 1.25fr;gap:var(--s6);align-items:center;} }
/* заголовок и текст здесь стоят в двух колонках, а не в потоке:
   верхний отступ из общего правила сдвигал бы правую колонку вниз */
.rowitem h3 + p{margin-top:0;}

/* FAQ */
.faq{display:grid;gap:var(--s3);}
details{background:var(--card);border:var(--b) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);}
details[open]{background:var(--blue);}
summary{
  list-style:none;cursor:pointer;padding:var(--s5) var(--s6);
  display:flex;gap:var(--s4);align-items:center;justify-content:space-between;
  color:var(--ink);font-weight:600;
}
summary::-webkit-details-marker{display:none;}
summary::after{
  content:'+';flex:none;width:28px;height:28px;border-radius:var(--r);
  border:var(--b) solid var(--ink);background:var(--card);color:var(--ink);
  display:grid;place-items:center;font-weight:700;line-height:1;font-size:16px;
}
details[open] summary::after{content:'–';background:var(--accent);color:#fff;}
details .answer{padding:0 var(--s6) var(--s5);}

/* подвал */
.ftr{border-top:var(--b) solid var(--ink);padding-block:var(--s9);}
/* ссылки подвала стоят списком — разводим до тапабельных 44 */
.ftr a{display:inline-block;padding-block:11px;}
.ftr .cols{display:grid;gap:var(--s7);}
@media (min-width:820px){ .ftr .cols{grid-template-columns:1.5fr 1fr 1fr;} }

.hidden-until-reviews{display:none;}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;scroll-behavior:auto !important;} }

/* ============================================================
   ФОРМЫ · материя та же: обводка 2px, радиус 6, жёсткая тень
   ============================================================ */
.field{display:grid;gap:var(--s2);margin-bottom:var(--s4);}
.field > label{font-size:var(--t-sm);font-weight:600;color:var(--ink);}
.input{
  width:100%;font-family:inherit;font-size:var(--t-body);color:var(--ink);
  background:var(--card);
  border:var(--b) solid var(--ink);border-radius:var(--r);
  padding:13px 14px;min-height:52px;
}
.input::placeholder{color:var(--muted);}
/* в фокусе поле держит только обводку: жёсткая тень под ней читалась
   как вторая рамка и спорила с самой обводкой */
.input:focus{outline:none;}
.input:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.input[aria-invalid="true"]{background:var(--pink);}
.err{font-size:var(--t-sm);color:#A3123C;font-weight:600;min-height:0;}
.err:empty{display:none;}
.form-note{font-size:var(--t-xs);color:var(--muted);margin-top:var(--s4);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.6;pointer-events:none;}

/* ============================================================
   УЗКАЯ СТРАНИЦА · статус оплаты, юридические тексты
   ============================================================ */
.narrow{max-width:680px;margin-inline:auto;}
.status{text-align:center;}
.status .mark{
  width:64px;height:64px;margin:0 auto var(--s6);
  border:var(--b) solid var(--ink);border-radius:50%;
  box-shadow:var(--sh);
  display:grid;place-items:center;
}
.status .mark svg{width:30px;height:30px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.status .mark--ok{background:var(--green);}
.status .mark--fail{background:var(--pink);}

/* нумерованный список программы */
.steps{display:grid;gap:var(--s4);}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;}

/* фото автора: круг с той же обводкой, что у остальной системы */
.photo{
  display:block;width:100%;max-width:280px;
  aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;
}

/* картинки: без обводок и теней, как коллаж с доходами */
.shot{display:block;width:100%;height:auto;margin-inline:auto;}
/* исходники — небольшие скриншоты; не растягиваем их выше родного
   размера, иначе мылит */
/* статистика — уже коллажа и стоит по центру под ним */
.shot--stats{width:66%;margin-inline:auto;}
/* первый экран: фото с сообщениями заказчиков — одна картинка на колонку,
   поэтому центруем её по высоте текстового блока */
.shot--leads{margin-block:auto;}
/* на десктопе высотой командует картинка, а не ширина колонки: она должна
   перекрывать текстовый блок сверху и снизу, поэтому ширина идёт следом
   и картинка заходит в промежуток между колонками */
@media (min-width:980px){
  /* картинка остаётся в потоке: transform на ней занят анимацией появления
     (motion.js вешает на .shot data-reveal="art", а .is-in гасит transform),
     поэтому двигаем её только полями. Вправо она стоит по краю колонки,
     влево растёт в промежуток между колонками — за экран не выходит,
     вверх и вниз выступает за текстовый блок */
  .shot--leads{
    width:calc(100% + var(--s7));max-width:none;
    margin:calc(-1 * var(--s6)) 0 calc(-1 * var(--s6)) calc(-1 * var(--s7));
  }
  /* вылет нужен, а горизонтальный скролл от него — нет */
  .hero-sec{overflow-x:clip;}
}
/* узкий десктоп: промежуток между колонками меньше, вылет тоже */
@media (min-width:980px) and (max-width:1139px){
  .shot--leads{
    width:calc(100% + var(--s5));
    margin-left:calc(-1 * var(--s5));
  }
}
/* сетка кейсов: уже колонки и по своей пропорции, без обрезки */
.shot--cases{width:86%;max-width:540px;height:auto;margin-inline:auto 0;border-radius:var(--r);}
.split--stretch{align-items:stretch;}
/* логотип: по высоте прежней пилюли */
.brand img{display:block;height:44px;width:auto;flex:none;}

/* внутри центрированного блока абзацы центруются целиком */
.center p, .center .lead{margin-inline:auto;}

/* логотипы клиентов: одна строка, в цвете, буллит между.
   Высота у каждого своя — по оптическому весу, а не по габариту */
.clients{
  /* прижимаем влево и держим короткий зазор: space-between растаскивал
     логотипы по всей ширине и промежутки становились огромными */
  display:flex;flex-wrap:nowrap;align-items:center;
  justify-content:flex-start;gap:13px;
}
.clients img{display:block;width:auto;}
.clients .sep{color:var(--muted);line-height:1;font-size:12px;flex:none;}
.l-avito{height:30px;}
.l-mts{height:25px;}
/* у Газпрома над словом стоит пламя, поэтому буквы ниже строки —
   поднимаем логотип, чтобы они встали по одной линии с МТС */
.l-gazprom{height:36px;transform:translateY(-4px);}
.l-ozon{height:21px;}
.l-chicko{height:27px;}
@media (max-width:760px){
  .clients{flex-wrap:wrap;justify-content:flex-start;gap:var(--s3);}
  .clients img{height:22px;transform:none;}
}

/* блок автора делит ту же трёхколоночную сетку, что и карточки цифр,
   поэтому текст начинается ровно по левому краю второй карточки */
.author-row{display:grid;gap:var(--s5);grid-template-columns:1fr;}
@media (min-width:980px){
  .author-row{grid-template-columns:repeat(3,1fr);}
  .author-row > .author-text{grid-column:2 / -1;}
}

/* в подвале логотип крупнее, чем в шапке */
.ftr .brand img{height:64px;}

/* длинная цифра с единицей: своя ступень, чтобы не ломалась на две строки */
.stat--sm b{font-size:clamp(30px,20.4px+2.56vw,57px);white-space:nowrap;}

/* правая колонка первого экрана: высота как у левого блока,
   картинки разносятся по краям и добирают остаток */
.split--wide{align-items:stretch;}
.hero-col{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);height:100%;}

/* строка под ценой не должна ломаться по 62ch */
.plaque .wide{max-width:none;}

/* ============================================================
   УЗКИЙ ДЕСКТОП · 980–1139: две колонки уже включились,
   но ширины ещё мало и первый экран разъезжается
   ============================================================ */
@media (min-width:980px) and (max-width:1139px){
  /* колонки ближе друг к другу — левой колонке нужна ширина */
  .split{gap:var(--s7);}
  /* статистика прижимается к коллажу, а не улетает к низу колонки */
  .hero-col{justify-content:flex-start;gap:var(--s5);}
  /* обе кнопки первого экрана должны остаться в одной строке */
  .btns .btn{padding:12px 16px;font-size:var(--t-sm);min-height:48px;}
}

/* ============================================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ · длинный текст с нумерацией
   ============================================================ */
.doc{max-width:76ch;}
.doc h2{
  font-size:var(--t-h3);line-height:1.3;letter-spacing:-.01em;
  margin:var(--s8) 0 var(--s4);
}
.doc h2:first-of-type{margin-top:var(--s6);}
.doc p, .doc li{max-width:none;}
.doc ol, .doc ul{margin:0 0 var(--s4);padding-left:var(--s6);}
.doc li{margin-bottom:var(--s2);}
.doc li:last-child{margin-bottom:0;}
/* дата редакции и служебные пометки */
.doc-date{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s6);}
/* места, где нужно подставить свои данные */
.fill{
  background:var(--pink);border-bottom:2px solid var(--ink);
  padding:1px 4px;font-weight:600;color:var(--ink);
}

/* ============================================================
   ШАПКА · две кнопки рядом
   ============================================================ */
.hdr-cta{display:flex;align-items:center;gap:var(--s2);}
/* подписи в шапке не переносятся: кнопка в две строки выглядит поломкой */
.hdr .btn,.hdr nav a{white-space:nowrap;}
/* до широкого десктопа подписи короткие: «Вход» и «Доступ».
   Порог взят по меню — с 1000px рядом с кнопками стоят ещё шесть пунктов */
.hdr-cta .lbl-short{display:none;}
@media (max-width:1180px){
  .hdr-cta .lbl-full{display:none;}
  .hdr-cta .lbl-short{display:inline;}
  .hdr .btn{padding:10px 14px;}
}

/* ============================================================
   ВОРКШОП · плеер, список серий, водораздел, панель покупки
   ============================================================ */
/* плеер слева, серии справа; на телефоне серии уходят под плеер */
.watch{display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:start;}
@media (min-width:980px){ .watch{grid-template-columns:1.5fr 1fr;gap:var(--s7);} }

.player{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--band);
  border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh-lg);
}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
/* заглушка занимает всю рамку плеера, свою обводку не рисует */
.player .ph{height:100%;border:0;border-radius:0;background:transparent;}

/* список серий: строка выбирает видео, галочка отмечает просмотр */
.eplist{display:grid;gap:var(--s3);align-content:start;}
.ep{
  display:grid;grid-template-columns:1fr;
  background:var(--card);
  border:var(--b) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden;
}
/* просмотренная серия горит зелёным */
.ep[data-done="1"]{background:var(--green);}
.ep[aria-current="true"]:not([data-done="1"]){background:var(--blue);}

.ep-pick{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;
  width:100%;text-align:left;font-family:inherit;
  background:none;border:0;padding:var(--s4) var(--s5);cursor:pointer;
}
.ep-pick:hover .ep-name{color:var(--accent-dark);}
.ep-pick:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;}
/* по умолчанию кружок серии белый: синим горит только та, что играет */
.ep .num{background:var(--card);color:var(--ink);}
.ep[aria-current="true"] .num{background:var(--accent);color:#fff;}
.ep b{display:block;color:var(--ink);font-size:var(--t-sm);font-weight:700;line-height:1.35;}
.ep i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--muted);line-height:1.4;}
.ep .ep-time{flex:none;font-size:var(--t-xs);color:var(--muted);white-space:nowrap;}

/* полоса с галочкой: отдельная зона, чтобы не спорить с выбором серии */
.ep-done{
  border-top:var(--b) solid var(--ink);
  padding:var(--s2) var(--s5);
  font-size:var(--t-xs);
}
.ep[data-done="1"] .ep-done .txt{color:var(--ink);font-weight:600;}
.ep-progress{font-size:var(--t-xs);color:var(--muted);}

/* водораздел: отсюда начинается вторая страница внутри страницы */
.rule{border:0;border-top:var(--b) solid var(--ink);margin:0;}

/* боли: каждая фраза отдельной строкой, крупно */
.pains{display:grid;gap:var(--s5);}
.pain{
  margin:0;max-width:60ch;
  border-left:5px solid var(--hand);padding-left:var(--s5);
  color:var(--ink);font-weight:600;line-height:1.35;
  font-size:clamp(17px, 15.6px + .47vw, 22px);
}

/* ============================================================
   КАБИНЕТ · вкладки, боковое меню, урок
   ============================================================ */
/* вкладки верхнего уровня: обучение · материалы · профиль */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s2);}
.tab{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:9px 16px;
  background:var(--card);border:var(--b) solid var(--ink);border-radius:var(--r);
  font-size:var(--t-sm);font-weight:600;color:var(--ink);text-decoration:none;
  white-space:nowrap;
}
.tab:hover{background:var(--blue);color:var(--ink);}
.tab[aria-current]{background:var(--accent);color:#fff;box-shadow:3px 3px 0 var(--ink);}

/* каркас: слева разделы, справа урок */
.app{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start;}
@media (min-width:1000px){ .app{grid-template-columns:300px 1fr;gap:var(--s7);} }

.sidenav{
  background:var(--card);border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);padding:var(--s5);
}
@media (min-width:1000px){ .sidenav{position:sticky;top:96px;} }
.sidenav h2{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s4);}

/* строка раздела: номер, название, счётчик галочек */
.part{display:grid;gap:var(--s2);}
.part + .part{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--band);}
.part > a{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center;
  text-decoration:none;color:var(--ink);font-size:var(--t-sm);font-weight:600;line-height:1.3;
  padding-block:var(--s1);
}
.part > a:hover{color:var(--accent-dark);}
.part .tag{
  flex:none;width:26px;height:26px;border-radius:var(--r);
  background:var(--band);border:var(--b) solid var(--ink);
  display:grid;place-items:center;
  font-size:var(--t-xs);font-weight:700;color:var(--ink);line-height:1;
}
.part[data-done="1"] .tag{background:var(--green);}
.part[aria-current="true"] .tag{background:var(--accent);color:#fff;}
.part .meta{font-size:var(--t-xs);color:var(--muted);}
/* раздел, которого ещё нет: та же строка, но без ссылки и приглушённая */
.part-soon{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center;
  color:var(--ink);font-size:var(--t-sm);font-weight:600;line-height:1.3;
  padding-block:var(--s1);opacity:.5;
}

/* уроки внутри открытого раздела */
.lessons{display:grid;gap:var(--s1);margin:var(--s2) 0 0 38px;}
.lessons a{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  font-size:var(--t-xs);color:var(--text);text-decoration:none;
  padding:var(--s2) var(--s3);border-radius:var(--r);line-height:1.4;
}
.lessons a:hover{background:var(--band);color:var(--ink);}
.lessons a[aria-current]{background:var(--blue);color:var(--ink);font-weight:600;}
.lessons .dot{
  width:14px;height:14px;margin-top:3px;border-radius:4px;
  border:var(--b) solid var(--ink);background:var(--card);
}
.lessons a[data-done="1"] .dot{background:var(--green);}

/* полоса прогресса */
.bar{height:10px;border:var(--b) solid var(--ink);border-radius:99px;background:var(--card);overflow:hidden;}
.bar > span{display:block;height:100%;background:var(--accent);}

/* урок */
.lesson{max-width:70ch;display:flow-root;}
/* картинки в уроке: скруглённые края, как в макетах воркбука */
.lesson .shot{border-radius:11px;}
/* картинка поменьше, по центру колонки */
.lesson .shot--small{width:min(460px,100%);margin-inline:auto;margin-bottom:var(--s6);}
/* две картинки рядом: слева было, справа стало */
.duo{display:grid;gap:var(--s5);margin-bottom:var(--s6);clear:both;}
@media (min-width:680px){ .duo{grid-template-columns:1fr 1.4fr;align-items:center;} }
.duo figure{margin:0;}
.duo .shot{margin:0;border-radius:11px;}
.duo figcaption{margin-top:var(--s3);font-size:var(--t-xs);color:var(--muted);}

/* высокая картинка: узкая колонка по центру */
.lesson .shot--narrow{width:min(340px,72%);margin-inline:auto;margin-bottom:var(--s6);}

/* картинка и реплика автора почерком рядом с ней */
.handnote{
  display:grid;gap:var(--s5);align-items:center;
  margin-bottom:var(--s6);clear:both;
}
@media (min-width:680px){
  .handnote{grid-template-columns:minmax(0,440px) 1fr;gap:var(--s6);}
  /* реплика слева, картинка справа */
  .handnote--rev{grid-template-columns:1fr minmax(0,460px);}
}
.handnote .shot{margin:0;}

/* реплика и дуга под ней — один блок: дуга продолжает последнюю строку */
.handsay{display:flex;flex-direction:column;align-items:flex-start;}
.handsay .hand--note{display:block;}
.handnote-arrow{
  display:block;width:min(240px,90%);height:auto;margin-top:-6px;
}
/* картинка справа — длинная дуга под текстом ведёт к ней */
.handnote--rev .handnote-arrow{margin-left:auto;}
/* картинка слева — короткая дуга стоит над текстом и смотрит на неё */
.handnote:not(.handnote--rev) .handnote-arrow{
  width:min(110px,45%);transform:scaleX(-1);
  order:-1;margin:0 0 var(--s2);
}

/* картинка во всю ширину, подпись под ней: дуга маленькая и смотрит вверх */
.handnote--under{display:block;margin:0 0 var(--s6);}
.handnote--under .shot{width:100%;margin:0;}
/* .hand — inline-block, поэтому центруем не текст в нём,
   а сам блок подписи на всю ширину картинки */
.handnote--under figcaption{
  display:block;width:100%;margin-top:var(--s4);
  max-width:none;text-align:center;
}
@media (max-width:679px){ .handnote-arrow{display:none;} }
.hand--note{
  font-size:clamp(20px,17px + .5vw,26px);line-height:1.35;
  transform:none;max-width:32ch;
}

/* схема со ссылкой на исходник */
.filecard{
  margin:0 0 var(--s6);clear:both;
  background:var(--card);
  border:var(--b) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden;
}
.filecard img{width:100%;display:block;background:var(--bg);}
.filecard figcaption{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-top:var(--b) solid var(--ink);
  font-size:var(--t-sm);color:var(--ink);font-weight:600;
}
.filecard .btn{width:auto;min-height:40px;padding:9px 16px;font-size:var(--t-xs);box-shadow:3px 3px 0 var(--ink);}
.filecard .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* небольшая картинка сбоку: текст обтекает её справа налево.
   Высокие скриншоты держим уже, чтобы не свисали ниже текста */
.lesson .shot--side{
  float:right;width:min(260px,40%);
  margin:0 0 var(--s5) var(--s6);
}
/* блоки с заданиями, карточками и предупреждениями не заезжают под картинку */
.lesson .task,.lesson .note,.lesson .quote,.lesson h2,
.lesson .card,.lesson .plaque,.lesson .filecard,.lesson .handnote{clear:both;}
@media (max-width:600px){
  .lesson .shot--side{float:none;width:min(220px,64%);margin:0 auto var(--s5);}
}
/* в длинном тексте подзаголовку нужен воздух и сверху, и снизу:
   сверху больше, чтобы он читался как начало новой мысли */
.lesson h2{margin-top:var(--s9);}
.lesson h2:first-child{margin-top:0;}
/* воздух под подзаголовком: задаём самому заголовку, а не соседу.
   Так отступ одинаковый перед текстом, списком и любой карточкой —
   вертикальные отступы схлопываются и берут большее значение */
.lesson h2{margin-bottom:var(--s7);}
.lesson h3{margin-bottom:var(--s6);}
.lesson p{margin-bottom:var(--s4);}
.lesson ul{margin:0 0 var(--s4);padding-left:var(--s6);}
.lesson li{margin-bottom:var(--s2);}

/* предупреждение автора: в воркбуке их много */
.note{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  background:var(--pink);border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
}
.note b{color:var(--ink);}
.note p{margin:0;color:var(--ink);font-size:var(--t-sm);}
.note .sign{font-weight:700;color:var(--ink);line-height:1.4;}

/* подпись только для скринридера: у поля должен быть label,
   даже когда рядом уже стоит объясняющий текст */
.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* задание: поля внутри карточки с подписью «сохранено» */
.task{
  background:var(--band);border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);
  padding:var(--s5);margin-bottom:var(--s6);
}
.task > h3{margin-bottom:var(--s4);}
.task .saved{font-size:var(--t-xs);color:var(--muted);margin-top:var(--s3);}
textarea.input{min-height:96px;resize:vertical;line-height:1.55;}

/* ------------------------------------------------------------
   ТАБЛИЦА БРЕЙНШТОРМА · три колонки, строки добавляются
   ------------------------------------------------------------ */
.tb-grid{
  border:var(--b) solid var(--ink);border-radius:var(--r);
  background:var(--card);overflow:hidden;
}
.tb-head,.tb-row{
  display:grid;
  grid-template-columns:repeat(var(--tb-cols,3),minmax(0,1fr)) 40px;
  align-items:stretch;
}
.tb-head{background:var(--band);border-bottom:var(--b) solid var(--ink);}
.tb-head span{
  padding:var(--s3) var(--s4);
  font-size:var(--t-xs);font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.04em;
}
.tb-row + .tb-row,.tb-row--hint{border-top:1px solid var(--band);}
/* строка примеров: показывает, что писать, но не редактируется */
.tb-row--hint span{
  padding:var(--s3) var(--s4);
  font-size:var(--t-xs);color:var(--muted);font-style:italic;
}
.tb-row .input{
  border:0;border-radius:0;min-height:46px;
  font-size:var(--t-sm);background:transparent;
}
.tb-row .input + .input{border-left:1px solid var(--band);}
.tb-row .input:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;}
.tb-del,.tb-corner{
  border:0;border-left:1px solid var(--band);background:transparent;
  color:var(--muted);font-family:inherit;font-size:16px;line-height:1;cursor:pointer;
}
.tb-del:hover{background:var(--pink);color:var(--ink);}
.tb-corner{cursor:default;}
@media (max-width:600px){
  .tb-head span,.tb-row--hint span{font-size:11px;padding:var(--s2) var(--s3);}
  .tb-row .input{font-size:var(--t-xs);padding-inline:var(--s3);}
}

/* строки комбинаций: поле + поле + поле */
.combo{display:grid;gap:var(--s3);}
.combo-row{display:grid;gap:var(--s2);align-items:center;grid-template-columns:auto 1fr;}
@media (min-width:760px){
  .combo-row{grid-template-columns:auto 1fr auto 1fr auto 1fr;}
}
.combo-row .num{width:26px;height:26px;font-size:var(--t-xs);}
.combo-row .plus{font-weight:700;color:var(--ink);text-align:center;}
@media (max-width:759px){ .combo-row .plus{display:none;} }

/* ------------------------------------------------------------
   ПЛЕЕР УРОКА · видео, скорость, продолжение просмотра
   ------------------------------------------------------------ */
.plr .player{position:relative;}
.plr video{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--ink);}

/* «продолжить с 1:02» лежит поверх кадра, пока человек не выбрал */
.pl-resume{
  position:absolute;inset:0;z-index:2;
  display:grid;place-content:center;justify-items:center;gap:var(--s4);
  padding:var(--s5);text-align:center;
  background:rgba(20,32,94,.82);
}
.pl-resume[hidden]{display:none;}
.pl-resume p{margin:0;color:#fff;font-size:var(--t-lead);}
.pl-resume b{color:#fff;}
.pl-resume .btn{width:auto;min-height:46px;padding:11px 20px;font-size:var(--t-sm);box-shadow:3px 3px 0 var(--ink);}
.pl-resume .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* заставка: лежит поверх кадра, пока видео не запустили */
.pl-cover{
  position:absolute;inset:0;z-index:1;
  display:grid;align-content:center;justify-items:center;gap:var(--s3);
  padding:var(--s7) var(--s6);text-align:center;
  background:var(--accent);color:#fff;cursor:pointer;
}
.pl-cover[hidden]{display:none;}
.pl-cover .pl-part{
  position:absolute;top:var(--s5);left:0;right:0;
  font-size:var(--t-xs);font-weight:600;opacity:.9;
}
.pl-cover strong{
  font-size:clamp(28px, 18px + 2.4vw, 52px);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
}
.pl-cover .pl-topic{font-size:var(--t-sm);font-weight:600;max-width:34ch;}
.pl-cover .pl-note{
  position:absolute;bottom:var(--s5);left:0;right:0;
  font-size:var(--t-sm);font-weight:700;
}
.pl-play{
  margin-top:var(--s4);
  width:64px;height:64px;padding:0;
  display:grid;place-items:center;
  background:#fff;color:var(--accent);
  border:var(--b) solid var(--ink);border-radius:50%;
  box-shadow:var(--sh);cursor:pointer;
}
.pl-play svg{width:28px;height:28px;fill:currentColor;margin-left:3px;}
.pl-play:hover{background:var(--blue);}
.pl-play:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* скорость живёт внутри кадра, а не отдельной строкой на странице */
.pl-rate{
  position:absolute;top:var(--s3);right:var(--s3);z-index:1;
  min-width:52px;min-height:34px;padding:6px 12px;
  background:rgba(20,32,94,.78);color:#fff;
  border:0;border-radius:var(--r);
  font-family:inherit;font-size:var(--t-xs);font-weight:700;cursor:pointer;
  backdrop-filter:blur(4px);
}
.pl-rate:hover{background:var(--ink);}
.pl-rate[data-on="1"]{background:var(--accent);}
.pl-rate:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ------------------------------------------------------------
   МУДБОРД · перетащил картинки, собрал коллаж, скачал
   ------------------------------------------------------------ */
/* зона, куда прикрепляют своё фото */
.drop{
  display:grid;place-items:center;gap:var(--s2);
  padding:var(--s7) var(--s5);text-align:center;cursor:pointer;
  background:var(--card);
  border:var(--b) dashed var(--ink);border-radius:var(--r);
}
.drop:hover,.drop[data-over="1"]{background:var(--blue);}
.drop b{color:var(--ink);font-size:var(--t-sm);}
.drop span{font-size:var(--t-xs);color:var(--muted);}
.drop[data-busy="1"]{opacity:.6;pointer-events:none;}
.up-shot{
  width:100%;margin-top:var(--s4);border-radius:var(--r);
  border:var(--b) solid var(--ink);
}
.up-shot[hidden],.up-del[hidden]{display:none;}

/* холст редактора: логический размер 1600×1000, тянется по ширине */
.mb-stage{
  position:relative;aspect-ratio:8/5;overflow:hidden;
  background:var(--card);
  border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);
}
.mb-stage[data-over="1"]{background:var(--blue);border-style:dashed;}
.mb-stage[data-busy="1"]{opacity:.6;pointer-events:none;}
.mb-canvas{display:block;width:100%;height:100%;touch-action:none;}
/* сохранённый коллаж в следующем уроке */
.mb-flat{width:100%;height:100%;object-fit:contain;display:block;background:#fff;}
.mb-flat[hidden]{display:none;}
.mb-canvas:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;}
/* подсказка лежит поверх пустого холста и не мешает бросать файлы */
.mb-hint{
  position:absolute;inset:0;display:grid;place-content:center;gap:var(--s2);
  text-align:center;padding:var(--s5);pointer-events:none;
}
.mb-hint[hidden]{display:none;}
.mb-hint b{color:var(--ink);font-size:var(--t-sm);}
.mb-hint span{font-size:var(--t-xs);color:var(--muted);}
.mb-actions{margin-top:var(--s4);}
.mb-actions .btn{width:auto;min-height:44px;padding:10px 16px;font-size:var(--t-sm);box-shadow:3px 3px 0 var(--ink);}
.mb-actions .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.mb-actions .btn[hidden]{display:none;}

/* готовая фраза, которую копируют и отправляют клиенту */
.quote{
  background:var(--card);
  border:var(--b) solid var(--ink);border-left-width:6px;border-radius:var(--r);
  box-shadow:var(--sh);
  padding:var(--s5);margin-bottom:var(--s5);
  display:grid;gap:var(--s4);justify-items:start;
}
.quote p{margin:0;color:var(--ink);}
/* чужой пример: та же рамка, но серым и без кнопки */
.quote--sample{border-left-color:var(--muted);}
.quote--sample p{color:var(--text);}
.quote .btn{width:auto;min-height:40px;padding:8px 14px;font-size:var(--t-xs);box-shadow:3px 3px 0 var(--ink);}
.quote .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* заголовок трекера на итоговой странице раздела */
.card > summary{
  display:block;color:var(--ink);font-weight:700;font-size:var(--t-lead);cursor:default;
}
.card > summary::after{content:none;}

/* сводка ответов: пустое поле видно сразу */
.echo{
  margin:0;padding:11px 14px;min-height:48px;
  background:var(--card);border:var(--b) solid var(--ink);border-radius:var(--r);
  color:var(--muted);font-size:var(--t-sm);
}
.echo[data-filled]{color:var(--ink);font-weight:600;}

/* переход к следующему уроку */
.lesson-nav{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:center;margin-top:var(--s8);}

/* ============================================================
   КУКИ · плашка при первом заходе
   ============================================================ */
/* плашка по центру экрана, внутри одна строка: значок · текст · кнопки */
.cookies{
  position:fixed;left:50%;bottom:var(--pad);z-index:50;
  width:min(900px, calc(100% - var(--pad) * 2));
  background:var(--card);
  border:var(--b) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-lg);
  padding:var(--s4) var(--s5);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);
  transform:translate(-50%, calc(100% + var(--pad)));
  transition:transform .24s cubic-bezier(.16,.84,.28,1);
}
.cookies[data-show="1"]{transform:translate(-50%, 0);}
/* размер и форма как у значка в строке преимуществ: квадрат 36 */
.cookies .ic{
  flex:none;width:36px;height:36px;border-radius:var(--r);
  background:var(--pink);border:var(--b) solid var(--ink);
  display:grid;place-items:center;color:var(--ink);
}
.cookies .ic svg{width:18px;height:18px;}
.cookies p{font-size:var(--t-sm);margin:0;max-width:none;}
.cookies .btns{gap:var(--s2);flex-wrap:nowrap;}
.cookies .btn{width:auto;min-height:44px;padding:10px 18px;font-size:var(--t-sm);box-shadow:3px 3px 0 var(--ink);white-space:nowrap;}
.cookies .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
/* на телефоне строка не помещается: значок с текстом сверху, кнопки под ними */
@media (max-width:719px){
  .cookies{grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);}
  .cookies .btns{grid-column:1 / -1;}
  .cookies .btn{flex:1 1 auto;}
}
@media print{ .cookies{display:none !important;} }

/* ============================================================
   РАБОЧИЙ ЛИСТ · галочки списком, поля, панель прогресса, печать
   ============================================================ */
/* пункт чек-листа: в отличие от «запомнить меня» текст длинный
   и переносится, поэтому квадрат прижат к первой строке */
.check--list{display:flex;align-items:flex-start;gap:var(--s3);min-height:0;padding-block:var(--s2);line-height:1.5;}
.check--list .box{margin-top:2px;}
.check--list input:checked ~ .txt{color:var(--muted);text-decoration:line-through;}
.checklist{display:grid;gap:var(--s1);}

/* поле с подписью в строку — компактнее, чем .field */
.line{display:grid;gap:var(--s2);}
.line > label{font-size:var(--t-sm);font-weight:600;color:var(--ink);}
.line .input{min-height:48px;}
.lines{display:grid;gap:var(--s4);}

/* десятка тегов: по слоям, поля в ряд */
.taggrid{display:grid;gap:var(--s3);grid-template-columns:1fr;}
@media (min-width:560px){ .taggrid{grid-template-columns:repeat(3,1fr);} }
.taggrid .input{min-height:48px;}

/* панель листа: прогресс и служебные кнопки */
.sheetbar{
  position:sticky;top:70px;z-index:20;
  background:var(--band);
  border:var(--b) solid var(--ink);border-radius:var(--r);
  padding:var(--s4) var(--s5);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);
}
.sheetbar b{color:var(--ink);font-size:var(--t-sm);}
.sheetbar .btn{width:auto;min-height:44px;padding:10px 16px;font-size:var(--t-sm);box-shadow:3px 3px 0 var(--ink);}
.sheetbar .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* ------------------------------------------------------------
   ПЕЧАТЬ · лист распечатывают и заполняют ручкой
   ------------------------------------------------------------ */
@media print{
  .hdr,.ftr,.sheetbar,.noprint{display:none !important;}
  body{background:#fff;font-size:12pt;}
  section{padding-block:14pt;}
  .wrap{max-width:none;padding-inline:0;}
  .card,.plaque,.rowitem,details{box-shadow:none;break-inside:avoid;}
  /* пустые поля печатаются линейкой под запись */
  .input{min-height:34pt;border-width:1px;}
  /* галочка на бумаге рисуется рамкой, а заливку принтер съедает */
  .check .box{border-width:1px;}
  .check input:checked + .box::after{opacity:1;color:var(--ink);}
  .check--list input:checked ~ .txt{text-decoration:none;color:var(--ink);}
  a[href]::after{content:'';}
}

/* ============================================================
   ВХОД · чекбокс, пароль, служебные подписи
   ============================================================ */
/* «запомнить меня» и «забыл пароль» стоят одной строкой */
.field-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s5);
}

.check{
  display:inline-flex;align-items:center;gap:var(--s3);
  min-height:44px;cursor:pointer;
  font-size:var(--t-sm);color:var(--ink);
}
/* родной чекбокс уводим с глаз, но оставляем в фокусной цепочке */
.check input{position:absolute;width:1px;height:1px;opacity:0;}
.check .box{
  flex:none;width:22px;height:22px;
  border:var(--b) solid var(--ink);border-radius:4px;background:var(--card);
  display:grid;place-items:center;
}
.check .box::after{content:'✓';font-size:13px;font-weight:700;color:#fff;line-height:1;opacity:0;}
.check input:checked + .box{background:var(--accent);}
.check input:checked + .box::after{opacity:1;}
.check input:focus-visible + .box{outline:3px solid var(--accent);outline-offset:3px;}

/* поле пароля: кнопка показа стоит внутри рамки */
.pass{position:relative;display:block;}
.pass .input{padding-right:96px;}
.pass-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  background:none;border:0;border-radius:var(--r);
  padding:10px;min-height:40px;
  font-family:inherit;font-size:var(--t-xs);font-weight:600;
  color:var(--muted);cursor:pointer;
}
.pass-toggle:hover{color:var(--ink);}
.pass-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

.hint{font-size:var(--t-sm);color:var(--muted);}
.hint[hidden]{display:none;}
/* ошибка всей формы, а не отдельного поля */
.form-err{
  background:var(--pink);border:var(--b) solid var(--ink);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin-bottom:var(--s5);
}
.form-err:empty{display:none;}
/* «письмо ушло» и прочие спокойные ответы формы */
.form-ok{
  background:var(--green);border:var(--b) solid var(--ink);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin-bottom:var(--s5);
  font-size:var(--t-sm);color:var(--ink);
}
.form-ok:empty{display:none;}

/* подписи колонок над строками комбинаций */
.combo-head{margin-bottom:var(--s1);}
.combo-head span{font-size:var(--t-xs);font-weight:600;color:var(--muted);}
.combo-head .plus{visibility:hidden;}

/* ------------------------------------------------------------
   БРЕЙНШТОРМ · три отдельных столбца
   ------------------------------------------------------------ */
.tb-cols{display:grid;gap:var(--s4);grid-template-columns:1fr;}
@media (min-width:760px){ .tb-cols{grid-template-columns:repeat(3,1fr);gap:var(--s5);} }
.tb-col{
  display:grid;gap:var(--s2);align-content:start;
  background:var(--card);
  border:var(--b) solid var(--ink);border-radius:var(--r);
  padding:var(--s4);
}
.tb-col h4{margin:0;color:var(--ink);font-size:var(--t-sm);font-weight:800;}
.tb-hint{margin:0 0 var(--s2);font-size:var(--t-xs);color:var(--muted);max-width:none;}
.tb-line{display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:center;}
.tb-line .input{min-height:44px;padding:9px 12px;font-size:var(--t-sm);}
.tb-del{
  width:28px;height:28px;padding:0;line-height:1;
  background:var(--card);color:var(--muted);
  border:var(--b) solid var(--ink);border-radius:var(--r);
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
.tb-del:hover{background:var(--pink);color:var(--ink);}
.tb-add{width:auto;min-height:40px;margin-top:var(--s2);padding:9px 14px;font-size:var(--t-xs);box-shadow:3px 3px 0 var(--ink);}
.tb-add:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* ---------- синхронизация кабинета: сообщение, если ответ не сохранился ---------- */
.sync-note{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);z-index:50;
  max-width:min(92vw,520px);margin:0;padding:var(--s3) var(--s4);
  background:var(--card);color:var(--ink);border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);font-size:var(--t-sm);}
.sync-note[hidden]{display:none;}
.sync-note a{color:var(--accent-dark);}

/* блок цены: три колонки на десктопе (раньше считалось скриптом) */
@media (min-width:980px){ #pricegrid{grid-template-columns:1.1fr .95fr .95fr !important;} }