@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/rubik/rubik-cyrillic-ext-v31.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF,
    U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/rubik/rubik-cyrillic-v31.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/rubik/rubik-latin-v31.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 {
  --milk: #f5f8ef;
  --paper: #ffffff;
  --ink: #101713;
  --ink-soft: #4d5751;
  --muted: #77817b;
  --line: #dfe5dc;
  --line-strong: #cfd7cd;
  --green: #16d34f;
  --green-dark: #0d6547;
  --green-soft: #e9f8e7;
  --lime: #d9ff55;
  --violet: #7657e8;
  --header-height: 72px;
  --page-gutter: clamp(24px, 3.5vw, 56px);
  color-scheme: light;
  font-family: "Rubik", ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--milk);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--milk);
  color: var(--ink);
}

body[aria-busy="true"] {
  overflow: hidden;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
  background: var(--milk);
  opacity: 1;
  visibility: visible;
  transition-property: opacity, visibility;
  transition-duration: 320ms, 0s;
  transition-delay: 0s, 320ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1), linear;
}

.site-loader__inner {
  width: min(560px, 100%);
  transform: translateY(0);
  transition-property: opacity, transform;
  transition-duration: 240ms;
  transition-timing-function: ease-in;
}

.site-loader__brand {
  display: block;
  width: clamp(178px, 22vw, 250px);
  height: auto;
}

.site-loader__brand-lockup {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: flex-end;
}

.site-loader__brand-lockup b {
  color: var(--violet);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 720;
  line-height: .9;
  letter-spacing: -.045em;
  transform: translateY(3px);
}

.site-loader__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(48px, 8vw, 76px);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: -.015em;
}

.site-loader__meta strong {
  min-width: 4ch;
  color: var(--ink);
  font-size: clamp(28px, 4vw, 38px);
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  letter-spacing: -.055em;
  line-height: 1;
  text-align: right;
}

.site-loader__meta--percent {
  justify-content: flex-end;
}

.site-loader__track {
  height: 8px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce4d9;
}

