/* Арка — лендинг для Яндекс Директа (решение владельца 23.10, ТЗ «Лендинг Арки для Директа», брендбук v1, макет
   arka_frontend_handoff; исходник — архив arka-direct-handoff-2026-10-23, landing/index.html). Родственник /t1–/t3:
   те же блоки и токены. Подключение: tokens.css, fonts.css, direct.css — site.css не подключается, поэтому имена
   классов короткие. Тема — по системе или <html data-theme> (tokens.css). Цвета — только токены (короткие имена
   ниже — их псевдонимы); медь — только замковый камень знака и арки. Телефон — основа, десктоп — от 900 px.
   Файл отдаётся странице: в комментариях — ни названия категории продукта, ни стоп-слов Platega (тест direct.test.ts). */

:root {
  --bg: var(--color-bg); --surface: var(--color-surface); --text: var(--color-text); --muted: var(--color-text-secondary);
  --line: var(--color-line); --line-control: var(--color-line-control);
  --patina: var(--color-bg-section-dark); --on-patina: var(--color-text-on-section-dark); --on-patina-muted: var(--color-text-secondary-on-section-dark);
  --works: var(--color-status-works); --key: var(--color-key);
  --btn: var(--color-action-primary-bg); --btn-hover: var(--color-action-primary-bg-hover); --btn-text: var(--color-action-primary-text);
  --btn2: var(--color-action-secondary-text); --focus: var(--color-focus);
  --lit: linear-gradient(180deg, var(--color-light-top) 0%, var(--color-light-bottom) 100%); --on-lit: var(--color-text-on-lit);
  --sans: var(--font-sans); --mono: var(--font-mono); --price: "Sofia Sans Semi Condensed", var(--font-sans);
  --gutter: 22px;
}

.d *, .d *::before, .d *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.d { margin: 0; background: var(--bg); color: var(--text); font: 400 18px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* :where — нулевая специфичность: сброс не перебивает отступы и цвета классов (.hero__lead, .btn). */
:where(.d) a { color: inherit; }
.d a:focus-visible, .d button:focus-visible, .d summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.d svg { display: block; }
:where(.d) :is(h1, h2, h3, p) { margin: 0; }
.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right)); }
.mono { font: 500 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.icon { width: 24px; height: 24px; flex: none; color: currentColor; }

/* ---------- шапка ---------- */
.top { position: relative; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 68px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; }
.brand__mark { width: 27px; height: 32px; }
.brand__mark .wall { fill: var(--text); }
.brand__mark .key { fill: var(--key); }
.brand__name { font-size: 27px; line-height: 1; font-weight: 700; letter-spacing: -.01em; }
.brand__tag { border-left: 1px solid var(--line); padding-left: 9px; font-size: 12px; line-height: 1.2; color: var(--muted); white-space: normal; max-width: 96px; }
.menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 17px; }
.menu .nav { position: absolute; top: 60px; left: var(--gutter); right: var(--gutter); padding: 8px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.nav--wide { display: none; }

/* ---------- кнопки ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 58px; padding: 13px 20px; border: 1px solid transparent; border-radius: 15px; background: var(--btn); color: var(--btn-text); font: 600 18px/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.d .btn { color: var(--btn-text); }
.btn:hover { background: var(--btn-hover); }
.btn__arrow { margin-left: auto; font-size: 23px; font-weight: 400; line-height: 1; }
.d .btn--outline { min-height: 50px; background: transparent; color: var(--btn2); border-color: var(--btn2); font-size: 17px; }
.btn--outline:hover { background: var(--surface); }

/* ---------- первый экран ---------- */
.hero { padding: 6px 0 0; }
.hero h1 { font-size: 40px; line-height: 1.05; letter-spacing: -.02em; font-weight: 700; margin: 0 0 16px; max-width: 360px; }
.hero__lead { font-size: 18px; line-height: 1.43; margin: 0 0 14px; max-width: 360px; }
.hero__offer { font-size: 18px; font-weight: 600; margin: 0 0 18px; }
.hero__actions { display: grid; gap: 10px; }
.art { width: calc(100% + 48px); margin: 18px -24px 0; }
.art svg { width: 100%; height: auto; }
.art .arch-wall { fill: var(--text); }
.art .arch-key { fill: var(--key); }

/* ---------- разделы ---------- */
.sec { padding: 44px 0; }
.sec__label { margin: 0 0 14px; }
.sec h2 { font-size: 30px; line-height: 1.11; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.sec__lead { font-size: 17px; color: var(--muted); margin: 0 0 22px; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; counter-increment: step; }
.step::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line-control); border-radius: 50%; font: 500 16px/1 var(--mono); }
.step:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 46px; height: 18px; border-left: 1px solid var(--line); }
.step h3 { font-size: 19px; line-height: 1.2; font-weight: 600; padding-top: 9px; }
.step p { font-size: 17px; color: var(--muted); margin-top: 4px; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { padding: 17px 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.card__ico { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 0 16px; background: var(--bg); border-radius: 10px; }
.card h3 { font-size: 17px; line-height: 1.15; font-weight: 600; margin: 0 0 8px; }
.card p { font-size: 14px; line-height: 1.4; color: var(--muted); }

.devices { display: grid; gap: 10px; }
.device { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 14px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.device .icon { width: 32px; height: 32px; }
.device strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.25; }
.device span { display: block; font-size: 14px; color: var(--muted); }
.device__ok { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--works); flex: none; }
.direct { margin-top: 12px; padding: 24px 22px; border-radius: 20px; background: var(--patina); color: var(--on-patina); }
.direct__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.direct__head .icon { width: 28px; height: 28px; }
.direct h3 { font-size: 21px; line-height: 1.2; font-weight: 700; }
.direct p { font-size: 17px; color: var(--on-patina); }
.direct .direct__note { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--on-patina-muted); }

