/* ============================================================
   AlKô — вариант E «Наследие гостеприимства»
   Токены дизайн-системы
   ============================================================ */
:root{
  /* --- цвет: тёмный благородный зелёный + матовая латунь + слоновая кость --- */
  --bg:            oklch(24% 0.045 165);
  --bg-deep:       oklch(20% 0.040 165);
  --surface:       oklch(28% 0.050 165);
  --surface-2:     oklch(31% 0.048 165);
  --fg:            oklch(96% 0.010 85);
  --muted:         oklch(81% 0.018 85);
  --border:        oklch(45% 0.035 165);
  --accent:        oklch(72% 0.100 80);   /* матовая латунь на тёмном */
  --accent-soft:   oklch(72% 0.100 80 / 0.34);
  --accent-hair:   oklch(72% 0.100 80 / 0.22);
  --accent-deep:   oklch(45% 0.080 70);   /* латунь для светлых секций */

  --ivory:         oklch(96% 0.010 85);
  --ivory-2:       oklch(93% 0.014 85);
  --ink:           oklch(24% 0.030 165);
  --ink-muted:     oklch(41% 0.022 165);
  --ink-border:    oklch(84% 0.018 85);

  /* --- типографика --- */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:    "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --fs-hero:  clamp(2.5rem, 6.4vw, 5.25rem);
  --fs-h2:    clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3:    clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-lead:  clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:  1rem;
  --fs-sm:    0.9375rem;
  --fs-kicker:0.75rem;
  --track-kicker: 0.18em;

  /* --- шкала отступов --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 18px;
  --space-5: 28px; --space-6: 44px; --space-7: 68px; --space-8: 104px;
  --space-9: 148px;

  /* --- радиусы, линии, время --- */
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 4px;
  --hair: 1px;
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 2600ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --wrap: 1240px;
  --wrap-narrow: 860px;
}

/* ============================================================
   База
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  font-weight:400; overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; line-height:1.1; margin:0; letter-spacing:-0.01em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--space-5)}
.wrap-narrow{width:100%; max-width:var(--wrap-narrow); margin-inline:auto; padding-inline:var(--space-5)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Орнамент: латунные рулинги, фриз из арок, капитель-kicker
   ============================================================ */
.kicker{
  font-family:var(--font-body); font-size:var(--fs-kicker); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-kicker);
  color:var(--accent); margin:0 0 var(--space-4);
}
.section-light .kicker{color:var(--accent-deep)}
.rule{height:var(--hair); background:var(--accent-soft); border:0; margin:0}
.rule-short{width:56px; height:var(--hair); background:var(--accent); border:0; margin:var(--space-4) auto var(--space-5)}
.section-light .rule-short{background:var(--accent-deep)}
.frieze{display:block; width:100%; height:26px; color:var(--accent-soft)}
.frieze-band{padding:var(--space-5) 0; background:var(--bg-deep)}
.sprite{position:absolute; width:0; height:0; overflow:hidden}

/* ============================================================
   Логотип AlKô
   ============================================================ */
.logo{display:inline-flex; align-items:center; gap:var(--space-3); min-height:44px}
.logo svg{display:block}
.logo-descriptor{
  font-size:var(--fs-kicker); text-transform:uppercase; letter-spacing:var(--track-kicker);
  color:var(--muted); max-width:150px; line-height:1.4;
}

/* ============================================================
   Шапка и навигация
   ============================================================ */
.header{
  position:sticky; top:0; z-index:40; background:oklch(24% 0.045 165 / 0.94);
  backdrop-filter:blur(6px); border-bottom:var(--hair) solid var(--accent-hair);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-height:76px}
.nav{display:flex; align-items:center; gap:var(--space-5)}
.nav a{
  font-size:var(--fs-sm); color:var(--muted); padding:12px 2px; min-height:44px;
  display:inline-flex; align-items:center; transition:color var(--dur-fast) var(--ease);
  border-bottom:var(--hair) solid transparent;
}
.nav a:hover{color:var(--fg); border-bottom-color:var(--accent)}
.header-cta{display:flex; align-items:center; gap:var(--space-3)}
.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:var(--hair) solid var(--accent-soft); border-radius:var(--radius-sm);
  color:var(--accent); cursor:pointer;
}
.burger span{display:block; width:20px; height:1px; background:currentColor; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:1px; background:currentColor}
.burger span::before{top:-6px} .burger span::after{top:6px}
.mobile-nav{display:none; border-top:var(--hair) solid var(--accent-hair); background:var(--bg-deep)}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav a{
  display:flex; align-items:center; min-height:52px; padding:0 var(--space-5);
  font-size:1.0625rem; color:var(--fg); border-bottom:var(--hair) solid var(--accent-hair);
}
.mobile-nav .btn{margin:var(--space-4) var(--space-5) var(--space-5); display:flex}

