/* Hallmark · genre: modern-minimal → studied-DNA · macrostructure: Workbench
 * H6 photographic-fold hero knobs: image=full-bleed, caption=lower-left, text=overlaid
 * F4 step-sequence knobs: numbering=01/02, layout=vertical stack, connector=none
 * F3 spec-sheet knobs: columns=3, rules=every row, numbers=tabular
 * T4 stat-strip knobs: 4-up, number weight=display, qualifier=under
 * C4 sticky-bar knobs: reveal=after fold, anchored=viewport bottom
 * nav: N9 edge-aligned minimal · footer: Ft5 statement · enrichment: photography (real files in img/)
 * theme: фирменная палитра Champions Choice (с сертификата замера) · система в design.md
 * paper: oklch(22.3% 0.051 259.4) #0c1b33 · accent: #d51e2c заливки / #f2626a текст
 * display: Oswald · body: IBM Plex Sans · axes: dark / display-condensed-bold / warm
 * pre-emit critique: P5 H5 E4 S5 R4 V5 · design-system: tokens.css
 */

/* Та же защита, что и в приложении: длинные русские слова должны переноситься
   внутри сжимаемых колонок, иначе текст вылезает за экран. */
.shotcard__in > *, .step > *, .src li > *, .price > *, .strip__in > *{min-width:0}
.shotcard__in h3,.step h3,.src__what,.spec td b,.strip__k,.sitefoot__say,.qa summary{
  overflow-wrap:anywhere;min-width:0;
}

/* ================= НАВИГАЦИЯ (N9) ================= */
.sitenav{
  position:absolute;inset-inline:0;top:0;z-index:var(--z-nav);
  padding-top:env(safe-area-inset-top);
}
.sitenav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:4.5rem}
/* Полное имя «Champions Choice Performance» длинное: с nowrap оно выталкивало
   кнопку из шапки и давало горизонтальную прокрутку на 375px. Разрешаем перенос
   между «Choice» и «Performance» — получается нормальный двухстрочный знак. */
.sitenav__mark,.sitefoot__mark{
  font-family:var(--font-wordmark);font-size:var(--text-md);font-weight:400;
  letter-spacing:0.02em;text-transform:uppercase;line-height:1.1;
}
@media (max-width:30rem){
  .sitenav__mark,.sitefoot__mark{font-size:var(--text-sm);letter-spacing:0.01em}
}
/* Плашка «PERFORMANCE» — правило в app.css, здесь только подвал */
.sitefoot__mark span{
  display:inline-block;font-family:var(--font-display);font-size:var(--text-3xs);font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--color-accent-ink);
  background:var(--color-accent);padding:0.22rem 0.5rem 0.18rem;border-radius:var(--radius-xs);line-height:1;
}
.sitenav__mark span{
  display:inline-block;font-family:var(--font-display);font-size:var(--text-3xs);font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--color-accent-ink);
  background:var(--color-accent);padding:0.22rem 0.5rem 0.18rem;border-radius:var(--radius-xs);line-height:1;
}
/* Знак агентства. Слева от имени — та же связка, что в шапке сертификата. */
.sitenav__logo{width:auto;height:3rem;object-fit:contain;display:block;flex:0 0 auto;
  filter:drop-shadow(0 2px 8px oklch(22.3% 0.051 259.4 / .8))}
.sitefoot__logo{width:auto;height:4.5rem;object-fit:contain;display:block;margin-bottom:var(--space-2xs)}
.sitenav__in{gap:var(--space-2xs)}
.sitenav__in > .sitenav__logo + .sitenav__mark{margin-inline-end:auto}
/* Клина в шапке продажника нет намеренно: правый угол занимает красная кнопка
   «Открыть», и клин под ней сливался бы с ней в одно красное пятно.
   Фирменность здесь несёт знак слева. */

/* Поверх фотографии красная подпись не читается — белая, с красной засечкой */
.hero .kicker--accent{
  color:var(--color-ink);display:flex;align-items:center;gap:0.5rem;
  text-shadow:0 1px 5px oklch(22.3% 0.051 259.4 / .85);
}
.hero .kicker--accent::before{
  content:"";width:1.1rem;height:var(--rule-thick);background:var(--color-accent);flex:0 0 1.1rem;
}

