/* Стили сайта поверх tokens.css. Встроенных стилей на страницах нет: их запрещает Content-Security-Policy. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--text-base)/1.55 var(--font); }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
/* Длинные названия, имена и узбекские слова переносятся, а не раздвигают страницу на телефоне. */
h1, h2, h3, p, li, a, span { overflow-wrap: anywhere; }
.page { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4) var(--space-6); }
.top { max-width: var(--content-max); margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-weight: 700; font-size: var(--text-lg); color: var(--text); text-decoration: none; }
.brand.subtle { font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.brand-mark { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: var(--brand-on); align-items: center; justify-content: center; }
.brand-mark .icon { width: 18px; height: 18px; }
.brand-mark.big { width: 44px; height: 44px; border-radius: 12px; margin-bottom: var(--space-3); }
.brand-mark.big .icon { width: 26px; height: 26px; }
.lang { display: flex; gap: var(--space-1); align-items: center; color: var(--muted); font-size: var(--text-sm); }
.lang a, .lang-current { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
.lang a { color: var(--accent); text-decoration: none; }
.lang-current { color: var(--text); font-weight: 700; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); }
.center { text-align: center; }
.narrow { max-width: 420px; margin: var(--space-6) auto; }
.narrow h1 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.big-code { font-size: 44px; font-weight: 700; color: var(--accent); margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-5); border-radius: var(--radius-control); background: var(--accent); color: var(--accent-on); font-weight: 700; text-decoration: none; border: 0; }
.btn.block { display: flex; width: 100%; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.light { background: var(--surface); color: var(--brand); }
.section-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: var(--space-5) var(--space-1) var(--space-2); }
.footer { text-align: center; color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-6); }
.footer a { color: var(--muted); }
.footer .lang { justify-content: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Страница бизнеса: на телефоне — колонка и кнопка внизу, на планшете — прайс в две колонки,
   на компьютере — карточка бизнеса слева стоит на месте при прокрутке. */
.biz { display: grid; gap: var(--space-4); }
.biz-card { display: grid; gap: var(--space-3); }
.biz-head { display: flex; gap: var(--space-3); align-items: center; }
.biz-head > div { min-width: 0; }
.biz-head h1 { font-size: var(--text-xl); }
.biz-sub { margin: 2px 0 0; font-size: var(--text-sm); }
.logo { width: 56px; height: 56px; border-radius: var(--radius-card); flex: none; object-fit: contain; }
/* Логотип рисуют под светлый фон: в тёмной теме тёмные буквы на прозрачном пропали бы. JPEG-логотип и так на белом. */
img.logo { background: #fff; border: 1px solid var(--line); }
.logo-default { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-on); }
.logo-default .icon { width: 28px; height: 28px; }
.biz-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.biz-facts li { display: flex; gap: var(--space-2); align-items: flex-start; }
.biz-facts .icon { color: var(--accent); margin-top: 2px; }
.hint { margin: 0; text-align: center; color: var(--muted); font-size: var(--text-sm); }
.chips { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-1) 0; scrollbar-width: none; }
.chips a { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.chips a:first-child { background: var(--accent-soft); color: var(--accent-soft-text); border-color: transparent; }
.price-section { scroll-margin-top: var(--space-4); }
.list { list-style: none; margin: 0; padding: 0 var(--space-4); }
.list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--tap); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.service-name { display: grid; min-width: 0; }
.service-time, .master-skills { color: var(--muted); font-size: var(--text-sm); }
.service-price { font-weight: 700; white-space: nowrap; }
.list li.master { justify-content: flex-start; }
.master-text { display: grid; min-width: 0; }
.master-name { font-weight: 700; }
.avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; }
.initial { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-soft-text); font-size: 22px; font-weight: 700; }
.contact { color: var(--text); text-decoration: none; display: flex; gap: var(--space-2); align-items: center; width: 100%; min-height: var(--tap); }
.contact .icon { color: var(--accent); }
.book-bar { position: sticky; bottom: 0; margin: var(--space-5) calc(-1 * var(--space-4)) calc(-1 * var(--space-6)); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
@media (min-width: 640px) {
  .services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); align-items: start; }
}
@media (min-width: 1024px) {
  .biz { grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: var(--space-5); }
  .biz-side { position: sticky; top: var(--space-4); }
  .book-bar { display: none; }
}
/* Главная: на телефоне — колонка, на планшете — шаги в ряд и плитки 2×2, на компьютере — первый экран в две колонки. */
.landing section { margin: var(--space-6) 0; }
.landing h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.hero { display: grid; gap: var(--space-5); align-items: center; }
.hero h1 { font-size: var(--text-hero); }
.lead { color: var(--muted); font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mock { background: var(--brand-soft); border-radius: var(--radius-card); padding: var(--space-4); }
.mock-title { margin: 0 0 var(--space-2); color: var(--brand-soft-text); font-size: var(--text-sm); }
.mock-bubble { margin: 0; background: var(--surface); border-radius: var(--radius-control); padding: var(--space-3); }
.mock-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.mock-time { background: var(--surface); border-radius: var(--radius-control); padding: var(--space-2); text-align: center; font-weight: 700; color: var(--brand-soft-text); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-soft-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4) var(--space-3); text-align: center; }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.feature-icon .icon { width: 24px; height: 24px; }
.feature h3 { font-size: var(--text-base); margin: var(--space-2) 0 var(--space-1); }
.feature p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badges li { background: var(--brand); color: var(--brand-on); border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.soon { margin-top: var(--space-3); border: 1px dashed var(--brand); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.soon p { margin: 0; }
.soon a { display: inline-flex; gap: var(--space-1); align-items: center; min-height: var(--tap); text-decoration: none; }
.tariffs { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 80%); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; }
.tariff { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); scroll-snap-align: start; }
.tariff.accent { border: 2px solid var(--brand); background: var(--brand-soft); }
.tariff h3 { font-size: var(--text-lg); }
.tariff-price { font-weight: 700; font-size: var(--text-lg); margin: var(--space-1) 0 var(--space-2); }
.tariff ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: var(--text-sm); }
.pilot { background: var(--brand); color: var(--brand-on); border-radius: var(--radius-card); padding: var(--space-5) var(--space-4); }
.pilot p { color: var(--brand-on); }
@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tariffs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.2fr 1fr; }
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tariffs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}