:root { --soft: #f4f4f2;
    --bird-body: #2b211c; --bird-head: #111; --bird-wing: #3a2b23;
    --spring: linear(0, .25 7%, 1.02 27%, 1.08 34%, 1.04 42%, .99 55%, 1); }
  @media (prefers-color-scheme: dark) { :root { --soft: #141414; --bird-body: #6e4b3a; --bird-head: #3a322c; --bird-wing: #8a6450; } }
  html { scroll-behavior: smooth; }
  /* шкала 1.2 с плавным ростом; трекинг сжимается с размером */
  :root { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 72px; --hair: 1px solid var(--line); --rule: 2px solid var(--ink); --measure: 36em; --ctl: 48px; }
  :root { --t-1: .833rem; --t0: 1rem; --t1: 1.2rem; --t2: clamp(1.44rem, 1.3rem + .6vw, 1.73rem); --t4: clamp(2.5rem, 1.6rem + 4.2vw, 4.4rem); }
  html { font-size: 17px; -webkit-text-size-adjust: 100%; }
  h1, h2, h3, .card b, .plan .price { text-wrap: balance; }
  p, li, dd, .card span, .caption { text-wrap: pretty; }
  .price, .card b, .badge, #ver, .codebox output { font-variant-numeric: lining-nums tabular-nums; }
  .top { max-width: 760px; margin: 0 auto; padding: 16px 20px 0; display: flex; gap: 18px; align-items: baseline; font-size: .92rem; }
  .top b { font-size: 1.05rem; letter-spacing: -.02em; margin-right: auto; }
  .top a { text-decoration: none; color: var(--mute); } .top a:hover { color: var(--ink); }
  .top a.cta { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--beak); }
  main { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; }
  section { margin: 0 0 var(--s5); }
  h1 { font-size: var(--t4); line-height: .96; letter-spacing: -.042em; margin: 0 0 24px; font-weight: 700; max-width: 11em; text-box: trim-both cap alphabetic; }
  h2 { font-size: var(--t2); letter-spacing: -.028em; line-height: 1.08; margin: 0 0 22px; padding-top: var(--s3); border-top: var(--rule); font-weight: 700; }
  p { margin: 0 0 var(--s2); max-width: var(--measure); }
  .lead { font-size: var(--t1); line-height: 1.42; letter-spacing: -.008em; max-width: var(--measure); }
  .mute { color: var(--mute); }
  .small { font-size: var(--t-1); line-height: 1.45; }

  /* пробный код: одно поле и одна кнопка */
  .trial { display: grid; grid-template-columns: 1fr auto; gap: var(--s1); margin: var(--s3) 0 var(--s1); max-width: var(--measure); }
  .trial label { grid-column: 1 / -1; font-weight: 600; font-size: var(--t-1); }
  @media (max-width: 520px) { .trial { grid-template-columns: 1fr; } }
  .trial input { min-width: 0; min-height: var(--ctl); font: inherit; padding: 0 14px; border: var(--rule); border-radius: 2px; background: var(--paper); color: var(--ink); }
  .trial input[aria-invalid="true"] { border-color: #c8281c; }
  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ctl); background: var(--beak); color: #000; font: inherit; font-weight: 700; text-decoration: none; padding: 0 20px; border-radius: 2px; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, transform .2s var(--spring); }
  .btn:hover { background: color-mix(in srgb, var(--beak) 88%, #000); } .btn:active { transform: scale(.97); }
  .btn:focus-visible, .trial input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .btn--ghost { background: transparent; color: var(--ink); border: var(--rule); }
  .btn--ghost:hover { background: var(--soft); }
  .msg { min-height: 1.4em; font-size: .92rem; }
  .msg[data-ok="false"] { color: #c8281c; }
  @media (prefers-color-scheme: dark) { .msg[data-ok="false"] { color: #ff6b5e; } }
  .result ol { margin: var(--s1) 0 0; padding-left: 1.3em; } .result li { margin: 4px 0; }
  .result { margin: var(--s2) 0 var(--s1); padding: var(--s2); border: var(--rule); border-radius: 2px; max-width: var(--measure);
    transition: opacity .4s ease, translate .5s var(--spring); }
  @starting-style { .result { opacity: 0; translate: 0 8px; } }
  .codebox { display: flex; gap: 8px; margin: 10px 0; }
  .codebox output { flex: 1; min-width: 0; padding: 10px 12px; background: var(--soft); border-radius: 4px; font: 600 .95rem/1.3 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
  .promise { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--mute); }
  .promise li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--ink); margin-right: 8px; vertical-align: 2px; }

  /* сцена: майна на краю карточки */
  .stage { position: relative; margin: 132px 0 12px; }
  .card { padding: var(--s2) 0 var(--s1) var(--s2); border-left: 4px solid var(--beak); border-top: var(--rule); min-height: 136px; view-transition-name: demo-card; }
  .card small { color: var(--mute); font-size: .85rem; }
  /* три слоя, как в расширении: Do — ход мелко, Say — дословная фраза крупно */
  .card i { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
  .card .do { display: block; margin: 8px 0 10px; font-weight: 600; } .card .do i { margin-right: 8px; }
  .card .say { display: block; background: var(--soft); border-left: 3px solid var(--beak); margin-left: calc(-1 * var(--s2) - 4px); padding: 10px 14px 12px; }
  .card .say i { display: block; margin-bottom: 4px; color: color-mix(in srgb, var(--beak) 55%, var(--ink)); }
  .card b { display: block; font-size: var(--t1); line-height: 1.3; letter-spacing: -.012em; font-weight: 600; }
  .card .tag { display: block; color: var(--mute); font-size: .78rem; margin-top: 8px; }
  ::view-transition-old(demo-card), ::view-transition-new(demo-card) { animation-duration: .45s; }
  .caption { font-size: .92rem; color: var(--mute); }
  body { position: relative; }
  .perch { position: absolute; left: 0; top: 0; z-index: 5; width: 150px; pointer-events: none; will-change: transform; }
  .flip { position: relative; transition: transform .35s var(--spring); }
  .flip.is-right { transform: scaleX(-1); }
  .bird { display: block; width: 100%; height: auto; overflow: visible; pointer-events: auto; cursor: pointer; transition: translate .35s var(--spring); }
  .bird.is-hop { translate: 0 -12px; }
  .b-wing-g { transform-box: view-box; transform-origin: 70px 64px; }
  .perch.is-flying .b-wing-g { animation: flap .16s ease-in-out infinite alternate; }
  .perch.is-flying .b-leg { opacity: 0; }
  @keyframes flap { from { transform: rotate(-38deg); } to { transform: rotate(12deg); } }
  #pupil { transition: transform .15s ease; }
  .b-head-g.is-peck { transform: rotate(24deg) translateY(6px); }
  .note { position: absolute; left: 6px; top: 6px; font-size: 22px; color: var(--beak); opacity: 0; pointer-events: none; transition: opacity .2s ease, translate .9s ease-out; }
  .note.is-on { opacity: 1; translate: -18px -36px; }
  .b-body { fill: var(--bird-body); } .b-wing { fill: var(--bird-wing); } .b-flash { fill: #fff; }
  .b-head { fill: var(--bird-head); } .b-patch, .b-beak { fill: var(--beak); }
  .b-eye { fill: #111; } .b-glint { fill: #fff; }
  .b-lid { fill: var(--beak); transform-box: fill-box; transform-origin: center top; transform: scaleY(0); transition: transform .08s ease; }
  .b-leg { stroke: var(--beak); stroke-width: 3; stroke-linecap: round; fill: none; }
  .b-head-g { transform-box: view-box; transform-origin: 62px 60px; transition: transform .6s var(--spring); }
  #beakLow { transform-box: view-box; transform-origin: 34px 53px; transition: transform .12s ease; }
  .bird.is-listen .b-head-g { transform: rotate(-14deg); }
  .bird.is-speak #beakLow { transform: rotate(16deg); }
  .bird.is-blink .b-lid { transform: scaleY(1); }

  /* как это работает: линия заполняется по мере прокрутки (scroll-driven animation) */
  .steps { list-style: none; padding: 0 0 0 28px; margin: 0; position: relative; }
  .steps::before, .steps::after { content: ""; position: absolute; left: 7px; top: 6px; bottom: 28px; width: 2px; }
  .steps::before { background: var(--line); }
  .steps::after { background: var(--ink); transform-origin: top; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .steps::after { animation: fill linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    }
  }
  @keyframes fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .steps li { margin: 0 0 22px; position: relative; max-width: var(--measure); }
  .steps li::before { content: ""; position: absolute; left: -28px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
  .steps h3 { margin: 0 0 2px; font-size: var(--t1); letter-spacing: -.014em; line-height: 1.25; }

  .vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
  .vs div { padding-top: var(--s1); border-top: var(--hair); }
  .vs b { display: block; margin-bottom: 4px; }

  /* тарифы */
  .plans { display: grid; grid-template-columns: minmax(0, var(--measure)); gap: var(--s2); }
  .plan { display: grid; gap: var(--s1); align-content: start; padding: var(--s3); border: var(--hair); border-radius: 2px; }
  .plan.is-main { border: var(--rule); }
  .plan .badge { justify-self: start; font-size: var(--t-1); font-weight: 700; border: 1px solid var(--ink); padding: 2px 8px; border-radius: 2px; }
  .plan h3 { margin: 4px 0 0; font-size: var(--t1); letter-spacing: -.016em; }
  .plan .price { font-size: var(--t2); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
  .plan .price small { font-size: .9rem; font-weight: 400; color: var(--mute); letter-spacing: 0; }
  .plan ul { margin: 4px 0 12px; padding-left: 1.1em; } .plan li { margin: 3px 0; }
  .plan .btn { justify-self: start; }
  .plan .price s { font-size: .6em; font-weight: 400; color: var(--mute); }
  .plan li b { font-weight: 700; }
  .plan .risk { margin: 0; }
  .plans__lead { max-width: var(--measure); color: var(--mute); margin: 0 0 var(--s2); }
  /* маркер: майна «подсвечивает» тариф, когда садится на него */
  .hl { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--beak) 55%, transparent) 55%) no-repeat 0 0 / 0% 100%; color: inherit; padding: 0 2px; transition: background-size .9s cubic-bezier(.6,0,.2,1) .15s; }
  .plan.is-lit .hl { background-size: 100% 100%; }
  .plan.is-main { transition: border-color .3s ease; }


  .install ol { padding-left: 1.3em; max-width: 34em; } .install li { margin: 6px 0; }
  .why { background: var(--soft); padding: var(--s2); border-radius: 2px; max-width: var(--measure); }
  details { max-width: 34em; margin: 10px 0; } summary { cursor: pointer; font-weight: 600; }
  .faq details { border-top: var(--hair); } .faq details:last-child { border-bottom: var(--hair); }
  .faq summary { font-weight: 700; padding: 14px 28px 14px 0; cursor: pointer; list-style: none; position: relative; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-weight: 400; font-size: 1.3rem; line-height: 1; }
  .faq details[open] summary::after { content: "–"; }
  .faq details p { margin: 0 0 16px; max-width: 34em; color: var(--ink); }
  footer { max-width: 760px; margin: 0 auto; padding: var(--s2) 20px var(--s5); border-top: var(--hair); color: var(--mute); font-size: var(--t-1); }
  .skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 2px; }
  .skip:focus { top: 8px; }
  .motion { background: none; border: 0; padding: 4px 0; color: var(--mute); font: inherit; font-size: var(--t-1); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 520px) { .perch { width: 100px; } .stage { margin-top: 96px; } .top a:not(.keep) { display: none; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
  .mt-s2 { margin-top: var(--s2); }
  .demo-link { margin: 4px 0 8px; font-weight: 600; } .demo-link a { text-decoration: none; border-bottom: 2px solid var(--beak); }

  /* «Это вы?»: роль → боль → фраза Myna → демо этой роли */
  .who { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .who__item { display: grid; gap: 8px; align-content: start; text-decoration: none; padding: 14px 16px 16px; border: 1.5px solid var(--line); border-radius: 4px; transition: border-color .15s ease, transform .2s var(--spring); }
  .who__item:hover { border-color: var(--ink); } .who__item:active { transform: scale(.98); }
  .who__item b { font-size: var(--t1); letter-spacing: -.014em; }
  .who .pain { color: var(--mute); line-height: 1.4; }
  .who .fix { background: var(--soft); border-left: 3px solid var(--beak); padding: 8px 10px; font-weight: 600; line-height: 1.35; }
  .who .fix i { display: block; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
  .who .go { font-weight: 700; font-size: var(--t-1); }