/*! nss-visual-l01.css — L01 «New-SST visual system» final wave, 2026-09-27.
 *  Additive visual layer, loaded LAST (after nss-nav-lane1.css).
 *  Source of truth: new-sst-visual-project v1 (art-direction/tokens.css,
 *  lanes/homepage/design.css + components.html, lanes/knowledge/styles.css).
 *  Palette: canvas #F9FBFF · ink #10233F · muted #4F617B · accent #2456D9 ·
 *  soft #EDF3FF · line #DCE5F1. Type: Inter (body) / Inter Tight (headings) /
 *  PT Mono (labels). Fonts and the New-SST mark are the candidate's own local
 *  files (provenance: art-direction/asset-provenance.json — byte-identical
 *  copies FROM this candidate); nothing is forked or duplicated.
 *  Non-goals: does NOT touch .nsw-* / mascot / vyshka assistant surfaces
 *  (VYSHKA keeps white body, dark visor, cyan details); does NOT restyle
 *  frozen lane files (nss-motion-lane1, nss-nav-lane1, assistant-widget,
 *  vyshka-assistant) — it only adapts around them.
 *  Reversal: remove the <link> from HTML + delete file; base styles return.
 */

/* ============================== 0. TOKENS ============================== */
:root {
  --nssl01-canvas: #f9fbff;
  --nssl01-surface: #ffffff;
  --nssl01-ink: #10233f;
  --nssl01-muted: #4f617b;
  --nssl01-blue: #2456d9;
  --nssl01-blue-hover: #163eab;
  --nssl01-soft: #edf3ff;
  --nssl01-line: #dce5f1;
  --nssl01-line-strong: #c9d6ea;
  --nssl01-focus: #2456d9;
  --nssl01-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --nssl01-font-heading: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --nssl01-font-mono: "PT Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --nssl01-type-display: clamp(2.375rem, 4.6vw, 3.75rem);
  --nssl01-type-title: clamp(1.875rem, 3vw, 2.625rem);
  --nssl01-type-lead: clamp(1.0625rem, 1.4vw, 1.1875rem);
  --nssl01-radius-control: .625rem;
  --nssl01-radius-card: 1.0625rem;
  --nssl01-radius-panel: 1.375rem;
  --nssl01-shadow-card: 0 16px 48px rgba(22, 53, 95, .05);
  --nssl01-shadow-hover: 0 12px 30px rgba(16, 35, 63, .10);
  --nssl01-shadow-action: 0 8px 22px rgba(36, 86, 217, .16);
  --nssl01-ease: cubic-bezier(.22, .75, .25, 1);
  --nssl01-t-fast: 160ms;
  --nssl01-t-normal: 240ms;
  --nssl01-section-space: clamp(3rem, 6vw, 5.5rem);
  --nssl01-reading-measure: 68ch;

  /* Remap shared legacy tokens onto the approved New-SST accents. Existing
     rules keep working; only the values move to the approved palette. */
  --cyan: #2456d9;
  --cyan-soft: rgba(36, 86, 217, .08);
  --grad-accent: #10233f;
  --grad-cta: #2456d9;
  --border: #dce5f1;
  --border-strong: #cbd7e9;
}

/* ===================== 1. BASE SURFACES & TYPOGRAPHY ===================== */
/* Scoped away from the assistant widget (body-level .nsw-btn / .nsw-panel
   define their own fonts inline, so they are untouched either way). */
