/* ==========================================================================
   NUVORA V2 — Layout «Сигнал» (base + chrome + page layout)
   Tokens: css/tokens.css · Components: css/components.css
   Source of truth: docs/ui/DESIGN.md · Concept 3 «Сигнал» (HUMAN DECISION 2026-09-14)
   ========================================================================== */

/* ---------- Reset-ish / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--navy);
  background: var(--canvas);
  font-variation-settings: 'wdth' 100;
}
h1, h2, h3 { line-height: 1.1; margin: 0 0 var(--sp-4); font-weight: 750; }
h1 {
  font-size: var(--fs-display);
  font-variation-settings: 'wdth' 125;
  letter-spacing: -0.01em;
  line-height: 1.0;
  max-width: 14ch;
}
h2 {
  font-size: var(--fs-h2);
  font-variation-settings: 'wdth' 120;
  max-width: 22ch;
}
h3 { font-size: var(--fs-h3); font-weight: 650; }
p { margin: 0 0 var(--sp-4); max-width: 65ch; }
a { color: var(--navy); }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
li { list-style: none; }

/* Focus: 2px, offset 3px (DESIGN.md §3). Signal ring only on navy contexts. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.chrome :focus-visible, .footer :focus-visible, .mobile-menu :focus-visible {
  outline-color: var(--signal);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  background: var(--navy);
  color: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  z-index: 200;
  transition: top 150ms var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); color: var(--surface); }

/* ==========================================================================
   CHROME — rail (desktop) / topbar (mobile)
   ========================================================================== */
.chrome {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--tint);
}
.chrome-inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--surface);
  font-weight: 800;
  font-variation-settings: 'wdth' 125;
  letter-spacing: .04em;
  min-width: 0;
}
.brand-mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
}
/* Захист від overflow для довгих назв клієнтів (cramped topbar; короткі назви незмінні) */
.brand-word {
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38vw;
}

.nav { display: none; }

/* Menu toggle */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 0;
  color: var(--surface);
  font: inherit;
  font-size: .9375rem;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  padding: 0 var(--sp-2);
  flex: none;
}
/* Вузькі екрани: компактний topbar, CTA-C в один рядок, іконка меню без підпису */
@media (max-width: 699px) {
  .cta-c { white-space: nowrap; padding: 0 var(--sp-3); font-size: .875rem; }
  .chrome-inner { gap: var(--sp-2); padding: 0 var(--sp-3); }
}
@media (max-width: 479px) {
  .menu-toggle-label { display: none; }
  .brand-word { font-size: .95rem; }
}
.menu-toggle-box { display: inline-flex; flex-direction: column; gap: 5px; }
.menu-toggle-box span {
  display: block; width: 20px; height: 2px;
  background: var(--signal);
  transition: transform 200ms var(--ease-out);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-box span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-box span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile menu (IS-01) */
.mobile-menu {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: var(--navy);
  z-index: 90;
  padding: var(--sp-8) var(--sp-6);
}
.mobile-menu ul { display: grid; gap: var(--sp-2); }
.mobile-menu a {
  display: block;
  color: var(--surface);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 115;
  padding: var(--sp-3) 0;
  min-height: 44px;
}
.mobile-menu a:hover { color: var(--signal); }
.mobile-menu-cta { color: var(--signal) !important; margin-top: var(--sp-4); }

/* ==========================================================================
   CANVAS — контент
   ========================================================================== */
.canvas { display: block; }

.section {
  padding: var(--sp-16) var(--sp-4);
  max-width: var(--content-max);
  margin: 0 auto;
}
.section + .section { border-top: 1px solid var(--hairline); }

/* ---------- Hero (Категорія — перший змістовий елемент, BAC-01) ---------- */
.hero {
  padding: var(--sp-16) var(--sp-4) var(--sp-24);
  max-width: var(--content-max);
  margin: 0 auto;
}
.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--ink-2);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin: var(--sp-8) 0 var(--sp-12);
}
.cta-expectation {
  font-size: var(--fs-meta);
  color: var(--muted);
  max-width: 34ch;
  margin: 0;
}
.hero-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-6);
}
.hero-facts dt {
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-bottom: var(--sp-1);
}
.hero-facts dd {
  font-weight: 650;
  font-variation-settings: 'wdth' 105;
}

