[hidden]{display:none!important}

:root{
  --red:#8F2822; --red-dark:#6A1D18; --ink:#1E262B; --ink-soft:rgba(30,38,43,.72);
  --grey:#F2F3F7; --line:#E6E6EA; --white:#fff; --star:#F5A623;
  --r-lg:30px; --r-md:18px; --r-sm:12px;
  --shadow:0 0 10px rgba(0,0,0,.07); --shadow-lift:0 14px 34px -20px rgba(30,38,43,.5);
  --bar-h:54px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--white); color:var(--ink); overflow-x:clip;
  font-family:Montserrat,-apple-system,Segoe UI,Roboto,sans-serif; font-size:16px; line-height:1.55;
  padding-bottom:var(--bar-h);
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}
h1,h2,h3{margin:0; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:30px; font-weight:800; line-height:1.16}
h2{font-size:26px; font-weight:700; line-height:1.2}
h3{font-size:18px; font-weight:700}
.red{color:var(--red)}
.muted{color:var(--ink-soft)}
section{padding:38px 0}
section.grey{background:var(--grey)}
.h2wrap{text-align:center; margin-bottom:22px}
.h2wrap p{margin:8px 0 0; color:var(--ink-soft); font-size:15px}

/* шапка */
header.top{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(6px)}
/* на телефоне шапка едет вместе со страницей — экран и так маленький */
@media(max-width:899px){header.top{position:static; backdrop-filter:none}}
header.top .row{display:flex; align-items:center; gap:12px; padding:5px 16px; max-width:1120px; margin:0 auto}
@media(min-width:900px){header.top .row{padding:10px 16px}}
header.top .logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; letter-spacing:-.01em}
header.top .logo img{width:34px; height:34px}
header.top .tel{margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--red); color:#fff;
  padding:9px 14px; border-radius:var(--r-sm); font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap}
header.top .tel svg{width:15px;height:15px;fill:currentColor}
header.top nav{display:none; gap:18px; font-size:14px; font-weight:500}
header.top nav a{text-decoration:none; color:var(--ink-soft)}
header.top nav a:hover{color:var(--red)}
@media(min-width:900px){header.top nav{display:flex}}

/* кнопки */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; text-align:center;
  font-weight:700; font-size:17px; padding:15px 20px; border-radius:var(--r-sm); border:0; cursor:pointer;
  font-family:inherit; transition:transform .12s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red); color:#fff; box-shadow:0 12px 26px -14px rgba(143,40,34,.95)}
.btn-red:hover{background:var(--red-dark)}
.btn-line{background:#fff; color:var(--ink); border:1px solid var(--line); font-size:15px; font-weight:600}
.btn-ghost{background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.35); font-size:15px; font-weight:600}

/* якорный баннер */
.anchor{background:var(--grey); padding:26px 0 30px}
.anchor-card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:24px 20px 26px; display:grid; gap:18px; overflow:hidden}
@media(min-width:900px){.anchor-card{grid-template-columns:1.15fr .85fr; align-items:center; padding:34px 36px}}
.anchor-text .eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); background:var(--grey); padding:6px 12px; border-radius:999px; margin-bottom:13px}
.anchor-text .eyebrow i{width:7px;height:7px;border-radius:50%;background:#2E9E5B;font-style:normal;box-shadow:0 0 0 4px rgba(46,158,91,.18)}
.anchor h1{font-size:29px; line-height:1.15}
@media(min-width:900px){.anchor h1{font-size:40px}}
.anchor .lead{margin:12px 0 0; font-size:15.5px; color:var(--ink-soft); max-width:520px}
.anchor-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:20px}
.anchor-actions .btn{padding:15px 22px; font-size:17px}
.anchor-tel{font-family:Montserrat,-apple-system,'Segoe UI',Roboto,sans-serif; font-weight:800; font-size:20px; text-decoration:none; color:var(--ink); line-height:1.15}
.anchor-tel small{display:block; font-size:12px; font-weight:500; color:var(--ink-soft); margin-top:3px}
.anchor-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; margin-top:20px; max-width:520px}
.anchor-facts div{background:var(--grey); border-radius:var(--r-md); padding:11px 10px; text-align:center}
.anchor-facts b{display:block; font-size:14.5px; font-weight:800; line-height:1.2}
.anchor-facts span{display:block; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-top:3px; line-height:1.25; overflow-wrap:anywhere}
@media(max-width:430px){.anchor-facts{gap:6px}
  .anchor-facts div{padding:10px 6px}
  .anchor-facts span{font-size:11.5px; letter-spacing:0; hyphens:manual}}
.anchor-zone{margin-top:14px; font-size:13px; color:var(--ink-soft)}
.anchor-car{display:flex; flex-direction:column; justify-content:center; width:100%; max-width:460px; margin:0 auto}
.anchor-car img{width:100%; height:auto; display:block}

/* плитки услуг */
.tiles{display:grid; gap:12px}
@media(min-width:700px){.tiles{grid-template-columns:1fr 1fr}}
.tile{display:block; background:var(--grey); border-radius:var(--r-lg); padding:20px 22px; text-decoration:none;
  transition:background .15s ease, transform .12s ease; border:1px solid transparent}
