/*
 * AZUVYN — MIDNIGHT MARBLE
 * The live build-time visual version — the default rendering. It is disarmed
 * only by the PUBLIC_BRAND_LEGACY_FAP=true rollback build (see src/data/brand.mjs).
 *
 * All route components continue to consume the shared semantic variables.
 * This file changes those roles once, then adds a small set of structural
 * overrides for the legacy light-surface components.
 */

:root[data-site-version="midnight-marble"] {
  color-scheme: dark;

  --mm-midnight: #0c1117;
  --mm-midnight-deep: #090d12;
  --mm-midnight-soft: #111820;
  --mm-slate: #18222b;
  --mm-slate-raised: #1d2933;
  /* Mineral, not monitor-white. These are intentionally softened to keep
     large dark/light fields from producing contrast glare. */
  --mm-mineral: #aeb9b8;
  --mm-mineral-soft: #99a7a8;
  --mm-light-ink: #2f3d43;
  --mm-light-muted: #344249;
  --mm-preview-muted: #5c6b70;
  --mm-muted: #829195;
  --mm-line: rgba(153, 167, 168, 0.16);
  --mm-line-strong: rgba(153, 167, 168, 0.28);
  --mm-signal: #5fc6b8;
  --mm-signal-hover: #70d0c3;
  --mm-signal-ink: #0b1514;
  /* Positive/up state. The light brand's #0a7d44 is tuned for a white card and
     falls to 3.4:1 on a slate one, so anything reading "up" on a THEMED
     surface takes this instead (8.6:1 on --mm-midnight-soft). */
  --mm-positive: #63c98a;

  /* Package Guide — neutral Midnight Marble with selective amethyst signals. */
  --mm-guide: #9585c3;
  --mm-guide-hover: #aa9bd2;
  --mm-guide-ink: #11151b;

  /* One type hierarchy for the entire branded surface. Components may retain
     their local variable names, but every rendered text role resolves here. */
  --mm-text-strong: var(--mm-mineral);
  --mm-text-display: #cbd4d3;
  --mm-text-body: var(--mm-mineral-soft);
  --mm-text-muted: var(--mm-muted);
  --mm-text-accent: var(--mm-signal);
  --mm-text-guide: var(--mm-guide-hover);
  --mm-text-on-accent: var(--mm-signal-ink);
  --mm-text-light-strong: var(--mm-light-ink);
  --mm-text-light-body: var(--mm-light-muted);
  --mm-text-preview: var(--mm-preview-muted);
  --mm-heading-outline: rgba(4, 9, 13, 0.86);

  /* Components consume only these semantic guide roles. */
  --mm-guide-strong: var(--mm-text-strong);
  --mm-guide-soft: var(--mm-text-body);
  --mm-guide-muted: var(--mm-text-muted);
  --mm-guide-surface: var(--mm-midnight-soft);
  --mm-guide-surface-raised: var(--mm-slate-raised);
  --mm-guide-line: rgba(149, 133, 195, 0.24);
  --mm-guide-glow: rgba(149, 133, 195, 0.14);

  --ink: var(--mm-text-strong);
  --ink-soft: var(--mm-text-body);
  --brand: var(--mm-text-strong);
  --brand-deep: var(--mm-text-strong);
  --accent: var(--mm-signal);
  /* --accent-ink is accent TEXT, read on the wash or on the page ground — NOT
     the label on a solid accent fill; that role is --color-on-accent below.
     Pointing it at the on-accent near-black collapsed the two and turned every
     accent line into dark-on-dark, which is why a dozen selectors below used
     to be patched back to the signal one at a time. */
  --accent-ink: var(--mm-text-accent);
  /* …and the OTHER ink role: the label on a solid accent fill. Here the two
     genuinely do want the near-black; the fault was one name serving both. */
  --accent-on-fill: var(--mm-text-on-accent);
  --accent-wash: rgba(95, 198, 184, 0.1);
  --accent-btn: var(--mm-signal);
  --accent-btn-hover: var(--mm-signal-hover);
  --gold: var(--mm-text-body);
  --bg: var(--mm-midnight);
  --surface: var(--mm-midnight-soft);
  --surface-2: var(--mm-slate);
  --line: var(--mm-line);
  --text: var(--mm-text-body);
  --muted: var(--mm-text-muted);
  --color-on-brand: var(--mm-text-on-accent);
  --color-on-accent: var(--mm-text-on-accent);
  --dark-text: var(--mm-text-body);
  --dark-heading: var(--mm-text-strong);
  --dark-muted: var(--mm-text-muted);
  --footer-text: var(--mm-text-body);
  --footer-strong: var(--mm-text-strong);
  --footer-muted: var(--mm-text-muted);
  --footer-hover: var(--mm-text-strong);
  --footer-icon-bg: rgba(153, 167, 168, 0.07);
  --bag-bg: var(--mm-slate-raised);
  --bag-text: var(--mm-text-strong);
  --mobile-call-bg: var(--mm-slate-raised);
  --mobile-call-ink: var(--mm-text-strong);
  --mobile-home-ink: var(--mm-text-strong);

  --font-display:
    "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1220px;
  --radius: 2px;
  --radius-lg: 4px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-md: none;
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.38);
}

