/* nocf — направление «Продукт в действии» (taste product-performs), палитра «газетная бумага и латунь», Jost.
   Токены из CLAUDE.md: кривые Emil для UI, expo для reveal. Весь моушн — transform/opacity/clip-path. */

/* ---------- шрифты (self-hosted, кириллица + латиница) ---------- */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/jost-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/jost-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/jost-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- токены ---------- */
:root {
  --bg: #e8e8e3;
  --surface: #dcdcd6;
  --surface-2: #cfcfc8;
  --ink: #181715;
  --muted: #55544e;
  --accent: #bfb21a;
  --accent-ink: #181715;
  --dark: #181715;
  --dark-ink: #e8e8e3;
  --dark-muted: #a9a8a0;

  /* интерфейсные фрагменты: «Data terminal» */
  --ui-bg: #1f1e1b;
  --ui-card: #141311;
  --ui-raised: #2b2a26;
  --ui-rule: rgba(232, 232, 227, 0.12);
  --ui-text: #ecebe5;
  --ui-muted: #a09f97;
  --ui-radius: 4px;

  --font: "Jost", "Futura PT", "Century Gothic", system-ui, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 1.5rem);
  --section: clamp(7.5rem, 12vw, 13rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 220ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
  --stagger-line: 90ms;
  --stagger-item: 70ms;

  color-scheme: light;
}

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: #8d8c84 var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--ink);
  -webkit-tap-highlight-color: transparent; overflow-x: clip; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; }
b, strong { font-weight: 600; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.field-dark :focus-visible, [data-ui] :focus-visible { outline-color: var(--dark-ink); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; background: var(--surface); padding: 0.1em 0.35em; }

.wrap { padding-inline: var(--margin); }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
p { text-wrap: pretty; }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 50; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; }
.skip:focus { top: 0.5rem; }

/* заголовки: Jost 700 капсом */
.head, .hero__title, .steps__title, .cta__sentence {
  font-family: var(--font); font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92; text-wrap: balance;
}
.head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }

/* ---------- ссылки и кнопки ---------- */
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em;
  transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.5rem;
  background: var(--ink); color: var(--bg); border-radius: var(--radius); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button--accent { background: var(--accent); color: var(--accent-ink); }
.button--small { min-height: 2.75rem; padding: 0 1.1rem; font-size: 0.9375rem; background: var(--accent); color: var(--accent-ink); }
.button--ghost { background: var(--surface); color: var(--ink); }
.button--wide { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #2e2d29; }
  .button--accent:hover, .button--small:hover { background: #d1c427; }
  .button--ghost:hover { background: var(--surface-2); }
}

/* ---------- шапка ---------- */
.topbar { position: absolute; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem var(--margin); }
.wordmark { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; text-decoration: none; line-height: 1; }
.topbar__nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem); font-size: 0.9375rem; }
@media (max-width: 40em) { .topbar__nav .link:not([href="/#pricing"]) { display: none; } }

/* ========================================================================
   Первый экран: фраза, разрезанная кадром. Кадр — лента живых фрагментов.
   ======================================================================== */
.hero { position: relative; --frame-w: clamp(440px, 37vw, 640px); --frame-h: max(340px, calc(var(--frame-w) * 0.5625)); }
.hero__stage { position: relative; height: 100svh; min-height: 640px; overflow: clip; }
.hero__title { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--margin); pointer-events: none;
  --half: calc((100vw - var(--frame-w)) / 2 - var(--margin) - 52px);
  font-size: min(76px, calc(var(--half) / 6.4)); }
.hero__half { display: block; }
.hero__half--b { text-align: right; }
.mask { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.only-wide { display: none; }
@media (min-width: 1100px) { .only-wide { display: inline; } }
.mask > span { display: block; }

/* полоса ленты: центральная колонка читается как плёнка, проходящая сквозь фразу */
.reel { position: absolute; z-index: 1; top: 0; left: 50%; width: calc(var(--frame-w) + 56px); height: 100%; transform: translateX(-50%);
  background: var(--surface);
  --gap: calc((100svh - var(--frame-h)) / 2 - 84px); --step: 0; }
.reel__track { position: absolute; inset: calc(50% - var(--frame-h) / 2) 28px auto; display: flex; flex-direction: column; gap: var(--gap);
  transform: translateY(calc(var(--step) * -1 * (var(--frame-h) + var(--gap))));
  transition: transform 760ms var(--ease-in-out); }
@media (min-height: 1100px) { .hero__stage { min-height: 0; } }

.hero__lead { position: absolute; z-index: 2; left: var(--margin); bottom: 2rem; max-width: 30ch; font-size: 1.25rem; line-height: 1.4; }

/* приклеенная сцена: только на широких экранах и при разрешённом движении */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .js .hero { height: 270svh; }
  .js .hero__stage { position: sticky; top: 0; }
}