.site-loader__track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transform: scaleX(var(--loader-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

.site-loader.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader.is-complete .site-loader__inner {
  opacity: 0;
  transform: translateY(-6px) scale(.995);
}

@media (max-width: 560px) {
  .site-loader {
    align-items: end;
    padding-bottom: clamp(56px, 14vh, 112px);
  }

  .site-loader__meta {
    gap: 16px;
    margin-top: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.demo-page) main > section::before,
  html.js .scroll-reveal,
  html.js .scroll-reveal.reveal-visual {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .site-loader,
  .site-loader__inner {
    transition-duration: 0s;
    transition-delay: 0s;
  }

  .site-loader__track span {
    will-change: auto;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: relative;
  z-index: 10;
  height: var(--header-height);
  border-bottom: 1px solid rgba(16, 23, 19, 0.08);
  background: rgba(245, 248, 239, 0.96);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1480px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.brand {
  display: inline-flex;
  align-items: flex-end;
  justify-self: start;
  gap: 10px;
  min-width: max-content;
}

.brand::before {
  display: none;
}

.brand > :first-child {
  display: block;
  width: 209px;
  height: 32px;
  overflow: hidden;
  background: url("/assets/brand/teamon-wordmark.svg?v=2") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

@media (max-width: 360px) {
  .demo-site-header .brand > :first-child {
    width: 132px;
  }
}

.brand > :last-child {
  display: block;
  color: var(--violet);
  font-size: 30px;
  font-weight: 720;
  line-height: .9;
  letter-spacing: -.045em;
  transform: translateY(3px);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 50px;
  padding: 5px;
  border: 0;
  border-radius: 14px;
  background: #3f4a44;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.016em;
  box-shadow: 0 1px 2px rgba(16, 23, 19, .08);
}

.primary-nav a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  transition-property: background-color, border-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.primary-nav a > span {
  color: #fff;
}

.primary-nav svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.login-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(16, 23, 19, .12);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(16, 23, 19, .14);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.primary-nav a:hover,
.primary-nav a[aria-current="location"] {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.login-link:hover {
  background: #18221d;
  color: #fff;
  box-shadow: 0 10px 28px rgba(16, 23, 19, .2);
  transform: translateY(-1px);
}

.login-link:active {
  transform: scale(.97);
}

.login-link:focus-visible {
  outline: 3px solid rgba(118, 87, 232, .38);
  outline-offset: 3px;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 24px;
  font-size: 14px;
  font-weight: 560;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 620;
  letter-spacing: -0.02em;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: scale(0.985);
}

.button-small {
  min-height: 42px;
  padding: 0 18px;
  border-color: var(--green);
  background: var(--green);
  color: var(--ink);
  font-size: 14px;
}

.button-primary {
  background: var(--green);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(13, 101, 71, 0.13);
}

.button-primary:hover,
.button-small:hover {
  background: var(--lime);
  border-color: var(--lime);
}

.button-secondary {
  gap: 8px;
  padding-right: 18px;
  padding-left: 18px;
  border-color: #aeb8b0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}

.button-secondary:hover {
  border-color: var(--ink);
}

.hero {
  position: relative;
  overflow: clip;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(64px, 7vh, 92px) var(--page-gutter) 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(400px, 0.78fr) minmax(650px, 1.22fr);
  gap: clamp(38px, 4vw, 64px);
  align-items: center;
  width: min(1480px, 100%);
  margin: 0 auto;
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-bottom: 28px;
  animation: hero-enter 560ms cubic-bezier(.2, .8, .2, 1) both;
}

.eyebrow {
  margin: 0 0 28px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 680;
  letter-spacing: 0.08em;
}

.hero h1 {
  max-width: 610px;
  margin: 0;
  font-size: clamp(48px, 4.15vw, 64px);
  font-weight: 590;
  line-height: 0.99;
  letter-spacing: -0.055em;
  text-wrap: wrap;
}

.hero h1 span {
  display: block;
}

.hero-lead {
  max-width: 550px;
  margin: 30px 0 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.48;
  letter-spacing: -0.02em;
}

.hero-actions {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  max-width: 550px;
  margin-top: 38px;
}

.product-window {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  height: clamp(570px, 66vh, 700px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: #fbfcf8;
  box-shadow: 0 26px 70px rgba(25, 42, 32, 0.12), 0 2px 8px rgba(25, 42, 32, 0.05);
  animation: product-enter 680ms 100ms cubic-bezier(.2, .8, .2, 1) both;
  scroll-margin-top: 88px;
}

.product-toolbar {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  height: 72px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.product-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 11px;
  background: var(--green);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.product-title-group {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.product-title-group strong {
  font-size: 15px;
  font-weight: 650;
}

.product-title-group span,
.prepared-label {
  color: var(--muted);
  font-size: 12px;
}

.prepared-label {
  padding: 0 22px;
}

.product-body {
  display: grid;
  grid-template-columns: 64px minmax(245px, 0.78fr) minmax(380px, 1.22fr);
  height: calc(100% - 72px);
}

.product-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 10px;
  border-right: 1px solid var(--line);
  background: #f4f6f1;
}

.rail-item {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #707a73;
  font-size: 15px;
  font-weight: 650;
}

.rail-item.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(16, 23, 19, 0.08);
}

.rail-item svg,
.artifact-icon svg,
.hero-boundary svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail-bottom {
  margin-top: auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.work-pane {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #fafbf8;
}

.work-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 48px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 580;
}

.work-tabs span {
  position: relative;
  display: grid;
  place-items: center;
}

.work-tabs span.is-active {
  color: var(--ink);
}

.work-tabs span.is-active::after {
  position: absolute;
  right: 26%;
  bottom: -1px;
  left: 26%;
  height: 2px;
  background: var(--green);
  content: "";
}

.task-brief {
  padding: 24px 24px 22px;
  border-bottom: 1px solid var(--line);
}

.section-kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.task-brief h2 {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 570;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.trace-list {
  position: relative;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 26px 24px 110px;
  list-style: none;
}

.trace-list::before {
  position: absolute;
  top: 40px;
  bottom: 130px;
  left: 35px;
  width: 1px;
  background: rgba(22, 211, 79, 0.5);
  content: "";
}

.trace-list li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.trace-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.trace-list strong,
.work-status strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.trace-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}

.work-status {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 8px 22px rgba(25, 42, 32, 0.06);
}

.work-status small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.result-pane {
  min-width: 0;
  padding: clamp(22px, 2vw, 30px);
  background: #f7f9f4;
  scroll-margin-top: 88px;
}

.artifact-sheet {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: clamp(26px, 2.25vw, 34px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(25, 42, 32, 0.06);
}

.artifact-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.artifact-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
}

.artifact-icon svg {
  width: 19px;
  height: 19px;
}

.artifact-heading p {
  margin: 0 0 7px;
  color: var(--green-dark);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.09em;
}

.artifact-heading h2 {
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.artifact-meta {
  margin: 19px 0 0 48px;
  color: var(--ink-soft);
  font-size: 12px;
}

.artifact-content {
  display: grid;
  align-content: start;
  gap: 14px;
  flex: 1;
  margin: 22px 0 18px 48px;
}

.artifact-content section {
  min-width: 0;
}

.artifact-content h3 {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: -0.01em;
}

.artifact-content p,
.artifact-content ol {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.48;
}

.artifact-content ol {
  padding-left: 17px;
}

.artifact-content li + li {
  margin-top: 3px;
}

.artifact-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.artifact-question {
  padding: 10px 12px;
  border-left: 3px solid var(--green);
  background: var(--green-soft);
}

.artifact-decision {
  margin-left: 48px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.artifact-decision span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 660;
}

.artifact-decision i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
}

.artifact-decision small {
  display: block;
  max-width: 340px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.42;
}

.hero-boundary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(1480px, 100%);
  margin: clamp(28px, 4vh, 48px) auto 0;
  color: var(--green-dark);
}

.hero-boundary svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

.hero-boundary p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.product-truth {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(1480px, 100%);
  margin: 54px auto 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.product-truth div {
  padding: 24px 0 32px;
}

.product-truth div + div {
  padding-left: 32px;
  border-left: 1px solid var(--line-strong);
}

.product-truth dt {
  font-size: 14px;
  font-weight: 670;
}

.product-truth dd {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes product-enter {
  from { opacity: 0; transform: translateY(24px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1240px) {
  .hero-grid {
    grid-template-columns: minmax(360px, 0.72fr) minmax(590px, 1.28fr);
    gap: 34px;
  }

  .hero h1 {
    font-size: clamp(48px, 4.9vw, 61px);
  }

  .hero-actions {
    grid-template-columns: 1fr;
    max-width: 410px;
  }

  .product-body {
    grid-template-columns: 56px minmax(225px, 0.78fr) minmax(330px, 1.22fr);
  }

  .product-toolbar {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }

  .artifact-sheet {
    padding: 30px;
  }
}

@media (max-width: 1040px) {
  /* .primary-nav скрыта, но колонка под неё оставалась: между знаком и правой
     группой зияла пустота шириной с бывшую панель, а лишний прямой ребёнок не
     помещался в объявленные колонки и уезжал во вторую строку. Flex-строка
     считает только видимые элементы: сколько бы их ни осталось (знак, «Войти»,
     «Меню» или знак и «Меню» после 700px), пустых колонок и лишних gap не
     возникает. auto-margin у знака прижимает всю правую группу к краю. */
  .header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .header-inner > .brand {
    margin-right: auto;
  }

  .primary-nav {
    display: none;
  }

  .hero {
    padding-top: 58px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .hero-copy {
    max-width: 760px;
    padding-bottom: 0;
  }

  .hero h1 {
    max-width: 760px;
    font-size: clamp(52px, 7.2vw, 72px);
  }

  .hero-lead {
    max-width: 650px;
  }

  .hero-actions {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    max-width: 590px;
  }

  .product-window {
    height: 680px;
  }
}

@media (max-width: 700px) {
  :root {
    --header-height: 64px;
    --page-gutter: 20px;
  }

  .brand {
    gap: 0;
  }

  .brand::before {
    display: none;
  }

  .brand > :first-child {
    width: 172px;
    height: 27px;
  }

  .brand > :last-child {
    display: none;
  }

  .login-link {
    display: none;
  }

  .header-actions {
    display: none;
  }

  .hero {
    padding-top: 34px;
  }

  .eyebrow {
    margin-bottom: 16px;
    font-size: 11px;
  }

  .hero h1 {
    font-size: clamp(38px, 11.2vw, 50px);
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: pretty;
  }

  .hero-lead {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.45;
  }

  .hero-actions {
    grid-template-columns: 1fr;
    margin-top: 26px;
  }

  .button-secondary {
    min-height: 40px;
    border-color: transparent;
  }

  .product-window {
    height: auto;
    min-height: 790px;
    border-radius: 14px;
  }

  .product-toolbar {
    grid-template-columns: 50px minmax(0, 1fr);
    height: 62px;
  }

  .product-mark {
    width: 30px;
    height: 30px;
  }

  .product-title-group {
    padding-left: 13px;
  }

  .product-title-group span,
  .prepared-label {
    display: none;
  }

  .product-body {
    grid-template-columns: 48px minmax(0, 1fr);
    height: auto;
  }

  .product-rail {
    grid-row: 1 / span 2;
    padding: 12px 4px;
  }

  .rail-item {
    width: 36px;
    height: 36px;
  }

  .work-pane {
    grid-column: 2;
    grid-row: 2;
    min-height: 530px;
    border-right: 0;
  }

  .task-brief {
    padding: 20px;
  }

  .task-brief h2 {
    font-size: 14px;
  }

  .trace-list {
    gap: 21px;
    padding: 24px 20px 108px;
  }

  .trace-list::before {
    left: 31px;
  }

  .result-pane {
    grid-column: 2;
    grid-row: 1;
    min-height: 500px;
    padding: 18px;
    border-top: 1px solid var(--line);
  }

  .artifact-sheet {
    min-height: 390px;
    padding: 24px 20px;
  }

  .artifact-heading h2 {
    font-size: 22px;
  }

  .artifact-meta,
  .artifact-content,
  .artifact-decision {
    margin-left: 0;
  }

  .artifact-content {
    margin-top: 26px;
  }

  .artifact-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hero-boundary {
    margin-top: 28px;
  }

  .product-truth {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }

  .product-truth div {
    padding: 20px 0;
  }

  .product-truth div + div {
    padding-left: 0;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
}

/* Anti-template pass: editorial structure, no trust strips or decorative cards */

.hero {
  min-height: 0;
  padding-bottom: clamp(76px, 8vw, 118px);
}

.eyebrow,
.chapter-label {
  margin: 0 0 24px;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -.01em;
  text-transform: none;
}

.chapter-label {
  line-height: 1.35;
}

.section-heading-split > .chapter-label {
  margin-top: 9px;
}

.contrast-row {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 8vw, 130px);
}

.contrast-row small {
  letter-spacing: .06em;
}

.scenario-tab {
  justify-content: center;
}

.capability-list article {
  grid-template-columns: minmax(260px, .8fr) minmax(380px, 1.2fr);
  gap: clamp(48px, 8vw, 130px);
}

.control-section {
  background: #e7f3e2;
  color: var(--ink);
}

.control-section .chapter-label {
  color: var(--green-dark);
}

.control-copy > p:last-of-type,
.control-principles dd {
  color: var(--ink-soft);
}

.control-principles {
  border-top-color: rgba(16, 23, 19, .22);
}

.control-principles div {
  border-bottom-color: rgba(16, 23, 19, .22);
}

.decision-panel {
  padding-right: 0;
  padding-left: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.decision-top small {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #503b9c;
}

.decision-actions button {
  border-radius: 4px;
  background: rgba(255, 255, 255, .42);
}

.final-section {
  padding-top: clamp(90px, 11vw, 150px);
  padding-bottom: clamp(70px, 8vw, 110px);
  background: var(--paper);
}

.final-inner {
  width: min(1280px, 100%);
  padding: clamp(50px, 6vw, 76px) 0 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.final-inner .chapter-label {
  color: var(--green-dark);
}

.final-inner p:last-child {
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .hero {
    padding-bottom: 80px;
  }

  .contrast-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contrast-old,
  .contrast-new {
    grid-column: 1;
  }

  .capability-list article {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .capability-list h3,
  .capability-list p {
    grid-column: 1;
  }

  .final-section {
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
  }

  .final-inner {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Client-assistance dock. */

.support-dock {
  position: fixed;
  z-index: 60;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  transition:
    opacity 180ms cubic-bezier(.2, 0, 0, 1),
    transform 180ms cubic-bezier(.2, 0, 0, 1),
    visibility 0s linear 0s;
}

.support-dock.is-cta-obscured:not(.is-open) {
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition-delay: 0s, 0s, 180ms;
}

.support-launcher,
.support-panel,
.support-panel button,
.support-panel input {
  pointer-events: auto;
  font-family: "Rubik", Arial, sans-serif;
}

.support-launcher {
  display: inline-flex;
  min-width: 168px;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 0;
  border-radius: 28px;
  background: var(--ink);
  color: #fff;
  box-shadow:
    0 16px 40px rgba(16, 23, 19, .2),
    0 2px 8px rgba(16, 23, 19, .12);
  font: inherit;
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(.2, 0, 0, 1),
    box-shadow 180ms cubic-bezier(.2, 0, 0, 1),
    background-color 180ms cubic-bezier(.2, 0, 0, 1);
}

.support-launcher > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 211, 79, .14);
}

.support-launcher strong {
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -.01em;
}

.support-launcher:hover {
  background: #18221d;
  box-shadow:
    0 20px 48px rgba(16, 23, 19, .24),
    0 3px 10px rgba(16, 23, 19, .12);
  transform: translateY(-2px);
}

.support-launcher:active {
  transform: scale(.96);
}

.support-launcher:focus-visible,
.support-panel button:focus-visible,
.support-panel input:focus-visible {
  outline: 3px solid rgba(118, 87, 232, .42);
  outline-offset: 3px;
}

.support-panel {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: min(390px, calc(100vw - 28px));
  padding: 20px;
  border-radius: 30px;
  background: rgba(251, 250, 248, .97);
  color: var(--ink);
  box-shadow:
    0 30px 90px rgba(16, 23, 19, .18),
    0 4px 18px rgba(16, 23, 19, .09),
    inset 0 0 0 1px rgba(16, 23, 19, .07);
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transform-origin: 100% 100%;
  visibility: hidden;
  transition:
    opacity 220ms cubic-bezier(.2, 0, 0, 1),
    transform 260ms cubic-bezier(.2, 0, 0, 1),
    visibility 0s linear 260ms;
}

.support-panel[hidden] {
  display: block;
}

.support-panel[aria-hidden="true"] {
  pointer-events: none;
}

.support-dock.is-open .support-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition-delay: 0s;
}

.support-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.support-panel-header span {
  display: block;
  margin-bottom: 4px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.support-panel-header h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.support-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 23, 19, .06);
  color: var(--ink);
  cursor: pointer;
}

.support-close svg,
.support-form button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-messages {
  display: grid;
  max-height: 240px;
  gap: 9px;
  margin: 20px 0 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.support-message {
  display: grid;
  width: fit-content;
  max-width: 88%;
  gap: 4px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 17px;
  font-size: 13px;
  line-height: 1.45;
  text-wrap: pretty;
  white-space: pre-line;
}

.support-message::before {
  content: attr(data-author);
  display: block;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.support-message-agent {
  border-bottom-left-radius: 6px;
  padding-left: 17px;
  background: #f4f8f4;
  box-shadow:
    inset 3px 0 0 var(--green),
    inset 0 0 0 1px rgba(16, 23, 19, .06);
}

.support-message-agent::before {
  color: var(--green-dark);
}

.support-message-user {
  justify-self: end;
  border-bottom-right-radius: 6px;
  background: #eee8ff;
}

.support-message-user::before {
  color: #6546ca;
  text-align: right;
}

.support-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.support-prompts button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 20px;
  background: rgba(16, 23, 19, .055);
  color: var(--ink);
  font-family: "Rubik", Arial, sans-serif;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 160ms cubic-bezier(.2, 0, 0, 1),
    transform 160ms cubic-bezier(.2, 0, 0, 1);
}

.support-prompts button:hover {
  background: rgba(22, 211, 79, .13);
  transform: translateY(-1px);
}

/* Размер кнопки отправки задаёт всю геометрию формы: ширину своей колонки,
   высоту поля и оба радиуса. Пока это были три независимых числа, обводка
   формы, прямые углы инпута и круг кнопки не совпадали друг с другом. */
.support-form {
  --support-send: 44px;
  --support-inset: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--support-send);
  gap: 8px;
  padding: var(--support-inset);
  border-radius: calc(var(--support-inset) + var(--support-send) / 2);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 23, 19, .1);
  transition: box-shadow 160ms cubic-bezier(.2, 0, 0, 1);
}

/* Фокус показывается одним кольцом на всей форме вместо браузерной подсветки
   внутреннего поля. */
.support-form:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(16, 23, 19, .18),
    0 0 0 3px rgba(118, 87, 232, .42);
}

.support-form input {
  min-width: 0;
  height: var(--support-send);
  padding: 0 14px;
  border: 0;
  border-radius: calc(var(--support-send) / 2);
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--ink);
  font-family: "Rubik", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.support-form input:focus-visible {
  outline: 0;
}

.support-form button {
  display: grid;
  width: var(--support-send);
  height: var(--support-send);
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.2, 0, 0, 1);
}

/* Кольцо уже нарисовано на форме, поэтому кнопка отмечает фокус внутри круга
   и не добавляет второй контур. */
.support-form button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(16, 23, 19, .5);
}

.support-form button:active {
  transform: scale(.96);
}

.support-note {
  margin: 10px 2px 0;
  color: #526159;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .support-dock {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 7px;
  }

  .support-launcher {
    min-width: 148px;
    min-height: 52px;
    padding: 0 17px;
  }

  .support-panel {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: min(620px, calc(100svh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    padding: 18px;
    overflow-y: auto;
    border-radius: 26px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .support-panel,
  .support-launcher {
    transition: none;
  }
}

/* Continuous brand atmosphere: one color field across the public landing. */

body:not(.demo-page) {
  background: var(--milk);
}

body:not(.demo-page) main {
  background: transparent;
}

body:not(.demo-page) .lindy-hero,
body:not(.demo-page) .context-proof-section,
body:not(.demo-page) .preview-section,
body:not(.demo-page) .capabilities-section,
body:not(.demo-page) .call-story-section,
body:not(.demo-page) .control-section,
body:not(.demo-page) .demo-access-section,
body:not(.demo-page) .faq-section,
body:not(.demo-page) .final-section {
  background: transparent;
}

body:not(.demo-page) main > section {
  position: relative;
  border-top: 0;
  border-bottom: 0;
}

html.js .scroll-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 680ms cubic-bezier(.2, 0, 0, 1) var(--reveal-delay, 0ms),
    transform 760ms cubic-bezier(.2, 0, 0, 1) var(--reveal-delay, 0ms);
}

html.js .scroll-reveal.reveal-visual {
  transform: translateY(30px) scale(.988);
}

html.js .scroll-reveal.is-visible,
html.js .scroll-reveal.reveal-visual.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body:not(.demo-page) .site-header {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body:not(.demo-page) .site-footer {
  border-top: 0;
  background: transparent;
}

/* The 3.7-second cinematic loader uses the same palette with stronger live motion. */

.site-loader {
  --loader-duration: 0ms;
  overflow: hidden;
  background: linear-gradient(135deg, #fbfcf9 0%, #f8faf7 52%, #f8f7fc 100%);
  isolation: isolate;
  transition-duration: 520ms, 0s;
  transition-delay: 0s, 520ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1), linear;
}

.site-loader::before {
  content: none;
}

.site-loader::after {
  content: none;
}

.site-loader__aurora {
  position: absolute;
  z-index: 0;
  inset: -18%;
  overflow: hidden;
  background: linear-gradient(135deg, #b8f2c9 0%, #dff5b7 100%);
  opacity: 1;
  pointer-events: none;
}

.site-loader__aurora::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #c5bbf4 0%, #e6d4fb 52%, #d4c3f7 100%);
  content: "";
  opacity: 0;
  animation: loader-violet-wash var(--loader-duration) cubic-bezier(.37, 0, .63, 1) both paused;
  will-change: opacity;
}

.site-loader.is-running .site-loader__aurora::before {
  animation-play-state: running;
}

.site-loader__aurora::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 51%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .12) 26%, transparent 62%);
  content: "";
}

.site-loader__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(96px);
  animation-duration: var(--loader-duration);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.37, 0, .63, 1);
  will-change: transform, opacity;
}

.site-loader.is-running .site-loader__glow {
  animation-play-state: running;
}

.site-loader.is-static .site-loader__aurora::before,
.site-loader.is-static .site-loader__glow {
  animation: none;
}

.site-loader.is-static .site-loader__glow--green { opacity: .58; }
.site-loader.is-static .site-loader__glow--violet { opacity: .42; }
.site-loader.is-static .site-loader__aurora::before { opacity: .36; }
.site-loader.is-static .site-loader__track span { transform: scaleX(.52); }

.site-loader__glow--green {
  bottom: -42%;
  left: -34%;
  width: 118vmax;
  height: 112vmax;
  background: radial-gradient(circle, rgba(22, 211, 79, .68) 0%, rgba(22, 211, 79, .28) 38%, transparent 72%);
  animation-name: loader-glow-green;
}

.site-loader__glow--violet {
  top: -44%;
  right: -36%;
  width: 116vmax;
  height: 110vmax;
  background: radial-gradient(circle, rgba(118, 87, 232, .7) 0%, rgba(118, 87, 232, .3) 38%, transparent 72%);
  animation-name: loader-glow-violet;
}

.site-loader__glow--lime {
  display: none;
}

.site-loader__inner {
  position: relative;
  z-index: 1;
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.site-loader__brand {
  margin: 0 auto;
}

.site-loader__brand-lockup .site-loader__brand {
  margin: 0;
}

.site-loader__meta {
  margin-top: clamp(44px, 6vw, 52px);
}

.site-loader__track {
  height: 4px;
  background: rgba(16, 23, 19, .1);
  box-shadow: inset 0 1px 1px rgba(16, 23, 19, .06);
}

.site-loader__track span {
  background: linear-gradient(90deg, var(--green) 0%, var(--lime) 44%, var(--violet) 100%);
}

@keyframes loader-glow-green {
  0% { opacity: .92; transform: translate3d(-8%, 8%, 0) scale(1.02); }
  48% { opacity: .62; }
  100% { opacity: .18; transform: translate3d(24%, -20%, 0) scale(1.18); }
}

@keyframes loader-glow-violet {
  0% { opacity: .14; transform: translate3d(10%, -8%, 0) scale(1); }
  52% { opacity: .58; }
  100% { opacity: .92; transform: translate3d(-24%, 20%, 0) scale(1.2); }
}

@keyframes loader-violet-wash {
  0% { opacity: 0; }
  28% { opacity: .16; }
  62% { opacity: .58; }
  100% { opacity: .94; }
}

@media (max-width: 560px) {
  .site-loader {
    align-items: center;
    padding: 20px;
  }

  .site-loader__inner {
    width: 100%;
  }

  .site-loader__brand {
    width: 178px;
  }

  .site-loader__track {
    height: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader__glow {
    animation: none;
  }

  .site-loader__glow--green {
    opacity: .58;
  }

  .site-loader__glow--violet {
    opacity: .42;
  }

  .site-loader__aurora::before {
    animation: none;
    opacity: .36;
  }
}

/* Story-flow corrections: keep these last so legacy component rules cannot restore the old card grid. */

.preview-section .preview-heading {
  display: block;
  max-width: 860px;
}

.preview-section .preview-heading > p {
  max-width: 680px;
  margin-top: 22px;
}

.preview-section .scenario-tabs {
  display: flex;
  grid-template-columns: none;
  gap: 28px;
  width: auto;
  margin-top: 54px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
}

.preview-section .scenario-tab {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 0 0 13px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
}

.preview-section .scenario-tab.is-active {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 -2px var(--green);
}

#scenario-panel.scenario-stage {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  grid-template-areas:
    "brief artifact"
    "trace artifact";
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#scenario-panel.scenario-stage > section {
  min-width: 0;
  padding: 38px 44px 38px 0;
  border-left: 0;
}

#scenario-panel .scenario-brief {
  grid-area: brief;
  border-bottom: 1px solid var(--line-strong);
}

#scenario-panel .scenario-trace {
  grid-area: trace;
}

#scenario-panel .scenario-artifact {
  grid-area: artifact;
  align-self: stretch;
  width: auto;
  margin: 38px 0 0;
  padding: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(21, 38, 29, .07);
}

.control-grid {
  align-items: center;
}

.control-copy > p:last-child {
  max-width: 610px;
  margin-top: 30px;
}

.faq-list {
  border-top: 1px solid var(--ink);
}

@media (max-width: 1050px) {
  .context-proof-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .context-proof-copy {
    max-width: 760px;
  }

  .context-receipt {
    width: min(760px, 100%);
    justify-self: end;
  }
}

@media (max-width: 900px) {
  #scenario-panel.scenario-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brief"
      "trace"
      "artifact";
  }

  #scenario-panel.scenario-stage > section {
    padding-right: 0;
  }

  #scenario-panel .scenario-artifact {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .preview-section .scenario-tabs {
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .preview-section .scenario-tabs::-webkit-scrollbar {
    display: none;
  }

  .preview-section .scenario-tab {
    white-space: nowrap;
  }

  #scenario-panel .scenario-artifact {
    padding: 30px 24px;
    border-radius: 14px;
  }

  .context-receipt {
    justify-self: stretch;
  }
}

/* Editorial continuation: one product story, not a stack of SaaS cards. */

.context-receipt-status {
  color: var(--ink-soft);
}

.context-receipt-status i,
.scenario-result-meta i,
.scenario-trace li i {
  border: 1px solid rgba(16, 23, 19, .18);
  background: transparent;
  color: var(--green-dark);
}

.preview-heading {
  display: block;
  max-width: 860px;
}

.preview-heading > p {
  max-width: 680px;
  margin-top: 22px;
}

.scenario-tabs {
  display: flex;
  gap: 28px;
  width: auto;
  margin-top: 54px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
}

.scenario-tab {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 0 0 13px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
}

.scenario-tab.is-active {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 -2px var(--green);
}

.scenario-stage {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  grid-template-areas:
    "brief artifact"
    "trace artifact";
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.scenario-stage > section {
  min-width: 0;
  padding: 38px 44px 38px 0;
}

.scenario-stage > section + section {
  border-left: 0;
}

.scenario-brief {
  grid-area: brief;
  border-bottom: 1px solid var(--line-strong);
}

.scenario-trace {
  grid-area: trace;
}

.scenario-artifact {
  grid-area: artifact;
  align-self: stretch;
  margin: 38px 0 0;
  padding: 48px !important;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(21, 38, 29, .07);
}

.scenario-trace ol::before {
  background: var(--line-strong);
}

.scenario-trace li i {
  font-size: 10px;
  font-style: normal;
}

.memory-heading {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  gap: clamp(54px, 9vw, 150px);
  align-items: start;
}

.memory-heading > div {
  max-width: 820px;
}

.memory-heading h2 {
  max-width: 760px;
  margin: 0;
}

.memory-heading p:last-child {
  max-width: 720px;
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.55;
}

.memory-ledger {
  margin: clamp(62px, 8vw, 104px) 0 0;
  border-top: 1px solid var(--ink);
}

.memory-ledger div {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  gap: clamp(54px, 9vw, 150px);
  padding: 24px 0;
  border-bottom: 1px solid var(--line-strong);
}

.memory-ledger dt {
  font-size: 17px;
  font-weight: 670;
  letter-spacing: -.025em;
}

.memory-ledger dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.5;
}

.memory-boundary {
  max-width: 720px;
  margin: 24px 0 0 auto;
  color: var(--ink-muted);
  font-size: 13px;
}

.control-principles {
  margin-top: 54px;
}

.decision-panel {
  align-self: center;
}

.demo-access-section {
  border-bottom: 1px solid var(--line-strong);
  background: #fbfaf8;
}

.demo-access-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(72px, 10vw, 164px);
  align-items: start;
}

.demo-access-copy h2 {
  max-width: 620px;
  margin: 22px 0 0;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 560;
  line-height: .98;
  letter-spacing: -.055em;
}

.demo-access-copy > p:last-of-type {
  max-width: 590px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.55;
}

.demo-access-copy .button {
  margin-top: 34px;
}

.demo-access-copy > small {
  display: block;
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: 12px;
}

.demo-access-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
}

