/* Оформление сайта. Токены те же, что в приложении (apps/web/src/styles.css): человек попадает с лендинга внутрь приложения одним щелчком, и разъехавшиеся палитры здесь читались бы как два разных продукта. Схему ставит инлайн-скрипт в по тому же ключу localStorage, что и приложение, — переключенная там тема действует и здесь. */ :root { color-scheme: light; --bg: #faf9f5; --surface: #ffffff; --surface-2: #f2f0e8; --surface-3: #e9e6db; --sidebar: #f0eee6; --border: #e2dfd3; --border-soft: #edebe1; --text: #1f1e1d; --text-2: #3d3d3a; --muted: #7c7a73; --accent: #c96442; --accent-hover: #b1553a; --accent-fg: #fffdf9; --accent-soft: rgba(201, 100, 66, 0.1); --accent-line: rgba(201, 100, 66, 0.36); --select: rgba(201, 100, 66, 0.28); --warn: #b0762c; --warn-soft: rgba(176, 118, 44, 0.12); --danger: #bf4d43; --danger-soft: rgba(191, 77, 67, 0.1); --ok: #5b7f45; --ok-soft: rgba(91, 127, 69, 0.13); --shadow-sm: 0 1px 2px rgba(31, 30, 29, 0.07); --shadow-md: 0 6px 18px rgba(31, 30, 29, 0.1); --shadow-lg: 0 18px 44px rgba(31, 30, 29, 0.18); --ring: 0 0 0 3px rgba(201, 100, 66, 0.18); --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --sans: ui-sans-serif, system-ui, 'Segoe UI', Inter, Roboto, sans-serif; --serif: ui-serif, 'Iowan Old Style', Georgia, 'Times New Roman', serif; --radius: 10px; --radius-lg: 16px; --page: 1080px; } :root[data-theme='dark'] { color-scheme: dark; --bg: #262624; --surface: #30302e; --surface-2: #3a3a37; --surface-3: #454542; --sidebar: #1f1e1d; --border: #3e3e3b; --border-soft: #343432; --text: #f5f4ee; --text-2: #d4d1c8; --muted: #918e86; --accent: #d97757; --accent-hover: #e08b6e; --accent-fg: #251610; --accent-soft: rgba(217, 119, 87, 0.14); --accent-line: rgba(217, 119, 87, 0.42); --select: rgba(217, 119, 87, 0.34); --warn: #d9a05b; --warn-soft: rgba(217, 160, 91, 0.14); --danger: #e0776a; --danger-soft: rgba(224, 119, 106, 0.13); --ok: #8fb06b; --ok-soft: rgba(143, 176, 107, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.36); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.5); --ring: 0 0 0 3px rgba(217, 119, 87, 0.22); } * { box-sizing: border-box; } /* Без этого атрибут hidden проигрывает display: ... из любого правила ниже (form, .btn и т.п.) — не по специфичности, а по происхождению: обычные авторские правила перебивают обычные правила браузера вне зависимости от специфичности, а [hidden] в браузерном стиле как раз обычное правило. Один global fix вместо !important точечно на каждый .hidden-элемент. */ [hidden] { display: none !important; } ::selection { background: var(--select); } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration-color: var(--accent-line); text-underline-offset: 3px; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; } /* --------------------------------------------------------------- каркас */ .wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 24px; } .topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s; } .topbar[data-scrolled='1'] { border-bottom-color: var(--border); } /* position: relative — опора для панели аккаунта. Она раскрывается от правого края шапки, а на узком экране обязана занять всю её ширину; чип шириной с кружок такой опорой быть не может. */ .topbar .wrap { position: relative; display: flex; align-items: center; gap: 16px; height: 62px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 620; letter-spacing: -0.01em; color: var(--text); text-decoration: none; margin-right: auto; } .brand svg { display: block; } .brand b { font-weight: 620; } .brand span { color: var(--muted); font-weight: 480; } .topnav { display: flex; align-items: center; gap: 6px; min-width: 0; } /* ------------------------------------------------------- аккаунт в шапке */ .account { display: flex; align-items: center; } /* Кружок с буквой — то немногое, что помещается в шапку телефона целиком. Подпись рядом с ним живёт только на широком экране (см. медиазапросы). */ .account-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; padding: 3px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .account-chip:hover, .account-chip[aria-expanded='true'] { background: var(--surface-2); border-color: var(--border); } .account-chip:focus-visible { border-radius: 999px; } /* Почта не переносится и не режется сама — длинный адрес раздвигал шапку шире экрана и утаскивал за собой всю страницу в горизонтальный скролл. */ .account-label { min-width: 0; padding-right: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Буква набрана тем же serif, что заголовки и номера шагов: это единственная «монограмма» на сайте, и она должна читаться как часть фирменного набора, а не как инициал из чужого аватара. */ .account-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--accent-line); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1; } .account-avatar-lg { width: 42px; height: 42px; font-size: 21px; } /* right: 24px — ровно поле .wrap: опора для абсолютного блока это её padding-box, то есть весь экран, а чип стоит по внутреннему краю. Без этой поправки панель висела бы на 24px правее кружка, из-под которого выехала. */ .account-panel { position: absolute; top: calc(100% + 6px); right: 24px; z-index: 20; width: 340px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); text-align: left; } /* Панель получает фокус при открытии — но кольцо вокруг всего блока это подсветка не того размера: видно и так, что открылось. Скругление возвращаем своё, иначе общее правило :focus-visible срезало бы углы до 6px. */ .account-panel:focus-visible { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Панель выезжает из-под чипа — короткое движение объясняет, откуда она взялась, и на этом анимация заканчивается. */ @media (prefers-reduced-motion: no-preference) { .account-panel { animation: account-open 0.14s ease-out; } @keyframes account-open { from { opacity: 0; transform: translateY(-6px); } } } .account-head { display: flex; align-items: center; gap: 12px; padding: 16px; } .account-id { min-width: 0; } /* Полная почта, без обрезки: за ней сюда и приходят. Длинный адрес переносим где придётся — рвать панель он не должен. */ .account-email { font-size: 14.5px; font-weight: 560; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; } .account-name { margin-top: 3px; font-family: var(--mono); font-size: 12.5px; color: var(--accent); overflow-wrap: anywhere; } .account-section { padding: 14px 16px; border-top: 1px solid var(--border-soft); } .account-copy { width: 100%; } .account-uid { gap: 8px; } .account-uid label { font-size: 13.5px; } .account-uid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .account-uid input { padding: 8px 11px 8px 27px; font-size: 14.5px; } .account-uid .hint { margin: 0; } .account-msg { margin: 0; font-size: 13px; } .account-msg:empty { display: none; } .account-msg.is-error { color: var(--danger); } .account-msg.is-ok { color: var(--ok); } /* Строки меню идут во всю ширину панели, но не вплотную к её углам: снаружи остаётся 6px, чтобы подсветка при наведении не срезалась скруглением. */ .account-rows { padding: 6px 0; border-top: 1px solid var(--border-soft); } .account-row { display: block; width: 100%; padding: 9px 16px; border: none; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s; } .account-row:hover { background: var(--surface-2); } .account-row:focus-visible { border-radius: 0; } .account-row-title { display: block; } /* Разница между «Сменить аккаунт» и «Выйти» — только в том, куда попадёшь дальше, и это сказано словами, а не оставлено на догадку. */ .account-row-note { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); } /* Поле с приставкой «@»: сама приставка — часть оформления, а не ввода, и в значение поля не попадает (иначе её пришлось бы вычищать из каждой отправки). */ .uid-field { position: relative; display: block; } .uid-field input { padding-left: 28px; } .uid-at { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); font-family: var(--mono); font-size: 14.5px; color: var(--muted); pointer-events: none; } /* --------------------------------------------------------------- кнопки */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-2); font: inherit; font-size: 14.5px; font-weight: 520; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn:hover { background: var(--surface-2); color: var(--text); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); } .btn-outline { border-color: var(--border); background: var(--surface); color: var(--text); } .btn-outline:hover { border-color: var(--accent-line); background: var(--surface); } .btn-lg { padding: 13px 24px; font-size: 16px; } .btn-sm { padding: 6px 11px; font-size: 13.5px; } /* Не только :hover — на телефоне, для которого весь этот кабинет и сделан, наведения не бывает, и без базового цвета «Отвязать» ничем не отличалась бы от обычной кнопки до самого нажатия. */ .btn-danger { color: var(--danger); } .btn-danger:hover { background: var(--danger-soft); color: var(--danger); } .btn[disabled] { opacity: 0.55; cursor: default; pointer-events: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } /* Кнопка «Войти» в шапке лендинга — вход в кабинет для того, кто уже вошёл. Стоит в той же разметке, что гостевая «Начать», и делит с ней класс .btn-primary, поэтому переживает мобильное правило `.topnav > .btn:not(.btn-primary)` ниже без отдельного исключения. flex: none — не по умолчанию, а по опыту: без него .topnav как флекс-ряд охотно сжимает кнопку ниже заданной ширины на пути к 400px, ещё до того, как медиазапрос ниже официально включит «иконку без подписи». */ .header-enter { flex: none; } .header-enter svg { flex: none; } /* На самых узких экранах (проверено на 360px) подписи у кружка аккаунта уже нет, но рядом с названием продукта не помещается ещё и текст «Войти» — прячем его, оставляя дверь: кнопка не исчезает и остаётся квадратной тач-целью 40×40, а не сжимается до нечитаемого пятна. Текст остаётся в DOM для скринридера — это по-прежнему ссылка «Войти», а не безымянная иконка. */ @media (max-width: 400px) { /* Фиксированные 40px кнопки-двери съедают ровно те 4px, которые раньше негласно забирал сжавшийся флекс-ряд, — отдаём их обратно, чуть сузив зазоры между кнопками шапки, а не позволяя строке продавить вправо общую ширину и вызвать горизонтальный скролл. */ .topnav { gap: 4px; } .header-enter { width: 40px; height: 40px; padding: 0; gap: 0; } .header-enter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* ----------------------------------------------------------- типографика */ .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; } h1 { font-size: clamp(38px, 6.2vw, 66px); } h2 { font-size: clamp(28px, 4vw, 40px); } h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; } .lede { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 40em; margin: 22px 0 0; text-wrap: pretty; } .muted { color: var(--muted); } /* --------------------------------------------------------------- секции */ section { padding: 92px 0; border-top: 1px solid var(--border-soft); } section:first-of-type { border-top: none; } .section-head { max-width: 34em; margin-bottom: 44px; } .section-head p { margin: 16px 0 0; color: var(--text-2); font-size: 17px; } /* ----------------------------------------------------------------- герой */ .hero { padding: 84px 0 72px; } /* Мера набора считается по заголовку, а не по тексту: он здесь крупнее всего и ломается первым. 720px держат его в две строки на ноутбуке и не дают расплыться в одну на широком мониторе. */ .hero-copy { max-width: 720px; } h1 .accent, h2 .accent { color: var(--accent); } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; } .hero-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); } /* Сцена: слева лента на ПК, справа телефон. Это не скриншот, а тот же интерфейс, собранный из тех же токенов, — он не устаревает вместе со сборкой и остаётся чётким на любом экране. */ .scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 258px; align-items: end; gap: 34px; margin-top: 62px; } .mock { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; } .mock-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); background: var(--sidebar); font-size: 13px; color: var(--muted); } .dots { display: flex; gap: 6px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); } .mock-body { padding: 18px; display: grid; gap: 12px; } .msg { font-size: 14.5px; line-height: 1.55; color: var(--text-2); } .msg b { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 5px; } .tool { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2); font-family: var(--mono); font-size: 12.5px; color: var(--text-2); } .tool .name { color: var(--text); font-weight: 600; } .tool .tick { margin-left: auto; color: var(--ok); } .tool.pending { border-color: var(--accent-line); background: var(--accent-soft); } .tool.pending .tick { color: var(--accent); } .phone { position: relative; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-lg); padding: 12px; padding-top: 22px; } .phone::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 54px; height: 5px; border-radius: 3px; background: var(--surface-3); } .sheet { border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft); padding: 14px; } .sheet h4 { margin: 0 0 4px; font-family: var(--sans); font-size: 14px; font-weight: 620; letter-spacing: 0; } .sheet code { display: block; font-family: var(--mono); font-size: 12px; color: var(--text-2); margin: 8px 0 14px; word-break: break-all; } .sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sheet-actions .btn { padding: 8px 0; font-size: 13.5px; } /* Один срежиссированный момент на странице: телефон вздрагивает, как от уведомления, ровно тогда, когда взгляд доходит до сцены. Дальше страница ведёт себя тихо. */ @media (prefers-reduced-motion: no-preference) { .phone { animation: buzz 0.55s 1.1s ease-in-out; } @keyframes buzz { 0%, 100% { transform: translateX(0) rotate(0); } 18% { transform: translateX(-4px) rotate(-0.6deg); } 42% { transform: translateX(4px) rotate(0.6deg); } 68% { transform: translateX(-2px) rotate(-0.3deg); } } } /* ------------------------------------------------------------ возможности */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; } .card { background: var(--bg); padding: 28px; } .card h3 { margin-bottom: 9px; } .card p { margin: 0; color: var(--text-2); font-size: 15px; } /* ------------------------------------------------------------ как устроено */ /* Провод. Продукт целиком — это провод от ПК через relay до телефона, и обе стороны звонят наружу сами, навстречу друг другу. Диаграмма поэтому не украшение: направление точек здесь и есть ответ на вопрос «а порт наружу открывать?» — обе цепочки идут только внутрь, к точке встречи, и она же единственная, что вообще ничего не запрашивает сама. */ .wire { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 0; margin: 0 0 40px; } .node { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .node-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } .node-icon svg { width: 20px; height: 20px; } /* Точка встречи — единственный узел, который не «висит на проводе», а принимает оба звонка. Приподнятая карта и тёплое кольцо вокруг иконки — единственный акцент формы во всей диаграмме, и он ровно там, где смысл. */ .node-hub { position: relative; transform: translateY(-10px); border-radius: 22px; border-color: var(--accent-line); box-shadow: var(--shadow-md); z-index: 1; } .node-icon-hub { position: relative; width: 48px; height: 48px; background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .node-icon-hub::before, .node-icon-hub::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--accent-line); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .node-icon-hub::before, .node-icon-hub::after { animation: hub-ping 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; } .node-icon-hub::after { animation-delay: 1.3s; } @keyframes hub-ping { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.85); opacity: 0; } } } @media (prefers-reduced-motion: reduce) { .node-icon-hub::before { opacity: 0.4; } } .node .label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .node strong { display: block; margin-top: 6px; font-size: 16px; letter-spacing: -0.01em; } .node .note { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); } /* Провод между узлами: не просто линия, а канал, по которому видно движение кадров — точки идут только внутрь, к точке встречи, с обеих сторон одновременно. Шеврон и общий пунктир держат смысл и без анимации, если у человека reduce motion. */ .link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 76px; padding-top: 34px; } .link-visual { position: relative; width: 100%; height: 8px; } .link-track { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: repeating-linear-gradient( 90deg, var(--border) 0, var(--border) 4px, transparent 4px, transparent 9px ); } .dot { position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .chevron { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid var(--accent); border-width: 0 1.6px 1.6px 0; opacity: 0.85; } .link.to-right .chevron { right: -2px; transform: rotate(-45deg); } .link.to-left .chevron { left: -2px; transform: rotate(135deg); } /* Позиции точек без анимации: угасающий след, который сам по себе читается как «сюда» — направление видно и когда движения на странице нет. */ .link.to-right .d1 { left: 14%; opacity: 0.3; } .link.to-right .d2 { left: 50%; opacity: 0.62; } .link.to-right .d3 { left: 86%; opacity: 1; } .link.to-left .d1 { left: 86%; opacity: 0.3; } .link.to-left .d2 { left: 50%; opacity: 0.62; } .link.to-left .d3 { left: 14%; opacity: 1; } .link-caption { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .link .dot { animation-duration: 2.1s; animation-timing-function: cubic-bezier(0.3, 0, 0.35, 1); animation-iteration-count: infinite; } .link.to-right .dot { animation-name: flow-right; } .link.to-left .dot { animation-name: flow-left; } .link .d2 { animation-delay: -0.7s; } .link .d3 { animation-delay: -1.4s; } @keyframes flow-right { 0% { left: 4%; opacity: 0; } 14% { opacity: 1; } 82% { opacity: 1; } 100% { left: 96%; opacity: 0; } } @keyframes flow-left { 0% { left: 96%; opacity: 0; } 14% { opacity: 1; } 82% { opacity: 1; } 100% { left: 4%; opacity: 0; } } } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; } .fact h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 640; letter-spacing: 0; margin-bottom: 6px; } .fact p { margin: 0; font-size: 14.5px; color: var(--text-2); } /* ---------------------------------------------------------------- шаги */ .steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--border-soft); } .step { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--border-soft); } .step::before { counter-increment: step; content: counter(step); font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent); opacity: 0.6; } .step h3 { font-family: var(--sans); font-size: 17px; font-weight: 640; letter-spacing: 0; margin-bottom: 6px; } .step p { margin: 0; color: var(--text-2); font-size: 15px; } .step code, .install-alt code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 1px 6px; } /* Шаг 2 ведёт к секции установки — подчёркиваем как обычную ссылку, а не красим весь заголовок в акцент: это по-прежнему заголовок шага, а не кнопка. */ .step h3 a { color: inherit; text-decoration-color: var(--border); text-underline-offset: 3px; } .step h3 a:hover { color: var(--accent); text-decoration-color: var(--accent-line); } /* ------------------------------------------------------------- установка */ .install-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 28px; } /* На /security эта же карточка держит заголовок раздела внутри себя — заголовку там положен вес попроще витринного h2, тот же приём, что у .card h3 / .step h3 (сан-сериф вместо крупного serif лендинга). */ .install-panel h2 { font-family: var(--sans); font-size: 19px; font-weight: 640; letter-spacing: 0; margin-bottom: 4px; } /* Сегментированный переключатель, а не