/* TENVO — публичные страницы: база, шапка, первый экран, короткие секции.
   Все значения — из css/tokens.css. Теней нет вовсе; скругления только у меток и чипов. */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.55;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; hyphens: none; }
h1 { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

mark { background: var(--accent-soft); color: var(--ink); padding: 0 var(--s1); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--sheet); padding: var(--s3) var(--s4); z-index: 40; }
.skip:focus { left: 0; }

[hidden] { display: none !important; }

/* ── шапка ──────────────────────────────────────────────────────────── */
.top { background: var(--paper); border-bottom: var(--line) solid var(--rule); }
.top-in {
  max-width: 1320px; margin: 0 auto; padding: var(--s4) var(--gutter);
  display: flex; align-items: center; gap: var(--s5);
}
.brand { display: flex; align-items: center; }
.brand .logo { display: block; height: 28px; width: auto; }
.top-nav { display: flex; gap: var(--s5); margin-left: auto; font-size: var(--t-small); }
.top-nav a { color: var(--ink); text-decoration: none; border-bottom: var(--line) solid transparent; padding-bottom: 2px; }
.top-nav a:hover { border-bottom-color: var(--ink); }
.top-nav a[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 600; }
.top-cta { flex: none; }

/* ── кнопки ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s5);
  font: 500 var(--t-body)/1 var(--text);
  border: var(--line) solid var(--ink); border-radius: var(--r-none);
  background: var(--sheet); color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background .15s ease-out, color .15s ease-out;
}
.btn:hover { background: var(--sheet-alt); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--sheet-alt); color: var(--ink-soft); border-color: var(--rule); cursor: not-allowed; }
.btn-sm { min-height: 44px; padding: 0 var(--s4); font-size: var(--t-small); border-color: var(--rule-strong); }

/* ── первый экран главной ───────────────────────────────────────────── */
.hero {
  max-width: 1320px; margin: 0 auto; padding: var(--s7) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0;
}
.hero h1 { max-width: 20ch; }
.hero-lead { margin-top: var(--s4); max-width: 54ch; color: var(--ink-soft); hyphens: none; }

.pick {
  margin-top: var(--s6);
  background: var(--sheet);
  border: var(--line) solid var(--rule-strong); border-bottom: 0;
  padding: var(--s4) var(--s5) var(--s5);
}
.pick-label { display: block; font-weight: 600; font-size: var(--t-small); margin-bottom: var(--s2); }
.pick-row { display: flex; gap: var(--s2); }
.pick-row input {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 var(--s4);
  font: 400 var(--t-body)/1 var(--text); hyphens: none;
  border: var(--line) solid var(--ink); border-radius: var(--r-none);
  background: var(--sheet); color: var(--ink);
}
.pick-row input::placeholder { color: var(--ink-soft); }
.pick-free { margin-top: var(--s3); font-size: var(--t-small); color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.chip {
  min-height: 44px; padding: 0 var(--s4);
  font: 500 var(--t-small)/1 var(--text);
  background: transparent; color: var(--ink);
  border: var(--line) solid var(--rule-strong); border-radius: var(--r-pill); cursor: pointer;
  transition: background .15s ease-out, border-color .15s ease-out;
}
.chip:hover { border-color: var(--ink); background: var(--sheet-alt); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }

@media (min-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: var(--s7); }
  .hero h1 { grid-column: 1; }
  .hero-lead { grid-column: 2; align-self: end; margin-top: 0; }
  .pick { grid-column: 1 / -1; }
  .hero .sheet { grid-column: 1 / -1; }
}

/* ── секции ─────────────────────────────────────────────────────────── */
.sec { max-width: 1320px; margin: 0 auto; padding: var(--s8) var(--gutter) 0; }
.sec p, .sec li { max-width: var(--measure); }
.sec-two { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .sec-two { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--s7); align-items: start; } }
.sec-lead { margin-top: var(--s4); color: var(--ink-soft); }

.steps { margin: var(--s5) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: flex; gap: var(--s4); padding: var(--s4) 0; border-top: var(--line) solid var(--rule); }
.steps li::before {
  content: counter(step); flex: none; width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font: 600 var(--t-small)/1 var(--display);
  background: var(--sheet-alt); color: var(--ink);
}

.letter { margin: 0; background: var(--sheet); border: var(--line) solid var(--rule-strong); padding: var(--s5); }
.letter figcaption { font-size: var(--t-small); color: var(--ink-soft); }
.letter-subj { margin-top: var(--s2); font-family: var(--display); font-weight: 600; font-size: var(--t-h3); }
.letter-list { margin: var(--s4) 0 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.letter-list li { padding: var(--s3) 0; border-top: var(--line) solid var(--rule); }
.letter-due { display: block; font-size: var(--t-small); color: var(--due); }

.limits { margin: var(--s5) 0 0; padding: 0; list-style: none; }
.limits li { padding: var(--s3) 0; border-top: var(--line) solid var(--rule); }

.more { margin-top: var(--s5); border-top: var(--line) solid var(--rule); }
.more summary { padding: var(--s4) 0; cursor: pointer; font-weight: 600; }
.more-body > p { margin-bottom: var(--s3); color: var(--ink-soft); }

/* ── блок цены ──────────────────────────────────────────────────────── */
.price { max-width: 1320px; margin: var(--s8) auto 0; padding: 0 var(--gutter); }
.price > div {
  background: var(--ink-surface); color: var(--ink-surface-text);
  padding: var(--s6) var(--s5);
}
.price h2 { color: var(--sheet); max-width: 22ch; }
.price p { margin-top: var(--s4); max-width: var(--measure); }
.price .btn { margin-top: var(--s5); }
.price-note { font-size: var(--t-small); }
.price a { color: var(--sheet); }

/* ── подвал ─────────────────────────────────────────────────────────── */
.foot { margin-top: var(--s8); border-top: var(--line) solid var(--rule); }
.foot-in { max-width: 1320px; margin: 0 auto; padding: var(--s6) var(--gutter); display: grid; gap: var(--s3); }
.foot-in p { font-size: var(--t-small); color: var(--ink-soft); max-width: var(--measure); }
.foot-in .logo { height: 24px; width: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}