/** (PREGNORF ✅) DMXReady 2026 — Shared Components
 * Reusable premium component pack promoted from the /apps/ visual language.
 * Layer order: foundation (dmxr4-2026-public.css) -> components -> route/local CSS.
 */
.dmxr4-public-2026,
[data-dmxr-kit="dmxready-2026"],
[data-skin="dmxready-2026"],
.dmxr-styleguide{
  --dmxr-shell-padding: clamp(18px, 2vw, 28px);
  --dmxr-shell-padding-lg: clamp(22px, 2.3vw, 34px);
  --dmxr-card-padding: clamp(14px, 1.4vw, 20px);
  --dmxr-card-gap: var(--dmxr-space-4, 16px);
  --dmxr-action-min: 220px;
  --dmxr-action-min-sm: 180px;
  --dmxr-media-radius: var(--dmxr-radius-lg);
}

.dmxr4-public-2026 :where(.dmxr4-section-shell, .dmxr-section-shell, .dmxr-shell-premium, .dmxr-shell-spotlight, .dmxr-shell-final-cta, .dmxr-pdp-shell),
.dmxr-styleguide :where(.dmxr4-section-shell, .dmxr-section-shell, .dmxr-shell-premium, .dmxr-shell-spotlight, .dmxr-shell-final-cta, .dmxr-pdp-shell){
  background: var(--dmxr-surface-bg);
  border: 1px solid var(--dmxr-surface-border);
  border-radius: 0;
  box-shadow: var(--dmxr-shadow-md);
  color: var(--dmxr-text);
}

.dmxr4-public-2026 :where(.dmxr4-section-shell, .dmxr-section-shell, .dmxr-shell-premium, .dmxr-shell-spotlight, .dmxr-shell-final-cta),
.dmxr-styleguide :where(.dmxr4-section-shell, .dmxr-section-shell, .dmxr-shell-premium, .dmxr-shell-spotlight, .dmxr-shell-final-cta){
  padding: var(--dmxr-shell-padding);
}

.dmxr4-public-2026 :where(.dmxr-shell-spotlight, .dmxr-shell-final-cta, .dmxr-pdp-card--spotlight),
.dmxr-styleguide :where(.dmxr-shell-spotlight, .dmxr-shell-final-cta, .dmxr-pdp-card--spotlight){
  background:
    radial-gradient(720px 240px at 82% 0%, color-mix(in srgb, var(--dmxr-brand) 20%, transparent), transparent 72%),
    radial-gradient(640px 220px at 12% 0%, color-mix(in srgb, var(--dmxr-brand-2) 12%, transparent), transparent 68%),
    var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg));
  border-color: var(--dmxr-surface-border-strong, var(--dmxr-surface-border));
  box-shadow: var(--dmxr-shadow-lg);
}

.dmxr4-public-2026 :where(.dmxr-dark-surface),
.dmxr-styleguide :where(.dmxr-dark-surface){
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dmxr-page-bg) 84%, transparent), color-mix(in srgb, var(--dmxr-page-bg-2) 88%, transparent));
  color: var(--dmxr-text);
}

.dmxr4-public-2026 :where(.dmxr-border-glow),
.dmxr-styleguide :where(.dmxr-border-glow){
  border-color: color-mix(in srgb, var(--dmxr-brand) 30%, var(--dmxr-surface-border-strong, var(--dmxr-surface-border)));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dmxr-brand) 12%, transparent),
    var(--dmxr-shadow-lg);
}

.dmxr4-public-2026 :where(.dmxr4-surface-card, .dmxr-surface-card, .dmxr-surface-card-premium, .dmxr-spotlight-card, .dmxr-snapshot-card, .dmxr-compare-card, .dmxr-pdp-card),
.dmxr-styleguide :where(.dmxr4-surface-card, .dmxr-surface-card, .dmxr-surface-card-premium, .dmxr-spotlight-card, .dmxr-snapshot-card, .dmxr-compare-card, .dmxr-pdp-card){
  background: var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg));
  border: 1px solid var(--dmxr-surface-border);
  border-radius: var(--dmxr-radius-lg);
  box-shadow: var(--dmxr-shadow-md);
  color: var(--dmxr-text);
  padding: var(--dmxr-card-padding);
}