html[data-site-version="midnight-marble"] {
  background:
    radial-gradient(
      ellipse 70% 52% at 8% 10%,
      rgba(95, 198, 184, 0.055),
      transparent 68%
    ),
    radial-gradient(
      ellipse 58% 48% at 94% 30%,
      rgba(149, 133, 195, 0.045),
      transparent 72%
    ),
    linear-gradient(
      140deg,
      var(--mm-midnight-soft),
      var(--mm-midnight) 42%,
      var(--mm-midnight-deep)
    );
  background-attachment: fixed;
}

html[data-site-version="midnight-marble"] body {
  position: relative;
  color: var(--mm-text-body);
  background:
    radial-gradient(
      ellipse 52rem 36rem at 9% 16%,
      rgba(29, 41, 51, 0.54),
      transparent 72%
    ),
    radial-gradient(
      ellipse 44rem 32rem at 88% 38%,
      rgba(149, 133, 195, 0.032),
      transparent 74%
    ),
    radial-gradient(
      ellipse 48rem 38rem at 54% 82%,
      rgba(95, 198, 184, 0.025),
      transparent 76%
    ),
    linear-gradient(
      118deg,
      rgba(24, 34, 43, 0.2),
      transparent 30%,
      rgba(9, 13, 18, 0.14) 62%,
      rgba(29, 41, 51, 0.18)
    ),
    linear-gradient(rgba(12, 17, 23, 0.9), rgba(12, 17, 23, 0.92)),
    url("/brand/midnight-marble-veins.svg") center top / 1600px 1400px repeat-y,
    var(--mm-midnight);
}

html[data-site-version="midnight-marble"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 15% 18%,
      rgba(95, 198, 184, 0.03),
      transparent 28%
    ),
    radial-gradient(
      circle at 84% 52%,
      rgba(174, 185, 184, 0.02),
      transparent 32%
    );
}

html[data-site-version="midnight-marble"] main h1,
html[data-site-version="midnight-marble"] main h2 {
  -webkit-text-stroke: 1px var(--mm-heading-outline);
  paint-order: stroke fill;
}

html[data-site-version="midnight-marble"] h1,
html[data-site-version="midnight-marble"] h2,
html[data-site-version="midnight-marble"] h3,
html[data-site-version="midnight-marble"] h4 {
  color: var(--mm-text-strong);
  font-family: var(--font-display);
}

html[data-site-version="midnight-marble"] main h1,
html[data-site-version="midnight-marble"] main h2 {
  color: var(--mm-text-display) !important;
}

