/* Стиль страниц-ответов.
   Отдельный файл, а не десять копий внутри страниц: правка типографики
   в одном месте, а браузер тянет его один раз на весь обход сайта.
   Палитра, шкала, шапка, кнопки и подвал — те же, что на главной и в
   квизе, чтобы переход со страницы на страницу не читался как переход
   на другой сайт. */
:root{
  --navy:#12203a; --navy-deep:#0A1729; --navy-950:#060F1E;
  --navy-raised:#1B2C4A; --navy-edge:#2A3D60;
  --gold:#c9a227; --gold-bright:#E6C24E; --gold-ink:#7A5C0E;
  --blue-soft:#AEC2DE; --blue-line:#8fa8cc;
  --paper:#EEF2F7; --paper-deep:#E3EAF3; --card:#fff;
  --line:#C7D2E2; --ink:#101C31; --ink-2:#3C4A63;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Segoe UI Mono","Roboto Mono",Consolas,monospace;

  --r:4px; --r2:10px;
  --sh1:0 1px 2px rgba(10,23,41,.07), 0 10px 24px -14px rgba(10,23,41,.30);
  --ease:cubic-bezier(.2,.7,.25,1);
}
*{box-sizing:border-box}
/* Кегли в rem от базового размера документа: у аудитории 45+ он часто
   крупнее обычного, и в пикселях эта настройка игнорируется полностью. */
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 1.125rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  overflow-x:clip;
  /* Тёплая подсветка сверху — та же деталь, что на первом экране
     главной. Собрана градиентом: ни одного внешнего запроса. */
  background-image:radial-gradient(120% 50% at 82% -6%,rgba(201,162,39,.10),transparent 62%);
  background-repeat:no-repeat;
  /* Место под нижнюю панель со звонком, иначе она накрывает подвал. */
  padding-bottom:80px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}

.wrap{max-width:720px;margin:0 auto;padding:0 20px;width:100%}

/* --- шапка: один в один с главной и квизом --- */
.head{display:flex;align-items:center;min-height:68px;gap:6px 10px;
  flex-wrap:wrap;background:var(--navy-deep);padding:0 20px;
  position:sticky;top:0;z-index:8;box-shadow:0 1px 0 rgba(255,255,255,.07)}
.head .mark{display:flex;align-items:center;gap:10px;color:#fff;
  text-decoration:none;padding:6px 0;min-width:0;
  font:700 0.6875rem/1.2 var(--sans);letter-spacing:.055em;
  text-transform:uppercase}
.head .mark img{width:34px;height:34px;flex:0 0 34px}
.head .mark span{display:block;line-height:1.2;white-space:nowrap}
.head .tel{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 6px;border-radius:var(--r);
  color:var(--gold-bright);text-decoration:none;
  font:700 0.875rem/1 var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.head .tel::before{content:"";width:17px;height:17px;flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.head .tel:active{background:rgba(230,194,78,.16)}
/* Ниже 400 название и телефон в строку не встают и наезжают друг на
   друга — проверено на снимке. Прячем подпись, эмблема остаётся. */
@media (max-width:399px){ .head .mark span{display:none} }

/* --- хлебные крошки --- */
.crumbs{max-width:720px;margin:0 auto;padding:18px 20px 0;
  font:700 0.75rem/1.4 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.crumbs a{color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid rgba(60,74,99,.35)}

/* --- текст --- */
main{padding-top:4px;padding-bottom:40px}
h1{font-size:clamp(1.75rem,1.2rem + 2.6vw,2.75rem);line-height:1.1;
  font-weight:800;letter-spacing:-.026em;margin:14px 0 22px;
  text-wrap:balance;position:relative;padding-bottom:20px}
/* Золотая черта под заголовком — та же отбивка разделов, что на
   главной. Здесь она отделяет вопрос от короткого ответа. */
h1::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;
  background:var(--gold)}
h2{font-size:clamp(1.3125rem,1.1rem + 1vw,1.625rem);line-height:1.22;
  font-weight:800;letter-spacing:-.018em;margin:40px 0 12px;
  text-wrap:balance}
p{margin:0 0 16px;max-width:62ch}
a{color:#0B4FA8}

/* Короткий ответ. Стоит первым и выделен: человек в тревоге читает две
   строки и решает, остаться или уйти. Полоска слева заменена на белую
   карточку с золотой чертой сверху — цветной кант слева у скруглённой
   карточки выдаёт шаблон, а карточка с чертой читается как выписка. */
.lead{font-size:1.1875rem;line-height:1.55;background:var(--card);
  padding:20px 18px 22px;border-radius:var(--r2);border:1px solid var(--line);
  margin:0 0 10px;box-shadow:var(--sh1);position:relative;overflow:hidden;
  max-width:none}
.lead::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,39,0))}

