/* GADS — внешняя витрина. Направление A «Канал», палитра кабинета.
 *
 * Один файл на все публичные страницы: лендинг и юридические документы.
 * Отдаётся с /srv/legal/brand.css, то есть по адресу https://gadslink.tech/brand.css
 *
 * Шрифт self-hosted намеренно. Сервис продаёт приватность — тянуть гарнитуру с
 * серверов Google значит отдавать им IP каждого посетителя. Файлы кладутся в
 * /srv/legal/fonts/ (см. site/README.md); если их там нет, вёрстка молча падает
 * на системный гротеск и остаётся рабочей.
 */

/* Golos Text — вариативная гарнитура: один файл несёт все веса от 400 до 900,
 * поэтому начертаний здесь четыре, а не шестнадцать, и режутся они по алфавитам,
 * а не по весам. Браузер тянет только тот алфавит, что встретился на странице.
 * Файлы лежат у нас, посетитель к Google не обращается. SIL OFL 1.1. */

@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/fonts/golos-text-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/fonts/golos-text-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- токены --------------------------------------------------------------
 * Палитра кабинета: жжёный оранжевый на кофейном.
 *
 * Два правила выведены из замера, а не из вкуса:
 *  1. На оранжевом — только тёмная краска. Белый текст на нём даёт 2.80:1,
 *     кофейный — 6.65:1.
 *  2. На светлом фоне оранжевый работает только заливкой. Как цвет текста
 *     он даёт 2.45:1, поэтому акцент светлой темы — коричневый #7C2D12. */
:root{
  --bg:#FFEDD5;
  --surface:#FFF7ED;
  --fg:#7C2D12;
  --muted:#C2410C;
  --line:#FDBA74;
  --accent:#7C2D12;
  --accent-fg:#FFF7ED;
  --accent-soft:#FFF7ED;
  --radius:14px;
  --body:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1C1009;
    --surface:#2D1A0E;
    --fg:#FFF7ED;
    --muted:#FDBA74;
    --line:#3A2413;
    --accent:#F97316;
    --accent-fg:#1C1009;
    --accent-soft:#2D1A0E;
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.15;}
p{margin:0;}
a{color:var(--accent);}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

/* .wrap отвечает за горизонтальные поля, секционные правила ниже — только за
 * вертикальные, и делают это через padding-top/padding-bottom. Шорткат
 * `padding: <вертикаль> 0` здесь использовать НЕЛЬЗЯ: специфичность у .hero,
 * .section и .wrap одинаковая, секционные правила идут позже и обнулили бы
 * горизонтальные поля целиком — страница прилипает к краю окна.
 * Longhand, а не padding-block: сайт открывают из встроенного браузера Телеграма,
 * где встречаются старые WebView. */
.wrap{max-width:60rem; margin:0 auto; padding-left:clamp(1.5rem,5vw,3.5rem); padding-right:clamp(1.5rem,5vw,3.5rem);}
.narrow{max-width:44rem;}

/* --- шапка --------------------------------------------------------------- */
.site-head{padding-top:clamp(1.5rem,4vw,2.25rem); padding-bottom:clamp(1.5rem,4vw,2.25rem);}
.brand{display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit;}
.brand svg{width:34px; height:34px; color:var(--accent); flex:none;}
.brand b{
  font-weight:900; font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase;
}

/* --- герой --------------------------------------------------------------- */
.hero{padding-top:clamp(2rem,6vw,4.5rem); padding-bottom:clamp(2rem,5vw,3.5rem);}
.hero h1{font-size:clamp(2rem,5.5vw,3.25rem); margin:0 0 1.1rem; max-width:17ch;}
.hero .sub{font-size:clamp(1.05rem,2.2vw,1.2rem); color:var(--muted); max-width:48ch;}
.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.1rem;
}

/* --- кнопки -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  background:var(--accent); color:var(--accent-fg); font-weight:700; font-size:1rem;
  padding:.85rem 1.6rem; border-radius:10px; border:0; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.btn:hover{opacity:.9;}
.btn--ghost{background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent);}
.btn-row{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-top:2rem;}
.btn-note{font-size:.88rem; color:var(--muted);}

/* --- секции -------------------------------------------------------------- */
.section{padding-top:clamp(2.5rem,6vw,4rem); padding-bottom:clamp(2.5rem,6vw,4rem); border-top:1px solid var(--line);}
.section > h2{font-size:clamp(1.5rem,3.2vw,2rem); margin-bottom:.6rem;}
.section > .lede{color:var(--muted); max-width:52ch; margin-bottom:2rem;}

/* --- шаги ---------------------------------------------------------------- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:1rem; counter-reset:s;}
@media (min-width:46rem){ .steps{grid-template-columns:repeat(3,1fr);} }
.steps li{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; counter-increment:s;
}
.steps li::before{
  content:counter(s); display:grid; place-items:center; width:1.9rem; height:1.9rem;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-family:var(--mono); font-size:.8rem; margin-bottom:.9rem;
}
.steps b{display:block; font-size:1rem; margin-bottom:.3rem;}
.steps span{font-size:.92rem; color:var(--muted); line-height:1.55;}

/* Блоки тарифной сетки и списка стран здесь намеренно отсутствуют: цены и состав
 * локаций на витрине не публикуются, пока тарифы не утверждены. Появятся вместе
 * с ними, а не «на будущее» — мёртвый CSS переживает любые договорённости. */

/* --- карточки-факты ------------------------------------------------------ */
.facts{display:grid; gap:1rem; grid-template-columns:1fr;}
@media (min-width:46rem){ .facts{grid-template-columns:1fr 1fr;} }
.fact{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;}
.fact h3{font-size:1rem; margin-bottom:.35rem;}
.fact p{font-size:.93rem; color:var(--muted); line-height:1.6;}

/* --- документы (оферта, политика) ---------------------------------------- */
.doc{padding-top:clamp(2rem,5vw,3.5rem); padding-bottom:clamp(3rem,7vw,5rem);}
.doc h1{font-size:clamp(1.6rem,4vw,2.2rem); margin-bottom:2rem;}
.doc h2{font-size:1.1rem; margin:2.5rem 0 .75rem;}
.doc p,.doc li{margin:0 0 .95rem; color:var(--fg);}
.doc ul{padding-left:1.25rem; margin:0 0 1rem;}
.doc .back{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.9rem;
  text-decoration:none; color:var(--muted); margin-bottom:2.5rem;
}
.doc .back:hover{color:var(--accent);}

/* --- подвал -------------------------------------------------------------- */
/* Подвал сам не .wrap — поля держит вложенный в него .wrap. Вертикальные отступы
 * всё равно longhand: правило единое на весь файл, чтобы шорткат сюда не вернулся. */
.site-foot{border-top:1px solid var(--line); padding-top:2rem; padding-bottom:3.5rem; color:var(--muted); font-size:.9rem;}
.site-foot nav{display:flex; gap:1.25rem; flex-wrap:wrap; margin-bottom:1rem;}
.site-foot nav a{color:var(--muted);}
.site-foot nav a:hover{color:var(--accent);}
.site-foot .legal{font-size:.85rem; line-height:1.6;}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important;} }