body.home-positive,
body[class] > main,
body > footer {
  background-color: var(--nssl01-canvas);
}
main,
.pt-header,
.pt-topbar,
footer {
  color: var(--nssl01-ink);
}
.mp {
  background: var(--nssl01-canvas);
  color: var(--nssl01-ink);
}
main :is(h1, h2, h3, h4),
.pt-header :is(h1, h2, h3, h4),
footer :is(h1, h2, h3, h4) {
  font-family: var(--nssl01-font-heading);
  color: var(--nssl01-ink);
  letter-spacing: -.02em;
}
.mp :is(.mp-title, .mp-section-title),
main .v-h1, main .v-h2 {
  font-family: var(--nssl01-font-heading);
  letter-spacing: -.03em;
}
main p, main li {
  color: var(--nssl01-muted);
}
main strong, main b {
  color: var(--nssl01-ink);
}
/* Dark surfaces own their text colors — never recolor them (keeps .d2-band,
   .mp-cta--solid, navy .v-footer and the assistant panels untouched). */
.d2-band :is(p, li, strong, b, h1, h2, h3, h4),
.mp-cta--solid :is(p, li, strong, b, h1, h2, h3, h4),
.v-footer :is(p, li, strong, b, h1, h2, h3, h4) {
  color: inherit;
}
::selection {
  background: #d4e4ff;
  color: var(--nssl01-ink);
}

/* Focus rings — accent #2456D9, site-wide (design components.html state). */
main :is(a, button, summary, input, select, textarea):focus-visible,
.pt-header :is(a, button):focus-visible,
footer :is(a, button):focus-visible,
.nss-skip-link:focus-visible {
  outline: 3px solid var(--nssl01-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Dividers */
main hr, footer hr {
  border: 0;
  border-top: 1px solid var(--nssl01-line);
}

/* Section rhythm — consistent spacing across pages (design .section 92px). */
.mp .mp-section,
main .v-section {
  padding-block: var(--nssl01-section-space);
}
.v-section--tight {
  padding-block: calc(var(--nssl01-section-space) * .6);
}

/* Kicker/eyebrow: PT Mono uppercase + 34px rule (design .eyebrow). */
.mp-kicker,
main .v-kicker,
.mp-services__kicker,
.mp-head .mp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--nssl01-font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--nssl01-muted);
}
.mp-kicker::before,
main .v-kicker::before,
.mp-services__kicker::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  background: var(--nssl01-blue);
  flex: none;
}

/* Leads */
.mp-lead, main .v-lead, .mp-hero__lead {
  font-size: var(--nssl01-type-lead);
  line-height: 1.65;
  color: var(--nssl01-muted);
  max-width: 62ch;
}

/* ========================= 2. HEADER / IDENTITY ========================= */
/* One New-SST mark + «НЬЮ-ССТ» wordmark, consistent placement — existing
   pt-logo markup and nav logic stay untouched, only the surface moves to
   the approved look. */
