/* ═══════════════════════════════════════════════════════════════
   Тема «Блок» — яркий блочный
   Белое поле · чернила · вермильон, бирюза, янтарь
   Unbounded + Onest + JetBrains Mono
   ───────────────────────────────────────────────────────────────
   Язык формы: прямые углы, границы 2px, жёсткие тени со сдвигом,
   полноширинные полосы вместо центральной колонки.
   Перекрасить под клиента — блок «1. Токены».
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Токены ──────────────────────────────────────────────── */
:root{
  color-scheme: light;

  --paper:      #FFFFFF;
  --paper-2:    #F4F2ED;
  --ink:        #141210;
  --ink-2:      #3B3733;
  --ink-soft:   #6E6862;

  --accent:     #E8481F;   /* вермильон — основной */
  --on-accent:  #FFFFFF;
  --accent-2:   #1C7A6B;   /* бирюза */
  --on-accent-2:#FFFFFF;
  --accent-3:   #F2C14E;   /* янтарь */
  --on-accent-3:#141210;

  --line-soft:  #D8D4CC;
  --bw: 2px;               /* толщина жирной границы */

  --ok:   #1C6B4E;  --ok-bg:   #DFEFE7;
  --warn: #8A5A12;  --warn-bg: #F7EEDB;
  --crit: #B02A16;  --crit-bg: #F9E4DF;
  --info: #1F4FD8;  --info-bg: #E3E9FB;

  --wrap: 1280px;
  --pad: clamp(16px, 4vw, 52px);

  --font-display: "Unbounded", "Arial Black", Impact, sans-serif;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --ease: cubic-bezier(.2,.8,.3,1);
  --t: 180ms;

  /* токены, которые читает общий кабинет (engine/admin.css) */
  --ground:      var(--paper);
  --surface:     var(--paper);
  --surface-2:   var(--paper-2);
  --line:        var(--ink);
  --line-strong: var(--ink);
  /* кабинет тоже без скруглений */
  --r-s: 0px;
  --r-m: 0px;
  --r-btn: 0px;
  --shadow-s: 3px 3px 0 var(--ink);
  --shadow-m: 5px 5px 0 var(--ink);
  --shadow-l: -4px 0 0 var(--ink), -24px 0 60px rgba(0,0,0,.22);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#121110; --paper-2:#1C1A18;
    --ink:#F6F3ED; --ink-2:#D5CFC6; --ink-soft:#9A938A;
    --accent:#FF6A42; --on-accent:#1A0E09;
    --accent-2:#4ECFB6; --on-accent-2:#0B201C;
    --accent-3:#F7D177; --on-accent-3:#1A1408;
    --line-soft:#38342F;
    --ok:#6FD3A8;  --ok-bg:#153026;
    --warn:#E5B96B; --warn-bg:#332714;
    --crit:#FF8C72; --crit-bg:#3A1A14;
    --info:#8FB0FF; --info-bg:#1A2340;
    --shadow-l: -4px 0 0 var(--ink), -24px 0 60px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#121110; --paper-2:#1C1A18;
  --ink:#F6F3ED; --ink-2:#D5CFC6; --ink-soft:#9A938A;
  --accent:#FF6A42; --on-accent:#1A0E09;
  --accent-2:#4ECFB6; --on-accent-2:#0B201C;
  --accent-3:#F7D177; --on-accent-3:#1A1408;
  --line-soft:#38342F;
  --ok:#6FD3A8;  --ok-bg:#153026;
  --warn:#E5B96B; --warn-bg:#332714;
  --crit:#FF8C72; --crit-bg:#3A1A14;
  --info:#8FB0FF; --info-bg:#1A2340;
  --shadow-l: -4px 0 0 var(--ink), -24px 0 60px rgba(0,0,0,.6);
}