html[data-site-version="midnight-marble"] h1 {
  font-size: clamp(3rem, 7.2vw, 6.6rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.94;
  text-wrap: balance;
}

html[data-site-version="midnight-marble"] h2 {
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-wrap: balance;
}

html[data-site-version="midnight-marble"] h3 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

html[data-site-version="midnight-marble"] p,
html[data-site-version="midnight-marble"] li,
html[data-site-version="midnight-marble"] dd {
  color: inherit;
}

html[data-site-version="midnight-marble"] a {
  color: var(--mm-text-body);
  text-underline-offset: 0.22em;
}

html[data-site-version="midnight-marble"] a:hover {
  color: var(--mm-text-strong);
}

html[data-site-version="midnight-marble"] :focus-visible {
  outline-color: var(--mm-signal);
  outline-offset: 4px;
}

html[data-site-version="midnight-marble"] .container {
  padding-inline: clamp(1.15rem, 3vw, 2.5rem);
}

html[data-site-version="midnight-marble"] .skip-link {
  border-radius: var(--radius);
}

html[data-site-version="midnight-marble"] .section {
  position: relative;
  padding-block: clamp(5rem, 10vw, 8.5rem);
  background: transparent;
  border-top: 1px solid var(--mm-line);
}

html[data-site-version="midnight-marble"] .section:nth-of-type(3n + 1) {
  background-image: radial-gradient(
    ellipse 52% 70% at 4% 48%,
    rgba(29, 41, 51, 0.2),
    transparent 72%
  );
}

html[data-site-version="midnight-marble"] .section:nth-of-type(3n + 2) {
  background-image: radial-gradient(
    ellipse 48% 68% at 96% 42%,
    rgba(95, 198, 184, 0.018),
    transparent 74%
  );
}

html[data-site-version="midnight-marble"] .section:nth-of-type(3n) {
  background-image: radial-gradient(
    ellipse 50% 64% at 78% 30%,
    rgba(149, 133, 195, 0.018),
    transparent 76%
  );
}

html[data-site-version="midnight-marble"] .section--tight {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

html[data-site-version="midnight-marble"] .section--sand {
  background:
    linear-gradient(125deg, rgba(29, 41, 51, 0.44), rgba(17, 24, 32, 0.76)),
    var(--mm-midnight-soft);
  border-block: 1px solid var(--mm-line);
}

html[data-site-version="midnight-marble"] .section--dark {
  color: var(--mm-mineral-soft);
  background:
    radial-gradient(
      ellipse 60% 90% at 92% 18%,
      rgba(29, 41, 51, 0.34),
      transparent 72%
    ),
    var(--mm-midnight-deep);
  border-block: 1px solid var(--mm-line);
}

html[data-site-version="midnight-marble"] .eyebrow,
html[data-site-version="midnight-marble"] [class$="__eyebrow"] {
  color: var(--mm-text-muted);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

html[data-site-version="midnight-marble"] .lead,
html[data-site-version="midnight-marble"] [class$="__sub"],
html[data-site-version="midnight-marble"] [class$="__body"] {
  color: var(--mm-text-muted);
}

html[data-site-version="midnight-marble"] .btn {
  min-height: 52px;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  box-shadow: none;
}

html[data-site-version="midnight-marble"] .btn:hover {
  transform: translateY(-2px);
}

html[data-site-version="midnight-marble"] .btn--primary {
  color: var(--mm-signal-ink);
  background: var(--mm-signal);
  box-shadow: none;
}

html[data-site-version="midnight-marble"] .btn--primary:hover {
  color: var(--mm-signal-ink);
  background: var(--mm-signal-hover);
  box-shadow: 0 14px 38px rgba(95, 198, 184, 0.13);
}

html[data-site-version="midnight-marble"] .btn--brand,
html[data-site-version="midnight-marble"] .btn--ghost {
  color: var(--mm-mineral);
  background: transparent;
  border-color: var(--mm-line-strong);
  box-shadow: none;
}

html[data-site-version="midnight-marble"] .btn--brand:hover,
html[data-site-version="midnight-marble"] .btn--ghost:hover {
  color: var(--mm-mineral);
  background: rgba(174, 185, 184, 0.05);
  border-color: rgba(174, 185, 184, 0.42);
  box-shadow: none;
}

html[data-site-version="midnight-marble"] .card {
  color: var(--mm-mineral-soft);
  background: rgba(17, 24, 32, 0.82);
  border: 1px solid var(--mm-line);
  border-radius: 4px;
  box-shadow: none;
}

html[data-site-version="midnight-marble"] .results-line {
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--mm-line-strong),
    var(--mm-mineral-soft)
  );
}

html[data-site-version="midnight-marble"] .badge,
html[data-site-version="midnight-marble"] [class$="__badge"],
html[data-site-version="midnight-marble"] [class$="__chip"] {
  color: var(--mm-mineral-soft);
  background: rgba(174, 185, 184, 0.055);
  border: 1px solid var(--mm-line);
  border-radius: 2px;
}

/* Shared shell */
html[data-site-version="midnight-marble"] .site-header {
  background: rgba(12, 17, 23, 0.9);
  border-bottom-color: var(--mm-line);
  box-shadow: none;
  backdrop-filter: saturate(110%) blur(14px);
}

html[data-site-version="midnight-marble"] .site-header.is-scrolled {
  background: rgba(12, 17, 23, 0.965);
  border-bottom-color: var(--mm-line-strong);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
}

html[data-site-version="midnight-marble"] .site-header__brand:hover .lockup {
  filter: drop-shadow(0 7px 16px rgba(95, 198, 184, 0.12));
}

html[data-site-version="midnight-marble"] .site-header__nav a,
html[data-site-version="midnight-marble"] .site-header__call,
html[data-site-version="midnight-marble"] .site-header__slim-call,
html[data-site-version="midnight-marble"] .site-header__slim-explore {
  color: var(--mm-mineral-soft);
  border-radius: 2px;
}

html[data-site-version="midnight-marble"] .site-header__nav a:hover,
html[data-site-version="midnight-marble"] .site-header__nav a:focus-visible,
html[data-site-version="midnight-marble"] .site-header__nav a.is-active,
html[data-site-version="midnight-marble"] .site-header__call:hover {
  color: var(--mm-mineral);
  background: rgba(174, 185, 184, 0.055);
}

html[data-site-version="midnight-marble"] .site-header__nav-label::after {
  height: 1px;
  background: var(--mm-mineral-soft);
}

html[data-site-version="midnight-marble"] .site-header__menu,
html[data-site-version="midnight-marble"] .site-header__mobile {
  color: var(--mm-mineral);
  background: rgba(17, 24, 32, 0.985);
  border-color: var(--mm-line-strong);
  border-radius: 4px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.44);
}

html[data-site-version="midnight-marble"] .site-header__menu-name,
html[data-site-version="midnight-marble"] .site-header__mobile a {
  color: var(--mm-mineral);
}

/* …except the one filled button in that menu: the rule above outranks
   .btn--primary on specificity, and mineral on the signal fill is invisible. */
html[data-site-version="midnight-marble"] .site-header__mobile a.btn--primary {
  color: var(--mm-signal-ink);
}

html[data-site-version="midnight-marble"] .site-header__menu-promise {
  color: var(--mm-muted);
}

html[data-site-version="midnight-marble"] .site-header__toggle {
  color: var(--mm-mineral);
  background: var(--mm-slate);
  border-color: var(--mm-line-strong);
  border-radius: 2px;
}

html[data-site-version="midnight-marble"] .footer {
  color: var(--mm-muted);
  background:
    radial-gradient(
      ellipse 60% 90% at 88% 20%,
      rgba(29, 41, 51, 0.28),
      transparent 72%
    ),
    linear-gradient(rgba(9, 13, 18, 0.94), rgba(9, 13, 18, 0.97)),
    url("/brand/midnight-marble-veins.svg") center 70% / 1600px auto no-repeat,
    var(--mm-midnight-deep);
  border-top: 1px solid var(--mm-line);
}

html[data-site-version="midnight-marble"] .footer a,
html[data-site-version="midnight-marble"] .footer__tag,
html[data-site-version="midnight-marble"] .footer__social-label {
  color: var(--mm-mineral-soft);
}

html[data-site-version="midnight-marble"] .footer__sub,
html[data-site-version="midnight-marble"] .footer__nap {
  color: var(--mm-muted);
}

/* Page introductions — one shared composition across the public route system. */
html[data-site-version="midnight-marble"]
  :is(
    .services-hero,
    .pricing-hero,
    .about-hero,
    .work-hero,
    .ind-hero,
    .wsite-hero,
    .ptr-hero,
    .whyhero,
    .readiness-hero,
    .svc-hero,
    .sc-hero,
    .hub-hero,
    .hero
  ) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(450px, 66svh, 680px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      ellipse 44% 70% at 14% 30%,
      rgba(29, 41, 51, 0.44),
      transparent 72%
    ),
    radial-gradient(
      ellipse 38% 64% at 88% 44%,
      rgba(149, 133, 195, 0.035),
      transparent 74%
    ),
    linear-gradient(95deg, rgba(12, 17, 23, 0.24), rgba(9, 13, 18, 0.68)),
    url("/brand/midnight-marble-veins.svg") center 30% / 1500px auto no-repeat,
    var(--mm-midnight);
  border-block: 0 1px solid var(--mm-line);
}