.pt-topbar {
  background: var(--nssl01-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.pt-topbar__link {
  color: #b9cfea;
}
.pt-topbar__link:hover {
  color: #ffffff;
}
.pt-header {
  background: rgba(249, 251, 255, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nssl01-line);
}
.pt-logo__mark--svg svg,
.pt-logo__mark--svg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(8, 26, 48, .18);
}
.pt-logo__text strong {
  font-family: var(--nssl01-font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--nssl01-ink);
}
.pt-logo__text small {
  font-family: var(--nssl01-font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nssl01-muted);
}
.pt-nav__link {
  color: var(--nssl01-muted);
  font-weight: 500;
  transition: color var(--nssl01-t-fast) var(--nssl01-ease);
}
.pt-nav__link:hover,
.pt-nav__link[aria-expanded="true"] {
  color: var(--nssl01-blue);
}
.pt-mega {
  border: 1px solid var(--nssl01-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 35, 63, .14);
  /* dialog/dropdown open transition — state-linked, no logic change */
  transition: opacity var(--nssl01-t-normal) var(--nssl01-ease),
    transform var(--nssl01-t-normal) var(--nssl01-ease);
}
.pt-mega__grid {
  gap: 10px 14px;
}
.pt-mcell {
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background var(--nssl01-t-fast) var(--nssl01-ease),
    border-color var(--nssl01-t-fast) var(--nssl01-ease);
}
.pt-mcell:hover {
  background: var(--nssl01-soft);
  border-color: var(--nssl01-line);
}
.pt-mcell__title {
  color: var(--nssl01-ink);
  font-weight: 600;
}
.pt-mcell__desc {
  color: var(--nssl01-muted);
}
.pt-mcell__chip {
  color: var(--nssl01-blue);
}

/* ============================ 3. BUTTONS ============================ */
/* primary / secondary / ghost states from lanes/homepage components.html. */
.mp-btn,
main .v-btn,
.l243__btn,
.pt-btn--cta {
  border-radius: var(--nssl01-radius-control);
  font-weight: 600;
  transition: background var(--nssl01-t-fast) var(--nssl01-ease),
    border-color var(--nssl01-t-fast) var(--nssl01-ease),
    transform var(--nssl01-t-fast) var(--nssl01-ease),
    box-shadow var(--nssl01-t-fast) var(--nssl01-ease);
}
.mp-btn:active,
main .v-btn:active,
.l243__btn:active,
.pt-btn--cta:active {
  transform: translateY(0) scale(.985);
}
.mp-btn--primary,
main .v-btn--cta,
.l243__btn,
.pt-btn--cta,
.cro-cta-inline .mp-btn--primary,
.mp .mp-hero__actions .mp-btn--primary {
  background: var(--nssl01-blue);
  border: 1px solid var(--nssl01-blue);
  color: #ffffff;
  box-shadow: var(--nssl01-shadow-action);
}
.mp-btn--primary:hover,
main .v-btn--cta:hover,
.l243__btn:hover,
.pt-btn--cta:hover,
.cro-cta-inline .mp-btn--primary:hover,
.mp .mp-hero__actions .mp-btn--primary:hover {
  background: var(--nssl01-blue-hover);
  border-color: var(--nssl01-blue-hover);
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(36, 86, 217, .24);
  filter: none;
}
.mp .mp-hero__actions .mp-btn--ghost {
  border-color: var(--nssl01-line-strong);
  color: var(--nssl01-ink);
}
.mp .mp-hero__actions .mp-btn--ghost:hover {
  background: var(--nssl01-soft);
  border-color: #a9c1ef;
  color: var(--nssl01-blue-hover);
}
.mp-btn--ghost {
  background: var(--nssl01-surface);
  border: 1px solid var(--nssl01-line-strong);
  color: var(--nssl01-ink);
}
.mp-btn--ghost:hover {
  background: var(--nssl01-soft);
  border-color: #a9c1ef;
  color: var(--nssl01-blue-hover);
}
main .v-btn:not(.v-btn--cta) {
  background: var(--nssl01-surface);
  border: 1px solid var(--nssl01-line-strong);
  color: var(--nssl01-blue);
}
main .v-btn:not(.v-btn--cta):hover {
  background: var(--nssl01-soft);
  color: var(--nssl01-blue-hover);
}
.pt-btn--cta:focus-visible {
  outline: 3px solid var(--nssl01-focus);
  outline-offset: 3px;
}

/* Text links inside cards (design .text-link: blue, 44px target, arrow). */
.mp-card__link,
.mp-card__link--pin,
main .text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--nssl01-blue);
  text-underline-offset: 5px;
  transition: color var(--nssl01-t-fast) var(--nssl01-ease);
}
.mp-card__link:hover,
.mp-card__link--pin:hover,
main .text-link:hover {
  color: var(--nssl01-blue-hover);
  text-decoration: underline;
}

/* ============================ 4. CARDS ============================ */
/* design .nss-card / .service-card: white surface, hairline #DCE5F1,
   radius 17px, whisper shadow; hover = border #AAC3EE + lift. */
