/* Маркетинговые страницы. Правила — в DESIGN.md. */
.site { background: var(--bg); }
.wrap { width: 100%; max-width: var(--page-w); margin-inline: auto; padding-inline: var(--gutter); }

.btn-marker { background: var(--marker-fixed); color: var(--ink-fixed); box-shadow: var(--shadow-sm); }
.btn-marker:hover { background: var(--marker-hover); color: var(--ink-fixed); }
.btn-sm { min-height: 40px; padding-inline: var(--sp-4); font-size: var(--fs-sm); }
.btn-lg { min-height: 58px; padding-inline: 1.75rem; font-size: 1.125rem; font-weight: 600; }

/* Шапка */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in oklch, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.site-header.is-overlay { position: absolute; inset: 0 0 auto 0; background: none; backdrop-filter: none; border: 0; color: var(--on-ink); }
.site-header.is-overlay .brand { color: inherit; }
.site-header-inner { display: flex; align-items: center; gap: var(--sp-6); min-height: 76px; }
.site-nav { display: none; gap: var(--sp-6); font-size: var(--fs-sm); }
.site-nav a, .site-login { text-decoration: none; opacity: 0.86; transition: opacity 0.15s var(--ease-out); }
.site-nav a:hover, .site-login:hover { opacity: 1; }
.site-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); }
.site-login { white-space: nowrap; }
@media (min-width: 900px) { .site-nav { display: flex; } }
@media (max-width: 420px) { .site-login { display: none; } }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(100dvh, 62rem);
  display: grid;
  align-items: center;
  padding-block: 7rem var(--sp-8);
  color: var(--on-ink);
  background: var(--ink-fixed);
}
.hero-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.field-word {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  justify-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  will-change: transform;
  color: oklch(0.96 0.02 245 / calc(0.08 + var(--glow, 0) * 0.92));
}
.field-word small {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--marker-fixed);
  opacity: var(--glow, 0);
  transform: translateY(calc((1 - var(--glow, 0)) * -6px));
}
.hero-grid { display: grid; gap: var(--sp-7); align-items: center; }
.hero-copy { display: grid; gap: var(--sp-5); justify-items: start; }
.hero h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.035em; font-weight: 650; max-width: 13ch; }
.hero-lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.5; max-width: 33rem; color: var(--on-ink-soft); }
.hero-cta { display: grid; gap: var(--sp-3); justify-items: start; margin-top: var(--sp-2); }
.hero-note { font-size: var(--fs-sm); color: var(--on-ink-soft); }

