/* board.css — реальный Product Board с главной quillon.ru.
   Светлый: q-sol CSS на токенах страницы (data-theme=light). Скопировано из index.html + светлые правки. */
    /* ═══ BLOCK 03 · SOLUTION CSS ═══ */
    /* ═══════════════════════════════════════════════════════════════
     * 03 · SOLUTION — Product Board (внутренний экран IT-компании)
     *
     * Концепция:
     *   На странице — не «4 преимущества с иконками», а вид
     *   операционной панели Quillon: три продукта (ChatAI, Meet, LMS)
     *   как параллельные колонки, сверху — горизонтальная timeline
     *   вовлечения студента (М01 → М12). Четыре «почему» вписаны
     *   асимметрично как pinned-аннотации между колонками. Они
     *   комментируют конкретные продукты, а не висят сами по себе.
     *
     * Отстройка от блока 01 (hero):
     *   • hero — 2-col asymmetric, abstract typo plot карусель
     *   • solution — three-column ledger (вертикальные потоки) +
     *     горизонтальный engagement-track сверху
     *
     * Отстройка от блока 02 (market):
     *   • market — FT-spread, hero-figure 7/12 + minors 5/12
     *   • solution — другая ось доминирования (вертикаль вместо
     *     горизонтального data-spread). Другая визуальная плотность
     *     (live ops dashboard вместо financial summary).
     *
     * Anti-AI решения по чек-листу:
     *   ✓ Zero feather-icons на benefits (главный AI-tell)
     *   ✓ 4 причины НЕ в 2×2 grid — асимметричный layout «product+pin»
     *   ✓ H2 моноцвет (Inter 510, наследуется от section-head)
     *   ✓ Один indigo, никаких gradient-text, никаких ✓
     *   ✓ Tabular-nums на таймлайне и метриках продуктов
     *   ✓ Inline-доказательства: ChatAI/Meet/LMS, М02, М03, М07,
     *     5–80 тыс ₽, CI/CD, code-review
     * ═══════════════════════════════════════════════════════════════ */

    .q-sol {
      position: relative;
    }

    /* Корнер-halo по диагонали, противоположной market.
       hero: top-left. market: bottom-right. solution: top-right.
       Создаёт ритм чередования источников «света» по странице. */
    .q-sol::before {
      content: "";
      position: absolute;
      top: -240px;
      right: -240px;
      width: 640px;
      height: 640px;
      background: radial-gradient(circle, rgba(94, 106, 210, 0.07), transparent 62%);
      pointer-events: none;
      z-index: 0;
    }
    .q-sol .q-container { position: relative; z-index: 1; }

    .q-sol .q-section-head { max-width: 760px; }

    /* ═══════════════════════════════════════════════════════════════
     * BOARD HEADER — мета-полоска над панелью
     * Имитирует service-status-line: «BOARD · LIVE · обновлено».
     * Не «Live now 🟢» (AI), а «BOARD/04.2026», как admin-overlay.
     * ═══════════════════════════════════════════════════════════════ */

    .q-sol-board-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--q-s-5);
      padding: var(--q-s-4) 0;
      border-top: 1px solid var(--q-line-strong);
      border-bottom: 1px solid var(--q-line);
      font-family: var(--q-font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--q-text-low);
      flex-wrap: wrap;
    }
    .q-sol-board-meta__group {
      display: inline-flex;
      align-items: center;
      gap: var(--q-s-3);
    }
    .q-sol-board-meta__sep {
      display: inline-block;
      width: 14px;
      height: 1px;
      background: var(--q-line-strong);
    }
    .q-sol-board-meta b {
      color: var(--q-text-mid);
      font-weight: var(--q-fw-medium);
    }
    .q-sol-board-meta__live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--q-accent-hover);
    }
    .q-sol-board-meta__live::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--q-accent-hover);
      box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.18);
    }

    /* ═══════════════════════════════════════════════════════════════
     * ENGAGEMENT TRACK — горизонтальная timeline студента
     *
     * НЕ «бар прогресса с кружочками 1-2-3-4». Эта timeline —
     * фактическая шкала месяцев М01 → М12 c пинами этапов вовлечения.
     * Tracks: Code | Jobs | Студия | Career. Каждый этап — точка на оси.
     * ═══════════════════════════════════════════════════════════════ */

    .q-sol-track {
      position: relative;
      padding: var(--q-s-8) 0 var(--q-s-9);
      border-bottom: 1px solid var(--q-line);
    }

    .q-sol-track__legend {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      /* 80px нужен чтобы пин лейн-2 (M03 на -52px от рельса + label ~14px) не наезжал на H3 */
      margin-bottom: 80px;
      gap: var(--q-s-5);
      flex-wrap: wrap;
    }
    @media (max-width: 720px) {
      .q-sol-track__legend { margin-bottom: var(--q-s-6); }
    }
    .q-sol-track__legend-title {
      font-family: var(--q-font-display);
      font-size: var(--q-t-h4);
      font-weight: var(--q-fw-linear);
      color: var(--q-text-hi);
      letter-spacing: -0.01em;
      margin: 0;
    }
    .q-sol-track__legend-meta {
      font-family: var(--q-font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }
    .q-sol-track__legend-meta b {
      color: var(--q-text-mid);
      font-weight: var(--q-fw-medium);
    }

    /* Сама ось */
    .q-sol-track__rail {
      position: relative;
      height: 1px;
      background: var(--q-line-strong);
      /* 80px gutter — pin label widest = ~170px (M07 · СТУДИЯ · 5–80 ТЫС),
         half = 85px. Pins centered via translateX(-50%), label extends ±85px.
         Без gutter лейблы крайних пинов (M02 на 9%) вылезают за левый край. */
      margin: 0 80px;
      cursor: pointer;
      touch-action: pan-y;
    }
    /* Невидимая hit-area для drag/click — расширяет реальный target до 28px,
       но визуально rail остаётся тонким 1px (раньше padding делал серую полосу). */
    .q-sol-track__rail::after {
      content: "";
      position: absolute;
      inset: -14px 0;
      background: transparent;
    }
    .q-sol-track__rail:active { cursor: grabbing; }
    @media (max-width: 720px) {
      .q-sol-track__rail { margin-left: 8px; margin-right: 8px; }
    }

    /* Descriptor под rail — текст меняется при движении ползунка */
    .q-sol-track__desc {
      margin: var(--q-s-7) 80px 0;
      display: flex; flex-direction: column;
      gap: var(--q-s-2);
      max-width: 64ch;
    }
    .q-sol-track__desc-text {
      margin: 0;
      font-size: var(--q-t-body);
      line-height: 1.55;
      color: var(--q-text-mid);
    }
    .q-sol-track__desc-text.is-changed {
      animation: q-sol-desc-fade 240ms var(--q-ease);
    }
    .q-sol-track__desc-hint {
      font-family: var(--q-font-mono);
      font-size: var(--q-t-mono);
      letter-spacing: var(--q-tracking-mono);
      color: var(--q-text-low);
      text-transform: uppercase;
    }
    @keyframes q-sol-desc-fade {
      from { opacity: 0; transform: translateY(3px); }
      to   { opacity: 1; transform: none; }
    }
    @media (max-width: 720px) {
      .q-sol-track__desc { margin: var(--q-s-6) 8px 0; }
      .q-sol-track__desc-text { font-size: var(--q-t-small); }
    }
    @media (prefers-reduced-motion: reduce) {
      .q-sol-track__desc-text.is-changed { animation: none; }
    }

    /* Tick marks по 12 месяцам — 11 равных интервалов */
    .q-sol-track__ticks {
      position: absolute;
      top: -4px;
      left: 0;
      right: 0;
      height: 9px;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
    }
    .q-sol-track__tick {
      width: 1px;
      height: 9px;
      background: var(--q-text-dim);
    }

    /* Метки месяцев под рейлом */
    .q-sol-track__months {
      display: flex;
      justify-content: space-between;
      margin: var(--q-s-3) 80px 0;
      font-family: var(--q-font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--q-text-low);
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
    }
    .q-sol-track__months b {
      color: var(--q-accent-hover);
      font-weight: var(--q-fw-medium);
    }

    /* Pins — фактические события, прикрепляются к % по шкале (М01..М12 → 0..100%).
       Лейблы кучные (М02 9%, М03 18%) → стэгер на 2 лейна, чтобы не наезжали. */
    .q-sol-track__pins {
      position: absolute;
      top: -52px;
      left: 0;
      right: 0;
      height: 0;
      pointer-events: none;
    }
    .q-sol-track__pin {
      position: absolute;
      top: 30px;          /* лейн-1: лейбл ниже, ближе к рельсу */
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      pointer-events: auto;
      max-width: 160px;
    }
    .q-sol-track__pin--lane-2 {
      top: 0;             /* лейн-2: лейбл выше */
    }
    .q-sol-track__pin--lane-2 .q-sol-track__pin-stem {
      height: 30px;       /* удлинённый стебель, чтобы дот по-прежнему касался рельса */
    }

    /* Якорь label-а к ПРАВОЙ стороне dot-а — pill расходится только вправо.
       Dot/stem остаются центрированными (на актуальной % координате),
       сдвигается только label через transform. Используем для пинов у
       левого края (M02), чтобы pill не «обнимал» M01 marker. */
    .q-sol-track__pin--anchor-right .q-sol-track__pin-label {
      transform: translateX(calc(50% - 6px));
      /* +50% от собственной ширины label-а сдвигает его вправо ровно так,
         что левая кромка label-а оказывается на dot-position. -6px — на
         padding pill-а, чтобы текст «M02» совпал с центром dot-а. */
    }
    .q-sol-track__pin-label {
      font-family: var(--q-font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--q-text-mid);
      white-space: nowrap;
      padding: 2px 6px;
      border-radius: var(--q-r-sm);
      background: var(--q-bg-1);
      border: 1px solid var(--q-line);
    }
    .q-sol-track__pin-label b {
      color: var(--q-accent-hover);
      font-weight: var(--q-fw-medium);
    }
    .q-sol-track__pin-stem {
      width: 1px;
      height: 8px;
      background: var(--q-line-strong);
    }
    .q-sol-track__pin-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--q-accent-hover);
      box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.16);
    }
    .q-sol-track__pin--soft .q-sol-track__pin-dot {
      background: transparent;
      border: 1.5px solid var(--q-text-low);
      box-shadow: none;
    }
    /* ═══════════════════════════════════════════════════════════════
     * LIVE CURSOR — один бейдж, движется по таймлайну в зависимости
     * от scroll-позиции страницы. Заменяет статичные пиннованные пиллы
     * (M02/M03/M07). Контент бейджа меняется по месяцам М01..М12 в
     * зависимости от прогресса прокрутки.
     * ═══════════════════════════════════════════════════════════════ */
    .q-sol-track__cursor {
      position: absolute;
      top: -52px;
      left: 0;
      /* translate3d — на GPU, без layout/paint, только composite. translateX(-50%) центрирует
         курсор на своей же координате (cursor-x), обновляется через JS (slider/scroll). */
      transform: translate3d(var(--cursor-x, 0px), 0, 0) translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      pointer-events: auto;          /* раньше было none — теперь drag нужен */
      cursor: grab;
      touch-action: none;             /* предотвращает scroll-конфликт при drag на mobile */
      user-select: none;
      -webkit-user-select: none;
      will-change: transform;
      z-index: 3;
      transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .q-sol-track__cursor.is-dragging { cursor: grabbing; transition: none; }
    .q-sol-track__cursor:focus-visible {
      outline: 2px solid var(--q-accent);
      outline-offset: 6px;
      border-radius: var(--q-r-sm);
    }
    .q-sol-track__cursor-label {
      font-family: var(--q-font-mono);
      font-size: 10px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--q-text-mid);
      white-space: nowrap;
      padding: 4px 10px;
      border-radius: var(--q-r-sm);
      background: var(--q-bg-1);
      border: 1px solid var(--q-line-strong);
      box-shadow: 0 0 0 4px var(--q-bg-1); /* «прорезает» сквозь rail-визуал */
      transition: opacity 180ms ease;
    }
    .q-sol-track__cursor-label b {
      color: var(--q-accent-hover);
      font-weight: var(--q-fw-medium);
    }
    .q-sol-track__cursor-stem {
      width: 1px;
      height: 16px;
      background: var(--q-accent);
    }
    .q-sol-track__cursor-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--q-accent);
      box-shadow: 0 0 0 4px var(--q-bg-1), 0 0 0 5px rgba(94, 106, 210, 0.3);
    }
    @media (max-width: 720px) {
      .q-sol-track__cursor { top: -44px; }
      .q-sol-track__cursor-label { font-size: 9px; padding: 3px 8px; }
      .q-sol-track__cursor-stem { height: 12px; }
      .q-sol-track__cursor-dot { width: 10px; height: 10px; }
    }

    .q-sol-track__pin--soft .q-sol-track__pin-label b {
      color: var(--q-text-mid);
    }

    /* ═══════════════════════════════════════════════════════════════
     * PRODUCT COLUMNS — three-column ledger
     *
     * Это сердце блока. ChatAI · Meet · LMS — параллельные вертикальные
     * колонки, разделённые hairlines (как в admin-консоли). У каждой
     * есть мини-stats: stack, состояние команды, активные задачи.
     *
     * Между колонок плавают «pinned» аннотации-преимущества (4 шт),
     * расположенные асимметрично — НЕ 2×2 grid.
     * ═══════════════════════════════════════════════════════════════ */

    /* Layout B: Meet-герой (full-width split) сверху + ряд из 3 компакт-карт. */
    .q-sol-board {
      position: relative;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid var(--q-line);
    }

    /* ─── Meet-герой: media (desktop+mobile split) | text ─── */
    /* Двойной класс: спец. 0,2,0 побеждает базовый .q-sol-prod (flex-column),
       который объявлен ниже в источнике — иначе grid схлопывается. */
    .q-sol-prod.q-sol-prod--hero {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: var(--q-s-8);
      align-items: center;
      padding: var(--q-s-8);
      border-bottom: 1px solid var(--q-line);
    }
    .q-sol-hero__media {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: visible;
      background: transparent;
      border: 0;
      border-radius: 0;
    }
    /* indigo-пьедестал-свечение под устройствами */
    .q-sol-hero__media::after {
      content: "";
      position: absolute;
      left: 50%; bottom: 2%;
      width: 84%; height: 30%;
      transform: translateX(-50%);
      background: radial-gradient(60% 100% at 50% 100%,
                  color-mix(in srgb, var(--q-accent) 13%, transparent), transparent 72%);
      filter: blur(8px);
      pointer-events: none;
      z-index: 0;
    }
    /* завершённые framed-устройства: все углы + полный border (не «обрезанный peek») */
    .q-sol-hero__desktop {
      position: absolute;
      top: 6%; bottom: auto;
      left: 0;
      width: 80%;
      border-radius: 12px;
      border: 1px solid var(--q-line);
      z-index: 1;
    }
    .q-sol-hero__mobile {
      position: absolute;
      bottom: 6%; top: auto;
      right: 0;
      width: 24%;
      border-radius: 22px;
      border: 1px solid var(--q-line);
      z-index: 2;
    }
    .q-sol-hero__body {
      display: flex;
      flex-direction: column;
      gap: var(--q-s-5);
    }

    /* ─── Ряд из 3 компакт-карт ─── */
    .q-sol-board__row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .q-sol-prod--compact + .q-sol-prod--compact {
      border-left: 1px solid var(--q-line);
    }

    @media (max-width: 860px) {
      .q-sol-prod.q-sol-prod--hero { grid-template-columns: 1fr; }
      .q-sol-board__row { grid-template-columns: 1fr; }
      .q-sol-prod--compact + .q-sol-prod--compact {
        border-left: none;
        border-top: 1px solid var(--q-line);
      }
    }
    /* Тонкая indigo-подсветка под центром доски (Linear-style, single source).
       Не glow-orb — широкий мягкий радиал, едва заметный, без пульсации. */
    .q-sol-board::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 40%;
      width: 720px;
      height: 360px;
      transform: translate(-50%, -50%);
      background: radial-gradient(
        ellipse at center,
        rgba(94, 106, 210, 0.10),
        rgba(94, 106, 210, 0.04) 38%,
        transparent 70%
      );
      pointer-events: none;
      z-index: 0;
    }

    /* Абстрактная waveform-текстура за досской — слой между bg и radial.
       Низкий opacity, mask-fade по краям, не доминирует над продуктовыми
       колонками. Linear settings-bg-стиль. */
    .q-sol-board__bg-art {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1200px;
      max-width: 110%;
      height: 400px;
      transform: translate(-50%, -50%);
      object-fit: cover;
      opacity: 0.08;
      mix-blend-mode: screen;
      /* Жёсткий mask — fade рано, иначе линии бьют в текст карточек */
      -webkit-mask-image: radial-gradient(ellipse at center, black 18%, transparent 60%);
              mask-image: radial-gradient(ellipse at center, black 18%, transparent 60%);
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }

    .q-sol-prod {
      position: relative;
      z-index: 1;
      padding: var(--q-s-7) var(--q-s-6);
      display: flex;
      flex-direction: column;
      gap: var(--q-s-5);
    }
    /* (replaced) Borders теперь через .q-sol-board nth-child выше — для 2×2 grid */

    /* ═══════════════════════════════════════════════════════════════
     * PRODUCT VISUAL — custom SVG mini-mockup (anti-stock, anti-Lottie).
     *
     * Каждый продукт получает абстрактный UI-моdkup (chat-flow / video-grid /
     * lesson-list) — НЕ stock illustration. Стиль: line-art 1.5–2px, indigo
     * accent на 1 active элементе, остальное в hairline-grays.
     *
     * Это «product card» в духе Linear/Stripe engineering blog, а не
     * Storyset/unDraw (cartoon-edtech).
     * ═══════════════════════════════════════════════════════════════ */
    .q-sol-prod__visual {
      position: relative;
      aspect-ratio: 16 / 10;
      width: 100%;
      background: var(--q-bg-2);
      border: 1px solid var(--q-line);
      border-radius: var(--q-r-lg);
      overflow: hidden;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      /* Тонкая dot-сетка подложка (как в hero plot-карусели) */
      background-image:
        radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
      background-size: 16px 16px;
    }
    .q-sol-prod__visual svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    /* Device-variant — портретный телефон, поднимающийся из подложки
       (компакт-карты Quilly/LMS/Chat — все 3 мобильные портреты 0.46).
       Зеркалит mobile-трактовку Meet-героя: единый визуальный язык, без bleed. */
    .q-sol-prod__visual--device {
      background: transparent;
      background-image: none;
      border: 0;
      border-radius: 0;
      aspect-ratio: 4 / 5;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 0;
      overflow: visible;
      position: relative;
    }
    .q-sol-prod__visual--device::after {
      content: "";
      position: absolute;
      left: 50%; bottom: 6%;
      width: 64%; height: 24%;
      transform: translateX(-50%);
      background: radial-gradient(60% 100% at 50% 100%,
                  color-mix(in srgb, var(--q-accent) 11%, transparent), transparent 72%);
      filter: blur(6px);
      pointer-events: none;
      z-index: 0;
    }
    .q-sol-prod__phone {
      width: 56%;
      position: relative;
      z-index: 1;
      border: 1px solid var(--q-line);
      border-radius: 22px;
      box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
      overflow: hidden;
      background: var(--q-bg-0);
    }
    .q-sol-prod__phone img {
      width: 100%;
      display: block;
      object-fit: cover;
      object-position: top center;
      filter: brightness(0.98) contrast(1.02);
    }
    /* App-tile для лого продукта — 28×28 контейнер с bg+border, лого 20×20 внутри.
       Решает контраст dark-on-dark. Используется внутри __head как identity-marker. */
    .q-sol-prod__logo-tile {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--q-bg-3);
      border: 1px solid var(--q-line);
      flex-shrink: 0;
    }
    .q-sol-prod__logo-tile img { display: block; width: 20px; height: 20px; }
    /* Внутренние стили SVG-mockup-ов */
    .q-sol-svg__line { fill: none; stroke: var(--q-line-strong); stroke-width: 1; }
    .q-sol-svg__bubble {
      fill: var(--q-bg-3);
      stroke: var(--q-line);
      stroke-width: 1;
    }
    .q-sol-svg__bubble--accent {
      fill: var(--q-accent-soft);
      stroke: rgba(94, 106, 210, 0.4);
    }
    .q-sol-svg__bar { fill: var(--q-bg-4); }
    .q-sol-svg__bar--accent { fill: var(--q-accent-hover); }
    .q-sol-svg__text {
      fill: var(--q-text-mid);
      font-family: var(--q-font-mono);
      font-size: 9px;
      letter-spacing: 0.04em;
    }
    .q-sol-svg__text--lo { fill: var(--q-text-low); }
    .q-sol-svg__text--hi { fill: var(--q-text-hi); }
    .q-sol-svg__text--accent { fill: var(--q-accent-hover); }
    .q-sol-svg__dot { fill: var(--q-text-low); }
    .q-sol-svg__dot--accent { fill: var(--q-accent-hover); }
    .q-sol-svg__dot--filled { fill: var(--q-text-hi); }

    /* Header: ref + name + status */
    .q-sol-prod__head {
      display: flex;
      align-items: center;        /* было baseline — теперь tile, ref, status в одной линии */
      gap: var(--q-s-3);
      flex-wrap: nowrap;
    }
    .q-sol-prod__ref {
      font-family: var(--q-font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--q-text-low);
      margin-right: auto;          /* status уезжает вправо */
    }
    .q-sol-prod__ref b {
      color: var(--q-accent);
      font-weight: var(--q-fw-medium);
    }
    /* Status — без green-dot AI-маркера. Просто mono-текст в low-color */
    .q-sol-prod__status {
      font-family: var(--q-font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }

    .q-sol-prod__name {
      font-family: var(--q-font-display);
      font-size: 1.625rem;
      font-weight: var(--q-fw-linear);
      letter-spacing: -0.02em;
      color: var(--q-text-hi);
      line-height: 1.05;
      margin: 0;
    }

    .q-sol-prod__desc {
      font-size: var(--q-t-small);
      line-height: 1.5;
      color: var(--q-text-mid);
      margin: 0;
    }

    /* Stack-теги в моно. БЕЗ pill-формы — это «спека», не chip-decoration */
    .q-sol-prod__stack {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding-top: var(--q-s-3);
      border-top: 1px dashed var(--q-line);
    }
    .q-sol-prod__stack-item {
      font-family: var(--q-font-mono);
      font-size: 10px;
      font-weight: var(--q-fw-medium);
      letter-spacing: 0.04em;
      color: var(--q-text-mid);
      padding: 3px 7px;
      border: 1px solid var(--q-line);
      border-radius: var(--q-r-xs);
      background: var(--q-bg-1);
    }

    /* Footer-кластер: метрики + ссылки, пиннится к низу карточки.
       Раньше margin-top:auto был на metrics → ряды метрик не выравнивались
       между карточками (stores ниже разной высоты). Теперь footer пиннится,
       его высота равна (метрики 3 ряда + 1 ряд ссылок) → ряды выровнены. */
    .q-sol-prod__footer {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: var(--q-s-4);
    }

    /* Outbound link / store-badges — внизу карточки */
    .q-sol-prod__links,
    .q-sol-prod__stores {
      padding-top: var(--q-s-4);
      border-top: 1px solid var(--q-line);
      display: flex; flex-wrap: wrap; gap: var(--q-s-3);
    }
    .q-sol-prod__link {
      font-family: var(--q-font-mono);
      font-size: var(--q-t-mono);
      letter-spacing: var(--q-tracking-mono);
      color: var(--q-accent);
      text-decoration: none;
      border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 35%, transparent);
      padding-bottom: 1px;
      transition: color var(--q-dur-fast) var(--q-ease), border-color var(--q-dur-fast) var(--q-ease);
    }
    .q-sol-prod__link:hover { color: var(--q-accent-hover); border-bottom-color: var(--q-accent); }
    /* Внутренний продукт (нет публичного URL) — muted-стиль, без линии */
    .q-sol-prod__link--internal {
      color: var(--q-text-low);
      border-bottom-color: transparent;
      font-style: italic;
    }
    .q-sol-prod__link--internal:hover { color: var(--q-text-low); border-bottom-color: transparent; }
    .q-sol-prod__store {
      display: inline-flex; align-items: center;
      padding: 4px 10px;
      font-family: var(--q-font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--q-text-mid);
      text-decoration: none;
      border: 1px solid var(--q-line);
      border-radius: var(--q-r-sm);
      transition: border-color var(--q-dur-fast) var(--q-ease), color var(--q-dur-fast) var(--q-ease);
    }
    .q-sol-prod__store:hover { color: var(--q-text-hi); border-color: var(--q-text-low); }

    /* ═══════════════════════════════════════════════════════════════
     * REASONS — четыре «почему» как пронумерованные long-form blocks
     *
     * Раскладка: 12-col grid, ассиметричное распределение:
     *   01 — col 1..6  (под ChatAI/Meet, левая сторона)
     *   02 — col 7..12 (правая, под LMS)
     *   03 — col 1..7  (шире, левая, центр-баланс)
     *   04 — col 8..12 (компакт, правая)
     * Это снимает 2×2-AI-симметрию.
     *
     * Каждый блок — пронумерованный editorial-параграф с metaref-line
     * сверху и attached-citation снизу. БЕЗ иконок, БЕЗ ✓.
     * ═══════════════════════════════════════════════════════════════ */

    .q-sol-reasons {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 0;
      border-bottom: 1px solid var(--q-line);
    }

    .q-sol-reason {
      position: relative;
      padding: var(--q-s-8) var(--q-s-6);
      display: flex;
      flex-direction: column;
      gap: var(--q-s-4);
    }
    .q-sol-reason::before {
      content: "";
      position: absolute;
      left: var(--q-s-6);
      right: var(--q-s-6);
      top: 0;
      height: 1px;
      background: var(--q-line);
    }
    .q-sol-reason:first-child::before,
    .q-sol-reason--top-clear::before {
      display: none;
    }

    /* Колонки + асимметричные размеры */
    /* Полностью симметричный 2×2 grid: все блоки 6 cols × 2 rows.
       Без 7/5 асимметрии — пользователь предпочёл равные ширины. */
    .q-sol-reason--01 { grid-column: 1 / span 6;  border-right: 1px solid var(--q-line); }
    .q-sol-reason--02 { grid-column: 7 / span 6;  }
    .q-sol-reason--03 { grid-column: 1 / span 6;  border-right: 1px solid var(--q-line); border-top: 1px solid var(--q-line); }
    .q-sol-reason--04 { grid-column: 7 / span 6;  border-top: 1px solid var(--q-line); }

    /* Reason head: large numeral + key */
    .q-sol-reason__head {
      display: flex;
      align-items: baseline;
      gap: var(--q-s-4);
    }
    .q-sol-reason__num {
      font-family: var(--q-font-mono);
      font-size: 2.25rem;
      font-weight: var(--q-fw-medium);
      line-height: 0.9;
      letter-spacing: -0.02em;
      color: var(--q-accent-hover);
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
    }
    .q-sol-reason__key {
      font-family: var(--q-font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }
    .q-sol-reason__key b {
      color: var(--q-text-mid);
      font-weight: var(--q-fw-medium);
    }

    .q-sol-reason__title {
      font-family: var(--q-font-display);
      font-size: 1.375rem;
      font-weight: var(--q-fw-linear);
      letter-spacing: -0.018em;
      line-height: 1.2;
      color: var(--q-text-hi);
      margin: 0;
      max-width: 28ch;
    }

    .q-sol-reason__body {
      font-size: var(--q-t-small);
      line-height: 1.55;
      color: var(--q-text-mid);
      margin: 0;
      max-width: 56ch;
    }
    .q-sol-reason__body b {
      color: var(--q-text-hi);
      font-weight: var(--q-fw-semibold);
    }

    /* Footer-line: inline mono refs (продукты, диапазоны, месяцы).
       Не «теги», а editorial-footnote. */
    .q-sol-reason__refs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--q-s-3);
      padding-top: var(--q-s-3);
      margin-top: auto;
      border-top: 1px dashed var(--q-line);
      font-family: var(--q-font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }
    .q-sol-reason__refs span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .q-sol-reason__refs span + span::before {
      content: "·";
      color: var(--q-text-dim);
      margin-right: 4px;
    }
    .q-sol-reason__refs b {
      color: var(--q-text-mid);
      font-weight: var(--q-fw-medium);
    }
    .q-sol-reason__refs em {
      font-style: normal;
      color: var(--q-accent-hover);
      font-weight: var(--q-fw-medium);
    }

    /* ═══════════════════════════════════════════════════════════════
     * FOOT — «то, чего нет у 95 % курсов» + CTA
     * Аналог market-foot, но фраза другая: здесь не источники, а
     * сжатый assertion + переход к продуктам/треку.
     * ═══════════════════════════════════════════════════════════════ */

    .q-sol-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--q-s-6);
      flex-wrap: wrap;
      padding-top: var(--q-s-7);
    }

    .q-sol-foot__assertion {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 56ch;
    }
    .q-sol-foot__assertion-label {
      font-family: var(--q-font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }
    .q-sol-foot__assertion-text {
      font-size: var(--q-t-small);
      line-height: 1.5;
      color: var(--q-text-mid);
      margin: 0;
    }
    .q-sol-foot__assertion-text b {
      color: var(--q-text-hi);
      font-weight: var(--q-fw-semibold);
    }

    /* ═══════════════════════════════════════════════════════════════
     * RESPONSIVE — 960 / 640
     * ═══════════════════════════════════════════════════════════════ */

    @media (max-width: 960px) {
      .q-sol-reasons { grid-template-columns: 1fr; }
      .q-sol-reason--01,
      .q-sol-reason--02,
      .q-sol-reason--03,
      .q-sol-reason--04 {
        grid-column: 1 / -1;
        border-right: 0;
        border-top: 1px solid var(--q-line);
      }
      .q-sol-reason--01 { border-top: 0; }
      .q-sol-reason--01::before,
      .q-sol-reason--02::before,
      .q-sol-reason--03::before,
      .q-sol-reason--04::before { display: none; }

      /* Track pin labels могут наезжать друг на друга — скрываем soft pins */
      .q-sol-track__pin--mobile-hide { display: none; }
    }

    @media (max-width: 640px) {
      .q-sol-prod {
        padding: var(--q-s-6) var(--q-s-5);
      }
      .q-sol-prod__name { font-size: 1.375rem; }
      .q-sol-reason {
        padding: var(--q-s-7) var(--q-s-5);
      }
      .q-sol-reason__num { font-size: 1.875rem; }
      .q-sol-reason__title { font-size: 1.25rem; }
      .q-sol-foot { flex-direction: column; align-items: flex-start; }
      .q-sol-foot .q-btn { width: 100%; justify-content: center; }
      .q-sol-track { padding: var(--q-s-7) 0 var(--q-s-8); }
      .q-sol-track__pin-label { display: none; }
      .q-sol-track__legend { flex-direction: column; align-items: flex-start; gap: var(--q-s-2); }
    }

/* ── светлые правки под #practice ── */
/* Мягкий переход тёмных скринов на светлом: indigo-tinted тень + светлый inset-hairline
   (вместо жёсткой rgba(0,0,0,.5)) — тёмный мок перестаёт «вырезанным прямоугольником». */
#practice .q-sol-hero__desktop{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px color-mix(in srgb,var(--q-accent) 38%,rgba(16,18,42,.55)); }
#practice .q-sol-hero__mobile{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 40px -16px color-mix(in srgb,var(--q-accent) 34%,rgba(16,18,42,.5)); }
#practice .q-sol-prod__phone{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 26px 60px -28px color-mix(in srgb,var(--q-accent) 32%,rgba(16,18,42,.5)); }
@media (max-width: 640px){ #practice .q-sol-prod__phone{ width: 70%; } }