/* ================= ПЕРВЫЙ ЭКРАН (H6) ================= */
.hero{position:relative;isolation:isolate;min-height:32rem;display:grid;align-items:end}
.hero__img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:saturate(.85) contrast(1.05);
}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim-strong)}
.hero__in{padding-block:var(--space-2xl) var(--space-xl)}
.hero h1{font-size:var(--text-display);max-width:14ch}
.hero__lede{
  margin-top:var(--space-sm);max-width:44ch;
  font-size:var(--text-sm);color:var(--color-ink-2);line-height:1.65;
}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin-top:var(--space-md)}
.hero__meta{margin-top:var(--space-sm)}

@media (prefers-reduced-motion:no-preference){
  .hero__in > *{animation:rise 520ms var(--ease-out) backwards}
  .hero__in > *:nth-child(2){animation-delay:60ms}
  .hero__in > *:nth-child(3){animation-delay:110ms}
  .hero__in > *:nth-child(4){animation-delay:150ms}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================= СТРОКА ПОКАЗАТЕЛЕЙ ================= */
.strip{background:var(--color-paper-2)}
.strip__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-block:var(--space-md);gap:var(--space-md) var(--space-sm)}
.strip__v{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:1;letter-spacing:0.02em;font-variant-numeric:tabular-nums}
.strip__k{display:block;margin-top:var(--space-3xs);font-size:var(--text-2xs);line-height:1.45;color:var(--color-muted)}

/* ================= СЕКЦИИ ================= */
.sect{padding-block:var(--space-xl)}
.sect--tint{background:var(--color-paper-2)}
.sect__h{font-size:var(--text-xl);max-width:20ch}
.sect__lede{margin-top:var(--space-sm);max-width:56ch;color:var(--color-ink-2);font-size:var(--text-xs);line-height:1.7}

/* ---- шаги ---- */
.steps{display:grid;gap:var(--space-md);margin-top:var(--space-lg)}
.step{border-top:var(--rule-thick) solid var(--color-accent);padding-top:var(--space-xs)}
.step__n{display:block;margin-bottom:var(--space-3xs)}
.step h3{font-size:var(--text-md);margin-bottom:var(--space-2xs)}
.step p{font-size:var(--text-xs);line-height:1.7;color:var(--color-ink-2)}

/* ---- карточки-показы ---- */
.shots{display:grid;gap:var(--space-sm);margin-top:var(--space-lg)}
.shotcard{position:relative;border-radius:var(--radius-md);overflow:hidden;isolation:isolate}
.shotcard img{width:100%;height:14rem;object-fit:cover;filter:saturate(.85)}
.shotcard::after{content:"";position:absolute;inset:0;background:var(--scrim-soft)}
.shotcard__in{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:var(--space-sm)}
.shotcard__in h3{font-size:var(--text-md)}
.shotcard__in p{font-size:var(--text-2xs);color:var(--color-ink-2);margin-top:var(--space-3xs);line-height:1.5}

/* ---- спек-лист ---- */
.spec{margin-top:var(--space-lg)}
.spec td{font-size:var(--text-xs);line-height:1.6;color:var(--color-ink-2)}
.spec td:first-child{white-space:nowrap;color:var(--color-ink)}
.spec td b{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:0.03em}
.spec .num{font-family:var(--font-display);font-variant-numeric:tabular-nums;color:var(--color-accent-text);letter-spacing:0.04em}

/* ---- источники ---- */
.src{margin-top:var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule)}
.src li{display:grid;gap:var(--space-3xs);padding-block:var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-rule)}
.src__what{font-family:var(--font-display);font-weight:600;font-size:var(--text-md);text-transform:uppercase;letter-spacing:0.03em}
.src__src{font-size:var(--text-xs);line-height:1.65;color:var(--color-ink-2)}
.src + .note{margin-top:var(--space-lg)}

/* ---- цена ---- */
.price{margin-top:var(--space-lg);padding:var(--space-md);background:var(--color-paper);border-radius:var(--radius-md)}
.sect--tint .price{background:var(--color-paper)}
/* два тарифа: годовой ведёт, месячный рядом. На узком — в одну колонку. */
.tariffs{display:grid;gap:var(--space-sm);grid-template-columns:minmax(0,1fr)}
@media (min-width:40rem){.tariffs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tariff{
  min-width:0;padding:var(--space-md);
  background:var(--color-paper-2);
  border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-md);
}
.tariff--lead{border-color:var(--color-accent)}
.tariff__v{
  font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);
  line-height:1.05;letter-spacing:0.02em;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;min-width:0;
}
.tariff__k{
  margin-top:var(--space-3xs);font-size:var(--text-xs);line-height:1.5;
  text-transform:uppercase;letter-spacing:0.12em;color:var(--color-muted);
  overflow-wrap:anywhere;
}
.tariff--lead .tariff__k{color:var(--color-accent-text)}
.tariff__note{
  margin-top:var(--space-2xs);font-size:var(--text-xs);line-height:1.6;
  color:var(--color-ink-2);overflow-wrap:anywhere;
}
.price__list{margin-block:var(--space-md);font-size:var(--text-xs);line-height:1.6;color:var(--color-ink-2)}