/* Демонстрация */
.demo { display: grid; gap: var(--sp-5); min-width: 0; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.demo-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; min-width: 0; }
.demo-more { font-size: var(--fs-sm); color: var(--on-ink-soft); }
.demo-tab {
  flex: none;
  min-height: 38px;
  padding: 0 0.875rem;
  border: 1px solid oklch(1 0 0 / 0.16);
  border-radius: 999px;
  background: none;
  color: var(--on-ink-soft);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.demo-tab:hover { color: var(--on-ink); border-color: oklch(1 0 0 / 0.4); }
.demo-tab[aria-selected="true"] { background: var(--marker-fixed); border-color: var(--marker-fixed); color: var(--ink-fixed); font-weight: 600; }
.demo-pause { flex: none; margin-inline-start: auto; background: none; border: 0; padding: var(--sp-2); color: var(--on-ink-soft); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.demo-pause:hover { color: var(--on-ink); }
.demo-scene { perspective: 1500px; }
.demo-stage {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: grid;
  gap: var(--sp-3);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
}
.demo-msg, .demo-reply, .demo-deck {
  background: var(--card-fixed);
  color: var(--ink-fixed);
  box-shadow: 0 1px 1px oklch(0.1 0.03 262 / 0.2), 0 24px 60px oklch(0.1 0.03 262 / 0.5);
}
.demo-msg { position: relative; padding: 1.5rem; border-radius: 22px; }
.demo-meta { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted-fixed); }
.demo-role { font-weight: 600; color: var(--ink-fixed); }
.demo-text { margin-top: var(--sp-3); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem); line-height: 1.5; font-weight: 500; }
.term {
  position: relative;
  display: inline;
  padding: 0 0.12em;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(var(--marker-fixed), var(--marker-fixed)) left / 0% 100% no-repeat;
  color: inherit;
  font: inherit;
  cursor: help;
  transition: background-size 0.5s var(--ease-out) calc(var(--i) * 170ms);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[dir="rtl"] .term { background-position: right; }
.term:focus-visible { outline-color: var(--ink-fixed); }
[data-step]:not([data-step="0"]) .term { background-size: 100% 100%; }
.demo-tip {
  position: absolute;
  z-index: 3;
  left: var(--x, 50%);
  top: var(--y, 0);
  display: grid;
  gap: 1px;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: var(--ink-fixed);
  color: var(--on-ink);
  font-size: var(--fs-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 2px)) scale(0.94);
  transition: opacity 0.14s var(--ease-out), transform 0.22s var(--ease-out);
}
.demo-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); }
.demo-tip span { font-size: var(--fs-xs); color: var(--on-ink-soft); }
.demo-result { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-fixed); opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
[data-step="2"] .demo-result, [data-step="3"] .demo-result, [data-step="4"] .demo-result, [data-step="5"] .demo-result { opacity: 1; transform: none; }
.demo-translation { font-size: 1.0625rem; line-height: 1.45; }
.demo-tone { font-size: var(--fs-sm); color: var(--muted-fixed); }
.demo-tone span:first-child { font-weight: 600; color: var(--ink-fixed); margin-inline-end: 0.25rem; }
.demo-reply, .demo-deck { padding: 1.125rem 1.25rem; border-radius: 16px; opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
[data-step="3"] .demo-reply, [data-step="4"] .demo-reply, [data-step="5"] .demo-reply { opacity: 1; transform: translateZ(50px); }
[data-step="4"] .demo-deck, [data-step="5"] .demo-deck { opacity: 1; transform: translateZ(90px); }
.demo-reply h2, .demo-deck h2 { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; margin-bottom: var(--sp-2); }
.demo-reply-label { font-size: var(--fs-xs); color: var(--muted-fixed); margin-top: var(--sp-2); }
.demo-reply-text { font-size: var(--fs-sm); line-height: 1.4; }
.demo-deck { background: var(--marker-fixed); }
.demo-deck b { font-weight: 700; }
.demo-deck ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.demo-deck li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); align-items: baseline; }
.demo-word { font-weight: 600; white-space: nowrap; }
.demo-ru { text-align: end; }

@media (min-width: 1060px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
  .demo-stage { display: block; padding-bottom: 12rem; padding-inline-end: 3.5rem; }
  .demo-reply, .demo-deck { position: absolute; }
  .demo-reply { left: 1.5rem; bottom: 0; width: 56%; }
  .demo-deck { right: 0; bottom: 2.25rem; width: 46%; }
  .demo-msg { padding: 1.75rem 1.75rem 2rem; min-height: 20.5rem; }
}