.dmxr4-public-2026 :where(.dmxr-spotlight-card, .dmxr-pdp-card--spotlight),
.dmxr-styleguide :where(.dmxr-spotlight-card, .dmxr-pdp-card--spotlight){
  position: relative;
  overflow: hidden;
}

.dmxr4-public-2026 :where(.dmxr-spotlight-card::before, .dmxr-pdp-card--spotlight::before),
.dmxr-styleguide :where(.dmxr-spotlight-card::before, .dmxr-pdp-card--spotlight::before){
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 180px at 18% 0%, color-mix(in srgb, var(--dmxr-brand) 16%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 38%);
  opacity: .85;
}

.dmxr4-public-2026 :where(.dmxr-snapshot-card, .dmxr-compare-card, .dmxr-spotlight-card, .dmxr-pdp-card),
.dmxr-styleguide :where(.dmxr-snapshot-card, .dmxr-compare-card, .dmxr-spotlight-card, .dmxr-pdp-card){
  display: grid;
  gap: var(--dmxr-card-gap);
  align-content: start;
}

.dmxr4-public-2026 :where(.dmxr-compare-card),
.dmxr-styleguide :where(.dmxr-compare-card){
  border-color: var(--dmxr-surface-border-strong, var(--dmxr-surface-border));
}

.dmxr4-public-2026 :where(.dmxr-heading-rhythm > *),
.dmxr-styleguide :where(.dmxr-heading-rhythm > *){
  margin-top: 0;
  margin-bottom: 0;
}

.dmxr4-public-2026 :where(.dmxr-heading-rhythm > * + *),
.dmxr-styleguide :where(.dmxr-heading-rhythm > * + *){
  margin-top: clamp(10px, 1.1vw, 14px);
}

.dmxr4-public-2026 :where(.dmxr-heading-rhythm h1, .dmxr-heading-rhythm h2, .dmxr-heading-rhythm h3),
.dmxr-styleguide :where(.dmxr-heading-rhythm h1, .dmxr-heading-rhythm h2, .dmxr-heading-rhythm h3){
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--dmxr-text);
}

.dmxr4-public-2026 :where(.dmxr-heading-rhythm p, .dmxr-heading-rhythm li),
.dmxr-styleguide :where(.dmxr-heading-rhythm p, .dmxr-heading-rhythm li){
  color: var(--dmxr-text-muted);
}

.dmxr4-public-2026 :where(.dmxr-proof-chip-grid, .dmxr4-proof-chip-grid, .dmxr-proofMeta, .dmxr-chipRow, .dmxr-chip-row-premium, .dmxr-chip-set),
.dmxr-styleguide :where(.dmxr-proof-chip-grid, .dmxr4-proof-chip-grid, .dmxr-proofMeta, .dmxr-chipRow, .dmxr-chip-row-premium, .dmxr-chip-set){
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dmxr-space-3, 12px);
}

.dmxr4-public-2026 :where(.dmxr-proof-chip, .dmxr-chip, .dmxr4-proof-chip, .dmxr4-chip, .dmxr4-showroom-chip),
.dmxr-styleguide :where(.dmxr-proof-chip, .dmxr-chip, .dmxr4-proof-chip, .dmxr4-chip, .dmxr4-showroom-chip){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dmxr-chip-min-h);
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--dmxr-surface-border);
  background: color-mix(in srgb, var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg)) 84%, transparent);
  color: var(--dmxr-text);
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
}

.dmxr4-public-2026 :where(.dmxr-metric-row, .dmxr-pdp-metric-grid),
.dmxr-styleguide :where(.dmxr-metric-row, .dmxr-pdp-metric-grid){
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dmxr-space-3, 12px);
}

.dmxr4-public-2026 :where(.dmxr-metric-tile, .dmxr-pdp-metric),
.dmxr-styleguide :where(.dmxr-metric-tile, .dmxr-pdp-metric){
  padding: 14px;
  border-radius: var(--dmxr-radius-md);
  border: 1px solid var(--dmxr-surface-border);
  background: color-mix(in srgb, var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg)) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.dmxr4-public-2026 :where(.dmxr-metric-tile strong, .dmxr-pdp-metric strong),