.plans { display: grid; gap: 12px; }
.plan { display: grid; gap: 10px; align-content: start; padding: 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.plan--trial { border: 2px solid var(--works); }
.plan h3 { font-size: 19px; font-weight: 700; }
.plan__price { font: 700 56px/1 var(--price); letter-spacing: -.01em; white-space: nowrap; }
.plan__price small { font: 400 17px/1.2 var(--sans); color: var(--muted); letter-spacing: 0; }
.plan__desc { font-size: 17px; color: var(--muted); }
.plan .btn { margin-top: 6px; }
.terms { list-style: none; margin: 0; padding: 0; }
.terms li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 17px; }
.terms li:first-child { border-top: 0; }
.terms__price { font: 500 17px/1.3 var(--mono); text-align: right; white-space: nowrap; }
.terms__price b { font-weight: 500; color: var(--text); }
.terms__pm { color: var(--muted); }
.plans__pay { font-size: 17px; color: var(--muted); margin-top: 4px; }

.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; padding: 14px 16px; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { font-size: 17px; color: var(--muted); padding: 0 16px 16px; margin-top: -4px; }

/* Освещённая карточка — Свет на Известняке, светлая в обеих темах: цвета — «на свету» (lit). */
.family { margin: 8px 0 0; padding: 32px 23px 28px; border-radius: 24px 24px 0 0; background: var(--lit); color: var(--on-lit); }
.family .mono { color: var(--on-lit); margin-bottom: 12px; }
.family h2 { font-size: 28px; line-height: 1.1; letter-spacing: -.01em; font-weight: 700; margin: 0 0 20px; }
.d .family .btn { background: var(--color-lit-action-primary-bg); color: var(--color-lit-action-primary-text); }
.d .family .btn:hover { background: var(--color-lit-action-primary-bg-hover); }
.d .family .btn:focus-visible { outline-color: var(--on-lit); }

.foot { background: var(--patina); color: var(--on-patina); font-size: 14px; padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); }
.foot__brand { font-size: 20px; font-weight: 700; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 10px 0 6px; padding: 0; list-style: none; }
.foot__links a, .foot__links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; color: var(--on-patina); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.d .foot__links a:focus-visible, .d .foot__links button:focus-visible { outline-color: var(--on-patina); }
.foot__links button[hidden] { display: none; }
.foot__copy { color: var(--on-patina-muted); }

/* ---------- уведомление о cookies: внизу, не выше главной кнопки первого экрана; показывает d.js ---------- */
.cookies { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 12px max(14px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); background: var(--surface); border-top: 1px solid var(--line); }
.cookies[hidden] { display: none; }
.cookies__in { max-width: 560px; margin: 0 auto; }
.cookies p { font-size: 14px; line-height: 1.4; margin: 0 0 10px; }
.cookies p a { text-underline-offset: 2px; }
.cookies__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Обе кнопки одного веса: «Принять» не ярче отказа. */
.cookies button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-control); border-radius: 12px; background: transparent; color: var(--text); font: 600 16px/1.2 var(--sans); cursor: pointer; }
.cookies button:hover { background: var(--bg); }

/* ---------- десктоп: 1440, сетка до 1280 ---------- */
@media (min-width: 900px) {
  :root { --gutter: 40px; }
  .wrap { max-width: 1360px; padding: 0 40px; }
  .top .wrap { height: 88px; }
  .menu { display: none; }
  .nav--wide { display: flex; gap: 32px; }
  .nav--wide a { font-size: 17px; }
  .nav--wide a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .brand__tag { max-width: none; font-size: 14px; }

  .hero { padding: 24px 0 0; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
  .hero h1 { font-size: 68px; line-height: 1.04; max-width: 640px; margin-bottom: 24px; }
  .hero__lead { font-size: 20px; max-width: 560px; margin-bottom: 16px; }
  .hero__offer { font-size: 20px; margin-bottom: 26px; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero__actions .btn { width: auto; min-width: 280px; }
  .hero__actions .btn--outline { min-height: 58px; min-width: 0; padding: 13px 26px; }
  .art { width: 100%; margin: 0; align-self: end; }

  .sec { padding: 88px 0 0; }
  .sec h2 { font-size: 40px; line-height: 1.1; }
  .sec__lead { font-size: 18px; max-width: 640px; margin-bottom: 32px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .step { grid-template-columns: 1fr; gap: 16px; }
  .step:not(:last-child)::after { left: 54px; top: 21px; height: 0; width: calc(100% - 54px); border-left: 0; border-top: 1px solid var(--line); }
  .step h3 { padding-top: 0; font-size: 21px; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .card { padding: 24px 22px; }
  .card h3 { font-size: 20px; }
  .card p { font-size: 17px; line-height: 1.45; }
  .devices { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .direct { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px 48px; margin-top: 16px; padding: 32px 36px; }
  .direct__head { grid-row: 1 / 3; align-items: flex-start; margin: 0; }
  .direct h3 { font-size: 28px; line-height: 1.15; }
  .direct .direct__note { margin-top: 0; }
  .plans { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; max-width: 1040px; }
  .plan { padding: 28px; }
  .plans__pay { grid-column: 1 / -1; }
  .faq { max-width: 840px; }
  .family { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin: 88px 0 0; padding: 48px 56px; border-radius: 28px 28px 0 0; }
  .family h2 { font-size: 40px; max-width: 640px; margin: 0; }
  .d .family .btn { width: auto; min-width: 300px; flex: none; }
  .foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
  .foot__links { margin: 0; }
  .foot__copy { margin-left: auto; }
  .cookies { left: auto; right: 24px; bottom: 24px; width: 440px; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }