/* Zero / Signal compatibility layer. Load after the legacy stylesheet and tokens. */
:root {
  --bg: var(--mist-0);
  --bg-alt: var(--mist-1);
  --bg-dark: var(--mist-1);
  --bg-dark-2: var(--mist-1);
  --bg-dark-3: var(--mist-1);
  --card: var(--mist-0);
  --card-2: var(--mist-1);
  --card-dark: var(--mist-1);
  --black: var(--ink);
  --dark: var(--mist-1);
  --dark-2: var(--mist-1);
  --dark-3: var(--mist-1);
  --border: var(--line);
  --border-2: var(--line);
  --accent: var(--amber-ink);
  --accent-hover: var(--amber-ink);
  --accent-glow: var(--amber-glow);
  --gold: var(--amber-ink);
  --gold-light: var(--amber);
  --navy: var(--mist-1);
  --blue: var(--mist-1);
  --blue-bright: var(--mist-1);
  --blue-glow: var(--amber-glow);
  --emerald: var(--amber-ink);
  --emerald-glow: var(--amber-glow);
  --purple: var(--amber-ink);
  --white: var(--ink);
  --text-1: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-2);
  --light-bg: var(--mist-0);
  --light-card: var(--mist-0);
  --light-text: var(--ink);
  --light-text2: var(--ink-2);
  --light-border: var(--line);
  --font-display: var(--sans);
  --font-body: var(--sans);
  --font-mono: var(--mono);
  --h1: clamp(2.25rem, 6vw, 5.5rem);
  --h1-xl: var(--fs-display);
  --h2: var(--fs-h2);
  --h3: var(--fs-h3);
  --h4: 1.125rem;
  --body: var(--fs-body);
  --sm: var(--fs-small);
  --xs: var(--fs-mono);
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-10: 5rem;
  --sp-12: 6rem;
  --sp-16: 8rem;
  --radius-sm: 12px;
  --radius: var(--radius-card);
  --radius-lg: var(--radius-card);
  --radius-xl: var(--radius-card);
  --radius-full: 999px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --shadow-blue: none;
  --shadow-em: none;
  --transition: var(--dur) var(--ease);
  --transition-slow: var(--dur) var(--ease);
  --container: var(--max);
  --ctx-h: var(--ink);
  --ctx-body: var(--ink-2);
  --ctx-muted: var(--ink-2);
  --ctx-border: var(--line);
  --ctx-faq-bg: var(--mist-1);
}

.hero, .page-hero, .section-dark, .section-darker, .section-card, .cta-banner, .cs-header, .cs-body, .cs-big-metric, .card, .card-light, .card-glass, .arch-card, .service-card, .industry-card, .cs-card, .bcc-card, .feature-panel, .testimonial-card, .blog-card, .region-card, .process-step, .award-card, .resource-card, .contact-info-item, .tool-chip, .comparison-table-wrap, .cta-inline-card, .cta-sidebar-card, .tool-card, .content-card, .tool-result-card {
  --ctx-h: var(--ink);
  --ctx-body: var(--ink-2);
  --ctx-muted: var(--ink-2);
  --ctx-border: var(--line);
  --ctx-faq-bg: var(--mist-1);
}

body {
  background: var(--mist-0);
  color: var(--ink-2);
  font: var(--fs-body)/1.55 var(--sans);
}
h1, h2, h3, .hero h1, .page-hero h1 {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ctx-h);
  letter-spacing: -0.04em;
  line-height: 1.08;
}
h1 { font-size: var(--h1); }
.hero h1 { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.045em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.03em; line-height: 1.1; }
.hero h1 .accent { color: var(--amber-ink); -webkit-text-stroke: 0; }
.hero, .page-hero, .section-dark, .section-darker, .section-card, .cta-banner, .cs-header {
  background: var(--mist-1);
  color: var(--ink-2);
  box-shadow: none;
}
.section, .section-light { background: var(--mist-0); }
/* Alternate sections retain their mist surface when also marked .section. */
.section.section-dark, .section.section-darker, .section.section-card { background: var(--mist-1); }
.hero::before, .hero::after, .page-hero::before, .page-hero::after,
.cta-banner::before, .cta-banner::after { background: none; }
.page-hero-breadcrumb a, .hero-sub, .page-hero-sub { color: var(--ink-2); }
.section-header { margin-bottom: var(--sp-8); }
.section-eyebrow, .eyebrow, .section-header .eyebrow {
  display: block;
  font: 500 var(--fs-mono)/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: var(--sp-2);
}
.section-eyebrow::before { display: none; }
.btn, .btn-primary, .btn-emerald {
  min-height: 44px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--mist-0);
  font-family: var(--sans);
  box-shadow: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover, .btn-primary:hover, .btn-emerald:hover {
  background: var(--ink);
  color: var(--mist-0);
  border-color: var(--ink);
  box-shadow: none;
}
.btn-ghost, .btn-outline, .btn-outline-blue, .page-hero .btn-outline,
.btn-ghost:hover, .btn-outline:hover, .btn-outline-blue:hover, .page-hero .btn-outline:hover {
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius-full);
  color: var(--ink);
  box-shadow: none;
}
:focus-visible, .skip-link:focus, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.badge, .badge-green, .badge-blue, .badge-purple, .badge-gold, .tag, .cta-banner .tag {
  font: 500 var(--fs-mono)/1.5 var(--mono);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-2);
  box-shadow: none;
}
input, select, textarea, .form-input, .form-select, .form-textarea,
.form-group input, .form-group select, .form-group textarea, .lead-magnet-form input {
  background: var(--mist-0);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 44px;
  font-family: var(--sans);
  transition: none;
}
.form-group select { background-image: none; appearance: auto; }
input::placeholder, textarea::placeholder { color: var(--ink-2); }
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.lead-magnet-form input:focus {
  border-color: var(--amber);
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  box-shadow: none;
}
.faq-item, .faq-light .faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.faq-question, .faq-light .faq-question {
  min-height: 44px;
  color: var(--ink);
  background: transparent;
  transition: none;
}
.faq-answer, .faq-light .faq-answer { color: var(--ink-2); }
.faq-icon, .faq-light .faq-icon, .faq-item.open .faq-icon {
  background: transparent;
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}
::selection { background: var(--amber); color: var(--ink); }
.skip-link { background: var(--ink); color: var(--mist-0); transition: none; }

/* Preserve the existing footer's dark context when the global aliases change. */
footer { --bg-dark: var(--ink); --white: var(--mist-0); }
.cs-header h3 { color: var(--ink); font-weight: 500; }
.text-gradient, .text-gradient-gold {
  background: none;
  color: var(--amber-ink);
  -webkit-text-fill-color: currentColor;
}

.card, .card-light, .card-glass, .arch-card, .service-card, .industry-card, .cs-card, .bcc-card, .feature-panel, .testimonial-card, .blog-card, .region-card, .process-step, .award-card, .resource-card, .contact-info-item, .tool-chip, .comparison-table-wrap, .cta-inline-card, .cta-sidebar-card, .tool-card, .content-card, .tool-result-card {
  background: var(--mist-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--ink-2);
  box-shadow: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.card:hover, .card-light:hover, .card-glass:hover, .arch-card:hover, .service-card:hover, .industry-card:hover, .cs-card:hover, .bcc-card:hover, .feature-panel:hover, .testimonial-card:hover, .blog-card:hover, .region-card:hover, .process-step:hover, .award-card:hover, .resource-card:hover, .contact-info-item:hover, .tool-chip:hover, .comparison-table-wrap:hover, .cta-inline-card:hover, .cta-sidebar-card:hover, .tool-card:hover, .content-card:hover, .tool-result-card:hover {
  background: var(--mist-0);
  border-color: var(--line);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .arch-card, .arch-connector { opacity: 1; }
}

/* Grid children may shrink below their content width (contact form overflowed at 375px). */
.contact-layout > *, .form-row > *, .form-group > * { min-width: 0; }

/* Legacy rules written for dark sections that still paint white text on what is now mist.
   :root raises specificity above style.css's two-class selectors. */
:root .breadcrumb-link { color: var(--ink-2); }
:root .breadcrumb-link:hover { color: var(--amber-ink); }
:root .breadcrumb-current { color: var(--ink); }
:root .btn.btn-outline, :root .btn-outline { color: var(--ink); border-color: var(--ink); background: transparent; }
:root .btn.btn-outline:hover, :root .btn-outline:hover { color: var(--mist-0); background: var(--ink); }
:root :is(.section-dark, .section-darker, .section-card, .hero, .page-hero, .cta-banner) .tag { color: var(--ink-2); background: transparent; border-color: var(--line); }

/* Without JS, legacy FAQ answers and scroll reveals stay visible. */
html:not(.js) .faq-answer { display: block; }
html:not(.js) .fade-in { opacity: 1; transform: none; }
/* Scroll-to-top: ink with mist text in every state (legacy hover went dark on amber). */
.scroll-top-btn, .scroll-top-btn:hover, .scroll-top-btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--mist-0); }
.scroll-top-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* The shell nav is 88px tall (legacy offsets assumed 72px). */
.breadcrumb-nav { padding-top: calc(88px + .75rem); }
.page-hero { padding-top: calc(88px + var(--sp-10)); }