/* телефон и планшет: половины фразы над и под кадром */
@media (max-width: 1099px) {
  .hero { --frame-w: auto; --frame-h: 350px; }
  .hero__stage { height: auto; min-height: 0; padding: 6.5rem 0 3rem; display: grid; grid-template-rows: auto auto auto auto; row-gap: 1.25rem; }
  .hero__title { position: relative; inset: auto; z-index: 0; grid-row: 1 / 4; grid-column: 1; display: grid; grid-template-rows: subgrid;
    padding-inline: var(--margin); font-size: clamp(2.1rem, 9vw, 4.4rem); justify-content: stretch; align-items: start; }
  .hero__half--a { grid-row: 1; }
  .hero__half--b { grid-row: 3; }
  .reel { grid-row: 2; grid-column: 1; position: relative; left: auto; transform: none; width: auto; margin-inline: var(--margin); background: none;
    height: auto; margin-inline: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margin); scrollbar-width: none; }
  .reel::-webkit-scrollbar { display: none; }
  .reel__track { position: static; inset: auto; flex-direction: row; gap: 12px; padding-inline: var(--margin); transform: none; width: max-content; }
  .frame { width: min(86vw, 560px); scroll-snap-align: start; }
  .hero__lead { grid-row: 4; position: static; padding-inline: var(--margin); font-size: 1.0625rem; max-width: 34ch; }
}

/* ---------- интерфейсные фрагменты (data-ui) ---------- */
[data-ui] { font-family: var(--font); font-variant-numeric: tabular-nums; }
.frame { flex: none; height: var(--frame-h); background: var(--ui-bg); color: var(--ui-text); border-radius: var(--ui-radius);
  display: flex; flex-direction: column; overflow: hidden; font-size: 0.8125rem; line-height: 1.4; }
.ui-head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--ui-rule); /* taste-skill-ignore: data-ui fragment / form field */
  font-size: 0.8125rem; font-weight: 500; }
.ui-muted { color: var(--ui-muted); }
.ui-line { box-shadow: inset 0 -1px 0 var(--accent); padding-bottom: 1px; } /* taste-skill-ignore: data-ui fragment / form field */
.ui-mark { color: var(--ui-text); }
.ui-was { color: var(--ui-muted); text-decoration: line-through; text-decoration-color: rgba(236, 235, 229, 0.45); }
.ui-big { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.ui-code { margin-top: auto; color: var(--ui-muted); font-size: 0.8125rem; letter-spacing: 0.01em; }
.ui-foot { margin-top: auto; padding: 0.7rem 1rem; font-size: 0.8125rem; }
.frame__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; flex: 1; }
.frame--error .frame__body { justify-content: flex-start; }