/* ── 2. База ────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:76px; }
body{
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size:16px; line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width:100%; }
[hidden]{ display:none !important; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.03em; text-wrap:balance; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
a{ color:inherit; text-decoration-thickness:2px; text-underline-offset:3px; }
button, input, textarea, select{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
::selection{ background: var(--accent); color: var(--on-accent); }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:99; background: var(--ink); color: var(--paper); padding:10px 16px; text-decoration:none; }
.skip:focus{ left:8px; }

.bleed{ padding-inline: var(--pad); }
.inner{ max-width: var(--wrap); margin-inline:auto; }

/* ── 3. Типографика ─────────────────────────────────────────── */
.eyebrow{
  display:inline-block; font-family: var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:5px 10px; border:var(--bw) solid var(--ink); background: var(--accent-3); color: var(--on-accent-3);
}
.sec__h{ font-size: clamp(28px, 4.6vw, 54px); }
.sec__lead{ max-width:58ch; color: var(--ink-2); font-size:17px; }
.dim{ color: var(--ink-soft); font-size:14px; }
.note{ font-size:14px; color: var(--ink-soft); max-width:60ch; }

/* ── 4. Кнопки ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border:var(--bw) solid var(--ink); border-radius:0;
  font-family: var(--font-ui); font-size:15px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap; background: var(--paper); color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.btn:hover{ transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active{ transform: translate(4px,4px); box-shadow:none; }
.btn--solid{ background: var(--accent); color: var(--on-accent); }
.btn--ghost{ background: transparent; }
.btn--sm{ min-height:38px; padding:0 14px; font-size:13.5px; box-shadow:3px 3px 0 var(--ink); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:2px 2px 0 var(--ink) !important; }

.iconbtn{
  width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto;
  border:var(--bw) solid var(--ink); background: var(--paper); color: var(--ink); cursor:pointer;
}
.iconbtn:hover{ background: var(--accent-3); color: var(--on-accent-3); }
.iconbtn__svg{ width:18px; height:18px; display:block; }

.chip{
  display:inline-flex; align-items:center; height:36px; padding:0 14px;
  border:var(--bw) solid var(--ink); background: var(--paper); color: var(--ink);
  font-size:14px; font-weight:500; cursor:pointer; transition: background var(--t) var(--ease);
}
.chip:hover{ background: var(--paper-2); }
.chip.is-on{ background: var(--ink); color: var(--paper); }

/* ── 5. Шапка ───────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:40;
  background: var(--paper); border-bottom: var(--bw) solid var(--ink);
}
.top__in{ display:flex; align-items:center; gap:16px; padding-block:11px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.logo__m{
  width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center;
  background: var(--accent); border:var(--bw) solid var(--ink);
}
.logo__m span{
  width:20px; height:8px; border-top:4px solid var(--on-accent);
  border-radius:50% 50% 0 0 / 100% 100% 0 0; transform: rotate(-6deg);
}
.logo__t{ display:flex; flex-direction:column; line-height:1; }
.logo__t b{ font-family: var(--font-display); font-size:19px; letter-spacing:-.02em; }
.logo__t i{ font-style:normal; font-family: var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); margin-top:4px; }

.nav{ display:flex; gap:2px; margin-left:auto; }
.nav a{ padding:9px 13px; text-decoration:none; font-size:14.5px; font-weight:500; }
.nav a:hover{ background: var(--accent-3); color: var(--on-accent-3); }
.top__act{ display:flex; align-items:center; gap:8px; }

.burger{ display:none; width:42px; height:42px; border:var(--bw) solid var(--ink); background: var(--paper); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.burger span{ width:17px; height:2px; background: var(--ink); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ── 6. Hero ────────────────────────────────────────────────── */
.hero{ border-bottom: var(--bw) solid var(--ink); }
.hero__in{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.hero__copy{ padding: clamp(28px,4vw,56px) clamp(20px,3vw,44px) clamp(28px,4vw,52px) var(--pad); border-right: var(--bw) solid var(--ink); display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.hero__h{ font-size: clamp(32px, 4.8vw, 62px); letter-spacing:-.045em; }
.hero__h em{ font-style:normal; color: var(--accent); }
.hero__sub{ max-width:44ch; font-size:17.5px; color: var(--ink-2); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__art{
  position:relative; background: var(--accent-3); display:grid; place-items:center; min-height:320px;
  padding: 30px var(--pad) 30px 30px; overflow:hidden;
}
.hero__brows{ display:flex; gap:clamp(10px,2vw,22px); align-items:center; --c: var(--ink); }
.hero__art .brow{ width: clamp(90px, 15vw, 170px); }
.hero__stamp{
  position:absolute; right: var(--pad); bottom:22px;
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--on-accent-3); opacity:.7;
}

.facts{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: var(--bw) solid var(--ink); }
.fact{ padding:16px clamp(14px,2vw,22px); border-right: var(--bw) solid var(--ink); display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:104px; }
.fact:last-child{ border-right:0; }
.fact:nth-child(2){ background: var(--paper-2); }
.fact dt{ font-family: var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); line-height:1.4; }
.fact dd{ display:flex; align-items:baseline; gap:5px; }
.fact dd b{ font-family: var(--font-display); font-size: clamp(24px,3vw,36px); font-weight:700; line-height:1; letter-spacing:-.04em; }
.fact dd span{ font-size:12px; color: var(--ink-soft); }

/* бегущая строка */
.ticker{ overflow:hidden; border-bottom: var(--bw) solid var(--ink); background: var(--accent-2); color: var(--on-accent-2); }
.ticker__in{ display:flex; width:max-content; animation: slide 34s linear infinite; }
.ticker__in span{
  font-family: var(--font-display); font-size:15px; font-weight:600; letter-spacing:-.01em;
  padding:11px 26px; white-space:nowrap; display:flex; align-items:center; gap:26px;
}
.ticker__in span::after{ content:"◆"; font-size:9px; opacity:.6; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ── 7. Секции ──────────────────────────────────────────────── */
.sec{ padding-block: clamp(40px,5.5vw,84px); border-bottom: var(--bw) solid var(--ink); }
.sec--flat{ padding-block:0; }
.sec--paper2{ background: var(--paper-2); }
.sec__head{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:34px; max-width:var(--wrap); margin-inline:auto; }

/* ── 8. Прайс с липкой врезкой ──────────────────────────────── */
.price{ display:grid; grid-template-columns: 300px minmax(0,1fr); gap:0; max-width:var(--wrap); margin-inline:auto; }
.price__rail{ position:sticky; top:84px; align-self:start; border:var(--bw) solid var(--ink); background: var(--accent); color: var(--on-accent); padding:22px; display:flex; flex-direction:column; gap:14px; }
.price__rail h3{ font-size:26px; }
.price__rail p{ font-size:14px; opacity:.92; }
.price__rail .btn{ box-shadow:3px 3px 0 var(--ink); }
.price__meta{ font-family: var(--font-mono); font-size:12px; display:flex; flex-direction:column; gap:5px; padding-top:12px; border-top:var(--bw) solid currentColor; }
.price__list{ border:var(--bw) solid var(--ink); border-left:0; }

/* строки прайса рисует движок */
.pgroup__h{
  font-family: var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  padding:10px 20px; background: var(--ink); color: var(--paper);
}
.prow{ display:grid; grid-template-columns: minmax(0,1fr) auto auto; gap:4px 20px; align-items:baseline; padding:16px 20px; border-bottom:1px solid var(--line-soft); }
.prow:last-child{ border-bottom:0; }
.prow:hover{ background: var(--accent-3); }
.prow:hover .prow__go{ color: var(--ink); }
.prow__n{ font-family: var(--font-display); font-size:17px; font-weight:600; letter-spacing:-.02em; }
.prow__d{ grid-column:1/2; font-size:13.5px; color: var(--ink-soft); max-width:56ch; }
.prow__t{ font-family: var(--font-mono); font-size:12.5px; color: var(--ink-soft); white-space:nowrap; font-variant-numeric: tabular-nums; }
.prow__p{ font-family: var(--font-display); font-size:19px; font-weight:700; white-space:nowrap; font-variant-numeric: tabular-nums; letter-spacing:-.03em; }
.prow__go{ grid-column:3/4; grid-row:2/3; justify-self:end; background:none; border:0; padding:0; cursor:pointer; font-family: var(--font-ui); font-size:13px; font-weight:700; color: var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ── 9. Палитра: свотчи — квадратные плитки ─────────────────── */
.pal{ display:grid; grid-template-columns: repeat(auto-fit, minmax(118px,1fr)); gap:0; max-width:var(--wrap); margin-inline:auto; border:var(--bw) solid var(--ink); }
.swatch{
  position:relative; padding:0; border:0; border-right:var(--bw) solid var(--ink); background:none; cursor:pointer;
  display:flex; flex-direction:column; text-align:left;
}
.swatch:last-child{ border-right:0; }
/* .tip — класс движка; в этой теме это не типс, а цветовое поле */
.swatch .tip{
  width:100%; aspect-ratio:1; border-radius:0; transform:none; box-shadow:none;
  background: var(--base); position:relative; overflow:hidden;
  transition: none;
}
.swatch .tip::before{ content:none; }
.swatch .tip::after{ content:none; }
.swatch__n{
  font-family: var(--font-mono); font-size:11px; padding:8px 10px;
  border-top:var(--bw) solid var(--ink); background: var(--paper); color: var(--ink);
}
.swatch:hover .swatch__n{ background: var(--accent-3); }
.swatch.is-on .swatch__n{ background: var(--ink); color: var(--paper); }
.swatch.is-on .tip::before{
  content:""; position:absolute; inset:8px; border:3px solid var(--paper); mix-blend-mode:difference;
}

.shadebar{ display:grid; grid-template-columns: 150px minmax(0,1fr) auto; gap:20px; align-items:center; max-width:var(--wrap); margin-inline:auto; margin-top:24px; border:var(--bw) solid var(--ink); padding:18px 20px; }
.shadebar__chip{ height:74px; background: var(--accent); border:var(--bw) solid var(--ink); }
.shadebar__num{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); }
.shadebar__name{ font-size:26px; margin:2px 0 3px; }
.shadebar__fin{ font-size:14px; color: var(--ink-soft); }

/* ── 10. Портфолио: крупные плитки (своя отрисовка в config) ── */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; max-width:var(--wrap); margin-inline:auto; }
.tiles{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:0; max-width:var(--wrap); margin-inline:auto; border-top:var(--bw) solid var(--ink); border-left:var(--bw) solid var(--ink); }
.tile{ grid-column: span 1; display:flex; flex-direction:column; border-right:var(--bw) solid var(--ink); border-bottom:var(--bw) solid var(--ink); background: var(--paper); }
.tile--s2{ grid-column: span 2; }
.tile__art{
  background: var(--bg); --c: var(--c);
  min-height:190px; flex:1; display:flex; align-items:center; justify-content:center; gap:14px;
  border-bottom:var(--bw) solid var(--ink); padding:22px;
}
.tile__meta{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; }
.tile__tag{ font-family: var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); }
.tile__t{ font-size:18px; font-weight:600; letter-spacing:-.02em; }
.tile__d{ font-size:13.5px; color: var(--ink-soft); }

