/* ============================================================
   legafo.com — общая таблица стилей

   Палитра взята из приложения без изменений: тёмная тема по
   умолчанию, светлая по системной настройке. Витрина обязана
   выглядеть тем же продуктом, в который человек перейдёт.

   Цвета меток ответа — те же переменные, что в приложении:
   auto / draft / concierge / clarify. Не подбирать заново.

   ШРИФТЫ: системный стек. Веб-шрифты со сторонних сервисов не
   подключаются намеренно — на privacy-first продукте это
   противоречит собственным заявлениям.
   ============================================================ */

:root{
  color-scheme: dark light;

  /* тёмная тема — та же, что :root приложения */
  --bg-deep:    #12151D;
  --bg-panel:   #1A2030;
  --bg-panel-2: #212842;
  --brass:      #C89B5C;
  --brass-soft: #E8C98A;
  --parchment:  #EDE7DA;   /* основной текст */
  --muted:      #8A93AA;
  --line:       #2A3245;
  --shadow:     #05070C;

  --status-auto:      #6FAE8C;
  --status-draft:     #D9A441;
  --status-concierge: #8B93D6;
  --status-clarify:   #5AA9C4;

  --measure: 34rem;
  --gap:     clamp(1rem, 3vw, 2rem);
  --bleed:   clamp(1.25rem, 5vw, 4.5rem);
}

@media (prefers-color-scheme: light){
  :root{
    --bg-deep:    #F4EFE2;
    --bg-panel:   #FFFFFF;
    --bg-panel-2: #F8F2E3;
    --brass:      #A9763F;
    --brass-soft: #8B5E2E;
    --parchment:  #2A2418;
    --muted:      #7A6F5C;
    --line:       #E3D8C0;
    --shadow:     #2A2418;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg-deep);
  color:var(--parchment);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Тот же световой градиент сверху, что в приложении. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 50% -10%, rgba(200,155,92,.14) 0%, transparent 55%);
}
@media (prefers-color-scheme: light){
  body::before{background:radial-gradient(circle at 50% -10%, #ffffff 0%, transparent 55%);}
}

.wrap{position:relative;z-index:1;}

/* ---------- Типографика ---------- */

h1,h2,h3{margin:0 0 .5em;font-weight:800;letter-spacing:-.022em;line-height:1.08;text-wrap:balance;}
h1{font-size:clamp(2.4rem,1.5rem + 4.4vw,4.6rem);}
h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);letter-spacing:-.018em;}
h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.008em;line-height:1.3;}

p{margin:0 0 1em;max-width:var(--measure);}
.lead{font-size:clamp(1.0625rem,1rem + .45vw,1.3rem);color:var(--muted);line-height:1.5;}

a{color:var(--brass);text-underline-offset:.18em;text-decoration-thickness:.08em;}
a:hover{color:var(--brass-soft);}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Каркас ---------- */

.shell{max-width:76rem;margin-inline:auto;padding-inline:var(--bleed);}
.masthead{display:flex;align-items:center;gap:var(--gap);padding-block:1.4rem;}

.wordmark{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:800;font-size:1.3rem;letter-spacing:-.03em;
  text-decoration:none;color:var(--parchment);margin-right:auto;
}
.wordmark .glyph{color:var(--brass);font-size:1.05em;line-height:1;}

.masthead nav{display:flex;align-items:center;gap:1.25rem;font-size:.9375rem;}
.masthead nav a{color:var(--parchment);text-decoration:none;font-weight:600;}
.masthead nav a:hover{color:var(--brass);text-decoration:underline;}

section{padding-block:clamp(3rem,7vw,6rem);}
section + section{border-top:1px solid var(--line);}

/* ---------- Первый экран: доска кнопок ---------- */

.hero{padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,5.5rem);}
.hero h1{max-width:15ch;}
.hero .lead{max-width:38ch;margin-bottom:2.5rem;}

.board{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1rem;padding:0;list-style:none;}

.chip{
  position:relative;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:3.25rem;padding:.55rem 1.15rem;
  border:2px solid var(--chip,var(--brass));
  border-radius:.9rem;
  background:color-mix(in srgb, var(--chip,var(--brass)) 16%, var(--bg-panel));
  color:var(--parchment);
  font:inherit;font-weight:700;
  font-size:clamp(1rem,.95rem + .3vw,1.2rem);
  letter-spacing:-.012em;
  cursor:text;
  box-shadow:.28rem .28rem 0 var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.chip:hover,.chip:focus-within{
  transform:translate(-.1rem,-.1rem);
  box-shadow:.38rem .38rem 0 var(--shadow);
  background:color-mix(in srgb, var(--chip,var(--brass)) 28%, var(--bg-panel));
}
.chip[contenteditable]{outline:none;}
.chip:empty::before{content:attr(data-empty);opacity:.5;}

.board-hint{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--muted);max-width:none;}
.board-hint svg{flex:none;}

/* ---------- Сетка объяснений ---------- */

.steps{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.5rem;}
.steps > div > p{max-width:30ch;color:var(--muted);margin-bottom:0;}
.steps h3{padding-bottom:.55rem;border-bottom:3px solid var(--accent,var(--brass));margin-bottom:.7rem;}

/* ---------- Метки уровней ответа ---------- */
/* Цвета совпадают с приложением: auto, draft, concierge, clarify. */

.tiers{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.75rem 0 0;padding:0;list-style:none;}
.tier{
  display:inline-block;padding:.3rem .7rem;border-radius:999px;
  border:1.5px solid var(--chip);
  background:color-mix(in srgb, var(--chip) 18%, var(--bg-panel));
  color:var(--parchment);
  font-size:.875rem;font-weight:700;
}

