/* Sober driver pages, version 2 (ro/sofer-treaz-tarife, ru/sofer-treaz, en/sofer-treaz).
   Written for someone who has been drinking, at night, holding a phone in one
   hand: big type, one obvious button under the thumb, nothing to read twice.
   Built on the personal-driver shell (header, footer, contact popup). */

:root {
  --st-ink: #1c1917;
  --st-ink-2: #231f1c;
  --st-surface: #292524;
  --st-raise: #34302c;
  --st-line: rgba(250, 247, 242, .12);
  --st-line-2: rgba(250, 247, 242, .22);
  --st-text: #faf7f2;
  --st-soft: rgba(250, 247, 242, .78);
  --st-mute: rgba(250, 247, 242, .6);
  --st-amber: #f59e0b;
  --st-amber-2: #fbbf24;
  --st-green: #22c55e;
  --st-wa: #25d366;
  --st-red: #f87171;
  --st-head: "Outfit", "Inter", system-ui, sans-serif;
  --st-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-r: 18px;
}
body, #wrapper { background: var(--st-ink) !important; }
main#content.st,
.st {
  background: var(--st-ink) !important;
  color: var(--st-text);
  font: 400 18px/1.55 var(--st-body);
}
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.st h1, .st h2, .st h3 { font-family: var(--st-head); color: var(--st-text); letter-spacing: -.01em; margin: 0; text-transform: none; }
.st p { margin: 0; }
.st a { color: inherit; }
.st :focus-visible { outline: 3px solid var(--st-amber-2); outline-offset: 3px; border-radius: 10px; }

/* ------------------------------------------------------------- first screen */
.st-hero { padding: 92px 0 28px; }
.st-hero-grid { display: grid; gap: 22px; }
.st-hero-side { display: grid; gap: 14px; }
.st-live { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--st-soft); }
.st-live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--st-green); box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.st-hero h1 { margin-top: 10px; font-size: clamp(30px, 8vw, 54px); font-weight: 700; line-height: 1.08; }
.st-lead { margin-top: 18px; font-size: clamp(19px, 4.8vw, 22px); line-height: 1.45; color: var(--st-soft); max-width: 34ch; }
.st-lead b { color: var(--st-text); font-weight: 600; }

.st-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.st-fact { padding: 14px 16px; border: 1px solid var(--st-line); border-radius: var(--st-r); background: var(--st-ink-2); }
.st-fact b { display: block; font: 700 clamp(30px, 8.5vw, 42px)/1 var(--st-head); color: var(--st-amber-2); letter-spacing: -.02em; white-space: nowrap; }
.st-fact span { display: block; margin-top: 6px; font-size: 15px; color: var(--st-soft); }

/* the one button */
.st-actions { display: grid; gap: 12px; }
.st-call {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 12px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--st-amber-2), var(--st-amber));
  color: var(--st-ink) !important;
  text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(245, 158, 11, .9);
  -webkit-tap-highlight-color: transparent;
}
.st-call:active { transform: scale(.985); }
.st-call-ic { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(28, 25, 23, .14); }
.st-call-ic svg { width: 26px; height: 26px; }
.st-call-t { display: grid; gap: 2px; line-height: 1.1; }
.st-call-t small { font: 600 16px var(--st-body); }
.st-call-t b { font: 700 clamp(25px, 7vw, 30px) var(--st-head); letter-spacing: .01em; white-space: nowrap; }
.st-call::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 26px;
  border: 2px solid rgba(251, 191, 36, .55);
  animation: st-ring 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes st-ring { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.06); } }

.st-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 18px;
  border: 0;
  border-radius: 20px;
  background: var(--st-wa);
  color: #06210f !important;
  font: 700 19px var(--st-body);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.st-wa svg { width: 26px; height: 26px; flex: 0 0 auto; }
.st-wa:active { transform: scale(.985); }
.st-wa[aria-busy="true"] { opacity: .8; }
.st-more { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
.st-more a, .st-more button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--st-soft);
  font: 600 17px var(--st-body);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.st-more svg { width: 22px; height: 22px; flex: 0 0 auto; }