@media (min-width:600px){ .lead{padding:26px 26px 28px} }

/* --- призыв --- */
.cta{background:var(--navy-deep);color:#fff;border-radius:var(--r2);
  padding:28px 22px 30px;margin:44px 0 10px;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,39,.12))}
.cta h2{margin:0 0 12px;color:#fff}
.cta p{color:var(--blue-soft);max-width:46ch}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:15px 22px;border-radius:var(--r);
  text-decoration:none;font:800 1.0625rem/1.15 var(--sans);text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s var(--ease),transform .09s var(--ease),
             border-color .12s var(--ease),box-shadow .16s var(--ease)}
.btn-gold{background:var(--gold);color:var(--navy-deep);
  box-shadow:0 10px 26px -14px rgba(201,162,39,.85)}
.cta .btn-gold{box-shadow:none}
.btn-line{border:1.5px solid rgba(174,194,222,.55);color:#fff;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:var(--gold-bright);
    box-shadow:0 14px 30px -14px rgba(201,162,39,1)}
  .btn-line:hover{border-color:var(--gold);color:var(--gold-bright)}
}
/* На касании ховера нет — отклик даём нажатием, иначе кнопка кажется
   неживой. */
.btn:active{transform:translateY(1px) scale(.995)}
.btn-gold:active{background:#B08D1E}
.btn-line:active{background:rgba(174,194,222,.14)}
@media (max-width:479px){ .btns{flex-direction:column} .btn{width:100%} }

/* --- соседние вопросы --- */
.rel{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rel li{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);transition:border-color .16s var(--ease),
    box-shadow .16s var(--ease)}
.rel a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:60px;padding:14px 18px;text-decoration:none;color:var(--ink);
  font-weight:700;line-height:1.4}
.rel a::after{content:"→";flex:0 0 34px;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--gold-ink);font-weight:400;
  transition:transform .16s var(--ease),border-color .16s}
@media (hover:hover) and (pointer:fine){
  .rel li:hover{border-color:var(--blue-line);box-shadow:var(--sh1)}
  .rel a:hover::after{transform:translateX(3px);border-color:var(--gold)}
}
.rel a:active{color:var(--gold-ink)}

/* --- подвал --- */
footer{background:var(--navy-950);color:var(--blue-soft);
  padding:44px 0 36px;margin-top:52px;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,39,.15))}
footer a{color:#fff}
.fname{color:#fff;font-weight:800;font-size:1.125rem;letter-spacing:-.01em}
footer .small{font-size:0.9375rem;line-height:1.55;margin:12px 0;max-width:52ch}
.disc{font-size:0.8125rem;line-height:1.5;color:#8399B9;margin:22px 0 0;
  padding-top:18px;border-top:1px solid rgba(174,194,222,.16);max-width:70ch}

/* --- нижняя панель ---
   Вид и порог совпадают с главной: на десктопе её нет вовсе, там телефон
   и так стоит в шапке, а прибитая ко дну полоса во всю ширину экрана
   выглядит как баннер. Золотом выделена заявка, а не звонок — так же,
   как на главной, иначе при переходе туда-сюда кнопки меняются местами
   по цвету. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:9;display:none;
  gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,23,41,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(201,162,39,.35)}
.bar a{flex:1;min-height:52px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r);text-decoration:none;
  font:700 1rem/1.1 var(--sans)}
.bar .b1{border:1.5px solid rgba(174,194,222,.55);color:#fff;flex:0 0 44%}
.bar .b1:active{background:rgba(174,194,222,.16)}
.bar .b2{background:var(--gold);color:var(--navy-deep)}
.bar .b2:active{background:#B08D1E}
@media (min-width:900px){ body{padding-bottom:0} }
@media (max-width:899px){ .bar{display:flex} }

:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

/* Уважаем системную настройку «меньше движения»: анимаций здесь нет,
   но нажатие кнопки тоже сдвиг. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
  .btn:active{transform:none}
}