/* ============================================================
   Кнопки: primary (латунная заливка) / secondary (обводка) / ghost
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:0 var(--space-5); border-radius:var(--radius);
  font-family:var(--font-body); font-size:var(--fs-kicker); font-weight:600;
  text-transform:uppercase; letter-spacing:0.12em; cursor:pointer;
  border:var(--hair) solid transparent; background:none; color:inherit;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary{background:var(--accent); color:oklch(22% 0.04 165); border-color:var(--accent)}
.btn-primary:hover{background:transparent; color:var(--accent)}
.btn-secondary{border-color:var(--accent); color:var(--accent)}
.btn-secondary:hover{background:var(--accent); color:oklch(22% 0.04 165)}
.btn-ghost{color:var(--muted); border-color:var(--border)}
.btn-ghost:hover{color:var(--fg); border-color:var(--accent)}
.section-light .btn-secondary{border-color:var(--accent-deep); color:var(--accent-deep)}
.section-light .btn-secondary:hover{background:var(--accent-deep); color:var(--ivory)}

/* ============================================================
   Секции: чередование тёмных и светлых полос
   ============================================================ */
.section{padding:var(--space-8) 0}
.section-light{background:var(--ivory); color:var(--ink)}
.section-light .muted{color:var(--ink-muted)}
.section-deep{background:var(--bg-deep)}
.section-head{max-width:720px; margin-inline:auto}
.section-head h2{font-size:var(--fs-h2)}
.section-head p{margin-top:var(--space-4); color:var(--muted); font-size:var(--fs-lead)}
.section-light .section-head p{color:var(--ink-muted)}
.muted{color:var(--muted)}
em.accent{font-style:italic; color:var(--accent)}
.section-light em.accent{color:var(--accent-deep)}

/* ============================================================
   Hero + «тёплый свет» (единственная изюминка)
   ============================================================ */
.hero{position:relative; overflow:hidden; padding:var(--space-9) 0 var(--space-8); text-align:center}
.hero-glow{
  position:absolute; left:50%; top:14%; width:min(1100px,150vw); aspect-ratio:1/1;
  transform:translate(-50%,-22%); border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, oklch(72% 0.10 80 / 0.30) 0%, oklch(72% 0.10 80 / 0.10) 38%, transparent 66%);
  animation:ignite var(--dur-slow) var(--ease) 240ms forwards;
}
@keyframes ignite{ from{opacity:0} 55%{opacity:.72} to{opacity:1} }
.hero-inner{position:relative; z-index:1}
.hero h1{font-size:var(--fs-hero); letter-spacing:-0.02em}
.hero-sub{margin:var(--space-5) auto 0; max-width:640px; font-size:var(--fs-lead); color:var(--muted)}
.hero-actions{display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6)}
.hero-mark{display:flex; justify-content:center; margin-bottom:var(--space-5)}

/* ============================================================
   Плейсхолдеры «фото»: SVG-гравюра архитектуры
   ============================================================ */
.plate{border:var(--hair) solid var(--accent-hair); background:var(--bg-deep); padding:var(--space-4)}
.section-light .plate{border-color:var(--ink-border); background:var(--ivory-2)}
.plate svg{display:block; width:100%; height:auto; color:var(--accent)}
.section-light .plate svg{color:var(--accent-deep)}
.plate-caption{
  margin-top:var(--space-3); font-size:var(--fs-kicker); text-transform:uppercase;
  letter-spacing:var(--track-kicker); color:var(--muted);
}
.section-light .plate-caption{color:var(--ink-muted)}

/* ============================================================
   Список-«меню» с точечными лидерами
   ============================================================ */
