/* Общие стили сайта sdsoftware.io.
 *
 * Те же величины, что в public/index.html. Там они встроены намеренно:
 * страницу проверки сохраняют и шлют ссылками, и она должна работать
 * одним файлом. Здесь страниц несколько, поэтому файл общий. Если
 * меняете палитру — меняйте в двух местах.
 */

:root{
  --paper:#eef1f4; --card:#fff; --ink:#15181c; --grey:#5b636d;
  --line:#d7dce2; --accent:#b45309; --ok:#1f5c3d; --warn:#8a5a00;
  --shadow:0 1px 2px rgba(16,22,30,.05), 0 10px 30px rgba(16,22,30,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101317; --card:#181c21; --ink:#e7e9ed; --grey:#98a0aa;
    --line:#262c33; --accent:#f0a63a; --ok:#6fcf9a; --warn:#e3b341;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 "Source Serif 4", Georgia, serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:660px; margin:0 auto; padding:34px 20px 90px}

.brand{display:flex; align-items:center; gap:11px; margin:0 0 38px}
.brand img{width:34px; height:34px; border-radius:8px; display:block}
/* Знак компании вставлен в разметку, а не картинкой: скобки берут цвет
   у текста и потому живут в обеих темах. Скругления ему не нужно —
   это не плитка приложения, а рисунок на фоне страницы. */
.brand .mark{width:32px; height:32px; display:block; flex-shrink:0}
.brand a{color:inherit; text-decoration:none; display:flex; align-items:center; gap:11px}
.brand b{
  font-family:Archivo, system-ui, sans-serif; font-weight:700; font-size:17px;
  letter-spacing:-.01em;
}
.brand span{
  font-family:Archivo, system-ui, sans-serif; font-size:13px; color:var(--grey);
  border-left:1px solid var(--line); padding-left:11px; margin-left:3px;
}
@media (max-width:480px){ .brand span{display:none} }

h1{
  font-family:Archivo, system-ui, sans-serif; font-weight:800; font-size:40px;
  line-height:1.12; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance;
}
.lede{font-size:19px; color:var(--grey); margin:0 0 34px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:24px 26px; margin-bottom:18px; box-shadow:var(--shadow);
}
h2{
  font-family:Archivo, system-ui, sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin:0 0 16px;
}
h3{
  font-family:Archivo, system-ui, sans-serif; font-size:17px; font-weight:700;
  letter-spacing:-.01em; margin:0 0 6px;
}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}
a{color:var(--accent)}

.tag{
  display:inline-block; font-family:Archivo, system-ui, sans-serif; font-size:12px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grey); border:1px solid var(--line); border-radius:99px;
  padding:2px 10px; vertical-align:3px; margin-left:8px;
}
/* `hidden` обязан прятать и то, чему класс задал display: иначе кнопка
   «Download Pro» видна рядом с «We do not know that key», и человек жмёт
   ссылку, которой нет. */
[hidden]{display:none !important}

.cta{
  display:inline-block; font-family:Archivo, system-ui, sans-serif; font-size:16px;
  font-weight:600; padding:14px 26px; border-radius:8px; border:none;
  background:var(--ink); color:var(--card); text-decoration:none; cursor:pointer;
}
.cta.quiet{background:transparent; color:var(--ink); border:1px solid var(--line)}
.cta:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin:-12px 0 34px}
.hero-actions .cta{text-align:center}
.launch-note{font-family:Archivo,system-ui,sans-serif; font-size:14px;
  color:var(--ink); border-left:3px solid var(--accent); padding:10px 14px;
  background:var(--card); margin:0 0 24px}
@media (max-width:480px){.hero-actions .cta{width:100%}}
.after{font-family:Archivo,system-ui,sans-serif; font-size:13px; color:var(--grey); margin:10px 0 0}

/* Два проигрывателя рядом: сравнение читается только когда они
   видны одновременно. На узком экране встают друг под друга. */
.demo{display:flex; gap:18px; margin:18px 0 0; flex-wrap:wrap}
.demo-one{flex:1 1 230px; min-width:0}
.demo-one h3{margin:0 0 9px}
.demo-one audio{width:100%; min-width:0; display:block; height:40px}
.demo-one .after{margin-top:8px}

/* Product walkthrough and first recording. */
.voice-nav{display:flex; flex-wrap:wrap; gap:8px 22px; margin:-14px 0 28px;
  font:14px/1.6 Archivo,system-ui,sans-serif}
