/* ============================================================
   slides.css - slide-specific layout (ported from deck, px->rem)
   Generated from presentation; values divided by 16 for rem scaling.
   ============================================================ */

    /* ===================== COVER (slide 1) ===================== */
    .cover .body {
      display: grid;
      grid-template-columns: 1.04fr 1fr;
      gap: 3.75rem;
      align-items: center;
    }

    .cover h1.title {
      font-size: 3.875rem;
      line-height: 1.02;
    }

    .cover .title em {
      font-style: normal;
      color: var(--teal-light);
    }

    .cover .sub {
      font-size: 1.5rem;
      line-height: 1.5;
      color: var(--d-mut);
      font-weight: 450;
      margin: 1.375rem 0 1.625rem;
      max-width: 43ch;
    }

    .cover .keyline {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      border-left: 0.25rem solid var(--orange);
      padding: 0.25rem 0 0.25rem 1.25rem;
      margin-bottom: 2.125rem;
    }

    .cover .keyline p {
      margin: 0;
      font-size: 1.5rem;
      line-height: 1.35;
      font-weight: 700;
      color: #fff;
      max-width: 50ch;
    }

    .cover .modrow {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem;
      max-width: 50rem;
    }

    .cover .modrow .chip {
      opacity: 0;
      transform: translateY(0.875rem);
    }

    .cover.run .modrow .chip {
      animation: chipIn .5s cubic-bezier(.2, .7, .3, 1) forwards;
    }

    .cover .modrow .chip:nth-child(1) {
      animation-delay: .5s;
    }

    .cover .modrow .chip:nth-child(2) {
      animation-delay: .57s;
    }

    .cover .modrow .chip:nth-child(3) {
      animation-delay: .64s;
    }

    .cover .modrow .chip:nth-child(4) {
      animation-delay: .71s;
    }

    .cover .modrow .chip:nth-child(5) {
      animation-delay: .78s;
    }

    .cover .modrow .chip:nth-child(6) {
      animation-delay: .85s;
    }

    .cover .modrow .chip:nth-child(7) {
      animation-delay: .92s;
    }

    @keyframes chipIn {
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* growth chart card */
    .gcard {
      background: var(--night-2);
      border: 0.0625rem solid var(--d-line);
      border-radius: var(--r);
      padding: 1.875rem 2rem 1.625rem;
      position: relative;
      overflow: hidden;
    }

    .gcard .gh {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.25rem;
      margin-bottom: 0.375rem;
    }

    .gcard .gh .lbl {
      font-family: var(--mono);
      font-size: 0.875rem;
      letter-spacing: .04em;
      color: var(--d-mut);
      text-transform: uppercase;
      line-height: 1.4;
    }

    .gcard .gh .badge {
      font-family: var(--font);
      font-weight: 800;
      font-size: 2.5rem;
      letter-spacing: -.03em;
      color: var(--teal-light);
      line-height: 1;
      white-space: nowrap;
    }

    .gcard .gh .badge small {
      display: block;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: .02em;
      color: var(--d-faint);
      text-transform: uppercase;
      font-family: var(--mono);
      margin-top: 0.375rem;
    }

    .gcard svg {
      display: block;
      width: 100%;
      height: auto;
      margin-top: 0.375rem;
    }

    .gcard .months {
      display: flex;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--d-faint);
      margin-top: 0.5rem;
      letter-spacing: .02em;
    }

    /* подпись-источник под графиком - только мобильная (см. mobile.css),
       на ПК этот текст остаётся в подвале слайда */
    .gcard-src {
      display: none;
      margin-top: 0.75rem;
      font-family: var(--mono);
      font-size: 0.6875rem;
      letter-spacing: .04em;
      color: var(--d-faint);
      text-transform: uppercase;
      line-height: 1.4;
    }

    .gline {
      fill: none;
      stroke: url(#gstroke);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1400;
      stroke-dashoffset: 1400;
    }

    .cover.run .gline {
      animation: draw 1.8s cubic-bezier(.4, .1, .2, 1) .35s forwards;
    }

    @keyframes draw {
      to {
        stroke-dashoffset: 0;
      }
    }

    .garea {
      fill: url(#garea);
      opacity: 0;
    }

    .cover.run .garea {
      animation: fadeArea .9s ease 1.5s forwards;
    }

    @keyframes fadeArea {
      to {
        opacity: 1;
      }
    }

    .gdot {
      opacity: 0;
    }

    .cover.run .gdot {
      animation: popDot .4s ease 1.9s forwards;
    }

    @keyframes popDot {
      from {
        transform: scale(0);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .gmarker line {
      stroke: var(--orange);
      stroke-width: 1.6;
      stroke-dasharray: 5 5;
    }

    .gmarker text {
      fill: var(--orange);
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .gmarker {
      opacity: 0;
    }

    .cover.run .gmarker {
      animation: fadeArea .6s ease 1.1s forwards;
    }

    /* ===================== generic two-column ===================== */
    .cols {
      display: grid;
      gap: 3.375rem;
      align-items: center;
      flex: 1;
      min-height: 0;
    }

    .cols.c64 {
      grid-template-columns: 1.1fr .9fr;
    }

    .cols.c55 {
      grid-template-columns: 1fr 1fr;
    }

    .cols.c46 {
      grid-template-columns: .85fr 1.15fr;
    }

    .body.stack {
      gap: 1.625rem;
    }

    .head-row .lead {
      margin-top: 1rem;
    }

    /* ===================== body copy (restored) =====================
       Базовые размеры подзаголовочного текста. Заданы в rem, чтобы
       масштабироваться вместе со сценой 1920x1080 (см. base.css).
       Эти правила были потеряны при выносе инлайн-стилей в служебные
       классы .ixNN: без них .lead и p.body-text наследовали
       фиксированные 16px и выглядели мелкими на крупной сцене.
       Восстанавливаем только размер и межстрочный интервал; цвет и
       насыщенность по-прежнему наследуются, как и раньше. Частные
       переопределения (.s-channels, .mod и т.д.) имеют выше
       специфичность и продолжают работать.
       1.5rem = размер .cover .sub (лид обложки); 1.25rem = базовый
       размер основного текста деки (.keyphrase p, ul.bul li). */
    .lead {
      font-size: 1.5rem;
      line-height: 1.5;
    }

    p.body-text {
      font-size: 1.25rem;
      line-height: 1.5;
    }

    /* ===================== S2 problem ===================== */
    .thlist {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.8125rem 1.875rem;
      margin-top: 1rem;
    }

    .thlist .th {
      display: flex;
      gap: 0.75rem;
      font-size: 1.25rem;
      line-height: 1.34;
      color: var(--t-mut);
      font-weight: 500;
    }

    .thlist .th .x {
      flex: none;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 0.375rem;
      background: var(--orange-soft);
      color: var(--orange);
      display: grid;
      place-items: center;
      font-size: 0.8125rem;
      font-weight: 800;
      margin-top: 0.1875rem;
    }

    .vsplit {
      display: flex;
      flex-direction: column;
      gap: 0.6875rem;
    }

    .vbox {
      background: var(--paper);
      border-radius: 1.125rem;
      padding: 1.0625rem 1.25rem;
    }

    .paper .vbox {
      background: #fff;
    }

    .vbox .vh {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 0.9375rem;
    }

    .vbox .vh b {
      font-family: var(--mono);
      font-size: 0.8125rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .vbox .vh span {
      font-size: 0.875rem;
      color: var(--t-faint);
    }

    .vgrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5625rem;
    }

    .vtile {
      height: 3.25rem;
      border-radius: 0.5625rem;
    }

    .prob .cols {
      align-items: start;
    }

    .vpage {
      display: flex;
      flex-direction: column;
      gap: 0.5625rem;
    }

    .vrow {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .vrow .ph {
      flex: none;
      width: 2.125rem;
      height: 2.125rem;
      border-radius: 0.5rem;
      background: var(--paper-2);
    }

    .vrow .ln {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
    }

    .vrow .ln i {
      height: 0.4375rem;
      border-radius: 0.25rem;
      background: var(--paper-2);
      display: block;
    }

    .vrow .ln i.s {
      width: 40%;
    }

    .vconn {
      display: flex;
      align-items: center;
      gap: 0.6875rem;
      font-family: var(--mono);
      font-size: 0.8125rem;
      letter-spacing: .04em;
      color: var(--t-faint);
      text-transform: uppercase;
      padding-left: 0.375rem;
    }

    .vconn .ar {
      color: var(--orange);
      font-size: 1.125rem;
    }

    /* S2 - two projections of the same product page (owner view vs fact) */
    .pv {
      display: flex;
      gap: 1rem;
      align-items: stretch;
    }

    .pv-img {
      flex: none;
      width: 6.75rem;
      border-radius: 0.75rem;
      display: grid;
      place-items: center;
      text-align: center;
    }

    .pv-img.empty {
      background: repeating-linear-gradient(135deg, #f4ece7, #f4ece7 0.5625rem, #fbe7dc 0.5625rem, #fbe7dc 1.125rem);
      border: 0.0938rem dashed #e9b79f;
    }

    .pv-img.empty span {
      font-size: 0.6875rem;
      line-height: 1.25;
      color: var(--orange);
      font-weight: 700;
      padding: 0 0.5rem;
    }

    .pv-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5625rem;
      justify-content: center;
    }

    .pv-title {
      height: 0.8125rem;
      width: 82%;
      border-radius: 0.3125rem;
      background: var(--ink);
      opacity: .82;
    }

    .pv-price {
      font-size: 1.3125rem;
      font-weight: 800;
      color: var(--t-ink);
      letter-spacing: -.02em;
    }

    .pv-line {
      height: 0.5625rem;
      border-radius: 0.3125rem;
      background: var(--paper-2);
    }

    .pv-line.s {
      width: 55%;
    }

    .pv-meta {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.1875rem;
    }

    .pv-meta .ok {
      font-size: 0.7812rem;
      font-weight: 700;
      color: var(--teal);
      background: var(--teal-soft);
      padding: 0.25rem 0.625rem;
      border-radius: 0.5rem;
    }

    .pv-warn {
      font-family: var(--mono);
      font-size: 0.875rem;
      color: var(--t-faint);
      display: flex;
      gap: 0.5rem;
    }

    .pv-warn b {
      color: var(--orange);
      font-weight: 700;
    }

    /* conclusion band (вывод) */
    .concl {
      display: flex;
      align-items: center;
      gap: 1rem;
      background: var(--ink);
      color: #fff;
      border-radius: 1rem;
      padding: 1.125rem 1.625rem;
    }

    .concl .cl {
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--orange);
      white-space: nowrap;
    }

    .concl p {
      margin: 0;
      font-size: 1.1875rem;
      line-height: 1.4;
      font-weight: 600;
    }

    /* ===================== S2 redesign - left stack + two projections ===================== */
    .prob-left {
      display: flex;
      flex-direction: column;
      gap: 1.375rem;
      min-width: 0;
    }

    .prob-left .keyphrase {
      margin-top: auto;
    }

    /* приподнимаем правые проекции, чтобы не сидели слишком низко */
    .prob .vsplit {
      margin-top: -7.5rem;
    }

    /* единый размер плашки-фото в обеих проекциях */
    .pv-img.tee,
    .vbox.seo .pv-img.empty {
      width: 7.75rem;
      height: 8.25rem;
      flex: none;
    }

    .pv {
      align-items: flex-start;
    }

    /* deceptively-green owner card - всё "зелёное", а на деле ошибки */
    .vbox.owner {
      border: 0.0938rem solid rgba(33, 161, 154, .55) !important;
      background: linear-gradient(160deg, rgba(33, 161, 154, .14), rgba(33, 161, 154, .02));
    }

    .vbox.owner .vh b {
      color: var(--teal);
    }

    .vbox.owner .vh span {
      color: var(--teal);
      font-weight: 700;
    }

    .pv-img.tee {
      background: linear-gradient(150deg, #d8f0ec, #b6e4db);
      border: 0.0938rem solid rgba(33, 161, 154, .4);
      color: var(--teal);
    }

    .pv-img.tee svg {
      width: 3.375rem;
      height: 3.375rem;
    }

    .pv-name {
      font-size: 1.0625rem;
      font-weight: 800;
      color: var(--t-ink);
      line-height: 1.2;
    }

    .pv-art {
      font-family: var(--mono);
      font-size: 0.7812rem;
      color: var(--t-faint);
      margin-top: 0.125rem;
    }

    .pv-pricerow {
      display: flex;
      align-items: baseline;
      gap: 0.625rem;
      flex-wrap: wrap;
    }

    .pv-oldprice {
      font-size: 1rem;
      font-weight: 600;
      color: var(--t-faint);
      text-decoration: line-through;
      text-decoration-color: var(--orange);
    }

    .pv-newprice {
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--teal);
      letter-spacing: -.02em;
    }

    .pv-disc {
      font-size: 0.8125rem;
      font-weight: 800;
      color: #fff;
      background: var(--teal);
      padding: 0.1875rem 0.5625rem;
      border-radius: 0.4375rem;
    }

    .pv-sizes {
      font-size: 0.8438rem;
      font-weight: 600;
      color: var(--t-mut);
    }

    .pv-sizes b {
      color: var(--teal);
      font-weight: 700;
    }

    .pv-desc {
      font-size: 0.8125rem;
      line-height: 1.4;
      color: var(--t-mut);
    }

    .pv-stock .ok {
      font-size: 0.7812rem;
      font-weight: 700;
      color: var(--teal);
      background: var(--teal-soft);
      padding: 0.25rem 0.625rem;
      border-radius: 0.5rem;
    }

    /* search/buyer card - красная, как "плохая" карточка на S4 */
    .vbox.seo {
      border: 0.125rem solid rgba(229, 86, 78, .6) !important;
      background: linear-gradient(160deg, rgba(229, 86, 78, .08), rgba(229, 86, 78, 0));
    }

    .vbox.seo .vh b {
      color: #e5564e !important;
    }

    .vbox.seo .vh span {
      color: #e5564e;
      font-weight: 700;
    }

    .vbox.seo .pv-img.empty {
      background: repeating-linear-gradient(135deg, #fbeae8, #fbeae8 0.5625rem, #f7d4cf 0.5625rem, #f7d4cf 1.125rem);
      border: 0.0938rem dashed #e07b72;
    }

    .vbox.seo .pv-img.empty span {
      font-size: 1rem;
      line-height: 1.2;
      color: #d8443b;
      font-weight: 800;
      padding: 0 0.375rem;
    }

    .pv-issues {
      display: flex;
      flex-direction: column;
      gap: 0.5625rem;
      flex: 1;
    }

    .pv-issues .iss {
      display: flex;
      gap: 0.625rem;
      align-items: flex-start;
      font-size: 1.125rem;
      line-height: 1.3;
      color: var(--t-mut);
      font-weight: 500;
    }

    .pv-issues .iss::before {
      content: "✕";
      flex: none;
      color: #e5564e;
      font-weight: 800;
      font-size: 0.875rem;
      margin-top: 0.0625rem;
    }

    .pv-verdict {
      margin-top: 0.125rem;
      font-size: 1.25rem;
      line-height: 1.32;
      font-weight: 600;
    }

    .pv-verdict .bold {
      color: #e5564e;
    }

    /* ===================== S3 cost ===================== */
    .costgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.6875rem;
    }

    .rolechip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.875rem;
      background: var(--paper);
      border-radius: 0.8125rem;
      padding: 0.9375rem 1.125rem;
    }

    .paper .rolechip {
      background: #fff;
    }

    .rolechip .rn {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--t-ink);
    }

    .rolechip .rs {
      font-family: var(--mono);
      font-size: 0.8438rem;
      color: var(--t-faint);
      white-space: nowrap;
    }

    .costtotal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.5rem;
      padding: 0 0.25rem;
    }

    .costtotal .lab {
      font-size: 1.25rem;
      color: var(--t-mut);
      font-weight: 600;
    }

    .costtotal .val {
      font-family: var(--mono);
      font-size: 1.625rem;
      font-weight: 700;
      color: var(--t-faint);
      text-decoration: line-through;
      text-decoration-color: var(--orange);
      text-decoration-thickness: 0.1875rem;
    }

    .ourcard {
      background: var(--ink);
      color: #fff;
      border-radius: 1.25rem;
      padding: 1.625rem 1.875rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
      position: relative;
      overflow: hidden;
    }

    .ourcard .oh {
      font-size: 1.3125rem;
      font-weight: 700;
    }

    .ourcard .oh span {
      display: block;
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--d-mut);
      margin-top: 0.3125rem;
    }

    .ourcard .op {
      font-family: var(--font);
      font-size: 2.5rem;
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--teal-light);
      white-space: nowrap;
    }

    .ourcard .op small {
      display: block;
      text-align: right;
      font-family: var(--mono);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--d-faint);
      letter-spacing: .04em;
    }

    /* ===================== S4 specialization ===================== */
    .vs {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 1.5rem;
      align-items: stretch;
    }

    .vs .vcard {
      background: var(--night-2);
      border: 0.0625rem solid var(--d-line);
      border-radius: 1.25rem;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
    }

    .vs .vcard.win {
      border-color: rgba(33, 161, 154, .5);
      background: linear-gradient(160deg, rgba(33, 161, 154, .14), rgba(33, 161, 154, .02));
    }

    .vs .vt {
      font-family: var(--mono);
      font-size: 1.25rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--d-faint);
      margin-bottom: 1rem;
    }

    .vs .win .vt {
      color: var(--teal-light);
    }

    .cmslist {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: auto;
    }

    .cmschip {
      font-size: 1.25rem;
      font-weight: 600;
      padding: 0.5rem 0.75rem;
      border-radius: 0.5625rem;
      background: rgba(255, 255, 255, .06);
      color: var(--d-mut);
    }

    .vs .note {
      font-size: 1.25rem;
      line-height: 1.4;
      color: var(--d-mut);
      margin-top: 1rem;
      font-weight: 500;
    }

    .hub {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
      margin-bottom: auto;
    }

    .hubnode {
      font-size: 1.25rem;
      font-weight: 600;
      padding: 0.5625rem 0.6875rem;
      border-radius: 0.5625rem;
      text-align: center;
      background: rgba(33, 161, 154, .16);
      color: #bfeae4;
    }

    .vsmid {
      display: flex;
      align-items: center;
      color: var(--d-faint);
      font-size: 1.5rem;
    }

    /* S4 - explicit good/bad comparison marks */
    .vs .vhead {
      display: flex;
      align-items: center;
      gap: 0.6875rem;
      margin-bottom: 1rem;
    }

    .vs .vhead .vt {
      margin-bottom: 0;
    }

    .vmark {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 1rem;
      font-weight: 800;
      color: #fff;
      flex: none;
    }

    .vmark.no {
      background: #e5564e;
    }

    .vmark.yes {
      background: var(--teal);
    }

    .vs .vcard.bad {
      border-color: rgba(229, 86, 78, .45);
      background: linear-gradient(160deg, rgba(229, 86, 78, .12), rgba(229, 86, 78, .02));
    }

    .vs .vcard.bad .vt {
      color: #f0a59f;
    }

    .cmschip.no::before {
      content: "✕";
      color: #e5564e;
      font-weight: 800;
      font-size: 0.75rem;
      margin-right: 0.375rem;
    }

    .hubnode::before {
      content: "✓";
      color: var(--teal-light);
      font-weight: 800;
      font-size: 0.75rem;
      margin-right: 0.375rem;
    }

    /* ===================== S5 system map / hub ===================== */
    .mapwrap {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .maptop {
      background: var(--paper);
      border: 0.0938rem dashed var(--t-line);
      border-radius: 1rem;
      padding: 1rem 1.375rem;
      text-align: center;
      font-weight: 600;
      font-size: 1rem;
      color: var(--t-mut);
    }

    .maptop b {
      color: var(--t-ink);
    }

    .mapcore {
      background: var(--ink);
      color: #fff;
      border-radius: 1.125rem;
      padding: 1.375rem 1.625rem;
      text-align: center;
    }

    .mapcore .mc1 {
      font-family: var(--mono);
      font-size: 0.8125rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--teal-light);
    }

    .mapcore .mc2 {
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -.02em;
      margin-top: 0.4375rem;
    }

    .navgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5625rem;
    }

    .navrow {
      display: flex;
      align-items: center;
      gap: 0.8125rem;
      background: var(--paper);
      border-radius: 0.75rem;
      padding: 0.8125rem 1rem;
    }

    .paper .navrow {
      background: #fff;
    }

    .navrow .nn {
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 700;
      color: #fff;
      background: var(--acc, var(--orange));
      border-radius: 0.4375rem;
      padding: 0.25rem 0.5rem;
      flex: none;
    }

    .navrow .nt {
      font-size: 1rem;
      font-weight: 600;
      color: var(--t-ink);
    }

    /* ---- navindex (editorial contents, single column) ---- */
    .navindex {
      display: flex;
      flex-direction: column;
    }

    .navindex .ni {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      padding: 0.6875rem 0.125rem;
      border-bottom: 0.0625rem solid var(--d-line, #eef1f3);
      transition: padding-left .18s ease;
    }

    .paper .navindex .ni,
    .navindex .ni {
      border-bottom: 0.0625rem solid #eceff2;
    }

    .navindex .ni:last-child {
      border-bottom: 0;
    }

    .navindex .ni .nn {
      font-family: var(--mono);
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 1;
      color: var(--acc, var(--orange));
      width: 2.375rem;
      flex: none;
      letter-spacing: -.02em;
    }

    .navindex .ni .nt {
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--t-ink);
      flex: 1;
      line-height: 1.25;
    }

    .navindex .ni .na {
      font-family: var(--mono);
      font-size: 0.9375rem;
      color: var(--t-faint);
      flex: none;
      transition: color .18s ease, transform .18s ease;
    }

    .navindex .ni:hover {
      padding-left: 0.5rem;
    }

    .navindex .ni:hover .na {
      color: var(--acc, var(--orange));
      transform: translateX(0.1875rem);
    }

    /* ---- bleed arrow (lower-right, breaks the frame) - concept C, double ---- */
    .bleed-arrow {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 0;
      pointer-events: none;
      font-family: var(--font);
      font-weight: 800;
      line-height: 1;
      color: var(--orange);
      user-select: none;
    }

    .bleed-arrow span {
      position: absolute;
      display: block;
      font-size: 35rem;
      line-height: 1;
    }

    .bleed-arrow .a-front {
      right: 0;
      bottom: 0;
      opacity: .50;
    }

    .bleed-arrow .a-echo {
      right: -5.625rem;
      bottom: 0;
      opacity: .16;
    }

    /* ---- node sphere above the index ---- */
    .navsphere {
      display: block;
      width: 14.75rem;
      margin: 0 auto 1rem;
    }

    .navsphere svg {
      display: block;
      width: 100%;
      height: auto;
    }

    /* ===================== MODULE SERIES 6-10 ===================== */
    .modcols {
      display: grid;
      grid-template-columns: 1.04fr .96fr;
      gap: 2.5rem;
      align-items: center;
      flex: 1;
      min-height: 0;
    }

    .modtext h2.htitle {
      font-size: 2.5rem;
      line-height: 1.08;
    }

    .modtext .exp {
      font-size: 1.25rem;
      line-height: 1.5;
      margin: 0.9375rem 0 1.125rem;
      color: var(--t-mut);
      font-weight: 450;
      max-width: 70ch;
    }

    .dark .modtext .exp {
      color: #c2c9d2;
    }

    .modtext .exp b {
      color: var(--t-ink);
      font-weight: 700;
    }

    .dark .modtext .exp b {
      color: #fff;
    }

    /* compact filter schema (slide 11 · SEO-фильтры) */
    .fcombo {
      display: flex;
      flex-direction: column;
      gap: 0.6875rem;
      margin: 0.25rem 0 1.25rem;
    }

    .fc-row {
      display: flex;
      align-items: center;
      gap: 0.6875rem;
      flex-wrap: wrap;
    }

    .fc-tok {
      font-family: var(--mono);
      font-size: 1.0625rem;
      font-weight: 600;
      letter-spacing: -.01em;
      padding: 0.4375rem 0.9375rem;
      border-radius: 0.625rem;
      white-space: nowrap;
    }

    .fc-tok.t-item {
      background: #eef0f2;
      color: #2b2d33;
    }

    .fc-tok.t-brand {
      background: var(--blue-soft);
      color: #2f6fd0;
    }

    .fc-tok.t-color {
      background: var(--teal-soft);
      color: #167b74;
    }

    .fc-op {
      font-size: 1.1875rem;
      font-weight: 700;
      color: #9aa0a7;
    }

    .fc-arr {
      font-size: 1.3125rem;
      font-weight: 700;
      color: var(--blue);
      margin: 0 0.125rem;
    }

    .fc-page {
      font-size: 1.0625rem;
      font-weight: 600;
      color: #2b2d33;
      background: #fff;
      border: 0.1rem solid var(--blue);
      border-radius: 0.625rem;
      padding: 0.4375rem 1rem;
      white-space: nowrap;
    }

    .roles2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin-bottom: 0.9375rem;
    }

    .roles2 .role {
      padding: 1rem 1.125rem;
    }

    .roles2 .role .rh {
      margin-bottom: 0.625rem;
      font-size: 1rem;
    }

    .roles2 .role .ic {
      width: 1.4375rem;
      height: 1.4375rem;
      border-radius: 0.4375rem;
    }

    .roles2 .role ul {
      gap: 0.375rem;
    }

    .roles2 .role li {
      font-size: 1.25rem;
      line-height: 1.3;
      padding-left: 1.0625rem;
    }

    .roles2 .role li::before {
      top: 0.5625rem;
      width: 0.375rem;
      height: 0.375rem;
    }

    .roles2 .role .ic svg {
      width: 0.9375rem;
      height: 0.9375rem;
      display: block;
    }

    .modtext ul.natfeat {
      margin: 0 0 1rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.4375rem 1.375rem;
    }

    .modtext ul.natfeat li {
      font-size: 1.25rem;
      line-height: 1.32;
      padding-left: 1.25rem;
    }

    .modtext ul.natfeat li::before {
      top: 0.5625rem;
      width: 0.4375rem;
      height: 0.4375rem;
    }

    .mod .keyphrase {
      padding: 0.9375rem 1.1875rem;
    }

    .mod .keyphrase p {
      font-size: 1.25rem;
      line-height: 1.36;
    }

    /* SEO-требования к тексту категории (тезисы, слайд 10) */
    .seoreq {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      margin: 0.125rem 0 0.8125rem;
    }

    .seoreq .sr-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      background: var(--night-2);
      border: 0.0625rem solid var(--d-line);
      border-radius: 0.875rem;
      padding: 0.75rem 1rem;
    }

    .seoreq .sr-mk {
      flex: none;
      width: 5.75rem;
      text-align: center;
      font-family: var(--mono);
      font-weight: 800;
      font-size: 1.1875rem;
      line-height: 1.12;
      letter-spacing: -.01em;
      color: #a7a2f0;
      padding-top: 0.0625rem;
      text-transform: uppercase;
    }

    .seoreq .sr-tx {
      margin: 0;
      font-size: 1.25rem;
      line-height: 1.38;
      font-weight: 450;
      color: #c2c9d2;
    }

    .seoreq .sr-tx b {
      color: #fff;
      font-weight: 700;
    }

    .modvis {
      display: flex;
      flex-direction: column;
      gap: 0.9375rem;
      min-width: 0;
    }

    .modvis .vlabel {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-family: var(--mono);
      font-size: 0.875rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--t-faint);
      font-weight: 600;
    }

    .dark .modvis .vlabel {
      color: var(--d-faint);
    }

    .modvis .vlabel .tag {
      padding: 0.1875rem 0.5625rem;
      border-radius: 0.375rem;
      background: var(--acc);
      color: #fff;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .shot.plain {
      border-radius: 1rem;
    }

    .shot.plain img {
      border-radius: 1rem;
    }

    /* before/after snippet rows (s6) */
    .baqar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.875rem;
    }

    .basnip {
      background: var(--paper);
      border-radius: 0.875rem;
      padding: 0.875rem 1rem;
      border: 0.0625rem solid var(--t-line);
    }

    .basnip .bl {
      font-family: var(--mono);
      font-size: 0.7188rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 0.5625rem;
      display: flex;
      align-items: center;
      gap: 0.4375rem;
    }

    .basnip.was .bl {
      color: var(--t-faint);
    }

    .basnip.now .bl {
      color: var(--acc);
    }

    .basnip img {
      display: block;
      width: 100%;
      border-radius: 0.4375rem;
      border: 0.0625rem solid var(--t-line);
    }

    /* ===== SLIDE 6 SPLIT (6.1 описание · 6.2 мета-теги) - larger type ===== */
    .m6 .modcols {
      grid-template-columns: 1fr 1fr;
      gap: 2.625rem;
    }

    .m6 .modtext h2.htitle {
      font-size: 2.3125rem;
      line-height: 1.08;
    }

    .m6 .modtext .exp {
      font-size: 1.25rem;
      line-height: 1.55;
      max-width: 70ch;
      margin: 1.125rem 0 1.125rem;
    }

    .m6 .roles2 {
      gap: 0.875rem;
      margin-bottom: 1rem;
    }

    .m6 .roles2 .role {
      padding: 1.125rem 1.25rem;
    }

    .m6 .roles2 .role .rh {
      margin-bottom: 0.75rem;
      font-size: 0.875rem;
    }

    .m6 .roles2 .role .ic {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 0.5625rem;
    }

    .m6 .roles2 .role .ic svg {
      width: 1.125rem;
      height: 1.125rem;
      display: block;
    }

    .m6 .roles2 .role li {
      font-size: 1.25rem;
      line-height: 1.34;
      padding-left: 1.0625rem;
    }

    .m6 .roles2 .role li::before {
      top: 0.5rem;
      width: 0.4375rem;
      height: 0.4375rem;
    }

    .m6 .keyphrase {
      padding: 1.125rem 1.375rem;
    }

    .m6 .keyphrase p {
      font-size: 1.25rem;
      line-height: 1.42;
    }

    /* 6.1 - scan visual with detail pins */
    .scanwrap {
      position: relative;
      border-radius: 1.125rem;
      overflow: hidden;
      background: #0f1114;
      border: 0.0625rem solid var(--t-line);
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
      transform: translateY(0.125rem);
    }

    .dark .scanwrap {
      border-color: var(--d-line);
    }

    .scanwrap img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 37.5rem;
    }

    .descshot {
      border-radius: 0.875rem;
      overflow: hidden;
      border: 0.0625rem solid var(--t-line);
      background: #fff;
      box-shadow: 0 0.375rem 1.375rem rgba(20, 30, 45, .07);
      width: 100%;
      max-width: 56rem;
      margin: 0.4rem auto 0;
      /* query container: the card sizes itself from this width, so it
         scales as one unit (like a screenshot) at any resolution */
      container-type: inline-size;
    }

    .descshot img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 38.75rem;
    }

    /* product description card - HTML reproduction of product-description screenshot.
       All metrics are in cqw (% of the .descshot container width), so the whole
       card scales proportionally and looks identical on desktop and mobile;
       it just gets smaller to fit the screen instead of reflowing. */
    .pcard {
      position: relative;
      background: #fff;
      color: #3a3f47;
      padding: 2.5cqw 3.036cqw 2.679cqw;
      font-size: 1.228cqw;
      line-height: 1.45;
      text-align: left;
      width: 100%;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .pcard .pc-art {
      display: block;
      color: #9aa0a8;
      font-size: 1.116cqw;
      margin-bottom: 0.714cqw;
    }

    .pcard .pc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 4.643cqw;
    }

    .pcard .pc-rating {
      display: flex;
      align-items: center;
      gap: 0.625cqw;
    }

    .pcard .pc-stars {
      color: #d7dbe0;
      letter-spacing: 0.1em;
      font-size: 1.339cqw;
    }

    .pcard .pc-cnt {
      color: #9aa0a8;
      font-size: 1.116cqw;
    }

    .pcard .pc-title {
      margin: 0.982cqw 0 0;
      font-size: 1.786cqw;
      font-weight: 800;
      color: #2b2d33;
      line-height: 1.2;
    }

    .pcard .pc-price {
      margin: 0.893cqw 0 1.25cqw;
      font-size: 2.679cqw;
      font-weight: 800;
      color: #2b2d33;
    }

    .pcard .pc-buyrow {
      display: flex;
      align-items: center;
      gap: 1.071cqw;
    }

    .pcard .pc-buy {
      flex: 1;
      text-align: center;
      background: #3f4a5c;
      color: #fff;
      font-weight: 600;
      padding: 1.107cqw 0.893cqw;
      border-radius: 0.625cqw;
      font-size: 1.339cqw;
    }

    .pcard .pc-fav {
      width: 3.929cqw;
      height: 3.929cqw;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border: 0.112cqw solid #d7dbe0;
      border-radius: 0.625cqw;
      color: #6a7079;
    }

    .pcard .pc-fav svg {
      width: 1.875cqw;
      height: 1.875cqw;
    }

    .pcard .pc-acc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 0.112cqw solid #ebedf0;
      margin-top: 1.786cqw;
      padding-top: 1.518cqw;
      font-weight: 700;
      color: #2b2d33;
      font-size: 1.451cqw;
    }

    .pcard .pc-acc svg {
      width: 1.696cqw;
      height: 1.696cqw;
      color: #9aa0a8;
    }

    .pcard .pc-p {
      margin: 0.982cqw 0 0;
      color: #4a4f57;
    }

    .pcard .pc-h {
      margin: 1.518cqw 0 0.714cqw;
      font-size: 1.674cqw;
      font-weight: 800;
      color: #2b2d33;
    }

    .pcard .pc-sh {
      margin: 0 0 0.714cqw;
      font-size: 1.674cqw;
      font-weight: 800;
      color: #2b2d33;
    }

    .pcard .pc-right .pc-sh:not(:first-child) {
      margin-top: 1.518cqw;
    }

    .pcard .pc-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .pcard .pc-list li {
      position: relative;
      padding-left: 1.518cqw;
      margin: 0 0 0.571cqw;
      color: #4a4f57;
    }

    .pcard .pc-list li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: #9aa0a8;
    }

    .pcard .pc-list li b {
      color: #2b2d33;
      font-weight: 700;
    }

    .vintro {
      font-size: 1.25rem;
      line-height: 1.55;
      color: var(--t-mut);
      font-weight: 500;
      margin: 0 0 0.25rem;
    }

    .dark .vintro {
      color: #c2c9d2;
    }

    .vintro b {
      color: var(--t-ink);
      font-weight: 700;
    }

    .dark .vintro b {
      color: #fff;
    }

    .m6 .banote {
      font-size: 0.9688rem;
      line-height: 1.42;
    }

    .scanline {
      position: absolute;
      left: 0;
      right: 0;
      height: 0.1875rem;
      background: linear-gradient(90deg, transparent, var(--teal-light), transparent);
      box-shadow: 0 0 1.125rem 0.25rem rgba(49, 194, 167, .55);
      animation: scanmove 3.6s ease-in-out infinite;
    }

    @keyframes scanmove {
      0% {
        top: 4%;
      }

      50% {
        top: 93%;
      }

      100% {
        top: 4%;
      }
    }

    .scanwrap::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg, rgba(49, 194, 167, .045) 0 0.0625rem, transparent 0.0625rem 1.5rem);
      pointer-events: none;
    }

    .pin {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--mono);
      font-size: 1.125rem;
      font-weight: 700;
      color: #fff;
      background: rgba(15, 17, 20, .8);
      border: 0.0625rem solid rgba(49, 194, 167, .55);
      padding: 0.375rem 0.625rem;
      border-radius: 0.5625rem;
      white-space: nowrap;
    }

    .pin .dot {
      width: 0.4375rem;
      height: 0.4375rem;
      border-radius: 50%;
      background: var(--teal-light);
      box-shadow: 0 0 0.5625rem 0.125rem rgba(49, 194, 167, .75);
      flex: none;
    }

    .pin.p1 {
      top: 7%;
      right: 5%;
    }

    .pin.p2 {
      top: 33%;
      left: 4%;
    }

    .pin.p3 {
      top: 55%;
      right: 5%;
    }

    .pin.p4 {
      bottom: 25%;
      left: 5%;
    }

    .scancap {
      font-size: 0.9062rem;
      line-height: 1.45;
      color: var(--t-mut);
      font-weight: 500;
      margin-top: 0.125rem;
    }

    .dark .scancap {
      color: #c2c9d2;
    }

    .scancap b {
      color: var(--acc);
      font-weight: 700;
    }

    /* 6.2 - meta tags before / after */
    .metacols {
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 2.625rem;
      align-items: start;
      flex: 1;
      min-height: 0;
    }

    .serpmock {
      background: #fff;
      border: 0.0625rem solid var(--t-line);
      border-radius: 0.875rem;
      padding: 1.125rem 1.3125rem;
      margin: 0.375rem 0 1.125rem;
      box-shadow: 0 0.375rem 1.375rem rgba(20, 30, 45, .07);
    }

    .sm-title {
      font-size: 1.25rem;
      color: #1a4fd6;
      font-weight: 700;
      line-height: 1.28;
    }

    .sm-url {
      font-size: 0.8125rem;
      color: #0b8043;
      margin: 0.3125rem 0 0.5625rem;
      font-family: var(--mono);
    }

    .sm-desc {
      font-size: 0.9375rem;
      color: #4d5156;
      line-height: 1.45;
    }

    .sm-anno {
      display: inline-flex;
      align-items: center;
      gap: 0.4375rem;
      margin-top: 0.5rem;
      font-family: var(--mono);
      font-size: 0.7188rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--acc);
    }

    .sm-anno .ar {
      font-size: 0.875rem;
      line-height: 1;
    }

    .bacard {
      border-radius: 1rem;
      padding: 1rem 1.125rem;
      border: 0.0938rem solid;
    }

    .bacard.was {
      border-color: rgba(229, 86, 78, .5);
      background: rgba(229, 86, 78, .05);
    }

    .bacard.now {
      border-color: rgba(33, 161, 154, .5);
      background: rgba(33, 161, 154, .06);
    }

    .dark .bacard.was {
      background: rgba(229, 86, 78, .1);
    }

    .dark .bacard.now {
      background: rgba(33, 161, 154, .12);
    }

    .bahd {
      display: flex;
      align-items: center;
      gap: 0.6875rem;
      margin-bottom: 0.75rem;
    }

    .bahd .vmark {
      width: 1.75rem;
      height: 1.75rem;
      font-size: 0.9375rem;
    }

    .bahd .bt {
      font-family: var(--mono);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .bacard.was .bt {
      color: #d8463e;
    }

    .bacard.now .bt {
      color: var(--teal);
    }

    .bacard img {
      display: block;
      width: 100%;
      border-radius: 0.5rem;
      border: 0.0625rem solid var(--t-line);
    }

    .banote {
      font-size: 0.8438rem;
      line-height: 1.4;
      color: var(--t-mut);
      margin-top: 0.6875rem;
      font-weight: 500;
    }

    .dark .banote {
      color: #c2c9d2;
    }

    .bacard.was .banote b {
      color: #d8463e;
      font-weight: 700;
    }

    .bacard.now .banote b {
      color: var(--teal);
      font-weight: 700;
    }

    .baarrow {
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--t-faint);
      font-size: 1.5rem;
      margin: 0.1875rem 0;
    }

    /* connection graph (s7) */
    .cgraph {
      background: var(--paper);
      border-radius: 1rem;
      padding: 1.125rem 1.375rem;
      display: flex;
      align-items: center;
      gap: 1.375rem;
    }

    .paper .cgraph {
      background: #fff;
    }

    .cgsvg {
      flex: none;
    }

    .cgcap {
      font-size: 1.125rem;
      line-height: 1.4;
      color: var(--t-mut);
      font-weight: 500;
    }

    .cgcap b {
      color: var(--acc);
      font-weight: 700;
    }

    /* two-shot comparison (s8) */
    .cmp2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items: start;
    }

    .cmpcol .ch {
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-bottom: 0.5625rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .cmpcol.good .ch {
      color: var(--teal);
    }

    .cmpcol.bad .ch {
      color: #e5564e;
    }

    .cmpcol .ch .vmark {
      width: 1.25rem;
      height: 1.25rem;
      font-size: 0.6875rem;
    }

    .cmpcol.good .shot {
      box-shadow: 0 0 0 0.125rem rgba(33, 161, 154, .55);
    }

    .cmpcol.bad .shot {
      filter: grayscale(.45);
      opacity: .82;
      box-shadow: 0 0 0 0.125rem rgba(229, 86, 78, .5);
    }

    /* funnel (s10) */
    .funnel {
      display: flex;
      align-items: stretch;
      gap: 0.5rem;
    }

    .fstep {
      flex: 1;
      background: var(--paper);
      border-radius: 0.75rem;
      padding: 0.8125rem 0.75rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.1875rem;
    }

    .paper .fstep {
      background: #fff;
    }

    .fstep .fn {
      font-family: var(--mono);
      font-size: 0.6875rem;
      color: var(--t-faint);
      font-weight: 600;
    }

    .fstep .ft {
      font-size: 0.8438rem;
      font-weight: 600;
      color: var(--t-ink);
      line-height: 1.2;
    }

    .fstep.on {
      background: var(--acc);
    }

    .fstep.on .fn {
      color: rgba(255, 255, 255, .7);
    }

    .fstep.on .ft {
      color: #fff;
    }

    .farrow {
      display: flex;
      align-items: center;
      color: var(--t-faint);
      font-size: 1.125rem;
    }

    /* category mockup (s9, dark) */
    .catmock {
      background: #fff;
      border-radius: 1.125rem;
      padding: 1.5rem 1.625rem;
      color: var(--ink);
      box-shadow: 0 1.5rem 3.75rem -1.375rem rgba(0, 0, 0, .5);
    }

    .catmock .cm-bc {
      font-size: 0.75rem;
      color: #9aa2ad;
      margin-bottom: 0.5rem;
      font-weight: 500;
    }

    .catmock .cm-h1 {
      font-size: 1.375rem;
      font-weight: 800;
      letter-spacing: -.02em;
      margin: 0 0 0.875rem;
    }

    .qa {
      border-top: 0.0625rem solid #eef1f4;
    }

    .qa .q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.75rem 0;
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--ink);
    }

    .qa .q .cv {
      color: var(--violet);
      font-weight: 800;
    }

    .qa .a {
      font-size: 0.8438rem;
      line-height: 1.5;
      color: #5b626d;
      padding: 0 0 0.8125rem;
      font-weight: 450;
    }

    .qa.open {
      background: linear-gradient(90deg, rgba(111, 106, 224, .06), transparent);
      border-radius: 0.625rem;
      padding: 0 0.75rem;
      margin: 0 -0.75rem;
    }

    .collap {
      display: flex;
      align-items: center;
      gap: 0.5625rem;
      margin-top: 0.875rem;
      padding: 0.6875rem 0.875rem;
      border-radius: 0.625rem;
      background: #f5f4fd;
      color: var(--violet);
      font-size: 0.8438rem;
      font-weight: 700;
    }

    /* ===================== S11 two pillars ===================== */
    .pillars {
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
    }

    .pillar {
      background: var(--night-2);
      border: 0.0625rem solid var(--d-line);
      border-radius: 1.125rem;
      padding: 1.25rem 1.5rem;
    }

    .pillar .ph {
      display: flex;
      align-items: center;
      gap: 0.6875rem;
      font-size: 1.25rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.8125rem;
    }

    .pillar .ph .tg {
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 0.25rem 0.5625rem;
      border-radius: 0.4375rem;
    }

    .pillar.inner .ph .tg {
      background: rgba(33, 161, 154, .2);
      color: var(--teal-light);
    }

    .pillar.outer .ph .tg {
      background: rgba(74, 140, 234, .2);
      color: #9cc0f5;
    }

    .pillar ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem 1.25rem;
    }

    .pillar li {
      font-size: 1.25rem;
      line-height: 1.3;
      color: #c2c9d2;
      padding-left: 1rem;
      position: relative;
      font-weight: 450;
    }

    .pillar li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.4375rem;
      width: 0.375rem;
      height: 0.375rem;
      border-radius: 0.125rem;
    }

    .pillar.inner li::before {
      background: var(--teal-light);
    }

    .pillar.outer li::before {
      background: #7ba6f0;
    }

    /* highlight in S11 title */
    .htitle .hl-ext {
      color: var(--teal-light);
      white-space: nowrap;
    }

    /* ===================== S11 two-column + rocket ===================== */
    .s11-cols {
      display: flex;
      align-items: stretch;
      gap: 1.75rem;
    }

    .s11-left {
      flex: 0 0 64%;
      max-width: 64%;
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
      margin-top: -1.5625rem;
    }

    .s11-left .pillar ul {
      grid-template-columns: 1fr;
    }

    .s11-right {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rocket-svg {
      width: 100%;
      max-width: 17.5rem;
      height: auto;
    }

    @keyframes rk-float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-0.75rem);
      }
    }

    @keyframes rk-flame {

      0%,
      100% {
        transform: scaleY(1);
        opacity: 1;
      }

      50% {
        transform: scaleY(0.78) scaleX(1.08);
        opacity: 0.85;
      }
    }

    @keyframes rk-line {
      0% {
        opacity: 0;
        transform: translateY(-1.125rem);
      }

      40% {
        opacity: 0.6;
      }

      100% {
        opacity: 0;
        transform: translateY(1.375rem);
      }
    }

    .rk-float {
      animation: rk-float 3.6s ease-in-out infinite;
      transform-origin: center;
    }

    .rk-flame {
      animation: rk-flame 0.4s ease-in-out infinite;
      transform-origin: 8.75rem 19.875rem;
    }

    .rk-line {
      animation: rk-line 1.4s linear infinite;
    }

    .rk-line2 {
      animation-delay: 0.45s;
    }

    .rk-line3 {
      animation-delay: 0.9s;
    }

    /* ===================== S12 hypothesis loop ===================== */
    .loop {
      display: flex;
      align-items: stretch;
      gap: 0.5rem;
      margin-top: 0.25rem;
    }

    .lstep {
      flex: 1;
      background: var(--paper);
      border-radius: 0.8125rem;
      padding: 0.875rem 0.75rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 0.3125rem;
      justify-content: center;
    }

    .lstep .li {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 0.5625rem;
      background: var(--acc);
      color: #fff;
      display: grid;
      place-items: center;
      margin: 0 auto;
      font-weight: 800;
      font-size: 0.875rem;
    }

    .lstep .lt {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--t-ink);
      line-height: 1.25;
    }

    .larrow {
      display: flex;
      align-items: center;
      color: var(--t-faint);
      font-size: 1.0625rem;
    }

    /* ===================== S13 phone feed ===================== */
    .phone {
      width: 18.5rem;
      flex: none;
      margin: 0 auto;
      background: #15171b;
      border-radius: 2.375rem;
      padding: 0.6875rem;
      box-shadow: 0 1.875rem 4.375rem -1.5rem rgba(23, 26, 30, .5);
    }

    .phone .scr {
      background: #eef1f4;
      border-radius: 1.75rem;
      overflow: hidden;
      height: 38.75rem;
      display: flex;
      flex-direction: column;
    }

    .phone .pbar {
      background: #fff;
      padding: 0.875rem 1rem 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.6875rem;
      border-bottom: 0.0625rem solid #eef1f4;
    }

    .phone .pav {
      width: 2.375rem;
      height: 2.375rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      flex: none;
    }

    .phone .pbar .pn {
      font-size: 0.875rem;
      font-weight: 800;
      color: var(--ink);
    }

    .phone .pbar .ps {
      font-size: 0.6875rem;
      color: #9aa2ad;
    }

    .phone .feed {
      flex: 1;
      overflow: hidden;
      padding: 0.6875rem;
      display: flex;
      flex-direction: column;
      gap: 0.6875rem;
    }

    .fpost {
      background: #fff;
      border-radius: 0.9375rem;
      overflow: hidden;
      box-shadow: 0 0.125rem 0.5rem rgba(23, 26, 30, .05);
    }

    .fpost .fimg {
      height: 4.875rem;
      position: relative;
    }

    .fpost .fbadge {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      font-size: 0.625rem;
      font-weight: 800;
      letter-spacing: .03em;
      padding: 0.1875rem 0.5rem;
      border-radius: 0.375rem;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      text-transform: uppercase;
    }

    .fpost .ft {
      padding: 0.5625rem 0.75rem 0.6875rem;
    }

    .fpost .ft b {
      font-size: 0.7812rem;
      color: var(--ink);
      font-weight: 700;
      display: block;
      line-height: 1.25;
    }

    .fpost .ft .fd {
      font-size: 0.6562rem;
      color: #9aa2ad;
      margin-top: 0.25rem;
      font-family: var(--mono);
    }

    .posttypes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin: 1rem 0;
    }

    .ptype {
      background: var(--paper);
      border-radius: 0.875rem;
      padding: 0.9375rem 1.0625rem;
    }

    .ptype .pt-h {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--t-ink);
      margin-bottom: 0.5625rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .ptype .pt-h .d {
      width: 0.5625rem;
      height: 0.5625rem;
      border-radius: 0.1875rem;
    }

    .ptype ul {
      margin: 0;
      padding: 0 0 0 0.9375rem;
    }

    .ptype li {
      font-size: 0.8125rem;
      line-height: 1.4;
      color: var(--t-mut);
    }

    /* ===================== S14 two schemes ===================== */
    .schemes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.375rem;
      align-items: stretch;
    }

    .scheme {
      border-radius: 1.25rem;
      padding: 1.5rem 1.5rem 1.625rem;
      border: 0.0625rem solid var(--d-line);
      display: flex;
      flex-direction: column;
    }

    .scheme.bad {
      background: var(--night-2);
    }

    .scheme.good {
      background: linear-gradient(160deg, rgba(74, 140, 234, .12), rgba(33, 161, 154, .04));
      border-color: rgba(74, 140, 234, .4);
    }

    .scheme .sch-h {
      font-family: var(--mono);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 1.125rem;
    }

    .scheme.bad .sch-h {
      color: #e08a5e;
    }

    .scheme.good .sch-h {
      color: #9cc0f5;
    }

    .snode {
      padding: 0.75rem 1rem;
      border-radius: 0.6875rem;
      font-size: 0.9062rem;
      font-weight: 600;
      color: #fff;
      text-align: center;
    }

    .snode.dim {
      background: rgba(255, 255, 255, .07);
      color: #aab2bd;
    }

    .snode.warn {
      background: rgba(226, 96, 40, .16);
      color: #f0a376;
      border: 0.0625rem dashed rgba(226, 96, 40, .5);
    }

    .snode.act {
      background: rgba(74, 140, 234, .2);
      color: #bcd4f8;
    }

    .snode.win {
      background: linear-gradient(120deg, var(--blue), var(--teal));
      color: #fff;
    }

    .sarrow {
      text-align: center;
      color: #5b6470;
      font-size: 0.9375rem;
      margin: 0.4375rem 0;
    }

    .scheme .scn {
      font-size: 0.8125rem;
      line-height: 1.4;
      color: #aab2bd;
      margin-top: auto;
      padding-top: 1rem;
      font-weight: 500;
    }

    /* ===================== S14 cycle funnel (круговая воронка) ===================== */
    .cyclefunnel {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0.125rem 0;
    }

    .cf {
      position: relative;
      width: 100%;
      max-width: 55rem;
      aspect-ratio: 1000 / 452;
      margin: 0 auto;
    }

    .cf-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .cf-ellipse {
      animation: cf-dash 3.4s linear infinite;
    }

    @keyframes cf-dash {
      to {
        stroke-dashoffset: -140;
      }
    }

    /* nodes around the ring */
    .cf-node {
      position: absolute;
      transform: translate(-50%, -50%);
      width: 12.375rem;
      box-sizing: border-box;
      background: linear-gradient(160deg, rgba(74, 140, 234, .16), rgba(33, 161, 154, .05));
      border: 0.0625rem solid rgba(74, 140, 234, .34);
      border-radius: 1rem;
      padding: 0.875rem 0.875rem 0.9375rem;
      text-align: center;
      box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .30);
      animation: cf-pulse 5s ease-in-out infinite;
    }

    .cf-node .cf-num {
      position: absolute;
      top: -0.8125rem;
      left: 50%;
      transform: translateX(-50%);
      width: 1.625rem;
      height: 1.625rem;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 0.8125rem;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--teal));
      box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .38);
    }

    .cf-node .cf-t {
      font-size: 0.9688rem;
      line-height: 1.28;
      font-weight: 650;
      color: #eaf1fb;
    }

    .cf-node.win {
      background: linear-gradient(150deg, rgba(49, 194, 167, .26), rgba(74, 140, 234, .10));
      border-color: rgba(49, 194, 167, .55);
    }

    .cf-node.win .cf-num {
      background: linear-gradient(135deg, var(--teal-light), var(--teal));
    }

    .cf-node.win .cf-t {
      color: #dffaf3;
    }

    .cf-node.n1 {
      animation-delay: 0s;
    }

    .cf-node.n2 {
      animation-delay: 1s;
    }

    .cf-node.n3 {
      animation-delay: 2s;
    }

    .cf-node.n4 {
      animation-delay: 3s;
    }

    .cf-node.n5 {
      animation-delay: 4s;
    }

    @keyframes cf-pulse {

      0%,
      24%,
      100% {
        box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .30), 0 0 0 0 rgba(49, 194, 167, 0);
      }

      8% {
        box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .30), 0 0 0 0.25rem rgba(49, 194, 167, .42);
      }
    }

    /* central payoff badge */
    .cf-center {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12rem;
      box-sizing: border-box;
      text-align: center;
      padding: 1rem 0.875rem;
      border-radius: 1.125rem;
      background: linear-gradient(135deg, var(--blue), var(--teal));
      box-shadow: 0 1rem 2.625rem rgba(33, 161, 154, .38), inset 0 0.0625rem 0 rgba(255, 255, 255, .18);
      animation: cf-beat 3.6s ease-in-out infinite;
    }

    @keyframes cf-beat {

      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        transform: translate(-50%, -50%) scale(1.05);
      }
    }

    .cf-center .cf-c-l {
      font-family: var(--mono);
      font-size: 0.7188rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .85);
    }

    .cf-center .cf-c-v {
      font-size: 1.1875rem;
      font-weight: 800;
      color: #fff;
      margin-top: 0.3125rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4375rem;
    }

    .cf-center .cf-arrow {
      font-size: 1.4375rem;
      line-height: 1;
      animation: cf-arrowdrop 1.6s ease-in-out infinite;
    }

    @keyframes cf-arrowdrop {

      0%,
      100% {
        transform: translateY(-0.125rem);
        opacity: .85;
      }

      50% {
        transform: translateY(0.1875rem);
        opacity: 1;
      }
    }

    /* ===================== S15 timeline ===================== */
    .timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      position: relative;
      margin: 0.5rem 0 1.125rem;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 2%;
      right: 2%;
      top: 1.625rem;
      height: 0.125rem;
      background: linear-gradient(90deg, var(--orange), var(--teal), var(--blue));
      opacity: .45;
      z-index: 0;
    }

    .tstage {
      position: relative;
      z-index: 1;
      background: var(--paper);
      border-radius: 1rem;
      padding: 1.125rem 1.125rem 1.25rem;
    }

    .paper .tstage {
      background: #fff;
      border: 0.0625rem solid var(--t-line);
    }

    .tstage .tn {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 0.5625rem;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 800;
      font-size: 0.875rem;
      font-family: var(--mono);
      margin-bottom: 0.8125rem;
    }

    .tstage .ttl {
      font-size: 1rem;
      font-weight: 700;
      color: var(--t-ink);
      line-height: 1.15;
      margin-bottom: 0.5rem;
    }

    .tstage .tw {
      font-size: 0.8125rem;
      line-height: 1.35;
      color: var(--t-mut);
    }

    .tstage .tdur {
      font-family: var(--mono);
      font-size: 0.6875rem;
      color: var(--t-faint);
      margin-top: 0.5625rem;
      display: block;
    }

    .startbar {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      background: var(--ink);
      border-radius: 0.875rem;
      padding: 0.9375rem 1.375rem;
      color: #fff;
    }

    .startbar .sb-l {
      font-family: var(--mono);
      font-size: 0.75rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--teal-light);
      white-space: nowrap;
    }

    .startbar .sb-i {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .startbar .sb-i span {
      font-size: 0.8125rem;
      font-weight: 500;
      background: rgba(255, 255, 255, .08);
      padding: 0.375rem 0.75rem;
      border-radius: 0.5rem;
      color: #dfe3e8;
    }

    /* ===================== S16 pilot ===================== */
    .checklist {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6875rem;
    }

    .checklist li {
      display: flex;
      align-items: flex-start;
      gap: 0.8125rem;
      font-size: 1.0625rem;
      line-height: 1.35;
      color: var(--t-ink);
      font-weight: 500;
    }

    .checklist .ck {
      flex: none;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 0.4375rem;
      background: var(--teal);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 0.875rem;
      font-weight: 800;
      margin-top: 0.0625rem;
    }

    .pilotcard {
      background: var(--ink);
      color: #fff;
      border-radius: 1.5rem;
      padding: 2.25rem 2.25rem;
      position: relative;
      overflow: hidden;
    }

    .pilotcard .pl {
      font-family: var(--mono);
      font-size: 0.8125rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--teal-light);
    }

    .pilotcard .pbig {
      font-size: 5rem;
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1;
      margin: 0.875rem 0 0.5rem;
    }

    .pilotcard .psm {
      font-size: 1.0625rem;
      color: var(--d-mut);
      line-height: 1.45;
      font-weight: 450;
    }

    .pilotcard .pnote {
      margin-top: 1.375rem;
      padding-top: 1.25rem;
      border-top: 0.0625rem solid var(--d-line);
      font-size: 0.9375rem;
      color: #dfe3e8;
      line-height: 1.45;
    }

    /* ===================== S17 results ===================== */
    .statrow {
      display: flex;
      gap: 0.875rem;
      margin-top: 1.25rem;
    }

    .statcard {
      flex: 1;
      background: var(--night-2);
      border: 0.0625rem solid var(--d-line);
      border-radius: 1rem;
      padding: 1.25rem 1.375rem;
    }

    .statcard .sv {
      font-family: var(--font);
      font-size: 2.625rem;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1;
      color: var(--acc);
    }

    .statcard .sl {
      font-size: 0.875rem;
      color: #aab2bd;
      margin-top: 0.5625rem;
      line-height: 1.35;
      font-weight: 500;
    }

    /* ===================== S18 CTA ===================== */
    .cta-h {
      font-size: 3.875rem;
      line-height: 1.04;
      letter-spacing: -.03em;
      font-weight: 800;
      max-width: 18ch;
    }

    .factors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.875rem;
      margin: 1.875rem 0;
    }

    .factor {
      background: var(--night-2);
      border: 0.0625rem solid var(--d-line);
      border-radius: 1rem;
      padding: 1.375rem 1.5rem;
    }

    .factor .fh {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.5625rem;
    }

    .factor .fh .fi {
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 0.5rem;
      display: grid;
      place-items: center;
      background: var(--acc);
      color: #fff;
      font-weight: 800;
    }

    .factor p {
      margin: 0;
      font-size: 0.9062rem;
      line-height: 1.4;
      color: #aab2bd;
      font-weight: 450;
    }

    .ctabar {
      display: flex;
      align-items: center;
      gap: 1.375rem;
      flex-wrap: wrap;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.8125rem;
      background: var(--orange);
      color: #fff;
      padding: 1.1875rem 2rem;
      border-radius: 0.9375rem;
      font-size: 1.25rem;
      font-weight: 700;
      text-decoration: none;
    }

    .cta-btn .ar {
      font-size: 1.375rem;
    }

    .cta-price {
      font-size: 1.25rem;
      color: #aab2bd;
      line-height: 1.5;
    }

    .cta-price b {
      color: var(--teal-light);
      font-weight: 700;
    }

    /* ===================== PROOF - full screenshots, never cropped ===================== */
    .proof .body {
      justify-content: center;
    }

    .proofwrap {
      display: flex;
      flex-direction: column;
      gap: 1.375rem;
      align-items: center;
      justify-content: center;
      flex: 1;
      min-height: 0;
    }

    .prooflead {
      text-align: center;
      max-width: 74ch;
      margin: 0 auto;
    }

    .proofrow {
      display: flex;
      gap: 1.875rem;
      align-items: flex-start;
      justify-content: center;
      width: 100%;
      min-height: 0;
      flex-wrap: nowrap;
    }

    .proofitem {
      display: flex;
      flex-direction: column;
      gap: 0.8125rem;
      min-width: 0;
      align-items: center;
    }

    .proofitem .shot {
      display: inline-block;
      width: auto;
      max-width: 100%;
    }

    .proofitem .shot img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
    }

    .proofcap {
      font-size: 0.9688rem;
      line-height: 1.42;
      color: var(--t-faint);
      font-weight: 500;
      max-width: 46ch;
      text-align: center;
    }

    .dark .proofcap,
    .ink .proofcap {
      color: var(--d-mut);
    }

    .proofcap b {
      color: var(--acc);
      font-weight: 700;
    }

    .proofcap .mk {
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--acc);
      display: block;
      margin-bottom: 0.3125rem;
    }

    /* ===================== CALLOUT - selling-argument quote (s15b) ===================== */
    .callout {
      background: var(--paper);
      border-radius: 1.125rem;
      padding: 1.375rem 1.625rem;
      border-left: 0.25rem solid var(--acc, var(--orange));
    }

    .paper .callout {
      background: #fff;
    }

    .dark .callout,
    .ink .callout {
      background: rgba(255, 255, 255, .05);
    }

    .callout .ct {
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--acc, var(--orange));
      margin-bottom: 0.625rem;
    }

    .callout p {
      margin: 0;
      font-size: 1.125rem;
      line-height: 1.5;
      color: var(--t-mut);
      font-weight: 450;
    }

    .dark .callout p,
    .ink .callout p {
      color: #c2c9d2;
    }

    .callout p b {
      color: var(--t-ink);
      font-weight: 700;
    }

    .dark .callout p b,
    .ink .callout p b {
      color: #fff;
    }

    /* ===================== BENEFITS row (s13b) ===================== */
    .benefits {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.8125rem;
    }

    .benefit {
      background: var(--paper);
      border-radius: 0.9375rem;
      padding: 1.125rem 1.1875rem;
      font-size: 0.9375rem;
      line-height: 1.36;
      color: var(--t-mut);
      font-weight: 450;
    }

    .paper .benefit {
      background: #fff;
    }

    .dark .benefit {
      background: var(--night-2);
      color: #c2c9d2;
      border: 0.0625rem solid var(--d-line);
    }

    .benefit b {
      display: block;
      color: var(--t-ink);
      font-weight: 700;
      margin-bottom: 0.375rem;
      font-size: 0.9688rem;
    }

    .dark .benefit b {
      color: #fff;
    }

    /* ===================== BUDGET line (s17) ===================== */
    .budgetline {
      display: flex;
      align-items: center;
      gap: 1.375rem;
      background: var(--night-2);
      border: 0.0625rem solid var(--d-line);
      border-radius: 1.125rem;
      padding: 1.375rem 1.75rem;
    }

    .budgetline .bfrom {
      font-family: var(--font);
      font-size: 2.375rem;
      font-weight: 800;
      color: var(--teal-light);
      white-space: nowrap;
      letter-spacing: -.025em;
      line-height: 1;
    }

    .budgetline .btxt {
      font-size: 1rem;
      line-height: 1.45;
      color: #aab2bd;
      font-weight: 450;
    }

    .budgetline .btxt b {
      color: #fff;
      font-weight: 700;
    }

    /* ===================== cost split (s17): text left ~2/3, infographic right ===================== */
    .cost-cols {
      display: grid;
      grid-template-columns: 1.7fr 1fr;
      gap: 2.875rem;
      align-items: stretch;
      flex: 1;
      min-height: 0;
    }

    .cost-left {
      display: flex;
      flex-direction: column;
      gap: 1.375rem;
      min-height: 0;
    }

    .cost-left .factors {
      margin: 0;
    }

    .lead-cue {
      display: inline-block;
      margin-top: 0.75rem;
      color: var(--d-ink);
      font-weight: 700;
    }

    .cost-right {
      align-self: stretch;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ----- configurator infographic (s18) ----- */
    .cfg {
      position: relative;
      width: 100%;
      overflow: hidden;
      background: var(--night-2);
      border: 0.0625rem solid var(--d-line);
      border-radius: var(--r);
      padding: 1.875rem 1.875rem 1.625rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .cfg .glow-c {
      position: absolute;
      width: 22.5rem;
      height: 22.5rem;
      top: -22%;
      right: -18%;
      background: radial-gradient(circle, rgba(33, 161, 154, .16), transparent 64%);
      pointer-events: none;
    }

    .cfg-eyebrow {
      font-family: var(--mono);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--teal-light);
      z-index: 1;
    }

    .cfg-block {
      z-index: 1;
    }

    .cfg-h {
      display: flex;
      align-items: center;
      gap: 0.6875rem;
      font-size: 1.125rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.75rem;
    }

    .cfg-h .cfg-i {
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 0.5rem;
      display: grid;
      place-items: center;
      background: var(--orange);
      color: #fff;
      font-weight: 800;
      font-size: 0.9375rem;
      flex: none;
    }

    .sld {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      margin: 0.5625rem 0;
    }

    .sld-lab {
      font-family: var(--mono);
      font-size: 0.8125rem;
      color: var(--d-mut);
      width: 5.75rem;
      flex: none;
    }

    .sld-track {
      position: relative;
      height: 0.5rem;
      border-radius: 6.1875rem;
      background: rgba(255, 255, 255, .10);
      flex: 1;
    }

    .sld-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      border-radius: 6.1875rem;
      background: linear-gradient(90deg, var(--teal), var(--teal-light));
    }

    .sld-knob {
      position: absolute;
      top: 50%;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background: #fff;
      border: 0.1875rem solid var(--teal-light);
      transform: translate(-50%, -50%);
      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .35);
    }

    .sld-val {
      font-family: var(--mono);
      font-size: 0.8125rem;
      color: #fff;
      width: 4.75rem;
      flex: none;
      text-align: right;
    }

    .cfg-hint {
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--d-faint);
      margin-top: 0.5rem;
    }

    .cfg-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5625rem;
    }

    .cfg-chips .chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4375rem;
      padding: 0.5625rem 0.8125rem;
      border-radius: 0.75rem;
      font-size: 0.875rem;
      font-weight: 600;
      border: 0.0625rem solid var(--d-line);
      color: var(--d-mut);
    }

    .cfg-chips .chip.on {
      background: var(--teal);
      border-color: var(--teal);
      color: #fff;
    }

    .cfg-chips .chip .ck {
      font-size: 0.75rem;
    }

    .cfg-merge {
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1;
    }

    .cfg-spine {
      width: 0.125rem;
      height: 1.5rem;
      background: repeating-linear-gradient(180deg, var(--teal-light) 0 0.375rem, transparent 0.375rem 0.75rem);
      background-size: 0.125rem 0.75rem;
      animation: cfg-flow 1.1s linear infinite;
    }

    @keyframes cfg-flow {
      to {
        background-position: 0 0.75rem;
      }
    }

    .cfg-sum {
      width: 2.375rem;
      height: 2.375rem;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--night-3);
      border: 0.0625rem solid var(--d-line);
      color: var(--teal-light);
      font-size: 1.125rem;
      font-weight: 800;
    }

    .cfg-total {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      background: var(--night-3);
      border: 0.0625rem solid var(--d-line);
      border-radius: 1.125rem;
      padding: 1.125rem 1.375rem;
      z-index: 1;
    }

    .cfg-total .cfg-big {
      font-size: 2.5rem;
      font-weight: 800;
      letter-spacing: -.025em;
      color: var(--teal-light);
      line-height: 1;
    }

    .cfg-total .cfg-sub {
      font-size: 0.875rem;
      color: var(--d-mut);
      line-height: 1.4;
    }

    @media (prefers-reduced-motion: reduce) {
      .cfg-spine {
        animation: none;
      }
    }

    /* ----- stylized calculator (s18, decorative) ----- */
    .calc-svg {
      width: 100%;
      max-width: 23.75rem;
      height: auto;
    }

    .calc-float {
      animation: cc-float 5s ease-in-out infinite;
      transform-origin: center;
    }

    @keyframes cc-float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-0.625rem);
      }
    }

    .cc-glow {
      animation: cc-glow 4.5s ease-in-out infinite;
    }

    @keyframes cc-glow {

      0%,
      100% {
        opacity: .6;
      }

      50% {
        opacity: 1;
      }
    }

    .cc-eq {
      transform-box: fill-box;
      transform-origin: center;
      animation: cc-eq 1.7s ease-in-out infinite;
    }

    @keyframes cc-eq {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: .82;
        transform: scale(1.06);
      }
    }

    .cc-tap {
      opacity: 0;
      animation: cc-tap 3.6s ease-in-out infinite;
    }

    @keyframes cc-tap {

      0%,
      100% {
        opacity: 0;
      }

      8% {
        opacity: .5;
      }

      22% {
        opacity: 0;
      }
    }

    .cc-seg {
      transform-box: fill-box;
      transform-origin: center;
      animation: cc-seg 2.8s ease-in-out infinite;
    }

    @keyframes cc-seg {

      0%,
      100% {
        opacity: .26;
      }

      50% {
        opacity: .85;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .calc-float,
      .cc-glow,
      .cc-eq,
      .cc-tap,
      .cc-seg {
        animation: none;
      }

      .cc-tap {
        opacity: 0;
      }
    }

    /* ----- audit loupe (s17, decorative · "лупа находит точки роста") ----- */
    .audit-svg {
      width: 100%;
      max-width: 31.25rem;
      height: auto;
    }

    /* loupe rides along the growth line, pausing on each of the 4 peaks (12s loop) */
    .au-loupe {
      animation: au-scan 12s ease-in-out infinite;
      /* transform-origin: center; */
    }

    @keyframes au-scan {

      0% {
        transform: translate(90px, 210px) scale(1.06);
      }

      8% {
        transform: translate(90px, 210px) scale(1.06);
      }

      16% {
        transform: translate(110px, 256px) scale(1);
      }

      25% {
        transform: translate(134px, 150px) scale(1.06);
      }

      33% {
        transform: translate(134px, 150px) scale(1.06);
      }

      41% {
        transform: translate(166px, 228px) scale(1);
      }

      50% {
        transform: translate(200px, 196px) scale(1.06);
      }

      58% {
        transform: translate(200px, 196px) scale(1.06);
      }

      66% {
        transform: translate(232px, 256px) scale(1);
      }

      75% {
        transform: translate(278px, 128px) scale(1.06);
      }

      83% {
        transform: translate(278px, 128px) scale(1.06);
      }

      92% {
        transform: translate(170px, 250px) scale(1);
      }

      100% {
        transform: translate(90px, 210px) scale(1.06);
      }
    }

    .au-amb {
      animation: au-amb 5s ease-in-out infinite;
    }

    @keyframes au-amb {

      0%,
      100% {
        opacity: .5;
      }

      50% {
        opacity: 1;
      }
    }

    /* idle dots - slight blink while waiting to be found */
    .au-dot {
      transform-box: fill-box;
      transform-origin: center;
      animation: au-blink 2.6s ease-in-out infinite;
    }

    @keyframes au-blink {

      0%,
      100% {
        opacity: .4;
        transform: scale(.82);
      }

      50% {
        opacity: .78;
        transform: scale(1.04);
      }
    }

    /* found! - bright pop, synced to the loupe arrival via animation-delay */
    .au-find {
      transform-box: fill-box;
      transform-origin: center;
      opacity: 0;
      animation: au-pop 12s ease-in-out infinite;
    }

    .au-ring {
      transform-box: fill-box;
      transform-origin: center;
      opacity: 0;
      animation: au-ring 12s ease-in-out infinite;
    }

    @keyframes au-pop {
      0% {
        opacity: 1;
        transform: scale(1.65);
      }

      7% {
        opacity: 1;
        transform: scale(1.65);
      }

      15% {
        opacity: 0;
        transform: scale(.6);
      }

      100% {
        opacity: 0;
        transform: scale(.6);
      }
    }

    @keyframes au-ring {
      0% {
        opacity: .9;
        transform: scale(.55);
      }

      14% {
        opacity: 0;
        transform: scale(2.7);
      }

      100% {
        opacity: 0;
        transform: scale(2.7);
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .au-loupe,
      .au-amb,
      .au-dot,
      .au-find,
      .au-ring {
        animation: none;
      }

      .au-find {
        opacity: 1;
      }
    }

    /* ===================== FINAL hero scene (s17b) - coded, on-brand ===================== */
    .finalcols {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: 3.375rem;
      align-items: center;
      flex: 1;
      min-height: 0;
    }

    .finalscene {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 28.75rem;
    }

    .fl-laptop {
      position: relative;
      z-index: 2;
      width: 26.875rem;
      max-width: 100%;
    }

    .fl-lid {
      background: #0e1014;
      border: 0.0625rem solid rgba(255, 255, 255, .14);
      border-radius: 1rem;
      padding: 0.8125rem;
      box-shadow: 0 2.5rem 5.625rem -1.875rem rgba(0, 0, 0, .7);
    }

    .fl-site {
      background: #fff;
      border-radius: 0.5625rem;
      overflow: hidden;
    }

    .fl-site .fs-bar {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.5625rem 0.75rem;
      background: #f2f5f7;
      border-bottom: 0.0625rem solid #e2e7ec;
    }

    .fl-site .fs-bar i {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: #cfd6dd;
    }

    .fl-site .fs-bar .fs-url {
      margin-left: 0.5rem;
      font-family: var(--mono);
      font-size: 0.625rem;
      color: #8a929d;
      background: #fff;
      padding: 0.1875rem 0.625rem;
      border-radius: 0.375rem;
    }

    .fl-site .fs-body {
      padding: 0.8125rem;
    }

    .fl-site .fs-hero {
      height: 3.375rem;
      border-radius: 0.4375rem;
      background: linear-gradient(120deg, #2b2d33, #171a1e);
      margin-bottom: 0.625rem;
      position: relative;
      overflow: hidden;
    }

    .fl-site .fs-hero::after {
      content: "";
      position: absolute;
      right: -20%;
      top: -40%;
      width: 60%;
      height: 180%;
      background: radial-gradient(circle, rgba(33, 161, 154, .5), transparent 65%);
    }

    .fl-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.4375rem;
    }

    .fl-card {
      height: 2.875rem;
      border-radius: 0.375rem;
      background: #f2f5f7;
    }

    .fl-base {
      width: 30rem;
      max-width: 116%;
      height: 0.8125rem;
      margin: -0.0625rem auto 0;
      border-radius: 0 0 1rem 1rem;
      background: linear-gradient(#3a3f47, #23262b);
      box-shadow: 0 1.125rem 1.875rem -1.125rem rgba(0, 0, 0, .7);
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .fl-base::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 4.875rem;
      height: 0.25rem;
      border-radius: 0 0 0.375rem 0.375rem;
      background: #15171b;
    }

    .fl-chip {
      position: absolute;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 0.5625rem;
      background: var(--night-2);
      border: 0.0625rem solid rgba(255, 255, 255, .13);
      border-radius: 0.8125rem;
      padding: 0.6875rem 0.9375rem;
      font-size: 0.9062rem;
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      box-shadow: 0 1.125rem 2.5rem -1.25rem rgba(0, 0, 0, .6);
    }

    .fl-chip .fd {
      width: 0.5625rem;
      height: 0.5625rem;
      border-radius: 50%;
      flex: none;
    }

    .fl-chip.c1 {
      top: 4%;
      left: -2%;
    }

    .fl-chip.c2 {
      top: 20%;
      right: -4%;
    }

    .fl-chip.c3 {
      bottom: 24%;
      left: -6%;
    }

    .fl-chip.c4 {
      bottom: 2%;
      right: 2%;
    }

    .fl-chip.c5 {
      top: 46%;
      left: -10%;
    }

    .fl-chip.c6 {
      bottom: 50%;
      right: -9%;
    }

    .finalscene .fl-orbit {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    /* ===================== S24 · Финал - живой магазин (анимированная инфографика) ===================== */
    .finalscene {
      perspective: 93.75rem;
    }

    /* пульсирующая аура за устройством */
    .fl-aura {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 37.5rem;
      height: 37.5rem;
      transform: translate(-50%, -50%);
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(circle, rgba(49, 194, 167, .18), rgba(74, 140, 234, .08) 46%, transparent 68%);
      animation: fl-aura 6s ease-in-out infinite;
    }

    @keyframes fl-aura {

      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .8;
      }

      50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 1;
      }
    }

    /* орбитальные кольца - эхо ракеты со слайда 12 */
    .fl-orbit svg {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 42.5rem;
      height: 35rem;
      transform: translate(-50%, -50%);
      overflow: visible;
    }

    .fl-ring {
      fill: none;
      stroke-width: 1.4;
      opacity: .42;
      transform-box: fill-box;
      transform-origin: center;
    }

    .fl-ring.r1 {
      stroke: #31c2a7;
      animation: fl-spin 30s linear infinite;
    }

    .fl-ring.r2 {
      stroke: #4a8cea;
      animation: fl-spin 42s linear infinite reverse;
    }

    @keyframes fl-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .fl-pdot {
      filter: drop-shadow(0 0 0.3125rem currentColor);
    }

    .fl-pdot.t {
      fill: #31c2a7;
      color: #31c2a7;
    }

    .fl-pdot.b {
      fill: #4a8cea;
      color: #4a8cea;
    }

    /* шапка браузера - индикатор LIVE */
    .fl-site .fs-bar .fs-live {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 0.3125rem;
      font-family: var(--mono);
      font-size: 0.5312rem;
      font-weight: 700;
      letter-spacing: .08em;
      color: #21a19a;
    }

    .fl-site .fs-bar .fs-live b {
      width: 0.375rem;
      height: 0.375rem;
      border-radius: 50%;
      background: #21a19a;
      box-shadow: 0 0 0 0 rgba(33, 161, 154, .6);
      animation: fl-live 1.8s ease-out infinite;
    }

    @keyframes fl-live {
      0% {
        box-shadow: 0 0 0 0 rgba(33, 161, 154, .55);
      }

      70% {
        box-shadow: 0 0 0 0.4375rem rgba(33, 161, 154, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(33, 161, 154, 0);
      }
    }

    /* герой-баннер: печатающийся заголовок + скан-линия */
    .fl-site .fs-hero {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0 0.75rem;
    }

    .fh-badge {
      flex: none;
      font-family: var(--mono);
      font-size: 0.5625rem;
      font-weight: 800;
      letter-spacing: .04em;
      color: #0e1014;
      background: linear-gradient(120deg, #31c2a7, #4a8cea);
      border-radius: 0.3125rem;
      padding: 0.1875rem 0.375rem;
      box-shadow: 0 0 0.75rem rgba(49, 194, 167, .5);
      animation: fl-badge 2.4s ease-in-out infinite;
    }

    @keyframes fl-badge {

      0%,
      100% {
        box-shadow: 0 0 0.625rem rgba(49, 194, 167, .4);
      }

      50% {
        box-shadow: 0 0 1.125rem rgba(74, 140, 234, .7);
      }
    }

    .fh-type {
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 600;
      color: #eaf6f3;
      white-space: nowrap;
      overflow: hidden;
      border-right: 0.125rem solid #31c2a7;
      width: 0;
      animation: fl-type 5.6s steps(24) infinite, fl-caret .8s step-end infinite;
    }

    @keyframes fl-type {
      0% {
        width: 0;
      }

      45% {
        width: 22ch;
      }

      62% {
        width: 22ch;
      }

      80% {
        width: 0;
      }

      100% {
        width: 0;
      }
    }

    @keyframes fl-caret {

      0%,
      100% {
        border-color: transparent;
      }

      50% {
        border-color: #31c2a7;
      }
    }

    .fh-scan {
      position: absolute;
      top: 0;
      left: -40%;
      width: 35%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(49, 194, 167, .35), transparent);
      animation: fl-scan 3.4s ease-in-out infinite;
    }

    @keyframes fl-scan {
      0% {
        left: -40%;
      }

      60%,
      100% {
        left: 110%;
      }
    }

    /* живые карточки товаров */
    .fl-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
    }

    .fl-card {
      height: auto;
      background: #f6f8fa;
      border: 0.0625rem solid #e7ecf0;
      border-radius: 0.4375rem;
      padding: 0.375rem;
      display: flex;
      flex-direction: column;
      gap: 0.3125rem;
      overflow: hidden;
    }

    .fc-thumb {
      height: 1.5rem;
      border-radius: 0.25rem;
      background: linear-gradient(120deg, #cfd8e2, #e6ecf2);
      background-size: 200% 100%;
      position: relative;
      overflow: hidden;
      animation: fl-shimmer 2.6s linear infinite;
    }

    .fl-card:nth-child(8n+1) .fc-thumb {
      background-image: linear-gradient(120deg, #3f7fe0, #6ea8f2);
    }

    .fl-card:nth-child(8n+2) .fc-thumb {
      background-image: linear-gradient(120deg, #e9a23b, #f3c277);
    }

    .fl-card:nth-child(8n+3) .fc-thumb {
      background-image: linear-gradient(120deg, #31c2a7, #6ee0cb);
    }

    .fl-card:nth-child(8n+4) .fc-thumb {
      background-image: linear-gradient(120deg, #6f6ae0, #9b97ee);
    }

    .fl-card:nth-child(8n+5) .fc-thumb {
      background-image: linear-gradient(120deg, #21a19a, #4fc7be);
    }

    .fl-card:nth-child(8n+6) .fc-thumb {
      background-image: linear-gradient(120deg, #4a8cea, #7db0f4);
    }

    .fl-card:nth-child(8n+7) .fc-thumb {
      background-image: linear-gradient(120deg, #e26028, #f0905f);
    }

    .fl-card:nth-child(8n) .fc-thumb {
      background-image: linear-gradient(120deg, #3f7fe0, #31c2a7);
    }

    @keyframes fl-shimmer {
      to {
        background-position: -200% 0;
      }
    }

    .fc-l1,
    .fc-l2 {
      height: 0.3125rem;
      border-radius: 0.1875rem;
      background: linear-gradient(90deg, #21a19a, #31c2a7);
      background-size: 220% 100%;
      animation: fl-fillbar 3s ease-in-out infinite;
    }

    .fc-l1 {
      width: 92%;
    }

    .fc-l2 {
      width: 64%;
      opacity: .55;
      background: linear-gradient(90deg, #b8c2cd, #d4dbe3);
    }

    @keyframes fl-fillbar {

      0%,
      100% {
        background-position: 110% 0;
      }

      50% {
        background-position: 0 0;
      }
    }

    .fc-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.0625rem;
    }

    .fc-price {
      width: 30%;
      height: 0.4375rem;
      border-radius: 0.1875rem;
      background: #2b2d33;
    }

    .fc-stars {
      display: inline-flex;
      gap: 0.125rem;
    }

    .fc-stars i {
      width: 0.3125rem;
      height: 0.3125rem;
      background: #e9a23b;
      clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: fl-star 2.8s ease-in-out infinite;
    }

    .fc-stars i:nth-child(2) {
      animation-delay: .25s;
    }

    .fc-stars i:nth-child(3) {
      animation-delay: .5s;
    }

    @keyframes fl-star {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: .55;
        transform: scale(.82);
      }
    }

    /* появление карточек при входе на слайд */
    .slide.fin.run .fl-card {
      opacity: 0;
      transform: translateY(0.625rem) scale(.96);
      animation: fl-pop .52s cubic-bezier(.2, .8, .25, 1) forwards;
    }

    .slide.fin.run .fl-card:nth-child(1) {
      animation-delay: .15s;
    }

    .slide.fin.run .fl-card:nth-child(2) {
      animation-delay: .24s;
    }

    .slide.fin.run .fl-card:nth-child(3) {
      animation-delay: .33s;
    }

    .slide.fin.run .fl-card:nth-child(4) {
      animation-delay: .42s;
    }

    .slide.fin.run .fl-card:nth-child(5) {
      animation-delay: .51s;
    }

    .slide.fin.run .fl-card:nth-child(6) {
      animation-delay: .6s;
    }

    .slide.fin.run .fl-card:nth-child(7) {
      animation-delay: .69s;
    }

    .slide.fin.run .fl-card:nth-child(8) {
      animation-delay: .78s;
    }

    @keyframes fl-pop {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* мягкое "парение" чипов */
    .finalscene .fl-chip {
      animation: fl-chipfloat 5.2s ease-in-out infinite;
    }

    .finalscene .fl-chip.c2 {
      animation-delay: .6s;
    }

    .finalscene .fl-chip.c3 {
      animation-delay: 1.2s;
    }

    .finalscene .fl-chip.c4 {
      animation-delay: 1.8s;
    }

    .finalscene .fl-chip.c5 {
      animation-delay: 2.4s;
    }

    @keyframes fl-chipfloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-0.4375rem);
      }
    }

    .finalscene .fl-chip .fd {
      box-shadow: 0 0 0.5rem currentColor;
      animation: fl-fd 2.2s ease-in-out infinite;
    }

    @keyframes fl-fd {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .5;
      }
    }

    /* контент - главный чип */
    .finalscene .fl-chip.lead-chip {
      top: -6%;
      left: 50%;
      right: auto;
      bottom: auto;
      transform: translateX(-50%);
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1875rem;
      padding: 0.6875rem 1.0625rem;
      font-size: 1.0625rem;
      letter-spacing: -.01em;
      background: linear-gradient(160deg, #1c2733, #161d24);
      border: 0.0625rem solid rgba(49, 194, 167, .55);
      box-shadow: 0 0 0 0.0625rem rgba(49, 194, 167, .12), 0 1.125rem 2.875rem -1rem rgba(0, 0, 0, .7), 0 0 2rem rgba(49, 194, 167, .28);
      animation: fl-lead 4.4s ease-in-out infinite;
    }

    .finalscene .fl-chip.lead-chip .lc-row {
      display: flex;
      align-items: center;
      gap: 0.5625rem;
    }

    .finalscene .fl-chip.lead-chip .lc-row .fd {
      width: 0.625rem;
      height: 0.625rem;
      background: linear-gradient(120deg, #31c2a7, #4a8cea) !important;
    }

    .finalscene .fl-chip.lead-chip .ch-sub {
      font-size: 0.6562rem;
      font-weight: 600;
      letter-spacing: 0;
      color: #9fb0ad;
      padding-left: 1.1875rem;
    }

    @keyframes fl-lead {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
        box-shadow: 0 0 0 0.0625rem rgba(49, 194, 167, .12), 0 1.125rem 2.875rem -1rem rgba(0, 0, 0, .7), 0 0 1.75rem rgba(49, 194, 167, .25);
      }

      50% {
        transform: translateX(-50%) translateY(-0.375rem);
        box-shadow: 0 0 0 0.0625rem rgba(49, 194, 167, .2), 0 1.375rem 3.25rem -1rem rgba(0, 0, 0, .7), 0 0 2.5rem rgba(49, 194, 167, .42);
      }
    }

    /* бегущая строка типов контента */
    .fl-ticker {
      position: absolute;
      left: 50%;
      bottom: 1%;
      transform: translateX(-50%);
      z-index: 4;
      width: 88%;
      max-width: 28.75rem;
      overflow: hidden;
      padding: 0.5rem 0;
      border-radius: 0.6875rem;
      background: rgba(20, 24, 30, .72);
      border: 0.0625rem solid rgba(255, 255, 255, .08);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    }

    .fl-ticker-track {
      display: inline-block;
      white-space: nowrap;
      font-family: var(--mono);
      font-size: 0.7188rem;
      font-weight: 600;
      color: #cdd6df;
      animation: fl-ticker 22s linear infinite;
    }

    .fl-ticker-track b {
      color: #31c2a7;
      font-weight: 700;
    }

    @keyframes fl-ticker {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    /* перенесённый из пилота блок "что входит" на финальном слайде */
    .slide.fin .fin-incl {
      margin: 1.125rem 0 1.625rem;
    }

    .slide.fin .fin-incl-h {
      font-family: var(--mono);
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--teal-light);
      margin-bottom: 0.8125rem;
    }

    .slide.fin .checklist {
      gap: 0.5rem;
    }

    .slide.fin .checklist li {
      color: #d7dde4;
      font-size: 1.125rem;
      line-height: 1.3;
      gap: 0.625rem;
    }

    .slide.fin .checklist .ck {
      width: 1.1875rem;
      height: 1.1875rem;
      border-radius: 0.375rem;
      font-size: 0.6875rem;
      background: var(--teal);
    }

    @media (prefers-reduced-motion: reduce) {

      .fl-aura,
      .fl-ring,
      .fc-thumb,
      .fc-l1,
      .fc-l2,
      .fc-stars i,
      .fh-badge,
      .fh-scan,
      .fs-live b,
      .finalscene .fl-chip,
      .finalscene .fl-chip .fd,
      .fl-ticker-track,
      .fh-type {
        animation: none !important;
      }

      .fh-type {
        width: 22ch;
        border-color: transparent;
      }
    }

    /* ===================== S13 / slide 15 · Каналы (объединённый) ===================== */
    .s-channels .cols-ch {
      display: grid;
      grid-template-columns: 1.72fr .78fr;
      gap: 2.5rem;
      align-items: center;
      flex: 1;
      min-height: 0;
    }

    .s-channels .left-stack {
      display: flex;
      flex-direction: column;
      gap: 0.9375rem;
      min-height: 0;
    }

    .s-channels h2.htitle {
      font-size: 2.5625rem;
      line-height: 1.04;
    }

    .s-channels p.body-text {
      font-size: 1.25rem;
      line-height: 1.5;
      margin: 0;
      max-width: 60ch;
    }

    .s-channels .intro-line {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--t-ink);
      margin: 0.125rem 0 0;
      letter-spacing: -.01em;
    }

    .s-channels .posttypes {
      margin: 0;
      grid-template-columns: 1fr 1fr;
      gap: 0.8125rem;
    }

    .s-channels .ptype {
      padding: 0.8125rem 1rem;
    }

    .s-channels .ptype .pt-h {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }

    .s-channels .ptype li {
      font-size: 1.125rem;
      line-height: 1.36;
      margin-bottom: 0.1875rem;
    }

    .s-channels .keyphrase {
      padding: 0.875rem 1.25rem;
      gap: 1rem;
    }

    .s-channels .keyphrase p {
      font-size: 1.25rem;
      line-height: 1.38;
    }

    /* --- infographic benefits --- */
    .s-channels .benefits-ig {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.75rem;
    }

    .s-channels .bcard {
      position: relative;
      background: var(--paper);
      border: 0.0625rem solid rgba(20, 30, 45, .07);
      border-radius: 0.9375rem;
      padding: 0.875rem 0.875rem 0.9375rem;
      overflow: hidden;
    }

    .s-channels .bcard::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0.1875rem;
      background: linear-gradient(180deg, var(--blue), var(--teal));
    }

    .s-channels .bcard .bic {
      width: 2.125rem;
      height: 2.125rem;
      border-radius: 0.625rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--blue), var(--teal));
      color: #fff;
      margin-bottom: 0.5625rem;
      box-shadow: 0 0.375rem 0.875rem -0.375rem rgba(74, 140, 234, .6);
    }

    .s-channels .bcard .bic svg {
      width: 1.1875rem;
      height: 1.1875rem;
      stroke: #fff;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .s-channels .bcard .bt {
      display: block;
      font-size: 1.125rem;
      font-weight: 800;
      color: var(--t-ink);
      line-height: 1.16;
      letter-spacing: -.01em;
      margin-bottom: 0.3125rem;
    }

    .s-channels .bcard .bd {
      font-size: 1.125rem;
      line-height: 1.34;
      color: var(--t-mut);
    }

    .s-channels .bcard .bnum {
      position: absolute;
      top: 0.6875rem;
      right: 0.8125rem;
      font-family: var(--mono);
      font-size: 0.8125rem;
      font-weight: 700;
      color: rgba(20, 30, 45, .12);
    }

    .s-channels .phone {
      position: relative;
      transform: translateX(0.625rem);
      padding: 0.75rem;
      background: linear-gradient(158deg, #20242b, #0f1216);
      border: 0.0625rem solid #2c313a;
      box-shadow: 0 2.875rem 5.25rem -2.125rem rgba(13, 18, 28, .62), 0 0.875rem 2rem -1rem rgba(13, 18, 28, .55), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);
    }

    .s-channels .phone .scr {
      position: relative;
    }

    .s-channels .phone .punch {
      position: absolute;
      top: 0.4375rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0.5625rem;
      height: 0.5625rem;
      border-radius: 50%;
      background: #0a0c10;
      box-shadow: inset 0 0 0.125rem rgba(120, 150, 190, .5);
      z-index: 7;
    }

    .s-channels .phone .home {
      position: absolute;
      bottom: 0.4375rem;
      left: 50%;
      transform: translateX(-50%);
      width: 6.125rem;
      height: 0.25rem;
      border-radius: 0.1875rem;
      background: rgba(18, 22, 30, .3);
      z-index: 4;
    }

    /* --- swiping feed --- */
    .s-channels .feed {
      padding: 0.6875rem;
    }

    .s-channels .feed-track {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .s-channels .feed-track .fpost {
      flex: none;
    }

    .s-channels .feed-track .fimg {
      height: 8.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .s-channels .feed-track .fimg .fdraw {
      width: 6rem;
      height: 6rem;
      fill: none;
      stroke: rgba(255, 255, 255, .92);
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .s-channels .feed-track .ft {
      padding: 0.6875rem 0.8125rem 0.75rem;
    }

    .s-channels .feed-track .ft b {
      font-size: 0.8438rem;
      line-height: 1.25;
      display: block;
    }

    .s-channels .fpriceline {
      font-size: 0.875rem;
      font-weight: 800;
      color: var(--t-ink);
      margin-top: 0.375rem;
    }

    .s-channels .fmeta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.375rem;
    }

    .s-channels .fmeta .fd {
      margin-top: 0;
    }

    .s-channels .tag {
      font-family: var(--mono);
      font-size: 0.5938rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 0.1875rem 0.4375rem;
      border-radius: 0.375rem;
    }

    .s-channels .tg-prod {
      background: var(--blue-soft);
      color: #1b4f9b;
    }

    .s-channels .tg-info {
      background: var(--teal-soft);
      color: #0d6b63;
    }


/* ---- inner SVG/element styles moved from slide markup (SEO-filters) ---- */
                    .fakepage text {
                      font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
                    }
                    .nchip {
                      animation: nflt 4.4s ease-in-out infinite;
                    }

                    @keyframes nflt {

                      0%,
                      100% {
                        transform: translateY(0)
                      }

                      50% {
                        transform: translateY(-0.5rem)
                      }
                    }

                    .ndot {
                      animation: ndt 2.2s ease-in-out infinite;
                    }

                    @keyframes ndt {

                      0%,
                      100% {
                        opacity: 1
                      }

                      50% {
                        opacity: .4
                      }
                    }

                    .ndash {
                      animation: ndh 1.1s linear infinite;
                    }

                    @keyframes ndh {
                      to {
                        stroke-dashoffset: -30
                      }
                    }

                    .fakepage text, .tagshot text {
                      font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
                    }
                .tagshot {
                  position: relative;
                  overflow: visible;
                }

                .tagshot .pagewrap {
                  position: relative;
                  overflow: visible;
                }

                .tagshot .fakepage {
                  width: 100%;
                  height: auto;
                  display: block;
                  border-bottom-left-radius: 1.125rem;
                  border-bottom-right-radius: 1.125rem;
                }

                .tagshot .callouts {
                  position: absolute;
                  inset: 0;
                  width: 100%;
                  height: 100%;
                  overflow: visible;
                  pointer-events: none;
                }


/* ---- per-instance styles extracted from inline markup (was style="") ---- */
.screen .ix1{color:#fff}
.screen .ix2{width:48.75rem;height:48.75rem;top:-22%;right:-12%;background:radial-gradient(circle,rgba(33,161,154,.22),transparent 62%)}
.screen .ix3{width:35rem;height:35rem;bottom:-26%;left:6%;background:radial-gradient(circle,rgba(226,96,40,.14),transparent 64%)}
.screen .ix4{color:var(--teal-light)}
.screen .ix5{color:var(--ink)}
.screen .ix6{max-width:62ch}
.screen .ix7{gap:0.8125rem}
.screen .ix8{margin-top:1.375rem;max-width:46ch}
.screen .ix9{margin-top:1.625rem;max-width:80ch}
.screen .ix10{grid-column:1 / -1}
.screen .ix11{margin-top:1rem}
.screen .ix12{color:#fff}
.screen .ix13{width:35rem;height:35rem;bottom:-30%;right:-8%;background:radial-gradient(circle,rgba(33,161,154,.18),transparent 64%)}
.screen .ix14{color:var(--teal-light)}
.screen .ix15{align-items:center}
.screen .ix16{margin-top:1.25rem;max-width:48ch}
.screen .ix17{margin:0 0 0.875rem;max-width:48ch}
.screen .ix18{margin-top:1.375rem}
.screen .ix19{color:#f0a59f}
.screen .ix20{color:#bfeae4}
.screen .ix21{color:#7fe0cf}
.screen .ix22{color:var(--teal)}
.screen .ix23{font-size:2.75rem}
.screen .ix24{color:var(--orange)}
.screen .ix25{margin-top:1.25rem;max-width:44ch}
.screen .ix26{margin-top:0.5rem}
.screen .ix27{display:grid;gap:0.75rem;text-align:left}
.screen .ix28{padding:1rem 1.125rem;border-left:0.25rem solid var(--orange);border-radius:0.875rem;background:var(--paper);color:var(--t-ink)}
.screen .ix29{margin-bottom:0.5rem;font-family:var(--mono);font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.screen .ix30{font-size:1.125rem;font-weight:700;line-height:1.4;color:var(--t-ink)}
.screen .ix31{padding:1rem 1.125rem;border-left:0.25rem solid var(--orange);border-radius:0.875rem;background:var(--paper);color:var(--t-ink)}
.screen .ix32{margin-bottom:0.5rem;font-family:var(--mono);font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.screen .ix33{font-size:1.125rem;font-weight:700;line-height:1.4;color:var(--t-ink)}
.screen .ix34{margin-bottom:0.875rem;color:var(--t-faint)}
.screen .ix35{cursor:pointer}
.screen .ix36{cursor:pointer}
.screen .ix37{cursor:pointer}
.screen .ix38{cursor:pointer}
.screen .ix39{cursor:pointer}
.screen .ix40{cursor:pointer}
.screen .ix41{cursor:pointer}
.screen .ix42{cursor:pointer}
.screen .ix43{align-self:start;margin-top:0.25rem}
.screen .ix44{margin:0 0 0.6rem;max-width:none}
.screen .ix45{align-self:start;margin-top:0.25rem}
.screen .ix46{display:block;width:auto;max-width:100%;max-height:35rem;margin:0 auto}
.screen .ix47{color:#fff}
.screen .ix48{width:32.5rem;height:32.5rem;top:-24%;left:32%;background:radial-gradient(circle,rgba(111,106,224,.16),transparent 64%)}
.screen .ix49{color:#a7a2f0}
.screen .ix50{color:#2b2d33}
.screen .ix51{color:#fff}
.screen .ix52{width:40rem;height:40rem;top:-26%;right:-10%;background:radial-gradient(circle,rgba(33,161,154,.2),transparent 63%)}
.screen .ix53{width:32.5rem;height:32.5rem;bottom:-30%;left:-6%;background:radial-gradient(circle,rgba(74,140,234,.14),transparent 64%)}
.screen .ix54{color:var(--teal-light)}
.screen .ix55{max-width:80ch}
.screen .ix56{font-size:2.375rem}
.screen .ix57{max-width:78ch;margin:0.875rem auto 0;text-align:center}
.screen .ix58{max-height:20.625rem}
.screen .ix59{max-height:20.625rem}
.screen .ix60{color:#fff}
.screen .ix61{width:38.75rem;height:38.75rem;top:-28%;left:-8%;background:radial-gradient(circle,rgba(233,162,59,.16),transparent 64%)}
.screen .ix62{color:var(--amber)}
.screen .ix63{max-width:80ch}
.screen .ix64{align-items:start}
.screen .ix65{gap:1.125rem}
.screen .ix66{margin-bottom:0.25rem}
.screen .ix67{max-height:35rem}
.screen .ix68{color:var(--ink)}
.screen .ix69{background:var(--blue)}
.screen .ix70{background:var(--teal)}
.screen .ix71{background:linear-gradient(135deg,#4a3d5e,#241c30)}
.screen .ix72{background:linear-gradient(135deg,#1f9b94,#36c6ab)}
.screen .ix73{background:linear-gradient(135deg,#3a64b0,#172642)}
.screen .ix74{background:linear-gradient(135deg,#4a3d5e,#241c30)}
.screen .ix75{background:linear-gradient(135deg,#1f9b94,#36c6ab)}
.screen .ix76{background:linear-gradient(135deg,#3a64b0,#172642)}
.screen .ix77{color:#fff}
.screen .ix78{width:37.5rem;height:37.5rem;top:-26%;right:-8%;background:radial-gradient(circle,rgba(74,140,234,.18),transparent 64%)}
.screen .ix79{color:#9cc0f5}
.screen .ix80{align-items:center}
.screen .ix81{gap:1.25rem}
.screen .ix82{max-width:44ch}
.screen .ix83{left:50%;top:16.8%}
.screen .ix84{left:81.4%;top:40.6%}
.screen .ix85{left:69.4%;top:77.7%}
.screen .ix86{left:30.6%;top:77.7%}
.screen .ix87{left:18.6%;top:40.6%}
.screen .ix88{max-width:80ch}
.screen .ix89{background:var(--orange)}
.screen .ix90{background:var(--teal)}
.screen .ix91{background:var(--blue)}
.screen .ix92{background:var(--teal-light)}
.screen .ix93{align-items:start}
.screen .ix94{gap:1rem}
.screen .ix95{color:var(--teal)}
.screen .ix96{font-size:1.4375rem;margin:0.5625rem 0 0.625rem}
.screen .ix97{font-size:1.25rem;margin:0}
.screen .ix98{color:var(--blue)}
.screen .ix99{font-size:1.4375rem;margin:0.5625rem 0 0.625rem}
.screen .ix100{font-size:1.25rem;margin:0}
.screen .ix101{gap:1rem}
.screen .ix102{color:var(--blue)}
.screen .ix103{font-size:1.4375rem;margin:0.5625rem 0 0.625rem}
.screen .ix104{font-size:1.25rem;margin:0}
.screen .ix105{color:var(--teal-light)}
.screen .ix106{font-size:1.4375rem;margin:0.5625rem 0 0.625rem}
.screen .ix107{font-size:1.25rem;margin:0}
.screen .ix108{color:var(--teal-light)}
.screen .ix109{font-size:1.4375rem;margin:0.5625rem 0 0.625rem}
.screen .ix110{font-size:1.25rem;margin:0}
.screen .ix111{color:#fff}
.screen .ix112{width:38.75rem;height:38.75rem;top:-26%;left:-10%;background:radial-gradient(circle,rgba(226,96,40,.14),transparent 64%)}
.screen .ix113{max-width:60ch}
.screen .ix114{width:42%}
.screen .ix115{left:42%}
.screen .ix116{width:24%}
.screen .ix117{left:24%}
.screen .ix118{animation-delay:0s}
.screen .ix119{animation-delay:.6s}
.screen .ix120{animation-delay:1.2s}
.screen .ix121{animation-delay:1.8s}
.screen .ix122{animation-delay:0s}
.screen .ix123{animation-delay:.9s}
.screen .ix124{animation-delay:1.8s}
.screen .ix125{animation-delay:2.7s}
.screen .ix126{animation-delay:0s}
.screen .ix127{animation-delay:0s}
.screen .ix128{animation-delay:.8s}
.screen .ix129{animation-delay:3s}
.screen .ix130{animation-delay:3s}
.screen .ix131{animation-delay:1.5s}
.screen .ix132{animation-delay:6s}
.screen .ix133{animation-delay:6s}
.screen .ix134{animation-delay:2.1s}
.screen .ix135{animation-delay:9s}
.screen .ix136{animation-delay:9s}
.screen .ix137{color:#fff}
.screen .ix138{width:46.25rem;height:46.25rem;top:-22%;right:-14%;background:radial-gradient(circle,rgba(33,161,154,.20),transparent 62%)}
.screen .ix139{width:33.75rem;height:33.75rem;bottom:-28%;left:-6%;background:radial-gradient(circle,rgba(226,96,40,.16),transparent 64%)}
.screen .ix140{justify-content:center}
.screen .ix141{margin:1.5rem 0 1.625rem;max-width:44ch}
.screen .ix142{color:var(--d-faint);font-weight:450}
.screen .ix143{background:var(--seo)}
.screen .ix144{background:var(--amber)}
.screen .ix145{background:var(--blue)}
.screen .ix146{background:var(--violet)}
.screen .ix147{background:var(--teal-light)}

/* slide 2 (Проблема): heading + lead are kept to the left ~half of the slide;
   the right half stays free for the product visual (.vsplit is pulled up into it) */
.prob .head-row{max-width:55%;}
.prob .head-row .htitle{max-width:none;}
.prob .head-row .lead{margin-top:1rem;max-width:42ch;}