/* ============================================================
   CUTBENCH INNER PAGES — CM-20261027-03 phase B
   Landing, comparison, game, blog, updates, about and 404 pages.
   Loaded AFTER each page's own inline <style>, so these rules set
   the system those copies drifted from: one heading hierarchy,
   one reading size, one rhythm, nothing a buyer reads under 12 px.
   The homepage does not load this file.
   ============================================================ */

/* ── Headings: H1 above H2 (was a 46 px H1 under 64 px H2s) ── */
.hero h1,
.hero__copy h1,
.article h1,
.sect .wrap > h1 {
  font-family: var(--cb-font-mono);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--cb-ink-1);
  max-width: 18em;
  text-wrap: pretty;   /* balance left «Clipping» alone on the first line */
}
.hero__copy h1 { font-size: clamp(30px, 3.4vw, 48px); }   /* the two-column landing hero */
/* one glow on the whole site: the homepage's typewriter word; here the amber words are still */
.hero h1 em { text-shadow: none; animation: none; }
.sect h2,
.article h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cb-ink-1);
  max-width: 24em;
  text-wrap: balance;
}
.article h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin-top: var(--cb-s-16); }
.upd h2 { margin-top: var(--cb-s-2); }   /* the updates list: a date line, then its headline */
.article h2 a { color: inherit; }

/* ── Rhythm: H2 → lede 24, lede → lede 16, → the next block 48 ── */
.sect h2 + .lead,
.sect h2 + p,
.article h2 + p { margin-top: var(--cb-s-6); }
.lead + .lead { margin-top: var(--cb-s-4); }
.wedge,
.vs-wrap,
.faq-list,
.steps,
.sect h2 + table,
.sect h2 + .compare { margin-top: var(--cb-s-12); }
.honesty { margin-top: var(--cb-s-8); }
.sect .wrap > :not(.sect__num):not(.breadcrumb) + h2 { margin-top: var(--cb-s-16); }

/* ── Reading text: ledes and articles 16 / 1.7; lists, callouts and FAQ answers 15 / 1.65
   (they were 13–14.5 px at up to 100 characters a line); lines stay under ~85 characters ── */
.lead,
.article p,
.article ul {
  font-size: 16px;
  line-height: 1.7;
}
.wedge li,
.honesty,
.faq-q p {
  font-size: 15px;
  line-height: 1.65;
}
.lead,
.wedge,
.honesty,
.article p,
.article ul { max-width: 760px; }
.article { max-width: 760px; }
.article p strong, .article p b, .article ul b { color: var(--cb-ink-1); }
.vs-note { font-size: 14px; line-height: 1.6; max-width: 66ch; margin-left: auto; margin-right: auto; }

/* ── Small print floor: 12 px ── */
.breadcrumb { font-size: 12px; letter-spacing: 0.04em; }
.note-line { font-size: 13px; line-height: 1.7; }
.hero__shot-bar .t { font-size: 12px; }
.post-meta { font-size: 12px; }
.nf__links { font-size: 12px; }
.nf__links a { color: var(--cb-ink-2); }
.nf__code { text-shadow: none; }

/* ── Quieter accents: the bullets are amber squares, not glows ── */
.wedge li::before { box-shadow: none; top: 11px; }

/* ── Phones ── */
@media (max-width: 768px) {
  /* mobile.css gives every h2 clamp(28px, 5vw, 48px) !important; here H1 stays above H2 */
  .hero h1,
  .hero__copy h1,
  .article h1,
  .sect .wrap > h1 { font-size: clamp(30px, 7.5vw, 44px); }
  .sect h2 { font-size: clamp(24px, 5.5vw, 32px) !important; }
  .article h2 { font-size: clamp(20px, 4.5vw, 24px) !important; }
  .sect .wrap > :not(.sect__num):not(.breadcrumb) + h2 { margin-top: var(--cb-s-12); }
  .sect h2 + .lead,
  .sect h2 + p,
  .article h2 + p { margin-top: var(--cb-s-4); }
  .wedge,
  .vs-wrap,
  .faq-list,
  .steps,
  .sect h2 + table,
  .sect h2 + .compare { margin-top: var(--cb-s-8); }
  .honesty { margin-top: var(--cb-s-6); }
  .article h2 { margin-top: var(--cb-s-12); }
  .upd h2 { margin-top: var(--cb-s-2); }
}

/* ── CM-20261028-06 round 10: the buy band, the same on every inner page (operator: «секция #get каждой
   внутренней страницы становится полосой с картинкой (рыцарь и дракон, искры), в ней текст страницы, живая цена
   со скидкой и кнопка; отзыв и факты из «Before you buy» переезжают туда же, отдельный блок в футере убираем»).
   The picture and its embers are the homepage's (landing.css .band__bg, .band__fx). These pages run no script:
   where the browser has scroll-driven animations the picture comes up with the scroll, elsewhere it simply shows.
   The embers stay inside the band; the homepage lifts its neighbours over them, these pages do not. ── */