/* рисованная дуга брови и линия ресниц */
/* дуга рисуется верхней границей по эллипсу; вертикальный радиус держим
   умеренным (78%), иначе хвосты истончаются до пунктира */
.brow{
  width: clamp(46px, 30%, 84px); aspect-ratio:3.1/1; flex:0 0 auto;
  border-top: 10px solid var(--c);
  border-radius: 50% 50% 0 0 / 78% 78% 0 0;
  clip-path: inset(0 3% 0 3%);
  transform: rotate(-7deg);
}
.brow--r{ transform: rotate(7deg) scaleX(-1); }
.lash{
  position:relative; width: clamp(80px, 60%, 150px); aspect-ratio:5/2; flex:0 0 auto;
  border-bottom: 4px solid var(--c);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.lash::before{
  content:""; position:absolute; left:4%; right:4%; bottom:0; height:78%;
  background: repeating-linear-gradient(76deg, var(--c) 0 3px, transparent 3px 12px);
  -webkit-mask-image: radial-gradient(130% 105% at 50% 118%, #000 52%, transparent 70%);
  mask-image: radial-gradient(130% 105% at 50% 118%, #000 52%, transparent 70%);
}

/* ── 11. Мастер ─────────────────────────────────────────────── */
.about{ display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); max-width:var(--wrap); margin-inline:auto; border:var(--bw) solid var(--ink); }
.about__art{ background: var(--accent-2); border-right:var(--bw) solid var(--ink); display:grid; place-items:center; padding:40px 24px; min-height:280px; }
.about__mono{ font-family: var(--font-display); font-size: clamp(56px,9vw,120px); font-weight:700; color: var(--on-accent-2); letter-spacing:-.06em; }
.about__copy{ padding: clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:16px; }
.about__copy p{ color: var(--ink-2); max-width:60ch; }
.creds{ display:flex; flex-direction:column; }
.creds li{ display:grid; grid-template-columns:70px 1fr; gap:14px; font-size:14px; color: var(--ink-soft); padding:10px 0; border-top:1px solid var(--line-soft); }
.creds b{ font-family: var(--font-mono); font-size:12px; color: var(--accent); }

/* ── 12. Отзывы ─────────────────────────────────────────────── */
.quotes{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); max-width:var(--wrap); margin-inline:auto; border-left:var(--bw) solid var(--ink); border-top:var(--bw) solid var(--ink); }
.quote{ margin:0; padding:24px; display:flex; flex-direction:column; gap:16px; border-right:var(--bw) solid var(--ink); border-bottom:var(--bw) solid var(--ink); }
.quote:nth-child(2){ background: var(--accent-3); color: var(--on-accent-3); }
.quote:nth-child(2) .quote__who span{ color: inherit; opacity:.7; }
.quote blockquote{ margin:0; font-family: var(--font-display); font-size:17px; font-weight:500; letter-spacing:-.02em; line-height:1.3; flex:1; }
.quote__stars{ font-family: var(--font-mono); font-size:13px; letter-spacing:.2em; }
.quote__who{ display:flex; flex-direction:column; gap:1px; padding-top:12px; border-top:var(--bw) solid currentColor; }
.quote__who b{ font-size:14px; }
.quote__who span{ font-size:12.5px; color: var(--ink-soft); }

/* ── 13. FAQ ────────────────────────────────────────────────── */
.faq{ max-width:var(--wrap); margin-inline:auto; border-top:var(--bw) solid var(--ink); }
.qa{ border-bottom:var(--bw) solid var(--ink); }
.qa summary{ cursor:pointer; list-style:none; padding:18px 44px 18px 0; position:relative; font-family: var(--font-display); font-size:17px; font-weight:600; letter-spacing:-.02em; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center;
  border:var(--bw) solid var(--ink); font-family: var(--font-ui); font-size:17px; line-height:1;
}
.qa[open] summary::after{ content:"–"; background: var(--accent); color: var(--on-accent); }
.qa p{ padding:0 12% 20px 0; color: var(--ink-soft); font-size:15px; max-width:70ch; }

/* ── 14. Контакты ───────────────────────────────────────────── */
.contacts{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); max-width:var(--wrap); margin-inline:auto; border-left:var(--bw) solid var(--ink); border-top:var(--bw) solid var(--ink); }
.contacts div{ padding:22px; border-right:var(--bw) solid var(--ink); border-bottom:var(--bw) solid var(--ink); }
.contacts dt{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:7px; }
.contacts dd{ font-size:16px; }
.contacts div:nth-child(4){ background: var(--accent); color: var(--on-accent); }
.contacts div:nth-child(4) dt{ color: inherit; opacity:.75; }

