/* Общие стили сайта 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;
}
.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}
.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}

/* Снимок экрана — товар лицом. Рамка и лёгкая тень, чтобы светлый
   снимок не сливался с карточкой. */
.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} }