.voice-nav a:focus-visible,.voice-video-preview:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px}
:is(#quick-start,#requirements){scroll-margin-top:20px}
.voice-video{aspect-ratio:16/9; margin:20px 0 0; overflow:hidden;
  border:1px solid var(--line); border-radius:8px; background:#101317}
.voice-video-preview{display:grid; position:relative; width:100%; height:100%;
  place-items:center; color:#fff; text-decoration:none}
.voice-video-preview img{position:absolute; width:100%; height:100%; object-fit:cover;
  object-position:top; opacity:.55}
.voice-video-play{position:relative; display:flex; align-items:center; gap:8px;
  padding:12px 18px; border:1px solid #ffffff50; border-radius:8px;
  background:#101317ed; font:600 15px/1.5 Archivo,system-ui,sans-serif}
.voice-video-preview:hover .voice-video-play{background:#101317}
.voice-video iframe{display:block; width:100%; height:100%; border:0}
.voice-steps{padding:0 0 0 24px; margin:26px 0 18px}
.voice-steps li{padding:0 0 20px 10px;
  margin:0 0 20px; border-bottom:1px solid var(--line)}
.voice-steps li:last-child{padding-bottom:0; margin-bottom:0; border-bottom:0}
.voice-steps li::marker{color:var(--accent); font:600 15px Archivo,system-ui,sans-serif}
.voice-steps p{font-size:16px; color:var(--grey); margin:0}
.voice-start-action{margin-top:20px}
@media (max-width:480px){
  .voice-start{padding:22px 18px}
  .voice-video-play{font-size:13px; padding:10px 12px}
  .voice-start-action .cta{width:100%; text-align:center}
}

/* Снимок экрана — товар лицом. Рамка и лёгкая тень, чтобы светлый
   снимок не сливался с карточкой. */
.shot{display:block; width:100%; height:auto; max-width:100%;
      border:1px solid var(--line); border-radius:8px; margin-top:4px}

/* Таблицы здесь несут главный довод, поэтому им отдельное внимание:
   на узком экране они прокручиваются, а не ломают страницу. */
.scroll{overflow-x:auto; margin-top:14px}
table{width:100%; border-collapse:collapse; font-size:15px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
th{font-family:Archivo,system-ui,sans-serif; font-size:12px; text-transform:uppercase;
   letter-spacing:.06em; color:var(--grey); font-weight:600}
td.n,th.n{text-align:right; font-variant-numeric:tabular-nums}
td strong{font-weight:600}
tr.us td{background:color-mix(in srgb, var(--accent) 7%, transparent)}

ul.plain{list-style:none; padding:0; margin:0}
ul.plain li{padding:13px 0; border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:none; padding-bottom:0}
ul.plain li:first-child{padding-top:0}
ul.plain p{font-size:16px; color:var(--grey); margin:0}

.foot{margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
      font-size:14px; color:var(--grey); font-family:Archivo,system-ui,sans-serif}
.foot a{color:var(--grey)}
.foot p{margin:0 0 7px}

@media (max-width:520px){ h1{font-size:31px} .wrap{padding:36px 18px 70px} }

/* Ключ лицензии: его переписывают глазами, поэтому крупно, в один столбец
   знаков и с переносом — на телефоне двадцать пять знаков в строку не влезают. */
.key{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:19px;
  letter-spacing:.06em; background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:11px 14px; display:inline-block; word-break:break-all;
}
label{font-family:Archivo,system-ui,sans-serif; font-size:13px; color:var(--grey)}
input[type=text]{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:15px;
  padding:9px 11px; margin:6px 8px 6px 0; max-width:100%;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
}
input[type=text]:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* Заголовок внутри карточки, а не внутри списка: без отступа сверху он
   прилипает к предыдущему абзацу. Строго прямой потомок — у h3 в ul.plain
   и в .demo-one свои отступы, и перебивать их нельзя. */
.card > h3{margin:24px 0 10px}
ol{margin:0 0 15px; padding-left:22px}
ol li{margin-bottom:7px}

/* Сравнение в три столбца требует больше места, чем страница продукта.
   Обычный текст сохраняет удобную длину строки, таблица прокручивается. */
.comparison{max-width:960px}
.comparison .lede{max-width:64ch; margin-bottom:18px}
.comparison .disclosure{max-width:80ch; margin-bottom:24px}
.comparison .crumbs{font-family:Archivo,system-ui,sans-serif; font-size:13px; margin-bottom:24px}
.comparison .actions{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 16px}
.comparison .card > p{max-width:76ch}
.comparison table{min-width:610px; table-layout:fixed}
.comparison caption{text-align:left; margin-bottom:12px; color:var(--grey)}
.comparison th[scope=row]{width:21%; text-transform:none; letter-spacing:0; font-size:13px}
.comparison th[scope=col]{width:39.5%}
.comparison thead th:first-child{width:21%}
.comparison td{vertical-align:top}
.comparison .scroll:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.comparison .sources{font-size:15px; overflow-wrap:anywhere}
.comparison .sources li{margin-bottom:9px}
.comparison .fit{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.comparison .fit .card{margin:0 0 18px}
.comparison .fit p{font-size:16px}
@media (max-width:620px){
  .comparison .fit{grid-template-columns:1fr; gap:0}
  .comparison .card{padding:20px 18px}
}

/* Руководство по локальной озвучке. */
.guide{max-width:880px}
.guide .crumbs{font:13px Archivo,system-ui,sans-serif; color:var(--grey); margin-bottom:30px}
.guide .eyebrow{font:600 12px Archivo,system-ui,sans-serif; text-transform:uppercase;
  letter-spacing:.12em; color:var(--accent); margin:0 0 12px}
.guide h1{font-size:46px; max-width:19ch}
.guide .lede{max-width:61ch; margin-bottom:16px}
.guide .disclosure{max-width:80ch; margin-bottom:30px}
.guide .actions{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 12px}
.guide .sample-card{border-top:3px solid var(--accent)}
.guide .sample-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.guide .sample-top h2{margin-bottom:0}
.guide .sample-meta{font:12px Archivo,system-ui,sans-serif; color:var(--grey)}
.guide blockquote{font-size:23px; line-height:1.5; margin:20px 0}
.guide audio{display:block; width:100%; max-width:100%; height:42px}
.guide .guide-toc{margin:30px 0 40px;
  padding:18px 0; border-block:1px solid var(--line); font:13px/1.5 Archivo,system-ui,sans-serif}
.guide .guide-toc ul{display:flex; flex-wrap:wrap; gap:9px 22px; list-style:none; margin:0; padding:0}
.guide .guide-toc li{margin:0}
.guide .guide-section{margin:34px 0}
.guide .guide-section > h2,.guide .card > h2{font-size:23px; line-height:1.3;
  text-transform:none; letter-spacing:-.02em; color:var(--ink); font-weight:700}
.guide .sample-top h2{font-size:12px}
.guide .pipeline{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px; list-style:none; padding:0; margin:22px 0}
.guide .pipeline li{padding:18px; margin:0; border:1px solid var(--line);
  border-radius:8px; background:var(--card)}
.guide .step-number{display:block; font:600 12px Archivo,system-ui,sans-serif;
  color:var(--accent); margin-bottom:17px}
.guide .pipeline h3{font-size:16px}
.guide .pipeline p{font-size:15px; line-height:1.55; color:var(--grey)}
.guide .setup-steps li{padding-left:3px; margin-bottom:17px}
.guide .setup-steps li::marker{font-family:Archivo,system-ui,sans-serif; color:var(--accent)}
.guide .lab-card{margin-top:38px}
.guide .lab-card caption{text-align:left; margin-bottom:10px; color:var(--grey); font-size:14px}
.guide .lab-card table{min-width:530px}
.guide th[scope=row]{text-transform:none; font-family:ui-monospace,monospace; letter-spacing:0}
.guide td{font-variant-numeric:tabular-nums; vertical-align:top}
.guide code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em}
.guide details{margin:20px 0; border-block:1px solid var(--line); padding:14px 0}
.guide summary{font:600 14px/1.6 Archivo,system-ui,sans-serif; cursor:pointer}
.guide details[open] summary{margin-bottom:14px}
.guide pre{overflow-x:auto; padding:12px; border-radius:6px; background:var(--paper); font-size:14px}
.guide .questions h3{margin-top:23px}
.guide .sources{font-size:15px; overflow-wrap:anywhere}
.guide .sources h2{font-size:18px}
.guide :is(a,summary):focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.guide [id]{scroll-margin-top:20px}
@media (max-width:620px){
  .guide h1{font-size:34px}
  .guide .card{padding:20px 18px}
  .guide .pipeline{grid-template-columns:1fr}
  .guide .pipeline li{padding:16px 18px}
  .guide .step-number{margin-bottom:10px}
  .guide blockquote{font-size:20px}
  .guide .actions .cta{font-size:14px; padding:13px 17px}
}