.dmxr-styleguide :where(.dmxr-metric-tile strong, .dmxr-pdp-metric strong){
  display: block;
  font-size: 1.35rem;
  line-height: 1.05;
  color: var(--dmxr-text);
}

.dmxr4-public-2026 :where(.dmxr-metric-tile span, .dmxr-pdp-metric span),
.dmxr-styleguide :where(.dmxr-metric-tile span, .dmxr-pdp-metric span){
  display: block;
  margin-top: 6px;
  color: var(--dmxr-text-muted);
  font-size: .92rem;
}

.dmxr4-public-2026 :where(.dmxr-cta-row, .dmxr-cta-strip, .dmxr-cta-stack),
.dmxr-styleguide :where(.dmxr-cta-row, .dmxr-cta-strip, .dmxr-cta-stack){
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.dmxr4-public-2026 :where(.dmxr-cta-strip),
.dmxr-styleguide :where(.dmxr-cta-strip){
  padding: 14px 16px;
  border-radius: var(--dmxr-radius-md);
  border: 1px solid var(--dmxr-surface-border);
  background: color-mix(in srgb, var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg)) 88%, transparent);
}

.dmxr4-public-2026 :where(.dmxr-cta-stack),
.dmxr-styleguide :where(.dmxr-cta-stack){
  align-items: stretch;
}

.dmxr4-public-2026 :where(.dmxr-cta-row, .dmxr-cta-strip, .dmxr-cta-stack, .dmxr-command-rail){
  list-style: none;
  margin: 0;
  padding: 0;
}

.dmxr4-public-2026 :where(.dmxr-cta-row > li, .dmxr-cta-row > div, .dmxr-cta-row > span, .dmxr-cta-strip > li, .dmxr-cta-strip > div, .dmxr-cta-strip > span, .dmxr-cta-stack > li, .dmxr-cta-stack > div, .dmxr-cta-stack > span, .dmxr-command-rail > li, .dmxr-command-rail > div, .dmxr-command-rail > span),
.dmxr-styleguide :where(.dmxr-cta-row > li, .dmxr-cta-row > div, .dmxr-cta-row > span, .dmxr-cta-strip > li, .dmxr-cta-strip > div, .dmxr-cta-strip > span, .dmxr-cta-stack > li, .dmxr-cta-stack > div, .dmxr-cta-stack > span, .dmxr-command-rail > li, .dmxr-command-rail > div, .dmxr-command-rail > span){
  flex: 1 1 var(--dmxr-action-min);
  min-width: min(100%, var(--dmxr-action-min));
}

.dmxr4-public-2026 :where(.dmxr-cta-stack > li, .dmxr-cta-stack > div, .dmxr-cta-stack > span),
.dmxr-styleguide :where(.dmxr-cta-stack > li, .dmxr-cta-stack > div, .dmxr-cta-stack > span){
  flex-basis: 100%;
}

.dmxr4-public-2026 :where(.dmxr-cta-row a, .dmxr-cta-row button, .dmxr-cta-strip a, .dmxr-cta-strip button, .dmxr-cta-stack a, .dmxr-cta-stack button, .dmxr-command-rail a, .dmxr-command-rail button),
.dmxr-styleguide :where(.dmxr-cta-row a, .dmxr-cta-row button, .dmxr-cta-strip a, .dmxr-cta-strip button, .dmxr-cta-stack a, .dmxr-cta-stack button, .dmxr-command-rail a, .dmxr-command-rail button){
  width: 100%;
  min-height: 52px;
  justify-content: center;
  text-align: center;
}

.dmxr4-public-2026 :where(.dmxr-media-frame, .dmxr-coverFrame, .dmxr4-showroom-heroReco__media, .dmxr4-showroom-savedcard__media, .dmxr4-intake-peek__media),
.dmxr-styleguide :where(.dmxr-media-frame, .dmxr-coverFrame, .dmxr4-showroom-heroReco__media, .dmxr4-showroom-savedcard__media, .dmxr4-intake-peek__media){
  overflow: hidden;
  border-radius: var(--dmxr-media-radius);
}