/* Лента фактов */
.proof { background: var(--marker-fixed); color: var(--ink-fixed); }
.proof-list { list-style: none; margin-block: 0; padding-block: var(--sp-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }
.proof b { font-weight: 650; }

/* Разделы */
.band { padding-block: clamp(4.5rem, 3rem + 7vw, 8.75rem); }
.band-tint { background: var(--surface-2); }
.band-ink { background: var(--ink-fixed); color: var(--on-ink); }
.band-head { display: grid; gap: var(--sp-4); max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.band-head h2 { font-size: var(--fs-section); }
.band-head p { font-size: var(--fs-lg); line-height: 1.5; color: var(--text-muted); max-width: 38rem; }
.band-ink .band-head p { color: var(--on-ink-soft); }
.split { display: grid; gap: var(--sp-6); }
.split > h2 { font-size: var(--fs-section); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

/* Сравнение */
.compare { display: grid; gap: var(--sp-3); }
.compare-row { display: grid; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-sm); }
.compare-source { font-family: var(--font-display); font-size: 1.375rem; font-weight: 550; line-height: 1.3; }
.compare-bad, .compare-good { display: grid; gap: 0.125rem; }
.compare-bad span, .compare-good span { font-size: var(--fs-xs); color: var(--text-muted); }
.compare-bad { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.compare-bad span { text-decoration: none; display: block; }
.compare-good { font-weight: 600; }
.compare-good small { font-weight: 400; color: var(--text-muted); font-size: var(--fs-sm); }
@media (min-width: 900px) {
  .compare-row { grid-template-columns: 5fr 4fr 5fr; align-items: start; padding: 1.75rem 2rem; }
}

/* Бенто: разные тайлы с настоящими фрагментами продукта */
.bento { display: grid; gap: var(--sp-4); }
.tile { display: grid; gap: var(--sp-3); align-content: start; padding: 1.75rem; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-sm); min-width: 0; }
.tile h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.tile p { color: var(--text-muted); max-width: 30rem; }
.seg { display: inline-flex; justify-self: start; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); margin-top: var(--sp-2); }
.seg button { min-height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: 10px; background: none; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-ink { background: oklch(1 0 0 / 0.08); margin: 0 0 var(--sp-6); }
.seg-ink button { color: var(--on-ink-soft); }
.seg-ink button[aria-pressed="true"] { background: var(--marker-fixed); color: var(--ink-fixed); }
.bubble { padding: var(--sp-4) var(--sp-5); border-radius: 16px 16px 16px 4px; background: var(--solid); color: var(--solid-ink); font-size: 1.0625rem; line-height: 1.45; }

.flip { width: 100%; min-height: 12rem; margin-top: var(--sp-2); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; perspective: 1000px; }
.flip-inner { display: grid; min-height: 12rem; transform-style: preserve-3d; transition: transform 0.6s var(--ease-out); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; display: grid; gap: var(--sp-2); place-content: center; justify-items: center; padding: var(--sp-5); border-radius: 16px; background: var(--surface-2); backface-visibility: hidden; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.flip-face small { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.flip-back { background: var(--marker-fixed); color: var(--ink-fixed); transform: rotateY(180deg); }
.flip-back small { color: var(--ink-fixed); }

.ui-sample { display: grid; gap: 1px; margin-top: var(--sp-2); border-radius: 14px; overflow: hidden; background: var(--line); }
.ui-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 0.75rem var(--sp-4); background: var(--surface-2); font-size: var(--fs-sm); font-weight: 500; }
.ui-row i { font-style: normal; font-weight: 400; color: var(--text-muted); }
.ui-actions { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); }
.ui-actions span { padding: 0.35rem 0.75rem; border-radius: 8px; background: var(--solid); color: var(--solid-ink); font-size: var(--fs-xs); }
.ui-actions span + span { background: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

.sheet { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; gap: var(--sp-2); }
.sheet li { padding: 0.75rem var(--sp-4); border-radius: 12px; background: var(--surface-2); font-weight: 500; }

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .tile-replies { grid-column: span 7; }
  .tile-card { grid-column: span 5; }
  .tile-ui { grid-column: span 5; }
  .tile-sheet { grid-column: span 7; }
}

/* Роли */
.role { display: grid; gap: var(--sp-6); }
.role-pain { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 550; line-height: 1.25; max-width: 24ch; margin-bottom: var(--sp-4); letter-spacing: -0.01em; }
.link-arrow { color: var(--marker-fixed); text-underline-offset: 0.25em; font-weight: 500; }
.role-situations { list-style: none; padding: 0; margin: 0; }
.role-situations li { padding-block: 0.75rem; border-bottom: 1px solid oklch(1 0 0 / 0.14); }
.role-terms { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); align-content: start; }
.role-terms li { display: grid; gap: 2px; padding: var(--sp-4); border-radius: 14px; background: oklch(1 0 0 / 0.07); }
.role-terms span { font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere; }
.role-terms small { color: var(--on-ink-soft); }
@media (min-width: 1000px) { .role { grid-template-columns: 4fr 4fr 4fr; } }

/* Цены на главной */
.price-strip { display: grid; gap: var(--sp-3); }
.price-mini { display: grid; gap: var(--sp-2); padding: 1.75rem; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.price-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.price-mini.is-main { background: var(--ink-fixed); color: var(--on-ink); }
.price-mini.is-main .price-for { color: var(--on-ink-soft); }
.price-name { font-weight: 600; }
.price-sum { font-family: var(--font-display); font-size: 2.25rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.price-sum small { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; }
.price-for { color: var(--text-muted); font-size: var(--fs-sm); }
@media (min-width: 900px) { .price-strip { grid-template-columns: 1fr 1.25fr 1fr; align-items: center; } .price-mini.is-main { padding-block: 2.75rem; } }

/* Вопросы */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: 1.125rem; font-size: 1.125rem; font-weight: 500; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--text-muted); transition: transform 0.25s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: 1.25rem; color: var(--text-muted); max-width: 42rem; }

/* Финал и подвал */
.closing { background: var(--marker-fixed); color: var(--ink-fixed); }
.closing-inner { display: grid; gap: var(--sp-6); justify-items: start; padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.closing h2 { font-size: var(--fs-section); font-weight: 650; max-width: 20ch; letter-spacing: -0.025em; }
.closing .btn { background: var(--ink-fixed); color: var(--on-ink); }
.closing .btn:hover { background: var(--ink-hover); color: var(--on-ink); }
@media (min-width: 900px) { .closing-inner { grid-template-columns: 1fr auto; align-items: end; } }

.site-footer { padding-block: var(--sp-7); background: var(--ink-fixed); color: var(--on-ink-soft); font-size: var(--fs-sm); }
.site-footer .brand { color: var(--on-ink); }
.site-footer p { margin-top: var(--sp-2); max-width: 22rem; }
.site-footer-inner { display: grid; gap: var(--sp-6); }
.site-footer nav { display: grid; gap: var(--sp-2); align-content: start; }
.site-footer h2 { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--on-ink); }
.site-footer a:not(.brand) { text-decoration: none; }
.site-footer a:not(.brand):hover { color: var(--on-ink); }
@media (min-width: 900px) { .site-footer-inner { grid-template-columns: 2fr 1fr 1fr; } }

/* Появление блоков */
.will-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.will-reveal.is-in { opacity: 1; transform: none; }

/* Внутренние страницы */
.page-hero { background: var(--ink-fixed); color: var(--on-ink); padding-block: clamp(4rem, 3rem + 6vw, 8.5rem); }
.page-hero-inner { display: grid; gap: var(--sp-5); justify-items: start; text-align: start; }
.page-hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; font-weight: 650; max-width: 18ch; }
.page-hero-lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.5; max-width: 40rem; color: var(--on-ink-soft); }
.page-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.page-hero-link { color: var(--on-ink); text-underline-offset: 0.25em; }

/* Тарифы */
.plans { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.plan { display: grid; gap: var(--sp-3); align-content: start; padding: 1.75rem; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm); min-width: 0; }
.plan h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.plan-for { color: var(--text-muted); font-size: var(--fs-sm); }
.plan-price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.plan-price small { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; }
.plan-note { color: var(--text-muted); font-size: var(--fs-sm); }
.plan-list { list-style: none; margin: var(--sp-2) 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.plan-list li { padding-block: 0.5rem; border-bottom: 1px solid var(--line); }
.plan.is-main { background: var(--ink-fixed); color: var(--on-ink); box-shadow: var(--shadow); }
.plan.is-main .plan-for, .plan.is-main .plan-note { color: var(--on-ink-soft); }
.plan.is-main .plan-list li { border-color: oklch(1 0 0 / 0.16); }
.plan-flag { justify-self: start; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--marker-fixed); color: var(--ink-fixed); font-size: var(--fs-xs); font-weight: 600; }
.plan-extra { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); color: var(--text-muted); }
.plan-extra b { color: var(--text); font-weight: 600; }
@media (min-width: 900px) {
  .plans { grid-template-columns: 1fr 1.2fr 1fr; align-items: center; }
  .plan.is-main { padding-block: 2.75rem; }
}

.table-scroll { overflow-x: auto; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.plan-table { width: 100%; min-width: 46rem; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.plan-table th, .plan-table td { padding: 0.875rem var(--sp-4); text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan-table thead th { font-weight: 600; background: var(--surface); }
.plan-table tbody th { font-weight: 500; position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); min-width: 11rem; }
.plan-table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; }
.plan-table .is-main { background: color-mix(in oklch, var(--marker-fixed) 28%, var(--surface)); }
.plan-table tr:last-child th, .plan-table tr:last-child td { border-bottom: 0; }
.table-note { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); max-width: 42rem; }