.demo-access-proof section {
  padding: 26px 30px 0 0;
}

.demo-access-proof section + section {
  padding-right: 0;
  padding-left: 30px;
  border-left: 1px solid var(--line-strong);
}

.demo-access-proof h3 {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.demo-access-proof ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-access-proof li {
  position: relative;
  padding: 14px 0 14px 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.demo-access-proof li::before {
  position: absolute;
  top: 18px;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.demo-access-proof section:last-child li::before {
  border: 1px solid var(--ink-muted);
  background: transparent;
}

.faq-grid {
  grid-template-columns: minmax(240px, .6fr) minmax(0, 1.4fr);
  gap: clamp(70px, 10vw, 170px);
}

.faq-list {
  border-top: 1px solid var(--ink);
}

.final-inner small {
  display: block;
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .scenario-stage,
  .demo-access-grid {
    grid-template-columns: 1fr;
  }

  .scenario-stage {
    grid-template-areas:
      "brief"
      "trace"
      "artifact";
  }

  .scenario-stage > section {
    padding-right: 0;
  }

  .scenario-artifact {
    margin-top: 0;
  }

  .demo-access-grid {
    gap: 72px;
  }
}

@media (max-width: 760px) {
  .scenario-tabs {
    gap: 20px;
    overflow-x: auto;
  }

  .scenario-tab {
    white-space: nowrap;
  }

  .scenario-artifact {
    padding: 30px 24px !important;
    border-radius: 14px;
  }

  .memory-heading,
  .memory-ledger div,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .memory-heading p:last-child {
    font-size: 16px;
  }

  .memory-ledger div {
    padding: 20px 0;
  }

  .memory-boundary {
    margin-left: 0;
  }

  .demo-access-copy h2 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .demo-access-proof {
    grid-template-columns: 1fr;
  }

  .demo-access-proof section + section {
    margin-top: 36px;
    padding-left: 0;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
}

/* Context proof: the phone notification continues as a concrete product receipt. */

.context-proof-section {
  padding-top: clamp(112px, 10vw, 152px);
  padding-bottom: clamp(112px, 10vw, 152px);
  border-top: 1px solid rgba(16, 23, 19, .09);
  background: var(--milk);
}

.context-proof-grid {
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(560px, 1.22fr);
  gap: clamp(72px, 9vw, 144px);
  align-items: center;
}

.context-proof-copy {
  max-width: 560px;
}

.context-proof-copy .chapter-label {
  margin-bottom: 42px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.context-proof-copy h2 {
  max-width: 540px;
  margin: 0;
  font-size: clamp(50px, 5vw, 72px);
  font-weight: 540;
  line-height: 1;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.context-proof-copy > p:last-child {
  max-width: 500px;
  margin: 42px 0 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.52;
  letter-spacing: -.022em;
  text-wrap: pretty;
}

.context-receipt {
  padding: clamp(38px, 4.4vw, 62px);
  border: 1px solid rgba(16, 23, 19, .13);
  border-radius: 2px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 18px 56px rgba(24, 39, 30, .055);
}

.context-receipt h3 {
  margin: 0 0 28px;
  font-size: clamp(36px, 3.5vw, 48px);
  font-weight: 550;
  line-height: 1;
  letter-spacing: -.05em;
}

.context-receipt dl {
  margin: 0;
  border-top: 1px solid rgba(16, 23, 19, .22);
}

.context-receipt dl div {
  display: grid;
  grid-template-columns: minmax(118px, .34fr) minmax(0, 1fr);
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(16, 23, 19, .18);
}

.context-receipt dt,
.context-receipt dd {
  margin: 0;
  font-size: clamp(15px, 1.28vw, 18px);
  line-height: 1.45;
  letter-spacing: -.02em;
}

.context-receipt dt {
  color: var(--muted);
}

.context-receipt dd {
  color: var(--ink);
  font-weight: 530;
}

.context-receipt-status {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 30px 0 0;
  color: var(--green-dark);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 560;
  letter-spacing: -.02em;
}

.context-receipt-status i {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 15px;
  font-style: normal;
}

.context-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(72px, 7vw, 104px);
  border-top: 1px solid rgba(16, 23, 19, .28);
  border-bottom: 1px solid rgba(16, 23, 19, .28);
}

.context-comparison p {
  display: grid;
  grid-template-columns: minmax(110px, .38fr) minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 28px 30px;
}

.context-comparison p:first-child {
  padding-left: 0;
}

.context-comparison p:last-child {
  border-left: 1px solid rgba(16, 23, 19, .18);
}

.context-comparison small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.context-comparison span {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.4;
  letter-spacing: -.022em;
}

.context-comparison p:last-child small,
.context-comparison p:last-child span {
  color: var(--green-dark);
}

.context-proof-footer {
  display: flex;
  gap: 32px;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 36px;
}

.context-proof-footer a {
  border-bottom: 1px solid currentColor;
  color: var(--green-dark);
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 560;
  line-height: 1.5;
  letter-spacing: -.025em;
}

.context-proof-footer a span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 160ms ease;
}

.context-proof-footer a:hover span,
.context-proof-footer a:focus-visible span {
  transform: translateX(4px);
}

.context-proof-footer p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

@media (max-width: 980px) {
  .context-proof-grid {
    grid-template-columns: minmax(280px, .7fr) minmax(440px, 1.3fr);
    gap: 54px;
  }

  .context-proof-copy h2 {
    font-size: clamp(46px, 6vw, 62px);
  }

  .context-comparison p {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .context-proof-section {
    padding: 84px 20px 88px;
  }

  .context-proof-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .context-proof-copy .chapter-label {
    margin-bottom: 24px;
  }

  .context-proof-copy h2 {
    font-size: clamp(42px, 12vw, 54px);
  }

  .context-proof-copy > p:last-child {
    margin-top: 28px;
    font-size: 17px;
  }

  .context-receipt {
    padding: 28px 22px;
  }

  .context-receipt h3 {
    font-size: 34px;
  }

  .context-receipt dl div {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 19px 0;
  }

  .context-receipt-status {
    align-items: flex-start;
    font-size: 15px;
  }

  .context-comparison {
    grid-template-columns: 1fr;
    margin-top: 58px;
  }

  .context-comparison p,
  .context-comparison p:first-child,
  .context-comparison p:last-child {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 23px 0;
    border-left: 0;
  }

  .context-comparison p + p {
    border-top: 1px solid rgba(16, 23, 19, .18);
  }

  .context-proof-footer {
    display: grid;
    gap: 24px;
    margin-top: 30px;
  }

  .context-proof-footer p {
    text-align: left;
  }
}

/* Hero follows the supplied Lindy composition: space, low copy, phone */

.site-header {
  border-bottom: 0;
  background: #fbfaf8;
  backdrop-filter: none;
}

.header-inner {
  width: min(1256px, calc(100% - 184px));
  padding: 0;
}

/* Высота считается от устройства, а не наоборот: .phone-scene начинается на 72px
   и содержит .phone-shell высотой 878px, то есть телефону нужно 950px. При
   меньшей высоте overflow: hidden срезал нижнюю часть корпуса, и устройство
   выглядело подвешенным. 36px снизу — воздух под корпусом. */
.lindy-hero {
  min-height: clamp(986px, calc(100svh - var(--header-height)), 1040px);
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.lindy-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1256px, calc(100% - 184px));
  min-height: clamp(880px, calc(100svh - var(--header-height)), 950px);
  margin: 0 auto;
}

.lindy-copy {
  position: absolute;
  z-index: 3;
  top: clamp(230px, 31vh, 300px);
  bottom: auto;
  left: 70px;
  min-width: 0;
  max-width: 660px;
}

.lindy-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.lindy-copy h1 {
  min-width: 0;
  margin: 0;
  font-size: clamp(60px, 5.4vw, 78px);
  font-weight: 560;
  line-height: .98;
  letter-spacing: -.058em;
  white-space: nowrap;
}

.lindy-copy h1 em {
  color: var(--green-dark);
  font-style: normal;
  font-weight: inherit;
}

.lindy-copy h1 > b {
  color: var(--violet);
  font: inherit;
  font-weight: inherit;
}

.lindy-copy > p {
  max-width: 560px;
  margin: 18px 0 0;
  color: #3f5265;
  font-size: 20px;
  line-height: 1.38;
  letter-spacing: -.025em;
}

.lindy-copy > .lindy-access-note {
  max-width: 470px;
  margin-top: 24px;
  color: #0f6b48;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -.01em;
}

.private-access-entry[hidden] {
  display: none !important;
}

.lindy-copy > .button {
  min-height: 44px;
  margin: 28px 0 0;
  padding-right: 19px;
  padding-left: 19px;
  border-radius: 11px;
  font-size: 14px;
}

.phone-scene {
  position: absolute;
  z-index: 2;
  isolation: isolate;
  top: 72px;
  right: -4px;
  bottom: auto;
  width: 450px;
  height: calc(100% - 72px);
  margin: 0;
  overflow: visible;
  border-radius: 76px 76px 0 0;
  background: transparent;
}

html.js .phone-scene.is-phone-reveal-pending {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 68px, 0) scale(.955);
  will-change: opacity, filter, transform;
}

html.js .phone-scene.is-notification-ready {
  animation: phone-scene-arrive 760ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes phone-scene-arrive {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 68px, 0) scale(.955);
  }

  68% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -7px, 0) scale(1.006);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.phone-scene::before {
  content: none;
}

.phone-shell {
  position: absolute;
  top: 0;
  left: 15px;
  width: 420px;
  height: 878px;
  padding: 10px;
  border: 2px solid #080a0a;
  border-radius: 74px;
  background: linear-gradient(90deg, #737a77 0%, #1d2220 3%, #0c0f0e 10%, #0a0d0c 90%, #202522 97%, #777d7a 100%);
  box-shadow:
    16px 30px 64px rgba(22, 31, 30, .16),
    2px 5px 12px rgba(22, 31, 30, .12),
    inset 0 0 0 1px rgba(238, 241, 238, .34);
}

.phone-shell::before {
  content: none;
}

.phone-shell::after {
  content: none;
}

.phone-button {
  position: absolute;
  z-index: 2;
  width: 5px;
  border: 0;
  background:
    linear-gradient(90deg, #171b19 0%, #727976 34%, #343a37 68%, #0c0f0e 100%);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, .3),
    0 1px 0 rgba(0, 0, 0, .72),
    inset 1px 0 rgba(255, 255, 255, .2),
    inset -1px 0 rgba(0, 0, 0, .46);
  pointer-events: none;
}

.phone-button::after {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .24);
  content: "";
}

.phone-button-action {
  top: 128px;
  left: -5px;
  height: 60px;
  border-radius: 4px 1px 1px 4px;
}

.phone-button-volume-up,
.phone-button-volume-down {
  left: -5px;
  height: 83px;
  border-radius: 4px 1px 1px 4px;
}

.phone-button-action::after,
.phone-button-volume-up::after,
.phone-button-volume-down::after {
  right: 1px;
}

.phone-button-volume-up { top: 205px; }
.phone-button-volume-down { top: 300px; }

.phone-button-power {
  top: 202px;
  right: -5px;
  height: 140px;
  border-radius: 1px 4px 4px 1px;
  background:
    linear-gradient(90deg, #0c0f0e 0%, #343a37 32%, #727976 66%, #171b19 100%);
}

.phone-button-camera {
  top: 404px;
  right: -3px;
  z-index: 3;
  width: 4px;
  height: 118px;
  border-radius: 2px 4px 4px 2px;
  background:
    linear-gradient(90deg, #111513 0%, #3f4643 36%, #858c88 72%, #282d2b 100%);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, .22),
    0 1px 0 rgba(0, 0, 0, .64),
    inset 1px 0 rgba(0, 0, 0, .42),
    inset -1px 0 rgba(255, 255, 255, .2);
}

.phone-button-power::after,
.phone-button-camera::after {
  left: 1px;
}

.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 62px;
  background: linear-gradient(155deg, #d8f1fa 0%, #c9ebf2 38%, #e5f1eb 70%, #f9f5ed 100%);
  color: #113146;
}

.phone-wallpaper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.phone-wallpaper::before,
.phone-wallpaper::after {
  position: absolute;
  right: -34%;
  bottom: 8%;
  width: 145%;
  height: 42%;
  border: 0;
  border-radius: 50%;
  background: rgba(162, 214, 222, .42);
  content: "";
  filter: blur(8px);
  transform: rotate(-7deg);
}

.phone-wallpaper::after {
  right: -15%;
  bottom: -10%;
  width: 130%;
  height: 36%;
  background: rgba(123, 188, 198, .38);
  transform: rotate(7deg);
}

.phone-status {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 0;
  color: #5b7b8d;
  font-size: 13px;
}

.phone-status-icons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.phone-status-icons svg {
  display: block;
  flex: none;
  overflow: visible;
}

.phone-cellular {
  width: 17px;
  height: 11px;
  fill: currentColor;
}

.phone-wifi {
  width: 17px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.55;
}

.phone-wifi circle {
  fill: currentColor;
  stroke: none;
}

.phone-battery {
  width: 25px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.phone-battery-level,
.phone-battery-cap {
  fill: currentColor;
  stroke: none;
}

.phone-island {
  position: absolute;
  z-index: 3;
  top: 17px;
  left: 50%;
  width: 116px;
  height: 30px;
  border-radius: 999px;
  background: #05090b;
  box-shadow: inset 0 -1px rgba(255, 255, 255, .08);
  transform: translateX(-50%);
}

.phone-island i {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #264e61, #071019 55%, #000);
}

.phone-island-result {
  position: absolute;
  top: 5px;
  left: 9px;
  display: flex;
  gap: 5px;
  align-items: center;
  color: #24dc69;
  opacity: 0;
  transform: translateX(5px) scale(.86);
  transform-origin: left center;
}

.phone-island-result b {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.phone-island-result svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(36, 220, 105, .16);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.phone-lock {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  color: #86a9ba;
}

.phone-lock svg {
  display: block;
  width: 15px;
  height: 18px;
  overflow: visible;
}

.phone-screen > time {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 10px;
  font-size: 76px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -.06em;
  text-align: center;
}

.phone-date {
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  color: #58758a;
  font-size: 17px;
  font-weight: 560;
  text-align: center;
}

.phone-notification {
  position: absolute;
  z-index: 2;
  top: 286px;
  right: 20px;
  left: 20px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 24px;
  background: rgba(248, 252, 252, .84);
  color: #234154;
  box-shadow: 0 12px 28px rgba(72, 111, 131, .08);
  backdrop-filter: blur(26px) saturate(1.12);
  transform-origin: 50% 0;
}

.phone-scene:not(.is-notification-ready) .phone-notification {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(-30px) scale(.97);
}

.phone-scene.is-notification-ready .phone-screen {
  animation: phone-wake 460ms cubic-bezier(.2, .8, .2, 1) both;
}

.phone-scene.is-notification-ready .phone-island {
  animation: island-notification 540ms 360ms cubic-bezier(.16, 1, .3, 1) both;
}

.phone-scene.is-notification-ready .phone-notification {
  animation: notification-deliver 580ms 440ms cubic-bezier(.16, 1, .3, 1) both;
}

.phone-scene.is-notification-ready.is-phone-active .phone-screen {
  animation: phone-screen-live 5600ms 900ms ease-in-out infinite both;
}

.phone-scene.is-notification-ready.is-phone-active .phone-island {
  animation: phone-island-live 5600ms 900ms cubic-bezier(.16, 1, .3, 1) infinite both;
}

.phone-scene.is-notification-ready.is-phone-active .phone-island-result {
  animation: phone-island-result-live 5600ms 900ms cubic-bezier(.16, 1, .3, 1) infinite both;
}

.phone-scene.is-notification-ready.is-phone-active .phone-notification {
  animation: phone-notification-live 5600ms 900ms cubic-bezier(.16, 1, .3, 1) infinite both;
}

.phone-scene.is-notification-ready.is-phone-active .phone-notification-top small::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(20, 207, 82, .28);
  content: "";
  vertical-align: 1px;
  animation: phone-result-pulse 1400ms ease-out infinite;
}

@keyframes phone-screen-live {
  0%, 12%, 100% { filter: brightness(.94) saturate(.92); }
  20%, 76% { filter: brightness(1.03) saturate(1.04); }
  88% { filter: brightness(.98) saturate(.98); }
}

@keyframes phone-island-live {
  0%, 8%, 100% { width: 116px; }
  14%, 38% { width: 144px; }
  46%, 92% { width: 116px; }
}

@keyframes phone-island-result-live {
  0%, 10%, 45%, 100% {
    opacity: 0;
    transform: translateX(5px) scale(.86);
  }

  16%, 38% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes phone-notification-live {
  0%, 12%, 100% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-34px) scale(.965);
  }

  21%, 72% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }

  82%, 92% {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(12px) scale(.985);
  }
}

@keyframes phone-result-pulse {
  0% { box-shadow: 0 0 0 0 rgba(20, 207, 82, .3); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(20, 207, 82, 0); }
}

@keyframes island-notification {
  0%, 100% {
    width: 116px;
  }

  46% {
    width: 136px;
  }
}

@keyframes phone-wake {
  from {
    filter: brightness(.86) saturate(.82);
  }

  to {
    filter: brightness(1) saturate(1);
  }
}

@keyframes notification-deliver {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-38px) scale(.96);
  }

  64% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(4px) scale(1.008);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.phone-notification-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #eadfc9;
  border-radius: 13px;
  background: #111817;
  color: var(--green);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: -.05em;
}

.phone-notification-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #6b8392;
  font-size: 12px;
}

.phone-notification-top strong {
  font-weight: 570;
}

.phone-notification-top small {
  font-size: 11px;
}

.phone-notification h2 {
  margin: 2px 0 0;
  color: #183649;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.018em;
}

.phone-notification p {
  margin: 2px 0 0;
  color: #5d798a;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1080px) {
  .header-inner,
  .lindy-hero-inner {
    width: calc(100% - 80px);
  }

  .lindy-copy {
    left: 0;
  }

  .phone-scene {
    right: 0;
  }

  .lindy-copy h1 {
    font-size: 58px;
  }
}

/* Герой собран двумя абсолютными слоями: копия шириной до 660px от левого края
   и сцена телефона шириной 450px от правого. Их ширины сходятся раньше, чем
   включался вертикальный стек, поэтому подзаголовок печатался поверх корпуса
   телефона. Стек включается там, где колонки перестают помещаться рядом:
   зазор обнуляется около 1245px внутренней ширины документа, что при обычном
   полосе прокрутки соответствует viewport 1260px. Раскладочные декларации
   перенесены сюда из блока max-width: 900px, поэтому на узких экранах
   поведение не изменилось. */
@media (max-width: 1260px) {
  .lindy-hero {
    min-height: 0;
    padding-bottom: 0;
  }

  .lindy-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: 94px;
  }

  .lindy-copy {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    max-width: none;
  }

  .lindy-title-row {
    display: block;
  }

  .lindy-copy h1 {
    width: 100%;
    overflow-wrap: normal;
    white-space: normal;
  }

  .phone-scene {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: min(340px, 100%);
    height: 668px;
    margin: 60px auto 0;
  }

  .phone-shell {
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(.76);
    transform-origin: top center;
  }
}