.buyband {
  text-align: center; border-bottom: 0; min-height: 72vh; overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(96px, 13vh, 168px) 0 clamp(88px, 12vh, 152px);
}
.sect:has(+ .buyband) { border-bottom: 0; }
.buyband > .wrap { width: 100%; }
.buyband .band__bg--center::before {
  background:
    radial-gradient(ellipse 52% 64% at 50% 52%, rgba(14,15,14,0.86), rgba(14,15,14,0.5) 68%, rgba(14,15,14,0.24)),
    linear-gradient(180deg, rgba(14,15,14,0.55) 0%, transparent 22%, transparent 80%, rgba(14,15,14,0.6) 100%);
}
.buyband .band__bg ~ .band__fx {
  top: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.buyband__kicker { font-family: var(--cb-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cb-amber); }
.buyband h2 { font-size: clamp(30px, 3.6vw, 52px); max-width: 16em; margin-left: auto; margin-right: auto; }
.sect.buyband .wrap > .buyband__kicker + h2 { margin-top: var(--cb-s-4); }
.buyband .wrap > .lead { margin: var(--cb-s-6) auto 0; max-width: 640px; }
.buyband .wrap > .buyband__kicker + .lead { margin-top: var(--cb-s-5); }
.buyband__price { margin: var(--cb-s-10) 0 0; font-family: var(--cb-font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--cb-ink-2); }
.buyband__kicker + .buyband__price { margin-top: var(--cb-s-6); }
.buyband__price [data-price="deal"] {
  display: block; margin-bottom: var(--cb-s-1); font-size: clamp(32px, 3.2vw, 44px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--cb-ink-1);
}
.buyband__price [data-price="deal"] s { font-size: 0.55em; margin-right: 0.25em; }
/* the as-built chip keeps its [hidden]: landing.css hides .price-off[hidden], and this must not outrank it */
.buyband__price .price-off:not([hidden]) { display: table; margin: 0 auto var(--cb-s-3); }
.buyband .wrap > .hero__cta { justify-content: center; margin: var(--cb-s-6) 0 0; gap: var(--cb-s-3) var(--cb-s-6); }
.buyband__more { font-family: var(--cb-font-mono); font-size: 13px; color: var(--cb-amber); text-decoration: none; }
.buyband__more:hover { color: var(--cb-amber-hi); }
.buyband .cta-sub { margin-top: var(--cb-s-4); }
.buyband__proof {
  margin: var(--cb-s-12) auto 0; max-width: 920px; text-align: left;
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--cb-s-6) var(--cb-s-10);
  padding: var(--cb-s-6) var(--cb-s-8); background: rgba(14,15,14,0.74);
  border: 1px solid var(--cb-line-2); border-radius: var(--cb-r-2);
}
.buyband__review { margin: 0; }
.buyband__q { margin: 0 0 var(--cb-s-2); font-size: 17px; line-height: 1.55; color: var(--cb-ink-1); }
.buyband__cite { font-family: var(--cb-font-mono); font-size: 12px; color: var(--cb-ink-3); }
.buyband__cite a { color: var(--cb-amber); text-decoration: none; }
.buyband__cite a:hover { color: var(--cb-amber-hi); }
.buyband__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cb-s-3); font-size: 14px; line-height: 1.6; color: var(--cb-ink-2); }
.buyband__facts li { position: relative; padding-left: 18px; }
.buyband__facts li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; background: var(--cb-amber); box-shadow: 0 0 6px rgba(212,165,71,0.6); }
.buyband__facts b { color: var(--cb-ink-1); font-weight: 600; }
@supports (animation-timeline: view()) {
  .buyband .band__bg { animation: buyband-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  @keyframes buyband-rise { from { opacity: 0; } to { opacity: 1; } }
}
/* phones: a narrow window shows only the empty middle of the still, so the band opens on the dragon above the
   text (the picture fills the band's upper part and fades into the dark under the words) */
@media (max-width: 768px) {
  .buyband { min-height: 0; padding: min(74vw, 440px) 0 72px; }
  .buyband .band__bg {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%);
  }
  .buyband .band__bg img {
    height: min(128vw, 760px); object-position: 68% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
  }
  .buyband .band__bg--center::before {
    background: linear-gradient(180deg, rgba(14,15,14,0.06) 0, rgba(14,15,14,0.16) min(46vw, 280px), rgba(14,15,14,0.72) min(84vw, 500px), rgba(14,15,14,0.9) min(116vw, 690px), rgba(14,15,14,0.9) 100%);
  }
  .buyband__proof { grid-template-columns: 1fr; gap: var(--cb-s-5); padding: var(--cb-s-5) var(--cb-s-4); }
  .buyband__q { font-size: 16px; }
}