/* Страницы сфер и о проекте */
.situations { list-style: none; margin: 0; padding: 0; }
.situations li { padding-block: 1rem; border-bottom: 1px solid var(--line); font-size: var(--fs-lg); }
.term-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-3); }
.term-grid li { display: grid; gap: 2px; padding: var(--sp-5); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.term-grid span { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; overflow-wrap: anywhere; }
.term-grid small { color: var(--text-muted); font-size: var(--fs-sm); }
.other-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.other-links a { display: inline-block; padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--surface-2); text-decoration: none; font-weight: 500; }
.other-links a:hover { background: var(--marker-fixed); color: var(--ink-fixed); }
.prose { max-width: 44rem; display: grid; gap: var(--sp-3); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-5); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-muted); line-height: 1.6; }
.prose ul { padding-inline-start: 1.25rem; display: grid; gap: var(--sp-2); }

/* На телефоне демо должно попасть как можно выше: языки в одну прокручиваемую строку */
@media (max-width: 640px) {
  .hero { padding-block: 5.5rem var(--sp-6); }
  .hero-grid { gap: var(--sp-5); }
  .hero-copy { gap: var(--sp-4); }
  .hero-lead { font-size: 1.0625rem; }
  .demo-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 0 100%; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); max-width: 100vw; }
  .demo-more { display: none; }
  .demo-pause { padding-block: 0; }
}
.page-hero-anchor { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 550; line-height: 1.25; max-width: 30ch; color: var(--marker-fixed); }
.page-hero-prices { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; color: var(--marker-fixed); }
.page-hero.is-compact { padding-block: clamp(2.5rem, 2rem + 4vw, 6rem); }
.page-hero.is-compact .page-hero-inner { gap: var(--sp-4); }

/* Шапка, меню, доступность */
.skip { position: fixed; z-index: 60; top: var(--sp-2); left: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); background: var(--marker-fixed); color: var(--ink-fixed); transform: translateY(-200%); transition: transform 0.15s var(--ease-out); }
.skip:focus { transform: none; }
main:focus { outline: none; }
html { scroll-padding-top: 92px; }
.site-header.is-overlay { position: sticky; inset: auto; top: 0; margin-bottom: -76px; transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.site-header.is-overlay.is-scrolled { background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); color: var(--text); border-bottom: 1px solid var(--line); }
.site-nav a { padding-block: 0.625rem; }
.site-login { padding-block: 0.625rem; }
.site-menu { position: relative; }
.site-menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-3); border: 1px solid currentColor; border-radius: var(--radius); font-size: var(--fs-sm); cursor: pointer; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu-panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: grid; min-width: 15rem; padding: var(--sp-2); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.site-menu-panel a { padding: 0.75rem var(--sp-3); border-radius: 10px; text-decoration: none; }
.site-menu-panel a:hover { background: var(--surface-2); }
@media (min-width: 1000px) { .site-menu { display: none; } }
@media (max-width: 999px) { .site-nav { display: none; } .site-login { display: none; } }
@media (min-width: 1000px) { .site-nav { display: flex; } }
.site-footer nav a { padding-block: 0.375rem; }
.site-footer-inner { align-items: start; }
@media (min-width: 900px) { .site-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.demo-more { color: var(--on-ink-soft); text-underline-offset: 0.2em; }
.demo-more:hover { color: var(--on-ink); }

/* Блок переводчика */
.translator { display: grid; gap: var(--sp-6); align-items: center; }
.translator h2 { font-size: var(--fs-section); margin-bottom: var(--sp-4); }
.translator p { font-size: var(--fs-lg); line-height: 1.5; color: var(--on-ink-soft); max-width: 36rem; margin-bottom: var(--sp-4); }
.translator-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.translator-list li { padding: 1rem 1.25rem; border-radius: 14px; background: oklch(1 0 0 / 0.07); font-size: 1.0625rem; font-weight: 500; }
.roles-all { margin-top: var(--sp-6); }
@media (min-width: 1000px) { .translator { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 6vw, 6rem); } }