.menu-list{display:grid; gap:var(--space-3); margin-top:var(--space-5)}
.menu-row{display:flex; align-items:baseline; gap:var(--space-3); min-height:44px; padding-block:var(--space-2)}
.menu-name{font-family:var(--font-display); font-size:1.25rem}
.menu-dots{flex:1 1 auto; height:0; border-bottom:1px dotted var(--accent-soft); transform:translateY(-4px)}
.section-light .menu-dots{border-bottom-color:var(--ink-border)}
.menu-note{font-size:var(--fs-sm); color:var(--muted); white-space:nowrap}
.section-light .menu-note{color:var(--ink-muted)}

/* ============================================================
   Карточка услуги (без теней, без левого бордера)
   ============================================================ */
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); margin-top:var(--space-7)}
.service{border:var(--hair) solid var(--border); padding:var(--space-6) var(--space-5); background:var(--surface)}
.service:first-child{grid-column:1 / -1}
.service-num{
  font-family:var(--font-display); font-size:1.5rem; color:var(--accent);
  display:block; margin-bottom:var(--space-3); letter-spacing:0.08em;
}
.service h3{font-size:var(--fs-h3); margin-bottom:var(--space-4)}
.service ul{display:grid; gap:var(--space-3); border-top:var(--hair) solid var(--accent-hair); padding-top:var(--space-4)}
.service li{position:relative; padding-left:var(--space-5); font-size:var(--fs-sm); color:var(--muted)}
.service li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-top:var(--hair) solid var(--accent); border-left:var(--hair) solid var(--accent);
  transform:rotate(45deg);
}

/* ============================================================
   Полоса «Автоматизация» — светлая секция
   ============================================================ */
.auto-band{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--space-7); align-items:start}
.auto-band h2{font-size:var(--fs-h2)}
.auto-band p{margin-top:var(--space-4); color:var(--ink-muted); font-size:var(--fs-lead)}

/* ============================================================
   Шаги процесса
   ============================================================ */
.steps{display:grid; gap:0; margin-top:var(--space-7); border-top:var(--hair) solid var(--accent-hair)}
.step{
  display:grid; grid-template-columns:104px 1fr 1fr; gap:var(--space-5);
  padding:var(--space-5) 0; border-bottom:var(--hair) solid var(--accent-hair); align-items:start;
}
.step-num{display:flex; align-items:center; gap:var(--space-3); color:var(--accent); font-family:var(--font-display); font-size:1.25rem}
.step h3{font-size:1.375rem}
.step p{color:var(--muted); font-size:var(--fs-sm)}

/* ============================================================
   Таблица моделей сотрудничества
   ============================================================ */
.models-wrap{margin-top:var(--space-7)}
.models{width:100%; border-collapse:collapse; text-align:left}
.models caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.models th,.models td{
  padding:var(--space-4) var(--space-4); vertical-align:top;
  border-bottom:var(--hair) solid var(--accent-hair); font-size:var(--fs-sm);
}
.models thead th{
  font-family:var(--font-body); font-size:var(--fs-kicker); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-kicker); color:var(--accent);
  border-bottom:var(--hair) solid var(--accent-soft); white-space:normal;
}
.models tbody th{
  font-family:var(--font-display); font-weight:500; font-size:1.25rem; color:var(--fg);
  width:210px; line-height:1.2;
}
.models td{color:var(--muted)}
.models tbody tr:last-child th,.models tbody tr:last-child td{border-bottom:0}
.cell-label{display:none}

/* ============================================================
   Почему AlKô / Команда
   ============================================================ */
.theses{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-7)}
.thesis{border-top:var(--hair) solid var(--accent-soft); padding-top:var(--space-5)}
.thesis h3{font-size:var(--fs-h3); margin-bottom:var(--space-3)}
.thesis p{color:var(--muted); font-size:var(--fs-sm)}
.team{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); margin-top:var(--space-7)}
.member{border:var(--hair) solid var(--border); padding:var(--space-5); background:var(--surface)}
.member h3{font-size:1.25rem; margin-top:var(--space-4)}
.member p{color:var(--muted); font-size:var(--fs-sm); margin-top:var(--space-2)}

/* ============================================================
   Анкета объекта
   ============================================================ */
