/* ============================================================
   PM Hub — .pmart component layer
   Brings posts 41 and 149 onto the same design system as 189.

   v1.4 — every [class*="..."] substring selector removed. They were
   matching container, heading and list alike, which is why the key
   takeaways block drew three nested borders and the CTA buttons lost
   their label. Selectors below name real classes only.
   ============================================================ */

/* ---------- banner / hero ---------- */

.pmhub-skin .pmart-banner {
  background: linear-gradient(135deg, #F5F1FE 0%, #EFF3FE 55%, #FBFBFD 100%);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  overflow: hidden;
}
.pmhub-skin .pmart-banner h1 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -.025em;
  line-height: 1.08;
  font-size: clamp(1.9rem, 1.15rem + 3.1vw, 3.25rem);
}
.pmhub-skin .pmart-aurora { opacity: .32; }
.pmhub-skin .pmart-eyebrow { color: var(--violet-txt); }

/* ---------- intro / standfirst ---------- */

.pmhub-skin .pmart-intro,
.pmhub-skin .pmart-banner-desc {
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 70ch;
}

/* ---------- body typography ---------- */

.pmhub-skin .pmart-body p,
.pmhub-skin .pmart-body ul,
.pmhub-skin .pmart-body ol { max-width: var(--pm-measure, 74ch); }

.pmhub-skin .pmart-body h2 { margin-top: 2.6rem; }
.pmhub-skin .pmart-body strong { color: var(--ink); }

/* ---------- key takeaways ----------
   ONE card. The heading and list sit inside it with no border of
   their own — this is the bug from the screenshot. */

.pmhub-skin .pmart-takeaways-section {
  background: var(--tint);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: none;
}
.pmhub-skin .pmart-takeaways-heading,
.pmhub-skin .pmart-takeaways-list,
.pmhub-skin .pmart-takeaways-list li {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pmhub-skin .pmart-takeaways-heading {
  color: var(--violet-txt);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pmhub-skin .pmart-takeaways-list li .check {
  background: var(--violet);
  color: #fff;
}

/* ---------- criteria grid ----------
   The cards get the border, the grid wrapper does not. */

.pmhub-skin .pmart-criteria-grid {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.pmhub-skin .pmart-criteria-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
.pmhub-skin .pmart-criteria-card h3,
.pmhub-skin .pmart-criteria-card h4 {
  font-family: var(--display);
  color: var(--ink);
}
.pmhub-skin .pmart-num-badge {
  background: var(--grad);
  color: #fff;
  border: 0;
}

/* ---------- CTA card ----------
   Dark card, solid white primary button, outlined ghost button.
   Both labels get an explicit colour so neither can go white on white. */

.pmhub-skin .pmart-cta-card {
  background: var(--ink);
  border: 0;
  border-radius: 18px;
  color: #C9CEDA;
}
.pmhub-skin .pmart-cta-card h2,
.pmhub-skin .pmart-cta-card h3 {
  color: #fff;
  font-family: var(--display);
}
.pmhub-skin .pmart-cta-card .pmart-cta-eyebrow { color: var(--violet-lt); }

.pmhub-skin .pmart-cta-card .pmart-cta-btn {
  background: #fff;
  color: #0E1525;
  border: 1px solid #fff;
  border-radius: 11px;
  font-weight: 700;
  text-decoration: none;
}
.pmhub-skin .pmart-cta-card .pmart-cta-btn:hover { background: #F5F1FE; color: #0E1525; }

.pmhub-skin .pmart-cta-card .pmart-cta-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.38);
}
.pmhub-skin .pmart-cta-card .pmart-cta-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* ---------- AI panel ---------- */

.pmhub-skin .pmart-ai-panel {
  background: linear-gradient(145deg, #1B1338 0%, #3A1F78 55%, #2563EB 100%);
  border-radius: 18px;
}
.pmhub-skin .pmart-ai-panel h2,
.pmhub-skin .pmart-ai-panel h3 { font-family: var(--display); color: #fff; }

/* ---------- callouts ---------- */

.pmhub-skin .pmart-alert,
.pmhub-skin .pmart-tip,
.pmhub-skin .pmart-warn {
  border-radius: 0 12px 12px 0;
  border-left-width: 3px;
  border-left-style: solid;
}
.pmhub-skin .pmart-tip { background: var(--tint); border-left-color: var(--violet); color: var(--body); }
.pmhub-skin .pmart-alert { background: #FFFBEB; border-left-color: #D97706; color: #78350F; }
.pmhub-skin .pmart-warn { background: #FFF7ED; border-left-color: #EA580C; color: #9A3412; }

/* ---------- table of contents ---------- */

.pmhub-skin .pmart-toc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
.pmhub-skin .pmart-toc-title {
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pmhub-skin .pmart-toc-nav a { border-left: 2px solid var(--line); }
.pmhub-skin .pmart-toc-nav a:hover,
.pmhub-skin .pmart-toc-nav a.is-active {
  color: var(--violet-txt);
  border-left-color: var(--violet);
}
.pmhub-skin .pmart-toc-icon span { background: var(--violet); }

/* ---------- breadcrumbs ---------- */

.pmhub-skin .pmart-crumbs { color: var(--muted); }
.pmhub-skin .pmart-crumbs a { color: var(--muted); }
.pmhub-skin .pmart-crumbs a:hover { color: var(--violet-txt); }
.pmhub-skin .pmart-crumb-current { color: var(--ink); font-weight: 500; }

/* ---------- authorship ---------- */

.pmhub-skin .pmart-authorship-label { color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.pmhub-skin .pmart-authorship-name { color: var(--ink); font-weight: 700; }
.pmhub-skin .pmart-author-avatar-sm { background: var(--grad); color: #fff; }
.pmhub-skin .pmart-banner-meta { color: var(--muted); }

/* ---------- tables ---------- */

.pmhub-skin .pmart-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: .95em;
}
.pmhub-skin .pmart-body table th {
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: .72em;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: .8em 1em;
}
.pmhub-skin .pmart-body table td {
  border-top: 1px solid var(--line);
  padding: .8em 1em;
  font-variant-numeric: tabular-nums;
}
.pmhub-skin .pmart-body table tbody tr:hover td { background: var(--wash); }

@media (max-width: 639px) {
  .pmhub-skin .pmart-body table { display: block; overflow-x: auto; }
}

/* ---------- shell / sidebar layout ---------- */

@media (min-width: 1024px) {
  .pmhub-skin .pmart-shell { gap: 3.2rem; }
}
@media (max-width: 1023px) {
  .pmhub-skin .pmart-shell { display: block; }
  .pmhub-skin .pmart-toc { position: static; margin-bottom: 1.6rem; }
}

/* ---------- related cards ---------- */

.pmhub-skin .pmart-related { background: #FBFBFD; }
.pmhub-skin .pmart-rel-card h3 { font-family: var(--display); color: var(--ink); }
.pmhub-skin .pmart-rel-pills a:hover { border-color: var(--violet); color: var(--violet-txt); }