.mp-card,
main .svc-card,
main .quick-answer,
main .expert-answer {
  background: var(--nssl01-surface);
  border: 1px solid var(--nssl01-line);
  border-radius: var(--nssl01-radius-card);
  box-shadow: var(--nssl01-shadow-card);
  transition: border-color var(--nssl01-t-normal) var(--nssl01-ease),
    box-shadow var(--nssl01-t-normal) var(--nssl01-ease),
    transform var(--nssl01-t-normal) var(--nssl01-ease);
}
.mp-card:hover,
main .svc-card:hover {
  border-color: #aac3ee;
  box-shadow: var(--nssl01-shadow-hover);
  transform: translateY(-2px);
}
.mp-card__num,
.svc-card .mp-card__num {
  font-family: var(--nssl01-font-mono);
  color: var(--nssl01-blue);
}
.mp-card__title {
  font-family: var(--nssl01-font-heading);
  color: var(--nssl01-ink);
}
.mp-card__tag,
.qa-tag,
.ea-tag,
.l243__chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--nssl01-soft);
  border: 1px solid #cbdcf5;
  color: var(--nssl01-blue);
  font-family: var(--nssl01-font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
.v-badge {
  background: var(--nssl01-soft);
  border: 1px solid var(--nssl01-line);
  color: var(--nssl01-ink);
  border-radius: 999px;
}
.cro-trust__check {
  background: var(--nssl01-blue);
  color: #ffffff;
}

/* ======================= 5. HERO (homepage) ======================= */
/* Two-column hero rhythm from lanes/homepage: display type, lead 465px,
   actions row, caption; the candidate's own rotator/scene stay intact. */
.mp-hero {
  background:
    radial-gradient(ellipse 60% 420px at 78% -6%, rgba(237, 243, 255, .9), transparent 70%),
    var(--nssl01-canvas);
}
.mp-hero__title {
  font-family: var(--nssl01-font-heading);
  font-size: clamp(2.625rem, 4.9vw, 4.125rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  color: var(--nssl01-ink);
  max-width: 640px;
}
.mp-hero__lead {
  max-width: 480px;
  color: var(--nssl01-muted);
}
.mp-hero__lead b,
.mp-hero__lead strong {
  color: var(--nssl01-ink);
}
.mp-hero__note {
  font-family: var(--nssl01-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--nssl01-muted);
}
.mp-hero__actions {
  gap: 12px;
  flex-wrap: wrap;
}
.mp-stat__value {
  font-family: var(--nssl01-font-heading);
  color: var(--nssl01-ink);
  letter-spacing: -.03em;
}
.mp-stat__label {
  color: var(--nssl01-muted);
}
/* Solution scheme surfaces (existing markup, approved palette). */
.nss-scene-wrap {
  background: transparent;
}
.nss-system-visual__top span:first-child {
  font-family: var(--nssl01-font-mono);
  letter-spacing: .1em;
}
.nss-system-visual__core {
  background: linear-gradient(145deg, #16355f, #081a30);
}
.nss-system-visual__caption {
  font-family: var(--nssl01-font-mono);
  color: var(--nssl01-muted);
}

/* ==================== 6. SERVICE / PRICING SURFACE ==================== */
/* Presentation patterns of service.html/pricing.html mapped onto the real
   uslugi/ surfaces. Commercial values are the candidate's own — untouched. */
.v-table-wrap {
  border: 1px solid var(--nssl01-line);
  border-radius: 14px;
  background: var(--nssl01-surface);
  box-shadow: var(--nssl01-shadow-card);
  overflow: hidden;
}
.v-table {
  border-collapse: collapse;
}
.v-table th {
  background: #edf3fb;
  color: #334f71;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-family: var(--nssl01-font-mono);
}
.v-table :is(th, td) {
  border-bottom: 1px solid var(--nssl01-line);
  vertical-align: top;
}
.v-table tr:last-child td {
  border-bottom: 0;
}
.v-form-note {
  font-family: var(--nssl01-font-mono);
  font-size: 11px;
  color: var(--nssl01-muted);
}
.svc-price {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--nssl01-soft);
  border: 1px solid #cbdcf5;
  color: var(--nssl01-blue);
  font-family: var(--nssl01-font-mono);
  font-size: 11px;
}
/* «от 690 000 ₽» — pricing.html .price-amount pattern on real values. */
.svc-from {
  font-family: var(--nssl01-font-heading);
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--nssl01-ink);
}
.svc-from small {
  display: block;
  font-family: var(--nssl01-font-body);
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--nssl01-muted);
  margin-top: 4px;
}
.vx5-group > h3,
#catalog-grid h3 {
  font-family: var(--nssl01-font-heading);
  color: var(--nssl01-ink);
}
.d2-chips {
  background: rgba(249, 251, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nssl01-line);
}
.d2-chips a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nssl01-line);
  border-radius: 999px;
  background: var(--nssl01-surface);
  color: var(--nssl01-muted);
  transition: color var(--nssl01-t-fast) var(--nssl01-ease),
    border-color var(--nssl01-t-fast) var(--nssl01-ease),
    background var(--nssl01-t-fast) var(--nssl01-ease);
}
.d2-chips a:hover {
  color: var(--nssl01-blue);
  border-color: #a9c1ef;
  background: var(--nssl01-soft);
}