.tile:hover{background:#EBE7E6; border-color:#E0D2D0; transform:translateY(-2px)}
.tile b{display:block; font-family:Montserrat; font-size:21px; font-weight:700; letter-spacing:-.02em}
.tile span{display:block; font-size:14px; color:var(--ink-soft); margin-top:5px}
.tile em{display:inline-block; font-style:normal; font-size:13.5px; font-weight:700; color:var(--red); margin-top:9px}

/* две большие карточки «при/после ДТП» */
.two-big{display:grid; gap:14px; margin-bottom:22px}
@media(min-width:760px){.two-big{grid-template-columns:1fr 1fr}}
.big{display:block; background:#fff; border-radius:var(--r-lg); overflow:hidden; text-decoration:none; box-shadow:var(--shadow);
  border:1px solid var(--line); transition:transform .12s ease, border-color .15s ease}
.big:hover{transform:translateY(-2px); border-color:var(--red)}
.big .pic{height:170px; background-size:cover; background-position:center}
.big .cap{padding:15px 18px 17px}
.big .cap b{display:block; font-family:Montserrat; font-size:20px; font-weight:700}
.big .cap span{display:block; font-size:14px; color:var(--ink-soft); margin-top:4px}
.big .inside{margin:12px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); padding-top:11px}
.big .inside li{font-size:13.5px; color:var(--ink-soft); padding:3px 0 3px 16px; position:relative}
.big .inside li::before{content:''; position:absolute; left:2px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--red); opacity:.55}
.big .cap em{display:inline-flex; align-items:center; gap:8px; font-style:normal; margin-top:14px; padding:12px 20px;
  border-radius:999px; background:var(--red); color:#fff; font-size:15px; font-weight:700;
  box-shadow:0 12px 24px -15px rgba(143,40,34,.95); transition:background .15s ease}
.big:hover .cap em{background:var(--red-dark)}