html[data-site-version="midnight-marble"]
  :is(
    .services-hero,
    .pricing-hero,
    .about-hero,
    .work-hero,
    .ind-hero,
    .wsite-hero,
    .ptr-hero,
    .whyhero,
    .readiness-hero,
    .svc-hero,
    .sc-hero,
    .hub-hero,
    .hero
  )::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      62deg,
      transparent 48%,
      rgba(0, 0, 0, 0.22) 48.1% 67%,
      transparent 67.1%
    ),
    radial-gradient(
      circle at 72% 36%,
      rgba(95, 198, 184, 0.028),
      transparent 28%
    );
}

html[data-site-version="midnight-marble"]
  :is(
    .services-hero__inner,
    .pricing-hero__inner,
    .about-hero__inner,
    .work-hero__inner,
    .ind-hero__inner,
    .wsite-hero__inner,
    .ptr-hero__inner,
    .whyhero__inner,
    .svc-hero__inner,
    .sc-hero__inner,
    .hub-hero__inner,
    .hero__inner
  ) {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  text-align: left;
  background: rgba(12, 17, 23, 0.22);
  border-color: var(--mm-line);
  border-radius: 4px;
  box-shadow: none;
}

html[data-site-version="midnight-marble"]
  .seo-main[data-sv]
  .seo-hero
  .seo-hero__copy {
  background: rgba(12, 17, 23, 0.22);
  border-color: var(--mm-line);
  border-radius: 4px;
  box-shadow: none;
}

html[data-site-version="midnight-marble"]
  :is(
    .services-hero,
    .pricing-hero,
    .about-hero,
    .work-hero,
    .ind-hero,
    .wsite-hero,
    .ptr-hero,
    .whyhero,
    .svc-hero,
    .sc-hero,
    .hub-hero,
    .hero
  )
  h1 {
  max-width: 14ch;
  text-transform: uppercase;
}

html[data-site-version="midnight-marble"]
  :is(.wsite-hero__hl, .ptr-hero__hl, .whyhero__hl) {
  color: var(--mm-mineral);
  font-style: normal;
}

/* Open, architectural content surfaces */
html[data-site-version="midnight-marble"]
  :is(
    .fam-nav__card,
    .ind-card,
    .ptr-pillar,
    .ptr-gp__card,
    .notes__item,
    .consult__item,
    .demos-proof__link,
    .simple-route,
    .simple-proof__item,
    .proof__door,
    .starts__card,
    .ways__path,
    .tm__card,
    .why__proof-card,
    .benefits__card,
    .menu__card,
    .numbers__card,
    .ev__card,
    .rstats__card,
    .wf-card,
    .sc__card,
    .team__card,
    .demo-card,
    .climbshow__card,
    .climb-card__inner,
    .price-card,
    .readiness-map,
    .svc-feature,
    .city-tile,
    .city-card,
    .sc-card,
    .sc-case,
    .sc-more__card
  ) {
  color: var(--mm-mineral-soft);
  background: rgba(17, 24, 32, 0.82);
  border-color: var(--mm-line);
  border-radius: 4px;
  box-shadow: none;
}

html[data-site-version="midnight-marble"]
  :is(
    .fam-nav__card,
    .ind-card,
    .demos-proof__link,
    .simple-route,
    .simple-proof__item,
    .city-tile,
    .city-card,
    .sc-more__card
  ):hover {
  color: var(--mm-mineral);
  background: rgba(24, 34, 43, 0.94);
  border-color: rgba(174, 185, 184, 0.36);
  box-shadow: none;
  transform: translateY(-2px);
}

