/* Вариант B «Чистый лист» — плотный белый материал, крупная типографика, кнопка «Продолжить» */
body.tion-b { --card-pad: 48px; --card-radius: 18px; --ink: #1d1d1f; --ink-2: #6e6e73; --ink-3: #86868b; --veil: 0; }
.tion-b .tion-card { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08); }
.tion-b .tion-hero { display: none; }
.tion-b .tion-intro { text-align: left; }
.tion-b .tion-intro::before { content: 'Спецпроект Daily Moscow и ТИОН'; display: block; font: 600 12px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.tion-b .tion-intro__text { font: 400 21px/1.35 var(--font-ui); color: var(--ink-2); margin: 0 0 28px; }
.tion-b .tion-intro__text::before { content: 'Совет о воздухе, который подходит именно вам'; display: block; font: 700 48px/1.08 var(--font-display); letter-spacing: -.02em; color: var(--ink); margin-bottom: 16px; }
.tion-b .tion-intro__note { font: 400 13px/1 var(--font-ui); color: var(--ink-3); }
.tion-b .tion-q { font-size: 40px; letter-spacing: -.02em; line-height: 1.1; }
.tion-b .tion-progress__bar { gap: 0; height: 2px; background: rgba(0,0,0,.08); border-radius: 1px; overflow: hidden; }
.tion-b .tion-progress__seg { height: 2px; border-radius: 0; background: transparent; }
.tion-b .tion-progress__label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-3); }
.tion-b .tion-opts { gap: 8px; }
.tion-b .tion-opt { background: #f5f5f7; border: 0; border-radius: 12px; min-height: 60px; font: 500 17px/1.4 var(--font-ui); padding: 14px 18px; }
.tion-b .tion-opt:hover { background: #ececf0; border: 0; } .tion-b .tion-opt:active { transform: scale(.99); }
.tion-b .tion-opt[aria-checked="true"] { background: #f5f5f7; border: 0; padding: 14px 18px; box-shadow: inset 0 0 0 1.5px var(--tion-blue); }
.tion-b .tion-opt::before { content: ''; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: all .12s; }
.tion-b .tion-opt[aria-checked="true"]::before { border-color: var(--tion-blue); background: var(--tion-blue) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tion-b .tion-opt__check { display: none; }
.tion-b .tion-btn { min-height: 48px; background: var(--tion-deep); color: #fff; font-weight: 600; font-size: 15px; }
.tion-b .tion-btn:hover { background: var(--tion-teal); }
.tion-b .tion-btn:disabled { background: #f5f5f7; color: var(--ink-3); }
.tion-b .tion-btn--ghost { background: transparent; color: var(--tion-deep); border: 1.5px solid rgba(13,63,79,.3); }
.tion-b .tion-link { color: var(--tion-teal); }
.tion-b .tion-result { background: #fff; }
.tion-b .tion-result h2 { letter-spacing: -.02em; }
.tion-b .tion-why li { background: #f5f5f7; color: var(--ink); }
.tion-b .tion-why li:first-child { color: var(--ink-3); }
.tion-b .tion-steps-box { background: #f5f5f7; border-radius: 14px; }
.tion-b .tion-steps li::before { background: #fff; }
.tion-b .tion-product { background: #f5f5f7; border-radius: 14px; }
.tion-b .tion-product__img { filter: drop-shadow(0 12px 20px rgba(0,0,0,.18)); }
.tion-b .tion-tag--num { background: var(--tion-deep); color: #fff; }
.tion-b .tion-share__btn { background: #f5f5f7; color: var(--ink); } .tion-b .tion-share__btn:hover { background: var(--tion-deep); color: #fff; }
.tion-b .tion-share { border-color: #ececf0; }
.tion-b .tion-product__eyebrow { color: var(--ink-3); }
.tion-b .tion-expert { background: #f5f5f7; }
.tion-b .tion-screen { animation-duration: .3s; } .tion-b .tion-screen.is-leaving { animation-duration: .2s; }
.tion-b .tion-stagger > * { animation: none; }
@media (max-width: 768px) { .tion-b .tion-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); --card-pad: 24px; } .tion-b .tion-intro__text::before { font-size: 32px; } .tion-b .tion-q { font-size: 28px; } }