@media (max-width: 900px) {
  .site-header {
    position: relative;
  }

  .header-inner,
  .lindy-hero-inner {
    width: calc(100% - 40px);
  }

  .lindy-copy h1 {
    font-size: clamp(40px, 11vw, 52px);
  }

  .lindy-copy > p {
    font-size: 18px;
  }

  .phone-shell {
    width: 420px;
    height: 878px;
    border-radius: 74px;
  }

  .phone-screen {
    border-radius: 62px;
  }

  .phone-screen > time {
    font-size: 76px;
  }

  .phone-notification {
    top: 286px;
  }
}

@media (max-width: 400px) {
  .lindy-copy h1 {
    font-size: clamp(38px, 10.5vw, 44px);
  }

  .lindy-copy > .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .phone-screen,
  .phone-island,
  .phone-notification {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none;
  }

  html.js .phone-scene.is-phone-reveal-pending,
  html.js .phone-scene.is-notification-ready {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .phone-scene.is-notification-ready.is-phone-active .phone-screen,
  .phone-scene.is-notification-ready.is-phone-active .phone-island,
  .phone-scene.is-notification-ready.is-phone-active .phone-island-result,
  .phone-scene.is-notification-ready.is-phone-active .phone-notification,
  .phone-scene.is-notification-ready.is-phone-active .phone-notification-top small::before {
    animation: none !important;
  }

  .phone-island {
    width: 144px;
  }

  .phone-island-result {
    opacity: 1;
    transform: none;
  }

  .phone-island {
    transform: translateX(-50%);
  }
}

/* Full landing continuation */

.site-header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(16px);
}