/* ---------- Services layout (CP-3) ---------- */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-6);
}
.services-note { font-size: var(--fs-meta); color: var(--muted); }

/* ---------- Process layout (R-4) ---------- */
.process-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  counter-reset: step;
  margin: var(--sp-8) 0 var(--sp-6);
}
.process-note { font-size: var(--fs-meta); color: var(--muted); }

/* ---------- FAQ layout ---------- */
.faq-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-8); max-width: 62ch; }

/* ---------- Contact layout (CP-4) ---------- */
.section-contact { padding-bottom: var(--sp-24); }
.contact-sub { color: var(--muted); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.contact-alt {
  border-top: 2px solid var(--navy);
  padding-top: var(--sp-4);
  align-self: start;
}
.alt-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  min-height: 44px;
}
.alt-icon {
  width: 10px; height: 10px;
  background: var(--signal);
  border: 1.5px solid var(--navy);
  flex: none;
}
.alt-link:hover .alt-icon { background: var(--navy); }
.alt-note { font-size: .8125rem; color: var(--muted); margin-top: var(--sp-4); }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: var(--tint); }
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-4);
  display: grid;
  gap: var(--sp-6);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--surface);
  font-weight: 800;
  font-variation-settings: 'wdth' 125;
  letter-spacing: .04em;
  margin: 0;
}
.footer nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.footer nav a {
  color: var(--tint);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer nav a:hover { color: var(--signal); }
.footer-copy { font-size: var(--fs-meta); margin: 0; }
.footer a:focus-visible { outline-color: var(--signal); }

/* ==========================================================================
   REVEAL (optional, ≤400ms, static-first — DESIGN.md §9)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   BREAKPOINTS — mobile-first вгору (DESIGN.md §4/§8)
   ========================================================================== */
@media (min-width: 700px) {
  .hero-facts { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .process-list { grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-6); }
  .section { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .hero { padding-left: var(--sp-8); padding-right: var(--sp-8); }
}

@media (min-width: 1180px) {
  /* Rail layout: sticky navy rail left, canvas right (Concept 3 core device) */
  .chrome {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--rail-w);
  }
  .chrome-inner {
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-8);
    padding: var(--sp-8) var(--sp-6);
  }
  .nav { display: block; margin-top: var(--sp-8); }
  .nav ul { display: grid; gap: var(--sp-1); }
  .nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--tint);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: var(--sp-2) 0;
    min-height: 44px;
    transition: color 150ms var(--ease-out);
  }
  .nav a:hover { color: var(--surface); }
  .nav a[aria-current="true"] { color: var(--surface); }
  .spy-dot {
    width: 10px; height: 10px;
    border: 1.5px solid var(--tint);
    flex: none;
    transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
  }
  .nav a[aria-current="true"] .spy-dot {
    background: var(--signal);
    border-color: var(--signal);
  }
  .cta-c { margin-left: 0; margin-top: auto; }
  .menu-toggle, .mobile-menu, .menu-toggle-label { display: none; }

  .canvas, .footer { margin-left: var(--rail-w); }
  .hero { padding: var(--sp-24) var(--sp-12) var(--sp-32); }
  .section { padding: var(--sp-24) var(--sp-12); }
  .contact-grid { grid-template-columns: 1.6fr 1fr; gap: var(--sp-16); }
  .process-list { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   REDUCED MOTION — motion off (ADOPT, DESIGN.md §9)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   WOW-ІТЕРАЦІЯ 1 (2026-09-15) — характер «Сигналу»
   Обмеження не змінено: palette/tokens з tokens.css, motion 150–250ms feedback,
   decorative-елементи aria-hidden, static-first не порушено
   ========================================================================== */

/* --- Сигнальна стрічка послуг (горизонтальна енергія після hero) --- */
.ticker {
  background: var(--navy);
  overflow: hidden;
  padding: var(--sp-3) 0;
  border-top: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: max-content;
  padding-right: var(--sp-8);
  animation: ticker-scroll 26s linear infinite;
}
.ticker-track span {
  color: var(--surface);
  font-weight: 750;
  font-variation-settings: 'wdth' 118;
  font-size: 1.05rem;
  white-space: nowrap;
  letter-spacing: .02em;
}
.ticker-track i {
  width: 9px; height: 9px;
  background: var(--signal);
  flex: none;
  transform: rotate(45deg);
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; row-gap: var(--sp-3); }
}