.ui-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ui-table th { text-align: left; font-weight: 500; color: var(--ui-muted); padding: 0.55rem 1rem 0.35rem; }
.ui-table td { padding: 0.45rem 1rem; border-top: 1px solid var(--ui-rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.ui-facts { display: grid; gap: 0; padding: 0.25rem 0; }
.ui-facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.6rem 1rem; border-top: 1px solid var(--ui-rule); } /* taste-skill-ignore: data-ui fragment / form field */
.ui-facts > div:first-child { border-top: 0; }
.ui-facts dt { color: var(--ui-muted); }

/* проверка домена */
.check { padding: 0.85rem 1rem 0.6rem; display: grid; gap: 0.45rem; }
.check__label { font-size: 0.8125rem; color: var(--ui-muted); }
.check__row { display: flex; gap: 0.5rem; }
.check__input { flex: 1; min-width: 0; height: 2.5rem; padding: 0 0.75rem; background: var(--ui-card); border: 1px solid var(--ui-rule); /* taste-skill-ignore: data-ui fragment / form field */
  border-radius: var(--ui-radius); font-size: 1rem; color: var(--ui-text); caret-color: var(--accent); }
.check__input::placeholder { color: #7d7c75; }
.check__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.check__button { height: 2.5rem; padding: 0 1rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--ui-radius);
  font-weight: 600; font-size: 0.9375rem; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.check__button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .check__button:hover { background: #d1c427; } }
.check__result { padding: 0 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; min-height: 0;
  transition: opacity var(--t-ui) ease; }
.check__result.is-loading { opacity: 0.45; }
.check__rows { display: grid; gap: 0.15rem; font-size: 0.8125rem; }
.check__rows > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem; }
.check__rows dt { color: var(--ui-muted); }
.check__rows dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check__verdict { display: grid; gap: 0.1rem; font-size: 0.8125rem; color: var(--ui-muted); }
.check__verdict b { color: var(--ui-text); font-weight: 600; font-size: 0.9375rem; }
.check__verdict span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.check__try { margin-top: auto; font-size: 0.8125rem; color: var(--ui-muted); display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.check__try a { color: var(--ui-text); text-decoration: underline; text-decoration-color: rgba(236, 235, 229, 0.35); text-underline-offset: 0.25em;
  transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .check__try a:hover { text-decoration-color: var(--accent); } }
.check__cta { justify-self: start; color: var(--ui-text); font-weight: 500; font-size: 0.875rem; text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 0.25em; }
@media (max-width: 1099px) { .check__verdict span { -webkit-line-clamp: 4; } }

/* ========================================================================
   Почему не открывается
   ======================================================================== */
.intro { padding-block: calc(var(--section) * 0.6) calc(var(--section) * 0.6); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 2rem; align-items: start; }
.intro > .head, .intro > .statement { grid-column: 1 / 9; }
.intro__photo { grid-column: 9 / 13; grid-row: 1 / 3; margin: 0; aspect-ratio: 3 / 2; overflow: clip; background: #c9c8c0; }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; }
.intro__cols { grid-column: 1 / -1; }
@media (max-width: 1099px) { .intro > .head, .intro > .statement, .intro__photo { grid-column: 1 / -1; } .intro__photo { grid-row: auto; order: 3; } }
.statement { font-size: clamp(1.375rem, 1rem + 1.3vw, 2rem); line-height: 1.22; max-width: 58ch; font-weight: 400; }
.intro__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem var(--gutter); margin-top: 2.5rem; }
.intro__cols p { font-size: var(--step-body); line-height: 1.5; }
@media (max-width: 1099px) { .intro__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .intro__cols { grid-template-columns: 1fr; gap: 1.75rem; } }

/* фотография-пауза */
.plate { margin: 0; }
.plate__frame { height: min(78svh, 56vw); overflow: clip; background: #b9b8b0; }
.plate__frame img { width: 100%; height: 100%; object-fit: cover; }
.plate__caption { padding-top: 0.75rem; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.plate__caption > span:first-child { max-width: 70ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate__frame img { animation: plate-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes plate-drift { from { transform: scale(1.14) translateY(-3%); } to { transform: scale(1.02) translateY(3%); } }

/* ========================================================================
   Как подключить: одна карточка, четыре поля
   ======================================================================== */
.steps { margin-top: var(--section); }
.steps__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.steps__field { position: relative; min-height: 84svh; padding: 1.75rem; display: flex; flex-direction: column; }
.steps__field--1 { background: var(--surface); }
.steps__field--2 { background: #b8b7ad; }
.steps__field--3 { background: #3a3934; color: var(--dark-ink); }
.steps__field--4 { background: var(--dark); color: var(--dark-ink); }
.steps__title { font-size: clamp(1.5rem, 2vw, 2rem); position: absolute; top: 1.75rem; left: 1.75rem; right: 1.75rem; }
.steps__clause { margin-top: auto; font-size: 2rem; line-height: 1.12; max-width: 14ch; }

.ticket { position: absolute; left: 50%; top: 38%; width: 260px; max-width: calc(100% - 2rem); translate: -50% 0;
  background: var(--ui-card); color: var(--ui-text); border-radius: var(--ui-radius); padding: 0.85rem; font-size: 0.8125rem; line-height: 1.35;
  display: grid; gap: 0.45rem; transition: transform 150ms var(--ease-out); }
.steps__field--3 .ticket, .steps__field--4 .ticket { background: var(--ui-raised); }
.ticket__top { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 500; padding-bottom: 0.45rem; border-bottom: 1px solid var(--ui-rule); } /* taste-skill-ignore: data-ui fragment / form field */
.ticket__top > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket__status { color: var(--ui-muted); white-space: nowrap; }
.ticket__status.ui-line { color: var(--ui-text); }
.ticket__row { display: flex; justify-content: space-between; gap: 0.5rem; }
.ticket__row > span:first-child { color: var(--ui-muted); }
.ticket__checks { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; padding-top: 0.45rem; border-top: 1px solid var(--ui-rule); color: var(--ui-muted); } /* taste-skill-ignore: data-ui fragment / form field */
.ticket__check { display: inline-flex; align-items: center; gap: 0.35rem; }
.ticket__check::before { content: ""; width: 9px; height: 9px; border: 1px solid currentColor; } /* taste-skill-ignore: data-ui fragment / form field */
.ticket__check.is-done { color: var(--ui-text); }
.ticket__check.is-done::before { background: currentColor; }
@media (hover: hover) and (pointer: fine) { .steps__field:hover .ticket { transform: translateY(-6px); } }

@media (max-width: 1099px) {
  .steps__list { grid-template-columns: 1fr 1fr; }
  .steps__field { min-height: 64svh; }
}
@media (max-width: 40em) {
  .steps__list { grid-template-columns: 1fr; }
  .steps__field { min-height: 0; padding: 1.5rem var(--margin) 2rem; gap: 1.5rem; }
  .steps__title { position: static; order: -2; font-size: 1.5rem; }
  .steps__clause { order: -1; margin-top: 0; font-size: 1.5rem; max-width: 18ch; }
  .ticket { position: static; translate: none; }
}

/* ========================================================================
   Что входит: панель с заметками на полях
   ======================================================================== */
.features { padding-block: var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: 3.25rem repeat(6, 6.75rem); }
.features__title { grid-column: 1 / 5; grid-row: 1 / 3; justify-self: end; text-align: right; align-self: start; max-width: 9em; }
.panel { grid-column: 5 / 9; grid-row: 1 / 8; justify-self: center; width: min(400px, 100%); display: grid; grid-template-rows: subgrid;
  background: var(--ui-bg); color: var(--ui-text); border-radius: var(--ui-radius); font-size: 0.875rem; overflow: hidden; }
.panel__head { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--ui-rule); font-weight: 500; } /* taste-skill-ignore: data-ui fragment / form field */
.panel__row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; gap: 0.35rem 1rem;
  padding: 0 1rem; border-top: 1px solid var(--ui-rule); transition: background-color var(--t-ui) ease; } /* taste-skill-ignore: data-ui fragment / form field */
.panel__head + .panel__row { border-top: 0; }
.panel__label { font-weight: 500; justify-self: start; }
.panel__sub { grid-column: 1 / -1; color: var(--ui-muted); font-size: 0.8125rem; }
.panel__row.is-hl { background: var(--ui-raised); }
.panel__row.is-hl .panel__label { box-shadow: inset 0 -1px 0 var(--accent); } /* taste-skill-ignore: data-ui fragment / form field */

.seg { display: inline-flex; gap: 0.25rem; }
.seg__btn { padding: 0.2rem 0.5rem; color: var(--ui-muted); font-size: 0.8125rem; transition: color var(--t-hover) ease; }
.seg__btn.is-on { color: var(--ui-text); box-shadow: inset 0 -1px 0 var(--accent); } /* taste-skill-ignore: data-ui fragment / form field */
.switch { position: relative; width: 2.25rem; height: 1.25rem; border-radius: 1rem; background: var(--ui-card); border: 1px solid var(--ui-rule); /* taste-skill-ignore: data-ui fragment / form field */
  transition: background-color var(--t-ui) ease; }
.switch span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ui-muted);
  transition: transform var(--t-ui) var(--ease-out), background-color var(--t-ui) ease; }
.switch[aria-checked="true"] span { transform: translateX(16px); background: var(--ui-text); }
.switch[aria-checked="true"] { border-color: rgba(191, 178, 26, 0.7); }
.pick { padding: 0.2rem 0.55rem; background: var(--ui-card); border: 1px solid var(--ui-rule); border-radius: var(--ui-radius); font-size: 0.8125rem; /* taste-skill-ignore: data-ui fragment / form field */
  transition: transform var(--t-press) var(--ease-out), border-color var(--t-hover) ease; }
.pick:active, .seg__btn:active, .switch:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pick:hover { border-color: rgba(236, 235, 229, 0.35); } .seg__btn:hover { color: var(--ui-text); } }

.features { grid-template-rows: 3.25rem repeat(6, 6.75rem) auto; }
.features__aside { grid-column: 5 / 9; grid-row: 8; justify-self: center; width: min(400px, 100%); margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }
.notes { grid-column: 1 / -1; grid-row: 2 / 8; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; pointer-events: none; }
.note { display: grid; gap: 0.2rem; align-content: center; pointer-events: auto; max-width: 26ch; cursor: default; }
.note b { font-size: var(--step-body); font-weight: 600; }
.note span { font-size: 0.9375rem; line-height: 1.4; color: var(--muted); transition: color var(--t-hover) ease; }
.note.is-hl span { color: var(--ink); }
.note--l { grid-column: 1 / 5; justify-self: end; text-align: right; }
.note--r { grid-column: 9 / 13; justify-self: start; }
.note:nth-child(1) { grid-row: 1; } .note:nth-child(2) { grid-row: 2; } .note:nth-child(3) { grid-row: 3; }
.note:nth-child(4) { grid-row: 4; } .note:nth-child(5) { grid-row: 5; } .note:nth-child(6) { grid-row: 6; }

@media (max-width: 1099px) {
  .features { display: block; }
  .features__title { text-align: left; margin: 0 0 2rem; max-width: none; justify-self: auto; }
  .panel { display: block; width: 100%; max-width: 480px; }
  .panel__head { padding-block: 0.8rem; }
  .panel__row { padding-block: 0.9rem; }
  .notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem var(--gutter); margin-top: 2rem; pointer-events: auto; }
  .features__aside { max-width: 480px; }
  .note--l, .note--r { grid-column: auto; grid-row: auto !important; justify-self: start; text-align: left; max-width: none; }
}
@media (max-width: 40em) { .notes { grid-template-columns: 1fr; } }

/* ========================================================================
   Тарифы: цена очень крупно
   ======================================================================== */
.field-dark { background: var(--dark); color: var(--dark-ink); }
.pricing { padding-block: var(--section); min-height: 80svh; display: flex; align-items: center; }
.pricing__grid { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.pricing__intro { grid-column: 1 / 5; display: grid; gap: 1.5rem; align-content: start; }
.pricing__intro p { font-size: var(--step-body); color: var(--dark-ink); max-width: 36ch; }
.pricing__photo { order: 2; margin: 1.5rem 0 0; aspect-ratio: 3 / 2; overflow: clip; background: #2b2a26; }
.pricing__photo img { width: 100%; height: 100%; object-fit: cover; }
.tabs { order: 1; display: flex; gap: 1.5rem; margin-top: 0.5rem; }
.tabs__tab { padding: 0.4rem 0; font-size: 1.25rem; color: var(--dark-muted); transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.tabs__price { color: var(--dark-muted); font-variant-numeric: tabular-nums; }
.tabs { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.tabs__tab[aria-selected="true"] { color: var(--dark-ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.45em; }
.tabs__tab:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .tabs__tab:hover { color: var(--dark-ink); } }

.pricing__plans { grid-column: 6 / 13; position: relative; display: grid; }
.plan { grid-area: 1 / 1; display: grid; gap: 1.25rem; align-content: start; }
.plan__name { font-size: var(--step-lead); font-weight: 500; }
.plan__price { display: flex; align-items: flex-start; flex-wrap: wrap; font-weight: 700; line-height: 0.85; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; }
.plan__num { font-size: clamp(5.5rem, 16vw, 15rem); }
.plan__fig { display: inline-flex; align-items: flex-start; white-space: nowrap; }
.plan__cur { font-size: clamp(2.75rem, 8vw, 7.5rem); margin-left: 0.12em; padding-top: 0.04em; }
.plan__per { align-self: flex-end; font-size: 1.25rem; font-weight: 400; letter-spacing: 0; margin-left: 0.75rem; padding-bottom: 0.6em; color: var(--dark-muted); }
.plan__for { font-size: 1.25rem; max-width: 46ch; }
.plan__lines { display: grid; gap: 0.35rem; font-size: 1.25rem; }
.plan .button { justify-self: start; margin-top: 0.75rem; }
.js .plan:not(.is-current) { visibility: hidden; opacity: 0; }
.plan { transition: opacity 260ms ease, filter 260ms ease, visibility 0s linear 0s; }
.js .plan:not(.is-current) { transition: opacity 180ms var(--ease-exit), filter 180ms ease, visibility 0s linear 180ms; filter: blur(4px); }

.paychip { position: absolute; z-index: 1; bottom: 0.5rem; right: 0; width: 15rem; padding: 0.9rem 1rem; display: grid; gap: 0.2rem;
  background: var(--ui-raised); color: var(--ui-text); border-radius: var(--ui-radius); font-size: 0.8125rem; }
.paychip__title { font-weight: 600; font-size: 0.875rem; }

@media (max-width: 1099px) {
  .pricing__intro, .pricing__plans { grid-column: 1 / -1; }
  .pricing__plans { margin-top: 3rem; }
  .pricing__photo { order: 0; margin: 0; }
  .paychip { position: static; margin-top: 2rem; grid-row: 2; width: auto; justify-self: start; }
  .pricing__photo { display: none; }
  .plan__num { font-size: 26vw; }
  .plan__cur { font-size: 12vw; }
}
@media (max-width: 40em) { .plan .button { justify-self: stretch; } }
.js .pricing__plans:not(:has(.is-current)) .plan:first-child { visibility: visible; opacity: 1; filter: none; }
html:not(.js) .plan + .plan { margin-top: 3rem; }
html:not(.js) .plan { grid-area: auto; }

/* ========================================================================
   Вопросы: плитки-аккордеон
   ======================================================================== */
.faq { padding-block: var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.faq__side { grid-column: 1 / 5; position: sticky; top: 2rem; align-self: start; display: grid; gap: 2rem; }
.faq__title { font-size: var(--step-head); }
.faq__photo { margin: 0; overflow: clip; background: #b9b8b0; aspect-ratio: 4 / 5; max-height: 56svh; }
.faq__photo-in { width: 100%; height: 100%; overflow: clip; }
.faq__photo img { width: 100%; height: 100%; object-fit: cover; }
.faq__list { grid-column: 5 / 13; display: grid; gap: 8px; align-content: start; }
.qa { background: var(--surface); border-radius: var(--radius); transition: background-color var(--t-ui) ease; }
.qa[open] { background: var(--surface-2); }
.qa[open] .qa__q h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
.qa__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px;
  padding: 1rem 1.5rem; cursor: pointer; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.qa__sign { position: relative; flex: none; width: 16px; height: 16px; }
.qa__sign::before, .qa__sign::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor;
  transition: transform var(--t-ui) var(--ease-out); }
.qa__sign::after { transform: rotate(90deg); }
.qa[open] .qa__sign::after { transform: rotate(0deg); }
.qa__a { padding: 0 1.5rem 1.5rem; }
.qa__a p { font-size: var(--step-body); max-width: 56ch; }
@media (hover: hover) and (pointer: fine) { .qa:not([open]):hover { background: var(--surface-2); } }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq__list { interpolate-size: allow-keywords; }
    .qa::details-content { height: 0; overflow: clip; transition: height 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
    .qa[open]::details-content { height: auto; }
  }
}
@media (max-width: 1099px) {
  .faq__side, .faq__list { grid-column: 1 / -1; }
  .faq__side { position: static; grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 2rem; }
  .faq__photo { max-height: 40svh; }
}
@media (max-width: 40em) {
  .faq__side { grid-template-columns: 1fr; }
  .faq__photo { aspect-ratio: 3 / 2; }
  .qa__q { min-height: 64px; padding: 0.9rem 1.25rem; }
  .qa__q h3 { font-size: 1.125rem; }
  .qa__a { padding: 0 1.25rem 1.25rem; }
  .qa__a p { font-size: 1rem; }
}

/* ========================================================================
   Финальная фраза с пропуском
   ======================================================================== */
.cta { padding-block: calc(var(--section) * 0.6) var(--section); }
.cta__sentence { font-size: clamp(2.5rem, 6vw, 6rem); line-height: 1.02; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.28em; max-width: 13em; }
.cta__input, .cta__button { height: 1.02em; font: inherit; letter-spacing: -0.01em; border-radius: var(--radius); align-self: center; }
.cta__input { width: 7.5em; padding: 0 0.2em; background: var(--surface); border: 0; text-transform: none; color: var(--ink); font-weight: 500; }
.cta__input::placeholder { color: #5f5e57; }
.cta__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cta__button { display: inline-flex; align-items: center; gap: 0.18em; padding: 0 0.22em; background: var(--accent); color: var(--accent-ink); text-transform: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.cta__button svg { width: 0.62em; height: 0.62em; transition: transform var(--t-ui) var(--ease-out); }
.cta__button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cta__button:hover svg { transform: translateX(0.08em); } }
@media (hover: hover) and (pointer: fine) { .cta__button:hover { background: #d1c427; } }
.cta__note { margin-top: 1.5rem; font-size: var(--step-body); color: var(--muted); max-width: 52ch; }
@media (max-width: 40em) {
  .cta__sentence { font-size: 10vw; }
  .cta__input { order: 2; width: 100%; margin-block: 0.12em; }
  .cta__w:first-child { order: 1; }
  .cta__button { order: 3; }
}

/* ========================================================================
   Подвал из плиток
   ======================================================================== */
.footer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(220px, auto) 320px; gap: 8px; padding: 10px; }
.footer__tile { background: var(--surface); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; text-decoration: none; }
.footer__about { grid-column: 1 / 5; justify-content: space-between; }
.footer__lead { font-size: var(--step-lead); line-height: 1.2; max-width: 22ch; }
.footer__legal { color: var(--muted); }
.footer__nav { grid-column: 5 / 8; font-size: var(--step-body); gap: 0.5rem; }
.footer__time { grid-column: 8 / 10; justify-content: space-between; font-size: var(--step-body); }
.footer__time .small { color: var(--muted); }
.footer__mail { grid-column: 10 / 13; justify-content: flex-end; }
.footer__email { font-size: var(--step-lead); overflow-wrap: anywhere; }
.footer__mark { grid-column: 1 / 9; background: var(--dark); color: var(--dark-ink); align-items: center; justify-content: center;
  font-weight: 700; font-size: clamp(2.5rem, 6vw, 6rem); letter-spacing: -0.04em; line-height: 1; }
.footer__go { grid-column: 9 / 13; background: var(--accent); color: var(--accent-ink); justify-content: space-between;
  font-size: 2rem; font-weight: 600; line-height: 1.1; transition: background-color var(--t-hover) ease; }
.footer__go svg { align-self: flex-end; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .footer__go:hover { background: #d1c427; }
  .footer__go:hover svg { transform: translate(4px, -4px); }
}
.footer__go:active svg { transform: translate(2px, -2px) scale(0.97); }
@media (max-width: 1099px) {
  .footer { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 6px; padding: 6px; }
  .footer__mark { grid-column: 1 / -1; grid-row: 1; height: 160px; font-size: 22vw; }
  .footer__go { grid-column: 1 / -1; grid-row: 2; min-height: 140px; }
  .footer__nav, .footer__mail, .footer__time { grid-column: auto; }
  .footer__about { grid-column: 1 / -1; }
  .footer__tile { padding: 1.25rem; }
}
@media (max-width: 40em) { .footer__nav, .footer__mail, .footer__time { grid-column: 1 / -1; } }

/* ========================================================================
   Внутренние страницы: заказ, оплата, документы
   ======================================================================== */
.inner { padding-top: 8rem; padding-bottom: var(--section); min-height: 70svh; }
.order { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.order__intro { grid-column: 1 / 6; display: grid; gap: 1.5rem; align-content: start; }
.order__facts { display: grid; gap: 0; margin-top: 1rem; }
.order__facts { gap: 0.9rem; }
.order__facts > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; }
.order__facts dt { color: var(--muted); }
.form { grid-column: 7 / 13; display: grid; gap: 1.5rem; align-content: start; }
.form__label { display: block; font-weight: 500; margin-bottom: 0.5rem; }
.form__plans { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.planpick { display: grid; grid-template-columns: auto 1fr auto; gap: 0.25rem 1rem; align-items: center; padding: 1rem 1.25rem;
  background: var(--surface); cursor: pointer; transition: background-color var(--t-ui) ease; }
.planpick input { accent-color: var(--ink); width: 1.1rem; height: 1.1rem; margin: 0; }
.planpick__name { font-weight: 600; font-size: 1.125rem; }
.planpick__price { font-variant-numeric: tabular-nums; }
.planpick__lines { grid-column: 2 / -1; color: var(--muted); font-size: 0.9375rem; }
.planpick:has(input:checked) { background: var(--ink); color: var(--bg); }
.planpick:has(input:checked) .planpick__lines { color: var(--dark-muted); }
.planpick:has(input:checked) input { accent-color: var(--accent); }
.planpick:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.field { width: 100%; min-height: 3.25rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 0; border-radius: var(--radius);
  font-size: max(1rem, var(--step-body)); }
.field::placeholder { color: #85847c; }
.field[aria-invalid="true"] { background: #f1d9d6; }
.form__hint { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--muted); }
.form__error { margin-top: 0.4rem; font-size: 0.9375rem; color: #9f1f17; font-weight: 500; }
.form__alert { padding: 0.9rem 1.1rem; background: #f1d9d6; color: #6e130d; }
.form__agree { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: 1rem; cursor: pointer; }
.form__agree input { width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--ink); }
@media (max-width: 1099px) { .order__intro, .form { grid-column: 1 / -1; } }

.result { max-width: 46rem; display: grid; gap: 1.5rem; }
.result__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.doc { max-width: 46rem; display: grid; gap: 1rem; }
.doc h2 { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 600; }
.doc p { max-width: 68ch; }

/* ========================================================================
   Моушн. Скрытые состояния — только при html.js и разрешённом движении.
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* сигнатура: строки заголовка выходят из-под маски */
  .js .hero__title [data-line] { transform: translateY(108%); animation: line-up 900ms var(--ease-expo) forwards;
    animation-delay: calc(120ms + var(--i) * 110ms); }
  .js .hero__lead { opacity: 0; transform: translateY(12px); animation: rise 520ms var(--ease-out) 460ms forwards; }
  .js .reel { animation: reel-in 1000ms var(--ease-in-out) 150ms both; }
  .js .topbar { opacity: 0; animation: fade 400ms ease 500ms forwards; }

  /* входы секций: по частям, один раз */
  .js [data-reveal] { opacity: 0; transform: translateY(22px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo);
    transition-delay: calc(var(--i, 0) * var(--stagger-item)); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* поля «Как подключить» проявляются слева направо, карточка садится на место */
  .js .steps__clause { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-expo); }
  .js .steps.is-in .steps__clause { opacity: 1; transform: none; }
  .js .steps__field:nth-child(2) .steps__clause, .js .steps__field:nth-child(2) .ticket { transition-delay: 70ms; }
  .js .steps__field:nth-child(3) .steps__clause, .js .steps__field:nth-child(3) .ticket { transition-delay: 140ms; }
  .js .steps__field:nth-child(4) .steps__clause, .js .steps__field:nth-child(4) .ticket { transition-delay: 210ms; }
  .js .steps .ticket { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-expo); }
  .js .steps.is-in .ticket { opacity: 1; transform: none; }
  @media (hover: hover) and (pointer: fine) { .js .steps.is-in .steps__field:hover .ticket { transform: translateY(-6px); transition: transform 150ms var(--ease-out); } }

  /* панель поднимается, строки панели по очереди */
  .js .panel .panel__row { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), background-color var(--t-ui) ease; }
  .js .panel.is-in .panel__row { opacity: 1; transform: none; }
  .js .panel.is-in .panel__row:nth-child(3) { transition-delay: 60ms; }
  .js .panel.is-in .panel__row:nth-child(4) { transition-delay: 120ms; }
  .js .panel.is-in .panel__row:nth-child(5) { transition-delay: 180ms; }
  .js .panel.is-in .panel__row:nth-child(6) { transition-delay: 240ms; }
  .js .panel.is-in .panel__row:nth-child(7) { transition-delay: 300ms; }
  .js .note { opacity: 0; transition: opacity 600ms var(--ease-out); }
  .js .notes.is-in .note { opacity: 1; }
  .js .notes.is-in .note:nth-child(2n) { transition-delay: 120ms; }

  /* цена: цифры поднимаются из-под маски */
  .js .plan__price { clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease-expo) 120ms; }
  .js .pricing.is-in .plan__price { clip-path: inset(-10% -10% -20% -10%); }

  /* фото в вопросах открывается шторкой */
  .js [data-shutter] .faq__photo-in { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js [data-shutter] img { transform: scale(1.12); transition: transform 1400ms var(--ease-soft); }
  .js [data-shutter].is-in .faq__photo-in { clip-path: inset(0); }
  .js [data-shutter].is-in img { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .frame.is-active .ui-table--log tbody tr { animation: rise 420ms var(--ease-out) both; }
  .js .frame.is-active .ui-table--log tbody tr:nth-child(1) { animation-delay: 120ms; opacity: 0; transform: translateY(6px); }
  .js .frame.is-active .ui-table--log tbody tr:nth-child(2) { animation-delay: 380ms; opacity: 0; transform: translateY(6px); }
  .js .frame.is-active .ui-table--log tbody tr:nth-child(3) { animation-delay: 640ms; opacity: 0; transform: translateY(6px); }
  .js .frame.is-active .ui-table--log tbody tr:nth-child(4) { animation-delay: 900ms; opacity: 0; transform: translateY(6px); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes reel-in { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
@media (max-width: 1099px) and (prefers-reduced-motion: no-preference) {
  .js .reel { animation-name: fade; animation-duration: 600ms; animation-timing-function: ease; opacity: 0; animation-fill-mode: forwards; }
}

@media (prefers-reduced-motion: reduce) {
  .reel__track { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}