/* Страница переводчика */
.feature-list { display: grid; gap: var(--sp-3); }
.feature-list article { padding: 1.75rem; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.feature-list h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: var(--sp-2); }
.feature-list p { color: var(--text-muted); }
.feature-list article:first-child { background: var(--ink-fixed); color: var(--on-ink); }
.feature-list article:first-child p { color: var(--on-ink-soft); }
.day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); font-size: var(--fs-lg); line-height: 1.5; }
.day-list b { font-weight: 650; }
@media (min-width: 900px) {
  .feature-list { grid-template-columns: repeat(6, 1fr); }
  .feature-list article { grid-column: span 2; }
  .feature-list article:first-child { grid-column: span 3; }
  .feature-list article:nth-child(2) { grid-column: span 3; }
}

/* Найдено в тестировании */
.site-actions .btn { white-space: nowrap; }
.site-menu-panel .btn { margin-top: var(--sp-2); color: var(--ink-fixed); }
.site-menu-panel .btn:hover { background: var(--marker-hover); }
@media (max-width: 480px) { .site-actions > .btn { display: none; } }

/* Образец рядом с заголовком на страницах сфер, языков и пар */
.hero-sample { display: grid; gap: var(--sp-2); padding: 1.25rem; border-radius: 20px; background: var(--card-fixed); color: var(--ink-fixed); box-shadow: 0 24px 60px oklch(0.1 0.03 262 / 0.5); width: 100%; }
.hero-sample li { display: grid; gap: 2px; padding: 0.75rem 1rem; border-radius: 12px; background: oklch(0.945 0.01 245); }
.hero-sample ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.hero-sample b { font-size: 1.125rem; font-weight: 600; }
.hero-sample small { font-size: var(--fs-sm); color: var(--muted-fixed); }
.hero-sample li:first-child { background: var(--marker-fixed); }
.hero-sample li:first-child small { color: var(--ink-fixed); }
@media (min-width: 1000px) {
  .page-hero-inner.has-sample { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .page-hero-inner.has-sample > * { grid-column: 1; }
  .page-hero-inner.has-sample > .hero-sample { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
}

/* Блок маскировки */
.mask-demo { display: grid; gap: var(--sp-3); }
.mask-side { display: grid; gap: var(--sp-3); align-content: start; padding: 1.75rem; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.mask-side h3 { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.mask-side p { font-size: 1.25rem; line-height: 1.5; }
.mask-side.is-model { background: var(--ink-fixed); color: var(--on-ink); }
.mask-side.is-model h3 { color: var(--on-ink-soft); }
.mask-side b { padding: 0 0.2em; border-radius: 4px; background: var(--marker-fixed); color: var(--ink-fixed); font-weight: 500; font-size: 0.9em; }
.mask-note { margin-top: var(--sp-5); max-width: 46rem; color: var(--text-muted); }
@media (min-width: 900px) { .mask-demo { grid-template-columns: 1fr 1fr; } }

/* Цели нажатия не меньше 44 px (DESIGN.md). Подсвеченные термины внутри строки демо исключены: это слова в тексте. */
.btn-sm, .seg button, .demo-tab { min-height: 44px; }
.demo-pause { min-height: 44px; min-width: 44px; }
.demo-more, .brand, .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.skip { min-height: 44px; display: inline-flex; align-items: center; }