/* ---- вопросы ---- */
.faq{margin-top:var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule)}
.qa{border-bottom:var(--rule-hair) solid var(--color-rule)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  min-height:3.5rem;padding-block:var(--space-2xs);
  font-family:var(--font-display);font-weight:600;font-size:var(--text-md);
  text-transform:uppercase;letter-spacing:0.02em;line-height:1.15;
  cursor:pointer;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:0.55rem;height:0.55rem;
  border-inline-end:2px solid var(--color-muted);border-block-end:2px solid var(--color-muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-short) var(--ease-out);
}
.qa[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.qa summary:hover{color:var(--color-accent-text)}
.qa p{padding-bottom:var(--space-sm);font-size:var(--text-xs);line-height:1.7;color:var(--color-ink-2);max-width:62ch}

/* ================= ПОДВАЛ (Ft5) ================= */
.sitefoot{background:var(--color-paper-2);padding-block:var(--space-xl);padding-bottom:calc(var(--space-xl) + 4.5rem)}
.sitefoot__say{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--text-xl);line-height:1.05;letter-spacing:0.01em;text-transform:uppercase;
  max-width:22ch;text-wrap:balance;
}
.sitefoot__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-md);
  margin-top:var(--space-lg);padding-top:var(--space-sm);
  border-top:var(--rule-hair) solid var(--color-rule);
}

/* ================= ЛИПКАЯ ПОЛОСА (C4) ================= */
.stickycta{
  position:fixed;inset-inline:0;bottom:0;z-index:var(--z-sticky);
  background:var(--color-paper);border-top:var(--rule-hair) solid var(--color-rule);
  padding-bottom:env(safe-area-inset-bottom);
}
.stickycta[hidden]{display:none}
.stickycta__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:4rem}
.stickycta__t{font-size:var(--text-xs);line-height:1.35;color:var(--color-ink-2);min-width:0}

/* ================= ПЛАНШЕТ ≥40rem ================= */
@media (min-width:40rem){
  .hero{min-height:38rem}
  .hero__in{padding-block:var(--space-3xl) var(--space-2xl)}
  .strip__in{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:var(--space-lg)}
  .strip__v{font-size:var(--text-2xl)}
  .sect{padding-block:var(--space-2xl)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg) var(--space-md)}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* .price больше НЕ сетка: две колонки теперь несут сами тарифы */
  .price{padding:var(--space-lg)}
  .price .btn{width:auto;min-width:16rem}
  .stickycta__t{font-size:var(--text-sm)}
  .sitefoot__say{font-size:var(--text-2xl)}
}

/* ================= ДЕСКТОП ≥60rem ================= */
@media (min-width:60rem){
  .hero{min-height:42rem}
  .hero h1{font-size:clamp(3.25rem,6vw,4.75rem)}
  /* На широком экране текст стоит слева, а снимок под ним светлый и пёстрый.
     Нижнего затемнения не хватает — добавляем боковое, слева направо. */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,
      oklch(22.3% 0.051 259.4 / .94) 0%,
      oklch(22.3% 0.051 259.4 / .82) 34%,
      oklch(22.3% 0.051 259.4 / .35) 62%,
      transparent 85%);
  }
  .hero__lede{font-size:var(--text-base);max-width:40ch}
  .sitenav__logo{height:3.75rem}
  .sitefoot__logo{height:5.5rem}
  /* пять амплуа одной строкой — 4+1 читается как ошибка вёрстки */
  .shots{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2xs)}
  .shotcard img{height:16rem}
  .src li{grid-template-columns:14rem minmax(0,1fr);gap:var(--space-md);align-items:baseline}
}

/* ================= ПЕЧАТЬ ================= */
@media print{
  html{color-scheme:light}
  body{background:var(--print-paper);color:var(--print-ink)}
  .sitenav,.stickycta,.hero__acts,.hero__img{display:none!important}
  .hero::before{display:none}
  .hero{min-height:0}
  .sitefoot,.sect--tint,.strip,.price{background:transparent}
  .qa p{display:block}
  .src li,.qa,.spec td,.spec th{border-color:var(--print-rule)}
  .muted,.strip__k,.src__src,.step p{color:var(--print-ink)}
}