/* --- Привид-бренд у hero (архітектурна деталь, desktop only) --- */
.hero { position: relative; }
.hero-ghost {
  display: none;
  position: absolute;
  right: var(--sp-12);
  bottom: -0.32em;
  font-weight: 800;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(7rem, 15vw, 13rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--navy);
  opacity: .08;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 1180px) {
  .hero { overflow: clip; }
  .hero-ghost { display: block; }
}

/* --- Індекси секцій (архівна нумерація, контраст ширин Archivo) --- */
.marker-index {
  font-weight: 700;
  font-variation-settings: 'wdth' 78;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 2.2ch;
}
.section-marker { font-variation-settings: 'wdth' 90; }

/* --- Прогрес-сигнал у rail (орієнтація; прямий, без залежності від анімацій) --- */
.rail-progress {
  display: none;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(255, 213, 0, .14);
}
.rail-progress-fill {
  display: block;
  width: 100%; height: 100%;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: top center;
}
@media (min-width: 1180px) {
  .rail-progress { display: block; }
}

/* --- Картки послуг: офсетна подвійна тінь «друк» --- */
.service-card {
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.service-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 0 var(--navy), 9px 9px 0 0 var(--signal);
}

/* --- CTA: заливка знизу вгору (navy), у rail-CTA — сигнал зліва --- */
.cta { position: relative; z-index: 0; }
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 200ms var(--ease-out);
}
.cta-p::after, .cta-f::after {
  background: var(--navy);
  transform: scaleY(0);
  transform-origin: bottom center;
}
.cta-p:hover::after, .cta-f:hover::after { transform: scaleY(1); }
.cta-p:hover, .cta-f:hover { color: var(--signal); background: var(--signal); }
.cta-c::after {
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
}
.cta-c:hover::after { transform: scaleX(1); }
.cta-c:hover { color: var(--navy); background: transparent; }

/* --- Процес: hover-інверсія номера + сигнальний верхній край --- */
.process-list li { transition: border-top-color 180ms var(--ease-out); }
.process-list li:hover { border-top-color: var(--signal); }
.step-num { transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
.process-list li:hover .step-num { background: var(--navy); color: var(--signal); }

/* --- Архів-статус у блоці робіт --- */
.archive-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--muted);
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--hairline);
}
.archive-meta::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--signal);
  border: 1.5px solid var(--navy);
  flex: none;
}

/* ==========================================================================
   WOW-ІТЕРАЦІЯ 2 (2026-09-15) — гібрид: тепло в hero (C), специфікація в
   процесі (B), editorial-правила в заголовках (A)
   ========================================================================== */