/* ── 15. Мастер записи ──────────────────────────────────────── */
.wizard{ max-width:var(--wrap); margin-inline:auto; border:var(--bw) solid var(--ink); background: var(--paper); }
.steps{ display:grid; grid-template-columns: repeat(4,1fr); border-bottom:var(--bw) solid var(--ink); }
.step{ display:flex; align-items:center; gap:10px; padding:14px 16px; font-size:13.5px; font-weight:500; color: var(--ink-soft); border-right:var(--bw) solid var(--ink); }
.step:last-child{ border-right:0; }
.step span{ width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; font-family: var(--font-mono); font-size:12px; border:var(--bw) solid currentColor; }
.step.is-on{ color: var(--ink); background: var(--accent-3); }
.step.is-on span{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.step.is-done{ color: var(--ink); }
.step.is-done span{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

.wizard__body{ padding: clamp(18px,2.6vw,28px); min-height:340px; }
.pane{ display:none; }
.pane.is-on{ display:block; }

.pickgrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(258px,1fr)); gap:0; border-top:var(--bw) solid var(--ink); border-left:var(--bw) solid var(--ink); }
.pick{
  text-align:left; cursor:pointer; padding:16px 18px; background: var(--paper);
  border:0; border-right:var(--bw) solid var(--ink); border-bottom:var(--bw) solid var(--ink);
  display:flex; flex-direction:column; gap:6px; transition: background var(--t) var(--ease);
}
.pick:hover{ background: var(--paper-2); }
.pick.is-on{ background: var(--accent-3); color: var(--on-accent-3); }
.pick.is-on .pick__d, .pick.is-on .pick__f span{ color: inherit; opacity:.8; }
.pick__t{ font-family: var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.02em; }
.pick__d{ font-size:13px; color: var(--ink-soft); }
.pick__f{ display:flex; gap:14px; margin-top:4px; font-family: var(--font-mono); font-size:12.5px; font-variant-numeric: tabular-nums; }
.pick__f b{ font-weight:700; }

.whenwrap{ display:grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: clamp(18px,3vw,34px); }
.cal__bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.cal__m{ font-family: var(--font-display); font-size:18px; font-weight:600; text-transform:capitalize; letter-spacing:-.02em; }
.cal__nav{ display:flex; gap:6px; }
.cal__nav button{ width:34px; height:34px; border:var(--bw) solid var(--ink); background: var(--paper); cursor:pointer; line-height:1; }
.cal__nav button:hover:not([disabled]){ background: var(--accent-3); }
.cal__nav button[disabled]{ opacity:.3; cursor:not-allowed; }
.cal__dow, .cal__grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:3px; }
.cal__dow span{ text-align:center; font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); padding-bottom:6px; }
.cal__d{
  aspect-ratio:1; border:var(--bw) solid var(--ink); background: var(--paper); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family: var(--font-mono); font-size:13px; font-variant-numeric: tabular-nums; color: var(--ink);
  transition: background var(--t) var(--ease);
}
.cal__d:hover:not([disabled]){ background: var(--accent-3); }
.cal__d[disabled]{ border-color: var(--line-soft); color: var(--line-soft); cursor:not-allowed; background:transparent; }
.cal__d.is-empty{ border:0; cursor:default; background:transparent; }
.cal__d.is-today{ background: var(--paper-2); }
.cal__d.is-on{ background: var(--accent); color: var(--on-accent); }
.cal__dot{ width:5px; height:5px; background: var(--accent); }
.cal__d.is-on .cal__dot{ background: var(--on-accent); }
.cal__d.is-full .cal__dot{ background: var(--ink-soft); }

