/* Макет A «Портал»: меню слева, содержание по центру, подписка закреплена справа — как Nous Portal и сама панель. */
:root { --rail: 248px; --buy: 340px; }

.rail { position: fixed; inset: 0 auto 0 0; width: var(--rail); display: flex; flex-direction: column; gap: 22px; padding: 24px 0 22px 20px; border-right: 1px solid var(--line); z-index: 20; }
.rail::before { content: ''; position: absolute; inset: auto 0 0 0; height: 52%; z-index: -1; pointer-events: none; background: url('/static/nous-sidebar-art.png') center bottom / cover no-repeat; opacity: .22; mix-blend-mode: screen; }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail nav .chip { align-self: flex-start; margin: 18px 0 8px; }
.rail nav .chip:first-child { margin-top: 0; }
.rail nav a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: #dddff0; text-decoration: none; font: 400 19px/1.2 var(--font-display); text-transform: uppercase; }
.rail nav a:hover { color: #fff; }
.rail nav a i { flex: 1; min-width: 10px; border-top: 1px dotted var(--line-strong); opacity: .6; }

.topbar { display: none; }

main { margin-left: var(--rail); margin-right: var(--buy); padding: 0 clamp(28px, 4vw, 64px); border-right: 1px solid var(--line); min-width: 0; }

.hero { position: relative; padding: 36px 0 40px; overflow-x: clip; }
.eyebrow { margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.hero .display { text-wrap: balance; max-width: 15em; margin-bottom: 18px; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.04; }
/* Скриншот растворяется в фоне, как у Linken Sphere 2: без рамки, свечение сзади, низ уходит в прозрачность. */
.hero-shot { margin-top: 36px; }
.blend { position: relative; }
.module > .blend { margin-top: 28px; }
.blend::before { content: ''; position: absolute; inset: 4% -6% 25%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(60 80 255 / 28%), transparent); }
.blend img { width: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); }
/* Кнопка покупки в тексте нужна только без правой колонки — иначе она дублирует «Купить» справа. */
.cta-narrow { display: none; }

.block { padding: 72px 0; border-top: 1px solid var(--line); }
.block > .h2 { margin: 18px 0 20px; }
.block > .lead { margin-bottom: 32px; }