/* --- Hero: тег-стікер + сигнальне підсвічування слова + бейдж ціни --- */
.hero-tag {
  display: inline-block;
  background: var(--navy);
  color: var(--signal);
  font-weight: 700;
  font-size: .875rem;
  padding: 6px 14px;
  font-variation-settings: 'wdth' 100;
  transform: rotate(-1.2deg);
  margin-bottom: var(--sp-6);
}
.hero h1 .stick {
  background: var(--signal);
  padding: 0 .1em;
  display: inline-block;
  transform: rotate(-1.6deg);
  border: 2px solid var(--navy);
  box-decoration-break: clone;
}
.hero-stickers {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.hero-badge {
  flex: none;
  width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--signal);
  border: 2.5px solid var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(6deg);
  margin-top: -6px;
  padding: 10px;
  z-index: 3;
}
.hero-badge b {
  font-size: clamp(.95rem, 1.6vw, 1.4rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 115;
  line-height: 1.05;
}
.hero-badge span {
  font-size: 11.5px;
  font-weight: 600;
  font-variation-settings: 'wdth' 85;
  margin-top: 4px;
  line-height: 1.25;
}
@media (min-width: 1180px) {
  .hero-stickers { display: block; }
  .hero-badge {
    position: absolute;
    right: var(--sp-12);
    top: 52%;
    transform: translateY(-50%) rotate(8deg);
    width: clamp(112px, 13vw, 176px);
    margin-top: 0;
    padding: 12px;
  }
}

/* --- Секції: editorial-правило від заголовка до краю --- */
.section > h2 {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
  max-width: none;
}
.section > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
  transform: translateY(-0.35em);
}

