*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font:600 12px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.muted{color:var(--ink-2)}
.small{font-size:14px;color:var(--ink-3)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}

main>section,[id]{scroll-margin-top:76px}
@media (max-width:900px){main>section,[id]{scroll-margin-top:64px}}

/* шапка */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
/* размытие под шапкой только там, где есть мышь: на телефонах оно перерисовывается каждый кадр прокрутки и дёргает страницу */
@supports (backdrop-filter:blur(1px)){@media (hover:hover) and (pointer:fine){.top{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px)}}}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.logo{font:900 17px/1 var(--font-display);letter-spacing:.06em;white-space:nowrap}
.logo b{color:var(--gold)}
.nav{display:flex;gap:28px}
.nav a{font-size:15px;color:var(--ink-2);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width var(--t)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{width:100%}

/* кнопки */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:15px 24px;border-radius:var(--r-sm);font:600 16px/1.15 var(--font-display);border:1.5px solid transparent;cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t);text-align:center;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.985);transition-duration:.06s}
.btn small{font:500 12px/1 var(--font-body);opacity:.72}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn-gold:hover{background:var(--gold-hover);transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.btn-gold:active{transform:scale(.985)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn-sm{padding:12px 18px;font-size:15px}

/* подвал */
.foot{border-top:1px solid var(--line);margin-top:72px;padding:28px 0 40px;color:var(--ink-3);font-size:13px}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot a:hover{color:var(--ink)}

/* липкая кнопка на телефоне */
.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:none;transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sticky.show{transform:translateY(0)}
.sticky .btn{width:100%;box-shadow:0 14px 30px -14px rgba(27,29,34,.5)}

.navm{display:none}
@media (max-width:900px){
  .nav{display:none}
  .navm{display:flex;gap:7px;overflow-x:auto;padding:0 16px 9px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .navm::-webkit-scrollbar{display:none}
  .navm a{white-space:nowrap;font-size:13.5px;line-height:1;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-2)}
  .navm a:active{border-color:var(--gold);color:var(--ink)}
  main>section,[id]{scroll-margin-top:106px}
  .top .wrap{height:56px}
  .top .btn-sm{padding:10px 14px;font-size:14px}
  .sticky{display:block}
}
/* блоки ниже тарифов браузер размечает, только когда к ним подходит прокрутка. Выше тарифов не трогаем: якоря /#quiz и /#plans должны попадать точно */
#plans~section{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* мягкий переход между страницами сайта вместо белой вспышки (Chrome 126+, Safari 18.2+, остальные просто открывают страницу) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}@view-transition{navigation:none}}

/* согласие на счётчик */
.cookiebar{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-card);display:grid;gap:12px;max-width:720px;margin:0 auto}
.cookiebar p{font-size:14px;color:var(--ink-2)}
.cookiebar a{color:var(--gold-deep);border-bottom:1px solid var(--gold-soft)}
.cookiebar div{display:flex;gap:10px;flex-wrap:wrap}
/* На телефоне баннер накрывал главную кнопку первого экрана, поэтому здесь он в одну строку:
   короткий текст, кнопки рядом, ссылка «подробнее» вместо объяснения. */
@media (max-width:560px){
  .cookiebar{left:8px;right:8px;bottom:8px;padding:11px 12px;gap:8px;grid-template-columns:1fr auto;align-items:center}
  .cookiebar p{font-size:12.5px;line-height:1.35}
  .cookiebar div{flex-direction:column;gap:6px}
  .cookiebar .btn{padding:8px 12px;font-size:13px;white-space:nowrap}
}

/* окно оплаты */
.pay{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;inset:0;position:fixed;display:none;align-items:flex-end;justify-content:center}
.pay[open]{display:flex}
.pay::backdrop{background:rgba(20,22,26,.55)}
.pay-in{position:relative;width:100%;max-width:520px;background:var(--paper);border-radius:22px 22px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px -30px rgba(0,0,0,.5);animation:payUp .28s cubic-bezier(.2,.7,.2,1)}
@keyframes payUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.pay-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--paper-2);color:var(--ink-2);font:400 22px/36px var(--font-body);cursor:pointer}
.pay-brand{font:900 12px/1 var(--font-display);letter-spacing:.08em;color:var(--ink-3)}.pay-brand b{color:var(--gold)}
.pay h3{font-size:24px;font-weight:800;margin:10px 0 12px}
.pay-period{display:inline-flex;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.pay-period button{border:0;background:transparent;font:600 13px/1 var(--font-display);padding:8px 14px;border-radius:999px;color:var(--ink-2);cursor:pointer}
.pay-period button.on{background:var(--ink);color:var(--paper)}
.pay-price{font:800 20px/1.2 var(--font-display);margin:12px 0 4px}
.pay-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:14px}
.pay-list{display:grid;gap:8px}
.pay-m{display:grid;grid-template-columns:40px 1fr 16px;gap:12px;align-items:center;padding:12px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--white);transition:border-color var(--t),transform var(--t)}
.pay-m:hover{border-color:var(--gold)}.pay-m:active{transform:scale(.99)}
.pay-i{width:40px;height:40px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center}.pay-i svg{width:22px;height:22px}
.pay-t{display:grid;gap:2px}.pay-t b{font:700 15.5px/1.2 var(--font-display)}.pay-t em{font:600 11px/1 var(--font-display);font-style:normal;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.08em}.pay-t span{font-size:13px;color:var(--ink-2)}
.pay-c{color:var(--ink-3);font-size:22px;line-height:1}
.pay-foot{font-size:12px;color:var(--ink-3);margin-top:14px;line-height:1.5}.pay-foot a{color:var(--gold-deep);border-bottom:1px solid var(--gold-soft)}
html.pay-open{overflow:hidden}
@media (min-width:640px){.pay{align-items:center}.pay-in{border-radius:22px;padding:26px 26px 24px}}

.only-narrow{display:none}
@media (max-width:560px){.only-wide{display:none}.only-narrow{display:inline}}