.form-shell{border:var(--hair) solid var(--accent-soft); padding:var(--space-7) var(--space-6); background:var(--surface); margin-top:var(--space-7)}
.progress{display:flex; flex-wrap:wrap; gap:var(--space-5); border-bottom:var(--hair) solid var(--accent-hair); padding-bottom:var(--space-4); margin-bottom:var(--space-6)}
.progress-item{
  font-size:var(--fs-kicker); text-transform:uppercase; letter-spacing:var(--track-kicker);
  color:oklch(66% 0.02 165); display:flex; align-items:center; gap:var(--space-2);
}
.progress-item[aria-current="step"]{color:var(--accent)}
.progress-item b{font-family:var(--font-display); font-weight:500; font-size:1rem}
.field{margin-bottom:var(--space-5)}
.field-row{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5)}
label.label{
  display:block; font-size:var(--fs-kicker); text-transform:uppercase;
  letter-spacing:var(--track-kicker); color:var(--accent); margin-bottom:var(--space-3);
}
.input,.select{
  width:100%; min-height:48px; padding:var(--space-3) 0; color:var(--fg);
  background:transparent; border:0; border-bottom:var(--hair) solid var(--border);
  font-family:var(--font-body); font-size:1.0625rem; border-radius:0;
  transition:border-color var(--dur) var(--ease);
}
.select{appearance:none; padding-right:28px; background-image:linear-gradient(transparent,transparent)}
.select-shell{position:relative}
.select-shell::after{
  content:""; position:absolute; right:6px; top:22px; width:8px; height:8px;
  border-right:var(--hair) solid var(--accent); border-bottom:var(--hair) solid var(--accent);
  transform:rotate(45deg); pointer-events:none;
}
.input:focus,.select:focus{outline:none; border-bottom-color:var(--accent)}
.input::placeholder{color:oklch(70% 0.02 165)}
.helper{margin-top:var(--space-2); font-size:var(--fs-sm); color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:var(--space-3)}
.chip{position:relative; display:inline-flex}
.chip input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0}
.chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--space-4);
  border:var(--hair) solid var(--border); border-radius:var(--radius-sm);
  font-size:var(--fs-sm); color:var(--muted); transition:all var(--dur-fast) var(--ease);
}
.chip input:checked + span{border-color:var(--accent); color:oklch(22% 0.04 165); background:var(--accent)}
.chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:3px}
.form-foot{display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; border-top:var(--hair) solid var(--accent-hair); padding-top:var(--space-5); margin-top:var(--space-6)}
.form-note{font-size:var(--fs-sm); color:var(--accent); display:none}
.form-note[data-visible="true"]{display:block}

/* ============================================================
   Контакты и футер
   ============================================================ */
.contacts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-7); border-top:var(--hair) solid var(--accent-soft); padding-top:var(--space-6)}
.contact-item .kicker{margin-bottom:var(--space-3)}
.contact-item p{font-family:var(--font-display); font-size:1.375rem}
.footer{background:var(--bg-deep); border-top:var(--hair) solid var(--accent-hair); padding:var(--space-7) 0 var(--space-6)}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-6); align-items:start}
.footer-nav{display:flex; flex-wrap:wrap; gap:var(--space-4)}
.footer-nav a{font-size:var(--fs-sm); color:var(--muted); min-height:44px; display:inline-flex; align-items:center}
.footer-nav a:hover{color:var(--accent)}
.footer-bottom{display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-6); padding-top:var(--space-5); border-top:var(--hair) solid var(--accent-hair); font-size:var(--fs-sm); color:var(--muted)}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity 640ms var(--ease), transform 640ms var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1080px){
  .services-grid{grid-template-columns:1fr}
  .service:first-child{grid-column:auto}
  .auto-band{grid-template-columns:1fr; gap:var(--space-6)}
  .theses{grid-template-columns:1fr; gap:var(--space-5)}
  .step{grid-template-columns:88px 1fr; }
  .step p{grid-column:2}
}
@media (max-width:860px){
  .nav,.header-cta .btn{display:none}
  .burger{display:inline-flex}
  .section{padding:var(--space-7) 0}
  .hero{padding:var(--space-8) 0 var(--space-7)}
  .team{grid-template-columns:1fr}
  .contacts{grid-template-columns:1fr; gap:var(--space-5)}
  .footer-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .form-shell{padding:var(--space-5) var(--space-4)}

  /* таблица моделей → стек карточек */
  .models,.models tbody,.models tr,.models th,.models td{display:block; width:auto}
  .models thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .models tbody tr{border:var(--hair) solid var(--border); padding:var(--space-5) var(--space-4); margin-bottom:var(--space-5); background:var(--surface)}
  .models tbody th{width:auto; border-bottom:var(--hair) solid var(--accent-soft); padding:0 0 var(--space-3); font-size:1.375rem}
  .models tbody td{border-bottom:var(--hair) solid var(--accent-hair); padding:var(--space-4) 0}
  .models tbody tr td:last-child{border-bottom:0; padding-bottom:0}
  .cell-label{
    display:block; font-size:var(--fs-kicker); text-transform:uppercase;
    letter-spacing:var(--track-kicker); color:var(--accent); margin-bottom:var(--space-2);
  }
}
@media (max-width:520px){
  .logo-descriptor{display:none}
  .menu-row{flex-wrap:wrap}
  .menu-dots{min-width:24px}
  .menu-note{white-space:normal}
  .step{grid-template-columns:1fr; gap:var(--space-3)}
  .step p{grid-column:auto}
  .hero-actions .btn{width:100%}
  .form-foot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .hero-glow{animation:none; opacity:1}
  .reveal{opacity:1; transform:none}
}