.hero h1 {
  font-size: clamp(48px, 3.8vw, 58px);
}

.hero-microcopy {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section {
  padding: clamp(72px, 7vw, 104px) var(--page-gutter);
  scroll-margin-top: var(--header-height);
}

.section-shell {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.section-heading h2,
.faq-heading h2,
.final-inner h2,
.work-reality h2,
.control-section h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 560;
  line-height: 1.01;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.section-heading > p,
.section-heading > div > p,
.faq-heading > p:last-child,
.work-reality-grid > div:last-child > p:last-child,
.control-copy > p:last-of-type {
  color: var(--ink-soft);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.section-heading-split {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 130px);
  align-items: start;
}

.section-heading-split .eyebrow {
  margin-top: 9px;
}

.section-heading-split > div > p {
  max-width: 720px;
  margin: 30px 0 0;
}

.contrast-section {
  background: var(--paper);
}

.contrast-ledger {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-strong);
}

.contrast-row {
  display: grid;
  grid-template-columns: 52px minmax(0, .82fr) 54px minmax(0, 1.18fr);
  gap: 28px;
  align-items: start;
  padding: 42px 0 46px;
  border-bottom: 1px solid var(--line-strong);
}

.contrast-index {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.contrast-row small {
  display: block;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 730;
  letter-spacing: .1em;
}

.contrast-new small {
  color: var(--green-dark);
}

.contrast-row h3 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 590;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.contrast-row p {
  max-width: 44ch;
  margin: 15px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.contrast-old {
  opacity: .72;
}

.contrast-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 21px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--green-dark);
  font-size: 18px;
}

.preview-section {
  background: var(--milk);
}

.preview-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .55fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: end;
}