.dmxr4-public-2026 :where(.dmxr-media-frame img, .dmxr-coverFrame img, .dmxr4-showroom-heroReco__media img, .dmxr4-showroom-savedcard__media img, .dmxr4-intake-peek__media img),
.dmxr-styleguide :where(.dmxr-media-frame img, .dmxr-coverFrame img, .dmxr4-showroom-heroReco__media img, .dmxr4-showroom-savedcard__media img, .dmxr4-intake-peek__media img){
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 0%;
}

.dmxr4-public-2026 :where(.dmxr-page-family-grid, .dmxr-component-grid, .dmxr-usage-grid),
.dmxr-styleguide :where(.dmxr-page-family-grid, .dmxr-component-grid, .dmxr-usage-grid){
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dmxr-space-3, 12px);
}

.dmxr4-public-2026 :where(.dmxr-page-family-card, .dmxr-component-card, .dmxr-usage-card),
.dmxr-styleguide :where(.dmxr-page-family-card, .dmxr-component-card, .dmxr-usage-card){
  background: var(--dmxr-surface-bg);
  border: 1px solid var(--dmxr-surface-border);
  border-radius: var(--dmxr-radius-md);
  padding: 14px;
  box-shadow: var(--dmxr-shadow-md);
  display: grid;
  gap: 8px;
}

.dmxr4-public-2026 :where(.dmxr-page-family-card strong, .dmxr-component-card strong, .dmxr-usage-card strong),
.dmxr-styleguide :where(.dmxr-page-family-card strong, .dmxr-component-card strong, .dmxr-usage-card strong){
  color: var(--dmxr-text);
}

.dmxr4-public-2026 :where(.dmxr-page-family-card p, .dmxr-component-card p, .dmxr-usage-card p),
.dmxr-styleguide :where(.dmxr-page-family-card p, .dmxr-component-card p, .dmxr-usage-card p){
  color: var(--dmxr-text-muted);
  margin: 0;
  line-height: 1.55;
}

.dmxr4-public-2026 :where(.dmxr-pdp-shell),
.dmxr-styleguide :where(.dmxr-pdp-shell){
  padding: clamp(20px, 2vw, 30px);
}

.dmxr4-public-2026 :where(.dmxr-pdp-grid),
.dmxr-styleguide :where(.dmxr-pdp-grid){
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--dmxr-space-4, 16px);
}

.dmxr4-public-2026 :where(.dmxr-pdp-eyebrow),
.dmxr-styleguide :where(.dmxr-pdp-eyebrow){
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--dmxr-surface-border);
  background: color-mix(in srgb, var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg)) 88%, transparent);
  color: var(--dmxr-text-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dmxr4-public-2026 :where(.dmxr-pdp-title),
.dmxr-styleguide :where(.dmxr-pdp-title){
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  color: var(--dmxr-text);
}

.dmxr4-public-2026 :where(.dmxr-pdp-lede),
.dmxr-styleguide :where(.dmxr-pdp-lede){
  margin: 0;
  color: var(--dmxr-text-muted);
  max-width: var(--dmxr-copy-max, 72ch);
  line-height: 1.65;
}


.dmxr4-public-2026 :where(.dmxr-app-premium-shell),
.dmxr-styleguide :where(.dmxr-app-premium-shell){
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--dmxr-radius-xl);
  border: 1px solid color-mix(in srgb, var(--dmxr-brand) 22%, var(--dmxr-surface-border-strong, var(--dmxr-surface-border)));
  background:
    radial-gradient(720px 240px at 12% 0%, color-mix(in srgb, var(--dmxr-brand) 18%, transparent), transparent 70%),
    radial-gradient(560px 220px at 88% 0%, color-mix(in srgb, var(--dmxr-brand-2) 16%, transparent), transparent 74%),
    var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg));
  box-shadow: var(--dmxr-shadow-lg);
}

.dmxr4-public-2026 :where(.dmxr-app-premium-shell::before),
.dmxr-styleguide :where(.dmxr-app-premium-shell::before){
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 34%);
  opacity: .8;
}

