/* UniFix selling site — everything below the signed first screen (stage 8). Same tokens as site.css; adds the paper
   pair for the light sections (character.md §2: the page must not be flat in luminance). Motion: CSS scroll-driven
   timelines, transform/opacity only, behind @supports + prefers-reduced-motion — without them every block shows its
   final frame. A scroll-driven frame stays wherever the reader stops, so no keyframe that carries text goes below
   opacity .85: muted product text (#9a9a9a on #121212–#1a1a1a) keeps AA 4.5:1 in every frame (axe r3, 2026-10-03).
   Plan: docs/project/site/rest/plan.md. */
@layer tokens {
  :root {
    --paper: oklch(0.955 0.004 85);
    --paper-ink: oklch(0.2 0.01 75);
    --paper-soft: oklch(0.43 0.012 75);
    --paper-line: oklch(0.2 0.01 75 / 0.14);
    --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
    /* capped in rem: the root already scales with the viewport, so 2560 keeps the 1440 rhythm instead of ~470px gaps */
    --sec-pad: clamp(5rem, 3.5rem + 5vw, 7rem);
  }
}

@layer sections {
  .sec { position: relative; padding-block: var(--sec-pad); }
  .paper { background: var(--paper); color: var(--paper-ink); }
  .h2 { margin: 0; font-weight: 800; font-size: clamp(2.25rem, 1.45rem + 2.7vw, 4rem); line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
  .lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--ink-soft); max-inline-size: 40rem; text-wrap: pretty; }
  .paper .lead { color: var(--paper-soft); }
  .paper :focus-visible { outline-color: var(--paper-ink); }

  /* ── pain: the portal windows of the hero story lie in a pile behind the quotes and leave as the section arrives */
  .pain { overflow: clip; border-radius: 2rem 2rem 0 0; margin-block-start: -1px; }
  .pain-grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4.5rem); }
  .pain-head { display: grid; gap: 1.25rem; max-inline-size: 52rem; }
  .pain-head .h2 { max-inline-size: 15ch; }
  .pain-stage { position: relative; isolation: isolate; padding-block: clamp(1rem, 2vw, 3rem); }
  /* windows sit only in the measured gutters (js/pain-pile.js); every outer edge of the pile fades out, so a window
     leaving on scroll dissolves instead of being cut by a straight line */
  .pile { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .pw { position: absolute; transform: rotate(var(--r)); }
  .pw[hidden] { display: none; }
  .pw canvas { display: block; inline-size: 100%; block-size: auto; border-radius: .5rem; box-shadow: 0 1.25rem 2.5rem -1.5rem oklch(0.2 0.01 75 / .45), 0 0 0 1px oklch(0.2 0.01 75 / .06); }
  .quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .quote { display: grid; gap: 1.25rem; justify-items: start; }
  .quote.q1 { grid-column: 1 / span 7; }
  .quote.q2 { grid-column: 6 / span 7; }
  .quote.q3 { grid-column: 2 / span 10; }
  .quote blockquote { margin: 0; }
  .quote blockquote p { font-weight: 800; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem); line-height: 1.22; letter-spacing: -0.035em; text-wrap: balance; }
  .q-src { font-size: .9375rem; font-weight: 600; color: var(--paper-soft); }
  /* the menu frame spans the answers column (beats the generic .fp-menu width declared further down) */
  .answers .pain-menu { justify-self: stretch; inline-size: 100%; box-shadow: 0 1.5rem 3rem -1.75rem oklch(0.2 0.01 75 / .5); }  /* paper shadow, as the pricing frames */
  .pain-menu .fp-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain-menu .fp-menu-list span { display: block; padding: .375rem .5rem; color: #b5b5b5; }
  .answers { display: grid; gap: 1.5rem; padding-block-start: 2rem; border-block-start: 1px solid var(--paper-line); }
  .answers-label { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
  .answer-list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .answer-list dt { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
  .answer-list dd { margin: .5rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--paper-soft); }
  .footnote { font-size: .9375rem; color: var(--paper-soft); }
  @media (min-width: 1200px) {
    .pain-grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 7rem); align-items: start; }
    .pain-head { grid-column: 1 / -1; }
    .answers { padding: 0 0 0 2.5rem; border-block-start: 0; border-inline-start: 1px solid var(--paper-line); align-self: stretch; align-content: start; padding-block-start: clamp(1rem, 2vw, 3rem); }
    .answer-list { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .quote.q1 { grid-column: 1 / span 9; }
    .quote.q2 { grid-column: 3 / span 8; }
    .quote.q3 { grid-column: 1 / span 9; }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .pain-stage { view-timeline: --pain block; }
      .pile { display: block; }
      .pw { animation: pw-out linear both; animation-timeline: --pain;
        animation-range: entry calc(55% + var(--i) * 3%) cover calc(46% + var(--i) * 0.5%); }
    }
  }
  @keyframes pw-out {
    from { transform: translate(0, 0) rotate(var(--r)); opacity: 1; }
    to { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + var(--dr))); opacity: .6; }
  }

  /* ── product kit: live HTML in the product's own tokens (src/styles.css), shared by every section figure.
     Reuses the hero's .ui-* rules (site.css), which read the --p-* variables set here. */
  .ui { --p-bg: #121212; --p-surface: #161616; --p-elev: #1c1c1c; --p-border: rgba(255,255,255,.075); --p-border-strong: rgba(255,255,255,.13);
    --p-text: #e1e1e1; --p-muted: #9a9a9a; --p-green: #65c492; --p-red: #ee8287; --p-gold: #f0a500;
    color: var(--p-text); font: 400 .875rem/1.4 Inter, 'Public Sans', var(--font); letter-spacing: 0; }
  .ui-split { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-inline-size: 0; }
  .ui-tag { display: inline-block; margin-inline-start: .375rem; padding: 1px .4375rem; border-radius: 999px; background: var(--p-elev); border: 1px solid var(--p-border); font-size: .75rem; font-weight: 500; color: var(--p-muted); }
  .ui-pill { flex: none; padding: .1875rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgba(135,170,255,.14); color: #a9c0ff; }
  .ui-btn { display: inline-flex; align-items: center; justify-self: start; min-block-size: 2rem; padding: 0 .875rem; border-radius: .5rem; background: var(--p-elev); border: 1px solid var(--p-border-strong); font-size: .8125rem; font-weight: 600; }
  .ui-ghost { font-size: .8125rem; color: var(--p-muted); white-space: nowrap; }
  .ui-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .ui-facts > span { display: grid; gap: .25rem; align-content: start; min-inline-size: 0; }
  .ui-facts b { font-size: 1.125rem; font-weight: 650; white-space: nowrap; }
  .ui-bar { display: block; block-size: .375rem; border-radius: .1875rem; background: var(--p-elev); overflow: hidden; }
  .ui-bar i { display: block; block-size: 100%; inline-size: 30%; border-radius: .1875rem; background: var(--p-green); transform-origin: 0 50%; }
  .due-today { color: var(--p-gold) !important; }
  .due-week { color: #8fb4ff !important; }

  /* windows fitted by js/window-fit.js end on whole rows, so the edge fade is no longer needed */
  [data-fit][hidden] { display: none !important; }
  .fitted .ui-deal, .fitted .ui-chat-body { mask-image: none; }

  /* ── how it works: the deal card assembles itself, one piece per step (the page's one pinned story) */
  .how { background: var(--canvas); }
  .how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: center; }
  .how-copy { display: grid; gap: 2rem; align-content: center; }
  .how-copy .h2 { max-inline-size: 14ch; }
  .how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; position: relative; }
  .how-step { position: relative; z-index: 1; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  .how-step p { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); max-inline-size: 34rem; }
  .how-step b { color: var(--ink); font-weight: 800; }
  .how-n { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; border: 1px solid var(--line); font: 800 .9375rem/1 var(--font); color: var(--ink-soft); background: var(--canvas); border-color: oklch(1 0 0 / .28); position: relative; z-index: 1; isolation: isolate; }
  .how-n::before { content: attr(data-n); position: absolute; inset: -1px; display: grid; place-items: center; border-radius: 50%; background: oklch(0.86 0.006 85); color: oklch(0.18 0.01 75); opacity: 0; }
  .how-n::after { content: attr(data-n); position: absolute; inset: -1px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: oklch(0.18 0.02 70); opacity: 0; }
  .how-skip { display: none; justify-self: start; font-size: .9375rem; color: var(--ink-soft); text-decoration: underline; text-decoration-color: oklch(1 0 0 / .3); text-underline-offset: .3em; padding-block: .5rem; }
  .how-figure { perspective: 112.5rem; }
  .how-card { position: relative; display: grid; gap: 0; padding: .375rem; border-radius: 1rem; background: var(--p-bg); border: 1px solid var(--p-border-strong);
    box-shadow: 0 2.5rem 6.25rem -2.5rem oklch(0 0 0 / .95); transform-style: preserve-3d; }
  .piece { position: relative; display: grid; gap: .75rem; padding: 1rem 1rem; border-radius: .625rem; }
  .piece + .piece { border-block-start: 1px solid var(--p-border); }
  .piece::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--accent); box-shadow: 0 0 0 .25rem oklch(0.78 0.16 75 / .12); opacity: 0; pointer-events: none; }
  .piece { padding-inline-start: 2.875rem; }
  .pn { position: absolute; inset-block-start: .875rem; inset-inline-start: .875rem; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; font-size: .75rem; font-weight: 700; color: var(--p-muted); border: 1px solid var(--p-border-strong); }
  .p1 .ui-text { padding-inline-end: 1.5rem; }
  .p3 .ui-title { margin: 0; }
  @media (hover: hover) and (pointer: fine) { .how-skip:hover { color: var(--ink); } }

  /* pinned only where it reads: ≥1024 wide, ≥700 tall, timelines supported, motion allowed */
  @supports (animation-timeline: view()) {
    @media (min-width: 1024px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
      .how { block-size: 300svh; padding-block: 0; view-timeline: --how block; }
      .how-pin { position: sticky; inset-block-start: 0; block-size: 100svh; display: grid; align-items: center; overflow: clip; }
      .how-steps::before { content: ''; z-index: 0; position: absolute; inset-block: 1.125rem; inset-inline-start: calc(1.125rem - .5px); inline-size: 1px; background: var(--line); }
      .how-steps::after { content: ''; z-index: 0; position: absolute; inset-block: 1.125rem; inset-inline-start: calc(1.125rem - 1px); inline-size: 2px; background: oklch(0.86 0.006 85);
        transform-origin: 50% 0; animation: how-rail linear both; animation-timeline: --how; animation-range: contain 4% contain 86%; }
      .how-step p { animation: how-step linear both; animation-timeline: --how; }
      .how-step .how-n::after { animation: how-dot linear both; animation-timeline: --how; }
      .how-step .how-n::before { animation: how-done linear both; animation-timeline: --how; }
      .how-skip { display: inline-block; animation: skip-out linear both; animation-timeline: --how; animation-range: contain 0% contain 100%; }
      .piece { animation: piece-in linear both; animation-timeline: --how; }
      .piece::after { animation: piece-ring linear both; animation-timeline: --how; }
      .how-card { animation: card-flat linear both; animation-timeline: --how; animation-range: contain 0% contain 90%; }
      .s1 p, .s1 .how-n::after, .s1 .how-n::before, .p1::after { animation-range: contain 0% contain 20%; }
      .p1 { animation-range: entry 40% contain 2%; }
      .s2 p, .s2 .how-n::after, .s2 .how-n::before, .p2, .p2::after { animation-range: contain 18% contain 38%; }
      .s3 p, .s3 .how-n::after, .s3 .how-n::before, .p3, .p3::after { animation-range: contain 36% contain 56%; }
      .s4 p, .s4 .how-n::after, .s4 .how-n::before, .p4, .p4::after { animation-range: contain 54% contain 74%; }
      .s5 p, .s5 .how-n::after, .s5 .how-n::before, .p5, .p5::after { animation-range: contain 72% contain 92%; }
      .s5 p { animation-name: how-step-last; }
      .s5 .how-n::after { animation-name: how-dot-last; }
      .s5 .how-n::before { animation: none; }
      .p5::after { animation-name: piece-ring-last; }
      .p5 .ui-bar i { animation: bar-fill linear both; animation-timeline: --how; animation-range: contain 80% contain 94%; }
    }
  }
  @keyframes skip-out { 0%, 92% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
  @keyframes wip-out { 0%, 97% { visibility: visible; } 100% { visibility: hidden; } }
  @keyframes done-in { 0%, 97% { visibility: hidden; } 100% { visibility: visible; } }
  @keyframes how-rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes how-step { 0% { opacity: .85; } 25%, 80% { opacity: 1; } 100% { opacity: .85; } }
  @keyframes how-step-last { 0% { opacity: .85; } 25%, 100% { opacity: 1; } }
  @keyframes how-dot { 0% { opacity: 0; transform: scale(.6); } 1% { opacity: 1; transform: scale(.6); } 20%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
  @keyframes how-dot-last { 0% { opacity: 0; transform: scale(.6); } 1% { opacity: 1; transform: scale(.6); } 20%, 100% { opacity: 1; transform: none; } }
  @keyframes how-done { 0%, 85% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes piece-in { 0% { opacity: .85; transform: translate3d(0, 1.625rem, -3.75rem); } 45%, 100% { opacity: 1; transform: none; } }
  @keyframes piece-ring { 0%, 20% { opacity: 0; } 40%, 75% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes piece-ring-last { 0%, 20% { opacity: 0; } 40%, 100% { opacity: 1; } }
  @keyframes card-flat { from { transform: rotateY(-9deg) rotateX(5deg) translateZ(-2.5rem); } to { transform: none; } }
  @keyframes bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ── channels: every channel lands in one list; rows arrive one by one as the section scrolls in */
  .channels { background: var(--canvas-2); }
  @media (min-width: 1024px) { .ch-figure, .mg-figure { order: -1; } }
  .ch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: center; }
  .ch-copy { display: grid; gap: 2rem; }
  .ch-copy .h2 { max-inline-size: 13ch; }
  .ch-list { margin: 0; display: grid; }
  .ch-list > div { padding-block: 1rem; border-block-start: 1px solid var(--line); }
  .ch-list dt { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
  .ch-list dd { margin: .25rem 0 0; font-size: 1.0625rem; color: var(--ink-soft); }
  .ch-note { font-size: 1.0625rem; color: var(--ink); font-weight: 600; }
  .inbox { border-radius: 1rem; background: var(--p-bg); border: 1px solid var(--p-border-strong); overflow: hidden; box-shadow: 0 2.5rem 6.25rem -2.5rem oklch(0 0 0 / .95); }
  .inbox-head { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1rem; border-block-end: 1px solid var(--p-border); font-size: 1rem; }
  .inbox-list { list-style: none; margin: 0; padding: .75rem .375rem .375rem; display: grid; gap: 2px; }
  .inbox-row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .75rem .625rem; border-radius: .625rem; }
  .inbox-row .ui-ava { inline-size: 2.25rem; block-size: 2.25rem; font-size: .8125rem; }
  .inbox-row .ui-lines { gap: .1875rem; }
  .inbox-text { color: var(--p-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
  .inbox-unread { flex: none; min-inline-size: 1.25rem; block-size: 1.25rem; padding: 0 .375rem; border-radius: .625rem; display: grid; place-items: center; background: #2a2a2a; color: var(--p-text); font-size: .75rem; font-weight: 700; }
  .inbox-row.r1 { background: var(--p-elev); }
  .inbox-row .ui-tag::before { content: ''; display: inline-block; inline-size: .4375rem; block-size: .4375rem; border-radius: 50%; margin-inline-end: .3125rem; background: var(--ch); vertical-align: 1px; }
  [data-ch="tg"] { --ch: #2aabee; } [data-ch="vk"] { --ch: #2787f5; } [data-ch="avito"] { --ch: #97cf26; }
  [data-ch="max"] { --ch: #8f6bff; } [data-ch="site"] { --ch: #f0a500; } [data-ch="wa"] { --ch: #25d366; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .inbox { view-timeline: --inbox block; }
      .inbox-row { animation: row-in linear both; animation-timeline: --inbox; }
      .inbox-row.r6 { animation-range: cover 0% cover 10%; }
      .inbox-row.r5 { animation-range: cover 3% cover 13%; }
      .inbox-row.r4 { animation-range: cover 6% cover 16%; }
      .inbox-row.r3 { animation-range: cover 9% cover 19%; }
      .inbox-row.r2 { animation-range: cover 12% cover 22%; }
      .inbox-row.r1 { animation-range: cover 15% cover 25%; }
    }
  }
  @keyframes row-in { from { opacity: .85; transform: translate3d(0, -1rem, 0) scale(.985); } to { opacity: 1; transform: none; } }

  /* ── features: eight groups, each shown by its own UniFix section in the same window chrome; each frame lands flat
     as it scrolls in (the hero window's landing, scrubbed) and plays one product micro-motion */
  .features { background: var(--canvas); }
  .ft-head { display: grid; gap: 1.25rem; margin-block-end: clamp(3rem, 2rem + 3vw, 5rem); }
  .ft-head .h2 { max-inline-size: 24ch; }
  .ft-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3.5rem, 2.5rem + 3vw, 6rem) clamp(2rem, 1rem + 3vw, 5rem); }
  .ft-group { display: grid; gap: 1.75rem; align-content: start; grid-row: span 2; grid-template-rows: subgrid; }
  .mini-fig, .mini { block-size: 100%; }
  .ft-text { display: grid; gap: .75rem; align-content: start; }
  .ft-title { margin: 0; font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
  .ft-promise { font-size: 1.0625rem; color: var(--ink); max-inline-size: 36rem; }
  .ft-items { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; max-inline-size: 38rem; }
  .ft-items li { position: relative; padding-inline-start: 1.25rem; }
  .ft-items li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .65em; inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: oklch(1 0 0 / .35); }
  .ft-partial { color: var(--ink); font-weight: 600; }
  .ft-all { display: inline-flex; align-items: center; min-block-size: 3rem; margin-block-start: clamp(3rem, 2rem + 3vw, 5rem); padding: 0 1.25rem; border-radius: .875rem;
    border: 1px solid oklch(1 0 0 / .22); font-weight: 700; text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .ft-all:hover { border-color: oklch(1 0 0 / .5); } }

  .mini-fig { perspective: 87.5rem; }
  .mini { border-radius: .875rem; background: var(--p-bg); border: 1px solid var(--p-border-strong); overflow: hidden; box-shadow: 0 1.875rem 5rem -2.5rem oklch(0 0 0 / .95); transform-origin: 50% 100%; }
  .mini-top img { filter: grayscale(1) brightness(1.6); }
  .mini-top { display: flex; align-items: center; gap: .625rem; min-block-size: 2.375rem; padding: 0 .875rem; border-block-end: 1px solid var(--p-border); font-size: .75rem; color: var(--p-muted); }
  .mini-top b { font-weight: 500; color: #cfcfcf; }
  .mini-body { display: grid; gap: .75rem; padding: .875rem; min-block-size: 17.5rem; align-content: start; container-type: inline-size; }
  @container (max-width: 26rem) {
    [data-mini="sales"] .m-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-mini="sales"] .m-col:nth-child(3) { display: none; }
    [data-mini="tasks"] .m-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-mini="tasks"] .m-col:nth-child(3) { display: none; }
    .mini-body .m-robots .ui-meta { white-space: normal; }
  }
  .m-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
  .m-col { display: grid; gap: .5rem; align-content: start; min-inline-size: 0; }
  .m-col-head { display: flex; justify-content: space-between; gap: .375rem; font-size: .75rem; color: var(--p-muted); padding: 2px 2px .25rem; border-block-end: 2px solid var(--p-border-strong); white-space: nowrap; }
  .m-col-head b { color: var(--p-text); font-weight: 600; display: inline-flex; align-items: center; gap: .375rem; overflow: hidden; text-overflow: ellipsis; }
  .m-card { display: grid; gap: .1875rem; overflow-wrap: break-word; hyphens: manual; padding: .625rem; border-radius: .5625rem; background: var(--p-surface); border: 1px solid var(--p-border); font-size: .8125rem; min-inline-size: 0; }
  .m-card b { font-weight: 600; }
  .m-card span { font-size: .75rem; color: var(--p-muted); }
  .m-card em { font-style: normal; font-weight: 650; white-space: nowrap; }
  .m-drag { position: relative; z-index: 1; border-color: rgba(240,165,0,.55); background: var(--p-elev); box-shadow: 0 1.125rem 1.875rem -.75rem oklch(0 0 0 / .9); }
  .m-tasks .m-col-head i { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--tone); }
  .m-tasks [data-tone="overdue"] { --tone: #ff4c51; } .m-tasks [data-tone="today"] { --tone: #f0a500; } .m-tasks [data-tone="week"] { --tone: #005bff; }
  .m-tasks .m-col-head { border-block-end-color: var(--tone); }
  .m-notice { display: grid; gap: .75rem; padding: .625rem .75rem; border-radius: .5625rem; background: #1a1712; border: 1px solid var(--p-border); font-size: .8125rem; }
  .m-actions { display: flex; gap: .5rem; }
  .m-actions .ui-btn { min-block-size: 1.75rem; padding: 0 .625rem; font-size: .75rem; }
  .m-rows, .m-ledger, .m-robots, .m-rights { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
  .m-rows li, .m-ledger li, .m-rights li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4375rem .75rem; border-radius: .5625rem; background: var(--p-surface); border: 1px solid var(--p-border); font-size: .8125rem; }
  .m-sla { position: relative; flex: none; display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5625rem; border-radius: 999px; background: var(--p-elev); font-size: .75rem; color: var(--p-text); }
  .m-sla i { inline-size: .375rem; block-size: .375rem; border-radius: 50%; background: var(--p-muted); }
  .m-rows li:nth-child(2) .m-sla i { background: #f0a500; }
  .m-ops { display: flex; gap: .875rem; font-size: .75rem; color: var(--p-muted); }
  /* a narrow frame moves «Передать коллеге» under the operators instead of breaking «Ольга · 2 диалога» in two */
  .m-queue > .ui-split:last-child { flex-wrap: wrap; row-gap: .5rem; }
  .m-ops > span, .m-queue .ui-btn { white-space: nowrap; }
  .m-online { display: inline-block; inline-size: .4375rem; block-size: .4375rem; border-radius: 50%; background: var(--p-green); margin-inline-end: .375rem; }
  .m-team, .m-queue { display: grid; gap: .875rem; }
  .m-person { display: flex; align-items: center; gap: .625rem; }
  .m-person .ui-pill { margin-inline-start: auto; }
  .m-level { font-size: .75rem; font-weight: 600; padding: 2px .5625rem; border-radius: 999px; }
  .m-level[data-tone="write"] { background: rgba(101,196,146,.14); color: var(--p-green); }
  .m-level[data-tone="read"] { background: rgba(135,170,255,.14); color: #a9c0ff; }
  .m-level[data-tone="none"] { background: var(--p-elev); color: var(--p-muted); }
  .m-roles { display: flex; flex-wrap: wrap; gap: .375rem; }
  .m-roles span { font-size: .75rem; padding: 2px .5rem; border-radius: .375rem; border: 1px solid var(--p-border); color: var(--p-muted); }
  .m-money { display: grid; gap: .75rem; }
  .m-money .ui-bar { block-size: .5rem; }
  .m-ledger .plus { color: var(--p-green); } .m-ledger .minus { color: var(--p-red); }
  .m-ledger b { font-weight: 650; white-space: nowrap; }
  .m-auto { display: grid; gap: .75rem; }
  .m-trigger { justify-self: start; padding: .3125rem .75rem; border-radius: .5rem; background: var(--p-elev); color: var(--p-text); font-size: .8125rem; font-weight: 600; }
  .m-robots { counter-reset: r; position: relative; }
  .m-robots li { position: relative; padding: .5rem .75rem .5rem 2.125rem; border-radius: .5625rem; background: var(--p-surface); border: 1px solid var(--p-border); font-size: .8125rem; }
  .m-robots li::before { counter-increment: r; content: counter(r); position: absolute; inset-inline-start: .625rem; inset-block-start: .5625rem; font-size: .75rem; color: var(--p-muted); }
  .m-robots .ui-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-bot { font-size: .8125rem; color: var(--p-muted); padding-inline: 2px; }
  .m-switch { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; }
  .m-switch i { inline-size: 1.75rem; block-size: 1rem; border-radius: .5rem; background: #2c2c2c; position: relative; }
  .m-switch i::after { content: ''; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: .75rem; block-size: .75rem; border-radius: 50%; background: #777; }
  .m-onec { display: grid; gap: .75rem; justify-items: stretch; }
  .m-onec .ui-btn { justify-self: start; }
  .m-ok { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--p-green); }
  .m-ok i { inline-size: .4375rem; block-size: .4375rem; border-radius: 50%; background: var(--p-green); }
  .m-notif { position: relative; display: grid; gap: .25rem; }
  .m-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 3.25rem); align-items: center; gap: .375rem; padding: .4375rem .625rem; border-radius: .5rem; font-size: .8125rem; }
  .m-grid:not(.m-grid-head) { background: var(--p-surface); border: 1px solid var(--p-border); }
  .m-grid-head { font-size: .75rem; color: var(--p-muted); padding-block: 0; }
  .m-grid-head span { text-align: center; }
  .m-toggle { justify-self: center; inline-size: 1.75rem; block-size: 1rem; border-radius: .5rem; background: #2c2c2c; position: relative; }
  .m-toggle i { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: .75rem; block-size: .75rem; border-radius: 50%; background: #777; }
  .m-toggle.on { background: #2f6e4f; } .m-toggle.on i { background: #fff; transform: translateX(.75rem); }
  .m-push { position: relative; justify-self: end; margin-block-start: .5rem; display: flex; gap: .625rem; align-items: start; inline-size: min(17rem, 80%); padding: .625rem .75rem; border-radius: .625rem;
    background: #242424; border: 1px solid var(--p-border-strong); box-shadow: 0 1rem 2.125rem -.625rem oklch(0 0 0 / .9); font-size: .8125rem; }
  .m-push img { flex: none; margin-block-start: 2px; }
  .m-push span span { color: #c9c9c9; }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .mini-fig { view-timeline: --mini block; }
      .m-drag { animation: drag-card linear both; animation-timeline: --mini; animation-range: entry 0% cover 30%; }
      .m-money .ui-bar i { animation: bar-fill linear both; animation-timeline: --mini; animation-range: entry 0% cover 25%; }
      .m-push { animation: push-in linear both; animation-timeline: --mini; animation-range: entry 0% cover 25%; }
      .m-robots li { animation: piece-in linear both; animation-timeline: --mini; }
      .m-robots li:nth-child(1) { animation-range: cover 0% cover 12%; }
      .m-robots li:nth-child(2) { animation-range: cover 5% cover 17%; }
      .m-robots li:nth-child(3) { animation-range: cover 10% cover 22%; }
    }
  }
  @keyframes drag-card { 0% { transform: translate(calc(-100% - .625rem), -40%) rotate(0deg); } 15% { transform: translate(calc(-92% - .625rem), -44%) rotate(-3deg); } 85% { transform: translate(0, -4%) rotate(-2deg); } 100% { transform: none; } }
  @keyframes push-in { from { opacity: .85; transform: translateY(.875rem) scale(.97); } to { opacity: 1; transform: none; } }

  /* ── integrations: what each integration produces lands in the client's history, oldest first */
  .connect { background: var(--canvas-2); }
  .cn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
  .cn-copy { display: grid; gap: 1.5rem; justify-items: start; }
  .cn-copy .h2 { max-inline-size: 15ch; }
  .cn-groups { margin: .5rem 0 0; display: grid; gap: 1.25rem; inline-size: 100%; }
  .cn-groups > div { display: grid; gap: .5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
  .cn-groups dt { font-size: .9375rem; color: var(--ink-soft); }
  .cn-groups dd { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
  .cn-all { margin-block-start: .5rem; }
  .history { border-radius: 1rem; background: var(--p-bg); border: 1px solid var(--p-border-strong); overflow: hidden; box-shadow: 0 2.5rem 6.25rem -2.5rem oklch(0 0 0 / .95); }
  .hist { list-style: none; margin: 0; padding: 1.125rem 1.125rem 1.125rem 1.25rem; display: grid; gap: .875rem; position: relative; }
  .hist::before { content: ''; position: absolute; inset-block: 1.625rem; inset-inline-start: 1.625rem; inline-size: 1px; background: var(--p-border-strong); }
  .hist-row { display: grid; grid-template-columns: .875rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  .hist-dot { position: relative; inline-size: .8125rem; block-size: .8125rem; margin-block-start: .25rem; border-radius: 50%; background: var(--p-bg); border: 2px solid var(--p-muted); }
  .hist-row[data-tone="plus"] .hist-dot { border-color: var(--p-green); }
  .hist-row[data-tone="task"] .hist-dot { border-color: var(--p-gold); }
  .hist-row .ui-lines { gap: .25rem; justify-items: start; padding: .75rem .875rem; border-radius: .625rem; background: var(--p-surface); border: 1px solid var(--p-border); inline-size: 100%; }
  .hist-row .ui-tag { margin: 0; }
  .hist-title { font-size: .9375rem; font-weight: 600; }
  .hist-row[data-tone="plus"] .hist-title { color: var(--p-green); }

  /* ── migration (RELEASE-GATED): the migration screen walks its three steps as the section scrolls */
  .migration { background: var(--canvas); }
  .mg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
  .mg-copy { display: grid; gap: 2rem; }
  .mg-copy .h2 { max-inline-size: 17ch; }
  .mg-steps { margin: 0; padding-inline-start: 1.5rem; display: grid; gap: 1rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); }
  .mg-steps li::marker { font-weight: 800; color: var(--ink); }
  .mg-steps b { color: var(--ink); font-weight: 800; }
  .mg-ui { border-radius: 1rem; background: var(--p-bg); border: 1px solid var(--p-border-strong); overflow: hidden; box-shadow: 0 2.5rem 6.25rem -2.5rem oklch(0 0 0 / .95); }
  .mg-body { display: grid; gap: .75rem; padding: 1.125rem; }
  .mg-hook { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--p-text); font-size: .8125rem; padding: .625rem .75rem; }
  .mg-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-block-end: .375rem; }
  .mg-count { display: grid; gap: 2px; padding: .75rem; border-radius: .625rem; background: var(--p-surface); border: 1px solid var(--p-border); font-size: .8125rem; color: var(--p-muted); }
  .mg-count b { font-size: 1.625rem; font-weight: 650; color: var(--p-text); letter-spacing: -.01em; }
  .mg-go { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
  /* neutral product button: the page's one amber action stays the CTA (panel 2026-10-03) */
  .mg-btn { display: inline-flex; align-items: center; min-block-size: 2.375rem; padding: 0 1.125rem; border-radius: .5625rem; background: var(--p-elev); border: 1px solid var(--p-border-strong); color: var(--p-text); font-weight: 700; font-size: .875rem; }
  .mg-progress { display: grid; gap: .375rem; }
  .mg-progress .ui-bar i { inline-size: 100%; }
  .mg-state { display: grid; }
  .mg-state > * { grid-area: 1 / 1; }
  .mg-wip { visibility: hidden; }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .history, .mg-ui { view-timeline: --fig block; }
      .hist-row { animation: row-in linear both; animation-timeline: --fig; }
      .hist-row.e4 { animation-range: cover 0% cover 12%; }
      .hist-row.e3 { animation-range: cover 4% cover 16%; }
      .hist-row.e2 { animation-range: cover 8% cover 20%; }
      .hist-row.e1 { animation-range: cover 12% cover 24%; }
      .mg-count { animation: piece-in linear both; animation-timeline: --fig; }
      .mg-count.c1 { animation-range: cover 0% cover 15%; }
      .mg-count.c2 { animation-range: cover 4% cover 19%; }
      .mg-count.c3 { animation-range: cover 8% cover 23%; }
      .mg-progress .ui-bar i { animation: bar-fill linear both; animation-timeline: --fig; animation-range: cover 10% cover 30%; }
      .mg-wip { animation: wip-out linear both; animation-timeline: --fig; animation-range: cover 10% cover 30%; }
      .mg-done { animation: done-in linear both; animation-timeline: --fig; animation-range: cover 10% cover 30%; }
    }
  }

  /* ── pricing (paper): the team grows seat by seat while the price stays the same */
  .pricing { border-radius: 2rem; margin-inline: 0; }
  .pr-wrap { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
  .pr-head { display: grid; gap: 1.25rem; }
  .pr-head .h2 { max-inline-size: 16ch; }
  /* the B24 anchor sits right under the price heading, in body size (panel 2026-10-03) */
  .pr-head .pr-anchor { color: var(--paper-ink); max-inline-size: 44rem; }
  .pr-tiers, .pr-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 6rem); }
  .pr-tiers { border-block: 1px solid var(--paper-line); }
  @media (min-width: 1024px) {
    .pr-table { grid-column: span 2; }
    /* name, price and team frame share rows across the three tiers, so the frames end on one line */
    .pr-tiers { grid-template-rows: auto auto minmax(0, 1fr); }
    .pr-tier { grid-row: span 3; grid-template-rows: subgrid; }
    .pr-frame { display: flex; flex-direction: column; }
    .pr-frame-body { flex: 1; align-content: start; }
  }
  .pr-more-teams { font-size: 1rem; color: var(--paper-soft); margin-block-start: calc(-1 * clamp(1rem, 1vw, 2rem)); }
  .pr-more-teams a { color: var(--paper-ink); font-weight: 700; text-decoration: underline; text-decoration-color: oklch(0.2 0.01 75 / .35); text-underline-offset: .25em; }
  @media (min-width: 768px) and (max-width: 1023px) {
    .pr-tiers { grid-template-columns: minmax(0, 1fr); }
    .pr-tier { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 2rem; align-items: start; }
    .pr-tier > .pr-frame { grid-column: 2; grid-row: 1 / span 3; }
    .pr-tier + .pr-tier { border-block-start: 1px solid var(--paper-line); }
  }
  .pr-tier { display: grid; gap: 1.25rem; align-content: start; padding-block: 2rem 2.25rem; }
  .pr-name { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
  .pr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
  .pr-price b { font-size: clamp(3rem, 2rem + 3.5vw, 5.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: proportional-nums; white-space: nowrap; }
  .pr-price span { font-size: 1.0625rem; color: var(--paper-soft); }
  .pr-frame { border-radius: 14px; background: var(--p-bg); border: 1px solid var(--p-border-strong); overflow: hidden; box-shadow: 0 1.5rem 3rem -1.75rem oklch(0.2 0.01 75 / .5); }
  .pr-frame-body { display: grid; gap: .875rem; padding: .875rem 1rem 1rem; }
  .pr-frame-body .ui-split { flex-wrap: wrap; row-gap: .25rem; }
  .pr-frame-body .ui-split b { font-weight: 600; white-space: nowrap; }
  .pr-seats { display: grid; grid-template-columns: repeat(var(--cols, var(--n)), minmax(0, 1fr)); gap: 3px; }
  .pr-seats i { position: relative; block-size: .5rem; border-radius: 2px; background: #2a2a2a; }
  .pr-seats i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--p-green); opacity: 0; transform-origin: 0 50%; }
  [data-tier="team_10"] .pr-seats i:nth-child(-n + 8)::after, [data-tier="team_100"] .pr-seats i:nth-child(-n + 64)::after, [data-tier="team_30"] .pr-seats i:nth-child(-n + 19)::after { opacity: 1; }
  .pr-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
  .pr-people li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .625rem; padding: .375rem .5rem; border-radius: 8px; background: var(--p-surface); font-size: .875rem; }
  .pr-people .ui-ava { inline-size: 1.5rem; block-size: 1.5rem; font-size: .75rem; }
  .pr-people .pr-more { display: block; background: none; padding-block: .25rem 0; }
  .pr-seats-note { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
  .pr-detail { row-gap: 2rem; align-items: start; }
  .pr-sub { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 800; }
  .pr-table dl { margin: 0; display: grid; }
  .pr-table dl > div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .75rem; border-block-end: 1px solid var(--paper-line); font-size: 1.0625rem; }
  .pr-table dd { margin: 0; font-weight: 700; text-align: end; white-space: nowrap; }
  .pr-excluded { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .625rem; font-size: 1.0625rem; color: var(--paper-soft); }
  /* the one pricing action closes the block: after what is and is not included, next to its own sentence */
  .pr-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1rem 2rem; padding-block-start: 2rem; border-block-start: 1px solid var(--paper-line); }
  .paper .cta:focus-visible { outline-color: var(--paper-ink); }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .pr-tiers { view-timeline: --seats block; }
      .pr-seats i::after { animation: seat-in linear both; animation-timeline: --seats; animation-range: cover calc(var(--i) * 2%) cover calc(10% + var(--i) * 2%); }
      [data-tier="team_30"] .pr-seats i::after { animation-range: cover calc(var(--i) * .8%) cover calc(8% + var(--i) * .8%); }
      [data-tier="team_100"] .pr-seats i::after { animation-range: cover calc(var(--i) * .25%) cover calc(6% + var(--i) * .25%); }
    }
  }
  @keyframes seat-in { from { transform: scaleX(0); } to { transform: none; } }

  /* ── faq: heading and the demo path on the left, the questions on the right (≥1024); first two answers open */
  .faq { background: var(--canvas); }
  .faq-wrap { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .faq-side { display: grid; gap: 1.5rem; align-content: start; justify-items: start; }
  .faq .h2 { max-inline-size: 14ch; }
  .faq-side .demo { font-size: 1.0625rem; font-weight: 700; text-decoration: underline; text-decoration-color: oklch(1 0 0 / .35); text-underline-offset: .3em; padding-block: .5rem; }
  @media (min-width: 1024px) {
    .faq-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: clamp(3rem, 6vw, 8rem); align-items: start; }
    .faq-side { position: sticky; inset-block-start: 8rem; }
  }
  .faq-list { display: grid; border-block-start: 1px solid var(--line); }
  .faq-item { border-block-end: 1px solid var(--line); }
  .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem; cursor: pointer;
    font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); font-weight: 700; letter-spacing: -0.01em; }
  .faq-item summary::-webkit-details-marker { display: none; }
  /* the focus ring keeps air around the question and the plus; the text stays on the list edge */
  .faq-item summary { padding-inline: .5rem; margin-inline: -.5rem; }
  .faq-a a { color: var(--ink); text-decoration: underline; text-decoration-color: oklch(1 0 0 / .35); text-underline-offset: .25em; }
  .faq-item summary i { position: relative; flex: none; inline-size: 1.25rem; block-size: 1.25rem; }
  .faq-item summary i::before, .faq-item summary i::after { content: ''; position: absolute; inset: 50% 0 auto; block-size: 2px; margin-block-start: -1px; border-radius: 1px; background: var(--ink-soft);
    transition: transform .22s var(--ease-out); }
  .faq-item summary i::after { transform: rotate(90deg); }
  .faq-item[open] summary i::after { transform: rotate(0deg); }
  .faq-a { padding-block-end: 1.75rem; max-inline-size: 52rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
  .faq-item[open] .faq-a { animation: faq-in .32s var(--ease-out); }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-.375rem); } to { opacity: 1; transform: none; } }
  @media (hover: hover) and (pointer: fine) { .faq-item summary:hover { color: var(--accent-hi); } }
  @media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-a { animation: none; } .faq-item summary i::after { transition: none; } }


  /* ── final CTA: a bookend to the hero — the same live UniFix window, one step later (deal won, payment lands) */
  .fin { background: var(--canvas); border-block-start: 1px solid var(--line); overflow: clip; --app-h: clamp(32rem, 72svh, 46rem); }
  .fn-grid { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
  .fn-copy { display: grid; gap: 1.25rem; justify-items: start; }
  /* one step under the hero H1 (4rem): the closing line sets in four lines, not five, without shrinking the window */
  .fn-title { margin: 0; font-weight: 800; font-size: 3.5rem; line-height: 1.02; letter-spacing: -0.05em; text-wrap: balance; }
  .fn-window { min-inline-size: 0; }
  /* the hero's spring (signed) never plays here: the final window is a still */
  .fw .ui-new { opacity: 1; transform: none; transition: none; }
  .fw-paid { grid-column: 2 / -1; display: grid; gap: .375rem; margin-block-start: .25rem; }
  .fw-paid .ui-bar i { inline-size: 30%; }
  .fn-wrap { display: grid; gap: 1.5rem; justify-items: start; }
  .fn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-block-start: 1rem; }
  .fn-demo { display: grid; gap: .125rem; }
  .fn-note { font-size: .9375rem; color: var(--ink-soft); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .fn-window { view-timeline: --fw block; }
      .fw-pay { animation: pay-land linear both; animation-timeline: --fw; animation-range: entry 0% cover 25%; }
      .fw-paid .ui-bar i { animation: bar-fill linear both; animation-timeline: --fw; animation-range: cover 15% cover 30%; }
    }
  }
  @keyframes pay-land { 0% { opacity: .85; transform: translateY(-.875rem) scale(.98); } 100% { opacity: 1; transform: none; } }
  @media (max-width: 1199px) { .fn-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; } .fin { --app-h: 36rem; --side: 3.25rem; } }
  @media (max-width: 767px) { .fin { --app-h: auto; --side: 2.75rem; } .fn-title { font-size: clamp(2.5rem, 10vw, 2.75rem); line-height: 1.04; letter-spacing: -0.045em; } }

  /* ── /features: the full capability list, one group per section, same frames as the landing */
  /* first screen = an offer: H1, sub, the primary action + the billing-gated price line, the real «Сделки» window (the
     product's own list view with its 12-section menu) and the chip index of the eight groups under both */
  /* ≥1200 the offer is one row (H1 | lead + actions, bottom-aligned) and the window spans the content width under it, so
     the list shows the product's «Следующий шаг» column too; ≥1600 the window breaks out of the text grid by up to 5rem a
     side (the page is height-bound there, the extra width goes to the object, not to empty margins) */
  .fp-head { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); border-block-end: 1px solid var(--line); overflow: clip; --app-h: auto; --side: 2.75rem; }
  .fp-head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .fp-head-copy, .fp-offer { display: grid; gap: 1.25rem; align-content: start; justify-items: start; min-inline-size: 0; }
  .fp-head .fp-title { font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.5rem); max-inline-size: 18ch; }
  .fp-window { min-inline-size: 0; }
  .fp-window .object { padding-block-end: 0; }
  @media (min-width: 768px) { .fp-head { --app-h: 30rem; --side: 3.25rem; } .fp-head .fp-title { max-inline-size: 24ch; } }
  @media (min-width: 1200px) {
    .fp-head { --side: 11.5rem; padding-block: 1.5rem 2rem; }
    .fp-head-grid { row-gap: 1.25rem; }
    .fp-head-copy { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); column-gap: 2rem; align-items: end; }
    .fp-head .fp-title { max-inline-size: 18ch; }
    .fp-window { margin-inline: calc(-1 * max(0rem, min(5rem, (100vw - 90rem) / 2))); }
  }
  .fp-menu { justify-self: end; inline-size: min(100%, 21rem); padding: .875rem .625rem; border-radius: 14px; background: #131313; border: 1px solid var(--p-border-strong);
    box-shadow: 0 2.5rem 6.25rem -2.5rem oklch(0 0 0 / .95); }
  .fp-menu .app-brand { display: flex; align-items: center; justify-content: start; gap: .5rem; padding: 0 .5rem .625rem; font-size: .9375rem; font-weight: 700; }
  .fp-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .8125rem; }
  .fp-menu-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: .75rem .5rem 0; padding-block-start: .75rem; border-block-start: 1px solid var(--p-border); font-size: .75rem; color: var(--p-muted); }
  .fp-menu-foot .ui-btn { min-block-size: 1.75rem; padding: 0 .625rem; font-size: .75rem; }
  /* the deals list of the product (src/App.vue: «Все сделки», Канбан | Список, columns Сделка · Стадия · Сумма) */
  .dw-body { display: grid; grid-template-rows: auto auto; align-content: start; gap: .875rem; min-block-size: 0; overflow: hidden; padding: .875rem 1rem; container-type: inline-size; }
  .dw-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
  .dw-tab { padding: .3125rem .625rem; border-radius: .5rem; background: var(--p-elev); font-size: .8125rem; font-weight: 600; }
  .dw-tab span { margin-inline-start: .25rem; font-weight: 500; color: var(--p-muted); }
  .dw-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--p-border); border-radius: .5rem; font-size: .75rem; color: var(--p-muted); }
  .dw-seg > span { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-radius: .375rem; }
  .dw-seg .is-on { background: var(--p-elev); color: var(--p-text); }
  .dw-seg .ico { inline-size: .875rem; block-size: .875rem; margin: 0; }
  .dw-table { display: grid; align-content: start; border: 1px solid var(--p-border); border-radius: .625rem; overflow: hidden; background: var(--p-surface); }
  .dw-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.75rem 5.5rem; align-items: center; gap: .75rem; min-block-size: 3.25rem; padding: .5rem .875rem; font-size: .8125rem; }
  .dw-row + .dw-row { border-block-start: 1px solid var(--p-border); }
  .dw-head { min-block-size: 0; padding-block: .5rem; background: var(--p-bg); font-size: .75rem; color: var(--p-muted); }
  .dw-head > :nth-child(3), .dw-sum { text-align: end; }
  /* the product list's «Следующий шаг» column (seed nextStep) — only where the window is wide enough to hold it */
  .dw-next { display: none; min-inline-size: 0; padding-inline-start: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @container (min-width: 46rem) {
    .dw-row { grid-template-columns: minmax(0, 1fr) 7rem 6rem minmax(0, 1fr); }
    .dw-next { display: block; }
  }
  .dw-sum { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .dw-stage { justify-self: start; display: inline-flex; padding: .1875rem .5rem; border-radius: .3125rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05);
    font-size: .75rem; white-space: nowrap; color: var(--st); }
  [data-stage="new"] { --st: #87aaff; } [data-stage="discussion"] { --st: #b39af0; } [data-stage="proposal"] { --st: #f0a500; }
  [data-stage="contract"] { --st: #5bbdbe; } [data-stage="won"] { --st: #65c492; }
  /* a phone-width pane keeps the stage under the client instead of squeezing the deal name */
  @container (max-width: 26rem) {
    .dw-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .375rem; }
    .dw-row > .dw-stage { grid-row: 2; }
    .dw-row > .dw-sum { grid-row: 1; grid-column: 2; }
    .dw-head > :nth-child(2) { display: none; }
  }
  .fp-title { margin: 0; font-weight: 800; font-size: clamp(2.5rem, 1.4rem + 3vw, 4.25rem); line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; max-inline-size: 22ch; }
  /* the group index wraps at every width: nothing is cut by the screen edge (panel 2026-10-03) */
  .fp-index { display: flex; flex-wrap: wrap; gap: .5rem; }
  .fp-index a { display: inline-flex; align-items: center; min-block-size: 2.5rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .9375rem; }
  @media (hover: hover) and (pointer: fine) { .fp-index a:hover, .fp-quiet:hover { border-color: oklch(1 0 0 / .45); } }
  .fp-group { padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
  .fp-group:nth-child(odd of .fp-group) { background: var(--canvas-2); }
  .fp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
  .fp-text { display: grid; gap: .875rem; justify-items: start; }
  .fp-grid .mini-fig { align-self: start; }
  .fp-grid .mini-fig, .fp-grid .mini { block-size: auto; }
  .fp-grid .mini-body { min-block-size: 0; }
  .fp-name { margin: 0; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
  /* every capability reads at full contrast; the ★ items simply come first (template order) */
  .fp-items { gap: .625rem; color: var(--ink); }
  .fp-items li::before { background: var(--ink-soft); }
  .fp-quiet { margin-block-start: 1rem; font-weight: 700; text-decoration: underline; text-decoration-color: oklch(1 0 0 / .35); text-underline-offset: .3em; padding-block: .5rem; }
  .fp-integrations { margin-block-start: clamp(3rem, 2rem + 3vw, 5rem); }
  .fp-integrations .wrap { display: grid; gap: 1rem; }
  .fp-int-title { margin: 0; font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }
  /* groups flow in balanced columns (one group has six rows, two have one): no row of holes under the short groups */
  .fp-int { columns: 3; column-gap: 3rem; margin-block-start: 1.5rem; }
  .fp-int-group { break-inside: avoid; }
  .fp-int-group + .fp-int-group { margin-block-start: 2.5rem; } /* dropped at the top of a column (unforced break) */
  .fp-int-group h4 { margin: 0 0 .75rem; font-size: .9375rem; font-weight: 600; color: var(--ink-soft); }
  .fp-int-group dl { margin: 0; display: grid; gap: 1rem; }
  .fp-int-group > dl > div { padding-block-start: .875rem; border-block-start: 1px solid var(--line); }
  .fp-int-group dt { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
  .fp-int-group dd { margin: .25rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
  /* the one light block of /features: the integrations group with the full list (the page is not flat in luminance) */
  .page-features .fp-group.paper { background: var(--paper); border-radius: 2rem; }
  .fp-group.paper .ft-promise, .fp-group.paper .fp-items, .fp-group.paper .ft-partial, .fp-group.paper .fp-int-group dt { color: var(--paper-ink); }
  .fp-group.paper .fp-items li::before { background: var(--paper-soft); }
  .fp-group.paper .fp-int-group h4, .fp-group.paper .fp-int-group dd { color: var(--paper-soft); }
  .fp-group.paper .fp-int-group > dl > div { border-block-start-color: var(--paper-line); }
  .fp-group.paper .mini { box-shadow: 0 1.5rem 3rem -1.75rem oklch(0.2 0.01 75 / .5); }
  .fp-final { max-inline-size: none; }
  .page-features .fp-final { grid-template-columns: minmax(0, 1fr); }

  /* headlines never run to four lines on very wide screens */
  @media (min-width: 1600px) { .sec .h2:not(.ft-head .h2), .fn-title { max-inline-size: 18ch; } }

  /* ── footer: brand + one line, three columns, base row; quiet, on the content grid */
  .foot { background: var(--canvas); border-block-start: 1px solid var(--line); padding-block: clamp(3.5rem, 3rem + 2vw, 5rem) 2.5rem; font-size: 1rem; color: var(--ink-soft); }
  .foot-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 3rem clamp(2rem, 5vw, 6rem); }
  .foot-brand { display: grid; gap: 1rem; align-content: start; justify-items: start; max-inline-size: 24rem; }
  .foot-brand p { line-height: 1.5; }
  .foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .foot-h { margin-block-end: .75rem; font-weight: 700; color: var(--ink); }
  .foot-cols ul, .foot-lang { list-style: none; margin: 0; padding: 0; }
  .foot-cols ul { display: grid; gap: .25rem; }
  .foot-cols a { display: inline-block; padding-block: .3rem; text-decoration: none; line-height: 1.35; }
  .foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--line); font-size: .9375rem; }
  .foot-sources a { white-space: nowrap; margin-inline-end: .75rem; text-decoration: underline; text-decoration-color: oklch(1 0 0 / .3); text-underline-offset: .3em; }
  .foot-lang { display: flex; gap: 1rem; margin-inline-start: auto; }
  .foot-lang a { font-weight: 700; color: var(--ink); text-decoration: none; padding: .25rem 0; }
  .foot-lang .is-off { color: oklch(0.6 0.01 80); }
  .foot-lang small { font-size: .8125rem; }
  .legal-page .wrap { display: grid; gap: 1.5rem; justify-items: start; }
  @media (hover: hover) and (pointer: fine) {
    .foot-cols a:hover, .foot-sources a:hover { color: var(--ink); }
  }
  @media (max-width: 1023px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 767px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-lang { margin-inline-start: 0; } }

  @media (max-width: 1023px) {
    .how-grid, .ch-grid, .cn-grid, .mg-grid { grid-template-columns: minmax(0, 1fr); }
    .ft-groups { grid-template-columns: minmax(0, 1fr); }
    .pr-detail, .fp-grid { grid-template-columns: minmax(0, 1fr); }
    .fp-int { columns: 2; }
    .answer-list { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .quote.q1, .quote.q2, .quote.q3 { grid-column: 1 / -1; }
    .quote.q2 { padding-inline-start: 12%; }
  }
  @media (max-width: 767px) {
    .pain { border-radius: 1.25rem 1.25rem 0 0; }
    .pricing, .page-features .fp-group.paper { border-radius: 1.25rem; }
    .fn-actions .cta { inline-size: 100%; white-space: normal; }
    .fp-int { columns: 1; }
    .pr-tiers { grid-template-columns: minmax(0, 1fr); }
    .pr-tier + .pr-tier { border-block-start: 1px solid var(--paper-line); }
    /* one team frame on a phone: 30 and 100 become name + price rows instead of three screens of seat mocks */
    .pr-tier + .pr-tier { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; padding-block: 1.25rem; }
    .pr-tier + .pr-tier .pr-frame, .pr-tier + .pr-tier .pr-price span { display: none; }
    .pr-tier + .pr-tier .pr-price b { font-size: 2rem; }
    .pr-cta-row .cta { inline-size: 100%; }
    /* label and value stay on one row (1fr auto): «да» no longer takes a line of its own */
    .pr-table dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; }
    .pr-table dd { max-inline-size: 8rem; white-space: normal; }
    .quote.q2 { padding-inline-start: 0; }
    .ui-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .how-card { padding: .625rem; border-radius: .875rem; }
  }
}