.module { padding: 34px 0; border-top: 1px dotted var(--line); }
.module:first-of-type { border-top: 0; padding-top: 0; }
#modules { padding: 40px 0 64px; }
main > .block:last-child { padding-bottom: 48px; }
.module > .h3 { margin-bottom: 10px; font-size: 34px; }
.mod-text { font-size: 16px; line-height: 1.65; color: #d6d7ea; max-width: 40em; }
/* Чем модуль лучше: короткий заголовок и строка пояснения, две колонки с тонкой линией сверху. */
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 22px; }
.perks li { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.perks b { display: block; margin-bottom: 4px; font: 400 15px/1.4 var(--font-ui); color: #f3f3f0; }
.perks span { display: block; font-size: 14px; line-height: 1.55; color: var(--dim); }
.module > .shot { margin-top: 24px; }
.module code, .faq code { font: inherit; color: #fff; background: var(--raised); padding: 1px 5px; }




.buy { position: fixed; inset: 0 0 0 auto; width: var(--buy); display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 24px; background: rgb(0 0 34 / 55%); }

/* Без правой колонки: подписка остаётся в разделе «Тарифы». */
@media (max-width: 1280px) {
  :root { --buy: 0px; }
  .buy { display: none; }
  main { border-right: 0; }
  .cta-narrow { display: inline-flex; }
}

/* Узкий экран: меню превращается в верхнюю полосу. */
@media (max-width: 900px) {
  .rail { display: none; }
  .topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); background: rgb(0 0 40 / 92%); }
  main { margin-left: 0; padding: 0 var(--gutter); }
  .hero { padding-top: 24px; padding-bottom: 32px; }
  .hero .cta-narrow { margin-top: 24px; }
  .hero-shot { margin-top: 24px; }
  .block { padding: 52px 0; }
  .module { padding: 28px 0; }
  .perks { grid-template-columns: 1fr; }
    .shot figcaption { font-size: 12px; }
}

/* «Войти» — тихая кнопка: без заливки, по рамке постоянно бежит свет, как у вкладки панели при наведении. */
.rail-login { margin: auto 20px 0 0; width: auto; }
.rail-login::after, .topbar .btn::after, .cfg-free::after { opacity: .75; animation-play-state: running; }


/* Тариф в правой колонке: переключатели, модули с лимитами, итог, покупка. */
.buy { overflow-y: auto; padding: 20px 26px 18px; }
.buy .config { flex: 1; }
.config { display: flex; flex-direction: column; gap: 7px; }
.cfg-segs { display: flex; flex-direction: column; gap: 8px; }
.seg { display: flex; border: 1px solid var(--line-strong); }
.seg button { flex: 1; padding: 6px 10px; border: 0; background: transparent; color: var(--muted); font: 400 16px/1.15 var(--font-display); text-transform: uppercase; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-checked="true"] { background: var(--text); color: #0b0b38; }
.cfg-list li, .cfg-free li { position: relative; padding: 3px 0 3px 18px; font-size: 14px; line-height: 1.4; }
.cfg-list li:first-child, .cfg-free li:first-child { border-top: 0; }
.cfg-list li::before, .cfg-free li::before { content: '▪'; position: absolute; left: 2px; color: var(--muted); }
.cfg-mods { display: flex; flex-direction: column; gap: 8px; }
.cfg-mod { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 7px 12px 7px 38px; border: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.cfg-mod::before { content: ''; position: absolute; left: 12px; top: 10px; width: 13px; height: 13px; border: 1px solid var(--line-strong); }
.cfg-mod b { font: 400 20px/1.1 var(--font-display); color: var(--text); }
.cfg-mod em { font: 400 20px/1.1 var(--font-display); font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.cfg-mod ul { grid-column: 1 / -1; }
.cfg-mod li { font-size: 13px; line-height: 1.5; }
.cfg-mod:hover { border-color: var(--line-strong); }
.cfg-mod[aria-pressed="true"] { border-color: var(--text); background: rgb(0 0 242 / 18%); color: #d6d7ea; }
.cfg-mod[aria-pressed="true"]::before { background: var(--text); box-shadow: inset 0 0 0 3px var(--bg); }
.cfg-mod.included { cursor: default; }
.cfg-tiers { display: flex; align-items: center; gap: 4px; }
.cfg-tiers button { padding: 0 6px; border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.cfg-tiers button:hover { box-shadow: inset 0 0 0 1px var(--text); }
.cfg-tiers button[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.cfg-tiers span { margin-left: 2px; }
.cfg-extra { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 10px; padding: 9px 12px; border: 1px solid var(--line); color: var(--muted); transition: border-color .15s, background-color .15s; }
.cfg-extra.on { border-color: var(--text); background: rgb(0 0 242 / 18%); color: #d6d7ea; }
.cfg-extra b { font: 400 20px/1.1 var(--font-display); color: var(--text); }
.cfg-extra em { font: 400 20px/1.1 var(--font-display); font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.cfg-extra:not(.on) em { font: 400 14px/1.4 var(--font-ui); color: var(--muted); }
.cfg-extra p { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; }
.cfg-step { display: flex; font-size: 14px; }
.cfg-step button, .cfg-step input { height: 24px; border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; color: var(--text); font: inherit; text-align: center; }
.cfg-step button { width: 24px; cursor: pointer; }
.cfg-step button:hover { box-shadow: inset 0 0 0 1px var(--text); }
.cfg-step input { width: 40px; margin: 0 -1px; font-variant-numeric: tabular-nums; outline: 0; }
.cfg-step input:focus { box-shadow: inset 0 0 0 1px var(--text); }
.cfg-mod.in-full em, .cfg-mod.included em { font: 400 14px/1.4 var(--font-ui); color: var(--muted); }
.cfg-sum { height: calc(3 * (14px * 1.4 + 6px)); } /* место под три строки: цена и «Бесплатно» не двигаются */
.cfg-total { padding-top: 4px; }
.cfg-hint { padding-top: 3px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cfg-free { padding: 10px 14px; border: 1px solid var(--line-strong); }
.cfg-free-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cfg-free-head p { display: inline-block; padding: 2px 7px; font: 400 14px/1.2 var(--font-display); text-transform: uppercase; color: var(--bg); background: var(--text); }
.cfg-free li { color: #e9eaf6; }
.cfg-free a { font-size: 14px; }
.cfg-free.picked a { visibility: hidden; } /* ссылку повторяет кнопка «Попробовать» */
.cfg-buy { margin-top: auto; }
.config .btn.off { opacity: .4; pointer-events: none; }
.link { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Раздел «Тариф» в содержании нужен, только когда правой колонки нет. */
.narrow-only { display: none; }
@media (max-width: 1280px) {
  .narrow-only { display: block; }
  .narrow-only .config { max-width: 520px; }
}
.config .price { font-size: 48px; }
.nobr { white-space: nowrap; }

/* Мозаика проверок отпечатка: карточки разной ширины, подпись сверху, низ снимка уходит в фон. */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; margin-top: 24px; }
.checks-col { display: flex; flex-direction: column; gap: 12px; }
.check { margin: 0; border: 1px solid var(--line); background: rgb(0 0 30 / 55%); overflow: hidden; }
.check figcaption { padding: 12px 14px 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.check figcaption b { display: block; font: 400 15px/1.3 var(--font-ui); color: #f3f3f0; }
.check img { width: 100%; }
.checks-note { margin-top: 10px; font-size: 13px; color: var(--dim); }
.minor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; margin-top: 22px; font-size: 14px; color: var(--dim); }
.minor b { font-weight: 400; color: #d6d7ea; }
@media (max-width: 900px) {
  .checks { grid-template-columns: 1fr; }
  .minor { grid-template-columns: 1fr; }
}
.module { overflow-x: clip; }

/* Пункты модулей и дополнения — с квадратным маркером, как списки в выборе тарифа. */
.minor li, .perks li { position: relative; padding-left: 18px; }
.minor li::before, .perks li::before { content: '▪'; position: absolute; left: 2px; color: var(--muted); }
.minor li::before { top: 0; }
.perks li::before { top: 14px; line-height: 1.4; font-size: 15px; }

/* Первый экран: две фразы пунктами с квадратным маркером. */
.hero-points { max-width: 40em; }
.hero-points li { position: relative; padding: 0 0 0 20px; font-size: 17px; line-height: 1.6; color: #dcdcf0; }
.hero-points li + li { margin-top: 8px; }
.hero-points li::before { content: '▪'; position: absolute; left: 2px; top: 0; color: var(--muted); }
.hero .cta-narrow { margin-top: 24px; }
/* Первого экрана нет: страница начинается с модулей, на узком экране над ними только «Выбрать тариф». */
#modules { border-top: 0; }
.hero { display: none; }
@media (max-width: 1280px) { .hero { display: block; padding: 24px 0; } .hero .cta-narrow { margin-top: 0; } }

/* Единые отступы: заголовок → пункты → скриншот по 28px, пункты без линий. */
.hero { padding-bottom: 0; }
.hero .display { margin-bottom: 28px; }
#modules { padding-top: 36px; }
.perks { row-gap: 28px; margin-top: 28px; }
.perks li { padding-top: 0; padding-bottom: 0; border-top: 0; }
.perks li::before { top: 0; }
.module > .blend { margin-top: 28px; }

/* Подпункты навигации: мельче, с отступом, ведут к конкретным возможностям. */
.rail nav a.sub { padding: 4px 0 4px 14px; font: 400 14px/1.3 var(--font-ui); text-transform: none; color: var(--muted); }
.rail nav a.sub:hover { color: #fff; }
.rail nav a.sub + a:not(.sub) { margin-top: 10px; }
[id^="f-"] { scroll-margin-top: 24px; }
.checks-extra { grid-template-columns: 1fr; margin-top: 12px; }
/* Пункты антидетекта сразу под абзацем — одной колонкой, шрифтом абзаца. */
.minor.lead { grid-template-columns: 1fr; gap: 6px; max-width: 40em; margin-top: 14px; font-size: 16px; line-height: 1.65; color: #d6d7ea; }
.minor.lead b { color: #fff; }