/* --- Процес: spec-панель (мова «Специфікації» — точність під капотом) --- */
.spec-panel {
  background: var(--navy);
  color: var(--tint);
  padding: var(--sp-8) var(--sp-6);
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--navy);
  background-image:
    linear-gradient(rgba(201, 206, 218, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 206, 218, .09) 1px, transparent 1px);
  background-size: 44px 44px;
}
.spec-annot {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 12.5px;
  color: var(--tint);
  font-variation-settings: 'wdth' 85;
  letter-spacing: .04em;
  border-bottom: 1px dashed rgba(201, 206, 218, .4);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.spec-annot b { color: var(--signal); font-weight: 700; }
.spec-panel .process-list { margin: 0; }
.spec-panel .process-list li { border-top-color: rgba(201, 206, 218, .35); }
.spec-panel .process-list h3 { color: var(--surface); }
.spec-panel .process-list p { color: var(--tint); }
.spec-panel .step-get { color: var(--tint); }
.spec-panel .process-list li:hover { border-top-color: var(--signal); }
.spec-panel .process-list li:hover .step-num { background: var(--surface); color: var(--navy); }
.spec-panel .process-note { color: var(--tint); margin: var(--sp-6) 0 0; }
@media (min-width: 700px) {
  .spec-panel { padding: var(--sp-12); }
}

/* Фікс: крапки навігації в rail — кола, не чекбокси */
@media (min-width: 1180px) {
  .spy-dot { width: 8px; height: 8px; border-radius: 50%; border-color: rgba(201,206,218,.55); }
}

/* ==========================================================================
   ТЕСТ ВАРІАНТА 1 (2026-09-15): ціна якіриться до CTA
   — mobile/tablet: чип у рядку дії · desktop: круглий бейдж у вільній зоні
   — одноразовий поп-вхід (~340ms, потім статика), reduced-motion = off
   ========================================================================== */

.price-chip {
  display: inline-flex;
  align-items: center;
  background: var(--signal);
  color: var(--navy);
  border: 2px solid var(--navy);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: .95rem;
  padding: 6px 14px;
  white-space: nowrap;
  transform: rotate(-2deg);
  animation: chip-pop 340ms var(--ease-out) 260ms backwards;
}
@keyframes chip-pop {
  from { opacity: 0; transform: rotate(-2deg) scale(.55); }
  65%  { opacity: 1; transform: rotate(-2deg) scale(1.07); }
  to   { opacity: 1; transform: rotate(-2deg) scale(1); }
}

/* Круглий бейдж — тільки desktop (на мобільному його замінює чип) */
.hero-badge { display: none; }
@media (min-width: 1180px) {
  .hero-badge {
    display: flex;
    animation: badge-pop 380ms var(--ease-out) 220ms backwards;
  }
}
@keyframes badge-pop {
  from { opacity: 0; transform: translateY(-50%) rotate(22deg) scale(.55); }
  65%  { opacity: 1; transform: translateY(-50%) rotate(5deg) scale(1.06); }
  to   { opacity: 1; transform: translateY(-50%) rotate(8deg) scale(1); }
}
@media (min-width: 1180px) {
  .price-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .price-chip, .hero-badge { animation: none; }
}

/* ==========================================================================
   ТИСНЕННЯ MOBILE-HERO (2026-09-15): менше повітря, коротший екран
   ========================================================================== */
@media (max-width: 699px) {
  .hero { padding-top: var(--sp-8); padding-bottom: var(--sp-12); }
  .hero-stickers { margin-bottom: var(--sp-4); }
  .hero .section-marker { margin-bottom: var(--sp-4); }
  .hero h1 { line-height: .96; }
  .hero-sub { margin-bottom: var(--sp-6); }
  .hero-actions { margin: var(--sp-6) 0 var(--sp-8); }
  .hero-facts { gap: var(--sp-3); padding-top: var(--sp-4); }
  .hero-facts dd { font-size: .9375rem; }
  .cta-expectation { margin-top: 0; }
}

/* ==========================================================================
   ТИСНЕННЯ MOBILE-CTA (2026-09-15): чип всередину кнопки, очікування під нею
   ========================================================================== */
@media (max-width: 699px) {
  .hero-actions { gap: var(--sp-3); align-items: flex-start; flex-direction: column; }
  .cta-p { width: 100%; justify-content: space-between; gap: var(--sp-3); }
  .price-chip {
    display: inline-flex;
    font-size: .85rem;
    padding: 3px 10px;
    transform: rotate(-1.5deg);
    border-width: 1.5px;
  }
  .cta-expectation { max-width: none; }
}

@media (max-width: 699px) {
  .hero-actions { flex-wrap: nowrap; }
}

/* ==========================================================================
   ФІНАЛЬНИЙ ПАКЕТ ЗАПУСКУ (2026-09-15): згода, honeypot, юридичні сторінки
   ========================================================================== */

/* Honeypot: невидимо для людей */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* Чекбокс згоди */
.field-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3);
}
.field-consent input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--navy);
  flex: none;
}
.field-consent label {
  font-weight: 400;
  font-size: .8125rem;
  color: var(--muted);
  max-width: calc(100% - 32px);
  line-height: 1.45;
}
.field-consent label a {
  font-weight: 700;
  color: var(--navy);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.field-consent.has-error label { color: var(--error); }
.field-consent .field-error { width: 100%; margin-left: 32px; }

/* Юридичні сторінки (privacy/terms/thanks/404) — спільний шаблон */
.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-4) var(--sp-24);
}
.legal-main h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-variation-settings: 'wdth' 122;
  margin-bottom: var(--sp-6);
}
.legal-main h2 {
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 110;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.legal-main p, .legal-main li {
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.65;
}
.legal-main ul { padding-left: var(--sp-6); display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.legal-main li { list-style: disc; }
.legal-main .legal-updated {
  font-size: var(--fs-meta);
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.legal-main a { font-weight: 700; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  margin-bottom: var(--sp-8);
  border-bottom: 2px solid var(--signal);
}
.legal-main .cta { margin-top: var(--sp-6); }

/* 404 — знак «Сигналу» */
.err-hero { text-align: left; }
.err-code {
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 125;
  line-height: 1;
  color: var(--navy);
  position: relative;
  display: inline-block;
  margin-bottom: var(--sp-4);
}
.err-code::after {
  content: "";
  position: absolute;
  inset: 8% -4% -6% 12%;
  background: var(--signal);
  z-index: -1;
}
@media (min-width: 1180px) {
  .legal-main { margin-left: var(--rail-w); padding-left: var(--sp-12); padding-right: var(--sp-12); }
}