.preview-heading .eyebrow {
  margin-bottom: 24px;
}

.preview-heading > p {
  margin: 0 0 7px;
}

.scenario-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.scenario-tab {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border: 0;
  border-right: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 590;
  text-align: left;
  transition-property: background-color, color;
  transition-duration: 160ms;
}

.scenario-tab:last-child {
  border-right: 0;
}

.scenario-tab span {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.scenario-tab:hover,
.scenario-tab.is-active {
  background: var(--paper);
  color: var(--ink);
}

.scenario-tab.is-active {
  box-shadow: inset 0 -3px 0 var(--green);
}

.scenario-tab:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--violet);
  outline-offset: -3px;
}

.scenario-stage {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(250px, .86fr) minmax(330px, 1.25fr);
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--paper);
  box-shadow: 0 24px 64px rgba(25, 42, 32, .08), 0 2px 8px rgba(25, 42, 32, .04);
}

.scenario-stage > section {
  min-width: 0;
  padding: clamp(30px, 3.2vw, 48px);
}

.scenario-stage > section + section {
  border-left: 1px solid var(--line);
}

.scenario-brief {
  background: #f8faf6;
}

.scenario-brief h3,
.scenario-artifact h3 {
  margin: 0;
  font-size: clamp(24px, 2.25vw, 34px);
  font-weight: 590;
  line-height: 1.09;
  letter-spacing: -.042em;
  text-wrap: balance;
}

.scenario-brief dl {
  display: grid;
  gap: 20px;
  margin: 52px 0 0;
}

.scenario-brief dl div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.scenario-brief dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scenario-brief dd {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.scenario-trace {
  background: #fbfcf9;
}

.scenario-section-title,
.scenario-artifact-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.scenario-section-title span,
.scenario-artifact-top span {
  color: var(--ink-soft);
  font-size: 10px;
}

.scenario-trace ol {
  position: relative;
  display: grid;
  gap: 26px;
  margin: 40px 0 28px;
  padding: 0;
  list-style: none;
}

.scenario-trace ol::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 11px;
  width: 1px;
  background: rgba(22, 211, 79, .48);
  content: '';
}

.scenario-trace li {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 580;
}

.scenario-trace li i,
.scenario-result-meta i {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.scenario-trace > small {
  display: block;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.scenario-artifact {
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.scenario-artifact h3 {
  max-width: 430px;
  margin-top: 36px;
}

.scenario-artifact > p {
  max-width: 48ch;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.56;
  text-wrap: pretty;
}

.scenario-result-meta {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.scenario-result-meta > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 650;
}

.scenario-result-meta small {
  color: var(--muted);
  font-size: 11px;
}

.preview-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: 28px;
  padding: 26px 0 0;
}

.preview-handoff strong {
  font-size: 17px;
  font-weight: 630;
}

.preview-handoff p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.capabilities-section {
  background: var(--paper);
}

.capability-list {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--ink);
}

.capability-list article {
  display: grid;
  grid-template-columns: 56px minmax(240px, .72fr) minmax(360px, 1fr) minmax(190px, .5fr);
  gap: 28px;
  align-items: start;
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--line-strong);
}

