/* =========================================================
   KAINAR SERVICE — шрифт Manrope, светлая и тёмная темы (27.10.2026)
   Подключается после style.css. Тёмная тема — прежний вид сайта.
   Светлая включается атрибутом data-theme="light" у <html>:
   по умолчанию — как в настройках телефона/компьютера,
   кнопка в шапке (на телефоне — в меню) запоминает выбор.
   ========================================================= */

@font-face {
  font-family: "Manrope";
  src: url("/assets/theme/manrope.woff2?v=1") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* ---------- Шрифт ---------- */
:root {
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2, h3, h4 { font-weight: 700; }
h2 { letter-spacing: -.025em; }
.hero h1 { font-weight: 800; letter-spacing: -.035em; }
.detail-hero h1, .city-hero h1, .pagehead h1 { font-weight: 800; letter-spacing: -.03em; }
.process-copy h3 { font-weight: 800; letter-spacing: -.02em; }
.brand b { font-weight: 800; letter-spacing: .12em; }
.odometer { font-weight: 700; }
.km-slot { font-weight: 700; }

/* ---------- Кнопка темы ---------- */
.theme-toggle {
  order: 4; flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 14px; color: var(--haze);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .2s, background .2s;
}
.theme-toggle:hover { color: var(--mist); background: rgba(255,255,255,.11); }
.theme-toggle svg, .theme-item svg { width: 20px; height: 20px; flex: none; }
.header-cta, .call { order: 5; }
.burger, .menu { order: 6; }
/* значок и подпись — та тема, которая включится по нажатию */
.t-dark { display: none; }
[data-theme="light"] .t-light { display: none; }
[data-theme="light"] .t-dark { display: inline; }
[data-theme="light"] svg.t-dark { display: block; }
.theme-item { display: none; }
@media (max-width: 859px) {
  .theme-toggle { display: none; }
  .mobile-menu .theme-item, .header .nav.open .theme-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 14px;
    font-size: 17px; font-weight: 500; text-align: left; color: var(--mist); background: transparent; cursor: pointer;
  }
  .mobile-menu .theme-item:hover, .header .nav.open .theme-item:hover { background: rgba(255,255,255,.07); }
  .theme-item svg { color: var(--sky-hi); }
}

/* Открытое меню: без размытия у шапки, иначе в Chrome сквозь меню просвечивает страница */
.topbar:has(> .mobile-menu:not([hidden])), .header:has(> .nav.open) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(140deg, rgba(24,48,104,.97), rgba(9,24,56,.97));
}
[data-theme="light"] .topbar:has(> .mobile-menu:not([hidden])), [data-theme="light"] .header:has(> .nav.open) { background: rgba(255,255,255,.98); }

/* =========================================================
   Светлая тема
   ========================================================= */