.st-more a:last-child svg { color: var(--st-amber-2); }
/* when to call: an hour ahead, or book in advance */
.st .st-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 14px;
  background: rgba(245, 158, 11, .08);
  color: var(--st-soft);
  font: 400 16px/1.5 var(--st-body);
}
.st .st-tip b { color: var(--st-text); font-weight: 600; }
.st-tip svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; color: var(--st-amber-2); }
.st-promise { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 16px; color: var(--st-soft); }
.st-promise li { display: inline-flex; align-items: center; gap: 8px; }
.st-promise li::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

@media (min-width: 900px) {
  .st-hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 56px; }
  .st-hero-side { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--st-line); border-radius: 26px; background: var(--st-surface); }
}

/* --------------------------------------------------------- phone bar */
.st-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 1040;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--st-line-2);
  border-radius: 22px;
  background: rgba(35, 31, 28, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(140%);
  transition: transform .25s ease;
}
.st-bar.is-on { transform: none; }
.st-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; border-radius: 16px; font: 700 18px var(--st-body); text-decoration: none; }
.st-bar .is-call { background: linear-gradient(180deg, var(--st-amber-2), var(--st-amber)); color: var(--st-ink) !important; }
.st-bar .is-wa { background: var(--st-wa); color: #06210f !important; }
.st-bar svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .st-bar { display: none; } }

/* ------------------------------------------------------------ sections */
.st-sec { padding: 44px 0; border-top: 1px solid var(--st-line); }
.st-sec h2 { font-size: clamp(26px, 6.4vw, 38px); font-weight: 700; line-height: 1.15; max-width: 22ch; }
.st-sec .st-sub { margin-top: 10px; color: var(--st-soft); max-width: 60ch; }
@media (min-width: 900px) { .st-sec { padding: 72px 0; } }

/* steps: a real sequence, so numbered */
.st-steps { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: st; }
.st-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--st-r); background: var(--st-ink-2); border: 1px solid var(--st-line); }
.st-steps li::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--st-amber); color: var(--st-ink); font: 700 24px var(--st-head); }
.st-steps h3 { font-size: 21px; font-weight: 700; line-height: 1.25; }
.st-steps p { margin-top: 4px; color: var(--st-soft); }
@media (min-width: 900px) { .st-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .st-steps li { grid-template-columns: 1fr; } }

/* prices */
.st-prices { display: grid; gap: 10px; margin-top: 22px; }
.st-price { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 16px 18px; border-radius: var(--st-r); background: var(--st-ink-2); border: 1px solid var(--st-line); }
.st-price h3 { font-size: 19px; font-weight: 600; font-family: var(--st-body); line-height: 1.3; }
.st-price p { grid-column: 1 / -1; font-size: 15.5px; color: var(--st-mute); }
.st-price b { font: 700 22px var(--st-head); color: var(--st-amber-2); white-space: nowrap; }
.st-price.is-zero b { color: var(--st-green); }
.st-note { margin-top: 14px; color: var(--st-soft); font-size: 16px; }
@media (min-width: 900px) { .st-prices { grid-template-columns: 1fr 1fr; } }