/* S-802: the home page's editorial language, scoped to inner landing pages.
   Article heroes are siblings of .prose, so exclude the whole article page.
   Keep responsive rules nested here so home, articles and the shell stay intact. */
body { counter-reset: zsec; }

#main-content:not(.zero-home, .prose, .wp-content):not(:has(.zero-home, .prose, .wp-content)) {
  & .container {
    max-width: var(--max);
    padding-inline: var(--gutter);
  }

  & :is(.section, section.section-dark, section.section-darker, .expansion-section, .tool-faq-section) {
    counter-increment: zsec;
    min-width: 0;
  }

  & :is(.section, section.section-dark, section.section-darker, .cta-section, .section-cta) {
    padding-block: clamp(64px, 9vw, 144px);
    background: var(--mist-0);
    color: var(--ink-2);
    background-image: none;
  }

  & :is(.section-dark, .section-card, .section-alt, section[class^="bg-"], section[class*=" bg-"]) {
    background: var(--mist-1);
    background-image: none;
  }

  & :is(.section-darker, .section-light) {
    background: var(--mist-0);
    background-image: none;
  }

  & :is(.section, .page-hero, .hero) > .container {
    max-width: var(--max) !important;
    margin-inline: auto;
  }

  & .breadcrumb-nav {
    background: var(--mist-0);
    padding-bottom: 0;
  }

  & :is(.breadcrumb-list, .page-hero-breadcrumb) {
    font: 400 var(--fs-mono)/1.6 var(--mono);
    letter-spacing: .04em;
    overflow-wrap: anywhere;
  }

  /* The reserved column keeps the image clear of headings, leads and buttons. */
  & :is(.page-hero, .hero) {
    --inner-sphere-size: clamp(160px, 26vw, 420px);
    position: relative;
    display: block;
    min-height: 0;
    padding-block: calc(88px + clamp(64px, 7vw, 112px)) clamp(64px, 9vw, 144px);
    border-bottom: 1px solid var(--line);
    background: var(--mist-0);
    color: var(--ink-2);
    text-align: left;
    overflow: clip;
    isolation: isolate;
  }

  & .breadcrumb-nav + :is(.page-hero, .hero) {
    padding-top: clamp(48px, 7vw, 112px);
  }

  & :is(.page-hero, .hero) > .container {
    padding-inline-end: calc(var(--gutter) + var(--inner-sphere-size) + clamp(24px, 4vw, 64px));
  }

  & :is(.page-hero, .hero)::before {
    content: none;
    background: none;
  }

  & :is(.page-hero, .hero)::after {
    content: '';
    position: absolute;
    top: clamp(48px, 7vw, 112px);
    right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    bottom: auto;
    left: auto;
    width: var(--inner-sphere-size);
    height: var(--inner-sphere-size);
    /* Each page brings its own topic render via --hero-art (set on <body> by the renderer). */
    background: var(--hero-art) center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
  }

  /* Pages without their own render keep a plain text hero rather than a borrowed image. */
  body:not(.has-hero-art) & :is(.page-hero, .hero)::after { content: none; }
  body:not(.has-hero-art) & :is(.page-hero, .hero) > .container { padding-inline-end: var(--gutter); }

  & :is(.page-hero, .hero) h1 {
    max-width: 18ch;
    margin: 0 0 32px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: clamp(2.75rem, 7.5vw, var(--fs-display)) !important;
    font-weight: 550 !important;
    font-variation-settings: 'wdth' 108, 'wght' 550;
    letter-spacing: -.045em;
    line-height: 1 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  & :is(.page-hero-sub, .hero-sub, .hero__content > p) {
    max-width: 52ch;
    margin-inline: 0;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-2);
    overflow-wrap: anywhere;
  }

  /* Product pages already have a second hero panel; stack it in the text column. */
  & :is(.page-hero, .hero) .feature-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  & :is(.section-header, .section-header.center) {
    max-width: none;
    margin: 0 0 clamp(32px, 4vw, 56px);
    text-align: left;
  }

  & .section-header p {
    max-width: 52ch;
    margin-inline: 0;
    color: var(--ink-2);
  }

  & :is(.section-eyebrow, .eyebrow, .section-index) {
    display: block;
    width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin: 0 0 clamp(28px, 4vw, 48px);
    color: var(--ink-2);
    font: 400 var(--fs-mono)/1.6 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  & :is(.section-eyebrow, .eyebrow)::before,
  & :is(.section-eyebrow, .eyebrow)::after {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    white-space: pre;
    transform: none;
  }

  & :is(.section-eyebrow, .eyebrow)::before { content: '[ ' counter(zsec, decimal-leading-zero) ' / '; }
  & :is(.section-eyebrow, .eyebrow)::after { content: ' ]'; }

  & :is(.page-hero, .hero) :is(.section-eyebrow, .eyebrow) {
    border-top: 0;
    padding-top: 0;
    margin-bottom: 32px;
  }

  & :is(.page-hero, .hero) :is(.section-eyebrow, .eyebrow)::before { content: '[ '; }

  & :is(.section-header h2, .feature-content > h2, .section-eyebrow + h2, .eyebrow + h2, .expansion-section > h2, .section > .container > h2) {
    max-width: 20ch;
    margin-bottom: 32px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-h2) !important;
    font-weight: 550;
    font-variation-settings: 'wdth' 105, 'wght' 550;
    letter-spacing: -.045em;
    line-height: 1.02;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  & :is(.text-gradient, .text-gradient-gold) {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
  }

  & :is(.page-hero, .hero) :is(.text-gradient, .accent) {
    color: var(--ink);
    -webkit-text-stroke: 0;
    text-decoration: underline;
    text-decoration-color: var(--amber);
    text-decoration-thickness: 1px;
    text-underline-offset: .08em;
  }

  /* Keep existing grid columns; give every tile room to shrink and wrap. */
  & :is(.services-grid, .industries-grid, .case-studies-grid, .regions-grid, .resources-grid, .testimonials-grid, .award-grid, .blog-grid, .tool-hub-grid, .link-cluster-grid, .content-card-stack, .grid-2, .grid-3, .grid-4, .process-steps) {
    gap: clamp(16px, 2vw, 28px);
  }

  & :is(.services-grid, .industries-grid, .case-studies-grid, .regions-grid, .resources-grid, .testimonials-grid, .award-grid, .blog-grid, .tool-hub-grid, .link-cluster-grid, .grid-2, .grid-3, .grid-4, .feature-layout, .contact-layout, .expansion-layout, .tool-calculator-grid, .form-row) > * {
    min-width: 0;
  }

  & :is(.feature-layout, .contact-layout) {
    gap: clamp(32px, 5vw, 80px);
  }

  & :is(.card, .card-light, .card-glass, .arch-card, .service-card, .feature-card, .industry-card, .case-card, .cs-card, .bcc-card, .result-card, .pricing-card, .stat-card, .testimonial-card, .tool-card, .framework-card, .feature-panel, .blog-card, .region-card, .process-step, .award-card, .resource-card, .contact-info-item, .content-card, .tool-calculator-card, .comparison-table-wrap, .aeo-qa-panel) {
    --ctx-h: var(--ink);
    --ctx-body: var(--ink-2);
    --ctx-muted: var(--ink-2);
    --ctx-border: var(--line);
    min-width: 0;
    max-width: 100%;
    padding: clamp(20px, 2.5vw, 36px);
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink-2);
    text-align: left !important;
    box-shadow: none;
    overflow-wrap: anywhere;
    transform: none;
    transition: transform var(--dur) var(--ease);
  }

  & :is(.card, .card-light, .card-glass, .arch-card, .service-card, .feature-card, .industry-card, .case-card, .cs-card, .bcc-card, .result-card, .pricing-card, .stat-card, .testimonial-card, .tool-card, .framework-card, .feature-panel, .blog-card, .region-card, .process-step, .award-card, .resource-card, .contact-info-item, .content-card, .tool-calculator-card, .comparison-table-wrap, .aeo-qa-panel):hover {
    border-color: var(--ink);
    background: transparent;
    color: var(--ink-2);
    box-shadow: none;
    transform: none;
  }

  & :is(.cs-card, .blog-card, .bcc-card) { padding: 0; }

  & :is(.cs-header, .cs-body, .blog-body) {
    padding: clamp(20px, 2.5vw, 32px);
    background: transparent;
  }

  & .cs-header { min-height: 0; border-bottom: 1px solid var(--line); }

  & :is(.card, .service-card, .industry-card, .cs-header, .region-card, .resource-card, .tool-card, .content-card, .process-step) :is(h2, h3) {
    color: var(--ink);
    font-size: clamp(1.25rem, 1.8vw, 2rem);
    font-weight: 500;
    font-variation-settings: 'wdth' 105, 'wght' 500;
    letter-spacing: -.035em;
    line-height: 1.1;
  }

  & :is(.service-card, .feature-panel)::before,
  & :is(.cta-banner, .cta-section, .section-cta)::before,
  & :is(.cta-banner, .cta-section, .section-cta)::after {
    content: none;
    background: none;
  }

  & .hero-grid-bg { display: none; background: none; mask-image: none; }
  & :is(.blog-thumb, .bcc-img, .hero-image-placeholder) { background: var(--mist-1); }
  & :is(.timeline, .arch-connector)::before { width: 1px; background: var(--line); opacity: 1; }
  & .service-link { color: var(--ink); transition: none; }

  & :is(.contact-info-item, .aeo-qa-item) {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 22px 0;
    background: transparent;
    box-shadow: none;
  }

  /* Contact's call outline currently has no class; flatten its existing wrapper. */
  & .contact-layout > :last-child > div:first-child {
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    padding: 24px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  & .contact-info-value { overflow-wrap: anywhere; }
  & .faq-list { max-width: 68ch; }

  /* Metrics are ledger entries, with no individual boxes or tinted numbers. */
  & :is(.stats-grid, .metrics-row, .results-grid, .cs-single-metrics, .tool-results) {
    gap: clamp(16px, 2vw, 28px);
    min-width: 0;
  }

  & .cs-metrics { flex-wrap: wrap; gap: 16px; }
  & .cs-metrics > * { flex: 1 1 100px; }

  & :is(.stat, .metric, .metric-item, .cs-big-metric, .tool-result-card, .stats-grid > *, .metrics-row > *, .results-grid > *, .cs-metrics > *) {
    min-width: 0;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    padding: 22px 0 !important;
    background: transparent !important;
    color: var(--ink-2);
    text-align: left !important;
    box-shadow: none !important;
  }

  & :is(.metric-num, .metric-value, .stat-num, .stat-number, .stat-value, .result-value, .cs-big-val, .tool-result-card > strong) {
    display: block;
    max-width: 100%;
    margin-bottom: 12px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: clamp(2.5rem, 5.6vw, 5.5rem) !important;
    font-weight: 500;
    line-height: 1;
    font-variation-settings: 'wdth' 105, 'wght' 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
  }

  & .cs-metric-val {
    display: block;
    color: var(--ink);
    font: 500 clamp(1.8rem, 3vw, 3rem)/1 var(--sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
  }

  & :is(.metric-label, .stat-label, .result-label, .cs-big-label, .cs-metric-label, .tool-result-label) {
    display: block;
    max-width: 28ch;
    margin-inline: 0;
    color: var(--ink-2);
    font: 400 var(--fs-small)/1.5 var(--sans);
  }

  & .step-num {
    color: var(--ink-2);
    opacity: 1;
    font: 400 2rem/1 var(--mono);
    font-variant-numeric: tabular-nums;
    margin-bottom: 24px;
  }

  /* One glass surface makes the main invitation distinct from the ledger. */
  & :is(.cta-banner, .cta-sidebar-card, .cta-inline-card, .lead-magnet, .cta-section > .container:not(:has(.cta-banner)), .section-cta > .container:not(:has(.cta-banner))) {
    min-width: 0;
    padding: clamp(20px, 4vw, 64px);
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-card);
    background: var(--glass);
    color: var(--ink-2);
    text-align: left;
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(18px) saturate(1.2);
    transform: none;
  }

  & :is(.cta-banner, .cta-section, .section-cta) h2 {
    max-width: 18ch;
    font-size: clamp(2.5rem, 6.5vw, 7.5rem);
    font-weight: 550;
    font-variation-settings: 'wdth' 105, 'wght' 550;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--ink);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  & :is(.cta-sidebar-card, .cta-inline-card) { padding: clamp(20px, 2vw, 28px); }
  & :is(.cta-sidebar-card, .cta-inline-card) h3 { color: var(--ink); font-size: var(--fs-h3); letter-spacing: -.035em; }

  & :is(.cta-banner, .cta-section, .section-cta, .lead-magnet) p {
    max-width: 52ch;
    margin-inline: 0;
    color: var(--ink-2);
  }

  & .lead-magnet > * { min-width: 0 !important; max-width: 100%; }
  & :is(.cta-actions, .hero-actions) { justify-content: flex-start; }

  & :is(.btn, .btn-primary, .btn-emerald) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    max-width: 100%;
    padding: 11px 20px;
    border: 1px solid var(--ink);
    border-radius: var(--radius-full);
    background: var(--ink);
    color: var(--mist-0);
    font: 500 var(--fs-small)/1.35 var(--sans);
    letter-spacing: -.01em;
    text-transform: none;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: none;
    transform: none;
    transition: transform var(--dur) var(--ease);
  }

  & .btn:not(:is(.btn-ghost, .btn-outline, .btn-outline-blue, .blog-filter-pill))::before {
    content: '';
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
  }

  & :is(.btn, .btn-primary, .btn-emerald):hover {
    background: var(--ink-2);
    border-color: var(--ink-2);
    color: var(--mist-0);
    box-shadow: none;
    transform: none;
  }

  & :is(.btn-ghost, .btn-outline, .btn-outline-blue, .blog-filter-pill) {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
    backdrop-filter: none;
  }

  & :is(.btn-ghost, .btn-outline, .btn-outline-blue, .blog-filter-pill):hover {
    background: var(--mist-1);
    border-color: var(--ink);
    color: var(--ink);
  }

  & .blog-filter-pill[aria-pressed="true"] { background: var(--ink); color: var(--mist-0); }

  & .tool-field input { background: var(--mist-0); border-color: var(--line); color: var(--ink); }
  & .tool-field input:focus { border-color: var(--amber); box-shadow: none; }
  & .comparison-table th { background: var(--mist-1); }

  & :focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 4px;
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    & :is(.card, .card-light, .card-glass, .arch-card, .service-card, .feature-card, .industry-card, .case-card, .cs-card, .bcc-card, .result-card, .pricing-card, .stat-card, .testimonial-card, .tool-card, .framework-card, .feature-panel, .blog-card, .region-card, .process-step, .award-card, .resource-card, .contact-info-item, .content-card):not([aria-disabled="true"]):hover,
    & .btn:hover { transform: translateY(-2px); }
  }

  @media (max-width: 639px) {
    & :is(.page-hero, .hero) { padding-bottom: 64px; }
    & :is(.page-hero, .hero)::after { display: none; }
    & :is(.page-hero, .hero) > .container { padding-inline-end: var(--gutter); }
    & :is(.page-hero, .hero) h1 { font-size: clamp(2.5rem, 10.7vw, 4.25rem) !important; }

    & :is(.services-grid, .industries-grid, .case-studies-grid, .regions-grid, .resources-grid, .testimonials-grid, .award-grid, .blog-grid, .tool-hub-grid, .link-cluster-grid, .process-steps, .stats-grid, .metrics-row, .results-grid, .cs-single-metrics) {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    & :is(.cta-actions, .hero-actions) { align-items: stretch; }
    & :is(.cta-actions, .hero-actions) .btn { width: 100%; }
    & .comparison-table-wrap { padding: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    & *, & *::before, & *::after { animation: none !important; transition: none !important; }
    & :is(.btn, .card, .service-card, .industry-card, .cs-card, .blog-card, .region-card, .tool-card, .content-card):hover { transform: none; }
  }
}