[data-theme="light"] {
  --night: #f4f7fc;
  --night-2: #e9eff8;
  --sky: #13a9d6;
  --sky-hi: #08789f;
  --gold-hi: #8a5c00;
  --mist: #0f1f42;
  --haze: #4a5a7b;
  --dim: #66779a;
  --line: rgba(12, 33, 80, .12);
  --ink: #0b1a38;
  --card: rgba(255, 255, 255, .86);
  --card-hi: #fff;
  --glass-fill: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.74) 48%, rgba(255,255,255,.86));
  --glass-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(12,33,80,.06), 0 18px 44px -26px rgba(12,33,80,.34);
  --glass-blur: blur(22px) saturate(160%);
  --rim: linear-gradient(150deg, rgba(12,33,80,.12), rgba(12,33,80,.07) 40%, rgba(12,33,80,.06) 70%, rgba(19,169,214,.32));
  --sky-fill: linear-gradient(135deg, #6fe0f8, #2cc6ea 55%, #17a2cd);
  --gold-fill: linear-gradient(135deg, #ffe27e, #fec50c 55%, #e8a600);
  --soft-shadow: 0 1px 2px rgba(12,33,80,.05), 0 14px 34px -24px rgba(12,33,80,.32);
  color-scheme: light;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(44vw 40vw at 10% 2%, rgba(44,198,234,.16), transparent 70%),
    radial-gradient(52vw 46vw at 92% 14%, rgba(70,120,230,.12), transparent 72%),
    radial-gradient(42vw 36vw at 72% 96%, rgba(254,197,12,.10), transparent 70%),
    linear-gradient(180deg, #e9f2fd 0%, #f5f8fc 46%, #eef3fa 100%);
}
[data-theme="light"] ::selection { color: var(--ink); }
[data-theme="light"] .skip-link { color: #03142e; }

/* блик стекла за курсором — голубоватый вместо белого */
[data-theme="light"] :where(.topbar, .header, .hero-search, .float-card, .service-card, .quick-order-card,
       .kz-map-card, .rent-panel, .detail-board, .work-links-grid a, .related-grid a,
       .faq-list details, .table-wrap, .howto-list li, .fault-list div, .popular-city, .city-drop, .city-more, .show-all, .footer, body > footer,
       .km-sheet, .search-wrap)::after {
  background: radial-gradient(300px circle at var(--mx, 18%) var(--my, -30%), rgba(44,198,234,.09), transparent 62%);
}

/* ---------- Шапка и меню ---------- */
[data-theme="light"] .topbar, [data-theme="light"] .header {
  background: linear-gradient(140deg, rgba(255,255,255,.82), rgba(255,255,255,.64) 52%, rgba(255,255,255,.76));
}
html[data-theme="light"].is-scrolled .topbar, html[data-theme="light"].is-scrolled .header { background: rgba(255,255,255,.93); }
[data-theme="light"] .brand .mark, [data-theme="light"] .brand .brandLogo { filter: drop-shadow(0 4px 10px rgba(12,33,80,.18)); }
[data-theme="light"] .brand b { color: var(--ink); }
[data-theme="light"] .topbar .nav a:hover, [data-theme="light"] .header .nav a:hover { color: var(--ink); background: rgba(12,33,80,.06); }
[data-theme="light"] .city-switch { background: rgba(255,255,255,.7); }
[data-theme="light"] .burger, [data-theme="light"] .menu, [data-theme="light"] .theme-toggle { background: rgba(255,255,255,.7); }
[data-theme="light"] .theme-toggle:hover { background: #fff; }
[data-theme="light"] .burger span, [data-theme="light"] .menu::before, [data-theme="light"] .menu::after { background: var(--ink); }
[data-theme="light"] .mobile-menu, [data-theme="light"] .header .nav.open {
  background: rgba(255,255,255,.97);
  box-shadow: inset 0 0 0 1px rgba(12,33,80,.08), 0 30px 60px -24px rgba(12,33,80,.38);
}
[data-theme="light"] .mobile-menu a:hover, [data-theme="light"] .header .nav.open a:hover,
[data-theme="light"] .mobile-menu .theme-item:hover, [data-theme="light"] .header .nav.open .theme-item:hover { background: rgba(12,33,80,.05); }

/* место под номер арендатора — золото темнее, чтобы читалось на светлом */
[data-theme="light"] .rent-cta, [data-theme="light"] .rent-link {
  background: linear-gradient(135deg, rgba(254,197,12,.24), rgba(254,197,12,.09));
  border-color: rgba(206,150,0,.9);
}
[data-theme="light"] .rent-cta:hover, [data-theme="light"] .rent-link:hover {
  background: linear-gradient(135deg, rgba(254,197,12,.34), rgba(254,197,12,.14)); border-color: #c99200;
}
[data-theme="light"] .rent-cta::after, [data-theme="light"] .rent-link::after {
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.75) 50%, transparent 68%);
}

/* ---------- Кнопки и поля ---------- */
[data-theme="light"] .primary-button, [data-theme="light"] .km-primary, [data-theme="light"] .hs-go {
  box-shadow: 0 12px 28px -14px rgba(19,140,190,.6), inset 0 1px 0 rgba(255,255,255,.65);
}
[data-theme="light"] .primary-button:hover, [data-theme="light"] .km-primary:hover {
  box-shadow: 0 16px 34px -14px rgba(19,140,190,.75), inset 0 1px 0 rgba(255,255,255,.65);
}
[data-theme="light"] .gold-button, [data-theme="light"] .km-gold { box-shadow: 0 12px 28px -14px rgba(214,150,0,.6), inset 0 1px 0 rgba(255,255,255,.7); }
[data-theme="light"] .secondary-button, [data-theme="light"] .price-toggle, [data-theme="light"] .km-copy:not(.km-primary) {
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow);
}
[data-theme="light"] .secondary-button:hover, [data-theme="light"] .price-toggle:hover { background: var(--card-hi); }
[data-theme="light"] .quick-tag, [data-theme="light"] .chip, [data-theme="light"] .city-pill, [data-theme="light"] .search-wrap {
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
}
[data-theme="light"] .quick-tag:hover, [data-theme="light"] .city-pill:hover { background: rgba(44,198,234,.12); box-shadow: inset 0 0 0 1px rgba(8,120,159,.35); }
[data-theme="light"] .chip:hover { color: var(--ink); background: var(--card-hi); }
[data-theme="light"] .chip[aria-pressed="true"] { color: #03142e; background: var(--sky-fill); box-shadow: 0 10px 24px -14px rgba(19,140,190,.7); }
[data-theme="light"] .search-wrap:focus-within { box-shadow: inset 0 0 0 1.5px rgba(8,120,159,.55); }
[data-theme="light"] .hero-search:focus-within { box-shadow: var(--glass-shadow), 0 0 0 2px rgba(19,169,214,.45); }

/* ---------- Каталог ---------- */
[data-theme="light"] .service-card {
  background: linear-gradient(165deg, #fff, rgba(255,255,255,.8) 60%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(12,33,80,.05), 0 22px 44px -30px rgba(12,33,80,.45);
}
[data-theme="light"] .cat-title-bar, [data-theme="light"] .quick-order-card > div {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.76));
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(12,33,80,.35);
}
[data-theme="light"] .cat-title-bar, [data-theme="light"] .quick-order-card b { color: var(--ink); }
[data-theme="light"] .quick-order-card { background: var(--night-2); box-shadow: 0 22px 44px -28px rgba(12,33,80,.5); }
[data-theme="light"] .cat-icon-badge { background: rgba(255,255,255,.82); box-shadow: inset 0 0 0 1px rgba(12,33,80,.08), 0 6px 16px -10px rgba(12,33,80,.4); }
[data-theme="light"] .service-card .service-icon, [data-theme="light"] .job-tags span { background: rgba(12,33,80,.05); }
[data-theme="light"] .empty-state { background: var(--card); }
@media (hover: none) {
  [data-theme="light"] .cat-title-bar, [data-theme="light"] .quick-order-card > div { background: rgba(255,255,255,.93); }
}

/* ---------- Как это работает ---------- */
[data-theme="light"] .process-grid::before { background: rgba(12,33,80,.1); }
[data-theme="light"] .process-step i, [data-theme="light"] .process-copy .step-num {
  color: var(--ink);
  background: radial-gradient(circle at 32% 26%, #fff, rgba(193,240,252,.95) 42%, rgba(111,224,248,.75) 78%);
  box-shadow: inset 0 0 0 1px rgba(8,120,159,.22), 0 14px 32px -14px rgba(19,140,190,.55);
}
[data-theme="light"] .process-step.on i { box-shadow: inset 0 0 0 1px rgba(8,120,159,.3), 0 0 0 6px rgba(44,198,234,.14), 0 18px 40px -14px rgba(19,140,190,.7); }

/* ---------- География и карта ---------- */
[data-theme="light"] .city-more { background: rgba(255,255,255,.6); }
[data-theme="light"] .city-more nav a:hover, [data-theme="light"] .city-links a:hover,
[data-theme="light"] .breadcrumbs a:hover { color: var(--ink); }
[data-theme="light"] .kz-country { fill: rgba(44,198,234,.10); stroke: rgba(8,120,159,.42); }
[data-theme="light"] .kz-dot { fill: var(--sky); stroke: #fff; }
[data-theme="light"] .kz-dot-halo { fill: var(--sky); }
[data-theme="light"] .kz-city:hover .kz-dot, [data-theme="light"] .kz-city.active .kz-dot, [data-theme="light"] .kz-city:focus-visible .kz-dot { fill: #f2b600; }
[data-theme="light"] .kz-city:hover .kz-dot-halo, [data-theme="light"] .kz-city.active .kz-dot-halo { fill: #f2b600; }
[data-theme="light"] .kz-city:hover .kz-label, [data-theme="light"] .kz-city.active .kz-label { fill: var(--ink); }

/* ---------- Аренда страниц ---------- */
[data-theme="light"] .rent-panel {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(254,197,12,.22), transparent 56%),
    linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.72) 62%);
  --rim: linear-gradient(150deg, rgba(232,170,0,.75), rgba(12,33,80,.06) 34%, rgba(12,33,80,.05) 58%, rgba(232,170,0,.5));
}
[data-theme="light"] .rent-mail { border-bottom-color: rgba(206,150,0,.55); }
[data-theme="light"] .slot-demo { background: rgba(12,33,80,.04); box-shadow: inset 0 0 0 1px rgba(12,33,80,.08); }
[data-theme="light"] .slot-lines i { background: rgba(12,33,80,.12); }
[data-theme="light"] .slot-rows div { background: var(--card); }
[data-theme="light"] .slot-number, [data-theme="light"] .slot-rows span, [data-theme="light"] .km-slot { border-color: rgba(206,150,0,.85); background: rgba(254,197,12,.12); }

/* ---------- Внутренние страницы ---------- */
[data-theme="light"] .detail-icon {
  background: radial-gradient(circle at 30% 24%, #fff, rgba(255,255,255,.7) 58%);
  box-shadow: inset 0 0 0 1px rgba(12,33,80,.1), 0 16px 36px -18px var(--accent, var(--sky));
}
[data-theme="light"] .detail-board { background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.76) 55%, rgba(255,255,255,.88)); }
[data-theme="light"] .detail-board > div { border-top-color: rgba(12,33,80,.08); }
[data-theme="light"] .work-links-grid a, [data-theme="light"] .faq-list details, [data-theme="light"] .table-wrap,
[data-theme="light"] .howto-list li, [data-theme="light"] .popular-city, [data-theme="light"] .slot-bar {
  background: var(--card);
}
[data-theme="light"] .work-links-grid a, [data-theme="light"] .related-grid a, [data-theme="light"] .faq-list details,
[data-theme="light"] .howto-list li, [data-theme="light"] .fault-list div, [data-theme="light"] .popular-city { box-shadow: var(--soft-shadow); }
[data-theme="light"] .work-links-grid a:hover { background: rgba(232,248,253,.95); }
[data-theme="light"] .related-grid a, [data-theme="light"] .fault-list div { background: linear-gradient(160deg, #fff, rgba(255,255,255,.78)); }
[data-theme="light"] .related-grid a:hover { background: linear-gradient(160deg, rgba(220,245,253,.95), #fff); }
[data-theme="light"] .faq-list summary span { background: rgba(12,33,80,.06); }
[data-theme="light"] .price-table thead th { background: rgba(12,33,80,.035); }

/* ---------- Подвал ---------- */
[data-theme="light"] .footer, [data-theme="light"] body > footer {
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.66));
  box-shadow: inset 0 1px 0 #fff, var(--soft-shadow);
}
[data-theme="light"] .footer-col h4, [data-theme="light"] body > footer:not(.footer) > div > b { color: var(--ink); }
[data-theme="light"] .footer-links a { background: rgba(12,33,80,.04); }
[data-theme="light"] .footer-links a:hover { color: var(--ink); background: rgba(12,33,80,.08); }
[data-theme="light"] body > footer:not(.footer) > div:not(.footBrand):not(.footBottom) a:hover { color: var(--ink); }

/* ---------- Нижняя панель телефона и окна ---------- */
@media (max-width: 760px) {
  [data-theme="light"] .mobile-bar {
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 0 0 1px rgba(12,33,80,.08), 0 18px 40px -12px rgba(12,33,80,.35);
  }
}
[data-theme="light"] .kmodal::backdrop { background: rgba(12,33,80,.35); }
[data-theme="light"] .km-sheet {
  background: linear-gradient(150deg, #fff, rgba(246,249,254,.98));
  box-shadow: inset 0 1px 0 #fff, 0 40px 90px -30px rgba(12,33,80,.5);
}
[data-theme="light"] .km-close { color: var(--ink); background: rgba(12,33,80,.06); }
[data-theme="light"] .km-field input, [data-theme="light"] .km-field select, [data-theme="light"] .km-field textarea { background: rgba(12,33,80,.04); }
[data-theme="light"] .km-error { color: #c0392b; }
[data-theme="light"] .float-card { box-shadow: var(--glass-shadow); }

/* =========================================================
   Светлая тема без «жидкого стекла»
   ========================================================= */
/* Первый экран: вместо капель — три фото наших мастеров в рамках из матового стекла.
   Фото по очереди сменяются другими нишами (assets/theme/hero.js), за ними медленно
   переливается мягкий цветной свет («северное сияние»). Капли остаются в тёмной теме. */
[data-theme="light"] .spring, [data-theme="light"] .liquid-bg { display: none; }
.hero-photos, .hero-aurora { display: none; }
[data-theme="light"] .hero { isolation: isolate; }
[data-theme="light"] .hero-photos { display: block; position: absolute; inset: 0; z-index: 2; }
.hp {
  position: absolute; margin: 0; border-radius: 28px; overflow: hidden; background: #dfe7f3;
  border: 9px solid rgba(255,255,255,.36); background-clip: padding-box;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(255,255,255,.55), 0 30px 60px -30px rgba(40,60,150,.5);
  translate: var(--px, 0) var(--py, 0); transition: translate .7s var(--ease);
}
.hp img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border-radius: 19px;
  opacity: 0; transform: scale(1.1); transition: opacity 1.4s ease, transform 8s linear;
}
.hp img.on { opacity: 1; transform: scale(1); }
.hp::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 19px; pointer-events: none;
  background: radial-gradient(380px circle at var(--gx, 25%) var(--gy, -15%), rgba(255,255,255,.4), transparent 58%);
}
.hp figcaption {
  position: absolute; left: 12px; top: 12px; z-index: 4; padding: 7px 13px; border-radius: 999px;
  font: 700 13.5px/1.1 var(--font-text); color: #0b1a38;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(255,255,255,.6), 0 8px 20px -10px rgba(12,33,80,.45);
  transition: opacity .35s, transform .35s;
}
.hp figcaption.swap { opacity: 0; transform: translateY(-5px); }
.hp-1 { left: 4%; top: 12%; width: 48%; height: 72%; z-index: 2; }
.hp-2 { left: 56%; top: 2%; width: 40%; height: 46%; }
.hp-3 { left: 56%; top: 52%; width: 40%; height: 46%; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="light"] .hp-1 { animation: rise-in 1.1s var(--ease) .1s both; }
  [data-theme="light"] .hp-2 { animation: rise-in 1.1s var(--ease) .25s both; }
  [data-theme="light"] .hp-3 { animation: rise-in 1.1s var(--ease) .4s both; }
}
/* «северное сияние» за первым экраном: мягкие пятна цвета медленно плывут (маленькие слои, растянутые трансформацией) */
[data-theme="light"] .hero-aurora { display: block; position: absolute; inset: -130px -14vw -90px; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-aurora i { position: absolute; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; will-change: transform; }
.hero-aurora .a1 { left: 68%; top: 22%; background: radial-gradient(closest-side, rgba(70,205,245,.72), rgba(70,205,245,0)); transform: scale(3); animation: au1 15s ease-in-out infinite alternate; }
.hero-aurora .a2 { left: 88%; top: 62%; background: radial-gradient(closest-side, rgba(116,136,255,.58), rgba(116,136,255,0)); transform: scale(3.2); animation: au2 19s ease-in-out infinite alternate; }
.hero-aurora .a3 { left: 58%; top: 84%; background: radial-gradient(closest-side, rgba(255,198,64,.58), rgba(255,198,64,0)); transform: scale(2.8); animation: au3 17s ease-in-out infinite alternate; }
.hero-aurora .a4 { left: 12%; top: 6%; background: radial-gradient(closest-side, rgba(186,146,255,.5), rgba(186,146,255,0)); transform: scale(3.2); animation: au4 21s ease-in-out infinite alternate; }
@keyframes au1 { to { transform: translate(-22vw, 14vh) scale(3.6); } }
@keyframes au2 { to { transform: translate(-14vw, -22vh) scale(2.6); } }
@keyframes au3 { to { transform: translate(16vw, -16vh) scale(3.4); } }
@keyframes au4 { to { transform: translate(26vw, 18vh) scale(2.8); } }
[data-theme="light"] .float-card { background: rgba(255,255,255,.5); }
@media (max-width: 1100px) {
  .hp-1 { left: calc(50% - min(19%, 120px)); top: 5%; width: min(38%, 240px); height: 90%; }
  .hp-2 { left: calc(50% - min(19%, 120px) - min(25%, 160px)); top: 17%; width: min(28%, 180px); height: 72%; }
  .hp-3 { left: calc(50% + min(19%, 120px) - min(3%, 20px)); top: 17%; width: min(28%, 180px); height: 72%; }
  .hero-aurora .a1 { left: 72%; top: 18%; }
  .hero-aurora .a2 { left: 20%; top: 30%; }
  .hero-aurora .a3 { left: 64%; top: 52%; }
  .hero-aurora .a4 { left: 6%; top: 4%; }
}
@media (max-width: 760px) {
  .hp { border-width: 6px; border-radius: 22px; }
  .hp img, .hp::after { border-radius: 16px; }
  .hp figcaption { left: 7px; top: 7px; padding: 5px 9px; font-size: 11px; }
  .hero-aurora i { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
}
@media (prefers-reduced-motion: reduce) { .hero-aurora i { animation: none; } .hp img { transition: none; } }

/* «Как это работает»: в светлой теме сцены без искр и синего облака вокруг */
.process-art picture { display: block; }
.process-art .art-light { display: none; }
[data-theme="light"] .process-art .art-light { display: block; }
[data-theme="light"] .process-art .art-dark { display: none; }

/* «Коротко»: ответ на главный вопрос о цене — сразу под первым экраном (28.10.2026) */
.answer-section {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter))); margin: clamp(26px, 4vw, 44px) auto 0;
}
.answer-card {
  position: relative; max-width: 920px; padding: 22px 24px 22px 30px; border-radius: 22px;
  background: linear-gradient(145deg, rgba(44,198,234,.13), rgba(255,255,255,.035) 62%);
  box-shadow: inset 0 0 0 1px rgba(111,224,248,.26), 0 24px 56px -34px rgba(0,0,0,.8);
}
.answer-card::before {
  content: ""; position: absolute; left: 12px; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: var(--sky-fill);
}
.answer-card .section-kicker { margin-bottom: 6px; }
.answer-card h2 { margin: 0 0 10px; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.25; }
.answer-card p { margin: 0; max-width: 72ch; font-size: 17px; line-height: 1.6; color: var(--mist); }
[data-theme="light"] .answer-card {
  background: linear-gradient(145deg, rgba(19,169,214,.10), #fff 66%);
  box-shadow: inset 0 0 0 1px rgba(19,169,214,.26), var(--soft-shadow);
}
@media (max-width: 560px) { .answer-card { padding: 18px 18px 18px 26px; border-radius: 18px; } .answer-card::before { left: 10px; } }