/* ==================== 7. READING TYPOGRAPHY ==================== */
/* Reading-surface patterns from lanes/knowledge: measure limit ~68ch,
   17px/1.85 body, calm ink; visual styling only — L05 document logic
   untouched. Primary-source/fragment distinction stays visible through
   the existing blockquote/source markup. */
.v-article {
  max-width: min(100%, 46rem);
  font-size: 17px;
  line-height: 1.85;
}
.v-article p,
.v-article ul,
.v-article ol {
  color: #31465f;
}
.v-article h2 {
  font-family: var(--nssl01-font-heading);
  font-size: 1.75rem;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 2.25rem 0 .75rem;
  color: var(--nssl01-ink);
}
.v-article h3 {
  font-family: var(--nssl01-font-heading);
  font-size: 1.3125rem;
  margin: 1.75rem 0 .625rem;
  color: var(--nssl01-ink);
}
.v-article a {
  color: var(--nssl01-blue);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.v-article a:hover {
  color: var(--nssl01-blue-hover);
}
/* First-source quote: soft shelf, accent hairline (knowledge lane pattern). */
.v-article blockquote {
  border-left: 3px solid var(--nssl01-blue);
  background: var(--nssl01-soft);
  border-radius: 0 10px 10px 0;
  color: #334e70;
}
.v-article code {
  font-family: var(--nssl01-font-mono);
  background: var(--nssl01-soft);
  border: 1px solid var(--nssl01-line);
}
.v-crumbs {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.v-crumbs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.v-crumbs a:hover {
  color: var(--nssl01-blue);
}

/* ============================ 8. FAQ ============================ */
/* components.html FAQ state: 56px summary, +/− marker in accent. */
.mp-faq__item {
  border-bottom: 1px solid var(--nssl01-line);
}
.mp-faq details,
.mp-faq__item {
  border-top: 1px solid var(--nssl01-line);
}
.mp-faq__q {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--nssl01-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--nssl01-ink);
}
.mp-faq__q::-webkit-details-marker {
  display: none;
}
.mp-faq__q::after {
  content: "+";
  flex: none;
  color: var(--nssl01-blue);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.mp-faq__item[open] .mp-faq__q::after {
  content: "−";
}
.mp-faq__a p {
  color: var(--nssl01-muted);
}

/* ============================ 9. L243 BAND ============================ */
.l243__card-outer,
.l243__inner {
  border-radius: var(--nssl01-radius-panel);
}
.l243__chip {
  background: var(--nssl01-soft);
}
.l243__cell b {
  font-family: var(--nssl01-font-heading);
  color: var(--nssl01-ink);
}
.l243__link {
  color: var(--nssl01-blue);
}
.l243__link:hover {
  color: var(--nssl01-blue-hover);
}

/* ============================ 10. FOOTER ============================ */
footer {
  border-top: 1px solid var(--nssl01-line);
}
footer :is(a, button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
footer a:hover {
  color: var(--nssl01-blue);
}
/* Navy footer keeps light link colors (dark surface). */
.v-footer a:hover {
  color: #b7d1ff;
}

/* ==================== 11. MOTION (state-linked) ==================== */
/* Section reveal — transition-based, opt-in via html.nss-l01-js (set by
   nss-visual-l01.js before first paint of the observer). Without JS the
   content is fully visible; with JS elements fade/rise once on entry. */
html.nss-l01-js .nss-l01-reveal:not(.nss-l01-in) {
  opacity: 0;
  transform: translateY(14px);
}
html.nss-l01-js .nss-l01-reveal {
  transition: opacity .5s var(--nssl01-ease), transform .5s var(--nssl01-ease);
  will-change: opacity, transform;
}
html.nss-l01-js .nss-l01-reveal.nss-l01-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Ambient pause: nss-motion-lane1.js toggles html[data-nss-motion="paused"];
   our reveal must never freeze half-hidden — paused ⇒ instantly visible. */
html[data-nss-motion="paused"] .nss-l01-reveal {
  transition: none !important;
}
html[data-nss-motion="paused"] .nss-l01-reveal:not(.nss-l01-in) {
  opacity: 1 !important;
  transform: none !important;
}
/* Pause affordance inside our layer (fallback only; lane1's .nss-mbtn-l1
   takes precedence when present — JS avoids duplicates). */
.nss-vp-l01 {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 899;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--nssl01-line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
  color: #142842;
  font: 600 13px/1.25 var(--nssl01-font-body);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 31, 58, .14);
}
.nss-vp-l01:hover {
  border-color: var(--nssl01-blue);
}
.nss-vp-l01:focus-visible {
  outline: 3px solid var(--nssl01-focus);
  outline-offset: 2px;
}

/* Full reduced-motion support: our layer contributes nothing that moves. */
@media (prefers-reduced-motion: reduce) {
  html.nss-l01-js .nss-l01-reveal,
  html.nss-l01-js .nss-l01-reveal:not(.nss-l01-in) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.nss-l01-js .nss-l01-reveal {
    will-change: auto;
  }
  .mp-btn,
  main .v-btn,
  .l243__btn,
  .pt-btn--cta,
  .mp-card,
  main .svc-card,
  .pt-mega,
  .d2-chips a {
    transition: none !important;
  }
  .pt-header,
  .pt-mega,
  .pt-nav {
    scroll-behavior: auto;
  }
}

/* ==================== 12. RESPONSIVE GUARDS ==================== */
/* Single-column rebuild / target sizes on small screens; no horizontal
   scroll: hairline padding control (see QA checks.json). */
@media (max-width: 900px) {
  .mp-hero__title {
    font-size: clamp(2.25rem, 8vw, 2.875rem);
  }
  .mp-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mp-hero__actions .mp-btn {
    min-height: 50px;
    padding-inline: 12px;
    font-size: .875rem;
    justify-content: center;
    text-align: center;
  }
  main .v-section,
  .mp .mp-section {
    padding-block: 3.25rem;
  }
  .svc-from {
    font-size: 1.1875rem;
  }
}
@media (max-width: 600px) {
  .mp-hero__actions {
    grid-template-columns: 1fr;
  }
  .mp-hero__lead {
    font-size: .9375rem;
  }
  .v-article {
    font-size: 1rem;
  }
  .v-table-wrap {
    border-radius: 12px;
  }
  .mp-card,
  main .svc-card,
  main .quick-answer,
  main .expert-answer {
    border-radius: 14px;
  }
  .l243__inner {
    border-radius: 16px;
  }
  .nss-vp-l01 {
    left: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    font-size: 12px;
    padding: 9px 12px;
  }
}