.slots__head h3{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.slots__hint{ font-size:13.5px; color: var(--ink-soft); margin-top:5px; }
.slots__list{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.slot{
  min-width:78px; height:42px; padding:0 12px; cursor:pointer;
  border:var(--bw) solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size:13.5px; font-variant-numeric: tabular-nums;
  transition: background var(--t) var(--ease);
}
.slot:hover{ background: var(--accent-3); }
.slot.is-on{ background: var(--accent); color: var(--on-accent); }
.slot[disabled]{ border-color: var(--line-soft); color: var(--line-soft); cursor:not-allowed; text-decoration: line-through; }
.slots__empty{ padding:18px; border:var(--bw) dashed var(--ink); color: var(--ink-soft); font-size:14px; max-width:48ch; }

.form{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; max-width:720px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--wide{ grid-column:1/-1; }
.field > label{ font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }
.req{ color: var(--accent); }
.field input[type="text"], .field input[type="tel"], .field textarea{
  width:100%; padding:12px 14px; background: var(--paper); color: var(--ink);
  border:var(--bw) solid var(--ink); border-radius:0; font-size:15px;
}
.field input:focus, .field textarea:focus{ background: var(--paper-2); }
.field textarea{ resize:vertical; font-family: var(--font-ui); }
.field.is-bad input, .field.is-bad textarea{ border-color: var(--crit); background: var(--crit-bg); }
.hint{ font-size:12.5px; color: var(--ink-soft); }
.err{ font-size:12.5px; color: var(--crit); font-weight:600; }
.form__err{ grid-column:1/-1; padding:12px 16px; background: var(--crit-bg); color: var(--crit); font-size:14px; font-weight:600; border:var(--bw) solid var(--crit); }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color: var(--ink-2); cursor:pointer; text-transform:none; letter-spacing:0; }
.check input{ margin-top:2px; width:18px; height:18px; accent-color: var(--accent); }

.confirm{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,280px); gap:24px; }
.summary{ display:flex; flex-direction:column; border-top:var(--bw) solid var(--ink); }
.summary__row{ display:grid; grid-template-columns:140px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.summary__row dt{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); padding-top:3px; }
.summary__row dd{ font-size:16px; }
.summary__total{ display:flex; align-items:baseline; justify-content:space-between; padding-top:16px; }
.summary__total b{ font-family: var(--font-display); font-size:32px; font-weight:700; letter-spacing:-.04em; font-variant-numeric: tabular-nums; }
.rules{ padding:20px; background: var(--accent-2); color: var(--on-accent-2); }
.rules h4{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; opacity:.85; }
.rules li{ font-size:13.5px; padding-left:18px; position:relative; margin-bottom:9px; }
.rules li::before{ content:"→"; position:absolute; left:0; top:0; font-family: var(--font-mono); font-size:12px; }

.done{ grid-column:1/-1; text-align:center; padding:26px 0 8px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.done__mark{ width:60px; height:60px; display:grid; place-items:center; background: var(--accent); color: var(--on-accent); border:var(--bw) solid var(--ink); font-size:28px; }
.done h3{ font-size: clamp(26px,4vw,38px); }
.done p{ color: var(--ink-soft); max-width:48ch; }
.done__code{ font-family: var(--font-mono); font-size:16px; letter-spacing:.18em; padding:10px 20px; border:var(--bw) solid var(--ink); background: var(--accent-3); color: var(--on-accent-3); }

.wizard__foot{ display:flex; align-items:center; gap:16px; padding:14px clamp(18px,2.6vw,28px); border-top:var(--bw) solid var(--ink); background: var(--paper-2); }
.wizard__state{ flex:1; font-size:13.5px; color: var(--ink-soft); text-align:center; }

/* ── 16. Подвал ─────────────────────────────────────────────── */
.foot{ background: var(--ink); color: var(--paper); }
.foot__in{ max-width:var(--wrap); margin-inline:auto; padding-block:36px 40px; display:grid; grid-template-columns:1fr auto; gap:20px 40px; align-items:center; }
.foot .logo__m{ background: var(--accent); border-color: var(--paper); }
.foot .logo__t i{ color: rgba(255,255,255,.55); }
.foot__nav{ display:flex; flex-wrap:wrap; gap:18px; }
.foot__nav a{ font-size:14px; opacity:.85; text-decoration:none; }
.foot__nav a:hover{ opacity:1; color: var(--accent-3); }
.foot__legal{ grid-column:1/-1; font-size:12px; opacity:.5; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); }

.fab{ position:fixed; right:14px; bottom:14px; z-index:35; display:none; background: var(--accent); color: var(--on-accent); padding:14px 20px; text-decoration:none; font-size:15px; font-weight:700; border:var(--bw) solid var(--ink); box-shadow:4px 4px 0 var(--ink); }

/* ── 17. Варианты блоков (переключаются конструктором) ──────── */
[data-variant="poster"] .hero__in{ grid-template-columns:1fr; }
[data-variant="poster"] .hero__copy{
  border-right:0; border-bottom:var(--bw) solid var(--ink);
  align-items:center; text-align:center; padding-inline: var(--pad);
}
[data-variant="poster"] .hero__sub{ max-width:56ch; }
[data-variant="poster"] .hero__art{ min-height:190px; }

[data-variant="plain"] .price{ grid-template-columns:1fr; }
[data-variant="plain"] .price__rail{ position:static; }
[data-variant="plain"] .price__list{ border-left:var(--bw) solid var(--ink); }

[data-variant="even"] .tile--s2{ grid-column: span 1; }
[data-variant="even"] .tiles{ grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ── 18. Адаптив ────────────────────────────────────────────── */
@media (max-width: 1080px){
  .price{ grid-template-columns:1fr; }
  .price__rail{ position:static; }
  .price__list{ border-left:var(--bw) solid var(--ink); border-top:0; }
  .tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tile--s2{ grid-column: span 2; }
  .quotes, .contacts{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .nav{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0;
    background: var(--paper); border-bottom:var(--bw) solid var(--ink); display:none;
    padding: 6px var(--pad) 14px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:12px 10px; border-bottom:1px solid var(--line-soft); }
  .burger{ display:flex; }
  .top__act .btn{ display:none; }
  .hero__in{ grid-template-columns:1fr; }
  .hero__copy{ border-right:0; border-bottom:var(--bw) solid var(--ink); }
  .hero__art{ min-height:220px; }
  .facts{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fact:nth-child(2){ border-right:0; }
  .fact:nth-child(1), .fact:nth-child(2){ border-bottom:var(--bw) solid var(--ink); }
  .about{ grid-template-columns:1fr; }
  .about__art{ border-right:0; border-bottom:var(--bw) solid var(--ink); min-height:180px; }
  .whenwrap{ grid-template-columns:1fr; }
  .confirm{ grid-template-columns:1fr; }
  .fab{ display:block; }
}
@media (max-width: 680px){
  .tiles{ grid-template-columns:1fr; }
  .tile--s2{ grid-column: span 1; }
  .quotes, .contacts{ grid-template-columns:1fr; }
  .steps{ grid-template-columns: repeat(2,1fr); }
  .step{ border-bottom:var(--bw) solid var(--ink); }
  .form{ grid-template-columns:1fr; }
  .prow{ grid-template-columns: minmax(0,1fr) auto; }
  .prow__t{ grid-column:1/2; }
  .prow__p{ grid-column:2/3; grid-row:1/2; }
  .prow__go{ grid-column:2/3; grid-row:3/4; }
  .shadebar{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; }
}

/* ── 18. Уважение к настройкам движения ─────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
  .ticker__in{ animation:none; transform:none; }
}