/* ---------- Блок про данные ---------- */

.shout{
  max-width:26ch;
  font-size:clamp(1.5rem,1.1rem + 1.9vw,2.5rem);
  font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 1.25rem;
}
.shout em{font-style:normal;color:var(--brass);}

/* ---------- Страница цен ---------- */

.plans{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 2.25rem;padding:0;list-style:none;}
.plan{
  font:inherit;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;
  padding:.7rem 1.15rem;min-width:5.2rem;
  border:2px solid var(--line);border-radius:.8rem;
  background:var(--bg-panel);color:var(--parchment);
  cursor:pointer;box-shadow:.22rem .22rem 0 var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.plan:hover{transform:translate(-.08rem,-.08rem);box-shadow:.32rem .32rem 0 var(--shadow);border-color:var(--brass);}
.plan[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--bg-deep);}

.plancard{
  border:2px solid var(--line);border-radius:1.1rem;
  background:var(--bg-panel);box-shadow:.4rem .4rem 0 var(--shadow);
  padding:clamp(1.25rem,3vw,2rem);max-width:34rem;
}
.plancard .amount{font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin:0 0 .15em;color:var(--brass);}
.plancard .amount span{font-size:.36em;font-weight:700;letter-spacing:-.01em;color:var(--muted);}

/* aspect-ratio, а не height:auto — Safari не выводит высоту из viewBox
   и подставляет 150px, отчего картинка вырастает во весь экран. */
.gauge{display:block;width:100%;max-width:19rem;height:auto;aspect-ratio:300/14;margin:.35rem 0 .5rem;}
.gaugecap{font-size:.875rem;color:var(--muted);margin:0;}

/* Переключатель автопродления. Состояние передаётся тремя признаками
   сразу — заливкой, положением ползунка и подписью, — потому что
   одного цвета для этого недостаточно. */
.renew{margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);}
.renewhead{font-weight:700;margin:0 0 .75rem;max-width:none;}
.renewrow{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem;font-size:.9375rem;color:var(--muted);}
.renewrow:last-child{margin-bottom:0;}
.renewrow span{max-width:34ch;}
.renewnote{margin:.9rem 0 0;font-size:.875rem;color:var(--muted);max-width:44ch;}
/* Высота задана числом, а не auto: пропорция 56:30 сохраняется,
   и ни один движок не может подставить свою. */
.toggle{flex:none;display:block;width:2.4rem;height:1.286rem;color:var(--muted);}

.plancard ul{margin:1.25rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem;}
.plancard li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9688rem;}
.plancard li::before{content:"";flex:none;width:.7rem;height:.7rem;margin-top:.42rem;border-radius:.2rem;background:var(--status-auto);}

/* Единственное действие на странице цен: переход в приложение.
   Покупка живёт там, на сайте checkout нет — так витрина остаётся
   витриной, а оформление одним местом. */
.ctarow{margin:2rem 0 .75rem;max-width:none;}
.cta{
  display:inline-block;
  padding:.85rem 1.6rem;
  border:2px solid var(--brass);
  border-radius:.8rem;
  background:var(--brass);
  color:var(--bg-deep);
  font-weight:800;
  font-size:1.0625rem;
  letter-spacing:-.015em;
  text-decoration:none;
  box-shadow:.28rem .28rem 0 var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.cta:hover{transform:translate(-.1rem,-.1rem);box-shadow:.38rem .38rem 0 var(--shadow);color:var(--bg-deep);}
@media (prefers-reduced-motion:reduce){.cta:hover{transform:none;}}
.ctanote{font-size:.9375rem;color:var(--muted);max-width:42ch;}

.faq{margin-top:3rem;display:grid;gap:0;max-width:44rem;}
.faq details{border-top:1px solid var(--line);padding:1rem 0;}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{font-weight:700;cursor:pointer;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+";display:inline-block;width:1.2em;font-weight:800;color:var(--brass);}
.faq details[open] summary::before{content:"–";}
.faq p{margin:.7rem 0 0;color:var(--muted);max-width:60ch;}

/* ---------- Юридические страницы ---------- */

.doc{max-width:44rem;}
.doc h2{margin-top:2.5rem;color:var(--brass);}
.doc p,.doc li{max-width:none;}
.doc ul{padding-left:1.1rem;}

/* ---------- Выбор языка ---------- */
/* Английский — исходный язык сайта; переключатель держится тихо, в подвале. */

.langpick{
  font:inherit;font-size:.9375rem;
  color:var(--parchment);background:var(--bg-panel);
  border:1.5px solid var(--line);border-radius:.45rem;
  padding:.35rem 1.9rem .35rem .55rem;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A93AA' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;
}
.langpick:hover{border-color:var(--brass);}

/* ---------- Подвал ---------- */

footer{border-top:2px solid var(--line);padding-block:2.5rem 3.5rem;font-size:.9375rem;}
.footcols{display:flex;flex-wrap:wrap;gap:2rem 3.5rem;}
.footcols nav:not([hidden]){display:grid;gap:.45rem;align-content:start;}
/* Именно :not([hidden]), а не .footcols nav — иначе специфичность
   класса перебивает атрибут hidden и скрытая колонка остаётся видимой. */
.footcols nav a{color:var(--parchment);text-decoration:none;}
.footcols nav a:hover{color:var(--brass);text-decoration:underline;}
.footcols h3{font-size:.8125rem;font-weight:700;color:var(--muted);margin-bottom:.15rem;}
.legalese{margin-top:2rem;color:var(--muted);max-width:52rem;font-size:.875rem;}

/* ---------- Доступность ---------- */

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .chip:hover,.plan:hover{transform:none;}
}