html[data-site-version="midnight-marble"]
  :is(
    .fam-nav__label,
    .ind-card__label,
    .ind-card__headline,
    .ptr-pillar__name,
    .consult__name,
    .demos-proof__name,
    .tier__name,
    .plan__name,
    .wf-card__name,
    .svc-feature,
    .city-tile__name,
    .city-card__name,
    .sc-card__name,
    .sc-case__title,
    .sc-more__name,
    .sc-more__head
  ) {
  color: var(--mm-mineral);
}

html[data-site-version="midnight-marble"]
  :is(
    .fam-nav__promise,
    .ind-card__search,
    .ptr-pillar__outcome,
    .consult__note,
    .tier__blurb,
    .plan__promise,
    .wf-card__desc,
    .city-card__meta,
    .city-card__blurb,
    .city-card__areas,
    .sc-card__what,
    .sc-case__body
  ) {
  color: var(--mm-muted);
}

/* Pricing, plans, and configurators remain data-driven; only their skin moves. */
html[data-site-version="midnight-marble"]
  :is(.tier, .plan, .careplan, .pc, .gp__plan, .est__card, .ex__card) {
  color: var(--mm-mineral-soft);
  background: rgba(17, 24, 32, 0.9);
  border-color: var(--mm-line);
  border-radius: 4px;
  box-shadow: none;
}

html[data-site-version="midnight-marble"]
  :is(
    .cfg-builder,
    .grt-strip,
    .built-site,
    .built-collection__visual,
    .cart-consent
  ) {
  border-radius: var(--radius-lg) !important;
}

html[data-site-version="midnight-marble"]
  :is(
    .seo-main,
    .svc-pain,
    .other-svcs,
    .sc-intro,
    .sc-services,
    .sc-cases,
    .sc-more
  ) {
  color: var(--mm-mineral-soft);
  background: transparent;
}

html[data-site-version="midnight-marble"]
  :is(.plan__save, .tier__save, .cfg-preset__save) {
  color: var(--mm-mineral-soft);
  background: rgba(174, 185, 184, 0.07);
  border: 1px solid var(--mm-line);
}

html[data-site-version="midnight-marble"]
  :is(.plan__ribbon, .tier__badge, .cfg-preset__flag) {
  color: var(--mm-signal-ink);
  background: var(--mm-mineral);
  border-color: var(--mm-mineral);
  text-shadow: none;
  box-shadow: none;
}

html[data-site-version="midnight-marble"]
  :is(
    .tier__price,
    .tier__build,
    .tier__monthly,
    .plan__price,
    .ptr-gp__price
  ) {
  color: var(--mm-mineral);
}

html[data-site-version="midnight-marble"] :is(input, select, textarea) {
  min-height: 48px;
  color: var(--mm-mineral);
  background: var(--mm-midnight-soft);
  border-color: var(--mm-line-strong);
  border-radius: var(--radius) !important;
}

html[data-site-version="midnight-marble"]
  :is(input, select, textarea)::placeholder {
  color: var(--mm-muted);
}

html[data-site-version="midnight-marble"] :is(input, select, textarea):focus {
  border-color: var(--mm-signal);
  box-shadow: 0 0 0 3px rgba(95, 198, 184, 0.11);
}

/* Portfolio UI needs dark labels on its deliberately light tier markers.
   This preserves the hierarchy and fixes the former low-contrast badges. */
html[data-site-version="midnight-marble"] .step__n {
  color: var(--mm-signal-ink) !important;
}

html[data-site-version="midnight-marble"]
  :is(
    .tier-chip--launch,
    .tier-chip--growth,
    .tier-chip--signature,
    .climbshow__badge--launch,
    .climbshow__badge--growth,
    .climbshow__badge--signature,
    .climb-card__badge--launch,
    .climb-card__badge--growth,
    .climb-card__badge--signature
  ) {
  color: var(--mm-text-body);
  background: var(--mm-slate-raised);
  border-color: var(--mm-line-strong);
}

html[data-site-version="midnight-marble"]
  :is(.tier-chip--growth, .climbshow__badge--growth, .climb-card__badge--growth) {
  color: var(--mm-text-accent);
}

html[data-site-version="midnight-marble"]
  :is(
    .tier-chip--signature,
    .climbshow__badge--signature,
    .climb-card__badge--signature
  ) {
  color: var(--mm-text-guide);
}