.dmxr4-public-2026 :where(.dmxr-command-rail),
.dmxr-styleguide :where(.dmxr-command-rail){
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.dmxr4-public-2026 :where(.dmxr-command-pill),
.dmxr-styleguide :where(.dmxr-command-pill){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--dmxr-surface-border-strong, var(--dmxr-surface-border)) 88%, transparent);
  background: color-mix(in srgb, var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg)) 90%, transparent);
  color: var(--dmxr-text);
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.dmxr4-public-2026 :where(.dmxr-command-pill--primary),
.dmxr-styleguide :where(.dmxr-command-pill--primary){
  background: linear-gradient(135deg, var(--dmxr-brand), color-mix(in srgb, var(--dmxr-brand-2, var(--dmxr-brand)) 86%, #ffffff 14%));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--dmxr-brand) 32%, transparent);
}

.dmxr4-public-2026 :where(.dmxr-app-workspace),
.dmxr-styleguide :where(.dmxr-app-workspace){
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
  gap: var(--dmxr-space-4, 16px);
}

.dmxr4-public-2026 :where(.dmxr-workspace-panel, .dmxr-side-panel-card),
.dmxr-styleguide :where(.dmxr-workspace-panel, .dmxr-side-panel-card){
  padding: clamp(16px, 1.5vw, 20px);
  border-radius: var(--dmxr-radius-lg);
  border: 1px solid var(--dmxr-surface-border);
  background: color-mix(in srgb, var(--dmxr-surface-bg-strong, var(--dmxr-surface-bg)) 92%, transparent);
  box-shadow: var(--dmxr-shadow-md);
  display: grid;
  gap: 12px;
}

.dmxr4-public-2026 :where(.dmxr-stack-card),
.dmxr-styleguide :where(.dmxr-stack-card){
  padding: 14px;
  border-radius: var(--dmxr-radius-md);
  border: 1px solid var(--dmxr-surface-border);
  background: color-mix(in srgb, var(--dmxr-surface-bg) 94%, transparent);
  display: grid;
  gap: 8px;
}

.dmxr4-public-2026 :where(.dmxr-command-pill, .dmxr-btn, .dmxr-chip),
.dmxr-styleguide :where(.dmxr-command-pill, .dmxr-btn, .dmxr-chip){
  white-space: normal;
}

@media (max-width: 980px){
  .dmxr4-public-2026 :where(.dmxr-pdp-grid, .dmxr-metric-row, .dmxr-pdp-metric-grid, .dmxr-page-family-grid, .dmxr-component-grid, .dmxr-usage-grid, .dmxr-app-workspace),
  .dmxr-styleguide :where(.dmxr-pdp-grid, .dmxr-metric-row, .dmxr-pdp-metric-grid, .dmxr-page-family-grid, .dmxr-component-grid, .dmxr-usage-grid, .dmxr-app-workspace){
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px){
  .dmxr4-public-2026 :where(.dmxr-cta-row > *, .dmxr-cta-strip > *, .dmxr-command-rail > *),
  .dmxr-styleguide :where(.dmxr-cta-row > *, .dmxr-cta-strip > *, .dmxr-command-rail > *){
    flex-basis: min(100%, var(--dmxr-action-min-sm));
    min-width: min(100%, var(--dmxr-action-min-sm));
  }
}

@media (max-width: 760px){
  .dmxr4-public-2026 :where(.dmxr-proof-chip-grid, .dmxr4-proof-chip-grid, .dmxr-proofMeta, .dmxr-chipRow, .dmxr-chip-row-premium, .dmxr-chip-set),
  .dmxr-styleguide :where(.dmxr-proof-chip-grid, .dmxr4-proof-chip-grid, .dmxr-proofMeta, .dmxr-chipRow, .dmxr-chip-row-premium, .dmxr-chip-set){
    grid-template-columns: 1fr;
  }

  .dmxr4-public-2026 :where(.dmxr-cta-row > *, .dmxr-cta-strip > *, .dmxr-cta-stack > *, .dmxr-command-rail > *),
  .dmxr-styleguide :where(.dmxr-cta-row > *, .dmxr-cta-strip > *, .dmxr-cta-stack > *, .dmxr-command-rail > *){
    width: 100%;
  }
}