/* 500 or 35 000 */
.st-cmp { display: grid; gap: 14px; margin-top: 22px; }
.st-cmp-row { display: grid; gap: 8px; }
.st-cmp-row .st-cmp-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.st-cmp-row .st-cmp-top b { font: 700 22px var(--st-head); white-space: nowrap; }
.st-cmp-bar { height: 14px; border-radius: 99px; background: var(--st-raise); overflow: hidden; }
.st-cmp-bar i { display: block; height: 100%; border-radius: inherit; }
.st-cmp-row.is-us .st-cmp-top b { color: var(--st-green); }
.st-cmp-row.is-us i { width: 1.6%; min-width: 10px; background: var(--st-green); }
.st-cmp-row.is-fine .st-cmp-top b { color: var(--st-red); }
.st-cmp-row.is-fine i { width: 100%; background: linear-gradient(90deg, #ef4444, #f87171); }
.st-cmp-take { padding: 16px 18px; border-radius: var(--st-r); border: 1px solid rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .1); color: var(--st-text); font-size: 18px; }
.st-cmp-take b { color: var(--st-amber-2); }

/* callback */
.st-cb { display: grid; gap: 16px; padding: 22px; border-radius: 24px; background: var(--st-surface); border: 1px solid var(--st-line); }
.st-cb form { display: grid; gap: 12px; }
.st-cb label { font-size: 16px; font-weight: 600; color: var(--st-soft); }
.st-cb .form-control,
.st-cb input[type="tel"] {
  width: 100%;
  height: 60px;
  padding: 0 16px;
  border: 1px solid var(--st-line-2) !important;
  border-radius: 16px !important;
  background: var(--st-ink-2) !important;
  color: var(--st-text) !important;
  -webkit-text-fill-color: var(--st-text);
  font: 600 20px var(--st-body);
  box-shadow: none !important;
}
.st-cb button[type="submit"] {
  min-height: 60px;
  border: 0;
  border-radius: 16px;
  background: var(--st-text);
  color: var(--st-ink);
  font: 700 19px var(--st-body);
  cursor: pointer;
}
.st-cb button[disabled] { opacity: .6; }
.st-cb-msg { min-height: 1.4em; font-size: 17px; }
.st-cb-msg.is-ok { color: var(--st-green); }
.st-cb-msg.is-err { color: var(--st-red); }
/* the shared country picker, dark */
.st-cb .pr-phone { background: var(--st-ink-2) !important; border: 1px solid var(--st-line-2) !important; border-radius: 16px !important; box-shadow: none !important; }
.st-cb .pr-phone input { border: 0 !important; background: transparent !important; height: 58px; }
.st-cb .pr-phone-pick { background: none !important; color: var(--st-text) !important; border-color: var(--st-line) !important; }
.st-cb .pr-phone-iso { background: rgba(250, 247, 242, .12) !important; color: var(--st-text) !important; }
.st-cb .pr-phone-dial { color: var(--st-text) !important; }
.st-cb .pr-phone-note { color: var(--st-mute) !important; font-size: 15px; }
.st .pr-phone-menu, body .pr-phone-menu { background: var(--st-ink, #1c1917) !important; border: 1px solid rgba(250, 247, 242, .22) !important; color: #faf7f2 !important; }
body .pr-phone-menu .pr-phone-search { background: #231f1c !important; color: #faf7f2 !important; border: 1px solid rgba(250, 247, 242, .22) !important; }
body .pr-phone-menu .pr-phone-opt { background: none !important; color: #faf7f2 !important; }
body .pr-phone-menu .pr-phone-opt * { color: inherit !important; }
body .pr-phone-menu .pr-phone-opt:hover, body .pr-phone-menu .pr-phone-opt[aria-selected="true"] { background: rgba(245, 158, 11, .2) !important; }

/* trust */
.st-trust { display: grid; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.st-trust li { padding: 16px 18px; border-radius: var(--st-r); background: var(--st-ink-2); border: 1px solid var(--st-line); }
.st-trust b { display: block; font-size: 19px; }
.st-trust span { color: var(--st-soft); font-size: 16px; }
.st-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 48px; color: var(--st-text); text-decoration: none; font-size: 18px; }
.st-rating i { font-style: normal; color: var(--st-amber-2); letter-spacing: 2px; }
@media (min-width: 900px) { .st-trust { grid-template-columns: repeat(3, 1fr); } }

/* questions */
.st-faq { display: grid; gap: 10px; margin-top: 22px; }
.st-faq details { border-radius: var(--st-r); background: var(--st-ink-2); border: 1px solid var(--st-line); }
.st-faq summary { display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 64px; padding: 14px 18px; list-style: none; cursor: pointer; font: 600 18px/1.35 var(--st-body); }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--st-raise); font: 600 22px/1 var(--st-body); color: var(--st-amber-2); }
.st-faq details[open] summary::after { content: "−"; }
.st-faq details p { padding: 0 18px 18px; color: var(--st-soft); }

/* long reads (law, what it is) */
.st-read { max-width: 70ch; }
.st-read p { margin-top: 14px; color: var(--st-soft); }
.st-read h3 { margin-top: 26px; font-size: 22px; }
.st-read ul { margin: 10px 0 0; padding-left: 22px; color: var(--st-soft); }
.st-read li { margin: 6px 0; }
.st-read b, .st-read strong { color: var(--st-text); }
.st-read a { color: var(--st-amber-2); }
.st-src { margin-top: 18px; font-size: 15px; color: var(--st-mute); }

/* features */
.st-feats { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.st-feats li { padding: 16px 18px; border-radius: var(--st-r); background: var(--st-ink-2); border: 1px solid var(--st-line); }
.st-feats b { display: block; font-size: 19px; }
.st-feats span { color: var(--st-soft); font-size: 16px; }
@media (min-width: 900px) { .st-feats { grid-template-columns: repeat(3, 1fr); } }

/* other services */
.st-links { display: grid; gap: 10px; margin-top: 22px; }
.st-links a { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 16px 18px; border-radius: var(--st-r); background: var(--st-ink-2); border: 1px solid var(--st-line); text-decoration: none; min-height: 64px; }
.st-links a b { font-size: 18px; }
.st-links a span { grid-column: 1; font-size: 15.5px; color: var(--st-mute); }
.st-links a em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-weight: 700; color: var(--st-amber-2); white-space: nowrap; }
.st-links a:hover { border-color: rgba(245, 158, 11, .5); }
@media (min-width: 900px) { .st-links { grid-template-columns: repeat(2, 1fr); } }

.st-final { text-align: left; }
.st-final .st-actions { margin-top: 20px; max-width: 520px; }
.st-updated { margin-top: 24px; font-size: 14px; color: var(--st-mute); }

@media (prefers-reduced-motion: reduce) {
  .st-call::after { animation: none; opacity: 0; }
  .st-bar { transition: none; }
}
/* room for the phone bar at the end of the page */
@media (max-width: 899px) { .st { padding-bottom: 92px; } }

/* grid children may shrink below their content (the phone field is wide) */
.st-cb, .st-cb > *, .st-cb form > * { min-width: 0; }
.st-cb .pr-phone, .st-cb .pr-phone-wrap { width: 100%; max-width: 100%; }
.st-hero { padding-top: 76px; }
@media (min-width: 900px) { .st-hero { padding-top: 140px; padding-bottom: 56px; } }

/* specificity: the template pads every section and .st p resets margins */
main.st section.st-hero { padding: 80px 0 28px; }
@media (min-width: 900px) { main.st section.st-hero { padding: 140px 0 56px; } }
main.st section.st-sec { padding: 44px 0; }
@media (min-width: 900px) { main.st section.st-sec { padding: 72px 0; } }
.st .st-lead { margin-top: 16px; }
.st .st-sub { margin-top: 10px; }
.st .st-note { margin-top: 14px; }
.st .st-steps p { margin-top: 4px; }
.st .st-read p { margin-top: 14px; }
.st .st-faq details p { margin: 0; }
.st .st-updated { margin-top: 24px; }
/* the template gives the first section of #content 160px */
#content.st section.st-hero:first-of-type { padding-top: 80px; }
@media (min-width: 900px) { #content.st section.st-hero:first-of-type { padding-top: 140px; } }

/* Outfit has no Cyrillic: on Russian pages headings use Inter, which does and is already loaded */
html[lang="ru"] .st h1, html[lang="ru"] .st h2, html[lang="ru"] .st h3,
html[lang="ru"] .st-fact b, html[lang="ru"] .st-call-t b, html[lang="ru"] .st-price b,
html[lang="ru"] .st-cmp-row .st-cmp-top b, html[lang="ru"] .st-steps li::before { font-family: var(--st-body); letter-spacing: -.015em; }
/* Inter is wider than Outfit: "15–20 мин" would push its card past a phone screen */
html[lang="ru"] .st-fact b { font-size: clamp(24px, 6.8vw, 40px); }