/* Legacy feature templates carry their own bright or light-surface accents.
   Re-map those roles only inside Midnight Marble so they remain readable on
   the unified slate system without flattening the preview artwork itself. */
html[data-site-version="midnight-marble"] .sc-step__num {
  color: var(--mm-signal-ink);
}

html[data-site-version="midnight-marble"] .team__avatar {
  color: var(--mm-mineral);
  background: var(--mm-slate-raised);
  border: 1px solid var(--mm-line-strong);
}

/* .svc-hero__price, .sc-hero__price, .svc-feature__check, .sc-feature__check,
   .beat__check, .why-local__insight-label and .demo-any__cta used to be listed
   here too — every one of them was an --accent-ink consumer being patched back
   to the signal by hand. The role mapping does that now. .demo-card__cta and
   .climb-card__cta stay: they carry their own --c-deep / --brand-deep inks. */
html[data-site-version="midnight-marble"]
  :is(.demo-card__cta, .climb-card__cta) {
  color: var(--mm-signal);
}

html[data-site-version="midnight-marble"]
  :is(
    .demo-card__badge,
    .climb-card__url,
    .chrome-url,
    .frame__url,
    .climbshow__url
  ) {
  color: var(--mm-text-preview);
}

/* .bsel__call-live is excluded on purpose: it is a fixed green-on-pale-green
   pill that already clears AA in both themes, and re-inking it to the signal
   dropped it to 1.8:1 against its own background. */
html[data-site-version="midnight-marble"] .climb-story__alive {
  color: var(--mm-text-accent);
}

html[data-site-version="midnight-marble"] .tm__empty-mark {
  color: var(--mm-text-strong);
  opacity: 0.18;
}

html[data-site-version="midnight-marble"]
  :is(.climb-card__peak, .climb-card__price) {
  color: var(--mm-mineral);
}

html[data-site-version="midnight-marble"]
  .climb-card--signature
  .climb-card__price {
  color: var(--mm-mineral) !important;
}

html[data-site-version="midnight-marble"]
  .climb-card--signature
  .climb-card__cta {
  color: var(--mm-signal) !important;
}

html[data-site-version="midnight-marble"]
  :is(.chip.is-active, .tchip.is-active) {
  color: var(--mm-mineral);
  background: var(--mm-slate-raised);
  border-color: var(--mm-line-strong);
}

/* Mobile conversion remains conventional and thumb-safe. */
html[data-site-version="midnight-marble"] .callbar {
  background: rgba(12, 17, 23, 0.975);
  border-top-color: var(--mm-line-strong);
  backdrop-filter: blur(14px);
}

html[data-site-version="midnight-marble"] .callbar__btn {
  min-height: 48px;
  border-radius: 2px;
  text-transform: uppercase;
}

html[data-site-version="midnight-marble"] .callbar__btn--call,
html[data-site-version="midnight-marble"] .callbar__btn--home {
  color: var(--mm-mineral);
  background: var(--mm-slate);
  border: 1px solid var(--mm-line-strong);
}

html[data-site-version="midnight-marble"] .callbar__btn--plan,
html[data-site-version="midnight-marble"] .callbar__btn--services {
  color: var(--mm-signal-ink);
  background: var(--mm-signal);
}

@media (max-width: 760px) {
  html[data-site-version="midnight-marble"] h1 {
    font-size: clamp(2.8rem, 13vw, 4.6rem);
  }

  html[data-site-version="midnight-marble"] h2 {
    font-size: clamp(2.15rem, 10vw, 3.5rem);
  }

  html[data-site-version="midnight-marble"]
    :is(
      .services-hero,
      .pricing-hero,
      .about-hero,
      .work-hero,
      .ind-hero,
      .wsite-hero,
      .ptr-hero,
      .whyhero,
      .readiness-hero,
      .svc-hero,
      .sc-hero,
      .hub-hero,
      .hero
    ) {
    min-height: 0;
    padding-block: 4rem;
    background-position: 44% 20%;
    background-size: 1100px auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-version="midnight-marble"] *,
  html[data-site-version="midnight-marble"] *::before,
  html[data-site-version="midnight-marble"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  html[data-site-version="midnight-marble"] main h1,
  html[data-site-version="midnight-marble"] main h2 {
    -webkit-text-stroke: 0;
  }
}