/* ============================================================
   Страница анкеты (/anketa/) — те же токены варианта E
   ============================================================ */
:root{ --danger: oklch(69% 0.135 38); }

.form-step-title{
  font-size:var(--fs-h3); margin-bottom:var(--space-4);
  padding-bottom:var(--space-4); border-bottom:var(--hair) solid var(--accent-hair);
}
.step-index{
  display:block; font-family:var(--font-body); font-size:var(--fs-kicker); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-kicker);
  color:var(--accent); margin-bottom:var(--space-2);
}
.step-intro{color:var(--muted); font-size:var(--fs-sm); margin-bottom:var(--space-5)}

.textarea{
  min-height:104px; resize:vertical; line-height:1.5;
  border:var(--hair) solid var(--border); padding:var(--space-3) var(--space-4);
}
.textarea:focus{border-color:var(--accent)}

.req{color:var(--accent); margin-left:2px}
.unit{color:var(--muted); text-transform:none; letter-spacing:0}
.field-error{margin-top:var(--space-2); font-size:var(--fs-sm); color:var(--danger)}
.is-invalid{border-color:var(--danger) !important}
.chips.is-invalid{border:0}

/* согласие — чип во всю ширину с переносом текста */
.chip-wide{display:block; width:100%}
.chip-wide span{
  display:flex; align-items:flex-start; gap:var(--space-3); min-height:auto;
  padding:var(--space-4); line-height:1.5; color:var(--muted);
}
.chip-wide span::before{
  content:""; flex:0 0 auto; width:18px; height:18px; margin-top:2px;
  border:var(--hair) solid var(--accent); border-radius:var(--radius-sm);
}
.chip-wide input:checked + span{background:transparent; color:var(--fg); border-color:var(--accent)}
.chip-wide input:checked + span::before{
  background:var(--accent);
  box-shadow:inset 0 0 0 3px oklch(28% 0.05 165);
}
.chip-wide a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

/* honeypot — вне экрана и вне табуляции, не display:none (боты пропускают такие) */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

.progress-item[data-done="true"]{color:var(--muted)}
.form-note[data-visible="true"]{display:block; flex:1 1 100%}
.form-note[data-kind="error"]{color:var(--danger)}
#btn-next,#btn-submit{min-width:180px}

@media (max-width:520px){
  .form-foot .btn{width:100%}
  .progress{gap:var(--space-3) var(--space-4)}
}

/* ============================================================
   Правовые страницы (/privacy/)
   ============================================================ */
.legal{max-width:760px}
.legal h2{font-size:var(--fs-h3); margin:var(--space-6) 0 var(--space-4)}
.legal p{margin-bottom:var(--space-4); color:var(--muted)}
.legal ul{display:grid; gap:var(--space-3); margin-bottom:var(--space-4)}
.legal li{position:relative; padding-left:var(--space-5); color:var(--muted); font-size:var(--fs-sm)}
.legal li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-top:var(--hair) solid var(--accent); border-left:var(--hair) solid var(--accent);
  transform:rotate(45deg);
}
.legal a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.todo{
  display:inline-block; padding:2px 8px; border:var(--hair) dashed var(--accent);
  color:var(--accent); font-size:var(--fs-sm); border-radius:var(--radius-sm);
}