.capability-list article > span {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.capability-list h3 {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 590;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.capability-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.capability-list small {
  justify-self: end;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--green-dark);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .06em;
}

.steps-section {
  background: var(--milk);
}

.steps-heading {
  max-width: 940px;
}

.steps-heading .eyebrow {
  margin-bottom: 24px;
}

.steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.steps-list li {
  min-height: 330px;
  padding: 30px 36px 38px 0;
  border-bottom: 1px solid var(--line-strong);
}

.steps-list li + li {
  padding-left: 36px;
  border-left: 1px solid var(--line-strong);
}

.steps-list li > span {
  color: var(--green-dark);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.steps-list li > div {
  display: grid;
  align-content: end;
  min-height: 245px;
}

.steps-list h3 {
  margin: 0;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 580;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.steps-list p {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.control-section {
  background: var(--ink);
  color: var(--paper);
}

.control-grid {
  display: grid;
  grid-template-columns: minmax(380px, .86fr) minmax(520px, 1.14fr);
  gap: clamp(72px, 10vw, 150px);
  align-items: center;
}

.control-section .eyebrow {
  color: var(--green);
}

.control-copy > p:last-of-type {
  max-width: 590px;
  margin: 32px 0 0;
  color: #b8c1bb;
}

.control-principles {
  display: grid;
  gap: 0;
  margin: 56px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.control-principles div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.control-principles dt {
  font-size: 13px;
  font-weight: 650;
}

.control-principles dd {
  margin: 0;
  color: #aeb8b1;
  font-size: 13px;
  line-height: 1.5;
}

.decision-panel {
  padding: clamp(34px, 4vw, 52px);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .08);
}

.decision-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.decision-top span {
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .09em;
}

.decision-top small {
  padding: 7px 9px;
  border-radius: 7px;
  background: #efeafb;
  color: #503b9c;
  font-size: 10px;
  font-weight: 650;
}

.decision-panel h3 {
  max-width: 500px;
  margin: 38px 0 0;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 590;
  line-height: 1.05;
  letter-spacing: -.046em;
  text-wrap: balance;
}

.decision-panel dl {
  display: grid;
  margin: 44px 0 0;
  border-top: 1px solid var(--line);
}

.decision-panel dl div {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.decision-panel dt {
  color: var(--ink-soft);
  font-size: 11px;
}

.decision-panel dd {
  margin: 0;
  font-size: 13px;
  font-weight: 580;
}

.decision-preview {
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 3px solid var(--green);
  background: var(--green-soft);
}

.decision-preview strong {
  font-size: 13px;
}

.decision-preview p {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.decision-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.decision-actions button {
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #f4f6f2;
  color: #8b938d;
  font: inherit;
  font-size: 13px;
  font-weight: 620;
  cursor: not-allowed;
}

.work-reality {
  background: var(--paper);
}

.work-reality-grid {
  display: grid;
  grid-template-columns: minmax(350px, .76fr) minmax(0, 1.24fr);
  gap: clamp(72px, 11vw, 170px);
  align-items: center;
}

.work-reality-marker {
  position: relative;
  display: grid;
  min-height: 430px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--milk);
}

.work-reality-marker::before,
.work-reality-marker::after {
  position: absolute;
  background: var(--line-strong);
  content: '';
}

.work-reality-marker::before {
  width: 1px;
  height: 100%;
}

.work-reality-marker::after {
  width: 100%;
  height: 1px;
}

.work-reality-marker span {
  position: relative;
  z-index: 2;
  display: grid;
  width: 130px;
  height: 130px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-size: 34px;
  font-weight: 720;
  letter-spacing: -.07em;
  box-shadow: 0 0 0 18px var(--milk), 0 0 0 19px var(--line-strong);
}

.work-reality-marker i {
  position: absolute;
  z-index: 1;
  width: 290px;
  height: 290px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.work-reality-marker strong {
  position: absolute;
  right: 20px;
  bottom: 18px;
  padding: 8px 10px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 630;
}

.work-reality h2 {
  max-width: 820px;
}

.work-reality-grid > div:last-child > p:last-child {
  max-width: 650px;
  margin: 34px 0 0;
}

.faq-section {
  background: var(--milk);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(280px, .52fr) minmax(520px, 1fr);
  gap: clamp(70px, 11vw, 170px);
  align-items: start;
}

.faq-heading {
  position: sticky;
  top: calc(var(--header-height) + 48px);
}

.faq-heading h2 {
  max-width: 460px;
}

.faq-heading > p:last-child {
  max-width: 420px;
  margin: 26px 0 0;
}

.faq-list {
  border-top: 1px solid var(--ink);
}

.faq-list details {
  border-bottom: 1px solid var(--line-strong);
}

.faq-list summary {
  position: relative;
  min-height: 74px;
  padding: 24px 48px 24px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -.02em;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  top: 25px;
  right: 3px;
  color: var(--green-dark);
  content: '+';
  font-size: 22px;
  font-weight: 480;
  transition: transform 160ms cubic-bezier(.2, 0, 0, 1);
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list summary:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 4px;
}

.faq-list details p {
  max-width: 64ch;
  margin: -5px 0 0;
  padding: 0 48px 28px 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.58;
  text-wrap: pretty;
}

.final-section {
  padding: 0 var(--page-gutter) var(--page-gutter);
  background: var(--milk);
}

.final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: end;
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: clamp(70px, 9vw, 126px);
  border-radius: 22px;
  background: var(--ink);
  color: var(--paper);
}

.final-inner .eyebrow {
  color: var(--green);
}

.final-inner h2 {
  max-width: 900px;
}

.final-inner p:last-child {
  max-width: 660px;
  margin: 30px 0 0;
  color: #b8c1bb;
  font-size: 17px;
  line-height: 1.5;
}

.final-inner .button {
  min-width: 230px;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "links note"
    "brand brand"
    "year  year";
  gap: 34px 32px;
  align-items: center;
  padding: 72px var(--page-gutter) 56px;
  background: var(--milk);
}

.footer-brand {
  display: inline-flex;
  grid-area: brand;
  gap: clamp(10px, 1.6vw, 20px);
  align-items: flex-end;
  justify-self: start;
  max-width: 100%;
  line-height: 0;
}

.footer-brand b {
  color: var(--violet);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 720;
  line-height: .9;
  letter-spacing: -.045em;
  transform: translateY(3px);
}

/* max-width страхует нижнюю границу clamp: на 320px 300px знака съедали весь
   правый отступ и знак упирался в край экрана. */
.footer-brand img {
  width: clamp(240px, 44vw, 620px);
  max-width: 100%;
  height: auto;
}

.footer-links {
  grid-area: links;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  align-items: center;
}

/* 44px — минимальная тач-цель: ссылки футера набираются пальцем так же
   уверенно, как кнопки, а не только курсором. */
.footer-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-size: 14px;
  font-weight: 560;
  transition: color 150ms ease;
}

.footer-links a:hover {
  color: var(--green-dark);
}

.site-footer p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.footer-note {
  grid-area: note;
  justify-self: end;
  text-align: right;
}

.footer-year {
  grid-area: year;
}

.scenario-brief > .section-kicker,
.scenario-section-title > .section-kicker,
.scenario-artifact-top > .section-kicker {
  color: var(--ink-soft);
}

.button:active {
  transform: scale(.96);
}

@media (max-width: 1040px) {
  .section-heading-split,
  .preview-heading,
  .control-grid,
  .work-reality-grid,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .scenario-stage {
    grid-template-columns: minmax(210px, .7fr) minmax(250px, .86fr) minmax(310px, 1.15fr);
    overflow-x: auto;
  }

  .scenario-stage > section {
    min-width: 0;
    padding: 30px;
  }

  .capability-list article {
    grid-template-columns: 50px minmax(220px, .8fr) minmax(300px, 1.2fr);
  }

  .capability-list small {
    display: none;
  }

  .control-copy,
  .faq-heading {
    position: static;
  }

  .decision-panel {
    max-width: 760px;
  }

  .work-reality-marker {
    min-height: 340px;
  }

  .work-reality-grid > div:last-child {
    max-width: 800px;
  }
}

@media (max-width: 760px) {
  .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section-heading h2,
  .faq-heading h2,
  .final-inner h2,
  .work-reality h2,
  .control-section h2 {
    font-size: clamp(38px, 10.5vw, 52px);
  }

  .hero h1 {
    font-size: clamp(38px, 11.2vw, 50px);
  }

  .product-toolbar {
    height: 68px;
  }

  .product-title-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .product-title-group span {
    display: block;
    font-size: 10px;
  }

  .contrast-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    padding: 32px 0 36px;
  }

  .contrast-old,
  .contrast-new,
  .contrast-arrow {
    grid-column: 2;
  }

  .contrast-new {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }

  .contrast-arrow {
    display: none;
  }

  .scenario-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .scenario-tabs::-webkit-scrollbar {
    display: none;
  }

  .scenario-tab {
    flex: 0 0 auto;
    min-width: 210px;
  }

  .scenario-stage {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .scenario-stage > section {
    padding: 28px 24px;
  }

  .scenario-stage > section + section {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .scenario-artifact {
    grid-row: 1;
    min-height: 370px;
  }

  .scenario-brief {
    grid-row: 2;
  }

  .scenario-trace {
    grid-row: 3;
  }

  .scenario-result-meta {
    margin-top: 52px;
  }

  .preview-handoff {
    grid-template-columns: 1fr;
  }

  .preview-handoff .button {
    width: 100%;
  }

  .capability-list article {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    padding: 28px 0 32px;
  }

  .capability-list h3,
  .capability-list p {
    grid-column: 2;
  }

  .capability-list p {
    margin-top: 14px;
  }

  .steps-list {
    grid-template-columns: 1fr;
  }

  .steps-list li,
  .steps-list li + li {
    min-height: 0;
    padding: 26px 0 30px;
    border-left: 0;
  }

  .steps-list li > div {
    min-height: 0;
    margin-top: 54px;
  }

  .control-principles div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .decision-panel {
    padding: 28px 22px;
    border-radius: 16px;
  }

  .decision-top {
    align-items: flex-start;
  }

  .decision-top small {
    max-width: 120px;
    text-align: right;
  }

  .decision-panel dl div {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .work-reality-marker {
    min-height: 300px;
  }

  .faq-list summary {
    min-height: 64px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 17px;
  }

  .final-section {
    padding: 0;
  }

  .final-inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 56px var(--page-gutter);
    border-radius: 0;
  }

  .final-inner .button {
    width: 100%;
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "links"
      "note"
      "brand"
      "year";
    gap: 22px;
    padding-top: 48px;
    padding-bottom: 44px;
  }

  .footer-note {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .section-heading-split,
  .preview-heading,
  .control-grid,
  .work-reality-grid,
  .faq-grid {
    gap: 34px;
  }

  .scenario-tab {
    min-width: 190px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .scenario-brief h3,
  .scenario-artifact h3 {
    font-size: 26px;
  }

  .decision-panel h3 {
    font-size: 32px;
  }

  .decision-actions {
    grid-template-columns: 1fr;
  }

  .work-reality-marker span {
    width: 108px;
    height: 108px;
    font-size: 29px;
  }

  .work-reality-marker i {
    width: 238px;
    height: 238px;
  }
}

/* Prepared demo */

.demo-page {
  background: #eef3e9;
}

.demo-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 68px;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(245, 248, 239, .96);
  backdrop-filter: blur(16px);
}

.demo-header .brand {
  justify-self: start;
}

.demo-header-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}

.demo-back-link {
  justify-self: end;
  font-size: 13px;
  font-weight: 620;
}

.demo-main {
  padding: 46px var(--page-gutter) 60px;
}

.demo-boundary,
.demo-workbench,
.demo-dock {
  width: min(1480px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.demo-boundary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 54px;
  align-items: end;
  padding: 30px 0 42px;
}

.demo-boundary .eyebrow {
  margin-bottom: 17px;
}

.demo-boundary h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 570;
  line-height: 1.01;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.demo-boundary dl {
  display: grid;
  grid-template-columns: repeat(3, auto);
  margin: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.demo-boundary dl div {
  min-width: 150px;
  padding: 17px 20px;
}

.demo-boundary dl div + div {
  border-left: 1px solid var(--line-strong);
}

.demo-boundary dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.demo-boundary dd {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 620;
}

.demo-workbench {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(300px, .88fr) minmax(480px, 1.4fr);
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 30px 80px rgba(25, 42, 32, .12), 0 2px 8px rgba(25, 42, 32, .04);
}

.demo-workbench > * {
  min-width: 0;
}

.demo-workbench > * + * {
  border-left: 1px solid var(--line);
}

.demo-brief,
.demo-trace {
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3vw, 44px);
}

.demo-brief {
  background: #f8faf6;
}

.demo-trace {
  background: #fbfcf9;
}

.demo-pane-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-pane-heading span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--green-dark);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.demo-pane-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .09em;
}

.demo-brief h2,
.demo-trace h2 {
  margin: 34px 0 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 590;
  line-height: 1.12;
  letter-spacing: -.038em;
  text-wrap: balance;
}

.demo-brief dl {
  display: grid;
  margin: 42px 0 0;
  border-top: 1px solid var(--line);
}

.demo-brief dl div {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.demo-brief dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.demo-brief dd {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.demo-pane-note {
  margin: auto 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.48;
}

.demo-trace ol {
  position: relative;
  display: grid;
  gap: 32px;
  margin: 46px 0 36px;
  padding: 0;
  list-style: none;
}

.demo-trace ol::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 12px;
  width: 1px;
  background: rgba(22, 211, 79, .5);
  content: '';
}

.demo-trace li {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 13px;
}

.demo-trace li i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.demo-trace strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
}

.demo-trace li p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.48;
}

.demo-result {
  padding: clamp(28px, 3vw, 44px);
  background: #f1f5ed;
}

.demo-result-sheet {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: clamp(30px, 3.4vw, 50px);
  border-radius: 15px;
  background: var(--paper);
  box-shadow: 0 18px 46px rgba(25, 42, 32, .08), 0 0 0 1px rgba(16, 23, 19, .08);
}

.demo-result-heading {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.demo-result-heading p {
  margin: 0 0 7px;
  color: var(--green-dark);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .09em;
}

.demo-result-heading h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.048em;
  text-wrap: balance;
}

.demo-result-meta {
  margin: 20px 0 0 49px;
  color: var(--muted);
  font-size: 12px;
}

.demo-result-sheet > section,
.demo-result-columns {
  margin-left: 49px;
}

.demo-result-sheet > section {
  margin-top: 28px;
}

.demo-result-sheet h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 720;
}

.demo-result-sheet p,
.demo-result-sheet ol {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.52;
}

.demo-result-sheet ol {
  padding-left: 19px;
  columns: 2;
  column-gap: 34px;
}

.demo-result-sheet li {
  break-inside: avoid;
  margin-bottom: 4px;
}

.demo-result-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}

.demo-result-columns section {
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.demo-result-sheet .artifact-question {
  padding: 13px 15px;
}

.demo-result-status {
  display: grid;
  gap: 9px;
  margin: auto 0 0 49px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.demo-result-status span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 660;
}

.demo-result-status i {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  font-size: 11px;
  font-style: normal;
}

.demo-result-status p {
  font-size: 10px;
}

.demo-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  align-items: center;
  padding: 28px 0 0;
}

.demo-dock strong {
  font-size: 16px;
  font-weight: 640;
}

.demo-dock p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.demo-dock-actions {
  display: flex;
  gap: 10px;
}

.demo-dock-actions .button {
  min-height: 48px;
  font-size: 14px;
}

@media (max-width: 1100px) {
  .demo-boundary {
    grid-template-columns: 1fr;
  }

  .demo-boundary dl {
    justify-self: start;
  }

  .demo-workbench {
    grid-template-columns: minmax(240px, .8fr) minmax(280px, 1fr);
  }

  .demo-result {
    grid-column: 1 / -1;
    grid-row: 1;
    border-bottom: 1px solid var(--line);
    border-left: 0;
  }

  .demo-brief,
  .demo-trace {
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  .demo-header {
    grid-template-columns: 1fr auto;
    min-height: 64px;
  }

  .demo-header-label {
    display: none;
  }

  .demo-back-link {
    font-size: 12px;
  }

  .demo-main {
    padding-top: 24px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .demo-boundary {
    gap: 30px;
    padding-bottom: 30px;
  }

  .demo-boundary h1 {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  .demo-boundary dl {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .demo-boundary dl div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    gap: 20px;
    padding: 13px 0;
  }

  .demo-boundary dl div + div {
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }

  .demo-boundary dd {
    margin: 0;
    text-align: right;
  }

  .demo-workbench {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }

  .demo-result,
  .demo-brief,
  .demo-trace {
    grid-column: 1;
  }

  .demo-result {
    grid-row: 1;
    padding: 16px;
  }

  .demo-brief {
    grid-row: 2;
  }

  .demo-trace {
    grid-row: 3;
  }

  .demo-workbench > * + * {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .demo-result-sheet {
    padding: 28px 22px;
  }

  .demo-result-meta,
  .demo-result-sheet > section,
  .demo-result-columns,
  .demo-result-status {
    margin-left: 0;
  }

  .demo-result-sheet ol {
    columns: 1;
  }

  .demo-result-columns {
    grid-template-columns: 1fr;
  }

  .demo-result-status {
    margin-top: 32px;
  }

  .demo-dock {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .demo-dock-actions {
    display: grid;
  }

  .demo-dock-actions .button {
    width: 100%;
  }
}

/* Final editorial overrides must remain last in the stylesheet. */

.contrast-row {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 8vw, 130px);
}

.scenario-tab {
  justify-content: center;
}

.capability-list article {
  grid-template-columns: minmax(260px, .8fr) minmax(380px, 1.2fr);
  gap: clamp(48px, 8vw, 130px);
}

.control-section {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: #eef4e9;
  color: var(--ink);
}

.control-section .chapter-label {
  color: var(--green-dark);
}

.control-copy > p:last-of-type,
.control-principles dd {
  color: var(--ink-soft);
}

.control-principles,
.control-principles div {
  border-color: rgba(16, 23, 19, .2);
}

.decision-panel {
  padding-right: 0;
  padding-left: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.decision-top small {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #503b9c;
}

.decision-actions button {
  border-radius: 4px;
  background: rgba(255, 255, 255, .44);
}

.final-section {
  padding: clamp(90px, 11vw, 150px) var(--page-gutter) clamp(70px, 8vw, 110px);
  background: var(--paper);
}

.final-inner {
  width: min(1280px, 100%);
  padding: clamp(50px, 6vw, 76px) 0 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.final-inner .chapter-label {
  color: var(--green-dark);
}

.final-inner p:last-child {
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .contrast-row,
  .capability-list article {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contrast-old,
  .contrast-new,
  .capability-list h3,
  .capability-list p {
    grid-column: 1;
  }

  .final-section {
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
  }

  .final-inner {
    padding-right: 0;
    padding-left: 0;
  }
}

/* ==========================================================================
   НАВЫКИ АГЕНТА

   Продающий блок сразу после первого экрана. До него страница объясняла,
   ЧТО такое агент, но не показывала, за какую конкретную работу он берётся.
   Навык — единица продажи: понятная работа с понятным результатом.

   ЧТО ИСПРАВЛЕНО ПОСЛЕ РЕВЬЮ

   1. Поверхность главы. Первая версия ставила шесть отдельных карточек
      прямо на фон страницы, а бренд-система прямо запрещает такой
      «карточный суп»: у главы должна быть одна поверхность, и внутри неё
      только осмысленные объекты. Все соседние главы её имеют
      (.memory-chapter, .scenario-stage, .faq-grid), навыки не имели.
   2. Мёртвый фон. `.skills-section { background: var(--paper) }` не
      отрисовывался никогда: гардрейл editorial.css делает все секции
      прозрачными селектором тяжелее нашего, и это зафиксировано тестом.
      Убрано, подложку даёт поверхность главы.
   3. Радиусы вне системы. Было 28px и 14px константой, ни одного из
      четырёх допустимых шагов. Взяты токены --card-radius и
      --inset-radius, у которых есть и мобильная ступень.
   4. Палитра. --green-soft #e9f8e7 не входит в активный набор бренда;
      для этой роли есть --card-mint #e2f6e7, он и взят.
   5. Кегль главы. Было clamp(32px, 3.6vw, 50px) — на 1280 это 46px против
      64–70 у соседних глав, то есть блок читался как подраздел. Причём
      средний член был инертен: до 889px заголовок вообще не менялся.
      Взята шкала главы «Что помнит» вместе с её мобильной ступенью.
   6. Сетка. auto-fit при шести карточках давал на 1280 и шире четыре
      колонки, то есть ряд 4 + 2 с двумя пустыми ячейками. Колонки заданы
      явно: три, две, одна. Порог одной колонки опущен с 720 до 640 —
      на 700px две карточки по 300px помещаются свободно.
   7. Нетекстовый контраст. Рамка состояния давала 1.37:1 при пороге 3:1,
      заливка чипа 1.07:1 к карточке — то есть форма не читалась вовсе.
      Состояние переписано текстовой строкой с подписью «Состояние:»,
      которую читает и скринридер, а не цветным чипом.
   ========================================================================== */

/* Поверхность главы полупрозрачная. Непрозрачная заливка глушила сквозной
   градиент страницы — ровно то, ради чего написан авторитетный гардрейл
   в editorial.css, где все поверхности глав идут с альфой. Значение взято
   у .memory-chapter, чтобы главы читались одним материалом. */
.skills-chapter {
  padding: clamp(32px, 4.5vw, 64px);
  border-radius: var(--card-radius);
  background: rgb(226 246 231 / .58);
}

.skills-heading {
  max-width: 860px;
  margin: 0 0 clamp(32px, 3.5vw, 52px);
}

/* Шкала главы «Что помнит», числа взяты буквально: editorial.css:657
   даёт clamp(40px, 4.6vw, 64px), мобильная ступень editorial.css:1438 —
   clamp(42px, 12vw, 54px). Прошлая версия объявляла ту же шкалу, но
   ставила свои значения, и глава оставалась самой мелкой на странице. */
.skills-heading h2 {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.skills-heading > p:last-child {
  max-width: 720px;
  margin: 26px 0 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  padding: 28px 26px 24px;
  border-radius: var(--inset-radius);
  background: var(--card-paper);
}

.skill-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--card-mint);
  color: var(--green-dark);
}

.skill-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skill-card h3 {
  margin: 0;
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -.024em;
}

.skill-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

/* Состояние — строка текста, а не чип. Цветной чип нёс форму, которая
   не читалась (1.07:1 к карточке), и слово приходило к скринридеру без
   указания, что это статус. Подпись решает обе задачи сразу. */
.skill-card .skill-state {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -.01em;
}

/* Опубликованный навык отмечен цветом бренда. */
.skill-card .skill-state-live {
  color: var(--green-dark);
}

.skill-state-label {
  color: var(--ink-soft);
  font-weight: 400;
}

.skills-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(28px, 3vw, 44px);
}

.skills-footer p {
  max-width: 620px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.012em;
}

/* Граница публичного демо — тем же приёмом, что у соседних глав
   (.memory-boundary, .call-story-boundary). Блок называет внешние сервисы
   и стоит второй секцией, за две сотни строк до раздела про ограничения
   демо, поэтому оговорка обязана быть рядом. */
/* --ink-muted в :root не объявлен (проверено грепом), поэтому оговорка
   печаталась полным --ink вместо приглушённого. Берём существующий токен —
   но не --muted #77817b: на 13px он даёт 3.75:1 при требуемых 4.5.
   --ink-soft #4d5751 — 7.51:1 на бумаге и 5.78:1 на самом зелёном участке
   градиента, и это тот же второй тон, которым набран весь вторичный текст. */
.skills-boundary {
  max-width: 720px;
  margin: 22px 0 0 auto;
  color: var(--ink-soft);
  font-size: 13px;
}

@media (max-width: 1080px) {
  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .skills-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .skills-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .skills-footer .button {
    justify-content: center;
  }
}

/* Восстановление кнопки идёт по полосе 700px, а не 640: именно на 700
   app.css:1029 снимает рамку и опускает высоту до 40px, и в промежутке
   641-700 кнопка оставалась голым текстом ровно того вида, который
   прошлый комментарий объявлял исправленным.
   Цвет рамки --line-strong давал 1.30:1 к поверхности главы — хуже, чем
   1.37:1, которые двумя абзацами выше названы нечитаемыми. Берём тот же
   тёмно-зелёный, что у ведущей карточки: 6.25:1. */
@media (max-width: 700px) {
  .skills-footer .button {
    min-height: 44px;
    border-color: var(--green-dark);
  }
}

@media (max-width: 760px) {
  .skills-heading h2 {
    font-size: clamp(42px, 12vw, 54px);
  }
}