/* ситуации-инструкции */
.cases{display:grid; gap:10px; margin-bottom:26px}
@media(min-width:640px){.cases{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cases{grid-template-columns:repeat(4,1fr)}}
.case{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px;
  text-decoration:none; transition:border-color .15s ease, transform .12s ease}
.case:hover{border-color:var(--red); transform:translateY(-2px)}
.case b{display:block; font-size:15.5px; margin-bottom:5px}
.case span{display:block; font-size:13.5px; color:var(--ink-soft); line-height:1.45}
.case::after{content:'Разбор \2192'; display:block; margin-top:9px; font-size:13px; font-weight:600; color:var(--red)}

/* блок «пока едем» */
.now{background:var(--grey); border-radius:var(--r-lg); padding:18px 16px 20px}
.now-head{display:flex; align-items:baseline; gap:10px; margin-bottom:13px; flex-wrap:wrap}
.now-head b{font-size:18px}
.now-head span{font-size:13px; color:var(--ink-soft)}

/* шаги */
.steps{display:grid; gap:12px}
@media(min-width:760px){.steps{grid-template-columns:1fr 1fr}}
.step{display:flex; gap:13px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px; align-items:flex-start; cursor:pointer}
.step:hover{border-color:#d9c9c6}
.step .num{flex:none; width:30px; height:30px; border-radius:9px; background:var(--red); color:#fff; font-weight:700; display:grid; place-items:center; font-size:14px}
.step.done{background:#F3F8F5; border-color:#CBE5D8}
.step.done .num{background:#2E6B4F}
.step.done .num::after{content:'✓'}
.step.done .num span{display:none}
.step b{display:block; font-size:16px; margin-bottom:3px}
.step p{margin:0; font-size:14px; color:var(--ink-soft)}
.checkhint{margin:14px 0 0; font-size:13.5px; color:var(--ink-soft); text-align:center}

/* цены */
.price-table{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.price-row{display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); align-items:baseline}
.price-row:last-child{border-bottom:0}
.price-row b{font-size:16px; flex:1}
.price-row .v{font-weight:800; color:var(--red); white-space:nowrap; font-size:17px}
.price-row small{display:block; color:var(--ink-soft); font-weight:500; font-size:13.5px; margin-top:2px}

/* отзывы */
.reviews{display:grid; gap:12px}
@media(min-width:760px){.reviews{grid-template-columns:repeat(3,1fr)}}
.rev{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 17px; text-align:center}
.rev .n{font-size:30px; font-weight:800; line-height:1}
.rev .stars{color:var(--star); font-size:15px; letter-spacing:2px; margin:6px 0 2px}
.rev .src{font-size:13.5px; color:var(--ink-soft)}
.rev a{font-size:13.5px; font-weight:600; color:var(--red); text-decoration:none; display:inline-block; margin-top:8px}

/* доверие */
.trust{display:grid; gap:16px; align-items:center}
.trust.one-col{grid-template-columns:1fr; max-width:820px}
@media(min-width:820px){.trust{grid-template-columns:280px 1fr}}
.trust .ph{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lift); background:#ddd; aspect-ratio:4/3; background-size:cover; background-position:center}
.trust ul{margin:12px 0 0; padding-left:18px; color:var(--ink-soft); font-size:15px}
.trust li{margin:5px 0}

/* вопросы */
details{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:0 16px; margin-bottom:9px}
details summary{cursor:pointer; padding:14px 0; font-weight:600; font-size:16px; list-style:none; display:flex; gap:10px; align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+'; margin-left:auto; font-size:20px; color:var(--red); font-weight:700}
details[open] summary::after{content:'–'}
details .ans{padding:0 0 15px; color:var(--ink-soft); font-size:15px}

/* контакты */
.contacts{display:grid; gap:14px}
@media(min-width:760px){.contacts{grid-template-columns:1fr 1fr}}
.contact{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 17px}
.contact b{display:block; font-size:16px; margin-bottom:5px}
.contact p{margin:0 0 5px; color:var(--ink-soft); font-size:14.5px}
.map-links{display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px; background:var(--grey)}
.map-links a{font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px}
.map-links a:hover{border-color:var(--red); color:var(--red)}
.map-holder{margin-top:14px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--grey);
  min-height:180px; display:grid; place-items:center; text-align:center; padding:22px 16px}
.map-holder p{margin:0 0 12px; color:var(--ink-soft); font-size:14px}

/* липкая панель */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:1.7fr 1fr 1fr;
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--line); gap:1px; box-shadow:0 -8px 24px -14px rgba(0,0,0,.5)}
.bar a{display:flex; align-items:center; justify-content:center; gap:7px; background:#fff; color:var(--ink);
  text-decoration:none; font-weight:600; font-size:14px; padding:0; height:var(--bar-h)}
.bar a.call{background:var(--red); color:#fff; font-weight:700; font-size:15px}
.bar svg{width:16px;height:16px;fill:currentColor}
@media(min-width:900px){.bar{display:none} body{padding-bottom:0}}

footer.site{background:var(--ink); color:rgba(255,255,255,.7); font-size:13.5px; padding:26px 0 30px}
footer.site a{color:#fff; text-decoration:none}
footer.site .cols{display:grid; gap:22px}
@media(min-width:760px){footer.site .cols{grid-template-columns:1.6fr 1fr 1.1fr 1.3fr; gap:28px}}
footer.site .fcol b{display:block; color:#fff; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px}
footer.site .fcol a{display:block; padding:4px 0; color:rgba(255,255,255,.78)}
footer.site .fcol a:hover{color:#fff}
footer.site .fcol div{padding:3px 0}
footer.site .ftel{font-family:Montserrat; font-size:18px; font-weight:800; color:#fff !important; padding-bottom:8px !important}
footer.site .fname{font-family:Montserrat; font-weight:800; font-size:20px; color:#fff; letter-spacing:-.02em}
footer.site .fname .red{color:#E07A72}
footer.site .fbrand p{margin:10px 0 0; max-width:330px; line-height:1.55}
footer.site .fbottom{display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
  margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; color:rgba(255,255,255,.55)}

/* строка раздела на телефоне: слева уровень выше, справа текущий случай */
@media(max-width:700px){
  .branchbar .bb-in{padding:7px 12px 8px; gap:8px; max-width:none}
  .bb-mob{font-family:inherit; text-align:left; cursor:pointer; align-items:center}
  .bb-mobrow{display:flex; align-items:stretch; width:100%; gap:8px}
  .bb-up{flex:none; display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--bb);
    font-size:14px; font-weight:700; padding:0 12px; min-height:40px;
    background:var(--bb-soft); border:1px solid color-mix(in srgb, var(--bb) 25%, #fff); border-radius:10px}
  .bb-up::before{content:'‹'; font-size:18px; line-height:1; margin-top:-2px}
  .bb-mob{display:flex; flex:1; min-width:0; padding:0 12px; min-height:40px; gap:8px;
    background:#fff; border:1px solid var(--line); border-radius:10px}
  .bb-mob b{flex:1; min-width:0; font-family:Montserrat; font-size:15px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .bb-mob i{margin-left:0; flex:none; width:22px; height:22px; border:0; border-radius:50%; background:var(--grey);
    position:relative; transform:none}
  .bb-mob i::before{content:''; position:absolute; left:6px; top:7px; width:8px; height:8px;
    border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:rotate(45deg)}
  .bb-mob[aria-expanded="true"] i::before{top:9px; transform:rotate(-135deg)}
}

/* кнопка с номером во второй строке */
.btn-two{flex-direction:column; gap:2px; line-height:1.2}
.btn-two b{font-weight:800; font-size:16.5px}
.btn-two small{font-size:14px; font-weight:600; opacity:.9}
@media(min-width:760px){.btn-two{flex-direction:row; gap:8px} .btn-two small{font-size:16.5px; opacity:1}
  .btn-two b::after{content:' ·'; color:inherit; opacity:.55}
  .callout-txt{flex:1 1 auto; min-width:200px} .callout-txt b{white-space:nowrap}}

/* --- телефон: компактная строка «где я» вместо ленты --- */
@media(min-width:701px){.bb-mob{display:none} .bb-mobrow{display:none}}
@media(max-width:700px){
  .branchbar .bb-phase, .branchbar .bb-tabs{display:none}
  .doc-page .crumbs, .hub .crumbs{display:none}
}

/* --- выдвижной список случаев --- */
.navsheet{position:fixed; inset:0; z-index:60; background:rgba(20,16,15,.45); display:flex; align-items:flex-end}
.navsheet[data-branch="at"]{--bb:#8F2822; --bb-soft:#FBF1F0}
.navsheet[data-branch="af"]{--bb:#2B4E9B; --bb-soft:#EFF3FC}
.navsheet-in{width:100%; background:#fff; border-radius:20px 20px 0 0; padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  max-height:86vh; overflow:auto; animation:nsUp .18s ease-out}
@keyframes nsUp{from{transform:translateY(14px); opacity:.6} to{transform:none; opacity:1}}
.ns-head{display:flex; align-items:center; margin-bottom:12px}
.ns-head b{font-family:Montserrat; font-size:17px}
.ns-close{margin-left:auto; width:36px; height:36px; border:1px solid var(--line); background:#fff; border-radius:10px;
  font-size:15px; color:var(--ink-soft); cursor:pointer}
.ns-phase{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px}
.ns-ph{display:block; text-decoration:none; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:#fff}
.ns-ph b{display:block; font-family:Montserrat; font-size:15px; color:var(--ink)}
.ns-ph span{display:block; font-size:12px; color:var(--ink-soft); margin-top:2px}
.ns-ph.is-on{background:var(--bb); border-color:var(--bb)}
.ns-ph.is-on b{color:#fff}
.ns-ph.is-on span{color:rgba(255,255,255,.82)}
.ns-label{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px}
.ns-list{display:grid; gap:2px; margin-bottom:14px}
.ns-item{display:block; text-decoration:none; color:var(--ink); font-size:15.5px; font-weight:600;
  padding:11px 12px; border-radius:10px; border:1px solid transparent}
.ns-item:first-child{color:var(--ink-soft); font-weight:500}
.ns-item:first-child::before{content:'← '}
.ns-item.is-on{background:var(--bb-soft); border-color:var(--bb); color:var(--bb)}
.ns-home{display:block; text-align:center; color:var(--ink-soft); text-decoration:none; font-size:15px; padding:6px}
@media(min-width:701px){.navsheet{display:none}}
body.ns-open .bar, body.form-focus .bar{display:none}

/* длинные слова на узком экране не должны рвать блоки */
@media(max-width:700px){
  .tile b, .tile .tile-d, .price-row b, .cnav-item b, .flag span, .pairbox-t b{overflow-wrap:anywhere}
}

/* плитки случаев */
.tiles-wrap{margin:22px 0 26px}
.tiles-head{font-family:Montserrat; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:10px}
.tiles{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tile{display:flex; flex-direction:column; text-decoration:none; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px 16px 14px; transition:border-color .15s, transform .15s, box-shadow .15s}
.tile:hover{border-color:var(--red); transform:translateY(-2px); box-shadow:0 16px 30px -22px rgba(31,26,24,.8)}
.tile-ic{width:58px; height:58px; border-radius:16px; background:#FBF1F0; display:grid; place-items:center; margin-bottom:12px}
.tile-ic svg{width:36px; height:36px; fill:var(--red)}
.tile b{font-family:Montserrat; font-size:16px; color:var(--ink); line-height:1.25; margin-bottom:5px}
.tile .tile-d{font-size:13.5px; color:var(--ink-soft); line-height:1.45; flex:1}
.tile .tile-go{margin-top:12px; font-size:13.5px; font-weight:700; color:var(--red)}
.tile .tile-go::after{content:' →'}
.tile:hover .tile-go{text-decoration:underline}

/* переключатель частей: при ДТП ↔ после ДТП */
.bb-phase{display:flex; flex:none; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff}
.bb-phase .ph{display:block; padding:6px 11px 7px; text-decoration:none; min-width:86px; background:#fff}
.bb-phase .ph + .ph{border-left:1px solid var(--line)}
.bb-phase .ph b{display:block; font-family:Montserrat; font-size:12.5px; font-weight:700; color:var(--ink-soft); line-height:1.15}
.bb-phase .ph span{display:block; font-size:10.5px; color:#9A918D; margin-top:1px}
.bb-phase .ph:hover b{color:var(--ink)}
.bb-phase .ph.is-on{background:var(--bb)}
.bb-phase .ph.is-on b{color:#fff}
.bb-phase .ph.is-on span{color:rgba(255,255,255,.8)}
@media(max-width:520px){
  .bb-phase .ph{min-width:0; padding:6px 9px 7px}
  .bb-phase .ph span{display:none}
}

/* переход во вторую часть случая */
.pairbox{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:30px 0 4px; padding:18px 20px;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--grey)}
.pairbox[data-branch="at"]{--pb:#2B4E9B; --pb-bg:#EFF3FC}
.pairbox[data-branch="af"]{--pb:#8F2822; --pb-bg:#FBF1F0}
.pairbox{background:var(--pb-bg); border-color:color-mix(in srgb, var(--pb) 22%, #fff)}
.pairbox-t{flex:1; min-width:230px}
.pairbox-t span{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--pb)}
.pairbox-t b{display:block; margin:4px 0 5px; font-family:Montserrat; font-size:19px; color:var(--ink)}
.pairbox-t i{display:block; font-style:normal; font-size:14.5px; color:var(--ink-soft); line-height:1.5}
.pairbox-btn{flex:none; display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap;
  background:var(--pb); color:#fff; font-weight:700; font-size:15.5px; padding:13px 18px; border-radius:12px}
.pairbox-btn::after{content:'→'}
.pairbox-btn:hover{filter:brightness(1.08)}
@media(max-width:560px){.pairbox{padding:16px} .pairbox-btn{width:100%; justify-content:center}}

/* на узком экране в шапке только логотип и меню: номер есть в меню и в нижней панели */
@media(max-width:620px){
  header.top .tel{display:none}
  .burger{margin-left:auto}
  header.top .logo{font-size:14.5px}
}
/* подсказка, что ленту раздела можно листать */
.bb-tabs{position:relative; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
@media(min-width:1000px){.bb-tabs{-webkit-mask-image:none; mask-image:none}}

/* кого вызывать: две карточки */
.choice{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin:22px 0; background:#fff}
.choice-head{background:var(--ink); color:#fff; font-family:Montserrat; font-weight:700; font-size:14px;
  letter-spacing:.02em; padding:11px 16px}
.choice-grid{display:grid; gap:1px; background:var(--line)}
@media(min-width:640px){.choice-grid{grid-template-columns:1fr 1fr}}
.choice-card{background:#fff; padding:16px 17px 17px}
.choice-ic{width:38px; height:38px; border-radius:11px; background:#FBF1F0; display:grid; place-items:center; margin-bottom:10px}
.choice-ic svg{width:21px; height:21px; fill:var(--red)}
.choice-card span{display:block; font-size:13.5px; color:var(--ink-soft)}
.choice-card b{display:block; margin:5px 0 6px; font-family:Montserrat; font-size:18px; color:var(--ink)}
.choice-card i{display:block; font-style:normal; font-size:14px; color:var(--ink-soft); line-height:1.5}
.choice-card:nth-child(2) .choice-ic{background:#EFF3FC}
.choice-card:nth-child(2) .choice-ic svg{fill:#2B4E9B}

/* врезка с кнопкой посреди статьи */
.midcall{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between;
  background:var(--grey); border:1px solid var(--line); border-left:4px solid var(--red);
  border-radius:var(--r-md); padding:16px 18px; margin:22px 0}
.midcall-t b{display:block; font-family:Montserrat; font-size:17px; color:var(--ink)}
.midcall-t span{display:block; margin-top:3px; font-size:14.5px; color:var(--ink-soft)}
.midcall .btn{white-space:nowrap}

/* лента раздела: где я и что рядом */
.branchbar{position:sticky; top:var(--hh,55px); z-index:40; background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 8px 18px -18px rgba(31,26,24,.75)}
@media(max-width:899px){.branchbar{position:static; box-shadow:none; margin-bottom:12px} .doc-page{padding-top:0}}
.branchbar[data-branch="at"]{--bb:#8F2822; --bb-soft:#FBF1F0}
.branchbar[data-branch="af"]{--bb:#2B4E9B; --bb-soft:#EFF3FC}
.bb-in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:0 16px}
.bb-badge{flex:none; font-family:Montserrat; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--bb); border-radius:6px; padding:5px 9px; text-decoration:none; white-space:nowrap}
.bb-tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.bb-tabs::-webkit-scrollbar{display:none}
.bb-tab{flex:none; text-decoration:none; color:var(--ink-soft); font-size:14px; font-weight:600;
  padding:12px 11px 10px; border-bottom:2px solid transparent; white-space:nowrap}
.bb-tab:hover{color:var(--bb)}
.bb-tab.is-on{color:var(--bb); border-bottom-color:var(--bb); background:var(--bb-soft)}
.bb-all::before{content:'← '; color:var(--ink-soft)}

/* крошки */
.crumbs i{font-style:normal; margin:0 7px; color:#BDB3AF}
.crumbs span{color:var(--ink-soft)}

/* переход к соседнему случаю */
.casenav{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0 12px}
.cnav-item{display:block; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 15px;
  text-decoration:none; background:#fff; transition:border-color .15s}
.cnav-item span{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft)}
.cnav-item b{display:block; margin-top:3px; color:var(--ink); font-size:15.5px}
.cnav-item:hover{border-color:var(--red)}
.cnav-item:hover b{color:var(--red)}
.cnav-next{text-align:right}
.cnav-prev b::before{content:'← '; color:var(--red)}
.cnav-next b::after{content:' →'; color:var(--red)}
.casenav-all{text-align:center; margin-bottom:24px}
.casenav-all a{color:var(--red); font-weight:600; text-decoration:none; font-size:15px}
.casenav-all a:hover{text-decoration:underline}

/* активный раздел в меню */
header.top nav a{position:relative; padding:7px 0}
header.top nav a.is-on{color:var(--red); font-weight:700}
header.top nav a.is-on::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red); border-radius:2px}

/* меню на телефоне */
.burger{display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; margin-left:8px;
  border:1px solid var(--line); background:#fff; border-radius:12px; cursor:pointer; flex:none; font-family:inherit; margin-left:auto}
.burger-lines{display:grid; gap:4px}
.burger-lines i{display:block; width:17px; height:2px; background:var(--ink); border-radius:2px}
.burger-cap{font-size:14px; font-weight:700; color:var(--ink)}
.burger[aria-expanded="true"]{border-color:var(--red)}
.burger[aria-expanded="true"] .burger-lines i, .burger[aria-expanded="true"] .burger-cap{color:var(--red); background:var(--red)}
.burger[aria-expanded="true"] .burger-cap{background:none}
@media(min-width:900px){.burger{display:none}}
.mmenu{position:absolute; left:0; right:0; z-index:45; background:#fff; border-bottom:1px solid var(--line); max-height:calc(100svh - var(--hh,55px) - 20px); overflow:auto;
  padding:2px 16px 10px; box-shadow:0 22px 30px -24px rgba(31,26,24,.75)}
.mmenu a{display:block; padding:12px 2px; border-bottom:1px solid var(--line); color:var(--ink);
  text-decoration:none; font-weight:600; font-size:15.5px}
.mmenu a:last-child{border-bottom:0}
.mmenu a.is-on{color:var(--red)}
.mmenu a.mm-tel{color:var(--red)}
@media(min-width:900px){.mmenu{display:none}}



/* хаб */
.hub-banner{position:relative; border-radius:var(--r-lg); overflow:hidden; background-size:cover; background-position:center; margin:14px 0 26px; min-height:230px; display:flex; align-items:center}
.hub-banner::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(30,38,43,.82) 0%, rgba(30,38,43,.35) 100%)}
.hub-banner-in{position:relative; z-index:1; padding:24px 20px; color:#fff; max-width:620px}
.hub-banner-in h1{font-size:27px; font-weight:800; color:#fff}
@media(min-width:900px){.hub-banner{min-height:300px} .hub-banner-in{padding:34px 38px} .hub-banner-in h1{font-size:38px}}
.hub-banner-in p{margin:10px 0 18px; font-size:15.5px; color:rgba(255,255,255,.9); max-width:480px}
.hub-rules{background:var(--grey); border-radius:var(--r-lg); padding:20px 20px 22px; margin-bottom:30px}
.hub-rules h2{font-size:22px; margin-bottom:8px}
.rules-lead{margin:0 0 12px; color:var(--ink-soft); font-size:15px}
ol.rules{margin:0; padding-left:22px; font-size:15.5px; line-height:1.6}
ol.rules li{margin:8px 0}
.rules-link{display:inline-block; margin-top:14px; font-weight:700; color:var(--red); text-decoration:none; font-size:15px}
.hub-q{font-size:22px; text-align:center; margin:0 0 16px}
@media(min-width:900px){.hub-q{font-size:26px}}
.two-big.three{margin-bottom:30px}
@media(min-width:760px){.two-big.three{grid-template-columns:repeat(3,1fr)}}
.two-big.three .pic{height:150px}
.two-big.three .cap em{display:inline-block; font-style:normal; margin-top:10px; font-size:14px; font-weight:700; color:#fff}
.hub .cases{margin-bottom:26px}
@media(min-width:760px){.hub .cases{grid-template-columns:repeat(3,1fr)}}

/* таблицы в инструкциях */
.tbl-wrap{margin:22px 0 24px}
table.tbl{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:15px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 1px 2px rgba(31,26,24,.04)}
table.tbl thead th{background:var(--ink); color:#fff; font-family:Montserrat; font-weight:700; font-size:14.5px;
  padding:14px 16px; text-align:left; letter-spacing:-.01em; white-space:nowrap}
table.tbl thead th:first-child{background:var(--ink); width:28%}
table.tbl thead th:nth-child(2){width:38%}
table.tbl thead th:nth-child(3){width:34%}
table.tbl thead th.accent{background:var(--red)}
table.tbl tbody th{width:28%; text-align:left; font-weight:600; font-size:14.5px; color:var(--ink);
  padding:13px 16px; background:var(--grey); border-top:1px solid var(--line); vertical-align:top}
table.tbl tbody td{padding:13px 16px; color:var(--ink-soft); border-top:1px solid var(--line); vertical-align:top; line-height:1.5}
table.tbl tbody td.accent{background:#FDF7F6; color:var(--ink); font-weight:500}
table.tbl tbody tr:first-child th, table.tbl tbody tr:first-child td{border-top:0}
table.tbl b{color:var(--ink)}
@media(max-width:700px){
  table.tbl, table.tbl thead, table.tbl tbody, table.tbl tr, table.tbl th, table.tbl td{display:block; width:auto}
  table.tbl{border:0; background:transparent; box-shadow:none; overflow:visible}
  table.tbl thead{display:none}
  table.tbl tbody tr{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden}
  table.tbl tbody th{width:auto; background:var(--ink); color:#fff; font-size:15px; padding:12px 15px; border:0}
  table.tbl tbody td{border:0; border-top:1px solid var(--line); padding:12px 15px 12px 15px; position:relative}
  table.tbl tbody td::before{content:attr(data-col); display:block; font-size:12px;
    letter-spacing:.06em; color:var(--red); font-weight:700; margin-bottom:4px}
  table.tbl tbody td.accent{background:#FDF7F6}
}

/* карточки-ссылки внутри статьи */
.inline-cases{display:grid; gap:10px; margin:18px 0 22px}
@media(min-width:700px){.inline-cases{grid-template-columns:1fr 1fr}}

/* образец объяснений */
.sample{border:1px dashed #C9BDB9; background:#FBFAF9; border-radius:var(--r-md); padding:16px 18px 18px; margin:20px 0}
.sample-head{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.sample-head b{font-family:Montserrat; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--red)}
.sample-copy{margin-left:auto; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:inherit;
  font-size:13px; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer}
.sample-copy:hover{border-color:var(--red); color:var(--red)}
.sample-note{font-size:14px; color:var(--ink-soft); margin-bottom:12px}
.sample-item{margin-top:12px}
.sample-sub{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.sample-sub span{font-size:13.5px; font-weight:700; color:var(--ink)}
.sample-sub .sample-copy{margin-left:auto}
.sample-text{background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 15px;
  font-size:15.5px; line-height:1.65; white-space:pre-line}
.sample-text::before{content:'«'; color:var(--red); font-weight:700}
.sample-text::after{content:'»'; color:var(--red); font-weight:700}

.flag-zakon{background:#F3F4F1; border:1px solid #DCDED6}
.flag-zakon .flag-ic{background:#E4E7DE}
.flag-zakon .flag-ic svg{fill:#4B5B3F}
.flag-zakon b{color:#4B5B3F}

/* плашки «срок» и «важно» */
.flag{display:flex; gap:13px; align-items:flex-start; border-radius:var(--r-md); padding:14px 16px; margin:18px 0}
.flag-ic{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center}
.flag-ic svg{width:19px; height:19px}
.flag b{display:block; font-family:Montserrat; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px}
.flag span{display:block; font-size:15.5px; line-height:1.55}
.flag-srok{background:#F0F5FF; border:1px solid #D6E2FA}
.flag-srok .flag-ic{background:#DCE8FD}
.flag-srok .flag-ic svg{fill:#2B4E9B}
.flag-srok b{color:#2B4E9B}
.flag-vazhno{background:#FDF3F1; border:1px solid #F2D8D4}
.flag-vazhno .flag-ic{background:#F8E2DE}
.flag-vazhno .flag-ic svg{fill:var(--red)}
.flag-vazhno b{color:var(--red)}

/* ссылки в тексте статьи */
.doc-body a.tile, .doc-body a.tile *{color:inherit; text-decoration:none}
.doc-body a.tile b{color:var(--ink)}
.doc-body a:not(.tile):not(.btn){color:var(--red); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:rgba(143,40,34,.4)}
.doc-body a:not(.tile):not(.btn):hover{text-decoration-color:var(--red)}

/* карточка «нет времени читать» */
.callout{display:flex; gap:14px; align-items:center; flex-wrap:wrap; background:linear-gradient(135deg,#8F2822,#6A1D18);
  color:#fff; border-radius:var(--r-lg); padding:14px 18px; margin:18px 0 22px; box-shadow:0 18px 40px -26px rgba(143,40,34,.9)}
.callout-txt:not(:has(span)) b{margin-bottom:0}
.callout-ic{flex:none; width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.16); display:grid; place-items:center}
.callout-ic svg{width:22px; height:22px; fill:#fff}
.callout-txt{flex:1; min-width:200px}
.callout-txt b{display:block; font-family:Montserrat; font-size:18px; margin-bottom:3px}
.callout-txt span{display:block; font-size:14.5px; color:rgba(255,255,255,.88); line-height:1.5}
.callout .btn{background:#fff; color:var(--red); box-shadow:none; font-size:15.5px; padding:13px 18px; white-space:nowrap}
@media(max-width:640px){
  /* на телефоне карточка сворачивается до одной кнопки звонка */
  .callout{background:none; box-shadow:none; padding:0; margin:16px 0 20px}
  .callout .callout-ic, .callout .callout-txt{display:none}
  .callout .btn{width:100%; background:var(--red); color:#fff; font-size:15.5px; padding:14px 10px;
    white-space:normal; line-height:1.3; box-shadow:0 12px 26px -14px rgba(143,40,34,.95)}
}
@media(max-width:700px){
  /* пальцем должно попадать: минимальная высота ссылок-действий */
  .rev-link, .hub-other a, .casenav-all a, .doc-body a:not(.tile):not(.btn){display:inline-block; padding:6px 0; min-height:34px}
  .sample-copy{min-height:40px; padding:9px 14px}
  .anchor-actions{flex-direction:column; align-items:stretch; gap:10px; text-align:center}
  .anchor-actions .btn{width:100%; justify-content:center}
  .anchor-tel{display:block; text-align:center; padding:8px 0 2px}
  .actions{max-width:none !important}
  .actions .btn{width:100%; justify-content:center}
  .tiles-head{font-size:12.5px}
  .pairbox-t span{font-size:12px}
  .cnav-item{padding:14px 15px}
  .rev a, .contacts a[href^='tel:'], footer a[href^='tel:'], .foot a[href^='tel:']{display:inline-block; padding:9px 0; min-height:40px}
  .rev a{padding:10px 0}
  .hub-other a{padding:11px 0; min-height:42px}
  .now-head span{font-size:14px}
  .tile .tile-d{font-size:14.5px}
  .tile .tile-go{font-size:14.5px}
  .tiles-head{font-size:12.5px}
  .rules-link{display:inline-block; padding:10px 0; min-height:44px}
  header.top .logo{padding:5px 0}
  .sample-copy{min-height:44px}
  .cm-send{min-height:46px}
  .cm-name{min-height:46px}
}
.callout .btn:hover{background:#F6E4E1}

/* правила карточками */
.rules-head{margin-bottom:16px}
.rules-grid{display:grid; gap:12px}
@media(min-width:760px){.rules-grid{grid-template-columns:1fr 1fr}}
.rule{position:relative; display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:15px 16px; overflow:hidden}
.rule-ic{flex:none; width:42px; height:42px; border-radius:12px; background:#F6E4E1; display:grid; place-items:center}
.rule-ic svg{width:23px; height:23px; fill:var(--red)}
.rule b{display:block; font-family:Montserrat; font-size:16px; margin-bottom:4px; padding-right:26px}
.rule span{display:block; font-size:14px; color:var(--ink-soft); line-height:1.5}
.rule-n{position:absolute; top:10px; right:14px; font-style:normal; font-family:Montserrat; font-weight:800;
  font-size:26px; color:var(--grey); line-height:1}

/* правила с картинкой (старое) */
.hub-rules{display:block}

.rules-pic{border-radius:var(--r-md); background-size:cover; background-position:center; min-height:190px}

/* комментарии */
.comments{margin-top:30px; border-top:1px solid var(--line); padding-top:22px}
.cm-title{font-size:20px; margin-bottom:4px}
.cm-sub{margin:0 0 16px; color:var(--ink-soft); font-size:14.5px}
.cm-list{display:grid; gap:12px; margin-bottom:16px}
.cm-item{background:var(--grey); border-radius:var(--r-md); padding:13px 15px}
.cm-item .who{font-weight:700; font-size:14.5px}
.cm-item .when{font-size:12.5px; color:var(--ink-soft); margin-left:8px; font-weight:500}
.cm-item p{margin:6px 0 0; font-size:15px; line-height:1.55}
.cm-empty{color:var(--ink-soft); font-size:14.5px}
.cm-form{display:grid; gap:9px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:15px}
.cm-form input, .cm-form textarea{font-family:inherit; font-size:15px; color:var(--ink); background:var(--grey);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; width:100%}
.cm-form textarea{min-height:96px; resize:vertical}
.cm-form .btn{justify-self:start; font-size:15.5px; padding:12px 20px}
.cm-note{font-size:13px; color:var(--ok)}

/* экраны макета */
.screen[hidden]{display:none}
.wrap.narrow{max-width:780px}
.crumbs{font-size:13px; color:var(--ink-soft); padding:18px 0 0}
.crumbs a{color:var(--red); text-decoration:none}
.doc-h1{font-size:26px; font-weight:800; line-height:1.2; margin:12px 0 0}
@media(min-width:900px){.doc-h1{font-size:34px}}
.hub-lead{font-size:16px; color:var(--ink-soft); margin:12px 0 22px; max-width:620px}
.hub{padding:0 0 34px}
.hub .cases{margin-bottom:22px}
.hub-other{margin-top:16px; font-size:15px}
.hub-other a{color:var(--red); font-weight:600; text-decoration:none}
.doc-page{padding-bottom:34px}
.doc-body{font-size:16px; line-height:1.7}
.doc-body p{margin:0 0 14px}
.doc-body h3{font-size:20px; margin:26px 0 10px}
.doc-body ul{margin:0 0 16px; padding-left:20px}
.doc-body li{margin:6px 0}
.doc-cta{margin-top:26px; background:var(--grey); border-radius:var(--r-lg); padding:18px 20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.doc-cta b{display:block; font-size:17px; font-family:Montserrat}
.doc-cta span{display:block; font-size:14px; color:var(--ink-soft); margin-top:3px}
.doc-cta > div{flex:1; min-width:220px}
.doc-cta .btn{margin-left:auto; font-size:17px; white-space:nowrap}
@media(max-width:560px){.doc-cta{padding:16px} .doc-cta .btn{width:100%; margin-left:0}}

/* игра */
.game{background:linear-gradient(180deg,#241a19,#1E262B); border-radius:var(--r-lg); padding:20px 16px 22px; color:#fff; margin:16px 0 26px}
.game-head{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.game-head h1{font-size:24px; margin-bottom:5px; color:#fff}
.game .sub{margin:0; font-size:14.5px; color:rgba(255,255,255,.72); max-width:560px}
.garage-btn-wrap{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.game.is-fs{position:fixed; inset:0; z-index:10000; margin:0; border-radius:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column}
.game.is-fs .sub, .game.is-fs .lb{display:none}
.game.is-fs .game-head h1{font-size:18px; margin-bottom:0}
.game.is-fs .game-hud{margin:8px 0}
.game.is-fs .canvas-wrap{max-width:none; width:min(100%, calc((100vh - 150px) * 360 / 520)); margin:0 auto}
body.game-fs{overflow:hidden}
body.game-fs .bar, body.game-fs header.top{display:none}
.gbtn{padding:9px 16px; font-size:14px}
.game-hud{display:flex; gap:16px; flex-wrap:wrap; margin:16px 0 12px; font-size:13px; color:rgba(255,255,255,.7)}
.game-hud b{display:inline-block; margin-left:5px; font-size:17px; color:#fff; font-variant-numeric:tabular-nums}
.canvas-wrap{position:relative; max-width:360px; margin:0 auto; border-radius:var(--r-md); overflow:hidden; box-shadow:0 18px 40px -22px #000}
#g-canvas{display:block; width:100%; height:auto; touch-action:none; background:#2A2F35}
.overlay{position:absolute; inset:0; background:rgba(20,24,28,.86); display:grid; place-items:center; padding:18px; text-align:center}
.overlay[hidden]{display:none}
.ov-inner{max-width:300px}
.ov-inner b{display:block; font-size:20px; margin-bottom:7px}
.ov-inner p{margin:0 0 14px; font-size:14px; color:rgba(255,255,255,.75)}
.ov-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.ov-row .btn{font-size:15px; padding:12px 16px}
.ov-name{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.ov-name input{flex:1; min-width:150px; padding:11px 12px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; font-family:inherit; font-size:15px}
.ups{display:grid; gap:8px; margin-bottom:14px; text-align:left}
.up-row{display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.07); border-radius:var(--r-sm); padding:10px 12px}
.up-row b{display:block; font-size:15px; margin:0}
.up-row small{display:block; font-size:12px; color:rgba(255,255,255,.6)}
.up-row .btn{margin-left:auto; padding:8px 12px; font-size:13px; white-space:nowrap}
.up-row .btn[disabled]{opacity:.45}
.pips{display:flex; gap:4px; margin-top:6px}
.pips i{width:16px; height:5px; border-radius:3px; background:rgba(255,255,255,.22)}
.pips i.on{background:var(--star)}
.lb{margin-top:16px; background:rgba(255,255,255,.06); border-radius:var(--r-md); padding:13px 15px}
.lb-head{display:flex; align-items:baseline; gap:10px; margin-bottom:8px}
.lb-head b{font-size:15px}
.lb-head span{margin-left:auto; font-size:12px; color:rgba(255,255,255,.55)}
.lb ol{margin:0; padding-left:20px; font-size:14.5px}
.lb li{margin:5px 0; display:flex; gap:10px}
.lb li span{flex:1; color:rgba(255,255,255,.85)}
.lb li.empty{list-style:none; margin-left:-20px; color:rgba(255,255,255,.55); font-size:13.5px}
.game-cta{background:var(--grey); border-radius:var(--r-lg); padding:16px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.game-cta b{display:block; font-family:Montserrat; font-size:16px}
.game-cta span{display:block; font-size:14px; color:var(--ink-soft); margin-top:3px}
.game-cta .btn{margin-left:auto}